Spaces:
Running on Zero
Running on Zero
| /* Synapse V8 — Liquid Glass UI */ | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-tertiary: #1a1a2e; | |
| --bg-glass: rgba(255, 255, 255, 0.03); | |
| --bg-glass-hover: rgba(255, 255, 255, 0.06); | |
| --border-glass: rgba(255, 255, 255, 0.08); | |
| --border-accent: rgba(99, 102, 241, 0.3); | |
| --text-primary: #f0f0f5; | |
| --text-secondary: #a0a0b8; | |
| --text-muted: #606080; | |
| --accent-primary: #6366f1; | |
| --accent-secondary: #8b5cf6; | |
| --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); | |
| --accent-glow: rgba(99, 102, 241, 0.15); | |
| --success: #22c55e; | |
| --warning: #f59e0b; | |
| --error: #ef4444; | |
| --blur-amount: 20px; | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); | |
| --transition-fast: 150ms ease; | |
| --transition-normal: 250ms ease; | |
| --transition-slow: 400ms ease; | |
| --sidebar-width: 280px; | |
| --header-height: 60px; | |
| } | |
| [data-theme="light"] { | |
| --bg-primary: #f8f9fc; | |
| --bg-secondary: #ffffff; | |
| --bg-tertiary: #f0f1f5; | |
| --bg-glass: rgba(255, 255, 255, 0.7); | |
| --bg-glass-hover: rgba(255, 255, 255, 0.85); | |
| --border-glass: rgba(0, 0, 0, 0.08); | |
| --border-accent: rgba(99, 102, 241, 0.3); | |
| --text-primary: #1a1a2e; | |
| --text-secondary: #555570; | |
| --text-muted: #9090a8; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| /* === LAYOUT === */ | |
| .app-layout { | |
| display: flex; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| /* === SIDEBAR === */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-secondary); | |
| border-right: 1px solid var(--border-glass); | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform var(--transition-normal); | |
| z-index: 100; | |
| backdrop-filter: blur(var(--blur-amount)); | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| position: absolute; | |
| } | |
| .sidebar-header { | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-glass); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .sidebar-logo { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-sm); | |
| background: var(--accent-gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 14px; | |
| color: white; | |
| } | |
| .sidebar-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .new-chat-btn { | |
| margin: 12px 16px; | |
| padding: 10px 16px; | |
| border: 1px dashed var(--border-accent); | |
| border-radius: var(--radius-md); | |
| background: var(--bg-glass); | |
| color: var(--accent-primary); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| text-align: center; | |
| } | |
| .new-chat-btn:hover { | |
| background: var(--accent-glow); | |
| border-color: var(--accent-primary); | |
| } | |
| .chat-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 8px; | |
| } | |
| .chat-list::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .chat-list::-webkit-scrollbar-thumb { | |
| background: var(--border-glass); | |
| border-radius: 4px; | |
| } | |
| .chat-item { | |
| padding: 10px 14px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| margin-bottom: 2px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .chat-item:hover { | |
| background: var(--bg-glass-hover); | |
| } | |
| .chat-item.active { | |
| background: var(--accent-glow); | |
| border: 1px solid var(--border-accent); | |
| } | |
| .chat-item-title { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .chat-item-icon { | |
| font-size: 14px; | |
| opacity: 0.5; | |
| } | |
| /* === MAIN CONTENT === */ | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| /* === HEADER === */ | |
| .header { | |
| height: var(--header-height); | |
| border-bottom: 1px solid var(--border-glass); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| gap: 16px; | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(var(--blur-amount)); | |
| } | |
| .menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 20px; | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| border-radius: var(--radius-sm); | |
| } | |
| .menu-btn:hover { | |
| background: var(--bg-glass-hover); | |
| } | |
| .header-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| } | |
| .header-actions { | |
| margin-left: auto; | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .header-btn { | |
| background: var(--bg-glass); | |
| border: 1px solid var(--border-glass); | |
| color: var(--text-secondary); | |
| padding: 6px 12px; | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .header-btn:hover { | |
| background: var(--bg-glass-hover); | |
| color: var(--text-primary); | |
| } | |
| .mode-selector { | |
| background: var(--bg-glass); | |
| border: 1px solid var(--border-glass); | |
| border-radius: var(--radius-sm); | |
| padding: 4px; | |
| display: flex; | |
| gap: 2px; | |
| } | |
| .mode-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .mode-btn.active { | |
| background: var(--accent-primary); | |
| color: white; | |
| } | |
| .mode-btn:hover:not(.active) { | |
| background: var(--bg-glass-hover); | |
| color: var(--text-primary); | |
| } | |
| /* === CHAT AREA === */ | |
| .chat-area { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| scroll-behavior: smooth; | |
| } | |
| .chat-area::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat-area::-webkit-scrollbar-thumb { | |
| background: var(--border-glass); | |
| border-radius: 4px; | |
| } | |
| .message { | |
| max-width: 800px; | |
| margin: 0 auto 16px; | |
| animation: fadeInUp 0.3s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message-bubble { | |
| padding: 16px 20px; | |
| border-radius: var(--radius-lg); | |
| background: var(--bg-glass); | |
| border: 1px solid var(--border-glass); | |
| backdrop-filter: blur(10px); | |
| line-height: 1.6; | |
| font-size: 14px; | |
| } | |
| .message.user .message-bubble { | |
| background: var(--accent-primary); | |
| color: white; | |
| border-color: transparent; | |
| border-bottom-right-radius: 4px; | |
| margin-left: auto; | |
| max-width: 70%; | |
| } | |
| .message.assistant .message-bubble { | |
| background: var(--bg-glass); | |
| border-bottom-left-radius: 4px; | |
| } | |
| .message.system .message-bubble { | |
| background: rgba(245, 158, 11, 0.1); | |
| border-color: rgba(245, 158, 11, 0.2); | |
| font-size: 13px; | |
| text-align: center; | |
| } | |
| .message-avatar { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| margin-bottom: 6px; | |
| } | |
| .message.assistant .message-avatar { | |
| background: var(--accent-gradient); | |
| color: white; | |
| } | |
| .message-meta { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| margin-top: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* === THINKING ANIMATION === */ | |
| .thinking-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px 20px; | |
| background: var(--bg-glass); | |
| border: 1px solid var(--border-glass); | |
| border-radius: var(--radius-lg); | |
| max-width: 800px; | |
| margin: 0 auto 16px; | |
| } | |
| .thinking-dots { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .thinking-dots span { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--accent-primary); | |
| animation: thinking 1.4s infinite ease-in-out; | |
| } | |
| .thinking-dots span:nth-child(1) { animation-delay: 0s; } | |
| .thinking-dots span:nth-child(2) { animation-delay: 0.2s; } | |
| .thinking-dots span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes thinking { | |
| 0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; } | |
| 40% { transform: scale(1); opacity: 1; } | |
| } | |
| .thinking-text { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| /* === INPUT AREA === */ | |
| .input-area { | |
| padding: 16px 20px 20px; | |
| border-top: 1px solid var(--border-glass); | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(var(--blur-amount)); | |
| } | |
| .input-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| display: flex; | |
| gap: 8px; | |
| align-items: flex-end; | |
| } | |
| .input-wrapper { | |
| flex: 1; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-glass); | |
| border-radius: var(--radius-lg); | |
| padding: 12px 16px; | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| transition: border-color var(--transition-fast); | |
| } | |
| .input-wrapper:focus-within { | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| } | |
| .input-wrapper textarea { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| font-family: inherit; | |
| resize: none; | |
| outline: none; | |
| line-height: 1.5; | |
| max-height: 150px; | |
| min-height: 20px; | |
| } | |
| .input-wrapper textarea::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .input-actions { | |
| display: flex; | |
| gap: 4px; | |
| align-items: center; | |
| } | |
| .input-action-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 4px 6px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| transition: all var(--transition-fast); | |
| } | |
| .input-action-btn:hover { | |
| background: var(--bg-glass-hover); | |
| color: var(--text-primary); | |
| } | |
| .send-btn { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: var(--radius-md); | |
| background: var(--accent-gradient); | |
| border: none; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .send-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| .send-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* === WELCOME SCREEN === */ | |
| .welcome-screen { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| text-align: center; | |
| padding: 40px 20px; | |
| } | |
| .welcome-logo { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: var(--radius-xl); | |
| background: var(--accent-gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: 24px; | |
| box-shadow: 0 0 60px var(--accent-glow); | |
| animation: pulse-glow 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 60px var(--accent-glow); } | |
| 50% { box-shadow: 0 0 80px rgba(99, 102, 241, 0.3); } | |
| } | |
| .welcome-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .welcome-subtitle { | |
| font-size: 15px; | |
| color: var(--text-secondary); | |
| margin-bottom: 40px; | |
| max-width: 500px; | |
| } | |
| .quick-actions { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| max-width: 600px; | |
| width: 100%; | |
| } | |
| .quick-action { | |
| padding: 16px; | |
| background: var(--bg-glass); | |
| border: 1px solid var(--border-glass); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| text-align: left; | |
| } | |
| .quick-action:hover { | |
| background: var(--bg-glass-hover); | |
| border-color: var(--border-accent); | |
| transform: translateY(-2px); | |
| } | |
| .quick-action-icon { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| } | |
| .quick-action-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .quick-action-desc { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* === SETTINGS PANEL === */ | |
| .settings-panel { | |
| position: fixed; | |
| top: 0; | |
| right: -400px; | |
| width: 400px; | |
| height: 100vh; | |
| background: var(--bg-secondary); | |
| border-left: 1px solid var(--border-glass); | |
| backdrop-filter: blur(var(--blur-amount)); | |
| transition: right var(--transition-normal); | |
| z-index: 200; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .settings-panel.open { | |
| right: 0; | |
| } | |
| .settings-header { | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-glass); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .settings-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .settings-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 20px; | |
| cursor: pointer; | |
| } | |
| .settings-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| } | |
| .setting-group { | |
| margin-bottom: 24px; | |
| } | |
| .setting-group-title { | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-muted); | |
| margin-bottom: 12px; | |
| } | |
| .setting-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--border-glass); | |
| } | |
| .setting-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .setting-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| select, input[type="range"], input[type="text"] { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-glass); | |
| color: var(--text-primary); | |
| padding: 6px 10px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| outline: none; | |
| } | |
| select:focus, input:focus { | |
| border-color: var(--accent-primary); | |
| } | |
| .toggle { | |
| width: 40px; | |
| height: 22px; | |
| border-radius: 11px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-glass); | |
| position: relative; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .toggle.active { | |
| background: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| } | |
| .toggle::after { | |
| content: ''; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: white; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| transition: transform var(--transition-fast); | |
| } | |
| .toggle.active::after { | |
| transform: translateX(18px); | |
| } | |
| /* === RESPONSIVE === */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| height: 100vh; | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| .menu-btn { | |
| display: flex; | |
| } | |
| .quick-actions { | |
| grid-template-columns: 1fr; | |
| } | |
| .settings-panel { | |
| width: 100%; | |
| right: -100%; | |
| } | |
| .message.user .message-bubble { | |
| max-width: 90%; | |
| } | |
| } | |
| /* === SCROLLBAR === */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-glass); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| /* === CODE BLOCKS === */ | |
| pre { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-glass); | |
| border-radius: var(--radius-sm); | |
| padding: 12px; | |
| overflow-x: auto; | |
| margin: 8px 0; | |
| font-size: 13px; | |
| } | |
| code { | |
| font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| } | |
| .inline-code { | |
| background: var(--bg-tertiary); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| } | |
| /* === PROGRESS BAR === */ | |
| .progress-bar { | |
| width: 100%; | |
| height: 4px; | |
| background: var(--bg-tertiary); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| margin: 8px 0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--accent-gradient); | |
| border-radius: 2px; | |
| transition: width var(--transition-normal); | |
| } | |
| /* === FILE UPLOAD === */ | |
| .file-upload-zone { | |
| border: 2px dashed var(--border-glass); | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .file-upload-zone:hover, | |
| .file-upload-zone.dragover { | |
| border-color: var(--accent-primary); | |
| background: var(--accent-glow); | |
| } | |
| /* === OVERLAY === */ | |
| .overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 99; | |
| } | |
| .overlay.active { | |
| display: block; | |
| } | |