Spaces:
Running on Zero
Running on Zero
| /* ========================================================================== | |
| Nova AI Astra | Enterprise Autonomous Intelligence Studio | |
| Master Design System & Polished Professional Stylesheet | |
| ========================================================================== */ | |
| :root { | |
| /* Core Color Palette - Precision Obsidian */ | |
| --bg-space: #06070a; | |
| --bg-primary: #0c0e15; | |
| --bg-secondary: #121520; | |
| --bg-tertiary: #181c2b; | |
| --bg-elevated: #202538; | |
| --bg-hover: rgba(255, 255, 255, 0.05); | |
| --bg-active: rgba(255, 255, 255, 0.09); | |
| /* Primary Brand Gradients & Accents */ | |
| --accent-cyan: #00f2fe; | |
| --accent-teal: #4facfe; | |
| --accent-emerald: #10b981; | |
| --accent-purple: #8a2be2; | |
| --accent-indigo: #6366f1; | |
| --accent-primary: #10b981; | |
| --accent-primary-hover: #059669; | |
| --accent-glow: 0 0 25px rgba(16, 185, 129, 0.25); | |
| --specular-border: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%); | |
| /* Typography Colors */ | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --text-inverse: #06070a; | |
| /* Glassmorphism & Borders */ | |
| --glass-bg: rgba(18, 21, 32, 0.78); | |
| --glass-card: rgba(24, 28, 43, 0.65); | |
| --glass-border: rgba(255, 255, 255, 0.08); | |
| --glass-border-hover: rgba(255, 255, 255, 0.16); | |
| --glass-blur: blur(20px); | |
| /* Dimensions & Spacing */ | |
| --sidebar-width: 280px; | |
| --canvas-width: 52%; | |
| --header-height: 60px; | |
| --radius-xs: 5px; | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-full: 9999px; | |
| /* Elevation Shadows */ | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); | |
| --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7); | |
| /* Precision Transitions */ | |
| --transition-fast: 0.14s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-normal: 0.24s cubic-bezier(0.16, 1, 0.3, 1); | |
| --transition-smooth: 0.36s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| /* Theme Accents */ | |
| body[data-theme="cyan"] { | |
| --accent-primary: #00f2fe; | |
| --accent-primary-hover: #00c7d4; | |
| --accent-glow: 0 0 25px rgba(0, 242, 254, 0.3); | |
| } | |
| body[data-theme="purple"] { | |
| --accent-primary: #a855f7; | |
| --accent-primary-hover: #9333ea; | |
| --accent-glow: 0 0 25px rgba(168, 85, 247, 0.3); | |
| } | |
| body[data-theme="amber"] { | |
| --accent-primary: #f59e0b; | |
| --accent-primary-hover: #d97706; | |
| --accent-glow: 0 0 25px rgba(245, 158, 11, 0.3); | |
| } | |
| body[data-theme="emerald"] { | |
| --accent-primary: #10b981; | |
| --accent-primary-hover: #059669; | |
| --accent-glow: 0 0 25px rgba(16, 185, 129, 0.3); | |
| } | |
| /* Reset & Base */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background-color: var(--bg-space); | |
| color: var(--text-primary); | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| font-size: 14.5px; | |
| line-height: 1.55; | |
| } | |
| /* Specular Ambient Mesh Background */ | |
| .ambient-mesh { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| background: | |
| radial-gradient(circle at 12% 10%, rgba(16, 185, 129, 0.05) 0%, transparent 45%), | |
| radial-gradient(circle at 88% 15%, rgba(99, 102, 241, 0.06) 0%, transparent 50%), | |
| radial-gradient(circle at 50% 90%, rgba(0, 242, 254, 0.04) 0%, transparent 55%), | |
| radial-gradient(circle at 50% 50%, rgba(12, 14, 21, 0.98) 0%, var(--bg-space) 100%); | |
| transition: background var(--transition-smooth); | |
| } | |
| /* App Shell Layout */ | |
| #app-root { | |
| display: flex; | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| z-index: 1; | |
| overflow: hidden; | |
| } | |
| /* ========================================================================== | |
| Sidebar: Professional Session Management & Quota Telemetry | |
| ========================================================================== */ | |
| #sidebar { | |
| width: var(--sidebar-width); | |
| height: 100%; | |
| background: var(--bg-primary); | |
| border-right: 1px solid var(--glass-border); | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform var(--transition-smooth), width var(--transition-smooth); | |
| z-index: 40; | |
| flex-shrink: 0; | |
| } | |
| #sidebar.collapsed { | |
| transform: translateX(-100%); | |
| width: 0; | |
| border-right: none; | |
| overflow: hidden; | |
| } | |
| .sidebar-header { | |
| padding: 14px 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .brand-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| } | |
| .logo-orb { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: var(--radius-sm); | |
| background: linear-gradient(135deg, #10b981 0%, #00f2fe 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 0 14px rgba(16, 185, 129, 0.35); | |
| } | |
| .brand-title { | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| font-weight: 700; | |
| font-size: 1.02rem; | |
| letter-spacing: -0.02em; | |
| background: linear-gradient(135deg, #ffffff 40%, #94a3b8 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .version-pill { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| padding: 2px 6px; | |
| border-radius: var(--radius-xs); | |
| background: rgba(16, 185, 129, 0.12); | |
| color: var(--accent-primary); | |
| border: 1px solid rgba(16, 185, 129, 0.25); | |
| letter-spacing: 0.04em; | |
| } | |
| /* Sidebar Actions */ | |
| .sidebar-actions { | |
| padding: 12px 14px 8px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .btn-new-chat { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| padding: 9px 12px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-primary); | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| font-size: 0.88rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-new-chat:hover { | |
| background: var(--bg-tertiary); | |
| border-color: var(--glass-border-hover); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| transform: translateY(-1px); | |
| } | |
| .shortcut-badge { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.68rem; | |
| color: var(--text-muted); | |
| background: var(--bg-primary); | |
| padding: 2px 5px; | |
| border-radius: var(--radius-xs); | |
| border: 1px solid var(--glass-border); | |
| } | |
| /* Search Box */ | |
| .search-wrapper { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 7px 10px 7px 32px; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| font-size: 0.82rem; | |
| outline: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .search-input:focus { | |
| border-color: var(--accent-primary); | |
| background: rgba(255, 255, 255, 0.06); | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.15); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| } | |
| /* Workspace Project Folders Bar */ | |
| .workspace-folders-bar { | |
| display: flex; | |
| gap: 4px; | |
| padding: 4px 14px 8px 14px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| .folder-pill { | |
| flex: 1; | |
| text-align: center; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| padding: 4px 6px; | |
| border-radius: var(--radius-xs); | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| border: 1px solid transparent; | |
| } | |
| .folder-pill:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-hover); | |
| } | |
| .folder-pill.active { | |
| background: var(--bg-secondary); | |
| color: var(--accent-primary); | |
| border-color: var(--glass-border); | |
| } | |
| /* History Lists */ | |
| .sidebar-history { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 8px 10px; | |
| } | |
| .history-group-title { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| letter-spacing: 0.06em; | |
| padding: 10px 8px 4px 8px; | |
| } | |
| .history-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 7px 9px; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| margin-bottom: 2px; | |
| } | |
| .history-item:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .history-item.active { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: #fff; | |
| border: 1px solid rgba(16, 185, 129, 0.22); | |
| } | |
| .history-title-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| flex: 1; | |
| } | |
| .history-title { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .history-actions { | |
| display: none; | |
| align-items: center; | |
| gap: 3px; | |
| } | |
| .history-item:hover .history-actions { | |
| display: flex; | |
| } | |
| .action-btn-mini { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 3px; | |
| border-radius: var(--radius-xs); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .action-btn-mini:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-active); | |
| } | |
| .action-btn-mini.delete:hover { | |
| color: #ef4444; | |
| } | |
| /* Sidebar Footer / Quota & User */ | |
| .sidebar-footer { | |
| padding: 12px 14px; | |
| border-top: 1px solid var(--glass-border); | |
| background: rgba(12, 14, 21, 0.85); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .quota-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| padding: 2px 2px; | |
| } | |
| .quota-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| } | |
| .quota-count { | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--accent-primary); | |
| font-weight: 600; | |
| } | |
| .quota-progress-track { | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| } | |
| .quota-progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #10b981, #00f2fe); | |
| border-radius: var(--radius-full); | |
| } | |
| .user-profile-card { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| cursor: pointer; | |
| padding: 6px 8px; | |
| border-radius: var(--radius-sm); | |
| transition: background var(--transition-fast); | |
| } | |
| .user-profile-card:hover { | |
| background: var(--bg-hover); | |
| } | |
| .user-avatar-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .user-avatar { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: var(--radius-full); | |
| background: linear-gradient(135deg, #10b981, #00f2fe); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| color: #06070a; | |
| font-size: 0.85rem; | |
| } | |
| .user-meta-name { | |
| font-weight: 600; | |
| font-size: 0.82rem; | |
| line-height: 1.2; | |
| } | |
| .user-meta-tier { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.68rem; | |
| color: var(--accent-primary); | |
| font-weight: 600; | |
| } | |
| /* ========================================================================== | |
| Header: Telemetry HUD, Model Selector & Global Actions | |
| ========================================================================== */ | |
| #main-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| background: var(--bg-primary); | |
| } | |
| #top-header { | |
| height: var(--header-height); | |
| border-bottom: 1px solid var(--glass-border); | |
| background: rgba(12, 14, 21, 0.82); | |
| backdrop-filter: var(--glass-blur); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 16px; | |
| z-index: 30; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .icon-button { | |
| background: transparent; | |
| border: 1px solid transparent; | |
| color: var(--text-secondary); | |
| width: 34px; | |
| height: 34px; | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .icon-button:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| border-color: var(--glass-border); | |
| } | |
| /* Model Selector Button */ | |
| .model-selector-wrapper { | |
| position: relative; | |
| } | |
| .model-selector-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border); | |
| padding: 6px 12px; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .model-selector-btn:hover { | |
| border-color: var(--accent-primary); | |
| background: var(--bg-tertiary); | |
| box-shadow: 0 0 14px rgba(16, 185, 129, 0.15); | |
| } | |
| .model-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: var(--radius-full); | |
| background: var(--accent-primary); | |
| box-shadow: 0 0 6px var(--accent-primary); | |
| } | |
| .model-menu { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| left: 0; | |
| width: 350px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border-hover); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 0, 0, 0.6); | |
| backdrop-filter: var(--glass-blur); | |
| padding: 6px; | |
| display: none; | |
| flex-direction: column; | |
| gap: 4px; | |
| z-index: 100; | |
| animation: menuDrop 0.18s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .model-menu.open { | |
| display: flex; | |
| } | |
| @keyframes menuDrop { | |
| from { opacity: 0; transform: translateY(-6px) scale(0.98); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| .model-option { | |
| padding: 9px 11px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| transition: all var(--transition-fast); | |
| } | |
| .model-option:hover { | |
| background: var(--bg-hover); | |
| } | |
| .model-option.active { | |
| background: rgba(16, 185, 129, 0.1); | |
| border: 1px solid rgba(16, 185, 129, 0.25); | |
| } | |
| .model-option-icon { | |
| font-size: 1.15rem; | |
| margin-top: 1px; | |
| } | |
| .model-option-info { | |
| flex: 1; | |
| } | |
| .model-option-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .model-option-name { | |
| font-weight: 700; | |
| font-size: 0.86rem; | |
| color: var(--text-primary); | |
| } | |
| .model-tag { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.64rem; | |
| font-weight: 700; | |
| padding: 2px 5px; | |
| border-radius: var(--radius-xs); | |
| background: rgba(255, 255, 255, 0.06); | |
| color: var(--text-secondary); | |
| } | |
| .model-option.active .model-tag { | |
| background: rgba(16, 185, 129, 0.18); | |
| color: var(--accent-primary); | |
| } | |
| .model-option-desc { | |
| font-size: 0.74rem; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| line-height: 1.35; | |
| } | |
| /* Telemetry Inline Chip Bar */ | |
| .telemetry-bar-inline { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-left: 8px; | |
| } | |
| .telemetry-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| padding: 4px 8px; | |
| border-radius: var(--radius-xs); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| } | |
| .pulse-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| .pulse-dot.green { | |
| background: #10b981; | |
| box-shadow: 0 0 6px #10b981; | |
| animation: radarPulse 2s infinite; | |
| } | |
| @keyframes radarPulse { | |
| 0% { transform: scale(0.95); opacity: 0.8; } | |
| 50% { transform: scale(1.3); opacity: 1; } | |
| 100% { transform: scale(0.95); opacity: 0.8; } | |
| } | |
| /* Header Right Action Pills */ | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .feature-pill-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--glass-border); | |
| padding: 6px 11px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .feature-pill-btn:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--text-primary); | |
| border-color: var(--glass-border-hover); | |
| } | |
| .feature-pill-btn.active { | |
| background: rgba(16, 185, 129, 0.12); | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| } | |
| .feature-pill-btn.active.search-active { | |
| background: rgba(59, 130, 246, 0.15); | |
| border-color: #3b82f6; | |
| color: #60a5fa; | |
| } | |
| .voice-mode-trigger { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(16, 185, 129, 0.15)); | |
| border: 1px solid rgba(16, 185, 129, 0.35); | |
| color: #34d399; | |
| } | |
| .voice-mode-trigger:hover { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(16, 185, 129, 0.25)); | |
| color: #fff; | |
| box-shadow: 0 0 16px rgba(16, 185, 129, 0.25); | |
| } | |
| /* ========================================================================== | |
| Chat Flow Viewport | |
| ========================================================================== */ | |
| .chat-workspace { | |
| flex: 1; | |
| display: flex; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .chat-flow-pane { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .messages-scroll-area { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 20px 170px 20px; | |
| scroll-behavior: smooth; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .messages-container { | |
| width: 100%; | |
| max-width: 820px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 26px; | |
| } | |
| /* ========================================================================== | |
| Welcome Hero: Professional Presentation | |
| ========================================================================== */ | |
| #welcome-hero { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 40px 10px 20px 10px; | |
| width: 100%; | |
| max-width: 820px; | |
| margin: auto 0; | |
| } | |
| .hero-orb-visual { | |
| position: relative; | |
| width: 90px; | |
| height: 90px; | |
| margin-bottom: 20px; | |
| } | |
| .orb-ring-outer { | |
| position: absolute; | |
| inset: -12px; | |
| border-radius: var(--radius-full); | |
| border: 1px dashed rgba(16, 185, 129, 0.3); | |
| animation: spinSlow 30s linear infinite; | |
| } | |
| .orb-core-sphere { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: var(--radius-full); | |
| background: radial-gradient(circle at 35% 35%, #00f2fe 0%, #10b981 50%, #07080c 100%); | |
| box-shadow: 0 0 35px rgba(16, 185, 129, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.4); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .orb-inner-symbol { | |
| width: 40px; | |
| height: 40px; | |
| color: #fff; | |
| filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); | |
| } | |
| @keyframes spinSlow { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .hero-badge-tag { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| letter-spacing: 0.1em; | |
| color: var(--accent-primary); | |
| background: rgba(16, 185, 129, 0.1); | |
| padding: 3px 9px; | |
| border-radius: var(--radius-xs); | |
| border: 1px solid rgba(16, 185, 129, 0.25); | |
| margin-bottom: 12px; | |
| } | |
| .hero-title { | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| font-size: 2.1rem; | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| background: linear-gradient(135deg, #ffffff 30%, #94a3b8 70%, #10b981 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 8px; | |
| } | |
| .hero-subtitle { | |
| font-size: 0.98rem; | |
| color: var(--text-secondary); | |
| max-width: 600px; | |
| line-height: 1.5; | |
| margin-bottom: 32px; | |
| } | |
| /* Prompt Starters Grid */ | |
| .prompt-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| width: 100%; | |
| } | |
| .prompt-card { | |
| background: var(--glass-card); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-md); | |
| padding: 14px 16px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| backdrop-filter: var(--glass-blur); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .prompt-card:hover { | |
| background: var(--bg-elevated); | |
| border-color: var(--glass-border-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); | |
| } | |
| .card-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .card-icon-badge { | |
| font-size: 1.05rem; | |
| } | |
| .card-tag { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| letter-spacing: 0.05em; | |
| } | |
| .card-title { | |
| font-weight: 700; | |
| font-size: 0.92rem; | |
| color: var(--text-primary); | |
| margin-bottom: 3px; | |
| } | |
| .card-desc { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| line-height: 1.35; | |
| } | |
| /* ========================================================================== | |
| Chat Messages & DeepSeek <think> Trace | |
| ========================================================================== */ | |
| .message-row { | |
| display: flex; | |
| gap: 14px; | |
| width: 100%; | |
| animation: messageAppear 0.25s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| @keyframes messageAppear { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message-row.user { | |
| flex-direction: row-reverse; | |
| } | |
| .message-avatar { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 0.88rem; | |
| font-weight: 700; | |
| } | |
| .message-avatar.assistant { | |
| background: linear-gradient(135deg, #10b981 0%, #00f2fe 100%); | |
| color: #06070a; | |
| box-shadow: 0 0 14px rgba(16, 185, 129, 0.3); | |
| } | |
| .message-avatar.user { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-primary); | |
| } | |
| .message-content-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| max-width: calc(100% - 50px); | |
| width: 100%; | |
| } | |
| .message-row.user .message-content-wrap { | |
| align-items: flex-end; | |
| } | |
| /* User Message Bubble */ | |
| .user-bubble { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--glass-border-hover); | |
| padding: 11px 16px; | |
| border-radius: var(--radius-md) var(--radius-xs) var(--radius-md) var(--radius-md); | |
| color: var(--text-primary); | |
| font-size: 0.94rem; | |
| line-height: 1.5; | |
| box-shadow: var(--shadow-sm); | |
| word-break: break-word; | |
| } | |
| .user-attachments { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-top: 8px; | |
| } | |
| .attachment-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-xs); | |
| padding: 3px 7px; | |
| font-size: 0.74rem; | |
| color: var(--text-secondary); | |
| } | |
| .attachment-chip img { | |
| width: 22px; | |
| height: 22px; | |
| object-fit: cover; | |
| border-radius: 3px; | |
| } | |
| /* Assistant Message Body */ | |
| .assistant-body { | |
| width: 100%; | |
| color: var(--text-primary); | |
| font-size: 0.94rem; | |
| line-height: 1.6; | |
| } | |
| .assistant-meta-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 8px; | |
| font-size: 0.76rem; | |
| color: var(--text-muted); | |
| } | |
| .model-name-label { | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .latency-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-family: 'JetBrains Mono', monospace; | |
| background: rgba(255, 255, 255, 0.04); | |
| padding: 2px 7px; | |
| border-radius: var(--radius-xs); | |
| } | |
| /* DeepSeek <think> Trace Collapsible Container */ | |
| .reasoning-box { | |
| background: rgba(14, 18, 28, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-left: 3px solid var(--accent-primary); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 14px; | |
| overflow: hidden; | |
| transition: all var(--transition-normal); | |
| } | |
| .reasoning-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 9px 12px; | |
| background: rgba(255, 255, 255, 0.02); | |
| cursor: pointer; | |
| user-select: none; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| transition: background var(--transition-fast); | |
| } | |
| .reasoning-toggle:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-primary); | |
| } | |
| .reasoning-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .reasoning-spinner { | |
| width: 12px; | |
| height: 12px; | |
| border: 2px solid rgba(16, 185, 129, 0.2); | |
| border-top-color: var(--accent-primary); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| display: inline-block; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .reasoning-chevron { | |
| transition: transform var(--transition-fast); | |
| } | |
| .reasoning-box.collapsed .reasoning-chevron { | |
| transform: rotate(-90deg); | |
| } | |
| .reasoning-content { | |
| padding: 12px 14px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| font-size: 0.84rem; | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| background: rgba(0, 0, 0, 0.25); | |
| display: block; | |
| } | |
| .reasoning-box.collapsed .reasoning-content { | |
| display: none; | |
| } | |
| .reasoning-step { | |
| margin-bottom: 8px; | |
| padding-left: 10px; | |
| border-left: 2px solid rgba(16, 185, 129, 0.25); | |
| } | |
| .reasoning-step-title { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-weight: 700; | |
| color: #cbd5e1; | |
| font-size: 0.78rem; | |
| margin-bottom: 2px; | |
| } | |
| /* Citations Bar */ | |
| .citations-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-bottom: 12px; | |
| } | |
| .citation-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| background: rgba(59, 130, 246, 0.1); | |
| border: 1px solid rgba(59, 130, 246, 0.25); | |
| border-radius: var(--radius-xs); | |
| padding: 2px 8px; | |
| font-size: 0.74rem; | |
| color: #93c5fd; | |
| text-decoration: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .citation-chip:hover { | |
| background: rgba(59, 130, 246, 0.2); | |
| border-color: #60a5fa; | |
| color: #fff; | |
| } | |
| /* Markdown Typography */ | |
| .markdown-body h1, .markdown-body h2, .markdown-body h3 { | |
| color: #fff; | |
| font-weight: 700; | |
| margin: 1.1em 0 0.4em 0; | |
| line-height: 1.3; | |
| } | |
| .markdown-body h1 { font-size: 1.38rem; } | |
| .markdown-body h2 { font-size: 1.18rem; } | |
| .markdown-body h3 { font-size: 1.02rem; } | |
| .markdown-body p { margin-bottom: 0.85em; } | |
| .markdown-body ul, .markdown-body ol { padding-left: 18px; margin-bottom: 0.9em; } | |
| .markdown-body li { margin-bottom: 0.3em; } | |
| .markdown-body blockquote { | |
| border-left: 3px solid var(--accent-primary); | |
| background: rgba(255, 255, 255, 0.02); | |
| padding: 9px 13px; | |
| color: var(--text-secondary); | |
| font-style: italic; | |
| margin: 1em 0; | |
| border-radius: 0 var(--radius-xs) var(--radius-xs) 0; | |
| } | |
| .markdown-body table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 1em 0; | |
| font-size: 0.85rem; | |
| background: rgba(0, 0, 0, 0.25); | |
| border-radius: var(--radius-xs); | |
| overflow: hidden; | |
| } | |
| .markdown-body th, .markdown-body td { | |
| padding: 8px 12px; | |
| border: 1px solid var(--glass-border); | |
| text-align: left; | |
| } | |
| .markdown-body th { | |
| background: rgba(255, 255, 255, 0.04); | |
| font-weight: 700; | |
| color: #fff; | |
| } | |
| .markdown-body code:not(pre code) { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #00f2fe; | |
| padding: 2px 5px; | |
| border-radius: 3px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.85em; | |
| } | |
| /* Code Block Card */ | |
| .code-block-card { | |
| margin: 1.1em 0; | |
| background: #080a10; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); | |
| } | |
| .code-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 7px 12px; | |
| background: #0f121b; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .code-lang-tag { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| color: #94a3b8; | |
| text-transform: uppercase; | |
| } | |
| .code-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .code-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| color: var(--text-secondary); | |
| font-size: 0.74rem; | |
| padding: 3px 8px; | |
| border-radius: var(--radius-xs); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .code-btn:hover { | |
| background: rgba(255, 255, 255, 0.12); | |
| color: #fff; | |
| } | |
| .code-btn.canvas-btn { | |
| background: rgba(16, 185, 129, 0.12); | |
| border-color: rgba(16, 185, 129, 0.3); | |
| color: var(--accent-primary); | |
| } | |
| .code-block-card pre { | |
| margin: 0; | |
| padding: 12px 14px; | |
| overflow-x: auto; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.84rem; | |
| line-height: 1.5; | |
| color: #e2e8f0; | |
| } | |
| /* Image Presentation Card */ | |
| .generated-image-card { | |
| margin: 1.1em 0; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| max-width: 620px; | |
| } | |
| .image-preview-wrapper { | |
| position: relative; | |
| width: 100%; | |
| aspect-ratio: 16 / 9; | |
| overflow: hidden; | |
| background: #000; | |
| cursor: zoom-in; | |
| } | |
| .image-preview-wrapper img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform var(--transition-smooth); | |
| } | |
| .image-preview-wrapper:hover img { | |
| transform: scale(1.02); | |
| } | |
| .image-card-footer { | |
| padding: 8px 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-top: 1px solid var(--glass-border); | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| .image-prompt-meta { | |
| font-size: 0.78rem; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 75%; | |
| } | |
| .message-actions-toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| margin-top: 10px; | |
| opacity: 0.65; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .message-row:hover .message-actions-toolbar { | |
| opacity: 1; | |
| } | |
| .tool-action-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 5px; | |
| border-radius: var(--radius-xs); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .tool-action-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .tool-action-btn.active { | |
| color: var(--accent-primary); | |
| } | |
| .streaming-cursor { | |
| display: inline-block; | |
| width: 6px; | |
| height: 15px; | |
| background: var(--accent-primary); | |
| margin-left: 4px; | |
| vertical-align: middle; | |
| animation: cursorBlink 0.8s infinite; | |
| border-radius: 2px; | |
| box-shadow: 0 0 6px var(--accent-primary); | |
| } | |
| @keyframes cursorBlink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| /* ========================================================================== | |
| Bottom Input Dock (Linear / Perplexity Style) | |
| ========================================================================== */ | |
| #bottom-dock { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 0 16px 16px 16px; | |
| background: linear-gradient(to top, var(--bg-primary) 75%, transparent 100%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| pointer-events: none; | |
| z-index: 25; | |
| } | |
| .dock-content { | |
| width: 100%; | |
| max-width: 820px; | |
| pointer-events: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 7px; | |
| } | |
| #attachments-tray { | |
| display: none; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-sm); | |
| } | |
| #attachments-tray.visible { | |
| display: flex; | |
| } | |
| .tray-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--bg-tertiary); | |
| padding: 3px 7px; | |
| border-radius: var(--radius-xs); | |
| border: 1px solid var(--glass-border); | |
| font-size: 0.76rem; | |
| } | |
| .tray-item img { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 2px; | |
| object-fit: cover; | |
| } | |
| .tray-remove-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| } | |
| .tray-remove-btn:hover { | |
| color: #ef4444; | |
| } | |
| /* The Glowing Input Box */ | |
| .input-capsule { | |
| background: rgba(18, 21, 32, 0.9); | |
| border: 1px solid var(--glass-border-hover); | |
| border-radius: 20px; | |
| padding: 10px 14px; | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(16, 185, 129, 0.05); | |
| backdrop-filter: var(--glass-blur); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| transition: all var(--transition-normal); | |
| } | |
| .input-capsule:focus-within { | |
| border-color: rgba(16, 185, 129, 0.45); | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(16, 185, 129, 0.15); | |
| } | |
| .input-capsule textarea { | |
| width: 100%; | |
| max-height: 200px; | |
| min-height: 24px; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 0.94rem; | |
| line-height: 1.45; | |
| resize: none; | |
| outline: none; | |
| padding: 2px 4px; | |
| } | |
| .input-capsule textarea::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .input-bottom-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .dock-left-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .dock-pill-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-secondary); | |
| padding: 4px 9px; | |
| border-radius: var(--radius-xs); | |
| font-size: 0.76rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .dock-pill-btn:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--text-primary); | |
| } | |
| .dock-pill-btn.active { | |
| background: rgba(16, 185, 129, 0.12); | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| } | |
| .dock-pill-btn.search-mode.active { | |
| background: rgba(59, 130, 246, 0.12); | |
| border-color: #3b82f6; | |
| color: #60a5fa; | |
| } | |
| .dock-right-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .token-counter-hint { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.68rem; | |
| color: var(--text-muted); | |
| } | |
| .send-trigger-btn { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: var(--radius-full); | |
| background: #27272a; | |
| color: #71717a; | |
| border: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .send-trigger-btn.ready { | |
| background: #ffffff; | |
| color: #06070a; | |
| box-shadow: 0 0 12px rgba(255, 255, 255, 0.3); | |
| } | |
| .send-trigger-btn.ready:hover { | |
| transform: scale(1.04); | |
| } | |
| .send-trigger-btn.generating { | |
| background: #ef4444; | |
| color: #fff; | |
| } | |
| .dock-disclaimer { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| text-align: center; | |
| padding: 2px 0; | |
| } | |
| /* ========================================================================== | |
| Split-Screen Canvas Studio & Viewport Modes | |
| ========================================================================== */ | |
| #canvas-panel { | |
| width: var(--canvas-width); | |
| height: 100%; | |
| background: var(--bg-space); | |
| border-left: 1px solid var(--glass-border-hover); | |
| display: none; | |
| flex-direction: column; | |
| z-index: 35; | |
| box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); | |
| animation: slideCanvas 0.28s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| #canvas-panel.visible { | |
| display: flex; | |
| } | |
| #canvas-panel.fullscreen { | |
| position: fixed; | |
| inset: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: 1000; | |
| border-left: none; | |
| } | |
| @keyframes slideCanvas { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| .canvas-header { | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--glass-border); | |
| background: var(--bg-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .canvas-title-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .canvas-badge { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| padding: 2px 6px; | |
| border-radius: var(--radius-xs); | |
| background: rgba(16, 185, 129, 0.12); | |
| color: var(--accent-primary); | |
| border: 1px solid rgba(16, 185, 129, 0.25); | |
| } | |
| .canvas-title { | |
| font-weight: 700; | |
| font-size: 0.88rem; | |
| } | |
| .canvas-viewport-modes { | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 3px; | |
| border-radius: var(--radius-xs); | |
| } | |
| .viewport-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 4px 6px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .viewport-btn:hover { | |
| color: #fff; | |
| } | |
| .viewport-btn.active { | |
| background: var(--bg-elevated); | |
| color: var(--accent-primary); | |
| } | |
| .canvas-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .canvas-tab-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-secondary); | |
| padding: 4px 10px; | |
| border-radius: var(--radius-xs); | |
| font-size: 0.78rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .canvas-tab-btn:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #fff; | |
| } | |
| .canvas-tab-btn.active { | |
| background: var(--bg-elevated); | |
| border-color: var(--accent-primary); | |
| color: #fff; | |
| } | |
| /* Canvas Viewport */ | |
| .canvas-viewport { | |
| flex: 1; | |
| position: relative; | |
| overflow: hidden; | |
| background: #000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #canvas-sandbox-frame { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| background: #ffffff; | |
| transition: width var(--transition-normal); | |
| } | |
| #canvas-sandbox-frame.mode-tablet { | |
| width: 768px; | |
| box-shadow: 0 0 40px rgba(0, 0, 0, 0.8); | |
| } | |
| #canvas-sandbox-frame.mode-mobile { | |
| width: 375px; | |
| box-shadow: 0 0 40px rgba(0, 0, 0, 0.8); | |
| } | |
| .canvas-code-view { | |
| display: none; | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| padding: 14px; | |
| background: #080a10; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.84rem; | |
| color: #f1f5f9; | |
| white-space: pre-wrap; | |
| outline: none; | |
| } | |
| .canvas-code-view.active { | |
| display: block; | |
| } | |
| /* Console Drawer */ | |
| .canvas-console-view { | |
| display: none; | |
| width: 100%; | |
| height: 100%; | |
| overflow-y: auto; | |
| background: #07090e; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.8rem; | |
| } | |
| .canvas-console-view.active { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .console-header { | |
| padding: 8px 12px; | |
| background: #0f121a; | |
| border-bottom: 1px solid var(--glass-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| } | |
| .console-entries { | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .console-line { | |
| padding: 2px 4px; | |
| border-radius: 2px; | |
| } | |
| .console-line.info { color: #93c5fd; } | |
| .console-line.warn { color: #fcd34d; background: rgba(245, 158, 11, 0.08); } | |
| .console-line.error { color: #f87171; background: rgba(239, 68, 68, 0.1); } | |
| /* ========================================================================== | |
| Executive Command Palette (Ctrl+K) | |
| ========================================================================== */ | |
| .cmd-palette-box { | |
| width: 100%; | |
| max-width: 560px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border-hover); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-lg), 0 0 50px rgba(0, 0, 0, 0.8); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| animation: menuDrop 0.18s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .cmd-input-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 14px; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .cmd-input-wrap input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| color: var(--text-primary); | |
| font-size: 0.94rem; | |
| font-family: inherit; | |
| } | |
| .cmd-items-list { | |
| padding: 6px; | |
| max-height: 320px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| .cmd-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 8px 10px; | |
| border-radius: var(--radius-xs); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .cmd-item:hover, .cmd-item.selected { | |
| background: var(--bg-elevated); | |
| } | |
| .cmd-item-icon { | |
| font-size: 1.1rem; | |
| } | |
| .cmd-item-info { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .cmd-item-title { | |
| font-weight: 600; | |
| font-size: 0.86rem; | |
| } | |
| .cmd-item-desc { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| } | |
| /* ========================================================================== | |
| Modals & Settings | |
| ========================================================================== */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.75); | |
| backdrop-filter: blur(12px); | |
| z-index: 1500; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 16px; | |
| } | |
| .modal-backdrop.open { | |
| display: flex; | |
| } | |
| .modal-window { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border-hover); | |
| border-radius: var(--radius-md); | |
| width: 100%; | |
| max-width: 560px; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-lg), 0 0 50px rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-header { | |
| padding: 14px 18px; | |
| border-bottom: 1px solid var(--glass-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .modal-title { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| } | |
| .modal-body { | |
| padding: 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .setting-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .setting-title { | |
| font-weight: 600; | |
| font-size: 0.88rem; | |
| color: var(--text-primary); | |
| } | |
| .setting-desc { | |
| font-size: 0.76rem; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| } | |
| .theme-picker { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .theme-dot { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| transition: transform var(--transition-fast); | |
| } | |
| .theme-dot:hover { transform: scale(1.15); } | |
| .theme-dot.active { border-color: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } | |
| .theme-dot.emerald { background: #10b981; } | |
| .theme-dot.cyan { background: #00f2fe; } | |
| .theme-dot.purple { background: #a855f7; } | |
| .theme-dot.amber { background: #f59e0b; } | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 40px; | |
| height: 22px; | |
| } | |
| .switch input { opacity: 0; width: 0; height: 0; } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| inset: 0; | |
| background-color: #374151; | |
| transition: .25s; | |
| border-radius: 34px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; | |
| transition: .25s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { background-color: var(--accent-primary); } | |
| input:checked + .slider:before { transform: translateX(18px); } | |
| .modal-input { | |
| width: 100%; | |
| padding: 8px 12px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-xs); | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 0.88rem; | |
| outline: none; | |
| } | |
| .modal-input:focus { border-color: var(--accent-primary); } | |
| .modal-footer { | |
| padding: 12px 18px; | |
| border-top: 1px solid var(--glass-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: var(--accent-primary); | |
| color: #06070a; | |
| font-weight: 700; | |
| padding: 7px 16px; | |
| border-radius: var(--radius-xs); | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-primary:hover { | |
| background: var(--accent-primary-hover); | |
| box-shadow: 0 0 14px rgba(16, 185, 129, 0.35); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.06); | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| padding: 7px 14px; | |
| border-radius: var(--radius-xs); | |
| border: 1px solid var(--glass-border); | |
| cursor: pointer; | |
| } | |
| /* Lightbox & Toasts */ | |
| #image-lightbox { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(20px); | |
| z-index: 3000; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: zoom-out; | |
| } | |
| #image-lightbox.open { display: flex; } | |
| #lightbox-img { | |
| max-width: 90vw; | |
| max-height: 90vh; | |
| border-radius: var(--radius-sm); | |
| box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); | |
| } | |
| #toast-container { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| z-index: 5000; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--glass-border-hover); | |
| color: #fff; | |
| padding: 8px 14px; | |
| border-radius: var(--radius-sm); | |
| box-shadow: var(--shadow-lg); | |
| font-size: 0.84rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| animation: toastSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1); | |
| pointer-events: auto; | |
| } | |
| @keyframes toastSlide { | |
| from { opacity: 0; transform: translateY(12px) scale(0.96); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| /* Voice Mode Overlay */ | |
| #voice-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: radial-gradient(circle at center, #0f131f 0%, #050608 100%); | |
| z-index: 2000; | |
| display: none; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 24px; | |
| backdrop-filter: blur(35px); | |
| } | |
| #voice-overlay.active { display: flex; } | |
| .voice-top-bar { | |
| width: 100%; | |
| max-width: 900px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .voice-status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: var(--accent-primary); | |
| } | |
| .voice-center-stage { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| width: 100%; | |
| flex: 1; | |
| } | |
| #voice-wave-canvas { width: 300px; height: 300px; } | |
| .voice-transcription-live { | |
| max-width: 580px; | |
| text-align: center; | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| color: #f1f5f9; | |
| min-height: 50px; | |
| margin-top: 20px; | |
| padding: 0 16px; | |
| } | |
| .voice-controls-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding-bottom: 16px; | |
| } | |
| .voice-round-btn { | |
| width: 54px; | |
| height: 54px; | |
| border-radius: var(--radius-full); | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border-hover); | |
| color: #fff; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .voice-round-btn:hover { transform: scale(1.06); background: var(--bg-elevated); } | |
| .voice-round-btn.mute.active { background: #ef4444; border-color: #ef4444; } | |
| .voice-round-btn.close { background: rgba(255, 255, 255, 0.08); } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 1024px) { | |
| #canvas-panel { width: 60%; } | |
| .telemetry-bar-inline { display: none; } | |
| } | |
| @media (max-width: 768px) { | |
| #sidebar { position: absolute; inset: 0 auto 0 0; } | |
| .prompt-grid { grid-template-columns: 1fr; } | |
| #canvas-panel { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 500; } | |
| .hero-title { font-size: 1.65rem; } | |
| } | |