| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |
|
|
| |
| html { |
| scroll-behavior: auto; |
| text-rendering: optimizeLegibility; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| |
| .sidebar, |
| .header, |
| .sidebar-header, |
| .sidebar-footer, |
| .btn-new-chat, |
| .chat-item, |
| .model-selector, |
| .welcome, |
| .suggestion-card, |
| .input-area, |
| .logo-container { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
|
|
| |
| .message-content, |
| .message-input, |
| textarea, |
| input[type="text"] { |
| -webkit-user-select: text; |
| -moz-user-select: text; |
| -ms-user-select: text; |
| user-select: text; |
| } |
|
|
| |
| .sidebar, |
| .message, |
| .toast, |
| .custom-dialog, |
| .model-dropdown, |
| .context-menu, |
| .modal { |
| will-change: transform, opacity; |
| transform: translateZ(0); |
| backface-visibility: hidden; |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| scroll-behavior: auto !important; |
| } |
| } |
|
|
| |
| ::selection { |
| background: rgba(62, 180, 137, 0.3); |
| color: inherit; |
| } |
|
|
| ::-moz-selection { |
| background: rgba(62, 180, 137, 0.3); |
| color: inherit; |
| } |
|
|
| |
| .code-block ::selection { |
| background: rgba(255, 255, 255, 0.2); |
| color: inherit; |
| } |
|
|
| .code-block ::-moz-selection { |
| background: rgba(255, 255, 255, 0.2); |
| color: inherit; |
| } |
|
|
| |
| :root { |
| --bg-primary: #0f1a24; |
| --bg-secondary: #152232; |
| --bg-tertiary: #1a2b3c; |
| --bg-elevated: #1e3347; |
| --bg-hover: #243d52; |
| --text-primary: #ffffff; |
| --text-secondary: #a0b4c4; |
| --text-tertiary: #6b8599; |
| --border: #2a3f52; |
| --accent: #3eb489; |
| --accent-hover: #35a07a; |
| --accent-secondary: #d97bb3; |
| --user-bubble: #3d4f5f; |
| --user-avatar: #d97bb3; |
| --ai-avatar: #3eb489; |
| --success: #3eb489; |
| --error: #ef4444; |
| --warning: #f59e0b; |
| --sidebar-width: 260px; |
| --header-height: 56px; |
| --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); |
| --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| |
| @media (prefers-color-scheme: light) { |
| :root { |
| --bg-primary: #f8fafc; |
| --bg-secondary: #ffffff; |
| --bg-tertiary: #f1f5f9; |
| --bg-elevated: #ffffff; |
| --bg-hover: #e2e8f0; |
| --text-primary: #0f172a; |
| --text-secondary: #475569; |
| --text-tertiary: #94a3b8; |
| --border: #e2e8f0; |
| --accent: #10b981; |
| --accent-hover: #059669; |
| --accent-secondary: #ec4899; |
| --user-bubble: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| --user-bubble-solid: #667eea; |
| --user-avatar: #ec4899; |
| --ai-avatar: #10b981; |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| } |
|
|
| |
| [data-theme="dark"] { |
| --bg-primary: #0f1a24; |
| --bg-secondary: #152232; |
| --bg-tertiary: #1a2b3c; |
| --bg-elevated: #1e3347; |
| --bg-hover: #243d52; |
| --text-primary: #ffffff; |
| --text-secondary: #a0b4c4; |
| --text-tertiary: #6b8599; |
| --border: #2a3f52; |
| --accent: #3eb489; |
| --accent-hover: #35a07a; |
| --accent-secondary: #d97bb3; |
| --user-bubble: #3d4f5f; |
| --user-bubble-solid: #3d4f5f; |
| --user-avatar: #d97bb3; |
| --ai-avatar: #3eb489; |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); |
| } |
|
|
| [data-theme="light"] { |
| --bg-primary: #f8fafc; |
| --bg-secondary: #ffffff; |
| --bg-tertiary: #f1f5f9; |
| --bg-elevated: #ffffff; |
| --bg-hover: #e2e8f0; |
| --text-primary: #0f172a; |
| --text-secondary: #475569; |
| --text-tertiary: #94a3b8; |
| --border: #e2e8f0; |
| --accent: #10b981; |
| --accent-hover: #059669; |
| --accent-secondary: #ec4899; |
| --user-bubble: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| --user-bubble-solid: #667eea; |
| --user-avatar: #ec4899; |
| --ai-avatar: #10b981; |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| overflow: hidden; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| |
| [data-theme="light"] body { |
| background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); |
| } |
|
|
| [data-theme="light"] .sidebar { |
| background: #ffffff; |
| box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05); |
| } |
|
|
| [data-theme="light"] .header { |
| background: rgba(255, 255, 255, 0.98); |
| border-bottom: 1px solid rgba(226, 232, 240, 0.8); |
| position: relative; |
| z-index: 100; |
| } |
|
|
| [data-theme="light"] .btn-new-chat { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| color: white; |
| border: none; |
| box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3); |
| } |
|
|
| [data-theme="light"] .btn-new-chat:hover { |
| background: linear-gradient(135deg, #059669 0%, #047857 100%); |
| box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); |
| transform: translateY(-1px); |
| } |
|
|
| [data-theme="light"] .chat-item { |
| border-radius: 12px; |
| transition: all 0.2s ease; |
| } |
|
|
| [data-theme="light"] .chat-item:hover { |
| background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); |
| } |
|
|
| [data-theme="light"] .chat-item.active { |
| background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); |
| border: 1px solid #10b981; |
| } |
|
|
| [data-theme="light"] .message.user .message-content { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| box-shadow: 0 4px 14px rgba(102, 126, 234, 0.3); |
| } |
|
|
| [data-theme="light"] .message.user .message-avatar { |
| background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); |
| box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3); |
| } |
|
|
| [data-theme="light"] .message.assistant .message-avatar { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3); |
| } |
|
|
| [data-theme="light"] .input-container { |
| background: #ffffff; |
| border: 2px solid #e2e8f0; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
| } |
|
|
| [data-theme="light"] .input-container:focus-within { |
| border-color: #10b981; |
| box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15), 0 0 0 4px rgba(16, 185, 129, 0.1); |
| } |
|
|
| [data-theme="light"] .btn-send { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3); |
| } |
|
|
| [data-theme="light"] .btn-send:hover:not(:disabled) { |
| background: linear-gradient(135deg, #059669 0%, #047857 100%); |
| box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); |
| } |
|
|
| [data-theme="light"] .btn-send.generating { |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); |
| box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3); |
| } |
|
|
| [data-theme="light"] .btn-send.generating:hover { |
| background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); |
| box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4); |
| } |
|
|
| [data-theme="light"] .code-block { |
| background: #1e293b; |
| border: 1px solid #334155; |
| box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); |
| } |
|
|
| [data-theme="light"] .code-header { |
| background: #0f172a; |
| } |
|
|
| [data-theme="light"] .model-selector { |
| position: relative; |
| z-index: 1000; |
| } |
|
|
| |
|
|
| [data-theme="light"] .toast { |
| background: #ffffff; |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); |
| } |
|
|
| [data-theme="light"] .custom-dialog { |
| background: #ffffff; |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); |
| } |
|
|
| [data-theme="light"] .dialog-btn-primary { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3); |
| } |
|
|
| [data-theme="light"] .dialog-btn-primary:hover { |
| background: linear-gradient(135deg, #059669 0%, #047857 100%); |
| box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); |
| } |
|
|
| [data-theme="light"] .msg-action-btn { |
| background: #ffffff; |
| border: 1px solid #e2e8f0; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| } |
|
|
| [data-theme="light"] .msg-action-btn:hover { |
| background: #f1f5f9; |
| border-color: #10b981; |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); |
| } |
|
|
| [data-theme="light"] .msg-edit-btn { |
| background: #ffffff; |
| border: 1px solid #e2e8f0; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| } |
|
|
| [data-theme="light"] .msg-edit-btn:hover { |
| background: #f1f5f9; |
| border-color: #667eea; |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); |
| } |
|
|
| [data-theme="light"] .version-nav { |
| background: transparent; |
| border: none; |
| border-top: 1px solid #e2e8f0; |
| box-shadow: none; |
| } |
|
|
| [data-theme="light"] .version-btn { |
| background: #f1f5f9; |
| border: 1px solid #e2e8f0; |
| color: #475569; |
| } |
|
|
| [data-theme="light"] .version-btn:hover:not(:disabled) { |
| background: #10b981; |
| border-color: #10b981; |
| color: white; |
| } |
|
|
| [data-theme="light"] .attachment-item { |
| background: #ffffff; |
| border: 1px solid #e2e8f0; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| } |
|
|
| [data-theme="light"] .attachment-preview { |
| background: #ffffff; |
| border: 1px solid #e2e8f0; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| } |
|
|
| [data-theme="light"] .welcome h2 { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| [data-theme="light"] .btn-icon { |
| color: #475569; |
| } |
|
|
| [data-theme="light"] .btn-icon:hover { |
| background: #f1f5f9; |
| color: #0f172a; |
| } |
|
|
| [data-theme="light"] ::selection { |
| background: rgba(16, 185, 129, 0.3); |
| color: inherit; |
| } |
|
|
| [data-theme="light"] ::-moz-selection { |
| background: rgba(16, 185, 129, 0.3); |
| color: inherit; |
| } |
|
|
| [data-theme="light"] .message.assistant .message-content :not(pre) > code { |
| background: #f1f5f9; |
| color: #475569; |
| border: 1px solid #e2e8f0; |
| } |
|
|
| [data-theme="light"] .chat-container { |
| background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); |
| } |
|
|
| [data-theme="light"] .sidebar-footer { |
| background: linear-gradient(180deg, transparent 0%, rgba(241, 245, 249, 0.8) 100%); |
| } |
|
|
| [data-theme="light"] .user-menu { |
| background: #f1f5f9; |
| border: 1px solid #e2e8f0; |
| } |
|
|
| [data-theme="light"] .user-menu:hover { |
| background: #e2e8f0; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--text-tertiary); |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--text-secondary); |
| } |
|
|
| [data-theme="light"] ::-webkit-scrollbar-thumb { |
| background: #cbd5e1; |
| } |
|
|
| [data-theme="light"] ::-webkit-scrollbar-thumb:hover { |
| background: #94a3b8; |
| } |
|
|
| |
| html { |
| scrollbar-width: thin; |
| scrollbar-color: var(--text-tertiary) transparent; |
| } |
|
|
| [data-theme="light"] html { |
| scrollbar-color: #cbd5e1 transparent; |
| } |
|
|
| |
| [data-theme="light"] #loading-screen { |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
| } |
|
|
| [data-theme="light"] .loading-spinner { |
| border-color: rgba(16, 185, 129, 0.2); |
| border-top-color: #10b981; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| #loading-screen { |
| padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); |
| } |
| |
| .loading-logo svg { |
| width: 64px; |
| height: 64px; |
| } |
| |
| .loading-text { |
| font-size: 13px; |
| letter-spacing: 1.5px; |
| } |
| } |
|
|
| |
|
|
| .app { |
| display: flex; |
| height: 100vh; |
| height: 100dvh; |
| overflow: hidden; |
| position: relative; |
| } |
|
|
| |
|
|
| |
| .sidebar { |
| width: var(--sidebar-width); |
| background: var(--bg-secondary); |
| border-right: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| transition: transform 0.25s ease-out, margin-left 0.25s ease-out; |
| flex-shrink: 0; |
| } |
|
|
| .sidebar.collapsed { |
| margin-left: calc(-1 * var(--sidebar-width)); |
| } |
|
|
| .sidebar-header { |
| padding: 12px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .btn-new-chat { |
| width: 100%; |
| padding: 10px 12px; |
| background: transparent; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-primary); |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| transition: all 0.2s var(--ease-in-out); |
| } |
|
|
| .btn-new-chat:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .btn-new-chat:active { |
| transform: scale(0.98); |
| } |
|
|
| .chat-list { |
| flex: 1; |
| overflow-y: auto; |
| overflow-x: hidden; |
| padding: 8px; |
| -webkit-overflow-scrolling: touch; |
| overscroll-behavior: contain; |
| scroll-behavior: smooth; |
| } |
|
|
| .chat-item { |
| padding: 10px 12px; |
| margin-bottom: 4px; |
| border-radius: 8px; |
| cursor: pointer; |
| font-size: 13px; |
| color: var(--text-secondary); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| transition: all 0.1s ease; |
| position: relative; |
| -webkit-user-select: none; |
| user-select: none; |
| -webkit-tap-highlight-color: transparent; |
| } |
|
|
| .chat-item:active { |
| transform: scale(0.98); |
| background: var(--bg-hover); |
| } |
|
|
| .chat-item:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .chat-item.active { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| } |
|
|
| .chat-item-text { |
| flex: 1; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .chat-item-menu { |
| opacity: 0; |
| padding: 4px; |
| border-radius: 4px; |
| transition: opacity 0.15s; |
| background: transparent; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .chat-item:hover .chat-item-menu { |
| opacity: 1; |
| } |
|
|
| .chat-item-menu:hover { |
| background: var(--bg-elevated); |
| color: var(--text-primary); |
| } |
|
|
| .sidebar-footer { |
| padding: 12px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| |
| .app-version-display { |
| padding: 8px 12px; |
| font-size: 11px; |
| color: var(--text-tertiary); |
| text-align: center; |
| border-bottom: 1px solid var(--border); |
| font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; |
| letter-spacing: 0.5px; |
| cursor: default; |
| -webkit-user-select: none; |
| user-select: none; |
| transition: color 0.2s ease; |
| } |
|
|
| .app-version-display:hover { |
| color: var(--text-secondary); |
| } |
|
|
| |
| .update-dialog-overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.6); |
| -webkit-backdrop-filter: blur(4px); |
| backdrop-filter: blur(4px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 100000; |
| animation: updateFadeIn 0.2s ease-out; |
| } |
|
|
| .update-dialog { |
| background: var(--bg-secondary); |
| border-radius: 16px; |
| padding: 32px; |
| max-width: 420px; |
| width: 90%; |
| text-align: center; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
| animation: updateSlideUp 0.3s ease-out; |
| } |
|
|
| .update-dialog-icon { |
| width: 72px; |
| height: 72px; |
| margin: 0 auto 20px; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| } |
|
|
| .update-dialog-title { |
| color: var(--text-primary); |
| font-size: 20px; |
| font-weight: 600; |
| margin: 0 0 16px; |
| } |
|
|
| .update-dialog-version { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| margin: 0 0 16px; |
| padding: 16px; |
| background: var(--bg-tertiary); |
| border-radius: 12px; |
| } |
|
|
| .version-badge { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 4px; |
| padding: 8px 16px; |
| border-radius: 8px; |
| min-width: 80px; |
| } |
|
|
| .version-badge.current { |
| background: rgba(148, 163, 184, 0.1); |
| border: 1px solid rgba(148, 163, 184, 0.2); |
| } |
|
|
| .version-badge.new { |
| background: rgba(102, 126, 234, 0.15); |
| border: 1px solid rgba(102, 126, 234, 0.3); |
| } |
|
|
| .version-label { |
| font-size: 10px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| color: var(--text-tertiary); |
| } |
|
|
| .version-badge.new .version-label { |
| color: #667eea; |
| } |
|
|
| .version-number { |
| font-size: 16px; |
| font-weight: 700; |
| color: var(--text-primary); |
| font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; |
| } |
|
|
| .version-badge.new .version-number { |
| color: #667eea; |
| } |
|
|
| .version-arrow { |
| color: var(--text-tertiary); |
| animation: versionArrowPulse 1.5s ease-in-out infinite; |
| } |
|
|
| .update-dialog-message { |
| color: var(--text-secondary); |
| font-size: 14px; |
| line-height: 1.6; |
| margin: 0 0 24px; |
| } |
|
|
| .update-dialog-actions { |
| display: flex; |
| gap: 12px; |
| justify-content: center; |
| } |
|
|
| .update-dialog-btn { |
| padding: 12px 24px; |
| border-radius: 8px; |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.2s; |
| border: none; |
| } |
|
|
| .update-dialog-btn-secondary { |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| } |
|
|
| .update-dialog-btn-secondary:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .update-dialog-btn-primary { |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| color: white; |
| } |
|
|
| .update-dialog-btn-primary:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
| } |
|
|
| @keyframes updateFadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| @keyframes updateSlideUp { |
| from { opacity: 0; transform: translateY(20px) scale(0.95); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
|
|
| @keyframes versionArrowPulse { |
| 0%, 100% { opacity: 0.5; transform: translateX(0); } |
| 50% { opacity: 1; transform: translateX(3px); } |
| } |
|
|
| @keyframes updateSpin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| .user-menu { |
| width: 100%; |
| padding: 8px 10px; |
| background: transparent; |
| border: 1px solid transparent; |
| border-radius: 8px; |
| color: var(--text-primary); |
| font-size: 13px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| transition: all 0.2s var(--ease-in-out); |
| } |
|
|
| .user-menu:hover { |
| background: var(--bg-hover); |
| border-color: var(--border); |
| } |
|
|
| .user-avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: var(--user-avatar); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 600; |
| font-size: 13px; |
| color: white; |
| } |
|
|
| .user-name { |
| flex: 1; |
| font-weight: 500; |
| } |
|
|
| |
|
|
| |
| .main { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .header { |
| height: var(--header-height); |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| padding: 0 16px; |
| gap: 12px; |
| position: relative; |
| z-index: 100; |
| } |
|
|
| .btn-toggle-sidebar { |
| padding: 8px; |
| background: transparent; |
| border: none; |
| border-radius: 6px; |
| color: var(--text-secondary); |
| cursor: pointer; |
| transition: all 0.15s; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .btn-toggle-sidebar:hover { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| } |
|
|
| .btn-toggle-sidebar:active { |
| background: var(--bg-hover); |
| transform: scale(0.95); |
| } |
|
|
| .header-title { |
| flex: 1; |
| } |
|
|
| .header-title h1 { |
| font-size: 16px; |
| font-weight: 600; |
| } |
|
|
| .header-actions { |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| } |
|
|
| |
| .btn-download { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border: none; |
| border-radius: 8px; |
| color: white; |
| font-size: 13px; |
| font-weight: 500; |
| cursor: pointer; |
| text-decoration: none; |
| transition: all 0.2s ease; |
| box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .btn-download:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
| background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%); |
| } |
|
|
| .btn-download:active { |
| transform: translateY(0); |
| } |
|
|
| .btn-download svg { |
| width: 16px; |
| height: 16px; |
| } |
|
|
| .btn-download .download-text { |
| white-space: nowrap; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .btn-download { |
| display: none !important; |
| } |
| } |
|
|
| [data-theme="light"] .btn-download { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); |
| } |
|
|
| [data-theme="light"] .btn-download:hover { |
| background: linear-gradient(135deg, #059669 0%, #047857 100%); |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); |
| } |
|
|
| .btn-icon { |
| padding: 8px; |
| background: transparent; |
| border: none; |
| border-radius: 6px; |
| color: var(--text-secondary); |
| cursor: pointer; |
| transition: all 0.15s; |
| } |
|
|
| .btn-icon:hover { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| } |
|
|
| |
| .btn-get-api { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 10px 20px; |
| background: var(--bg-tertiary); |
| border: 2px solid var(--border); |
| border-radius: 50px; |
| color: var(--text-primary); |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .btn-get-api:hover { |
| background: var(--bg-hover); |
| border-color: var(--accent); |
| color: var(--accent); |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .btn-get-api svg { |
| flex-shrink: 0; |
| } |
|
|
| [data-theme="light"] .btn-get-api { |
| background: #ffffff; |
| border-color: #e2e8f0; |
| } |
|
|
| [data-theme="light"] .btn-get-api:hover { |
| background: #f8fafc; |
| border-color: #10b981; |
| color: #10b981; |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); |
| } |
|
|
| |
| @media (max-width: 1023px), (hover: none) and (pointer: coarse) { |
| .btn-get-api { |
| display: none !important; |
| } |
| } |
|
|
| |
|
|
| |
| .chat-container { |
| flex: 1; |
| overflow-y: auto; |
| overflow-x: hidden; |
| -webkit-overflow-scrolling: touch; |
| overscroll-behavior-y: contain; |
| contain: layout style; |
| scroll-behavior: auto; |
| } |
|
|
| |
| .welcome { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 100%; |
| padding: 40px 20px; |
| } |
|
|
| .welcome-content { |
| max-width: 800px; |
| width: 100%; |
| text-align: center; |
| } |
|
|
| .logo-container { |
| position: relative; |
| display: inline-block; |
| margin-bottom: 32px; |
| } |
|
|
| .logo-glow { |
| position: absolute; |
| inset: -20px; |
| background: radial-gradient(circle, rgba(102, 126, 234, 0.3), transparent 70%); |
| animation: pulse 4s ease-in-out infinite; |
| will-change: opacity; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 0.4; } |
| 50% { opacity: 0.8; } |
| } |
|
|
| .logo { |
| position: relative; |
| animation: float 5s ease-in-out infinite; |
| will-change: transform; |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-6px); } |
| } |
|
|
| .welcome-title { |
| font-size: 32px; |
| font-weight: 600; |
| margin-bottom: 48px; |
| letter-spacing: -0.02em; |
| } |
|
|
| .suggestions { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 12px; |
| } |
|
|
| .suggestion-card { |
| padding: 16px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| cursor: pointer; |
| display: flex; |
| align-items: flex-start; |
| gap: 12px; |
| text-align: left; |
| transition: all 0.3s var(--ease-out-expo); |
| color: inherit; |
| font-family: inherit; |
| font-size: inherit; |
| width: 100%; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .suggestion-card::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(135deg, transparent, rgba(62, 180, 137, 0.1)); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .suggestion-card:hover { |
| background: var(--bg-tertiary); |
| border-color: var(--accent); |
| transform: translateY(-2px); |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); |
| } |
|
|
| .suggestion-card:hover::before { |
| opacity: 1; |
| } |
|
|
| .suggestion-card:active { |
| transform: translateY(-2px) scale(1); |
| } |
|
|
| .suggestion-icon { |
| width: 36px; |
| height: 36px; |
| border-radius: 8px; |
| background: var(--bg-tertiary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--accent); |
| flex-shrink: 0; |
| transition: transform 0.3s ease; |
| } |
|
|
| .suggestion-card:hover .suggestion-icon { |
| transform: scale(1.1) rotate(5deg); |
| } |
|
|
| .suggestion-text { |
| flex: 1; |
| } |
|
|
| .suggestion-title { |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .suggestion-desc { |
| font-size: 12px; |
| color: var(--text-secondary); |
| } |
|
|
| |
|
|
| |
| .messages { |
| padding: 24px; |
| max-width: 900px; |
| margin: 0 auto; |
| width: 100%; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| contain: content; |
| } |
|
|
| .message { |
| display: flex; |
| align-items: flex-start; |
| gap: 12px; |
| animation: slideIn 0.25s ease-out; |
| max-width: 85%; |
| contain: layout style paint; |
| } |
|
|
| .message.user { |
| flex-direction: row-reverse; |
| align-self: flex-end; |
| } |
|
|
| .message.assistant { |
| align-self: flex-start; |
| } |
|
|
| @keyframes slideIn { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| .message, |
| .suggestion-card, |
| .code-block, |
| .logo, |
| .logo-glow, |
| .ai-logo-hex, |
| .ai-logo-core { |
| animation: none !important; |
| transition: opacity 0.15s ease !important; |
| } |
| } |
|
|
| .message-avatar { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 600; |
| font-size: 14px; |
| flex-shrink: 0; |
| position: relative; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
| transition: transform 0.3s ease; |
| } |
|
|
| .message-avatar::before { |
| content: ''; |
| position: absolute; |
| inset: -2px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2)); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .message:hover .message-avatar::before { |
| opacity: 1; |
| } |
|
|
| .message.user .message-avatar { |
| background: linear-gradient(135deg, var(--user-avatar), var(--accent-secondary)); |
| color: white; |
| } |
|
|
| .message.assistant .message-avatar { |
| background: linear-gradient(135deg, var(--ai-avatar), var(--accent)); |
| color: white; |
| } |
|
|
| |
| .message-avatar.ai-avatar-logo { |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
| padding: 0; |
| overflow: visible; |
| } |
|
|
| [data-theme="light"] .message-avatar.ai-avatar-logo { |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
| border: 1px solid #e2e8f0; |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); |
| } |
|
|
| .ai-logo { |
| width: 24px; |
| height: 24px; |
| } |
|
|
| .ai-logo-hex { |
| animation: hexRotate 12s linear infinite; |
| transform-origin: center; |
| will-change: transform; |
| } |
|
|
| .ai-logo-core { |
| animation: corePulse 3s ease-in-out infinite; |
| transform-origin: center; |
| will-change: transform, opacity; |
| } |
|
|
| |
| .typing-avatar .ai-logo-hex { |
| animation: hexRotate 3s linear infinite; |
| } |
|
|
| .typing-avatar .ai-logo-core { |
| animation: corePulse 1s ease-in-out infinite; |
| } |
|
|
| @keyframes hexRotate { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| @keyframes corePulse { |
| 0%, 100% { |
| transform: scale(1); |
| opacity: 1; |
| } |
| 50% { |
| transform: scale(1.15); |
| opacity: 0.85; |
| } |
| } |
|
|
| .message:hover .ai-avatar-logo { |
| transform: scale(1.05); |
| } |
|
|
| .message:hover .ai-avatar-logo .ai-logo-hex { |
| animation-duration: 4s; |
| } |
|
|
| .message:hover .ai-avatar-logo .ai-logo-core { |
| animation-duration: 1.2s; |
| } |
|
|
| .message-bubble { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| min-width: 0; |
| max-width: 100%; |
| } |
|
|
| .message.user .message-bubble { |
| align-items: flex-end; |
| } |
|
|
| .message.assistant .message-bubble { |
| align-items: flex-start; |
| position: relative; |
| width: 100%; |
| overflow: visible; |
| } |
|
|
| |
| .message-indicators { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 6px; |
| margin-bottom: 8px; |
| } |
|
|
| |
| .model-indicator { |
| display: inline-flex; |
| align-items: center; |
| font-size: 11px; |
| font-weight: 600; |
| color: var(--accent); |
| background: rgba(62, 180, 137, 0.1); |
| padding: 3px 8px; |
| border-radius: 10px; |
| letter-spacing: 0.3px; |
| border: 1px solid rgba(62, 180, 137, 0.2); |
| } |
|
|
| [data-theme="light"] .model-indicator { |
| background: rgba(16, 185, 129, 0.1); |
| color: #059669; |
| border-color: rgba(16, 185, 129, 0.2); |
| } |
|
|
| |
| .internet-indicator { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| font-size: 10px; |
| font-weight: 500; |
| color: #3b82f6; |
| background: rgba(59, 130, 246, 0.1); |
| padding: 3px 8px; |
| border-radius: 10px; |
| letter-spacing: 0.2px; |
| border: 1px solid rgba(59, 130, 246, 0.2); |
| cursor: help; |
| animation: internetPulse 2s ease-in-out; |
| } |
|
|
| .internet-indicator svg { |
| width: 12px; |
| height: 12px; |
| stroke: #3b82f6; |
| flex-shrink: 0; |
| } |
|
|
| .internet-indicator span { |
| white-space: nowrap; |
| } |
|
|
| [data-theme="light"] .internet-indicator { |
| background: rgba(59, 130, 246, 0.08); |
| color: #2563eb; |
| border-color: rgba(59, 130, 246, 0.15); |
| } |
|
|
| [data-theme="light"] .internet-indicator svg { |
| stroke: #2563eb; |
| } |
|
|
| @keyframes internetPulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); |
| } |
| 50% { |
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); |
| } |
| } |
|
|
| |
| .msg-actions { |
| display: flex; |
| gap: 8px; |
| margin-top: 12px; |
| opacity: 0; |
| transform: translateY(5px); |
| transition: all 0.2s ease; |
| } |
|
|
| .message.assistant:hover .msg-actions { |
| opacity: 1; |
| transform: translateY(0); |
| } |
|
|
| .msg-action-btn { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-tertiary); |
| font-size: 12px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .msg-action-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| border-color: var(--accent); |
| } |
|
|
| .msg-action-btn:active { |
| transform: scale(0.95); |
| } |
|
|
| .msg-action-btn svg { |
| width: 14px; |
| height: 14px; |
| flex-shrink: 0; |
| } |
|
|
| .msg-action-btn.copied { |
| color: var(--success); |
| border-color: var(--success); |
| } |
|
|
| .msg-action-btn.regenerate-btn:hover { |
| color: var(--accent); |
| } |
|
|
| .msg-action-btn.regenerate-btn:hover svg { |
| animation: spin 0.5s ease; |
| } |
|
|
| @keyframes spin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| .msg-action-btn.pdf-export-btn { |
| transition: all 0.2s ease; |
| } |
|
|
| .msg-action-btn.pdf-export-btn:hover { |
| color: #ef4444; |
| border-color: #ef4444; |
| background: rgba(239, 68, 68, 0.1); |
| } |
|
|
| .msg-action-btn.pdf-export-btn:hover svg { |
| animation: pdfBounce 0.4s ease; |
| } |
|
|
| @keyframes pdfBounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-3px); } |
| } |
|
|
| [data-theme="light"] .msg-action-btn.pdf-export-btn:hover { |
| color: #dc2626; |
| border-color: #dc2626; |
| background: rgba(220, 38, 38, 0.1); |
| } |
|
|
| |
| .msg-action-btn.listen-aloud-btn { |
| transition: all 0.2s ease; |
| } |
|
|
| .msg-action-btn.listen-aloud-btn .stop-icon { |
| display: none; |
| } |
|
|
| .msg-action-btn.listen-aloud-btn:hover { |
| color: var(--accent); |
| border-color: var(--accent); |
| } |
|
|
| .msg-action-btn.listen-aloud-btn:hover .listen-icon { |
| animation: soundWave 0.6s ease infinite; |
| } |
|
|
| @keyframes soundWave { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.1); } |
| } |
|
|
| .msg-action-btn.listen-aloud-btn.playing { |
| background: var(--accent); |
| color: white; |
| border-color: var(--accent); |
| animation: pulse-glow 1.5s ease-in-out infinite; |
| } |
|
|
| .msg-action-btn.listen-aloud-btn.playing:hover { |
| background: var(--accent-hover); |
| color: white; |
| } |
|
|
| .msg-action-btn.listen-aloud-btn .stop-text { |
| display: none; |
| } |
|
|
| .msg-action-btn.listen-aloud-btn.playing .listen-icon, |
| .msg-action-btn.listen-aloud-btn.playing .listen-text { |
| display: none; |
| } |
|
|
| .msg-action-btn.listen-aloud-btn.playing .stop-icon, |
| .msg-action-btn.listen-aloud-btn.playing .stop-text { |
| display: block; |
| } |
|
|
| @keyframes pulse-glow { |
| 0%, 100% { |
| box-shadow: 0 0 0 0 rgba(62, 180, 137, 0.4); |
| } |
| 50% { |
| box-shadow: 0 0 0 8px rgba(62, 180, 137, 0); |
| } |
| } |
|
|
| |
| [data-theme="light"] .msg-action-btn.listen-aloud-btn:hover { |
| color: #10b981; |
| border-color: #10b981; |
| background: rgba(16, 185, 129, 0.1); |
| } |
|
|
| [data-theme="light"] .msg-action-btn.listen-aloud-btn.playing { |
| background: #10b981; |
| border-color: #10b981; |
| } |
|
|
| |
| .msg-edit-btn { |
| position: absolute; |
| top: 8px; |
| right: -40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 32px; |
| height: 32px; |
| padding: 6px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-tertiary); |
| cursor: pointer; |
| opacity: 0; |
| transition: all 0.2s ease; |
| } |
|
|
| .message.user:hover .msg-edit-btn { |
| opacity: 1; |
| } |
|
|
| .msg-edit-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| border-color: var(--accent); |
| } |
|
|
| .msg-edit-btn:active { |
| transform: scale(0.95); |
| } |
|
|
| .msg-edit-btn svg { |
| width: 16px; |
| height: 16px; |
| } |
|
|
| |
| .message.user .message-bubble { |
| position: relative; |
| } |
|
|
| .message-content { |
| padding: 14px 18px; |
| font-size: 15px; |
| line-height: 1.7; |
| color: var(--text-primary); |
| border-radius: 18px; |
| max-width: 100%; |
| word-wrap: break-word; |
| } |
|
|
| .message.user .message-content { |
| background: var(--user-bubble); |
| border-bottom-right-radius: 4px; |
| padding: 20px 24px; |
| } |
|
|
| .message.assistant .message-content { |
| background: transparent; |
| padding: 0; |
| border-bottom-left-radius: 4px; |
| font-size: 15px; |
| line-height: 1.75; |
| width: 100%; |
| max-width: 100%; |
| overflow: visible; |
| } |
|
|
| |
| .message.assistant .message-content p { |
| margin: 0 0 16px 0; |
| color: var(--text-primary); |
| line-height: 1.75; |
| } |
|
|
| .message.assistant .message-content p:last-child { |
| margin-bottom: 0; |
| } |
|
|
| |
| .message.assistant .message-content h1 + p, |
| .message.assistant .message-content h2 + p, |
| .message.assistant .message-content h3 + p, |
| .message.assistant .message-content h4 + p { |
| margin-top: 8px; |
| } |
|
|
| |
| .message.assistant .message-content h1, |
| .message.assistant .message-content h2, |
| .message.assistant .message-content h3, |
| .message.assistant .message-content h4, |
| .message.assistant .message-content h5, |
| .message.assistant .message-content h6 { |
| color: var(--text-primary); |
| font-weight: 600; |
| line-height: 1.4; |
| margin: 28px 0 14px 0; |
| position: relative; |
| } |
|
|
| .message.assistant .message-content h1:first-child, |
| .message.assistant .message-content h2:first-child, |
| .message.assistant .message-content h3:first-child, |
| .message.assistant .message-content h4:first-child, |
| .message.assistant .message-content h5:first-child, |
| .message.assistant .message-content h6:first-child { |
| margin-top: 0; |
| } |
|
|
| .message.assistant .message-content h1 { |
| font-size: 1.6em; |
| padding-bottom: 12px; |
| border-bottom: 2px solid var(--accent); |
| margin-bottom: 20px; |
| background: linear-gradient(90deg, var(--accent), #764ba2); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .message.assistant .message-content h2 { |
| font-size: 1.4em; |
| padding-bottom: 10px; |
| border-bottom: 1px solid var(--border); |
| margin-bottom: 16px; |
| } |
|
|
| .message.assistant .message-content h3 { |
| font-size: 1.2em; |
| color: var(--accent); |
| margin-bottom: 12px; |
| padding-left: 14px; |
| border-left: 3px solid var(--accent); |
| } |
|
|
| .message.assistant .message-content h4 { |
| font-size: 1.1em; |
| margin-bottom: 10px; |
| color: var(--text-primary); |
| } |
|
|
| .message.assistant .message-content h5 { |
| font-size: 1.05em; |
| margin-bottom: 8px; |
| font-weight: 500; |
| } |
|
|
| .message.assistant .message-content h6 { |
| font-size: 0.95em; |
| color: var(--text-secondary); |
| margin-bottom: 8px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.8px; |
| } |
|
|
| |
| .message.assistant .message-content ul { |
| margin: 16px 0 20px 0; |
| padding-left: 28px; |
| list-style-position: outside; |
| list-style-type: none; |
| } |
|
|
| .message.assistant .message-content ul > li { |
| position: relative; |
| } |
|
|
| .message.assistant .message-content ul > li::before { |
| content: ''; |
| position: absolute; |
| left: -20px; |
| top: 11px; |
| width: 7px; |
| height: 7px; |
| background: linear-gradient(135deg, var(--accent), #764ba2); |
| border-radius: 50%; |
| box-shadow: 0 0 6px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .message.assistant .message-content li { |
| margin: 12px 0; |
| line-height: 1.8; |
| color: var(--text-primary); |
| padding-left: 4px; |
| } |
|
|
| .message.assistant .message-content li > ul, |
| .message.assistant .message-content li > ol { |
| margin: 12px 0 12px 0; |
| } |
|
|
| |
| .message.assistant .message-content ul ul > li::before { |
| width: 5px; |
| height: 5px; |
| background: var(--accent); |
| opacity: 0.7; |
| box-shadow: none; |
| } |
|
|
| .message.assistant .message-content ul ul ul > li::before { |
| width: 4px; |
| height: 4px; |
| border-radius: 1px; |
| background: var(--text-secondary); |
| } |
|
|
| |
| .message.assistant .message-content ol { |
| list-style: decimal; |
| padding-left: 24px; |
| margin: 16px 0; |
| list-style-position: outside; |
| } |
|
|
| .message.assistant .message-content ol > li { |
| margin: 10px 0; |
| padding-left: 8px; |
| } |
|
|
| .message.assistant .message-content ol > li::marker { |
| color: var(--accent); |
| font-weight: 600; |
| } |
|
|
| |
| .message.assistant .message-content ol ol { |
| list-style: decimal; |
| padding-left: 24px; |
| margin-top: 8px; |
| } |
|
|
| .message.assistant .message-content ol ol > li { |
| margin: 8px 0; |
| padding-left: 8px; |
| } |
|
|
| .message.assistant .message-content ol ol > li::marker { |
| color: var(--text-secondary); |
| font-weight: 500; |
| } |
|
|
| |
| .message.assistant .message-content strong, |
| .message.assistant .message-content b { |
| font-weight: 600; |
| color: var(--text-primary); |
| letter-spacing: -0.01em; |
| font-size: inherit; |
| display: inline; |
| } |
|
|
| |
| .message.assistant .message-content p > strong:first-child, |
| .message.assistant .message-content p > b:first-child { |
| font-size: inherit; |
| display: inline; |
| } |
|
|
| |
| .message.assistant .message-content em, |
| .message.assistant .message-content i { |
| font-style: italic; |
| color: var(--text-secondary); |
| } |
|
|
| |
| .message.assistant .message-content u { |
| text-decoration: underline; |
| text-decoration-color: var(--accent); |
| text-underline-offset: 4px; |
| text-decoration-thickness: 2px; |
| } |
|
|
| |
| .message.assistant .message-content :not(pre) > code { |
| background: rgba(30, 41, 59, 0.8); |
| color: #e2e8f0; |
| padding: 2px 7px; |
| border-radius: 5px; |
| font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Monaco, Consolas, monospace; |
| font-size: 0.9em; |
| font-weight: 500; |
| border: 1px solid rgba(71, 85, 105, 0.5); |
| white-space: pre-wrap; |
| word-break: break-word; |
| display: inline; |
| line-height: 1.6; |
| vertical-align: baseline; |
| } |
|
|
| |
| [data-theme="light"] .message.assistant .message-content :not(pre) > code { |
| background: #f1f5f9; |
| color: #475569; |
| border-color: #e2e8f0; |
| } |
|
|
| |
| .message.assistant .message-content pre { |
| background: #1a1b26; |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| margin: 16px 0; |
| overflow: hidden; |
| position: relative; |
| } |
|
|
| .message.assistant .message-content pre code { |
| display: block; |
| padding: 16px 20px; |
| overflow-x: auto; |
| font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Monaco, Consolas, monospace; |
| font-size: 13px; |
| line-height: 1.6; |
| color: #a9b1d6; |
| background: transparent; |
| border: none; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| word-break: break-word; |
| } |
|
|
| |
| .message.assistant .message-content blockquote { |
| margin: 24px 0; |
| padding: 20px 28px; |
| border-left: 4px solid var(--accent); |
| background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, transparent 100%); |
| border-radius: 0 12px 12px 0; |
| color: var(--text-secondary); |
| font-style: italic; |
| position: relative; |
| box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08); |
| } |
|
|
| .message.assistant .message-content blockquote::before { |
| content: '"'; |
| position: absolute; |
| top: -8px; |
| left: 14px; |
| font-size: 3.5em; |
| color: var(--accent); |
| opacity: 0.25; |
| font-family: Georgia, serif; |
| line-height: 1; |
| } |
|
|
| .message.assistant .message-content blockquote p { |
| margin: 0; |
| padding-left: 24px; |
| line-height: 1.8; |
| } |
|
|
| |
| .message.assistant .message-content hr { |
| border: none; |
| height: 2px; |
| background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%); |
| margin: 32px 0; |
| opacity: 0.4; |
| border-radius: 1px; |
| } |
|
|
| |
| .message.assistant .message-content .math-block { |
| display: block; |
| margin: 20px 0; |
| padding: 20px 24px; |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%); |
| border-radius: 12px; |
| border-left: 4px solid var(--accent); |
| overflow-x: auto; |
| text-align: center; |
| } |
|
|
| .message.assistant .message-content .math-block .katex-display { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .message.assistant .message-content .math-inline { |
| display: inline; |
| padding: 2px 6px; |
| background: rgba(102, 126, 234, 0.1); |
| border-radius: 4px; |
| vertical-align: middle; |
| } |
|
|
| .message.assistant .message-content .math-fallback { |
| font-family: 'Times New Roman', 'Cambria Math', Georgia, serif; |
| font-style: italic; |
| letter-spacing: 0.5px; |
| } |
|
|
| .message.assistant .message-content .math-block.math-fallback { |
| font-size: 1.15em; |
| line-height: 1.8; |
| } |
|
|
| |
| .message.assistant .message-content .katex { |
| font-size: 1.1em; |
| color: var(--text-primary); |
| } |
|
|
| .message.assistant .message-content .math-block .katex { |
| font-size: 1.25em; |
| } |
|
|
| .message.assistant .message-content .katex-display > .katex { |
| display: inline-block; |
| text-align: center; |
| } |
|
|
| |
| [data-theme="light"] .message.assistant .message-content .math-block { |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%); |
| } |
|
|
| [data-theme="light"] .message.assistant .message-content .math-inline { |
| background: rgba(102, 126, 234, 0.15); |
| } |
|
|
| |
| .message.assistant .message-content .math-expr { |
| font-family: 'Times New Roman', 'Cambria Math', Georgia, serif; |
| font-style: italic; |
| letter-spacing: 0.3px; |
| } |
|
|
| |
| .message.assistant .message-content .math-symbol { |
| font-family: 'Times New Roman', 'Cambria Math', Georgia, serif; |
| color: var(--accent); |
| font-weight: 500; |
| font-size: 1.05em; |
| padding: 0 1px; |
| } |
|
|
| |
| .message.assistant .message-content .math-symbol:is([data-symbol="Ξ±"], [data-symbol="Ξ²"], [data-symbol="Ξ³"], [data-symbol="Ξ΄"], [data-symbol="Ο"], [data-symbol="ΞΈ"], [data-symbol="Ξ»"], [data-symbol="Ο"], [data-symbol="Ο"]) { |
| font-style: italic; |
| } |
|
|
| |
| .message.assistant .message-content .math-cursor { |
| animation: blink 1s step-end infinite; |
| color: var(--accent); |
| font-weight: bold; |
| } |
|
|
| .message.assistant .message-content .streaming-math { |
| opacity: 0.9; |
| border-right: 2px solid var(--accent); |
| animation: pulse-streaming 1.5s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse-streaming { |
| 0%, 100% { opacity: 0.9; } |
| 50% { opacity: 1; } |
| } |
|
|
| |
| .message.assistant .message-content a { |
| color: var(--accent); |
| text-decoration: none; |
| border-bottom: 1px solid transparent; |
| transition: all 0.2s ease; |
| font-weight: 500; |
| } |
|
|
| .message.assistant .message-content a:hover { |
| border-bottom-color: var(--accent); |
| color: var(--accent-hover); |
| } |
|
|
| .message.assistant .message-content a::after { |
| content: 'β'; |
| font-size: 0.75em; |
| margin-left: 2px; |
| opacity: 0.6; |
| vertical-align: super; |
| } |
|
|
| |
| .message.assistant .message-content table { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| margin: 20px 0; |
| font-size: 14px; |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); |
| border: 1px solid var(--border); |
| } |
|
|
| .message.assistant .message-content th, |
| .message.assistant .message-content td { |
| padding: 14px 18px; |
| text-align: left; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .message.assistant .message-content th { |
| background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%); |
| font-weight: 600; |
| color: var(--text-primary); |
| text-transform: uppercase; |
| font-size: 12px; |
| letter-spacing: 0.5px; |
| } |
|
|
| .message.assistant .message-content tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| .message.assistant .message-content tr:nth-child(even) { |
| background: rgba(102, 126, 234, 0.03); |
| } |
|
|
| .message.assistant .message-content tr:hover { |
| background: rgba(102, 126, 234, 0.06); |
| } |
|
|
| |
| .message-content p { |
| margin-bottom: 12px; |
| } |
|
|
| .message-content p:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .message-content pre { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 16px; |
| overflow-x: auto; |
| margin: 12px 0; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
|
|
| .message-content code { |
| font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Monaco, Consolas, monospace; |
| font-size: 0.9em; |
| line-height: 1.5; |
| } |
|
|
| .message-content :not(pre) > code { |
| background: rgba(30, 41, 59, 0.8); |
| color: #e2e8f0; |
| padding: 2px 7px; |
| border-radius: 5px; |
| border: 1px solid rgba(71, 85, 105, 0.5); |
| white-space: pre-wrap; |
| word-break: break-word; |
| display: inline; |
| } |
|
|
| [data-theme="light"] .message-content :not(pre) > code { |
| background: #f1f5f9; |
| color: #475569; |
| border-color: #e2e8f0; |
| } |
|
|
| |
|
|
| .message-attachments { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-bottom: 8px; |
| } |
|
|
| .attachment-item { |
| padding: 8px 12px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| font-size: 12px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| |
| .attachment-item.attachment-image { |
| flex-direction: column; |
| padding: 8px; |
| max-width: 280px; |
| cursor: pointer; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .attachment-item.attachment-image:hover { |
| transform: scale(1.02); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| } |
|
|
| .attachment-image-preview { |
| max-width: 100%; |
| max-height: 200px; |
| width: auto; |
| height: auto; |
| border-radius: 6px; |
| object-fit: contain; |
| background: var(--bg-secondary); |
| } |
|
|
| .attachment-image-name { |
| font-size: 11px; |
| color: var(--text-secondary); |
| text-align: center; |
| word-break: break-word; |
| max-width: 100%; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| margin-top: 4px; |
| } |
|
|
| .attachment-icon { |
| width: 20px; |
| height: 20px; |
| border-radius: 4px; |
| background: var(--bg-elevated); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .attachment-icon img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| border-radius: 4px; |
| } |
|
|
| .typing-indicator { |
| display: flex; |
| gap: 10px; |
| padding: 12px 0; |
| align-items: center; |
| } |
|
|
| .typing-dots { |
| display: flex; |
| gap: 6px; |
| align-items: center; |
| } |
|
|
| .typing-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--accent), #764ba2); |
| animation: typing 1.4s infinite; |
| box-shadow: 0 0 8px rgba(102, 126, 234, 0.4); |
| } |
|
|
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } |
|
|
| .typing-text { |
| font-size: 13px; |
| color: var(--text-secondary); |
| font-weight: 500; |
| opacity: 0; |
| max-width: 0; |
| overflow: hidden; |
| white-space: nowrap; |
| transition: opacity 0.3s ease, max-width 0.3s ease; |
| } |
|
|
| .typing-text:not(:empty) { |
| opacity: 1; |
| max-width: 300px; |
| } |
|
|
| .typing-status { |
| font-size: 12px; |
| color: var(--text-tertiary); |
| margin-top: 8px; |
| opacity: 0.8; |
| animation: fadeInStatus 0.3s ease-out; |
| } |
|
|
| @keyframes fadeInStatus { |
| from { opacity: 0; transform: translateY(-5px); } |
| to { opacity: 0.8; transform: translateY(0); } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .typing-indicator { |
| gap: 8px; |
| padding: 10px 0; |
| } |
| |
| .typing-dots { |
| gap: 5px; |
| } |
| |
| .typing-dot { |
| width: 7px; |
| height: 7px; |
| } |
| |
| .typing-text { |
| font-size: 12px; |
| max-width: 200px; |
| } |
| |
| .typing-text:not(:empty) { |
| max-width: 200px; |
| } |
| } |
|
|
| |
| @media (max-width: 480px) { |
| .typing-indicator { |
| gap: 6px; |
| padding: 8px 0; |
| } |
| |
| .typing-dots { |
| gap: 4px; |
| } |
| |
| .typing-dot { |
| width: 6px; |
| height: 6px; |
| } |
| |
| .typing-text { |
| font-size: 11px; |
| max-width: 150px; |
| } |
| |
| .typing-text:not(:empty) { |
| max-width: 150px; |
| } |
| } |
|
|
| @keyframes typing { |
| 0%, 60%, 100% { opacity: 0.4; transform: scale(0.85); } |
| 30% { opacity: 1; transform: scale(1.1); } |
| } |
|
|
| |
| .message.regenerating { |
| position: relative; |
| } |
|
|
| .message.regenerating .message-bubble { |
| opacity: 0.9; |
| } |
|
|
| .regenerating-indicator { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 16px 0; |
| color: var(--text-secondary); |
| } |
|
|
| .regenerating-spinner { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| animation: regenerate-spin 1.2s linear infinite; |
| } |
|
|
| .regenerating-spinner svg { |
| color: var(--accent); |
| } |
|
|
| .regenerating-text { |
| font-size: 14px; |
| font-weight: 500; |
| color: var(--text-secondary); |
| animation: regenerate-pulse 1.5s ease-in-out infinite; |
| } |
|
|
| @keyframes regenerate-spin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| @keyframes regenerate-pulse { |
| 0%, 100% { opacity: 0.6; } |
| 50% { opacity: 1; } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .regenerating-indicator { |
| gap: 10px; |
| padding: 12px 0; |
| } |
| |
| .regenerating-spinner svg { |
| width: 18px; |
| height: 18px; |
| } |
| |
| .regenerating-text { |
| font-size: 13px; |
| } |
| } |
|
|
| |
| .message.streaming { |
| contain: content; |
| } |
|
|
| .message.streaming .streaming-content { |
| min-height: 24px; |
| } |
|
|
| .message.streaming .streaming-content::after { |
| content: 'β'; |
| display: inline-block; |
| animation: modern-cursor-blink 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| color: var(--accent); |
| margin-left: 2px; |
| will-change: opacity; |
| } |
|
|
| |
| @keyframes modern-cursor-blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.2; } |
| } |
|
|
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.2; } |
| } |
|
|
| |
|
|
| |
|
|
| |
| .input-area { |
| padding: 12px 16px; |
| background: var(--bg-primary); |
| |
| flex-shrink: 0; |
| position: relative; |
| z-index: 50; |
| |
| transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), |
| bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), |
| box-shadow 0.2s ease; |
| will-change: transform, bottom; |
| } |
|
|
| .attachments-preview { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| margin-bottom: 8px; |
| max-width: 800px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
|
|
| .attachment-preview { |
| position: relative; |
| padding: 6px 10px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| font-size: 11px; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .attachment-preview .attachment-thumbnail { |
| width: 32px; |
| height: 32px; |
| object-fit: cover; |
| border-radius: 4px; |
| flex-shrink: 0; |
| } |
|
|
| .attachment-preview-remove { |
| padding: 2px; |
| background: transparent; |
| border: none; |
| color: var(--text-tertiary); |
| cursor: pointer; |
| border-radius: 4px; |
| transition: all 0.15s; |
| } |
|
|
| .attachment-preview-remove:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .input-container { |
| max-width: 800px; |
| margin: 0 auto; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: 24px; |
| padding: 8px 12px; |
| transition: all 0.2s; |
| } |
|
|
| .input-container:focus-within { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(62, 180, 137, 0.12); |
| } |
|
|
| .btn-attach { |
| padding: 6px; |
| background: transparent; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| border-radius: 50%; |
| transition: all 0.15s; |
| flex-shrink: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .btn-attach:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .btn-attach:active { |
| transform: scale(0.95); |
| } |
|
|
| .input-wrapper { |
| flex: 1; |
| display: flex; |
| align-items: center; |
| } |
|
|
| #messageInput { |
| width: 100%; |
| max-height: 120px; |
| padding: 4px 0; |
| background: transparent; |
| border: none; |
| color: var(--text-primary); |
| font-size: 14px; |
| font-family: inherit; |
| resize: none; |
| outline: none; |
| line-height: 1.4; |
| } |
|
|
| #messageInput::placeholder { |
| color: var(--text-tertiary); |
| } |
|
|
| .btn-send { |
| width: 32px; |
| height: 32px; |
| padding: 0; |
| background: var(--accent); |
| border: none; |
| color: white; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: all 0.2s var(--ease-out-expo); |
| flex-shrink: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| overflow: visible; |
| } |
|
|
| .btn-send:hover:not(:disabled) { |
| background: var(--accent-hover); |
| transform: scale(1.05); |
| box-shadow: 0 0 12px rgba(62, 180, 137, 0.35); |
| } |
|
|
| .btn-send:active:not(:disabled) { |
| transform: scale(0.95); |
| } |
|
|
| .btn-send:disabled { |
| opacity: 0.3; |
| cursor: not-allowed; |
| background: var(--text-tertiary); |
| } |
|
|
| .btn-send.loading { |
| opacity: 0.6; |
| pointer-events: none; |
| } |
|
|
| .btn-send.loading svg { |
| animation: pulse-send 1s ease-in-out infinite; |
| } |
|
|
| |
| .btn-send.generating { |
| background: #ef4444; |
| opacity: 1; |
| pointer-events: auto; |
| cursor: pointer; |
| } |
|
|
| .btn-send.generating:hover { |
| background: #dc2626; |
| transform: scale(1.05); |
| box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); |
| } |
|
|
| .btn-send.generating:active { |
| transform: scale(0.95); |
| } |
|
|
| .btn-send.generating svg { |
| animation: pulse-stop 1s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse-stop { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.7; transform: scale(0.9); } |
| } |
|
|
| @keyframes pulse-send { |
| 0%, 100% { opacity: 1; transform: translateY(0); } |
| 50% { opacity: 0.5; transform: translateY(-1px); } |
| } |
|
|
| .btn-send svg { |
| transition: transform 0.2s ease; |
| } |
|
|
| .btn-send:hover:not(:disabled) svg { |
| transform: translateY(-2px); |
| } |
|
|
| .input-footer { |
| max-width: 800px; |
| margin: 8px auto 0; |
| text-align: center; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .input-hint { |
| font-size: 11px; |
| color: var(--text-tertiary); |
| } |
|
|
| .offline-indicator { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| font-size: 11px; |
| color: #ef4444; |
| background: rgba(239, 68, 68, 0.1); |
| padding: 2px 8px; |
| border-radius: 10px; |
| animation: pulse-offline 2s ease-in-out infinite; |
| } |
|
|
| .offline-indicator svg { |
| stroke: #ef4444; |
| } |
|
|
| @keyframes pulse-offline { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.6; } |
| } |
|
|
| |
| .connection-quality-indicator { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| font-size: 10px; |
| padding: 2px 6px; |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| } |
|
|
| .connection-quality-indicator.excellent { |
| color: #22c55e; |
| background: rgba(34, 197, 94, 0.1); |
| } |
|
|
| .connection-quality-indicator.good { |
| color: #3b82f6; |
| background: rgba(59, 130, 246, 0.1); |
| } |
|
|
| .connection-quality-indicator.fair { |
| color: #f59e0b; |
| background: rgba(245, 158, 11, 0.1); |
| } |
|
|
| .connection-quality-indicator.poor { |
| color: #ef4444; |
| background: rgba(239, 68, 68, 0.1); |
| animation: pulse-offline 1.5s ease-in-out infinite; |
| } |
|
|
| .docs-link { |
| color: var(--accent); |
| text-decoration: none; |
| cursor: pointer; |
| transition: color 0.2s ease; |
| } |
|
|
| .docs-link:hover { |
| color: var(--accent-hover); |
| text-decoration: underline; |
| } |
|
|
| |
| .api-code-modal-overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.75); |
| backdrop-filter: blur(8px); |
| display: none; |
| align-items: center; |
| justify-content: center; |
| z-index: 10000; |
| animation: fadeIn 0.2s ease-out; |
| } |
|
|
| .api-code-modal-overlay.active { |
| display: flex; |
| } |
|
|
| .api-code-modal { |
| background: var(--bg-secondary); |
| border-radius: 16px; |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); |
| width: 90%; |
| max-width: 900px; |
| max-height: 85vh; |
| overflow: hidden; |
| animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .api-code-modal-header { |
| padding: 20px 24px; |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| flex-shrink: 0; |
| } |
|
|
| .api-code-modal-title { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: 18px; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .api-code-modal-title svg { |
| color: var(--accent); |
| } |
|
|
| .api-code-modal-close { |
| background: transparent; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| padding: 8px; |
| border-radius: 8px; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .api-code-modal-close:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .api-code-modal-content { |
| padding: 28px; |
| overflow-y: auto; |
| flex: 1; |
| background: var(--bg-secondary); |
| } |
|
|
| .api-model-selector { |
| margin-bottom: 24px; |
| } |
|
|
| .api-model-selector h3 { |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin: 0 0 16px 0; |
| } |
|
|
| .api-model-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
| gap: 12px; |
| } |
|
|
| .api-model-option { |
| background: var(--bg-tertiary); |
| border: 2px solid var(--border); |
| border-radius: 12px; |
| padding: 16px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| text-align: left; |
| } |
|
|
| .api-model-option:hover { |
| background: var(--bg-hover); |
| border-color: var(--accent); |
| transform: translateY(-2px); |
| } |
|
|
| .api-model-option.selected { |
| background: var(--accent) !important; |
| border-color: var(--accent) !important; |
| } |
|
|
| .api-model-option.selected .api-model-option-name, |
| .api-model-option.selected .api-model-option-endpoint { |
| color: white !important; |
| opacity: 1 !important; |
| } |
|
|
| .api-model-option-name { |
| font-size: 15px; |
| font-weight: 600; |
| display: block; |
| margin-bottom: 4px; |
| color: var(--text-primary); |
| } |
|
|
| .api-model-option-endpoint { |
| font-size: 12px; |
| opacity: 0.7; |
| font-family: 'Courier New', monospace; |
| display: block; |
| color: var(--text-secondary); |
| } |
|
|
| .api-code-examples { |
| display: none; |
| margin-top: 24px; |
| padding-top: 24px; |
| border-top: 2px solid var(--border); |
| animation: slideInUp 0.3s ease-out; |
| } |
|
|
| .api-code-examples.active { |
| display: block; |
| } |
|
|
| @keyframes slideInUp { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .api-language-tabs { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 20px; |
| border-bottom: 2px solid var(--border); |
| padding-bottom: 0; |
| } |
|
|
| .api-language-tab { |
| background: transparent; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| padding: 12px 20px; |
| font-size: 14px; |
| font-weight: 600; |
| border-bottom: 3px solid transparent; |
| margin-bottom: -2px; |
| transition: all 0.2s ease; |
| } |
|
|
| .api-language-tab:hover { |
| color: var(--text-primary); |
| background: var(--bg-hover); |
| } |
|
|
| .api-language-tab.active { |
| color: var(--accent); |
| border-bottom-color: var(--accent); |
| background: transparent; |
| } |
|
|
| .api-code-block { |
| display: none; |
| } |
|
|
| .api-code-block.active { |
| display: block; |
| } |
|
|
| .api-code-section { |
| margin-bottom: 24px; |
| } |
|
|
| .api-code-section h4 { |
| font-size: 15px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin: 0 0 16px 0; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .api-code-section h4::before { |
| content: ''; |
| width: 4px; |
| height: 16px; |
| background: var(--accent); |
| border-radius: 2px; |
| } |
|
|
| .api-code-wrapper { |
| position: relative; |
| background: var(--bg-primary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| overflow: hidden; |
| margin-bottom: 16px; |
| } |
|
|
| .api-code-copy-btn { |
| position: absolute; |
| top: 8px; |
| right: 8px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| color: var(--text-primary); |
| cursor: pointer; |
| padding: 6px 12px; |
| border-radius: 6px; |
| font-size: 12px; |
| font-weight: 600; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| z-index: 10; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .api-code-copy-btn:hover { |
| background: var(--accent); |
| color: white; |
| border-color: var(--accent); |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| } |
|
|
| .api-code-copy-btn:active { |
| transform: translateY(0); |
| } |
|
|
| .api-code-copy-btn.copied { |
| background: var(--success); |
| color: white; |
| border-color: var(--success); |
| } |
|
|
| .api-code-copy-btn svg { |
| flex-shrink: 0; |
| } |
|
|
| .api-code-pre { |
| margin: 0; |
| padding: 16px; |
| padding-right: 80px; |
| overflow-x: auto; |
| font-family: 'Courier New', monospace; |
| font-size: 13px; |
| line-height: 1.6; |
| color: var(--text-primary); |
| white-space: pre; |
| word-wrap: normal; |
| } |
|
|
| .api-code-pre code { |
| font-family: 'Courier New', monospace; |
| font-size: 13px; |
| color: var(--text-primary); |
| } |
|
|
| .api-code-pre::-webkit-scrollbar { |
| height: 8px; |
| } |
|
|
| .api-code-pre::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| .api-code-pre::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: 4px; |
| } |
|
|
| .api-code-pre::-webkit-scrollbar-thumb:hover { |
| background: var(--text-tertiary); |
| } |
|
|
| .api-code-modal-content::-webkit-scrollbar { |
| width: 8px; |
| } |
|
|
| .api-code-modal-content::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| .api-code-modal-content::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: 4px; |
| } |
|
|
| .api-code-modal-content::-webkit-scrollbar-thumb:hover { |
| background: var(--text-tertiary); |
| } |
|
|
| |
| .api-endpoint-info { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 16px; |
| margin-bottom: 20px; |
| } |
|
|
| .api-endpoint-info-header { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-bottom: 8px; |
| } |
|
|
| .api-endpoint-info-header strong { |
| color: var(--text-primary); |
| } |
|
|
| .api-endpoint-info code { |
| color: var(--accent); |
| font-size: 14px; |
| } |
|
|
| |
| [data-theme="light"] .api-code-modal-overlay { |
| background: rgba(0, 0, 0, 0.5); |
| } |
|
|
| [data-theme="light"] .api-code-modal { |
| background: #ffffff; |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); |
| } |
|
|
| [data-theme="light"] .api-code-modal-content { |
| background: #ffffff; |
| } |
|
|
| [data-theme="light"] .api-model-option { |
| background: #f8fafc; |
| } |
|
|
| [data-theme="light"] .api-model-option:hover { |
| background: #f1f5f9; |
| } |
|
|
| [data-theme="light"] .api-model-option.selected { |
| background: var(--accent); |
| border-color: var(--accent); |
| } |
|
|
| [data-theme="light"] .api-model-option.selected .api-model-option-name, |
| [data-theme="light"] .api-model-option.selected .api-model-option-endpoint { |
| color: white !important; |
| opacity: 1 !important; |
| } |
|
|
| [data-theme="light"] .api-code-wrapper { |
| background: #f8fafc; |
| } |
|
|
| [data-theme="light"] .api-code-copy-btn { |
| background: #ffffff; |
| color: #1e293b; |
| border-color: #cbd5e1; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| } |
|
|
| [data-theme="light"] .api-code-copy-btn:hover { |
| background: #10b981; |
| color: white; |
| border-color: #10b981; |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); |
| } |
|
|
| |
| .docs-modal-overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.85); |
| z-index: 10000; |
| display: none; |
| align-items: stretch; |
| justify-content: stretch; |
| padding: 0; |
| opacity: 0; |
| transition: opacity 0.2s ease; |
| will-change: opacity; |
| } |
|
|
| .docs-modal-overlay.show { |
| display: flex; |
| opacity: 1; |
| } |
|
|
| .docs-modal { |
| background: var(--bg-secondary); |
| border-radius: 0; |
| width: 100%; |
| height: 100%; |
| max-width: 100%; |
| max-height: 100%; |
| display: flex; |
| flex-direction: column; |
| box-shadow: none; |
| border: none; |
| transform: scale(0.98); |
| opacity: 0; |
| transition: transform 0.2s ease-out, opacity 0.2s ease-out; |
| } |
|
|
| .docs-modal-overlay.show .docs-modal { |
| transform: scale(1); |
| opacity: 1; |
| } |
|
|
| .docs-modal-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 20px 24px; |
| border-bottom: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
|
|
| .docs-modal-title { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: 20px; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .docs-modal-close { |
| background: transparent; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| padding: 8px; |
| border-radius: 8px; |
| transition: all 0.2s ease; |
| } |
|
|
| .docs-modal-close:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .docs-modal-content { |
| flex: 1; |
| overflow-y: auto; |
| overflow-x: hidden; |
| padding: 24px; |
| scroll-behavior: smooth; |
| overscroll-behavior: contain; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| .docs-modal-content::-webkit-scrollbar { |
| width: 8px; |
| } |
|
|
| .docs-modal-content::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| .docs-modal-content::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: 4px; |
| } |
|
|
| .docs-modal-content::-webkit-scrollbar-thumb:hover { |
| background: var(--text-tertiary); |
| } |
|
|
| |
| .docs-section { |
| margin-bottom: 32px; |
| } |
|
|
| .docs-section:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .docs-section-title { |
| font-size: 18px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 16px; |
| padding-bottom: 8px; |
| border-bottom: 2px solid var(--accent); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .docs-section-title svg { |
| color: var(--accent); |
| } |
|
|
| .docs-text { |
| color: var(--text-secondary); |
| line-height: 1.7; |
| margin-bottom: 12px; |
| } |
|
|
| .docs-text:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .docs-highlight { |
| color: var(--accent); |
| font-weight: 500; |
| } |
|
|
| .docs-model-card { |
| background: var(--bg-tertiary); |
| border-radius: 12px; |
| padding: 20px; |
| margin-bottom: 16px; |
| border: 1px solid var(--border); |
| transition: all 0.2s ease; |
| } |
|
|
| .docs-model-card:hover { |
| border-color: var(--accent); |
| transform: translateY(-2px); |
| } |
|
|
| .docs-model-card:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .docs-model-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 12px; |
| } |
|
|
| .docs-model-name { |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--text-primary); |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .docs-model-badge { |
| font-size: 10px; |
| padding: 3px 8px; |
| border-radius: 12px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .docs-model-desc { |
| color: var(--text-secondary); |
| font-size: 14px; |
| margin-bottom: 16px; |
| line-height: 1.6; |
| } |
|
|
| .docs-model-specs { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); |
| gap: 12px; |
| } |
|
|
| .docs-spec { |
| background: var(--bg-secondary); |
| padding: 12px; |
| border-radius: 8px; |
| text-align: center; |
| } |
|
|
| .docs-spec-label { |
| font-size: 11px; |
| color: var(--text-tertiary); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| margin-bottom: 4px; |
| } |
|
|
| .docs-spec-value { |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .docs-list { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
|
|
| .docs-list li { |
| padding: 8px 0; |
| padding-left: 24px; |
| position: relative; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| } |
|
|
| .docs-list li::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 14px; |
| width: 8px; |
| height: 8px; |
| background: var(--accent); |
| border-radius: 50%; |
| } |
|
|
| .docs-table { |
| width: 100%; |
| border-collapse: collapse; |
| margin: 16px 0; |
| font-size: 14px; |
| } |
|
|
| .docs-table th, |
| .docs-table td { |
| padding: 12px 16px; |
| text-align: left; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .docs-table th { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| font-weight: 600; |
| } |
|
|
| .docs-table td { |
| color: var(--text-secondary); |
| } |
|
|
| .docs-table tr:hover td { |
| background: var(--bg-tertiary); |
| } |
|
|
| .docs-founder-card { |
| background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%); |
| border-radius: 12px; |
| padding: 24px; |
| border: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| } |
|
|
| .docs-founder-avatar { |
| width: 80px; |
| height: 80px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 32px; |
| font-weight: 700; |
| color: white; |
| flex-shrink: 0; |
| } |
|
|
| .docs-founder-info { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .docs-founder-info h4 { |
| font-size: 18px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .docs-founder-info p { |
| color: var(--text-secondary); |
| font-size: 14px; |
| line-height: 1.6; |
| } |
|
|
| |
| @media (max-width: 480px) { |
| .docs-founder-card { |
| flex-direction: column; |
| text-align: center; |
| padding: 20px; |
| gap: 16px; |
| } |
| |
| .docs-founder-avatar { |
| width: 72px; |
| height: 72px; |
| font-size: 28px; |
| } |
| |
| .docs-founder-info h4 { |
| font-size: 17px; |
| } |
| |
| .docs-founder-info p { |
| font-size: 13px; |
| } |
| } |
|
|
| .docs-warning { |
| background: rgba(245, 158, 11, 0.1); |
| border: 1px solid rgba(245, 158, 11, 0.3); |
| border-radius: 8px; |
| padding: 16px; |
| margin: 16px 0; |
| } |
|
|
| .docs-warning-title { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-weight: 600; |
| color: #f59e0b; |
| margin-bottom: 8px; |
| } |
|
|
| .docs-warning-text { |
| color: var(--text-secondary); |
| font-size: 14px; |
| line-height: 1.6; |
| } |
|
|
| |
| .context-menu { |
| position: fixed; |
| background: var(--bg-elevated); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 4px; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
| z-index: 1000; |
| display: none; |
| } |
|
|
| .context-menu.show { |
| display: block; |
| animation: fadeIn 0.15s var(--ease-out-expo); |
| } |
|
|
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: scale(0.95); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| |
| .btn-new-chat:active, |
| .chat-item:active, |
| .btn-icon:active, |
| .btn-attach:active { |
| transform: scale(0.95); |
| } |
|
|
| |
| #messageInput:focus { |
| animation: inputFocus 0.3s ease; |
| } |
|
|
| @keyframes inputFocus { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.01); } |
| 100% { transform: scale(1); } |
| } |
|
|
| |
| .model-option { |
| opacity: 1; |
| } |
|
|
| |
| .logo-container::after { |
| content: ''; |
| position: absolute; |
| inset: -40px; |
| background: radial-gradient(circle, rgba(62, 180, 137, 0.12), transparent 60%); |
| pointer-events: none; |
| } |
|
|
| |
|
|
| |
| .sidebar.open { |
| box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25); |
| } |
|
|
| |
| .welcome-content { |
| animation: fadeIn 0.3s ease-out; |
| } |
|
|
| .welcome-title { |
| opacity: 1; |
| } |
|
|
| .suggestions { |
| opacity: 1; |
| } |
|
|
| |
| .context-menu { |
| transform-origin: top left; |
| } |
|
|
| .context-menu.show { |
| animation: scaleIn 0.15s ease-out; |
| } |
|
|
| @keyframes scaleIn { |
| from { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| |
| .btn-send:disabled { |
| opacity: 0.4; |
| } |
|
|
| |
| button, input, textarea, select { |
| transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; |
| } |
|
|
| a { |
| transition: color 0.15s ease; |
| } |
|
|
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--border); |
| transition: background 0.2s ease; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--text-tertiary); |
| } |
|
|
| ::-webkit-scrollbar-thumb:active { |
| background: var(--accent); |
| } |
|
|
| |
| [data-theme-transitioning] { |
| transition: background-color 0.2s ease, color 0.2s ease; |
| } |
|
|
| |
| .input-container { |
| transition: border-color 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| |
| .attachment-preview { |
| position: relative; |
| transition: background-color 0.15s ease; |
| } |
|
|
| .attachment-preview:hover { |
| background: var(--bg-hover); |
| } |
|
|
| |
| .message-bubble { |
| transition: none; |
| } |
|
|
| .context-menu-item { |
| width: 100%; |
| padding: 8px 12px; |
| background: transparent; |
| border: none; |
| color: var(--text-primary); |
| font-size: 13px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| border-radius: 6px; |
| transition: all 0.15s; |
| text-align: left; |
| } |
|
|
| .context-menu-item:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .context-menu-item[data-action="delete"] { |
| color: var(--error); |
| } |
|
|
| |
| .modal { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.75); |
| display: none; |
| align-items: center; |
| justify-content: center; |
| z-index: 2000; |
| will-change: opacity; |
| } |
|
|
| .modal.show { |
| display: flex; |
| animation: fadeIn 0.15s var(--ease-out-expo); |
| } |
|
|
| .modal-content { |
| background: var(--bg-elevated); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 24px; |
| max-width: 400px; |
| width: 90%; |
| } |
|
|
| .modal-content h3 { |
| font-size: 18px; |
| margin-bottom: 16px; |
| } |
|
|
| .modal-content input { |
| width: 100%; |
| padding: 10px 12px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-primary); |
| font-size: 14px; |
| font-family: inherit; |
| margin-bottom: 16px; |
| } |
|
|
| .modal-content input:focus { |
| outline: none; |
| border-color: var(--accent); |
| } |
|
|
| .modal-actions { |
| display: flex; |
| gap: 8px; |
| justify-content: flex-end; |
| } |
|
|
| .btn-primary, .btn-secondary { |
| padding: 8px 16px; |
| border: none; |
| border-radius: 6px; |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.15s; |
| } |
|
|
| .btn-primary { |
| background: var(--accent); |
| color: white; |
| } |
|
|
| .btn-primary:hover { |
| background: var(--accent-hover); |
| } |
|
|
| .btn-secondary { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--bg-hover); |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: 3px; |
| transition: background 0.15s ease; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--text-tertiary); |
| } |
|
|
| |
| .chat-container:active::-webkit-scrollbar-thumb { |
| background: var(--accent); |
| } |
|
|
| |
|
|
| |
| .sidebar-overlay { |
| display: none; |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.6); |
| z-index: 99; |
| will-change: opacity; |
| } |
|
|
| |
| @media (max-width: 1024px) { |
| .suggestions { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .welcome-title { |
| font-size: 28px; |
| margin-bottom: 32px; |
| } |
| |
| .logo-container { |
| margin-bottom: 24px; |
| } |
| |
| .logo { |
| width: 56px; |
| height: 56px; |
| } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| :root { |
| --header-height: 56px; |
| --sidebar-width: 300px; |
| --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); |
| --mobile-safe-top: env(safe-area-inset-top, 0px); |
| } |
| |
| |
| .app { |
| height: 100vh; |
| height: 100dvh; |
| overflow: hidden; |
| } |
| |
| |
| .sidebar { |
| position: fixed; |
| left: 0; |
| top: 0; |
| height: 100vh; |
| height: 100dvh; |
| width: var(--sidebar-width); |
| max-width: 85vw; |
| z-index: 1000; |
| transform: translateX(-100%); |
| box-shadow: none; |
| margin-left: 0 !important; |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| padding-top: var(--mobile-safe-top); |
| background: var(--bg-secondary); |
| } |
| |
| .sidebar.open { |
| transform: translateX(0); |
| box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); |
| } |
| |
| .sidebar.collapsed { |
| margin-left: 0 !important; |
| transform: translateX(-100%); |
| } |
| |
| .sidebar-overlay.show { |
| display: block; |
| animation: fadeIn 0.2s ease; |
| } |
| |
| |
| .sidebar-header { |
| padding: 16px; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .btn-new-chat { |
| padding: 14px 16px; |
| font-size: 15px; |
| border-radius: 12px; |
| font-weight: 600; |
| } |
| |
| |
| .chat-list { |
| padding: 12px; |
| } |
| |
| .chat-item { |
| padding: 14px 16px; |
| margin-bottom: 4px; |
| border-radius: 12px; |
| font-size: 15px; |
| min-height: 48px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .chat-item-menu { |
| opacity: 1; |
| padding: 8px; |
| min-width: 36px; |
| min-height: 36px; |
| } |
| |
| |
| .sidebar-footer { |
| padding: 16px; |
| padding-bottom: calc(16px + var(--mobile-safe-bottom)); |
| } |
| |
| .user-menu { |
| padding: 12px 14px; |
| border-radius: 12px; |
| } |
| |
| .user-avatar { |
| width: 36px; |
| height: 36px; |
| font-size: 14px; |
| } |
| |
| .user-name { |
| font-size: 15px; |
| } |
| |
| |
| .header { |
| height: var(--header-height); |
| padding: 0 12px; |
| padding-top: var(--mobile-safe-top); |
| gap: 8px; |
| background: var(--bg-primary); |
| border-bottom: 1px solid var(--border); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| .header-title { |
| flex: 1; |
| text-align: center; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .header-title h1 { |
| font-size: 17px; |
| font-weight: 600; |
| max-width: 180px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .btn-toggle-sidebar { |
| width: 40px; |
| height: 40px; |
| padding: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 10px; |
| } |
| |
| .btn-toggle-sidebar svg { |
| width: 22px; |
| height: 22px; |
| } |
| |
| .btn-icon { |
| width: 40px; |
| height: 40px; |
| padding: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 10px; |
| } |
| |
| .btn-icon svg { |
| width: 20px; |
| height: 20px; |
| } |
| |
| .header-actions { |
| gap: 4px; |
| } |
| |
| |
| .model-selector-btn { |
| padding: 8px 10px; |
| font-size: 15px; |
| border-radius: 10px; |
| min-width: auto; |
| } |
| |
| .model-name { |
| max-width: 90px; |
| } |
| |
| .model-chevron { |
| width: 14px; |
| height: 14px; |
| } |
| |
| |
| .main { |
| display: flex; |
| flex-direction: column; |
| height: 100vh; |
| height: 100dvh; |
| overflow: hidden; |
| } |
| |
| |
| .chat-container { |
| flex: 1; |
| overflow-y: auto; |
| overflow-x: hidden; |
| -webkit-overflow-scrolling: touch; |
| overscroll-behavior-y: contain; |
| scroll-behavior: smooth; |
| } |
| |
| |
| .welcome { |
| padding: 24px 20px; |
| min-height: 100%; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| .welcome-content { |
| max-width: 100%; |
| } |
| |
| .logo-container { |
| margin-bottom: 24px; |
| } |
| |
| .logo { |
| width: 52px; |
| height: 52px; |
| } |
| |
| .logo-glow { |
| inset: -15px; |
| } |
| |
| .welcome-title { |
| font-size: 24px; |
| margin-bottom: 32px; |
| line-height: 1.3; |
| } |
| |
| |
| .suggestions { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| |
| .suggestion-card { |
| padding: 16px; |
| border-radius: 16px; |
| flex-shrink: 0; |
| min-height: auto; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| |
| .suggestion-card:active { |
| transform: scale(0.98); |
| } |
| |
| .suggestion-icon { |
| width: 40px; |
| height: 40px; |
| border-radius: 10px; |
| } |
| |
| .suggestion-icon svg { |
| width: 20px; |
| height: 20px; |
| } |
| |
| .suggestion-title { |
| font-size: 15px; |
| font-weight: 600; |
| } |
| |
| .suggestion-desc { |
| font-size: 13px; |
| margin-top: 2px; |
| } |
| |
| |
| .messages { |
| padding: 12px; |
| gap: 20px; |
| max-width: 100%; |
| } |
| |
| .message { |
| max-width: 100%; |
| gap: 10px; |
| flex-direction: row; |
| } |
| |
| .message.user { |
| flex-direction: row-reverse; |
| } |
| |
| |
| .message-avatar { |
| width: 28px; |
| height: 28px; |
| font-size: 12px; |
| flex-shrink: 0; |
| align-self: flex-start; |
| } |
| |
| .message-avatar.ai-avatar-logo .ai-logo { |
| width: 18px; |
| height: 18px; |
| } |
| |
| |
| .message-bubble { |
| flex: 1; |
| min-width: 0; |
| max-width: calc(100% - 38px); |
| } |
| |
| .message-content { |
| padding: 12px 14px; |
| font-size: 15px; |
| line-height: 1.6; |
| border-radius: 18px; |
| word-break: break-word; |
| } |
| |
| .message.user .message-content { |
| border-bottom-right-radius: 6px; |
| padding: 14px 16px; |
| } |
| |
| .message.assistant .message-content { |
| padding: 0; |
| font-size: 15px; |
| line-height: 1.7; |
| } |
| |
| |
| .message.assistant .message-bubble { |
| max-width: 100%; |
| } |
| |
| |
| .message-content pre { |
| padding: 14px; |
| font-size: 13px; |
| border-radius: 12px; |
| margin: 12px 0; |
| } |
| |
| .message-content code { |
| font-size: 0.88em; |
| } |
| |
| |
| .message-content :not(pre) > code { |
| padding: 2px 6px; |
| font-size: 0.88em; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
| |
| .message-content :not(pre) > code { |
| padding: 2px 6px; |
| font-size: 13px; |
| } |
| |
| |
| .msg-actions { |
| opacity: 1; |
| transform: translateY(0); |
| margin-top: 12px; |
| flex-wrap: wrap; |
| } |
| |
| .msg-action-btn { |
| padding: 10px 14px; |
| font-size: 13px; |
| border-radius: 10px; |
| min-height: 40px; |
| } |
| |
| .msg-edit-btn { |
| opacity: 1; |
| position: relative; |
| top: auto; |
| right: auto; |
| width: auto; |
| height: 40px; |
| padding: 10px 14px; |
| margin-top: 8px; |
| border-radius: 10px; |
| } |
| |
| |
| .input-area { |
| padding: 12px 16px; |
| padding-bottom: calc(12px + var(--mobile-safe-bottom)); |
| background: var(--bg-primary); |
| border-top: 1px solid var(--border); |
| position: sticky; |
| bottom: 0; |
| z-index: 50; |
| } |
| |
| .attachments-preview { |
| margin-bottom: 10px; |
| max-width: 100%; |
| } |
| |
| .attachment-preview { |
| padding: 8px 12px; |
| font-size: 13px; |
| border-radius: 10px; |
| } |
| |
| .input-container { |
| padding: 8px 12px; |
| border-radius: 24px; |
| gap: 8px; |
| min-height: 48px; |
| max-width: 100%; |
| } |
| |
| .input-container:focus-within { |
| box-shadow: 0 0 0 2px rgba(62, 180, 137, 0.2); |
| } |
| |
| .btn-attach { |
| width: 36px; |
| height: 36px; |
| padding: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 50%; |
| } |
| |
| .btn-attach svg { |
| width: 20px; |
| height: 20px; |
| } |
| |
| #messageInput { |
| font-size: 16px; |
| max-height: 120px; |
| min-height: 24px; |
| padding: 6px 0; |
| line-height: 1.5; |
| } |
| |
| #messageInput::placeholder { |
| font-size: 16px; |
| } |
| |
| .btn-send { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| } |
| |
| .btn-send svg { |
| width: 18px; |
| height: 18px; |
| } |
| |
| .input-footer { |
| margin-top: 10px; |
| } |
| |
| .input-hint { |
| font-size: 12px; |
| } |
| |
| |
| .modal-content { |
| width: 100%; |
| max-width: 100%; |
| margin: 16px; |
| padding: 24px; |
| border-radius: 20px; |
| } |
| |
| .modal-content h3 { |
| font-size: 18px; |
| margin-bottom: 20px; |
| } |
| |
| .modal-content input { |
| padding: 14px 16px; |
| font-size: 16px; |
| border-radius: 12px; |
| margin-bottom: 20px; |
| } |
| |
| .modal-actions { |
| gap: 12px; |
| } |
| |
| .btn-primary, .btn-secondary { |
| padding: 14px 24px; |
| font-size: 15px; |
| border-radius: 12px; |
| flex: 1; |
| min-height: 48px; |
| } |
| |
| |
| .context-menu { |
| position: fixed !important; |
| bottom: 0 !important; |
| left: 0 !important; |
| right: 0 !important; |
| top: auto !important; |
| border-radius: 20px 20px 0 0; |
| padding: 8px 8px calc(8px + var(--mobile-safe-bottom)); |
| max-height: 60vh; |
| animation: slideUpMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .context-menu::before { |
| content: ''; |
| display: block; |
| width: 36px; |
| height: 4px; |
| background: var(--border); |
| border-radius: 2px; |
| margin: 8px auto 16px; |
| } |
| |
| .context-menu-item { |
| padding: 16px 20px; |
| font-size: 16px; |
| border-radius: 12px; |
| min-height: 52px; |
| } |
| |
| .context-menu-item svg { |
| width: 20px; |
| height: 20px; |
| } |
| |
| |
| .docs-modal { |
| border-radius: 0; |
| } |
| |
| .docs-modal-header { |
| padding: 12px 16px; |
| padding-top: calc(12px + var(--mobile-safe-top)); |
| } |
| |
| .docs-modal-title { |
| font-size: 16px; |
| } |
| |
| .docs-modal-content { |
| padding: 16px; |
| padding-bottom: calc(16px + var(--mobile-safe-bottom)); |
| } |
| |
| |
| .docs-modal-content h2 { |
| font-size: 18px; |
| margin-top: 24px; |
| } |
| |
| .docs-modal-content h3 { |
| font-size: 16px; |
| } |
| |
| .docs-modal-content p { |
| font-size: 14px; |
| line-height: 1.6; |
| } |
| |
| .docs-modal-content ul, |
| .docs-modal-content ol { |
| padding-left: 20px; |
| } |
| |
| .docs-modal-content li { |
| font-size: 14px; |
| margin: 8px 0; |
| } |
| |
| |
| .docs-model-grid { |
| grid-template-columns: 1fr; |
| gap: 12px; |
| } |
| |
| .docs-model-card { |
| padding: 14px; |
| } |
| |
| .docs-model-card h4 { |
| font-size: 15px; |
| } |
| |
| .docs-model-card p { |
| font-size: 13px; |
| } |
| |
| |
| .docs-modal-content table.docs-table { |
| display: block; |
| overflow-x: auto; |
| -webkit-overflow-scrolling: touch; |
| white-space: nowrap; |
| font-size: 12px; |
| min-width: 100%; |
| } |
| |
| .docs-table { |
| font-size: 12px; |
| } |
| |
| .docs-table th, |
| .docs-table td { |
| padding: 8px 10px; |
| white-space: nowrap; |
| } |
| |
| .docs-table th:first-child, |
| .docs-table td:first-child { |
| position: sticky; |
| left: 0; |
| background: var(--bg-tertiary); |
| z-index: 1; |
| } |
| |
| .docs-table td:first-child { |
| background: var(--bg-secondary); |
| } |
| |
| |
| .version-nav { |
| gap: 8px; |
| margin-top: 16px; |
| padding-top: 12px; |
| } |
| |
| .version-btn { |
| width: 40px; |
| height: 40px; |
| border-radius: 10px; |
| } |
| |
| .version-info { |
| font-size: 14px; |
| min-width: 60px; |
| } |
| } |
|
|
| |
| @media (max-width: 480px) { |
| :root { |
| --header-height: 52px; |
| } |
| |
| .header-title h1 { |
| font-size: 16px; |
| max-width: 140px; |
| } |
| |
| .welcome { |
| padding: 20px 16px; |
| } |
| |
| .welcome-title { |
| font-size: 22px; |
| margin-bottom: 28px; |
| } |
| |
| .logo { |
| width: 48px; |
| height: 48px; |
| } |
| |
| .suggestion-card { |
| padding: 14px; |
| } |
| |
| .suggestion-icon { |
| width: 36px; |
| height: 36px; |
| } |
| |
| .suggestion-title { |
| font-size: 14px; |
| } |
| |
| .suggestion-desc { |
| font-size: 12px; |
| } |
| |
| .messages { |
| padding: 12px; |
| gap: 20px; |
| } |
| |
| .message-avatar { |
| width: 28px; |
| height: 28px; |
| font-size: 12px; |
| } |
| |
| .message-content { |
| padding: 10px 14px; |
| font-size: 15px; |
| border-radius: 18px; |
| } |
| |
| .input-area { |
| padding: 10px 12px; |
| padding-bottom: calc(10px + var(--mobile-safe-bottom)); |
| } |
| |
| .input-container { |
| padding: 6px 10px; |
| min-height: 44px; |
| } |
| |
| #messageInput { |
| font-size: 16px; |
| } |
| |
| .btn-attach, |
| .btn-send { |
| width: 32px; |
| height: 32px; |
| } |
| |
| .btn-attach svg, |
| .btn-send svg { |
| width: 18px; |
| height: 18px; |
| } |
| |
| .model-selector-btn { |
| padding: 6px 8px; |
| font-size: 14px; |
| min-width: auto; |
| } |
| |
| .model-name { |
| max-width: 70px; |
| } |
| |
| |
| .model-dropdown { |
| position: fixed; |
| left: 12px !important; |
| right: 12px; |
| bottom: calc(12px + var(--mobile-safe-bottom)); |
| top: auto; |
| min-width: auto; |
| width: auto; |
| border-radius: 20px; |
| padding: 12px; |
| animation: slideUpMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .model-option { |
| padding: 14px 16px; |
| border-radius: 14px; |
| min-height: 56px; |
| } |
| |
| .model-option-name { |
| font-size: 15px; |
| } |
| |
| .model-option-desc { |
| font-size: 12px; |
| } |
| |
| |
| .docs-table { |
| font-size: 11px; |
| } |
| |
| .docs-table th, |
| .docs-table td { |
| padding: 6px 8px; |
| } |
| } |
|
|
| |
| @keyframes slideUpMobile { |
| from { |
| transform: translateY(100%); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
|
|
| |
| @media (max-width: 768px) and (orientation: landscape) { |
| .welcome { |
| padding: 16px 24px; |
| min-height: auto; |
| } |
| |
| .welcome-title { |
| font-size: 20px; |
| margin-bottom: 20px; |
| } |
| |
| .logo-container { |
| margin-bottom: 16px; |
| } |
| |
| .logo { |
| width: 40px; |
| height: 40px; |
| } |
| |
| .suggestions { |
| flex-direction: row; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
| |
| .suggestion-card { |
| flex: 1 1 calc(50% - 4px); |
| min-width: 200px; |
| padding: 12px; |
| } |
| |
| .messages { |
| padding: 12px 24px; |
| } |
| |
| .input-area { |
| padding: 8px 24px; |
| padding-bottom: calc(8px + var(--mobile-safe-bottom)); |
| } |
| } |
|
|
| |
| @media (hover: none) and (pointer: coarse) { |
| .chat-item:hover { |
| background: transparent; |
| } |
| |
| .chat-item:active { |
| background: var(--bg-hover); |
| } |
| |
| .suggestion-card:hover { |
| transform: none; |
| box-shadow: none; |
| } |
| |
| .suggestion-card:active { |
| transform: scale(0.98); |
| background: var(--bg-tertiary); |
| } |
| |
| .btn-send:hover:not(:disabled) { |
| transform: none; |
| box-shadow: none; |
| } |
| |
| .btn-send:active:not(:disabled) { |
| transform: scale(0.95); |
| } |
| |
| |
| .btn-toggle-sidebar, |
| .btn-icon, |
| .btn-attach, |
| .btn-send { |
| min-width: 44px; |
| min-height: 44px; |
| } |
| |
| .chat-item { |
| min-height: 52px; |
| } |
| |
| .context-menu-item { |
| min-height: 52px; |
| } |
| } |
|
|
|
|
| |
| .code-block { |
| margin: 20px 0; |
| border-radius: 12px; |
| overflow: hidden; |
| background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| box-shadow: |
| 0 4px 6px -1px rgba(0, 0, 0, 0.3), |
| 0 2px 4px -1px rgba(0, 0, 0, 0.2), |
| inset 0 1px 0 rgba(255, 255, 255, 0.05); |
| width: 100%; |
| max-width: 100%; |
| } |
|
|
| [data-theme="light"] .code-block { |
| background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| box-shadow: |
| 0 4px 6px -1px rgba(0, 0, 0, 0.1), |
| 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
|
|
| .code-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 12px 16px; |
| background: rgba(0, 0, 0, 0.5); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); |
| gap: 12px; |
| flex-wrap: nowrap; |
| } |
|
|
| [data-theme="light"] .code-header { |
| background: rgba(0, 0, 0, 0.04); |
| border-bottom: 1px solid rgba(0, 0, 0, 0.08); |
| } |
|
|
| .code-language { |
| font-size: 13px; |
| font-weight: 500; |
| color: #9ca3af; |
| text-transform: lowercase; |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| flex-shrink: 1; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| [data-theme="light"] .code-language { |
| color: #6b7280; |
| } |
|
|
| .code-copy-btn { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 14px; |
| background: rgba(255, 255, 255, 0.08); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 8px; |
| color: #e2e8f0; |
| font-size: 13px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| flex-shrink: 0; |
| white-space: nowrap; |
| } |
|
|
| .code-copy-btn:hover { |
| background: rgba(255, 255, 255, 0.15); |
| border-color: rgba(255, 255, 255, 0.2); |
| color: #ffffff; |
| transform: translateY(-1px); |
| } |
|
|
| [data-theme="light"] .code-copy-btn { |
| background: rgba(0, 0, 0, 0.05); |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| color: #475569; |
| } |
|
|
| [data-theme="light"] .code-copy-btn:hover { |
| background: rgba(0, 0, 0, 0.1); |
| color: #1e293b; |
| } |
|
|
| .code-copy-btn.copied { |
| background: rgba(16, 185, 129, 0.2); |
| border-color: rgba(16, 185, 129, 0.4); |
| color: #10b981; |
| } |
|
|
| .code-copy-btn svg { |
| width: 16px; |
| height: 16px; |
| flex-shrink: 0; |
| opacity: 0.9; |
| } |
|
|
| .code-content { |
| padding: 20px; |
| overflow-x: hidden; |
| overflow-y: hidden; |
| max-width: 100%; |
| font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace; |
| font-size: 14px; |
| line-height: 1.75; |
| color: #e2e8f0; |
| background: transparent; |
| word-wrap: break-word; |
| overflow-wrap: break-word; |
| } |
|
|
| [data-theme="light"] .code-content { |
| color: #334155; |
| } |
|
|
| .code-content code { |
| font-family: inherit; |
| background: none; |
| padding: 0; |
| color: inherit; |
| display: block; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| word-break: break-word; |
| overflow-wrap: break-word; |
| width: 100%; |
| max-width: 100%; |
| } |
|
|
| |
| .message-content code:not(.code-content code):not(pre code) { |
| background: rgba(30, 41, 59, 0.85); |
| padding: 2px 7px; |
| border-radius: 5px; |
| font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Monaco, Consolas, monospace; |
| font-size: 0.9em; |
| color: #e2e8f0; |
| border: 1px solid rgba(71, 85, 105, 0.5); |
| white-space: pre-wrap; |
| word-break: break-word; |
| display: inline; |
| line-height: 1.5; |
| } |
|
|
| [data-theme="light"] .message-content code:not(.code-content code):not(pre code) { |
| background: #f1f5f9; |
| color: #475569; |
| border-color: #e2e8f0; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .code-block { |
| margin: 16px 0; |
| border-radius: 14px; |
| } |
| |
| .code-header { |
| padding: 12px 16px; |
| } |
| |
| .code-content { |
| padding: 16px; |
| font-size: 13px; |
| line-height: 1.6; |
| } |
| |
| .code-copy-btn { |
| padding: 10px 14px; |
| font-size: 13px; |
| gap: 8px; |
| border-radius: 10px; |
| min-height: 40px; |
| } |
| |
| .code-language { |
| font-size: 13px; |
| } |
| |
| |
| .message-content code:not(.code-content code) { |
| padding: 3px 8px; |
| font-size: 14px; |
| border-radius: 8px; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .code-block { |
| border-radius: 12px; |
| } |
| |
| .code-header { |
| padding: 10px 14px; |
| } |
| |
| .code-content { |
| padding: 14px; |
| font-size: 12px; |
| } |
| |
| .code-copy-btn span { |
| display: none; |
| } |
| |
| .code-copy-btn { |
| padding: 10px; |
| min-width: 40px; |
| min-height: 40px; |
| justify-content: center; |
| } |
| |
| .code-language { |
| font-size: 12px; |
| } |
| } |
|
|
|
|
| |
| .custom-dialog-overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.8); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 10000; |
| opacity: 0; |
| visibility: hidden; |
| transition: opacity 0.2s ease, visibility 0.2s ease; |
| padding: 20px; |
| will-change: opacity; |
| } |
|
|
| .custom-dialog-overlay.show { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| .custom-dialog { |
| background: var(--bg-elevated); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 28px; |
| max-width: 400px; |
| width: 100%; |
| text-align: center; |
| transform: scale(0.95) translateY(10px); |
| opacity: 0; |
| transition: transform 0.2s ease-out, opacity 0.2s ease-out; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .custom-dialog.show { |
| transform: scale(1) translateY(0); |
| opacity: 1; |
| } |
|
|
| .custom-dialog-icon { |
| width: 56px; |
| height: 56px; |
| margin: 0 auto 20px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: var(--bg-tertiary); |
| } |
|
|
| .custom-dialog-icon svg { |
| width: 28px; |
| height: 28px; |
| } |
|
|
| .custom-dialog-icon.info { color: #3b82f6; background: rgba(59, 130, 246, 0.15); } |
| .custom-dialog-icon.success { color: #10b981; background: rgba(16, 185, 129, 0.15); } |
| .custom-dialog-icon.warning { color: #f59e0b; background: rgba(245, 158, 11, 0.15); } |
| .custom-dialog-icon.error { color: #ef4444; background: rgba(239, 68, 68, 0.15); } |
| .custom-dialog-icon.confirm { color: #8b5cf6; background: rgba(139, 92, 246, 0.15); } |
|
|
| .custom-dialog-title { |
| font-size: 20px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 12px; |
| } |
|
|
| .custom-dialog-message { |
| font-size: 14px; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| margin-bottom: 24px; |
| } |
|
|
| .custom-dialog-actions { |
| display: flex; |
| gap: 12px; |
| justify-content: center; |
| } |
|
|
| .dialog-btn { |
| padding: 12px 24px; |
| border-radius: 10px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background-color 0.15s ease, transform 0.15s ease; |
| border: none; |
| min-width: 100px; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .dialog-btn-secondary { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| } |
|
|
| .dialog-btn-secondary:hover { |
| background: var(--bg-hover); |
| transform: translateY(-1px); |
| } |
|
|
| .dialog-btn-primary { |
| background: var(--accent); |
| color: white; |
| } |
|
|
| .dialog-btn-primary:hover { |
| background: var(--accent-hover); |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(62, 180, 137, 0.3); |
| } |
|
|
| .dialog-btn-primary.warning { |
| background: #f59e0b; |
| } |
|
|
| .dialog-btn-primary.warning:hover { |
| background: #d97706; |
| box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); |
| } |
|
|
| .dialog-btn-primary.error { |
| background: #ef4444; |
| } |
|
|
| .dialog-btn-primary.error:hover { |
| background: #dc2626; |
| box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); |
| } |
|
|
| |
| .toast-container { |
| position: fixed; |
| bottom: 24px; |
| right: 24px; |
| z-index: 10001; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| pointer-events: none; |
| } |
|
|
| .toast { |
| background: var(--bg-elevated); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 14px 20px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); |
| transform: translateX(100%); |
| opacity: 0; |
| transition: transform 0.2s ease-out, opacity 0.2s ease-out; |
| pointer-events: auto; |
| max-width: 360px; |
| } |
|
|
| .toast.show { |
| transform: translateX(0); |
| opacity: 1; |
| } |
|
|
| .toast-info { border-left: 4px solid #3b82f6; } |
| .toast-success { border-left: 4px solid #10b981; } |
| .toast-warning { border-left: 4px solid #f59e0b; } |
| .toast-error { border-left: 4px solid #ef4444; } |
|
|
| .toast-message { |
| flex: 1; |
| font-size: 14px; |
| color: var(--text-primary); |
| line-height: 1.4; |
| } |
|
|
| .toast-close { |
| background: none; |
| border: none; |
| color: var(--text-tertiary); |
| font-size: 20px; |
| cursor: pointer; |
| padding: 0; |
| line-height: 1; |
| transition: color 0.2s; |
| } |
|
|
| .toast-close:hover { |
| color: var(--text-primary); |
| } |
|
|
| |
| |
|
|
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes fadeInDown { |
| from { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes zoomIn { |
| from { |
| opacity: 0; |
| transform: scale(0.8); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| @keyframes mathGlow { |
| 0%, 100% { |
| box-shadow: 0 0 0 rgba(102, 126, 234, 0); |
| } |
| 50% { |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); |
| } |
| } |
|
|
| |
| .math-block { |
| animation: fadeInUp 0.4s ease-out; |
| } |
|
|
| .math-inline { |
| animation: fadeIn 0.3s ease-out; |
| } |
|
|
| @keyframes shimmer { |
| 0% { |
| background-position: -1000px 0; |
| } |
| 100% { |
| background-position: 1000px 0; |
| } |
| } |
|
|
| |
| button:not(:disabled) { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| button:not(:disabled)::after { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 0; |
| height: 0; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.1); |
| transform: translate(-50%, -50%); |
| transition: width 0.6s, height 0.6s; |
| } |
|
|
| button:not(:disabled):active::after { |
| width: 300px; |
| height: 300px; |
| } |
|
|
| |
| .btn-new-chat:hover, |
| .chat-item:hover, |
| .suggestion-card:hover, |
| .model-option:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| } |
|
|
| .btn-send:not(:disabled):hover { |
| box-shadow: 0 0 20px rgba(62, 180, 137, 0.4); |
| } |
|
|
| |
| .loading-shimmer { |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); |
| background-size: 200% 100%; |
| animation: shimmer 1.5s infinite; |
| } |
|
|
| |
| |
| .chat-container, |
| .chat-list { |
| contain: layout style; |
| } |
|
|
| .messages { |
| contain: content; |
| } |
|
|
| |
| .message, |
| .chat-item { |
| contain: layout style paint; |
| } |
|
|
| |
| *:focus-visible { |
| outline: 2px solid var(--accent); |
| outline-offset: 2px; |
| border-radius: 4px; |
| } |
|
|
| |
| .app { |
| animation: fadeIn 0.3s ease-in-out; |
| } |
|
|
| |
| .chat-item { |
| opacity: 1; |
| } |
|
|
| .chat-item:nth-child(1) { animation-delay: 0.05s; } |
| .chat-item:nth-child(2) { animation-delay: 0.1s; } |
| .chat-item:nth-child(3) { animation-delay: 0.15s; } |
| .chat-item:nth-child(4) { animation-delay: 0.2s; } |
| .chat-item:nth-child(5) { animation-delay: 0.25s; } |
|
|
| |
| .attachment-item { |
| opacity: 1; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .toast-container { |
| bottom: calc(90px + var(--mobile-safe-bottom, 0px)); |
| right: 16px; |
| left: 16px; |
| } |
| |
| .toast { |
| max-width: 100%; |
| border-radius: 16px; |
| padding: 16px 20px; |
| } |
| |
| .toast-message { |
| font-size: 15px; |
| } |
| |
| .custom-dialog-overlay { |
| padding: 16px; |
| } |
| |
| .custom-dialog { |
| padding: 28px 24px; |
| border-radius: 24px; |
| max-width: 100%; |
| } |
| |
| .custom-dialog-icon { |
| width: 56px; |
| height: 56px; |
| margin-bottom: 20px; |
| } |
| |
| .custom-dialog-icon svg { |
| width: 28px; |
| height: 28px; |
| } |
| |
| .custom-dialog-title { |
| font-size: 20px; |
| margin-bottom: 12px; |
| } |
| |
| .custom-dialog-message { |
| font-size: 15px; |
| margin-bottom: 28px; |
| } |
| |
| .custom-dialog-actions { |
| flex-direction: column-reverse; |
| gap: 10px; |
| } |
| |
| .dialog-btn { |
| padding: 16px 24px; |
| font-size: 16px; |
| border-radius: 14px; |
| width: 100%; |
| min-height: 52px; |
| } |
| } |
|
|
|
|
| |
| .model-selector { |
| position: relative; |
| z-index: 1000; |
| } |
|
|
| .model-selector-btn { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 16px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| color: var(--text-primary); |
| font-size: 15px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| min-width: 160px; |
| } |
|
|
| .model-selector-btn:hover { |
| background: var(--bg-tertiary); |
| border-color: var(--accent); |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); |
| transform: translateY(-1px); |
| } |
|
|
| .model-selector.open .model-selector-btn { |
| background: var(--bg-tertiary); |
| border-color: var(--accent); |
| box-shadow: 0 4px 20px rgba(62, 180, 137, 0.15); |
| } |
|
|
| .model-name { |
| flex: 1; |
| max-width: 150px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| text-align: left; |
| } |
|
|
| .model-chevron { |
| transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); |
| opacity: 0.7; |
| flex-shrink: 0; |
| } |
|
|
| .model-selector.open .model-chevron { |
| transform: rotate(180deg); |
| opacity: 1; |
| } |
|
|
| |
| .model-dropdown { |
| position: absolute; |
| top: calc(100% + 10px); |
| left: 0; |
| min-width: 320px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 8px; |
| box-shadow: |
| 0 4px 6px rgba(0, 0, 0, 0.05), |
| 0 10px 20px rgba(0, 0, 0, 0.1), |
| 0 25px 50px rgba(0, 0, 0, 0.15); |
| opacity: 0; |
| visibility: hidden; |
| transform: translateY(-10px) scale(0.98); |
| transform-origin: top left; |
| transition: |
| transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), |
| opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), |
| visibility 0.2s; |
| z-index: 9999; |
| } |
|
|
| .model-selector.open .model-dropdown { |
| opacity: 1; |
| visibility: visible; |
| transform: translateY(0) scale(1); |
| } |
|
|
| .model-dropdown-header { |
| padding: 12px 16px 10px; |
| font-size: 11px; |
| font-weight: 700; |
| color: var(--text-tertiary); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| border-bottom: 1px solid var(--border); |
| margin-bottom: 8px; |
| } |
|
|
| |
| .model-option { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 14px 16px; |
| margin: 4px 0; |
| border-radius: 12px; |
| cursor: pointer; |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| background: transparent; |
| border: 1px solid transparent; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .model-option::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(135deg, var(--accent) 0%, transparent 100%); |
| opacity: 0; |
| transition: opacity 0.2s ease; |
| border-radius: 12px; |
| } |
|
|
| .model-option:hover { |
| background: var(--bg-tertiary); |
| border-color: var(--border); |
| transform: translateX(4px); |
| } |
|
|
| .model-option:hover::before { |
| opacity: 0.03; |
| } |
|
|
| .model-option.active { |
| background: var(--bg-tertiary); |
| border-color: var(--accent); |
| box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 1px rgba(62, 180, 137, 0.1); |
| } |
|
|
| .model-option.active::before { |
| opacity: 0.08; |
| } |
|
|
| .model-option-info { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .model-option-name { |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--text-primary); |
| letter-spacing: -0.01em; |
| } |
|
|
| .model-option.active .model-option-name { |
| color: var(--accent); |
| } |
|
|
| .model-option-desc { |
| font-size: 12px; |
| color: var(--text-tertiary); |
| line-height: 1.4; |
| } |
|
|
| |
| .model-check { |
| color: var(--accent); |
| opacity: 0; |
| transform: scale(0.5) rotate(-10deg); |
| transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); |
| position: relative; |
| z-index: 1; |
| flex-shrink: 0; |
| width: 20px; |
| height: 20px; |
| background: rgba(62, 180, 137, 0.1); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 4px; |
| } |
|
|
| .model-option.active .model-check { |
| opacity: 1; |
| transform: scale(1) rotate(0deg); |
| background: rgba(62, 180, 137, 0.15); |
| } |
|
|
| |
| [data-theme="light"] .model-selector-btn { |
| background: #ffffff; |
| border-color: #e2e8f0; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| } |
|
|
| [data-theme="light"] .model-selector-btn:hover { |
| background: #f8fafc; |
| border-color: #10b981; |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); |
| } |
|
|
| [data-theme="light"] .model-selector.open .model-selector-btn { |
| background: #f8fafc; |
| border-color: #10b981; |
| box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12); |
| } |
|
|
| [data-theme="light"] .model-dropdown { |
| background: #ffffff; |
| border-color: #e2e8f0; |
| box-shadow: |
| 0 4px 6px rgba(0, 0, 0, 0.04), |
| 0 10px 20px rgba(0, 0, 0, 0.06), |
| 0 25px 50px rgba(0, 0, 0, 0.1); |
| } |
|
|
| [data-theme="light"] .model-dropdown-header { |
| border-bottom-color: #e2e8f0; |
| } |
|
|
| [data-theme="light"] .model-option:hover { |
| background: #f1f5f9; |
| border-color: #e2e8f0; |
| } |
|
|
| [data-theme="light"] .model-option.active { |
| background: #ecfdf5; |
| border-color: #10b981; |
| box-shadow: 0 0 0 1px #10b981, inset 0 0 0 1px rgba(16, 185, 129, 0.1); |
| } |
|
|
| [data-theme="light"] .model-option.active .model-option-name { |
| color: #059669; |
| } |
|
|
| [data-theme="light"] .model-check { |
| color: #10b981; |
| background: rgba(16, 185, 129, 0.1); |
| } |
|
|
| [data-theme="light"] .model-option.active .model-check { |
| background: rgba(16, 185, 129, 0.15); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .model-selector-btn { |
| padding: 8px 12px; |
| font-size: 15px; |
| border-radius: 10px; |
| min-width: auto; |
| } |
| |
| .model-name { |
| max-width: 100px; |
| } |
| |
| .model-dropdown { |
| position: fixed; |
| left: 16px; |
| right: 16px; |
| top: auto; |
| bottom: calc(16px + var(--mobile-safe-bottom, 0px)); |
| min-width: auto; |
| width: auto; |
| border-radius: 20px; |
| padding: 12px; |
| max-height: 70vh; |
| overflow-y: auto; |
| } |
| |
| .model-dropdown-header { |
| padding: 12px 16px; |
| font-size: 12px; |
| } |
| |
| .model-option { |
| padding: 16px; |
| border-radius: 14px; |
| min-height: 60px; |
| } |
| |
| .model-option-name { |
| font-size: 16px; |
| } |
| |
| .model-option-desc { |
| font-size: 13px; |
| margin-top: 2px; |
| } |
| |
| .model-check { |
| width: 24px; |
| height: 24px; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .model-selector-btn { |
| padding: 6px 10px; |
| font-size: 14px; |
| } |
| |
| .model-name { |
| max-width: 80px; |
| } |
| |
| .model-dropdown { |
| left: 12px; |
| right: 12px; |
| bottom: calc(12px + var(--mobile-safe-bottom, 0px)); |
| } |
| |
| .model-option { |
| padding: 14px; |
| min-height: 56px; |
| } |
| |
| .model-option-name { |
| font-size: 15px; |
| } |
| } |
|
|
| |
| .msg-edit-btn { |
| position: absolute; |
| top: 8px; |
| right: -36px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 28px; |
| height: 28px; |
| padding: 5px; |
| box-sizing: content-box; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| color: var(--text-tertiary); |
| cursor: pointer; |
| opacity: 0; |
| transition: all 0.2s ease; |
| } |
|
|
| .msg-edit-btn svg { |
| width: 16px; |
| height: 16px; |
| flex-shrink: 0; |
| } |
|
|
| .message.user:hover .msg-edit-btn { |
| opacity: 1; |
| } |
|
|
| .msg-edit-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| border-color: var(--accent); |
| } |
|
|
| .msg-edit-btn:active { |
| transform: scale(0.95); |
| } |
|
|
| |
| .message.user .message-bubble { |
| position: relative; |
| } |
|
|
| |
| .version-nav { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| gap: 8px; |
| margin-top: 12px; |
| padding-top: 10px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .version-btn { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 32px; |
| height: 32px; |
| padding: 0; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-secondary); |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .version-btn:hover:not(:disabled) { |
| background: var(--accent); |
| border-color: var(--accent); |
| color: white; |
| transform: scale(1.05); |
| } |
|
|
| .version-btn:active:not(:disabled) { |
| transform: scale(0.95); |
| } |
|
|
| .version-btn:disabled { |
| opacity: 0.3; |
| cursor: not-allowed; |
| } |
|
|
| .version-info { |
| font-size: 13px; |
| font-weight: 500; |
| color: var(--text-secondary); |
| min-width: 50px; |
| text-align: center; |
| -webkit-user-select: none; |
| user-select: none; |
| } |
|
|
| |
| .edit-modal { |
| max-width: 600px; |
| width: 95%; |
| } |
|
|
| .edit-modal h3 { |
| margin-bottom: 16px; |
| font-size: 18px; |
| font-weight: 600; |
| } |
|
|
| .edit-modal textarea { |
| width: 100%; |
| min-height: 120px; |
| max-height: 300px; |
| padding: 12px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-primary); |
| font-size: 14px; |
| font-family: inherit; |
| line-height: 1.5; |
| resize: vertical; |
| margin-bottom: 16px; |
| } |
|
|
| .edit-modal textarea:focus { |
| outline: none; |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(62, 180, 137, 0.15); |
| } |
|
|
| .edit-modal textarea::placeholder { |
| color: var(--text-tertiary); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .msg-edit-btn { |
| opacity: 1; |
| position: relative; |
| top: auto; |
| right: auto; |
| width: auto; |
| height: 40px; |
| padding: 10px 16px; |
| margin-top: 10px; |
| border-radius: 12px; |
| font-size: 13px; |
| display: inline-flex; |
| } |
| |
| .msg-edit-btn svg { |
| width: 16px; |
| height: 16px; |
| } |
| |
| .version-nav { |
| gap: 10px; |
| margin-top: 16px; |
| padding-top: 14px; |
| justify-content: center; |
| } |
| |
| .version-btn { |
| width: 44px; |
| height: 44px; |
| border-radius: 12px; |
| } |
| |
| .version-btn svg { |
| width: 18px; |
| height: 18px; |
| } |
| |
| .version-info { |
| font-size: 15px; |
| min-width: 60px; |
| font-weight: 600; |
| } |
| |
| .edit-modal { |
| padding: 24px; |
| border-radius: 20px; |
| max-width: 100%; |
| margin: 16px; |
| } |
| |
| .edit-modal h3 { |
| font-size: 18px; |
| margin-bottom: 20px; |
| } |
| |
| .edit-modal textarea { |
| min-height: 120px; |
| font-size: 16px; |
| padding: 14px; |
| border-radius: 12px; |
| } |
| } |
|
|
| |
| .message.long-press-active { |
| transform: scale(0.97); |
| transition: transform 0.15s ease, opacity 0.15s ease; |
| } |
|
|
| .message.long-press-active .message-bubble { |
| box-shadow: 0 0 0 2px var(--accent), 0 4px 20px rgba(62, 180, 137, 0.3); |
| border-radius: 18px; |
| } |
|
|
| .message.long-press-active .message-content { |
| box-shadow: 0 0 0 2px var(--accent); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .message { |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| user-select: none; |
| } |
| |
| .message .message-content { |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| user-select: none; |
| } |
| } |
|
|
| |
|
|
|
|
| |
|
|
| |
| @media all and (display-mode: standalone) { |
| |
| html, body { |
| height: 100%; |
| overflow: hidden; |
| position: fixed; |
| width: 100%; |
| } |
| |
| .app { |
| height: 100vh; |
| height: 100dvh; |
| height: -webkit-fill-available; |
| } |
| |
| |
| .btn-download { |
| display: none !important; |
| } |
| } |
|
|
| |
| @supports (-webkit-touch-callout: none) { |
| |
| html { |
| height: -webkit-fill-available; |
| } |
| |
| body { |
| min-height: -webkit-fill-available; |
| min-height: 100dvh; |
| } |
| |
| .app { |
| min-height: -webkit-fill-available; |
| min-height: 100dvh; |
| } |
| } |
|
|
| |
|
|
| |
| html { |
| overscroll-behavior: none; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| body { |
| overscroll-behavior: none; |
| overscroll-behavior-y: none; |
| -webkit-overflow-scrolling: touch; |
| touch-action: pan-x pan-y; |
| } |
|
|
| |
| .app { |
| overscroll-behavior: contain; |
| touch-action: pan-y; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| |
| .chat-container { |
| overscroll-behavior-y: contain; |
| -webkit-overflow-scrolling: touch; |
| scroll-behavior: smooth; |
| touch-action: pan-y; |
| } |
|
|
| |
|
|
| |
| .app[data-nav-state="sidebar-open"] .sidebar-overlay { |
| display: block; |
| opacity: 1; |
| } |
|
|
| .app[data-nav-state="modal-open"] .modal, |
| .app[data-nav-state="modal-open"] .custom-dialog-overlay { |
| pointer-events: auto; |
| } |
|
|
| |
|
|
| |
| .swipe-edge-left, |
| .swipe-edge-right { |
| position: fixed; |
| top: 0; |
| bottom: 0; |
| width: 20px; |
| z-index: 9999; |
| touch-action: pan-x; |
| } |
|
|
| .swipe-edge-left { |
| left: 0; |
| } |
|
|
| .swipe-edge-right { |
| right: 0; |
| } |
|
|
| |
| .sidebar { |
| touch-action: pan-x; |
| } |
|
|
| |
|
|
| |
| .main { |
| overscroll-behavior-y: contain; |
| } |
|
|
| |
| .chat-container { |
| overscroll-behavior-y: auto; |
| } |
|
|
| |
|
|
| :root { |
| --safe-area-top: env(safe-area-inset-top, 0px); |
| --safe-area-bottom: env(safe-area-inset-bottom, 0px); |
| --safe-area-left: env(safe-area-inset-left, 0px); |
| --safe-area-right: env(safe-area-inset-right, 0px); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| |
| .header { |
| padding-top: max(12px, var(--safe-area-top)); |
| min-height: calc(var(--header-height) + var(--safe-area-top)); |
| } |
| |
| |
| .input-area { |
| padding-bottom: max(12px, calc(12px + var(--safe-area-bottom))); |
| } |
| |
| |
| .sidebar { |
| padding-top: var(--safe-area-top); |
| padding-left: var(--safe-area-left); |
| } |
| |
| .sidebar-footer { |
| padding-bottom: max(16px, calc(16px + var(--safe-area-bottom))); |
| } |
| |
| |
| .modal-content { |
| margin-top: var(--safe-area-top); |
| margin-bottom: var(--safe-area-bottom); |
| } |
| |
| |
| .context-menu { |
| padding-bottom: max(8px, calc(8px + var(--safe-area-bottom))); |
| } |
| |
| |
| .docs-modal-header { |
| padding-top: max(16px, calc(16px + var(--safe-area-top))); |
| } |
| |
| .docs-modal-content { |
| padding-bottom: max(20px, calc(20px + var(--safe-area-bottom))); |
| } |
| } |
|
|
| |
|
|
| @supports (padding-bottom: env(safe-area-inset-bottom)) { |
| .input-area { |
| padding-bottom: calc(12px + env(safe-area-inset-bottom)); |
| } |
| |
| .sidebar-footer { |
| padding-bottom: calc(16px + env(safe-area-inset-bottom)); |
| } |
| |
| .context-menu { |
| padding-bottom: calc(8px + env(safe-area-inset-bottom)); |
| } |
| |
| .model-dropdown { |
| bottom: calc(12px + env(safe-area-inset-bottom)); |
| } |
| } |
|
|
| |
|
|
| |
| @media (max-width: 768px) { |
| |
| .app { |
| padding-bottom: env(safe-area-inset-bottom, 0px); |
| } |
| } |
|
|
| |
|
|
| |
| .sidebar-swipe-indicator { |
| position: absolute; |
| right: -4px; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 4px; |
| height: 60px; |
| background: var(--accent); |
| border-radius: 2px; |
| opacity: 0; |
| transition: opacity 0.2s ease; |
| } |
|
|
| .sidebar.swiping .sidebar-swipe-indicator { |
| opacity: 0.5; |
| } |
|
|
| |
| .back-gesture-indicator { |
| position: fixed; |
| left: 0; |
| top: 50%; |
| transform: translateY(-50%) translateX(-100%); |
| width: 40px; |
| height: 40px; |
| background: var(--bg-elevated); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
| z-index: 10000; |
| opacity: 0; |
| transition: transform 0.2s ease, opacity 0.2s ease; |
| pointer-events: none; |
| } |
|
|
| .back-gesture-indicator.active { |
| transform: translateY(-50%) translateX(20px); |
| opacity: 1; |
| } |
|
|
| .back-gesture-indicator svg { |
| width: 24px; |
| height: 24px; |
| color: var(--text-primary); |
| } |
|
|
| |
|
|
| |
| .btn-new-chat:active, |
| .btn-send:active, |
| .btn-icon:active, |
| .btn-attach:active, |
| .chat-item:active, |
| .suggestion-card:active, |
| .msg-action-btn:active { |
| transform: scale(0.96); |
| transition: transform 0.1s ease; |
| } |
|
|
| |
|
|
| .mobile-action-sheet-overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.5); |
| z-index: 10001; |
| opacity: 0; |
| visibility: hidden; |
| transition: opacity 0.3s ease, visibility 0.3s ease; |
| -webkit-backdrop-filter: blur(4px); |
| backdrop-filter: blur(4px); |
| } |
|
|
| .mobile-action-sheet-overlay.show { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| .mobile-action-sheet { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: var(--bg-elevated); |
| border-radius: 20px 20px 0 0; |
| padding: 8px; |
| padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); |
| transform: translateY(100%); |
| transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); |
| max-height: 70vh; |
| overflow-y: auto; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| .mobile-action-sheet-overlay.show .mobile-action-sheet { |
| transform: translateY(0); |
| } |
|
|
| .mobile-action-sheet-handle { |
| width: 36px; |
| height: 5px; |
| background: var(--border); |
| border-radius: 3px; |
| margin: 8px auto 16px; |
| } |
|
|
| .mobile-action-sheet-title { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--text-tertiary); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| padding: 8px 16px; |
| text-align: center; |
| } |
|
|
| .mobile-action-sheet-content { |
| padding: 8px; |
| } |
|
|
| .mobile-action-sheet-item { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 16px 20px; |
| background: transparent; |
| border: none; |
| border-radius: 14px; |
| color: var(--text-primary); |
| font-size: 17px; |
| font-weight: 400; |
| cursor: pointer; |
| width: 100%; |
| text-align: left; |
| transition: background 0.15s ease; |
| font-family: inherit; |
| } |
|
|
| .mobile-action-sheet-item:active { |
| background: var(--bg-hover); |
| } |
|
|
| .mobile-action-sheet-item svg { |
| width: 24px; |
| height: 24px; |
| color: var(--accent); |
| flex-shrink: 0; |
| } |
|
|
| .mobile-action-sheet-item.destructive { |
| color: var(--error); |
| } |
|
|
| .mobile-action-sheet-item.destructive svg { |
| color: var(--error); |
| } |
|
|
| .mobile-action-sheet-divider { |
| height: 1px; |
| background: var(--border); |
| margin: 8px 16px; |
| } |
|
|
| .mobile-action-sheet-cancel { |
| display: block; |
| width: calc(100% - 16px); |
| margin: 8px; |
| padding: 16px; |
| background: var(--bg-tertiary); |
| border: none; |
| border-radius: 14px; |
| color: var(--accent); |
| font-size: 17px; |
| font-weight: 600; |
| cursor: pointer; |
| text-align: center; |
| font-family: inherit; |
| transition: background 0.15s ease; |
| } |
|
|
| .mobile-action-sheet-cancel:active { |
| background: var(--bg-hover); |
| } |
|
|
| |
| [data-theme="light"] .mobile-action-sheet { |
| background: #ffffff; |
| box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15); |
| } |
|
|
| [data-theme="light"] .mobile-action-sheet-cancel { |
| background: #f1f5f9; |
| color: #10b981; |
| } |
|
|
| [data-theme="light"] .mobile-action-sheet-cancel:active { |
| background: #e2e8f0; |
| } |
|
|
| [data-theme="light"] .mobile-action-sheet-item svg { |
| color: #10b981; |
| } |
|
|
| [data-theme="light"] .message.long-press-active .message-bubble { |
| box-shadow: 0 0 0 2px #10b981, 0 4px 20px rgba(16, 185, 129, 0.3); |
| } |
|
|
| [data-theme="light"] .message.long-press-active .message-content { |
| box-shadow: 0 0 0 2px #10b981; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .msg-actions { |
| display: none !important; |
| } |
| |
| .msg-edit-btn { |
| display: none !important; |
| } |
| } |
|
|
| |
|
|
| |
| @keyframes slideInFromRight { |
| from { |
| transform: translateX(100%); |
| opacity: 0; |
| } |
| to { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes slideOutToRight { |
| from { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| to { |
| transform: translateX(100%); |
| opacity: 0; |
| } |
| } |
|
|
| @keyframes slideInFromLeft { |
| from { |
| transform: translateX(-30%); |
| opacity: 0.5; |
| } |
| to { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes slideOutToLeft { |
| from { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| to { |
| transform: translateX(-30%); |
| opacity: 0.5; |
| } |
| } |
|
|
| |
| .nav-transition-enter { |
| animation: slideInFromRight 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; |
| } |
|
|
| .nav-transition-exit { |
| animation: slideOutToRight 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; |
| } |
|
|
| .nav-transition-enter-back { |
| animation: slideInFromLeft 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; |
| } |
|
|
| .nav-transition-exit-back { |
| animation: slideOutToLeft 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; |
| } |
|
|
| |
|
|
| .chat-container { |
| scroll-snap-type: y proximity; |
| } |
|
|
| |
|
|
| * { |
| -webkit-tap-highlight-color: transparent; |
| -webkit-touch-callout: none; |
| } |
|
|
| |
| .message-content, |
| .code-content, |
| #messageInput { |
| -webkit-touch-callout: default; |
| -webkit-user-select: text; |
| user-select: text; |
| } |
|
|
| |
|
|
| .chat-list, |
| .chat-container, |
| .docs-modal-content, |
| .mobile-action-sheet { |
| -webkit-overflow-scrolling: touch; |
| scroll-behavior: smooth; |
| } |
|
|
| |
|
|
| |
| :root { |
| --keyboard-height: 0px; |
| --viewport-height: 100vh; |
| } |
|
|
| |
| html.keyboard-open, |
| body.keyboard-open { |
| overflow: hidden !important; |
| position: fixed !important; |
| width: 100% !important; |
| height: 100% !important; |
| } |
|
|
| |
| .app.keyboard-open { |
| position: fixed !important; |
| top: 0 !important; |
| left: 0 !important; |
| right: 0 !important; |
| bottom: 0 !important; |
| height: 100% !important; |
| overflow: hidden !important; |
| } |
|
|
| .app.keyboard-open .main { |
| display: flex; |
| flex-direction: column; |
| height: 100% !important; |
| max-height: 100% !important; |
| overflow: hidden !important; |
| } |
|
|
| .app.keyboard-open .chat-container { |
| flex: 1; |
| overflow-y: auto !important; |
| overflow-x: hidden !important; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| .app.keyboard-open .input-area { |
| position: relative !important; |
| bottom: auto !important; |
| top: auto !important; |
| left: auto !important; |
| right: auto !important; |
| flex-shrink: 0 !important; |
| z-index: 100; |
| background: var(--bg-primary); |
| border-top: 1px solid var(--border); |
| box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); |
| } |
|
|
| |
| .app.keyboard-open .welcome { |
| display: none !important; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .app.keyboard-open .header { |
| flex-shrink: 0; |
| } |
| |
| .app.keyboard-open .messages { |
| padding-bottom: 20px; |
| } |
| } |
|
|
| |
| @media (pointer: coarse) { |
| .input-area .btn-attach, |
| .input-area .btn-send { |
| min-width: 44px; |
| min-height: 44px; |
| } |
| |
| #messageInput { |
| font-size: 16px !important; |
| } |
| |
| .input-container { |
| transition: border-color 0.15s ease, box-shadow 0.15s ease; |
| } |
| |
| .input-container:focus-within { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(62, 180, 137, 0.15); |
| } |
| |
| .chat-container { |
| scroll-behavior: smooth; |
| -webkit-overflow-scrolling: touch; |
| } |
| } |
|
|
| |
| @media (min-width: 481px) and (max-width: 1024px) and (pointer: coarse) { |
| .input-container { |
| min-height: 52px; |
| padding: 10px 14px; |
| } |
| |
| .btn-attach, |
| .btn-send { |
| min-width: 44px; |
| min-height: 44px; |
| } |
| } |
|
|
| |
| @supports (height: 100dvh) { |
| .app { |
| height: 100dvh; |
| } |
| |
| .sidebar { |
| height: 100dvh; |
| } |
| |
| .main { |
| height: 100dvh; |
| } |
| } |
|
|
| |
|
|
| |
| .chat-container { |
| transition: padding-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1); |
| will-change: padding-bottom; |
| } |
|
|
| |
|
|
| @media (max-width: 768px) { |
| |
| @media (orientation: landscape) { |
| .header { |
| padding-left: max(12px, var(--safe-area-left)); |
| padding-right: max(12px, var(--safe-area-right)); |
| } |
| |
| .input-area { |
| padding-left: max(16px, var(--safe-area-left)); |
| padding-right: max(16px, var(--safe-area-right)); |
| } |
| |
| .messages { |
| padding-left: max(16px, var(--safe-area-left)); |
| padding-right: max(16px, var(--safe-area-right)); |
| } |
| } |
| } |
|
|
| |
|
|
| .ripple-effect { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .ripple-effect::after { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 0; |
| height: 0; |
| background: rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| opacity: 0; |
| transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease; |
| } |
|
|
| .ripple-effect:active::after { |
| width: 200%; |
| height: 200%; |
| opacity: 0; |
| } |
|
|
| [data-theme="light"] .ripple-effect::after { |
| background: rgba(0, 0, 0, 0.1); |
| } |
|
|
| |
|
|
| @media (max-width: 768px) { |
| .messages { |
| scroll-padding-top: 20px; |
| scroll-padding-bottom: 20px; |
| } |
| } |
|
|
| |
|
|
| .pwa-install-prompt { |
| position: fixed; |
| bottom: calc(20px + env(safe-area-inset-bottom, 0px)); |
| left: 16px; |
| right: 16px; |
| background: var(--bg-elevated); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 16px; |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); |
| z-index: 9999; |
| transform: translateY(150%); |
| transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); |
| } |
|
|
| .pwa-install-prompt.show { |
| transform: translateY(0); |
| } |
|
|
| .pwa-install-prompt-icon { |
| width: 48px; |
| height: 48px; |
| border-radius: 12px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| } |
|
|
| .pwa-install-prompt-icon svg { |
| width: 28px; |
| height: 28px; |
| color: white; |
| } |
|
|
| .pwa-install-prompt-content { |
| flex: 1; |
| } |
|
|
| .pwa-install-prompt-title { |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .pwa-install-prompt-desc { |
| font-size: 14px; |
| color: var(--text-secondary); |
| } |
|
|
| .pwa-install-prompt-actions { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .pwa-install-btn { |
| padding: 10px 20px; |
| border-radius: 10px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| border: none; |
| transition: all 0.2s ease; |
| } |
|
|
| .pwa-install-btn.primary { |
| background: var(--accent); |
| color: white; |
| } |
|
|
| .pwa-install-btn.primary:active { |
| transform: scale(0.96); |
| } |
|
|
| .pwa-install-btn.secondary { |
| background: transparent; |
| color: var(--text-secondary); |
| } |
|
|
| |
|
|
| .orientation-lock-overlay { |
| position: fixed; |
| inset: 0; |
| background: var(--bg-primary); |
| z-index: 99999; |
| display: none; |
| align-items: center; |
| justify-content: center; |
| flex-direction: column; |
| gap: 20px; |
| padding: 40px; |
| text-align: center; |
| } |
|
|
| .orientation-lock-overlay svg { |
| width: 64px; |
| height: 64px; |
| color: var(--accent); |
| animation: rotatePhone 2s ease-in-out infinite; |
| } |
|
|
| @keyframes rotatePhone { |
| 0%, 100% { transform: rotate(0deg); } |
| 50% { transform: rotate(90deg); } |
| } |
|
|
| .orientation-lock-overlay p { |
| font-size: 18px; |
| color: var(--text-secondary); |
| } |
|
|
| |
| @media (max-height: 400px) and (orientation: landscape) { |
| |
| } |
|
|
| |
|
|
| |
| @media (max-width: 768px) { |
| .header::before { |
| content: ''; |
| position: absolute; |
| top: calc(-1 * var(--safe-area-top)); |
| left: 0; |
| right: 0; |
| height: var(--safe-area-top); |
| background: var(--bg-primary); |
| z-index: -1; |
| } |
| } |
|
|
| |
|
|
| .header, |
| .sidebar, |
| .input-area, |
| .btn-new-chat, |
| .btn-send, |
| .btn-icon, |
| .btn-attach, |
| .chat-item, |
| .suggestion-card, |
| .model-selector, |
| .context-menu, |
| .modal, |
| .mobile-action-sheet { |
| -webkit-user-select: none; |
| user-select: none; |
| } |
|
|
| |
|
|
| :focus-visible { |
| outline: 2px solid var(--accent); |
| outline-offset: 2px; |
| } |
|
|
| button:focus:not(:focus-visible), |
| input:focus:not(:focus-visible), |
| textarea:focus:not(:focus-visible) { |
| outline: none; |
| } |
|
|
| |
|
|
| .visually-hidden { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border: 0; |
| } |
|
|
| |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| |
| .chat-container { |
| scroll-behavior: auto; |
| } |
| } |
|
|
| |
|
|
| |
| .code-block.streaming-code { |
| position: relative; |
| } |
|
|
| .code-block.streaming-code .streaming-indicator { |
| color: var(--accent); |
| animation: modern-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| margin-left: auto; |
| font-size: 10px; |
| will-change: opacity, transform; |
| } |
|
|
| |
| @keyframes modern-pulse { |
| 0%, 100% { |
| opacity: 1; |
| transform: scale(1); |
| } |
| 50% { |
| opacity: 0.4; |
| transform: scale(0.95); |
| } |
| } |
|
|
| @keyframes pulse-indicator { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.3; } |
| } |
|
|
| |
| .code-cursor { |
| color: var(--accent); |
| animation: modern-cursor-blink 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| font-weight: bold; |
| will-change: opacity; |
| } |
|
|
| @keyframes blink-cursor { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
|
|
| |
| .streaming-inline { |
| background: var(--bg-tertiary); |
| border-right: 2px solid var(--accent); |
| animation: modern-cursor-blink 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| will-change: opacity; |
| } |
|
|
| |
| .streaming-bold { |
| border-right: 2px solid var(--text-primary); |
| animation: modern-cursor-blink 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| will-change: opacity; |
| } |
|
|
| |
| .streaming-math { |
| position: relative; |
| } |
|
|
| .streaming-math::after { |
| content: ''; |
| position: absolute; |
| right: 8px; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 8px; |
| height: 8px; |
| background: var(--accent); |
| border-radius: 50%; |
| animation: modern-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| will-change: opacity, transform; |
| } |
|
|
| .math-block.streaming-math { |
| border-right: 3px solid var(--accent); |
| animation: modern-math-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| will-change: box-shadow; |
| } |
|
|
| .math-cursor { |
| color: var(--accent); |
| animation: modern-cursor-blink 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| font-weight: bold; |
| margin-left: 4px; |
| will-change: opacity; |
| } |
|
|
| |
| @keyframes modern-math-glow { |
| 0%, 100% { |
| box-shadow: 0 0 0 rgba(102, 126, 234, 0); |
| } |
| 50% { |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.25); |
| } |
| } |
|
|
| @keyframes math-streaming-glow { |
| 0%, 100% { |
| box-shadow: 0 0 0 rgba(102, 126, 234, 0); |
| } |
| 50% { |
| box-shadow: 0 0 15px rgba(102, 126, 234, 0.3); |
| } |
| } |
|
|
| |
| .streaming-content h1, |
| .streaming-content h2, |
| .streaming-content h3, |
| .streaming-content h4, |
| .streaming-content h5, |
| .streaming-content h6 { |
| margin: 16px 0 8px 0; |
| } |
|
|
| .streaming-content h1:first-child, |
| .streaming-content h2:first-child, |
| .streaming-content h3:first-child { |
| margin-top: 0; |
| } |
|
|
| .streaming-content ul { |
| margin: 12px 0; |
| padding-left: 24px; |
| list-style: none; |
| } |
|
|
| .streaming-content ul > li { |
| position: relative; |
| padding-left: 4px; |
| } |
|
|
| .streaming-content ul > li::before { |
| content: ''; |
| position: absolute; |
| left: -16px; |
| top: 9px; |
| width: 5px; |
| height: 5px; |
| background: var(--accent); |
| border-radius: 50%; |
| } |
|
|
| .streaming-content ol { |
| margin: 12px 0; |
| padding-left: 24px; |
| list-style: decimal; |
| } |
|
|
| .streaming-content ol > li { |
| margin: 10px 0; |
| padding-left: 8px; |
| } |
|
|
| .streaming-content ol > li::marker { |
| color: var(--accent); |
| font-weight: 600; |
| } |
|
|
| .streaming-content li { |
| margin: 6px 0; |
| line-height: 1.6; |
| } |
|
|
| .streaming-content blockquote { |
| margin: 12px 0; |
| padding: 10px 16px; |
| border-left: 3px solid var(--accent); |
| background: rgba(102, 126, 234, 0.05); |
| border-radius: 0 8px 8px 0; |
| } |
|
|
| .streaming-content p { |
| margin: 0 0 12px 0; |
| line-height: 1.7; |
| } |
|
|
| .streaming-content p:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .streaming-content .math-block { |
| margin: 16px 0; |
| } |
|
|
| .streaming-content .math-inline { |
| display: inline; |
| } |
|
|
| .streaming-content hr { |
| border: none; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, var(--accent), transparent); |
| margin: 20px 0; |
| opacity: 0.5; |
| } |
|
|
| .streaming-content strong { |
| font-weight: 600; |
| color: var(--text-primary); |
| font-size: inherit; |
| display: inline; |
| } |
|
|
| .streaming-content em { |
| font-style: italic; |
| color: var(--text-secondary); |
| } |
|
|
| .streaming-content a { |
| color: var(--accent); |
| text-decoration: none; |
| border-bottom: 1px solid transparent; |
| transition: border-color 0.2s ease; |
| } |
|
|
| .streaming-content a:hover { |
| border-bottom-color: var(--accent); |
| } |
|
|
| |
| .streaming-content { |
| min-height: 20px; |
| contain: content; |
| will-change: contents; |
| } |
|
|
| |
|
|
| [data-theme="light"] .code-cursor { |
| color: var(--accent); |
| } |
|
|
| [data-theme="light"] .streaming-indicator { |
| color: var(--accent); |
| } |
|
|
| |
| .table-wrapper { |
| overflow-x: auto; |
| margin: 20px 0; |
| border-radius: 14px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| box-shadow: |
| 0 4px 12px rgba(0, 0, 0, 0.15), |
| 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .markdown-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 14px; |
| min-width: 300px; |
| } |
|
|
| .markdown-table th, |
| .markdown-table td { |
| padding: 16px 20px; |
| border-bottom: 1px solid var(--border); |
| text-align: left; |
| } |
|
|
| .markdown-table th { |
| background: linear-gradient(135deg, var(--accent) 0%, #764ba2 100%); |
| font-weight: 600; |
| color: #fff; |
| text-transform: uppercase; |
| font-size: 11px; |
| letter-spacing: 1px; |
| position: sticky; |
| top: 0; |
| z-index: 1; |
| } |
|
|
| .markdown-table th:first-child { |
| border-top-left-radius: 13px; |
| } |
|
|
| .markdown-table th:last-child { |
| border-top-right-radius: 13px; |
| } |
|
|
| .markdown-table td { |
| color: var(--text-primary); |
| background: var(--bg-secondary); |
| transition: background 0.15s ease; |
| } |
|
|
| .markdown-table tbody tr:nth-child(even) td { |
| background: var(--bg-tertiary); |
| } |
|
|
| .markdown-table tbody tr:hover td { |
| background: rgba(102, 126, 234, 0.1); |
| } |
|
|
| .markdown-table tbody tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| .markdown-table tbody tr:last-child td:first-child { |
| border-bottom-left-radius: 13px; |
| } |
|
|
| .markdown-table tbody tr:last-child td:last-child { |
| border-bottom-right-radius: 13px; |
| } |
|
|
| |
| .markdown-table td code { |
| background: rgba(102, 126, 234, 0.15); |
| padding: 2px 6px; |
| border-radius: 4px; |
| font-size: 12px; |
| } |
|
|
| .markdown-table td strong { |
| color: var(--accent); |
| } |
|
|
| [data-theme="light"] .table-wrapper { |
| background: #fff; |
| border-color: #e2e8f0; |
| box-shadow: |
| 0 4px 12px rgba(0, 0, 0, 0.08), |
| 0 2px 4px rgba(0, 0, 0, 0.04); |
| } |
|
|
| [data-theme="light"] .markdown-table th { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
|
|
| [data-theme="light"] .markdown-table td { |
| background: #fff; |
| } |
|
|
| [data-theme="light"] .markdown-table tbody tr:nth-child(even) td { |
| background: #f8fafc; |
| } |
|
|
| [data-theme="light"] .markdown-table tbody tr:hover td { |
| background: rgba(102, 126, 234, 0.08); |
| } |
|
|
| |
| .streaming-table { |
| position: relative; |
| } |
|
|
| .streaming-table.incomplete { |
| opacity: 0.9; |
| } |
|
|
| .streaming-table .streaming-cell { |
| text-align: center !important; |
| color: var(--text-secondary); |
| font-style: italic; |
| padding: 20px !important; |
| background: var(--bg-secondary); |
| } |
|
|
| .streaming-table .streaming-indicator { |
| color: var(--accent); |
| animation: pulse-indicator 1s ease-in-out infinite; |
| margin-right: 8px; |
| } |
|
|
| |
| .streaming-chart { |
| position: relative; |
| } |
|
|
| .streaming-chart .chart-loading { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 40px 20px; |
| color: var(--text-secondary); |
| } |
|
|
| .streaming-chart .chart-loading-icon { |
| margin-bottom: 16px; |
| animation: spin-chart 2s linear infinite; |
| } |
|
|
| .streaming-chart .chart-loading-icon svg { |
| stroke: var(--accent); |
| } |
|
|
| .streaming-chart .chart-loading-text { |
| font-size: 14px; |
| margin-bottom: 8px; |
| } |
|
|
| .streaming-chart .streaming-indicator { |
| color: var(--accent); |
| animation: pulse-indicator 1s ease-in-out infinite; |
| font-size: 12px; |
| } |
|
|
| @keyframes spin-chart { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| .chart-container { |
| margin: 20px 0; |
| padding: 20px; |
| background: var(--bg-tertiary); |
| border-radius: 12px; |
| border: 1px solid var(--border); |
| } |
|
|
| .chart-title { |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 16px; |
| text-align: center; |
| } |
|
|
| .chart-canvas { |
| display: block; |
| width: 100%; |
| } |
|
|
| .chart-legend { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 16px; |
| margin-top: 16px; |
| padding-top: 12px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .chart-legend-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 13px; |
| color: var(--text-secondary); |
| } |
|
|
| .chart-legend-color { |
| width: 12px; |
| height: 12px; |
| border-radius: 3px; |
| } |
|
|
| [data-theme="light"] .chart-container { |
| background: #fff; |
| border-color: #e2e8f0; |
| } |
|
|
| @media (max-width: 768px) { |
| .table-wrapper { margin: 12px 0; border-radius: 10px; } |
| .markdown-table { font-size: 13px; min-width: 300px; } |
| .markdown-table th, .markdown-table td { padding: 10px 12px; } |
| .chart-container { margin: 16px 0; padding: 16px; } |
| .chart-title { font-size: 14px; } |
| .chart-legend { gap: 12px; } |
| .chart-legend-item { font-size: 12px; } |
| } |
|
|
|
|
| |
| |
| .code-block, |
| .code-content, |
| .code-content code, |
| .message-content pre, |
| .message-content pre code, |
| .streaming-content .code-content, |
| .streaming-content .code-content code { |
| white-space: pre-wrap !important; |
| word-wrap: break-word !important; |
| word-break: break-word !important; |
| overflow-wrap: break-word !important; |
| overflow-x: hidden !important; |
| max-width: 100% !important; |
| } |
|
|
| .code-block { |
| width: 100% !important; |
| box-sizing: border-box !important; |
| } |
|
|
| .code-content { |
| width: 100% !important; |
| box-sizing: border-box !important; |
| } |
|
|
| .code-content code { |
| width: 100% !important; |
| display: block !important; |
| } |
|
|
|
|
| |
|
|
| |
| .streaming-content .math-block { |
| display: block; |
| margin: 16px 0; |
| padding: 16px 20px; |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%); |
| border-radius: 10px; |
| border-left: 3px solid var(--accent); |
| overflow-x: auto; |
| text-align: center; |
| } |
|
|
| .streaming-content .math-block .katex-display { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .streaming-content .math-block .katex { |
| font-size: 1.2em; |
| color: var(--text-primary); |
| } |
|
|
| .streaming-content .math-inline { |
| display: inline; |
| padding: 2px 5px; |
| background: rgba(102, 126, 234, 0.1); |
| border-radius: 4px; |
| vertical-align: middle; |
| } |
|
|
| .streaming-content .math-inline .katex { |
| font-size: 1em; |
| } |
|
|
| |
| .streaming-content .math-block.streaming-math { |
| border-right: 3px solid var(--accent); |
| animation: math-pulse 1.5s ease-in-out infinite; |
| } |
|
|
| .streaming-content .math-cursor { |
| color: var(--accent); |
| font-weight: bold; |
| animation: blink 1s step-end infinite; |
| } |
|
|
| @keyframes math-pulse { |
| 0%, 100% { |
| border-right-color: var(--accent); |
| box-shadow: 0 0 0 rgba(102, 126, 234, 0); |
| } |
| 50% { |
| border-right-color: #764ba2; |
| box-shadow: 0 0 10px rgba(102, 126, 234, 0.3); |
| } |
| } |
|
|
| |
| .streaming-content .math-fallback { |
| font-family: 'Times New Roman', 'Cambria Math', Georgia, serif; |
| font-style: italic; |
| letter-spacing: 0.5px; |
| } |
|
|
| .streaming-content .math-block.math-fallback { |
| font-size: 1.1em; |
| line-height: 1.7; |
| } |
|
|
| |
| [data-theme="light"] .streaming-content .math-block { |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%); |
| } |
|
|
| [data-theme="light"] .streaming-content .math-inline { |
| background: rgba(102, 126, 234, 0.15); |
| } |
|
|
| |
|
|
| |
| .streaming-content .code-block { |
| margin: 16px 0; |
| border-radius: 10px; |
| background: #1e293b; |
| overflow: hidden; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .streaming-content .code-block .code-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 10px 16px; |
| background: #0f172a; |
| border-bottom: 1px solid #334155; |
| } |
|
|
| .streaming-content .code-block .code-language { |
| font-size: 12px; |
| font-weight: 500; |
| color: #94a3b8; |
| text-transform: lowercase; |
| } |
|
|
| .streaming-content .code-block .code-copy-btn { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| background: rgba(255, 255, 255, 0.1); |
| border: none; |
| border-radius: 6px; |
| color: #94a3b8; |
| font-size: 12px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .streaming-content .code-block .code-copy-btn:hover { |
| background: rgba(255, 255, 255, 0.15); |
| color: #fff; |
| } |
|
|
| .streaming-content .code-block .code-content { |
| padding: 16px; |
| overflow-x: auto; |
| } |
|
|
| .streaming-content .code-block .code-content code { |
| font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace; |
| font-size: 13px; |
| line-height: 1.6; |
| color: #e2e8f0; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| |
| .streaming-content .code-block.streaming-code { |
| position: relative; |
| } |
|
|
| .streaming-content .code-block.streaming-code::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: linear-gradient(90deg, var(--accent), #764ba2, var(--accent)); |
| background-size: 200% 100%; |
| animation: modern-streaming-gradient 2.5s linear infinite; |
| will-change: background-position; |
| } |
|
|
| |
| @keyframes modern-streaming-gradient { |
| 0% { background-position: 0% 50%; } |
| 100% { background-position: 200% 50%; } |
| } |
|
|
| @keyframes streaming-gradient { |
| 0% { background-position: 0% 50%; } |
| 100% { background-position: 200% 50%; } |
| } |
|
|
| .streaming-content .code-block .streaming-indicator { |
| color: var(--accent); |
| animation: modern-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| font-size: 10px; |
| will-change: opacity, transform; |
| } |
|
|
| .streaming-content .code-cursor { |
| color: var(--accent); |
| animation: modern-cursor-blink 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| font-weight: bold; |
| will-change: opacity; |
| } |
|
|
| |
| [data-theme="light"] .streaming-content .code-block { |
| background: #f8fafc; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| } |
|
|
| [data-theme="light"] .streaming-content .code-block .code-header { |
| background: #e2e8f0; |
| border-bottom-color: #cbd5e1; |
| } |
|
|
| [data-theme="light"] .streaming-content .code-block .code-language { |
| color: #64748b; |
| } |
|
|
| [data-theme="light"] .streaming-content .code-block .code-content code { |
| color: #1e293b; |
| } |
|
|
| |
|
|
| .streaming-content .table-wrapper { |
| margin: 16px 0; |
| overflow-x: auto; |
| border-radius: 10px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| } |
|
|
| .streaming-content .markdown-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 14px; |
| } |
|
|
| .streaming-content .markdown-table th, |
| .streaming-content .markdown-table td { |
| padding: 12px 16px; |
| border-bottom: 1px solid var(--border); |
| text-align: left; |
| } |
|
|
| .streaming-content .markdown-table th { |
| background: linear-gradient(135deg, var(--accent) 0%, #764ba2 100%); |
| font-weight: 600; |
| color: #fff; |
| font-size: 12px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .streaming-content .markdown-table td { |
| background: var(--bg-secondary); |
| } |
|
|
| .streaming-content .markdown-table tbody tr:nth-child(even) td { |
| background: var(--bg-tertiary); |
| } |
|
|
| |
|
|
| .streaming-content blockquote { |
| margin: 12px 0; |
| padding: 12px 16px; |
| background: rgba(102, 126, 234, 0.08); |
| border-left: 4px solid var(--accent); |
| border-radius: 0 8px 8px 0; |
| color: var(--text-secondary); |
| font-style: italic; |
| } |
|
|
| [data-theme="light"] .streaming-content blockquote { |
| background: rgba(102, 126, 234, 0.1); |
| } |
|
|
| |
|
|
| .streaming-content hr { |
| border: none; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, var(--accent), transparent); |
| margin: 20px 0; |
| border-radius: 1px; |
| } |
|
|
| |
|
|
| .streaming-content code:not(.code-content code) { |
| background: rgba(102, 126, 234, 0.15); |
| padding: 2px 6px; |
| border-radius: 4px; |
| font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; |
| font-size: 0.9em; |
| color: var(--accent); |
| } |
|
|
| .streaming-content code.streaming-inline { |
| border-right: 2px solid var(--accent); |
| animation: modern-border-blink 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| will-change: border-color; |
| } |
|
|
| |
| @keyframes modern-border-blink { |
| 0%, 100% { border-right-color: var(--accent); } |
| 50% { border-right-color: transparent; } |
| } |
|
|
| @keyframes blink-border { |
| 0%, 100% { border-right-color: var(--accent); } |
| 50% { border-right-color: transparent; } |
| } |
|
|
| |
|
|
| .streaming-content strong.streaming-bold { |
| border-right: 2px solid var(--text-primary); |
| animation: blink-border 1s step-end infinite; |
| } |
|
|
| |
|
|
| .streaming-content u { |
| text-decoration: underline; |
| text-decoration-color: var(--accent); |
| text-underline-offset: 2px; |
| } |
|
|
| |
|
|
| .image-lightbox { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 10000; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| visibility: hidden; |
| transition: opacity 0.2s ease, visibility 0.2s ease; |
| } |
|
|
| .image-lightbox.active { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| .lightbox-backdrop { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.85); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| } |
|
|
| .lightbox-content { |
| position: relative; |
| max-width: 90vw; |
| max-height: 90vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .lightbox-image { |
| max-width: 100%; |
| max-height: 90vh; |
| object-fit: contain; |
| border-radius: 8px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); |
| transform: scale(0.9); |
| transition: transform 0.2s ease; |
| } |
|
|
| .image-lightbox.active .lightbox-image { |
| transform: scale(1); |
| } |
|
|
| .lightbox-close { |
| position: absolute; |
| top: -40px; |
| right: -40px; |
| width: 36px; |
| height: 36px; |
| border: none; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| color: white; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .lightbox-close:hover { |
| background: rgba(255, 255, 255, 0.2); |
| transform: scale(1.1); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .lightbox-close { |
| top: 16px; |
| right: 16px; |
| background: rgba(0, 0, 0, 0.5); |
| } |
| |
| .lightbox-content { |
| max-width: 95vw; |
| } |
| } |
|
|
| |
|
|
| |
| .deep-research-indicator { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 3px 10px; |
| background: linear-gradient(135deg, #059669 0%, #10b981 100%); |
| color: white; |
| border-radius: 12px; |
| font-size: 10px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.3px; |
| margin-left: 8px; |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); |
| animation: deepResearchPulse 2s ease-in-out infinite; |
| } |
|
|
| .deep-research-indicator svg { |
| width: 12px; |
| height: 12px; |
| } |
|
|
| @keyframes deepResearchPulse { |
| 0%, 100% { |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); |
| } |
| 50% { |
| box-shadow: 0 2px 16px rgba(16, 185, 129, 0.5); |
| } |
| } |
|
|
| |
| .deep-research-status { |
| color: #10b981 !important; |
| font-weight: 500; |
| } |
|
|
| |
| .toast.deep-research-toast { |
| background: linear-gradient(135deg, #059669 0%, #10b981 100%); |
| color: white; |
| } |
|
|
| .toast.deep-research-toast .toast-icon { |
| background: rgba(255, 255, 255, 0.2); |
| } |
|
|
| |
| @keyframes deepResearchStatusPulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.7; |
| } |
| } |
|
|
| |
| .typing-indicator.deep-research-active { |
| background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| } |
|
|
| .typing-indicator.deep-research-active .typing-text { |
| color: #10b981; |
| font-weight: 500; |
| } |
|
|
| .typing-indicator.deep-research-active .typing-dots .typing-dot { |
| background: #10b981; |
| box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); |
| } |
|
|
| |
| |
| .vision-status { |
| color: #8b5cf6 !important; |
| font-weight: 500; |
| animation: visionStatusPulse 2s ease-in-out infinite; |
| } |
|
|
| |
| @keyframes visionStatusPulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.7; |
| } |
| } |
|
|
| |
| .typing-indicator.vision-active { |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.15) 100%); |
| border: 1px solid rgba(139, 92, 246, 0.3); |
| border-radius: 12px; |
| padding: 12px 16px; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .typing-indicator.vision-active::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| height: 100%; |
| width: var(--vision-progress, 0%); |
| background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.2) 100%); |
| transition: width 0.3s ease; |
| z-index: 0; |
| } |
|
|
| .typing-indicator.vision-active .typing-text { |
| color: #8b5cf6; |
| font-weight: 500; |
| position: relative; |
| z-index: 1; |
| opacity: 1; |
| max-width: 300px; |
| } |
|
|
| .typing-indicator.vision-active .typing-dots { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .typing-indicator.vision-active .typing-dots .typing-dot { |
| background: #8b5cf6; |
| box-shadow: 0 0 8px rgba(139, 92, 246, 0.5); |
| position: relative; |
| z-index: 1; |
| } |
|
|
| |
| @keyframes visionEyePulse { |
| 0%, 100% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.1); |
| } |
| } |
|
|
| .typing-indicator.vision-active .typing-dots { |
| animation: visionEyePulse 1.5s ease-in-out infinite; |
| } |
|
|
| |
| [data-theme="light"] .vision-status { |
| color: #7c3aed !important; |
| } |
|
|
| [data-theme="light"] .typing-indicator.vision-active { |
| background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(139, 92, 246, 0.12) 100%); |
| border-color: rgba(124, 58, 237, 0.25); |
| } |
|
|
| [data-theme="light"] .typing-indicator.vision-active::before { |
| background: linear-gradient(90deg, rgba(124, 58, 237, 0.1) 0%, rgba(139, 92, 246, 0.15) 100%); |
| } |
|
|
| [data-theme="light"] .typing-indicator.vision-active .typing-text { |
| color: #7c3aed; |
| } |
|
|
| [data-theme="light"] .typing-indicator.vision-active .typing-dots .typing-dot { |
| background: #7c3aed; |
| box-shadow: 0 0 8px rgba(124, 58, 237, 0.4); |
| } |
|
|
| |
| |
| @media (max-width: 1024px) { |
| .typing-indicator.vision-active { |
| padding: 10px 14px; |
| border-radius: 10px; |
| } |
| |
| .typing-indicator.vision-active .typing-text { |
| max-width: 250px; |
| font-size: 12px; |
| } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .typing-indicator.vision-active { |
| padding: 8px 12px; |
| border-radius: 8px; |
| gap: 8px; |
| } |
| |
| .typing-indicator.vision-active .typing-text { |
| max-width: 180px; |
| font-size: 11px; |
| } |
| |
| .typing-indicator.vision-active .typing-dots .typing-dot { |
| width: 6px; |
| height: 6px; |
| } |
| |
| .vision-status { |
| font-size: 11px; |
| } |
| } |
|
|
| |
| @media (max-width: 480px) { |
| .typing-indicator.vision-active { |
| padding: 6px 10px; |
| border-radius: 6px; |
| gap: 6px; |
| } |
| |
| .typing-indicator.vision-active .typing-text { |
| max-width: 130px; |
| font-size: 10px; |
| } |
| |
| .typing-indicator.vision-active .typing-dots .typing-dot { |
| width: 5px; |
| height: 5px; |
| } |
| |
| .vision-status { |
| font-size: 10px; |
| } |
| } |
|
|
| |
| .attach-menu { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 9999; |
| opacity: 0; |
| visibility: hidden; |
| transition: opacity 0.2s ease, visibility 0.2s; |
| } |
|
|
| .attach-menu.show { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| .attach-menu-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.5); |
| backdrop-filter: blur(4px); |
| -webkit-backdrop-filter: blur(4px); |
| } |
|
|
| .attach-menu-sheet { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: var(--bg-elevated); |
| border-radius: 20px 20px 0 0; |
| padding: 12px 16px calc(env(safe-area-inset-bottom, 16px) + 16px); |
| transform: translateY(100%); |
| transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); |
| max-height: 70vh; |
| overflow-y: auto; |
| } |
|
|
| .attach-menu.show .attach-menu-sheet { |
| transform: translateY(0); |
| } |
|
|
| .attach-menu-handle { |
| width: 36px; |
| height: 4px; |
| background: var(--text-muted); |
| opacity: 0.3; |
| border-radius: 2px; |
| margin: 0 auto 16px; |
| } |
|
|
| |
| .attach-menu-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 12px; |
| margin-bottom: 16px; |
| } |
|
|
| .attach-grid-btn { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 8px; |
| padding: 16px 12px; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| color: var(--text-primary); |
| } |
|
|
| .attach-grid-btn:hover { |
| background: var(--bg-hover); |
| border-color: var(--accent); |
| } |
|
|
| .attach-grid-btn:active { |
| transform: scale(0.96); |
| background: var(--bg-secondary); |
| } |
|
|
| .attach-grid-icon { |
| width: 28px; |
| height: 28px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--text-secondary); |
| } |
|
|
| .attach-grid-icon svg { |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .attach-grid-label { |
| font-size: 13px; |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
|
|
| |
| .attach-menu-divider { |
| height: 1px; |
| background: var(--border); |
| margin: 8px 0; |
| } |
|
|
| |
| .attach-menu-list { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .attach-menu-item { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| padding: 14px 12px; |
| border-radius: 12px; |
| cursor: pointer; |
| transition: background 0.1s ease; |
| color: var(--text-primary); |
| } |
|
|
| .attach-menu-item:hover { |
| background: var(--bg-hover); |
| } |
|
|
| .attach-menu-item:active { |
| background: var(--bg-tertiary); |
| } |
|
|
| .attach-item-icon { |
| width: 24px; |
| height: 24px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--text-secondary); |
| flex-shrink: 0; |
| } |
|
|
| .attach-item-icon svg { |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .attach-item-content { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .attach-item-title { |
| font-size: 15px; |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
|
|
| .attach-item-desc { |
| font-size: 13px; |
| color: var(--text-muted); |
| } |
|
|
| .attach-menu-check { |
| width: 22px; |
| height: 22px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| color: var(--accent); |
| transition: opacity 0.15s ease; |
| flex-shrink: 0; |
| } |
|
|
| .attach-menu-check svg { |
| width: 18px; |
| height: 18px; |
| } |
|
|
| .attach-menu-item.active .attach-menu-check { |
| opacity: 1; |
| } |
|
|
| .attach-menu-item.active .attach-item-icon { |
| color: var(--accent); |
| } |
|
|
| .attach-menu-item.active .attach-item-title { |
| color: var(--accent); |
| } |
|
|
| |
| .btn-attach.active { |
| background: var(--bg-hover); |
| color: var(--accent); |
| } |
|
|
| |
| .deep-research-active-indicator { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 10px; |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| border-radius: 16px; |
| font-size: 12px; |
| font-weight: 500; |
| color: #10b981; |
| margin-right: 8px; |
| } |
|
|
| .deep-research-active-indicator svg { |
| width: 14px; |
| height: 14px; |
| } |
|
|
| |
| [data-theme="light"] .attach-menu-overlay { |
| background: rgba(0, 0, 0, 0.4); |
| } |
|
|
| [data-theme="light"] .attach-menu-sheet { |
| background: #ffffff; |
| box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15); |
| } |
|
|
| [data-theme="light"] .attach-grid-btn { |
| background: #f8fafc; |
| border-color: #e2e8f0; |
| } |
|
|
| [data-theme="light"] .attach-grid-btn:hover { |
| background: #f1f5f9; |
| border-color: #6366f1; |
| } |
|
|
| [data-theme="light"] .attach-grid-icon { |
| color: #64748b; |
| } |
|
|
| [data-theme="light"] .attach-menu-item:hover { |
| background: #f1f5f9; |
| } |
|
|
| [data-theme="light"] .attach-menu-item:active { |
| background: #e2e8f0; |
| } |
|
|
| [data-theme="light"] .attach-item-icon { |
| color: #64748b; |
| } |
|
|
| [data-theme="light"] .attach-menu-item.active .attach-item-icon, |
| [data-theme="light"] .attach-menu-item.active .attach-item-title { |
| color: #059669; |
| } |
|
|
| [data-theme="light"] .attach-menu-check { |
| color: #059669; |
| } |
|
|
| [data-theme="light"] .deep-research-active-indicator { |
| background: rgba(5, 150, 105, 0.1); |
| border-color: rgba(5, 150, 105, 0.3); |
| color: #059669; |
| } |
|
|
| |
| @media (min-width: 769px) { |
| .attach-menu { |
| position: fixed; |
| } |
| |
| .attach-menu-overlay { |
| background: transparent; |
| backdrop-filter: none; |
| } |
| |
| .attach-menu-sheet { |
| position: absolute; |
| bottom: auto; |
| left: auto; |
| right: auto; |
| top: auto; |
| width: 320px; |
| border-radius: 16px; |
| padding: 12px; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); |
| border: 1px solid var(--border); |
| transform: translateY(8px); |
| opacity: 0; |
| transition: transform 0.15s ease, opacity 0.15s ease; |
| } |
| |
| .attach-menu.show .attach-menu-sheet { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| |
| .attach-menu-handle { |
| display: none; |
| } |
| |
| .attach-menu-grid { |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
| |
| .attach-grid-btn { |
| padding: 14px 10px; |
| border-radius: 12px; |
| } |
| |
| .attach-grid-icon { |
| width: 24px; |
| height: 24px; |
| } |
| |
| .attach-grid-label { |
| font-size: 12px; |
| } |
| |
| .attach-menu-item { |
| padding: 12px 10px; |
| border-radius: 10px; |
| } |
| |
| .attach-item-title { |
| font-size: 14px; |
| } |
| |
| .attach-item-desc { |
| font-size: 12px; |
| } |
| } |
|
|
| |
| @media (display-mode: standalone) { |
| .attach-menu-sheet { |
| padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 20px); |
| } |
| } |
|
|
| |
| |
| .webcam-modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 10000; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| visibility: hidden; |
| transition: opacity 0.2s ease, visibility 0.2s; |
| } |
|
|
| .webcam-modal.show { |
| opacity: 1; |
| visibility: visible; |
| } |
|
|
| .webcam-modal-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| } |
|
|
| .webcam-modal-content { |
| position: relative; |
| background: var(--bg-secondary); |
| border-radius: 20px; |
| overflow: hidden; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); |
| border: 1px solid var(--border); |
| max-width: 640px; |
| width: 90%; |
| transform: scale(0.9) translateY(20px); |
| transition: transform 0.3s ease; |
| } |
|
|
| .webcam-modal.show .webcam-modal-content { |
| transform: scale(1) translateY(0); |
| } |
|
|
| .webcam-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 16px 20px; |
| border-bottom: 1px solid var(--border); |
| background: var(--bg-primary); |
| } |
|
|
| .webcam-header h3 { |
| margin: 0; |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .webcam-close-btn { |
| width: 32px; |
| height: 32px; |
| border-radius: 8px; |
| border: none; |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.15s ease; |
| } |
|
|
| .webcam-close-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .webcam-close-btn svg { |
| width: 18px; |
| height: 18px; |
| } |
|
|
| .webcam-video-container { |
| position: relative; |
| background: #000; |
| aspect-ratio: 16/9; |
| overflow: hidden; |
| } |
|
|
| .webcam-video-container video { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transform: scaleX(-1); |
| } |
|
|
| .webcam-loading { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| background: rgba(0, 0, 0, 0.8); |
| color: #fff; |
| font-size: 14px; |
| } |
|
|
| .webcam-spinner { |
| width: 40px; |
| height: 40px; |
| border: 3px solid rgba(255, 255, 255, 0.2); |
| border-top-color: var(--accent); |
| border-radius: 50%; |
| animation: webcamSpin 1s linear infinite; |
| } |
|
|
| @keyframes webcamSpin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| .webcam-controls { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 20px; |
| padding: 20px; |
| background: var(--bg-primary); |
| border-top: 1px solid var(--border); |
| } |
|
|
| .webcam-capture-btn { |
| width: 72px; |
| height: 72px; |
| border-radius: 50%; |
| border: 4px solid var(--accent); |
| background: transparent; |
| cursor: pointer; |
| position: relative; |
| transition: all 0.15s ease; |
| } |
|
|
| .webcam-capture-btn:hover { |
| transform: scale(1.05); |
| border-color: #764ba2; |
| } |
|
|
| .webcam-capture-btn:active { |
| transform: scale(0.95); |
| } |
|
|
| .capture-ring { |
| position: absolute; |
| top: 6px; |
| left: 6px; |
| right: 6px; |
| bottom: 6px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--accent), #764ba2); |
| transition: all 0.15s ease; |
| } |
|
|
| .webcam-capture-btn:hover .capture-ring { |
| top: 4px; |
| left: 4px; |
| right: 4px; |
| bottom: 4px; |
| } |
|
|
| .webcam-switch-btn { |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| border: none; |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.15s ease; |
| } |
|
|
| .webcam-switch-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .webcam-switch-btn svg { |
| width: 22px; |
| height: 22px; |
| } |
|
|
| .webcam-cancel-btn { |
| padding: 12px 24px; |
| border-radius: 12px; |
| border: none; |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .webcam-cancel-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| |
| [data-theme="light"] .webcam-modal-content { |
| background: #ffffff; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); |
| } |
|
|
| [data-theme="light"] .webcam-header { |
| background: #f8fafc; |
| } |
|
|
| [data-theme="light"] .webcam-controls { |
| background: #f8fafc; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .webcam-modal-content { |
| width: 95%; |
| max-width: none; |
| border-radius: 16px; |
| } |
| |
| .webcam-header { |
| padding: 14px 16px; |
| } |
| |
| .webcam-header h3 { |
| font-size: 15px; |
| } |
| |
| .webcam-controls { |
| padding: 16px; |
| gap: 16px; |
| } |
| |
| .webcam-capture-btn { |
| width: 64px; |
| height: 64px; |
| } |
| |
| .webcam-switch-btn { |
| width: 44px; |
| height: 44px; |
| } |
| |
| .webcam-cancel-btn { |
| padding: 10px 20px; |
| font-size: 13px; |
| } |
| } |
|
|
| |
| @media (max-width: 480px) { |
| .webcam-modal-content { |
| width: 100%; |
| height: 100%; |
| border-radius: 0; |
| max-width: none; |
| } |
| |
| .webcam-video-container { |
| aspect-ratio: auto; |
| flex: 1; |
| } |
| |
| .webcam-modal-content { |
| display: flex; |
| flex-direction: column; |
| } |
| } |
|
|
