Created
March 11, 2026 22:20
-
-
Save KaushikShresth07/24a771d491d0470a7e07046afb80b333 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --bg: #050510; | |
| --glass-bg: rgba(10, 10, 28, 0.72); | |
| --glass-border: rgba(255, 255, 255, 0.06); | |
| --glass-hover: rgba(255, 255, 255, 0.10); | |
| --accent: #7c6aef; | |
| --accent-glow: rgba(124, 106, 239, 0.35); | |
| --accent-secondary: #4ecdc4; | |
| --text: rgba(255, 255, 255, 0.93); | |
| --text-dim: rgba(255, 255, 255, 0.50); | |
| --text-muted: rgba(255, 255, 255, 0.28); | |
| --danger: #ff6b6b; | |
| --success: #51cf66; | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| --radius-xs: 6px; | |
| --header-h: 64px; | |
| --input-bar-h: calc(88px + env(safe-area-inset-bottom, 0px)); | |
| --content-gap: 16px; | |
| --panel-gap: 14px; | |
| --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } | |
| html, body { height: 100%; overflow: hidden; overflow-x: hidden; } | |
| body { | |
| font-family: var(--font); | |
| background: var(--bg); | |
| color: var(--text); | |
| -webkit-font-smoothing: antialiased; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| button { font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; } | |
| textarea { font-family: var(--font); color: var(--text); } | |
| .glass-panel { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(32px) saturate(1.2); | |
| -webkit-backdrop-filter: blur(32px) saturate(1.2); | |
| border: 1px solid var(--glass-border); | |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); | |
| } | |
| .app { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| height: 100dvh; | |
| overflow: hidden; | |
| } | |
| #orb-container { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| translate: -50% -50%; | |
| width: min(600px, 80vw); | |
| height: min(600px, 80vw); | |
| z-index: 0; | |
| pointer-events: none; | |
| opacity: 0.35; | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| } | |
| #orb-container.active, | |
| #orb-container.speaking { | |
| opacity: 1; | |
| animation: orbPulse 1.6s ease-in-out infinite; | |
| } | |
| .header { | |
| position: relative; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| height: var(--header-h); | |
| padding: 0 24px; | |
| margin-bottom: var(--content-gap); | |
| border-radius: 0 0 var(--radius) var(--radius); | |
| border-top: none; | |
| flex-shrink: 0; | |
| } | |
| .logo { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| letter-spacing: 3px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .tagline { | |
| font-size: 0.68rem; | |
| font-weight: 300; | |
| color: var(--text-muted); | |
| letter-spacing: 0.5px; | |
| } | |
| .mode-switch { | |
| position: relative; | |
| display: flex; | |
| background: rgba(255, 255, 255, 0.04); | |
| border-radius: 12px; | |
| padding: 3px; | |
| gap: 2px; | |
| } | |
| .mode-slider { | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: calc(50% - 4px); | |
| height: calc(100% - 6px); | |
| background: var(--accent); | |
| border-radius: 10px; | |
| transition: transform var(--transition); | |
| opacity: 0.18; | |
| } | |
| .mode-slider.right { | |
| transform: translateX(calc(100% + 2px)); | |
| } | |
| .mode-switch-three { | |
| min-width: 0; | |
| } | |
| .mode-switch-three .mode-btn { | |
| flex: 1; | |
| min-width: 0; | |
| justify-content: center; | |
| padding: 7px 10px; | |
| } | |
| .mode-switch-three .mode-slider { | |
| width: calc(33.333% - 4px); | |
| } | |
| .mode-switch-three .mode-slider.center { | |
| transform: translateX(calc(100% + 2px)); | |
| } | |
| .mode-switch-three .mode-slider.right { | |
| transform: translateX(calc(200% + 4px)); | |
| } | |
| .mode-btn { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 7px 16px; | |
| font-size: 0.76rem; | |
| font-weight: 500; | |
| border-radius: 10px; | |
| color: var(--text-dim); | |
| transition: color var(--transition); | |
| white-space: nowrap; | |
| } | |
| .mode-btn.active { color: var(--text); } | |
| .mode-btn svg { | |
| opacity: 0.7; | |
| width: 16px; | |
| height: 16px; | |
| min-width: 16px; | |
| min-height: 16px; | |
| flex-shrink: 0; | |
| } | |
| .mode-btn.active svg { opacity: 1; } | |
| .header-left { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; min-width: 0; } | |
| .header-center { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-shrink: 0; | |
| flex-wrap: nowrap; | |
| } | |
| .status-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.7rem; | |
| font-weight: 400; | |
| color: var(--text-dim); | |
| } | |
| .status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--success); | |
| box-shadow: 0 0 6px var(--success); | |
| animation: pulse-dot 2s ease-in-out infinite; | |
| } | |
| .status-dot.offline { | |
| background: var(--danger); | |
| box-shadow: 0 0 6px var(--danger); | |
| animation: none; | |
| } | |
| .btn-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 34px; | |
| height: 34px; | |
| min-width: 34px; | |
| min-height: 34px; | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--glass-border); | |
| transition: background var(--transition), border-color var(--transition); | |
| touch-action: manipulation; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .btn-icon:hover { | |
| background: var(--glass-hover); | |
| border-color: rgba(255, 255, 255, 0.14); | |
| } | |
| .chat-area { | |
| position: relative; | |
| z-index: 5; | |
| flex: 1; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding: 24px 24px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| scroll-behavior: smooth; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .welcome-screen { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| flex: 1; | |
| gap: 16px; | |
| padding: 48px 24px; | |
| animation: fadeIn 0.6s ease; | |
| } | |
| .welcome-icon { | |
| color: var(--accent); | |
| opacity: 0.5; | |
| margin-bottom: 6px; | |
| } | |
| .welcome-title { | |
| font-size: 1.7rem; | |
| font-weight: 600; | |
| background: linear-gradient(135deg, var(--text), var(--accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .welcome-sub { | |
| font-size: 0.9rem; | |
| color: var(--text-dim); | |
| font-weight: 300; | |
| } | |
| .welcome-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 12px; | |
| margin-top: 24px; | |
| } | |
| .chip { | |
| padding: 10px 20px; | |
| font-size: 0.76rem; | |
| font-weight: 400; | |
| border-radius: 20px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-dim); | |
| transition: all var(--transition); | |
| } | |
| .chip:hover { | |
| background: var(--accent); | |
| color: #fff; | |
| border-color: var(--accent); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(124, 106, 239, 0.25); | |
| } | |
| .message { | |
| display: flex; | |
| gap: 12px; | |
| max-width: 720px; | |
| width: 100%; | |
| margin: 0 auto; | |
| animation: msgIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .message.user { flex-direction: row-reverse; } | |
| .msg-avatar { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 10px; | |
| display: grid; | |
| place-items: center; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| flex-shrink: 0; | |
| margin-top: 4px; | |
| } | |
| .msg-avatar .msg-avatar-icon { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .message.assistant .msg-avatar { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); | |
| color: #fff; | |
| } | |
| .message.user .msg-avatar { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--text-dim); | |
| } | |
| .msg-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| min-width: 0; | |
| } | |
| .msg-content { | |
| padding: 14px 18px; | |
| border-radius: var(--radius); | |
| font-size: 0.87rem; | |
| line-height: 1.65; | |
| font-weight: 400; | |
| word-wrap: break-word; | |
| white-space: pre-wrap; | |
| } | |
| .message.assistant .msg-content { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.07); | |
| border-top-left-radius: var(--radius-xs); | |
| } | |
| .message.user .msg-content { | |
| background: rgba(124, 106, 239, 0.13); | |
| border: 1px solid rgba(124, 106, 239, 0.16); | |
| border-top-right-radius: var(--radius-xs); | |
| } | |
| .msg-label { | |
| font-size: 0.66rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| padding: 0 4px; | |
| } | |
| .message.user .msg-label { text-align: right; } | |
| .stream-cursor { | |
| animation: blink 0.8s step-end infinite; | |
| color: var(--accent); | |
| margin-left: 1px; | |
| } | |
| .input-bar { | |
| position: relative; | |
| z-index: 10; | |
| padding: 14px 24px 14px; | |
| padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)); | |
| margin-top: var(--content-gap); | |
| border-radius: var(--radius) var(--radius) 0 0; | |
| border-bottom: none; | |
| flex-shrink: 0; | |
| box-shadow: none; | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 14px; | |
| padding: 8px 8px 8px 18px; | |
| transition: border-color var(--transition); | |
| box-shadow: none; | |
| } | |
| .input-wrapper:focus-within { | |
| border-color: rgba(255, 255, 255, 0.14); | |
| } | |
| .input-wrapper textarea { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| font-size: 0.87rem; | |
| line-height: 1.5; | |
| padding: 8px 0; | |
| max-height: 120px; | |
| color: var(--text); | |
| } | |
| .input-wrapper textarea::placeholder { color: var(--text-muted); } | |
| .input-wrapper textarea:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .input-actions { | |
| display: flex; | |
| gap: 6px; | |
| padding-bottom: 2px; | |
| flex-shrink: 0; | |
| } | |
| .action-btn { | |
| display: grid; | |
| place-items: center; | |
| width: 38px; | |
| height: 38px; | |
| min-width: 38px; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| transition: all var(--transition); | |
| color: var(--text-dim); | |
| flex-shrink: 0; | |
| } | |
| .action-btn:hover { | |
| background: rgba(255, 255, 255, 0.12); | |
| border-color: rgba(255, 255, 255, 0.16); | |
| color: var(--text); | |
| transform: translateY(-1px); | |
| } | |
| .action-btn:active { | |
| transform: translateY(0); | |
| } | |
| .send-btn { | |
| background: var(--accent) !important; | |
| border-color: var(--accent) !important; | |
| color: #fff !important; | |
| box-shadow: 0 2px 8px rgba(124, 106, 239, 0.25); | |
| } | |
| .send-btn:hover { | |
| background: #6a58e0 !important; | |
| border-color: #6a58e0 !important; | |
| box-shadow: 0 4px 14px rgba(124, 106, 239, 0.35); | |
| } | |
| .send-btn:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| box-shadow: none; | |
| transform: none; | |
| animation: sendBtnPulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes sendBtnPulse { | |
| 0%, 100% { opacity: 0.5; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .mic-btn .mic-icon-active { display: none; } | |
| .mic-btn.listening .mic-icon { display: none; } | |
| .mic-btn.listening .mic-icon-active { display: block; } | |
| .mic-btn.listening { | |
| background: rgba(255, 107, 107, 0.18); | |
| border-color: rgba(255, 107, 107, 0.3); | |
| color: var(--danger); | |
| animation: micPulse 1.5s ease-in-out infinite; | |
| } | |
| .mic-btn.auto-listen:not(.listening) { | |
| border-color: rgba(78, 205, 196, 0.4); | |
| box-shadow: 0 0 0 1px rgba(78, 205, 196, 0.2); | |
| } | |
| .tts-btn .tts-icon-on { display: none; } | |
| .tts-btn.tts-active .tts-icon-off { display: none; } | |
| .tts-btn.tts-active .tts-icon-on { display: block; } | |
| .tts-btn.tts-active { | |
| background: rgba(124, 106, 239, 0.18); | |
| border-color: rgba(124, 106, 239, 0.3); | |
| color: var(--accent); | |
| } | |
| .tts-btn.tts-speaking { | |
| animation: ttsPulse 1.5s ease-in-out infinite; | |
| } | |
| .input-meta { | |
| display: flex; | |
| justify-content: flex-end; | |
| align-items: center; | |
| padding: 6px 12px 0; | |
| min-height: 0; | |
| font-size: 0.66rem; | |
| color: var(--text-muted); | |
| } | |
| .panel-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 19; | |
| background: transparent; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| pointer-events: none; | |
| } | |
| .panel-overlay.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| pointer-events: none; | |
| } | |
| .speech-widget { | |
| position: fixed; | |
| bottom: calc(var(--input-bar-h) + var(--panel-gap)); | |
| left: 50%; | |
| transform: translateX(-50%) translateY(8px); | |
| z-index: 15; | |
| min-width: min(320px, 90vw); | |
| max-width: min(560px, 95vw); | |
| padding: 14px 20px; | |
| border-radius: 16px; | |
| background: rgba(10, 10, 28, 0.65); | |
| backdrop-filter: blur(24px) saturate(1.3); | |
| -webkit-backdrop-filter: blur(24px) saturate(1.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 106, 239, 0.08); | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; | |
| } | |
| .speech-widget.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateX(-50%) translateY(0); | |
| animation: speechWidgetIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| @keyframes speechWidgetIn { | |
| from { opacity: 0; transform: translateX(-50%) translateY(12px); } | |
| to { opacity: 1; transform: translateX(-50%) translateY(0); } | |
| } | |
| .speech-widget-inner { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .speech-widget-label { | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .speech-widget-label::before { | |
| content: ''; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--danger); | |
| animation: pulse-dot 1.2s ease-in-out infinite; | |
| } | |
| .speech-widget-text { | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| color: var(--text); | |
| min-height: 1.5em; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| } | |
| .speech-widget-text:empty::before { | |
| content: 'Speak now...'; | |
| color: var(--text-muted); | |
| font-style: italic; | |
| } | |
| .toast-container { | |
| position: fixed; | |
| bottom: 100px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 100; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| padding: 12px 20px; | |
| background: rgba(20, 20, 35, 0.95); | |
| border: 1px solid rgba(255, 107, 107, 0.4); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| max-width: min(400px, 90vw); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); | |
| opacity: 0; | |
| transform: translateY(12px); | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| pointer-events: auto; | |
| cursor: pointer; | |
| } | |
| .toast.toast-visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .activity-panel { | |
| position: fixed; | |
| top: calc(var(--header-h) + var(--panel-gap)); | |
| left: 0; | |
| bottom: calc(var(--input-bar-h) + var(--panel-gap)); | |
| width: min(340px, 90vw); | |
| min-width: 0; | |
| height: auto; | |
| z-index: 6; | |
| display: flex; | |
| flex-direction: column; | |
| border-radius: 0 var(--radius) var(--radius) 0; | |
| box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); | |
| overflow: hidden; | |
| transform: translateX(-100%); | |
| transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .activity-panel.open { | |
| transform: translateX(0); | |
| } | |
| .activity-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 18px 20px; | |
| border-bottom: 1px solid var(--glass-border); | |
| flex-shrink: 0; | |
| } | |
| .activity-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .activity-title::before { | |
| content: ''; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 8px rgba(124, 106, 239, 0.5); | |
| } | |
| .activity-close { | |
| display: grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-dim); | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .activity-close:hover { | |
| background: rgba(255, 255, 255, 0.12); | |
| color: var(--text); | |
| } | |
| .activity-list { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding: 16px 20px 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| scroll-behavior: smooth; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| .activity-list::-webkit-scrollbar { display: none; } | |
| .activity-empty { | |
| padding: 24px 16px; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| text-align: center; | |
| line-height: 1.5; | |
| } | |
| .activity-item { | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid rgba(255, 255, 255, 0.07); | |
| font-size: 0.78rem; | |
| line-height: 1.55; | |
| animation: activityIn 0.25s ease-out; | |
| } | |
| .activity-item .activity-event { | |
| font-weight: 600; | |
| color: var(--accent); | |
| margin-bottom: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .activity-step { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 20px; | |
| height: 20px; | |
| padding: 0 5px; | |
| border-radius: 6px; | |
| background: rgba(124, 106, 239, 0.2); | |
| color: var(--accent); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| } | |
| .activity-item .activity-detail { | |
| color: var(--text-dim); | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| white-space: pre-wrap; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .activity-item.route-general .activity-event, | |
| .activity-item.route-general .activity-step { color: #7dd3fc; } | |
| .activity-item.route-general .activity-step { background: rgba(125, 211, 252, 0.15); } | |
| .activity-item.route-realtime .activity-event, | |
| .activity-item.route-realtime .activity-step { color: var(--success); } | |
| .activity-item.route-realtime .activity-step { background: rgba(81, 207, 102, 0.15); } | |
| .activity-item.activity-sub { | |
| padding: 12px 14px; | |
| font-size: 0.75rem; | |
| border-left: 3px solid rgba(124, 106, 239, 0.4); | |
| } | |
| .activity-item.activity-sub .activity-event { font-size: 0.76rem; } | |
| @keyframes activityIn { | |
| from { opacity: 0; transform: translateX(-8px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .search-results-widget { | |
| position: fixed; | |
| top: calc(var(--header-h) + var(--panel-gap)); | |
| right: 0; | |
| bottom: calc(var(--input-bar-h) + var(--panel-gap)); | |
| width: min(380px, 95vw); | |
| min-width: 0; | |
| height: auto; | |
| z-index: 6; | |
| display: flex; | |
| flex-direction: column; | |
| border-radius: var(--radius) 0 0 var(--radius); | |
| border-right: none; | |
| box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); | |
| overflow: hidden; | |
| transform: translateX(100%); | |
| transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .search-results-widget.open { | |
| transform: translateX(0); | |
| } | |
| .search-results-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 18px 20px; | |
| border-bottom: 1px solid var(--glass-border); | |
| flex-shrink: 0; | |
| } | |
| .search-results-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .search-results-title::before { | |
| content: ''; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--success); | |
| box-shadow: 0 0 8px var(--success); | |
| animation: pulse-dot 2s ease-in-out infinite; | |
| flex-shrink: 0; | |
| } | |
| .search-results-close { | |
| display: grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-dim); | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| flex-shrink: 0; | |
| } | |
| .search-results-close:hover { | |
| background: rgba(255, 255, 255, 0.12); | |
| color: var(--text); | |
| } | |
| .search-results-query { | |
| padding: 12px 20px 14px; | |
| font-size: 0.75rem; | |
| color: var(--accent); | |
| font-weight: 500; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| flex-shrink: 0; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| word-break: break-word; | |
| } | |
| .search-results-answer { | |
| padding: 16px 20px 18px; | |
| font-size: 0.85rem; | |
| line-height: 1.55; | |
| color: var(--text); | |
| background: rgba(124, 106, 239, 0.08); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); | |
| flex-shrink: 0; | |
| max-height: 200px; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| } | |
| .search-results-list { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding: 16px 20px 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| scroll-behavior: smooth; | |
| } | |
| .search-result-card { | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid rgba(255, 255, 255, 0.07); | |
| transition: background var(--transition), border-color var(--transition); | |
| min-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .search-result-card:hover { | |
| background: rgba(255, 255, 255, 0.07); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .search-result-card .card-title { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| line-height: 1.35; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| word-break: break-word; | |
| } | |
| .search-result-card .card-content { | |
| font-size: 0.76rem; | |
| color: var(--text-dim); | |
| line-height: 1.5; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| word-break: break-word; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 4; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .search-result-card .card-url { | |
| font-size: 0.7rem; | |
| color: var(--accent); | |
| text-decoration: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; | |
| } | |
| .search-result-card .card-url:hover { | |
| text-decoration: underline; | |
| } | |
| .search-result-card .card-score { | |
| font-size: 0.68rem; | |
| color: var(--text-muted); | |
| } | |
| .search-results-answer::-webkit-scrollbar, | |
| .search-results-list::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .search-results-answer::-webkit-scrollbar-track, | |
| .search-results-list::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 10px; | |
| } | |
| .search-results-answer::-webkit-scrollbar-thumb, | |
| .search-results-list::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.12); | |
| border-radius: 10px; | |
| } | |
| .search-results-answer::-webkit-scrollbar-thumb:hover, | |
| .search-results-list::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| @supports (scrollbar-color: rgba(255,255,255,0.12) rgba(255,255,255,0.03)) { | |
| .search-results-answer, | |
| .search-results-list { | |
| scrollbar-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.03); | |
| scrollbar-width: thin; | |
| } | |
| } | |
| .settings-panel { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(0.95); | |
| width: min(360px, 92vw); | |
| z-index: 21; | |
| border-radius: var(--radius); | |
| padding: 0; | |
| overflow: hidden; | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; | |
| } | |
| .settings-panel.open { | |
| opacity: 1; | |
| visibility: visible; | |
| pointer-events: auto; | |
| transform: translate(-50%, -50%) scale(1); | |
| } | |
| .settings-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 18px 20px; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .settings-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .settings-body { | |
| padding: 24px 20px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .settings-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .settings-label { | |
| font-size: 0.88rem; | |
| color: var(--text); | |
| cursor: pointer; | |
| flex: 1; | |
| } | |
| .settings-hint { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| margin-top: 4px; | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 44px; | |
| height: 24px; | |
| flex-shrink: 0; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| inset: 0; | |
| background: rgba(255, 255, 255, 0.12); | |
| border-radius: 24px; | |
| transition: background var(--transition); | |
| } | |
| .toggle-slider::before { | |
| content: ''; | |
| position: absolute; | |
| height: 18px; | |
| width: 18px; | |
| left: 3px; | |
| bottom: 3px; | |
| background: #fff; | |
| border-radius: 50%; | |
| transition: transform var(--transition); | |
| } | |
| .toggle-switch input:checked + .toggle-slider { | |
| background: var(--accent); | |
| } | |
| .toggle-switch input:checked + .toggle-slider::before { | |
| transform: translateX(20px); | |
| } | |
| .chat-messages::-webkit-scrollbar { width: 4px; } | |
| .chat-messages::-webkit-scrollbar-track { background: transparent; } | |
| .chat-messages::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 10px; | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(12px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes msgIn { | |
| from { opacity: 0; transform: translateY(8px) scale(0.98); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| @keyframes dotBounce { | |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 30% { transform: translateY(-5px); opacity: 1; } | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| @keyframes micPulse { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.3); } | |
| 50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); } | |
| } | |
| @keyframes ttsPulse { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 106, 239, 0.3); } | |
| 50% { box-shadow: 0 0 0 8px rgba(124, 106, 239, 0); } | |
| } | |
| @keyframes orbPulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.92; } | |
| 50% { transform: scale(1.10); opacity: 1; } | |
| } | |
| @media (max-width: 768px) { | |
| :root { --input-bar-h: calc(100px + env(safe-area-inset-bottom, 0px)); --content-gap: 12px; --panel-gap: 12px; } | |
| .header { padding: 0 16px; gap: 12px; margin-bottom: var(--content-gap); } | |
| .header-right { gap: 8px; } | |
| .btn-icon { width: 38px; height: 38px; min-width: 38px; min-height: 38px; } | |
| .tagline { display: none; } | |
| .logo { font-size: 1rem; } | |
| .mode-btn { padding: 6px 10px; font-size: 0.72rem; } | |
| .mode-btn .mode-btn-text { display: none; } | |
| .status-badge .status-text { display: none; } | |
| .chat-messages { padding: 18px 16px 22px; gap: 12px; } | |
| .input-bar { padding: 12px 16px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)); margin-top: var(--content-gap); } | |
| .input-wrapper { padding: 4px 4px 4px 12px; } | |
| .action-btn { width: 36px; height: 36px; min-width: 36px; border-radius: 9px; } | |
| .msg-content { font-size: 0.84rem; padding: 10px 13px; } | |
| .welcome-title { font-size: 1.3rem; } | |
| .message { gap: 8px; } | |
| .msg-avatar { width: 26px; height: 26px; font-size: 0.62rem; } | |
| .msg-avatar .msg-avatar-icon { width: 16px; height: 16px; } | |
| .search-results-widget { width: min(100vw, 360px); } | |
| .search-results-header { padding: 14px 16px; } | |
| .search-results-query, | |
| .search-results-answer { padding: 12px 16px; } | |
| .search-results-list { padding: 12px 16px 20px; gap: 12px; } | |
| .search-result-card { padding: 12px 14px; } | |
| .activity-panel { width: min(100vw, 320px); } | |
| .activity-header { padding: 14px 16px; } | |
| .activity-list { padding: 12px 16px 20px; gap: 12px; } | |
| .speech-widget { bottom: calc(var(--input-bar-h) + var(--panel-gap)); min-width: min(280px, 88vw); padding: 12px 16px; } | |
| .speech-widget-text { font-size: 0.85rem; } | |
| } | |
| @media (max-width: 480px) { | |
| :root { --input-bar-h: calc(95px + env(safe-area-inset-bottom, 0px)); --content-gap: 10px; --panel-gap: 10px; } | |
| .header { padding: 0 12px; margin-bottom: var(--content-gap); gap: 8px; } | |
| .header-left { flex-shrink: 0; } | |
| .header-center { flex: 1; justify-content: center; display: flex; min-width: 0; } | |
| .header-right { gap: 6px; } | |
| .btn-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; } | |
| .logo { font-size: 0.9rem; letter-spacing: 2px; } | |
| .mode-switch { width: 100%; } | |
| .mode-btn { flex: 1; justify-content: center; } | |
| .new-chat-btn { display: none; } | |
| .chat-messages { padding: 14px 12px 18px; gap: 10px; } | |
| .input-bar { padding: 10px 12px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)); margin-top: var(--content-gap); } | |
| .welcome-chips { gap: 8px; } | |
| .chip { font-size: 0.72rem; padding: 8px 16px; } | |
| .action-btn { width: 34px; height: 34px; min-width: 34px; border-radius: 8px; } | |
| .action-btn svg { width: 17px; height: 17px; } | |
| .input-actions { gap: 5px; } | |
| .input-wrapper { gap: 4px; } | |
| .search-results-widget { width: 100vw; max-width: 100%; } | |
| .search-results-header { padding: 12px 14px; } | |
| .search-results-query { font-size: 0.72rem; padding: 10px 14px 12px; } | |
| .search-results-answer { font-size: 0.82rem; padding: 12px 14px; max-height: 160px; } | |
| .search-results-list { padding: 12px 14px 18px; gap: 10px; } | |
| .search-result-card { padding: 12px 14px; } | |
| .search-result-card .card-title { font-size: 0.76rem; } | |
| .search-result-card .card-content { font-size: 0.72rem; -webkit-line-clamp: 3; } | |
| .activity-panel { width: 100vw; } | |
| .activity-header { padding: 12px 14px; } | |
| .activity-list { padding: 12px 14px 18px; gap: 10px; } | |
| .mode-switch-three .mode-btn { padding: 8px 10px; font-size: 0.68rem; } | |
| .mode-switch-three .mode-btn .mode-btn-text { display: none; } | |
| .speech-widget { bottom: calc(var(--input-bar-h) + var(--panel-gap)); min-width: min(260px, 92vw); padding: 10px 14px; } | |
| .speech-widget-label { font-size: 0.65rem; } | |
| .speech-widget-text { font-size: 0.82rem; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment