Spaces:
Running
Running
| /* ============================================================ | |
| VoiceVault — Design System | |
| Premium dark UI with glassmorphism & fluid animations | |
| ============================================================ */ | |
| /* ── Reset & Base ─────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #09090b; | |
| --surface-1: #111116; | |
| --surface-2: #18181f; | |
| --surface-3: #222230; | |
| --border: rgba(255,255,255,0.07); | |
| --border-bright: rgba(255,255,255,0.13); | |
| --primary: #7c3aed; | |
| --primary-h: #6d28d9; | |
| --primary-glow: rgba(124,58,237,0.35); | |
| --primary-subtle:rgba(124,58,237,0.12); | |
| --accent: #a78bfa; | |
| --accent-2: #c4b5fd; | |
| --text-1: #f4f4f8; | |
| --text-2: #a1a1b5; | |
| --text-3: #5f5f78; | |
| --success: #22c55e; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 16px; | |
| --radius-xl: 22px; | |
| --radius-full:9999px; | |
| --sidebar-w: 256px; | |
| --font: 'Inter', -apple-system, sans-serif; | |
| --mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| --ease: cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| html, body { | |
| height: 100%; | |
| font-family: var(--font); | |
| background: var(--bg); | |
| color: var(--text-1); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| overflow: hidden; | |
| } | |
| /* ── Animated Background Orbs ────────────────────────────── */ | |
| .bg-orbs { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.18; | |
| animation: drift 20s ease-in-out infinite; | |
| } | |
| .orb-1 { | |
| width: 600px; height: 600px; | |
| background: radial-gradient(circle, #7c3aed, #4f1d96); | |
| top: -200px; left: -100px; | |
| animation-duration: 22s; | |
| } | |
| .orb-2 { | |
| width: 500px; height: 500px; | |
| background: radial-gradient(circle, #2563eb, #1e40af); | |
| bottom: -100px; right: -80px; | |
| animation-duration: 28s; | |
| animation-delay: -8s; | |
| } | |
| .orb-3 { | |
| width: 350px; height: 350px; | |
| background: radial-gradient(circle, #db2777, #9d174d); | |
| top: 40%; left: 50%; | |
| animation-duration: 18s; | |
| animation-delay: -14s; | |
| opacity: 0.10; | |
| } | |
| @keyframes drift { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(40px, -60px) scale(1.05); } | |
| 66% { transform: translate(-30px, 40px) scale(0.97); } | |
| } | |
| /* ── App Shell ───────────────────────────────────────────── */ | |
| .app { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* ── Sidebar ─────────────────────────────────────────────── */ | |
| .sidebar { | |
| width: var(--sidebar-w); | |
| flex-shrink: 0; | |
| display: flex; | |
| flex-direction: column; | |
| background: rgba(17,17,22,0.85); | |
| border-right: 1px solid var(--border); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| overflow: hidden; | |
| } | |
| .sidebar-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 20px 18px 16px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .logo-icon { | |
| width: 36px; height: 36px; | |
| background: linear-gradient(135deg, var(--primary), #a855f7); | |
| border-radius: var(--radius-md); | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; | |
| box-shadow: 0 0 20px var(--primary-glow); | |
| } | |
| .logo-icon svg { width: 18px; height: 18px; color: #fff; } | |
| .logo-name { | |
| display: block; | |
| font-size: 15px; | |
| font-weight: 700; | |
| letter-spacing: -0.3px; | |
| color: var(--text-1); | |
| } | |
| .logo-tagline { | |
| display: block; | |
| font-size: 10px; | |
| color: var(--text-3); | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| } | |
| .sidebar-nav { | |
| padding: 10px 10px 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 9px 12px; | |
| border-radius: var(--radius-md); | |
| border: none; | |
| background: transparent; | |
| color: var(--text-2); | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| width: 100%; | |
| text-align: left; | |
| transition: background 0.15s var(--ease), color 0.15s var(--ease); | |
| } | |
| .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; } | |
| .nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text-1); } | |
| .nav-item.active { | |
| background: var(--primary-subtle); | |
| color: var(--accent); | |
| } | |
| .nav-item.active svg { color: var(--primary); } | |
| .sidebar-section-title { | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.8px; | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| padding: 14px 18px 6px; | |
| } | |
| #sidebar-kb-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 0 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--surface-3) transparent; | |
| } | |
| .sidebar-kb-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 7px 10px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| color: var(--text-2); | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| transition: background 0.12s, color 0.12s; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .sidebar-kb-item:hover { background: rgba(255,255,255,0.05); color: var(--text-1); } | |
| .kb-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| flex-shrink: 0; | |
| } | |
| .kb-dot.protected { background: var(--warning); } | |
| .sidebar-kb-empty { | |
| font-size: 12px; | |
| color: var(--text-3); | |
| padding: 8px 10px; | |
| font-style: italic; | |
| } | |
| .sidebar-footer { | |
| padding: 14px 18px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .version-badge { | |
| font-size: 11px; | |
| color: var(--text-3); | |
| font-family: var(--mono); | |
| } | |
| .status-dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| background: var(--success); | |
| box-shadow: 0 0 8px var(--success); | |
| animation: pulse-dot 2.5s ease-in-out infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%,100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* ── Main Content ────────────────────────────────────────── */ | |
| .main { | |
| flex: 1; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .view { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| animation: fadeIn 0.2s var(--ease); | |
| } | |
| .view.hidden { display: none; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ── View Header ─────────────────────────────────────────── */ | |
| .view-header { | |
| padding: 20px 28px 16px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| flex-shrink: 0; | |
| background: rgba(9,9,11,0.6); | |
| backdrop-filter: blur(12px); | |
| } | |
| .view-title { | |
| font-size: 18px; | |
| font-weight: 700; | |
| letter-spacing: -0.4px; | |
| color: var(--text-1); | |
| } | |
| .view-subtitle { | |
| font-size: 12.5px; | |
| color: var(--text-3); | |
| margin-top: 1px; | |
| } | |
| /* ── Ask View ────────────────────────────────────────────── */ | |
| #view-ask { | |
| display: grid; | |
| grid-template-rows: 1fr auto; | |
| height: 100%; | |
| } | |
| .chat-area { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--surface-3) transparent; | |
| } | |
| .chat-empty { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| text-align: center; | |
| color: var(--text-3); | |
| padding: 60px 40px; | |
| } | |
| .chat-empty-icon { | |
| width: 56px; height: 56px; | |
| border-radius: var(--radius-xl); | |
| background: var(--primary-subtle); | |
| display: flex; align-items: center; justify-content: center; | |
| margin-bottom: 4px; | |
| } | |
| .chat-empty-icon svg { width: 26px; height: 26px; color: var(--accent); } | |
| .chat-empty h3 { font-size: 16px; font-weight: 600; color: var(--text-2); } | |
| .chat-empty p { font-size: 13px; max-width: 300px; } | |
| .message { | |
| display: flex; | |
| gap: 12px; | |
| animation: msgIn 0.25s var(--ease); | |
| max-width: 820px; | |
| width: 100%; | |
| } | |
| .message.user { align-self: flex-end; flex-direction: row-reverse; } | |
| .message.assistant { align-self: flex-start; } | |
| @keyframes msgIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .msg-avatar { | |
| width: 32px; height: 32px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .message.user .msg-avatar { | |
| background: linear-gradient(135deg, var(--primary), #a855f7); | |
| color: #fff; | |
| } | |
| .message.assistant .msg-avatar { | |
| background: var(--surface-3); | |
| color: var(--accent); | |
| } | |
| .msg-avatar svg { width: 16px; height: 16px; } | |
| .msg-bubble { | |
| padding: 12px 16px; | |
| border-radius: var(--radius-lg); | |
| font-size: 14px; | |
| line-height: 1.65; | |
| max-width: calc(100% - 48px); | |
| } | |
| .message.user .msg-bubble { | |
| background: linear-gradient(135deg, var(--primary), #6d28d9); | |
| color: #fff; | |
| border-bottom-right-radius: var(--radius-sm); | |
| } | |
| .message.assistant .msg-bubble { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| color: var(--text-1); | |
| border-bottom-left-radius: var(--radius-sm); | |
| } | |
| .msg-bubble p { margin: 0; } | |
| .msg-bubble p + p { margin-top: 8px; } | |
| /* Citations inside answer bubble */ | |
| .citations-inline { | |
| margin-top: 12px; | |
| padding-top: 10px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .citation-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 3px 9px; | |
| border-radius: var(--radius-full); | |
| background: var(--primary-subtle); | |
| border: 1px solid rgba(124,58,237,0.25); | |
| font-size: 11.5px; | |
| color: var(--accent-2); | |
| font-family: var(--mono); | |
| cursor: pointer; | |
| transition: background 0.12s; | |
| } | |
| .citation-chip:hover { background: rgba(124,58,237,0.2); } | |
| .citation-chip svg { width: 12px; height: 12px; } | |
| .confidence-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 11px; | |
| color: var(--text-3); | |
| margin-top: 8px; | |
| padding-top: 6px; | |
| } | |
| .confidence-dot { | |
| width: 7px; height: 7px; border-radius: 50%; | |
| } | |
| .confidence-dot.high { background: var(--success); } | |
| .confidence-dot.medium { background: var(--warning); } | |
| .confidence-dot.low { background: var(--danger); } | |
| /* Typing indicator */ | |
| .typing-indicator { | |
| display: flex; align-items: center; gap: 4px; | |
| padding: 12px 16px; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| border-bottom-left-radius: var(--radius-sm); | |
| width: fit-content; | |
| } | |
| .typing-dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| background: var(--text-3); | |
| animation: typingBounce 1.2s ease-in-out infinite; | |
| } | |
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typingBounce { | |
| 0%,80%,100% { transform: translateY(0); opacity: 0.4; } | |
| 40% { transform: translateY(-6px); opacity: 1; } | |
| } | |
| /* ── Input Area ──────────────────────────────────────────── */ | |
| .input-area { | |
| border-top: 1px solid var(--border); | |
| background: rgba(9,9,11,0.8); | |
| backdrop-filter: blur(16px); | |
| padding: 16px 24px 20px; | |
| flex-shrink: 0; | |
| } | |
| /* KB chips selector */ | |
| .kb-selector-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-bottom: 12px; | |
| } | |
| .kb-selector-label { | |
| font-size: 11px; | |
| color: var(--text-3); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| white-space: nowrap; | |
| } | |
| .kb-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .kb-chip { | |
| padding: 4px 12px; | |
| border-radius: var(--radius-full); | |
| border: 1px solid var(--border-bright); | |
| background: transparent; | |
| color: var(--text-2); | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.15s var(--ease); | |
| font-family: var(--font); | |
| white-space: nowrap; | |
| } | |
| .kb-chip:hover { border-color: var(--accent); color: var(--accent); } | |
| .kb-chip.selected { | |
| background: var(--primary-subtle); | |
| border-color: var(--primary); | |
| color: var(--accent-2); | |
| font-weight: 500; | |
| } | |
| .kb-chips-empty { | |
| font-size: 12px; | |
| color: var(--text-3); | |
| font-style: italic; | |
| } | |
| /* Text + controls row */ | |
| .input-row { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-end; | |
| } | |
| .input-field-wrap { | |
| flex: 1; | |
| position: relative; | |
| } | |
| #query-input { | |
| width: 100%; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border-bright); | |
| border-radius: var(--radius-lg); | |
| padding: 12px 16px; | |
| color: var(--text-1); | |
| font-size: 14px; | |
| font-family: var(--font); | |
| resize: none; | |
| outline: none; | |
| min-height: 48px; | |
| max-height: 120px; | |
| transition: border-color 0.15s; | |
| line-height: 1.5; | |
| } | |
| #query-input::placeholder { color: var(--text-3); } | |
| #query-input:focus { border-color: var(--primary); } | |
| .input-actions { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| /* Mic button */ | |
| .mic-btn { | |
| width: 48px; height: 48px; | |
| border-radius: 50%; | |
| border: 2px solid var(--border-bright); | |
| background: var(--surface-2); | |
| color: var(--text-2); | |
| display: flex; align-items: center; justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.2s var(--ease); | |
| flex-shrink: 0; | |
| position: relative; | |
| overflow: visible; | |
| } | |
| .mic-btn svg { width: 20px; height: 20px; transition: color 0.15s; } | |
| .mic-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--primary-subtle); } | |
| .mic-btn.recording { | |
| border-color: var(--danger); | |
| color: var(--danger); | |
| background: rgba(239,68,68,0.12); | |
| animation: micPulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes micPulse { | |
| 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } | |
| 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } | |
| } | |
| /* Send button */ | |
| .send-btn { | |
| width: 48px; height: 48px; | |
| border-radius: var(--radius-md); | |
| border: none; | |
| background: var(--primary); | |
| color: #fff; | |
| display: flex; align-items: center; justify-content: center; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| transition: background 0.15s, transform 0.1s, box-shadow 0.15s; | |
| box-shadow: 0 0 20px var(--primary-glow); | |
| } | |
| .send-btn svg { width: 20px; height: 20px; } | |
| .send-btn:hover { background: var(--primary-h); transform: translateY(-1px); box-shadow: 0 4px 24px var(--primary-glow); } | |
| .send-btn:active { transform: translateY(0); } | |
| .send-btn:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; box-shadow: none; } | |
| /* TTS button */ | |
| .tts-btn { | |
| padding: 0 14px; | |
| height: 48px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-bright); | |
| background: transparent; | |
| color: var(--text-2); | |
| font-size: 13px; | |
| font-family: var(--font); | |
| cursor: pointer; | |
| display: flex; align-items: center; gap: 6px; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .tts-btn svg { width: 16px; height: 16px; } | |
| .tts-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| /* Recording status bar */ | |
| .recording-status { | |
| display: none; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12.5px; | |
| color: var(--danger); | |
| margin-top: 8px; | |
| font-weight: 500; | |
| } | |
| .recording-status.show { display: flex; } | |
| .rec-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--danger); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| .transcribing-status { | |
| display: none; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12.5px; | |
| color: var(--accent); | |
| margin-top: 8px; | |
| } | |
| .transcribing-status.show { display: flex; } | |
| .transcribing-spinner { | |
| width: 12px; height: 12px; | |
| border: 2px solid rgba(167,139,250,0.3); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| /* ── KB View ─────────────────────────────────────────────── */ | |
| #view-kbs { | |
| overflow: hidden; | |
| } | |
| .kbs-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 28px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--surface-3) transparent; | |
| } | |
| .kb-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 16px; | |
| margin-top: 4px; | |
| } | |
| .kb-card { | |
| background: var(--surface-1); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .kb-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--primary), #a855f7); | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .kb-card:hover { | |
| border-color: var(--border-bright); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.3); | |
| } | |
| .kb-card:hover::before { opacity: 1; } | |
| .kb-card-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 8px; | |
| margin-bottom: 12px; | |
| } | |
| .kb-card-name { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--text-1); | |
| letter-spacing: -0.2px; | |
| } | |
| .kb-card-slug { | |
| font-size: 11px; | |
| color: var(--text-3); | |
| font-family: var(--mono); | |
| margin-top: 2px; | |
| } | |
| .kb-lock-badge { | |
| padding: 2px 8px; | |
| border-radius: var(--radius-full); | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| background: rgba(245,158,11,0.15); | |
| color: var(--warning); | |
| border: 1px solid rgba(245,158,11,0.25); | |
| white-space: nowrap; | |
| } | |
| .kb-public-badge { | |
| padding: 2px 8px; | |
| border-radius: var(--radius-full); | |
| font-size: 10.5px; | |
| font-weight: 600; | |
| background: rgba(34,197,94,0.1); | |
| color: var(--success); | |
| border: 1px solid rgba(34,197,94,0.2); | |
| } | |
| .kb-card-stats { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 14px; | |
| } | |
| .kb-stat { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1px; | |
| } | |
| .kb-stat-value { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-1); | |
| letter-spacing: -0.5px; | |
| } | |
| .kb-stat-label { | |
| font-size: 10.5px; | |
| color: var(--text-3); | |
| text-transform: uppercase; | |
| letter-spacing: 0.4px; | |
| } | |
| .kb-card-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .kb-action-btn { | |
| flex: 1; | |
| padding: 7px 12px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-bright); | |
| background: transparent; | |
| color: var(--text-2); | |
| font-size: 12px; | |
| font-family: var(--font); | |
| cursor: pointer; | |
| transition: all 0.12s; | |
| display: flex; align-items: center; justify-content: center; gap: 5px; | |
| } | |
| .kb-action-btn svg { width: 13px; height: 13px; } | |
| .kb-action-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-1); border-color: var(--border-bright); } | |
| .kb-action-btn.danger:hover { background: rgba(239,68,68,0.1); color: var(--danger); border-color: rgba(239,68,68,0.3); } | |
| .kb-empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 80px 40px; | |
| text-align: center; | |
| color: var(--text-3); | |
| } | |
| .kb-empty-state svg { width: 40px; height: 40px; color: var(--surface-3); } | |
| .kb-empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text-2); } | |
| /* ── Analytics View ──────────────────────────────────────── */ | |
| .analytics-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 28px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--surface-3) transparent; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 28px; | |
| } | |
| .stat-card { | |
| background: var(--surface-1); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 20px 22px; | |
| transition: border-color 0.15s; | |
| } | |
| .stat-card:hover { border-color: var(--border-bright); } | |
| .stat-card-value { | |
| font-size: 32px; | |
| font-weight: 800; | |
| letter-spacing: -1.5px; | |
| color: var(--text-1); | |
| margin-bottom: 4px; | |
| } | |
| .stat-card-label { | |
| font-size: 12px; | |
| color: var(--text-3); | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.4px; | |
| } | |
| .stat-card-icon { | |
| width: 36px; height: 36px; | |
| border-radius: var(--radius-md); | |
| background: var(--primary-subtle); | |
| display: flex; align-items: center; justify-content: center; | |
| margin-bottom: 12px; | |
| } | |
| .stat-card-icon svg { width: 18px; height: 18px; color: var(--accent); } | |
| .section-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-2); | |
| margin-bottom: 14px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| /* Daily chart */ | |
| .day-chart { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| height: 100px; | |
| padding: 0 4px; | |
| margin-bottom: 28px; | |
| } | |
| .day-bar-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| flex: 1; | |
| } | |
| .day-bar { | |
| width: 100%; | |
| background: linear-gradient(to top, var(--primary), #a855f7); | |
| border-radius: 3px 3px 0 0; | |
| min-height: 3px; | |
| transition: height 0.5s var(--ease-spring); | |
| } | |
| .day-label { | |
| font-size: 10px; | |
| color: var(--text-3); | |
| font-family: var(--mono); | |
| } | |
| /* KB Table */ | |
| .analytics-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| } | |
| .analytics-table th { | |
| text-align: left; | |
| padding: 8px 12px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-3); | |
| text-transform: uppercase; | |
| letter-spacing: 0.4px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .analytics-table td { | |
| padding: 11px 12px; | |
| color: var(--text-2); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .analytics-table tr:last-child td { border-bottom: none; } | |
| .analytics-table tr:hover td { background: rgba(255,255,255,0.02); color: var(--text-1); } | |
| .analytics-table td:first-child { color: var(--text-1); font-weight: 500; } | |
| /* ── Modals ──────────────────────────────────────────────── */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.65); | |
| backdrop-filter: blur(8px); | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: overlayIn 0.15s var(--ease); | |
| } | |
| .modal-overlay.hidden { display: none; } | |
| @keyframes overlayIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .modal { | |
| background: var(--surface-1); | |
| border: 1px solid var(--border-bright); | |
| border-radius: var(--radius-xl); | |
| padding: 28px; | |
| width: 440px; | |
| max-width: 90vw; | |
| animation: modalIn 0.2s var(--ease-spring); | |
| box-shadow: 0 24px 64px rgba(0,0,0,0.5); | |
| } | |
| .modal.hidden { display: none; } | |
| @keyframes modalIn { | |
| from { opacity: 0; transform: scale(0.95) translateY(-10px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |
| .modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 22px; | |
| } | |
| .modal-title { | |
| font-size: 17px; | |
| font-weight: 700; | |
| letter-spacing: -0.3px; | |
| } | |
| .modal-close { | |
| width: 30px; height: 30px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text-3); | |
| cursor: pointer; | |
| display: flex; align-items: center; justify-content: center; | |
| transition: all 0.12s; | |
| } | |
| .modal-close:hover { background: var(--surface-3); color: var(--text-1); } | |
| .modal-close svg { width: 16px; height: 16px; } | |
| /* Form elements */ | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 16px; | |
| } | |
| .form-label { | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| color: var(--text-2); | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .form-label .optional { | |
| font-size: 11px; | |
| color: var(--text-3); | |
| font-weight: 400; | |
| } | |
| .form-input { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border-bright); | |
| border-radius: var(--radius-md); | |
| padding: 10px 14px; | |
| color: var(--text-1); | |
| font-size: 14px; | |
| font-family: var(--font); | |
| outline: none; | |
| transition: border-color 0.15s; | |
| width: 100%; | |
| } | |
| .form-input::placeholder { color: var(--text-3); } | |
| .form-input:focus { border-color: var(--primary); } | |
| .form-hint { | |
| font-size: 11.5px; | |
| color: var(--text-3); | |
| line-height: 1.4; | |
| } | |
| /* File drop zone */ | |
| .file-drop-zone { | |
| border: 2px dashed var(--border-bright); | |
| border-radius: var(--radius-lg); | |
| padding: 32px 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| color: var(--text-3); | |
| position: relative; | |
| } | |
| .file-drop-zone:hover { border-color: var(--primary); color: var(--text-2); } | |
| .file-drop-zone.drag-over { border-color: var(--primary); background: var(--primary-subtle); } | |
| .file-drop-zone input[type=file] { | |
| position: absolute; inset: 0; | |
| opacity: 0; cursor: pointer; | |
| } | |
| .file-drop-icon svg { width: 28px; height: 28px; margin-bottom: 8px; color: var(--text-3); } | |
| .file-drop-text { font-size: 13px; margin-bottom: 4px; } | |
| .file-drop-hint { font-size: 11.5px; color: var(--text-3); } | |
| .file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } | |
| .file-item { | |
| display: flex; align-items: center; gap: 6px; | |
| padding: 5px 10px; | |
| background: var(--surface-2); | |
| border-radius: var(--radius-sm); | |
| font-size: 12px; | |
| color: var(--text-2); | |
| } | |
| .file-item svg { width: 13px; height: 13px; color: var(--accent); } | |
| .modal-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 24px; | |
| justify-content: flex-end; | |
| } | |
| /* ── Buttons ─────────────────────────────────────────────── */ | |
| .btn { | |
| padding: 9px 18px; | |
| border-radius: var(--radius-md); | |
| border: none; | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| font-family: var(--font); | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| transition: all 0.15s var(--ease); | |
| white-space: nowrap; | |
| } | |
| .btn svg { width: 15px; height: 15px; } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: #fff; | |
| box-shadow: 0 0 20px var(--primary-glow); | |
| } | |
| .btn-primary:hover { background: var(--primary-h); transform: translateY(-1px); box-shadow: 0 4px 24px var(--primary-glow); } | |
| .btn-primary:active { transform: none; } | |
| .btn-secondary { | |
| background: var(--surface-2); | |
| color: var(--text-2); | |
| border: 1px solid var(--border-bright); | |
| } | |
| .btn-secondary:hover { background: var(--surface-3); color: var(--text-1); } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-2); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text-1); } | |
| .btn-danger { | |
| background: rgba(239,68,68,0.12); | |
| color: var(--danger); | |
| border: 1px solid rgba(239,68,68,0.25); | |
| } | |
| .btn-danger:hover { background: rgba(239,68,68,0.2); } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| /* ── Toasts ──────────────────────────────────────────────── */ | |
| #toasts { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| z-index: 200; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| padding: 12px 18px; | |
| border-radius: var(--radius-lg); | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| color: var(--text-1); | |
| pointer-events: auto; | |
| backdrop-filter: blur(16px); | |
| animation: toastIn 0.3s var(--ease-spring); | |
| max-width: 360px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| border: 1px solid var(--border-bright); | |
| } | |
| .toast svg { width: 16px; height: 16px; flex-shrink: 0; } | |
| .toast.success { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: #86efac; } | |
| .toast.error { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #fca5a5; } | |
| .toast.info { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.3); color: var(--accent-2); } | |
| @keyframes toastIn { | |
| from { opacity: 0; transform: translateY(12px) scale(0.95); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| /* ── Loading Spinner ─────────────────────────────────────── */ | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .spinner { | |
| width: 16px; height: 16px; | |
| border: 2px solid rgba(255,255,255,0.2); | |
| border-top-color: #fff; | |
| border-radius: 50%; | |
| animation: spin 0.7s linear infinite; | |
| flex-shrink: 0; | |
| } | |
| /* ── Scrollbars ──────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--border-bright); } | |
| /* ── Upload Progress ─────────────────────────────────────── */ | |
| .upload-progress { | |
| display: none; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .upload-progress.show { display: flex; } | |
| .upload-report-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| border-radius: var(--radius-sm); | |
| font-size: 12.5px; | |
| background: var(--surface-2); | |
| } | |
| .upload-report-item.success { border-left: 3px solid var(--success); color: var(--text-2); } | |
| .upload-report-item.error { border-left: 3px solid var(--danger); color: var(--text-2); } | |
| .upload-report-item.skip { border-left: 3px solid var(--warning); color: var(--text-2); } | |
| /* ── Waveform / Mic Animation ────────────────────────────── */ | |
| .waveform { | |
| display: none; | |
| align-items: center; | |
| gap: 3px; | |
| height: 20px; | |
| margin-right: 2px; | |
| } | |
| .waveform.show { display: flex; } | |
| .wave-bar { | |
| width: 3px; | |
| height: 4px; | |
| background: var(--danger); | |
| border-radius: 2px; | |
| animation: waveAnim 0.8s ease-in-out infinite; | |
| } | |
| .wave-bar:nth-child(2) { animation-delay: 0.1s; height: 10px; } | |
| .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 16px; } | |
| .wave-bar:nth-child(4) { animation-delay: 0.3s; height: 10px; } | |
| .wave-bar:nth-child(5) { animation-delay: 0.4s; height: 4px; } | |
| @keyframes waveAnim { | |
| 0%,100% { transform: scaleY(1); } | |
| 50% { transform: scaleY(2.5); } | |
| } | |