| |
| |
| |
| |
|
|
| |
| :root { |
| --bg: #07070E; |
| --bg2: #0C0C1A; |
| --bg3: #12122A; |
| --glass: rgba(10, 10, 24, 0.82); |
| --s: rgba(255,255,255,0.045); |
| --s2: rgba(255,255,255,0.08); |
| --s3: rgba(255,255,255,0.12); |
| --b: rgba(255,255,255,0.07); |
| --b2: rgba(255,255,255,0.13); |
| --b3: rgba(255,255,255,0.20); |
| --t: #EEEEFF; |
| --t2: rgba(238,238,255,0.60); |
| --t3: rgba(238,238,255,0.34); |
| --t4: rgba(238,238,255,0.18); |
|
|
| --vi: #8B5CF6; |
| --vi2: #A78BFA; |
| --cy: #06B6D4; |
| --cy2: #22D3EE; |
| --pk: #EC4899; |
| --am: #F59E0B; |
| --em: #111111; |
| --rd: #F43F5E; |
|
|
| --gv: rgba(139,92,246,0.22); |
| --gc: rgba(6,182,212,0.18); |
| --gp: rgba(236,72,153,0.14); |
|
|
| --grad: linear-gradient(135deg,var(--vi) 0%,var(--cy) 100%); |
| --gradt: linear-gradient(135deg,#C4B5FD 0%,#67E8F9 100%); |
|
|
| --sh: 0 8px 32px rgba(0,0,0,0.55); |
| --sh2: 0 20px 64px rgba(0,0,0,0.72); |
| --shg: 0 0 48px var(--gv); |
|
|
| --sw: 280px; |
| --sidebar-collapsed-w: 64px; |
| --th: 60px; |
| --r: 16px; |
| --rs: 10px; |
| --rx: 6px; |
| --rp: 999px; |
|
|
| --ease: cubic-bezier(0.22,1,0.36,1); |
| --spring: cubic-bezier(0.34,1.56,0.64,1); |
| --tr: 0.22s; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| * { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| scroll-behavior: auto !important; |
| } |
| } |
|
|
| [data-theme="light"] { |
| --bg: #F2F2FF; |
| --bg2: #E8E8FF; |
| --bg3: #DDDDF8; |
| --glass: rgba(242,242,255,0.90); |
| --s: rgba(0,0,0,0.04); |
| --s2: rgba(0,0,0,0.07); |
| --s3: rgba(0,0,0,0.11); |
| --b: rgba(0,0,0,0.07); |
| --b2: rgba(0,0,0,0.12); |
| --b3: rgba(0,0,0,0.20); |
| --t: rgba(10,10,30,0.92); |
| --t2: rgba(10,10,30,0.58); |
| --t3: rgba(10,10,30,0.34); |
| --t4: rgba(10,10,30,0.18); |
| --vi: #7C3AED; |
| --vi2: #8B5CF6; |
| --cy: #0891B2; |
| --gv: rgba(124,58,237,0.18); |
| --gc: rgba(8,145,178,0.14); |
| --sh: 0 4px 20px rgba(0,0,0,0.12); |
| --sh2: 0 16px 48px rgba(0,0,0,0.18); |
| --shg: 0 0 36px rgba(124,58,237,0.14); |
| } |
|
|
| |
| *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } |
| html { height:100%; scroll-behavior:smooth; } |
| .hidden { display:none !important; } |
| [hidden] { display:none !important; } |
|
|
| body { |
| height:100%; |
| font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; |
| font-size: 14.5px; |
| line-height: 1.6; |
| color: var(--t); |
| background: var(--bg); |
| overflow: hidden; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| |
| .bg-mesh { |
| position: fixed; inset: -40%; z-index: 0; pointer-events: none; |
| background-image: |
| radial-gradient(circle at 10% 20%, rgba(139,92,246,0.18) 0%, transparent 40%), |
| radial-gradient(circle at 80% 30%, rgba(6,182,212,0.18) 0%, transparent 45%), |
| radial-gradient(circle at 40% 80%, rgba(236,72,153,0.14) 0%, transparent 45%), |
| radial-gradient(circle at 90% 90%, rgba(245,158,11,0.12) 0%, transparent 40%); |
| filter: blur(80px); |
| animation: bgRotate 35s linear infinite; |
| transform-origin: center; |
| opacity: 1; |
| } |
|
|
| [data-theme="light"] .bg-mesh { |
| background-image: |
| radial-gradient(circle at 10% 20%, rgba(124,58,237,0.16) 0%, transparent 50%), |
| radial-gradient(circle at 80% 30%, rgba(8,145,178,0.16) 0%, transparent 50%), |
| radial-gradient(circle at 40% 80%, rgba(219,39,119,0.12) 0%, transparent 50%); |
| filter: blur(90px); |
| } |
|
|
| @keyframes bgRotate { |
| 0% { transform: rotate(0deg) scale(1); } |
| 50% { transform: rotate(180deg) scale(1.1); } |
| 100% { transform: rotate(360deg) scale(1); } |
| } |
|
|
| |
| .premium-glass { |
| background: var(--glass); |
| backdrop-filter: blur(40px) saturate(2); |
| -webkit-backdrop-filter: blur(40px) saturate(2); |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.1); |
| } |
| [data-theme="light"] .premium-glass { |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.02); |
| } |
|
|
| |
| #root { height:100vh; position:relative; z-index:1; } |
|
|
| .app-shell { |
| display:flex; |
| height:100vh; |
| overflow:hidden; |
| } |
|
|
| |
| .sidebar { |
| width: var(--sw); |
| min-width: var(--sw); |
| height:100vh; |
| display:flex; flex-direction:column; |
| background: var(--glass); |
| backdrop-filter: blur(40px) saturate(2); |
| -webkit-backdrop-filter: blur(40px) saturate(2); |
| box-shadow: inset -1px 0 0 rgba(255,255,255,0.05), inset 1px 0 0 rgba(0,0,0,0.1); |
| border-right: 1px solid var(--b); |
| z-index: 30; |
| transition: transform 0.3s var(--ease), width 0.3s var(--ease); |
| overflow: hidden; |
| } |
| .sidebar.collapsed { |
| transform: translateX(-100%); |
| width: 0; |
| min-width: 0; |
| } |
|
|
| .sidebar-logo { |
| display:flex; align-items:center; gap:10px; |
| padding: 20px 18px 14px; |
| border-bottom: 1px solid var(--b); |
| flex-shrink:0; |
| } |
| .sidebar-logo-icon { |
| width:34px; height:34px; border-radius:10px; |
| background: var(--grad); |
| display:flex; align-items:center; justify-content:center; |
| font-size:16px; flex-shrink:0; |
| box-shadow: 0 0 20px var(--gv); |
| animation: logoPulse 3.5s ease-in-out infinite; |
| } |
| @keyframes logoPulse { |
| 0%,100% { box-shadow:0 0 20px var(--gv); } |
| 50% { box-shadow:0 0 36px var(--gv), 0 0 60px rgba(139,92,246,0.12); } |
| } |
| .sidebar-logo-text { |
| display:flex; flex-direction:column; |
| } |
| .sidebar-logo-name { |
| font-size:15px; font-weight:700; letter-spacing:-0.3px; |
| background: var(--gradt); |
| -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; |
| } |
| .sidebar-logo-version { |
| font-size:10px; color:var(--t3); letter-spacing:0.08em; text-transform:uppercase; font-weight:600; |
| } |
|
|
| .sidebar-top { |
| padding:14px 12px 8px; |
| flex-shrink:0; |
| } |
|
|
| .btn-new-chat { |
| width:100%; padding:10px 14px; |
| border-radius:var(--rs); border:1px dashed var(--b3); |
| background:var(--s); |
| color:var(--t2); font-size:13px; font-weight:600; |
| cursor:pointer; font-family:inherit; |
| display:flex; align-items:center; gap:8px; |
| transition: all 0.2s var(--ease); |
| } |
| .btn-new-chat:hover { |
| background:var(--gv); border-color:rgba(139,92,246,0.45); color:var(--vi2); |
| transform:translateY(-1px); box-shadow:0 4px 16px rgba(139,92,246,0.20); |
| } |
| .btn-new-chat svg { flex-shrink:0; } |
|
|
| .sidebar-search { |
| padding:10px 12px 6px; |
| flex-shrink:0; |
| } |
| .search-box { |
| width:100%; padding:8px 12px; |
| border-radius:var(--rs); border:1px solid var(--b); |
| background:var(--s); |
| color:var(--t); font-size:13px; font-family:inherit; |
| outline:none; |
| transition: all 0.2s var(--ease); |
| } |
| .search-box:focus { border-color:rgba(139,92,246,0.40); background:var(--s2); box-shadow:0 0 0 3px rgba(139,92,246,0.08); } |
| .search-box::placeholder { color:var(--t4); } |
|
|
| .sidebar-label { |
| padding:6px 14px 4px; |
| font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--t4); |
| } |
|
|
| .session-list { |
| list-style:none; |
| padding:0 8px; |
| overflow-y:auto; flex:1; min-height:0; |
| scrollbar-width:thin; scrollbar-color:var(--b) transparent; |
| } |
| .session-list::-webkit-scrollbar { width:3px; } |
| .session-list::-webkit-scrollbar-thumb { background:var(--b2); border-radius:4px; } |
|
|
| .session-item { |
| position:relative; |
| padding:9px 36px 9px 12px; |
| border-radius:var(--rs); border:1px solid transparent; |
| cursor:pointer; margin-bottom:3px; |
| transition: all 0.18s var(--ease); |
| animation: slideInLeft 280ms var(--ease) both; |
| } |
| @keyframes slideInLeft { |
| from { opacity:0; transform:translateX(-10px); } |
| to { opacity:1; transform:translateX(0); } |
| } |
| .session-item:hover { background:var(--s2); border-color:var(--b); } |
| .session-item.active { |
| background:var(--gv); border-color:rgba(139,92,246,0.35); |
| } |
| .session-item.active::before { |
| content:''; position:absolute; left:0; top:20%; height:60%; width:3px; |
| background:var(--grad); border-radius:0 3px 3px 0; |
| } |
| .session-title { |
| font-size:13px; font-weight:600; |
| overflow:hidden; text-overflow:ellipsis; white-space:nowrap; |
| color:var(--t); |
| } |
| .session-item.active .session-title { color:var(--vi2); } |
| .session-preview { |
| font-size:11.5px; color:var(--t3); |
| overflow:hidden; text-overflow:ellipsis; white-space:nowrap; |
| } |
| .session-delete { |
| position:absolute; right:6px; top:50%; transform:translateY(-50%); |
| width:24px; height:24px; border-radius:6px; border:none; background:transparent; |
| color:var(--t4); cursor:pointer; display:flex; align-items:center; justify-content:center; |
| opacity:0; transition: all 0.15s; |
| } |
| .session-item:hover .session-delete { opacity:1; } |
| .session-delete:hover { background:rgba(244,63,94,0.12); color:var(--rd); } |
|
|
| .sidebar-bottom { |
| padding:12px; border-top:1px solid var(--b); flex-shrink:0; |
| display:flex; flex-direction:column; gap:4px; |
| } |
| .sidebar-action { |
| display:flex; align-items:center; gap:10px; |
| padding:9px 12px; border-radius:var(--rs); border:none; background:transparent; |
| color:var(--t2); font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; |
| transition: all 0.18s var(--ease); width:100%; text-align:left; |
| } |
| .sidebar-action:hover { background:var(--s2); color:var(--t); } |
| .sidebar-action.danger:hover { background:rgba(244,63,94,0.08); color:var(--rd); } |
|
|
| |
| .main { |
| flex:1; min-width:0; |
| display:flex; flex-direction:column; |
| height:100vh; position:relative; |
| } |
|
|
| |
| .topbar { |
| height:var(--th); flex-shrink:0; |
| display:flex; align-items:center; justify-content:space-between; gap:12px; |
| padding:0 20px; |
| background: rgba(7,7,14,0.72); |
| backdrop-filter:blur(24px) saturate(2); |
| -webkit-backdrop-filter:blur(24px) saturate(2); |
| z-index:10; position:relative; |
| } |
| [data-theme="light"] .topbar { background:rgba(242,242,255,0.85); } |
|
|
| .topbar-left { display:flex; align-items:center; gap:10px; min-width:0; flex:1; } |
| .topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; } |
|
|
| .icon-btn { |
| width:36px; height:36px; |
| display:flex; align-items:center; justify-content:center; |
| border-radius:var(--rs); border:1px solid var(--b); background:var(--s); |
| color:var(--t2); cursor:pointer; |
| transition: all 0.18s var(--ease); |
| } |
| .icon-btn:hover { background:var(--s2); color:var(--t); border-color:var(--b2); } |
| .icon-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } |
|
|
| .session-title-display { |
| font-size:14px; font-weight:700; |
| overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-0.1px; |
| max-width:300px; |
| } |
|
|
| .avatar-btn { |
| width:36px; height:36px; border-radius:50%; |
| background:var(--grad); border:none; cursor:pointer; |
| display:flex; align-items:center; justify-content:center; |
| font-size:13px; font-weight:700; color:#fff; |
| box-shadow:0 0 0 2px var(--bg), 0 0 0 4px rgba(139,92,246,0.35); |
| transition: all 0.2s var(--ease); |
| position:relative; |
| } |
| .avatar-btn:hover { transform:scale(1.05); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px rgba(139,92,246,0.55); } |
| .avatar-online { position:absolute; bottom:1px; right:1px; width:9px; height:9px; border-radius:50%; background:#111; border:2px solid var(--bg); } |
|
|
| |
| .avatar-menu { position:relative; } |
| .avatar-dropdown { |
| position:absolute; right:0; top:calc(100% + 10px); |
| width:220px; |
| background:var(--glass); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); |
| border:1px solid var(--b2); border-radius:var(--r); |
| box-shadow:var(--sh2); overflow:hidden; z-index:100; |
| animation: dropIn 180ms var(--spring) both; |
| } |
| @keyframes dropIn { from { opacity:0; transform:translateY(-8px) scale(0.96); } to { opacity:1; transform:none; } } |
| .avd-user { padding:14px 14px 10px; border-bottom:1px solid var(--b); } |
| .avd-name { font-size:13px; font-weight:700; } |
| .avd-sub { font-size:11.5px; color:var(--t3); margin-top:1px; } |
| .avd-item { |
| display:flex; align-items:center; gap:9px; |
| padding:10px 14px; border:none; background:none; |
| color:var(--t2); font-size:13px; font-weight:500; font-family:inherit; |
| cursor:pointer; width:100%; text-align:left; |
| transition: all 0.15s; |
| } |
| .avd-item:hover { background:var(--s2); color:var(--t); } |
| .avd-item.danger:hover { background:rgba(244,63,94,0.08); color:var(--rd); } |
| .avd-item svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } |
| .avd-sep { height:1px; background:var(--b); margin:4px 0; } |
|
|
| |
| .theme-btn { |
| display:flex; align-items:center; gap:6px; |
| padding:7px 12px; border-radius:var(--rs); border:1px solid var(--b); background:var(--s); |
| color:var(--t2); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; |
| transition: all 0.18s var(--ease); |
| } |
| .theme-btn:hover { background:var(--s2); color:var(--t); border-color:var(--b2); } |
| .theme-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; } |
|
|
| |
| .chat-area { |
| flex:1; overflow-y:auto; min-height:0; |
| padding:28px 0 160px; |
| scrollbar-width:thin; scrollbar-color:var(--b) transparent; |
| } |
| .chat-area::-webkit-scrollbar { width:4px; } |
| .chat-area::-webkit-scrollbar-thumb { background:var(--b2); border-radius:4px; } |
|
|
| .chat-inner { |
| max-width:760px; |
| margin:0 auto; |
| padding:0 20px; |
| display:flex; flex-direction:column; gap:8px; |
| } |
|
|
| |
| .empty-state { |
| display:flex; flex-direction:column; align-items:center; justify-content:center; |
| flex:1; padding:60px 24px; |
| animation: fadeUp 500ms var(--ease) both; |
| } |
| @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } |
|
|
| .empty-logo { |
| width:80px; height:80px; border-radius:24px; |
| background:var(--grad); display:flex; align-items:center; justify-content:center; |
| font-size:36px; margin-bottom:24px; |
| box-shadow:0 0 50px var(--gv), 0 0 100px rgba(139,92,246,0.10); |
| animation:logoPulse 3.5s ease-in-out infinite; |
| } |
| .empty-title { |
| font-size:26px; font-weight:700; letter-spacing:-0.5px; text-align:center; |
| background:var(--gradt); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; |
| margin-bottom:10px; |
| } |
| .empty-sub { |
| font-size:14.5px; color:var(--t2); text-align:center; max-width:400px; line-height:1.7; margin-bottom:32px; |
| } |
| .suggestion-grid { |
| display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:560px; |
| } |
| .suggestion-card { |
| padding:14px 16px; border-radius:var(--rs); |
| border:1px solid var(--b2); background:var(--s); |
| cursor:pointer; text-align:left; font-family:inherit; |
| color:var(--t2); font-size:13px; line-height:1.5; |
| transition: all 0.2s var(--ease); |
| } |
| .suggestion-card:hover { |
| background:var(--gv); border-color:rgba(139,92,246,0.40); color:var(--vi2); |
| transform:translateY(-2px); box-shadow:0 6px 20px rgba(139,92,246,0.16); |
| } |
| .suggestion-card strong { display:block; color:var(--t); font-weight:600; margin-bottom:3px; } |
|
|
| |
| .msg-row { |
| display:flex; gap:12px; |
| padding:8px 0; |
| animation: msgIn 360ms var(--spring) both; |
| } |
| @keyframes msgIn { from{opacity:0;transform:translateY(14px) scale(0.98)} to{opacity:1;transform:none} } |
|
|
| .msg-row.user { justify-content:flex-end; } |
|
|
| .msg-indicator { |
| width:32px; height:32px; border-radius:50%; flex-shrink:0; margin-top:4px; |
| display:flex; align-items:center; justify-content:center; |
| font-size:13px; font-weight:700; |
| } |
| .msg-indicator.ai { |
| background:var(--grad); |
| box-shadow:0 0 16px rgba(139,92,246,0.40); |
| animation:logoPulse 3.5s ease-in-out infinite; |
| color:#fff; |
| } |
| .msg-indicator.user { |
| background:var(--s2); border:1px solid var(--b2); color:var(--t2); |
| } |
|
|
| |
| .msg-card { |
| background:var(--s); |
| border:1px solid var(--b); border-radius:4px 16px 16px 16px; |
| padding:14px 18px; max-width:85%; |
| box-shadow:0 2px 12px rgba(0,0,0,0.18); |
| transition: box-shadow 0.2s; |
| } |
| .msg-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.28); } |
|
|
| |
| .user-bubble { |
| background:linear-gradient(135deg,rgba(139,92,246,0.18),rgba(6,182,212,0.12)); |
| border:1px solid rgba(139,92,246,0.28); |
| border-radius:16px 4px 16px 16px; |
| padding:12px 18px; max-width:85%; |
| color:var(--t); |
| box-shadow:0 2px 14px rgba(139,92,246,0.12); |
| } |
|
|
| |
| .msg-atts { |
| display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; |
| } |
| .msg-att-chip { |
| display:inline-flex; align-items:center; gap:5px; |
| padding:4px 10px; border-radius:var(--rp); |
| background:rgba(139,92,246,0.15); border:1px solid rgba(139,92,246,0.30); |
| font-size:11.5px; color:var(--vi2); |
| } |
|
|
| |
| .msg-badge { |
| display:inline-flex; align-items:center; gap:5px; |
| margin-top:10px; padding:3px 10px; |
| border-radius:var(--rp); background:var(--s2); border:1px solid var(--b2); |
| font-size:11px; color:var(--t3); font-weight:500; |
| } |
|
|
| |
| .msg-markdown { font-size:14px; line-height:1.72; color:var(--t); } |
| .msg-markdown p { margin:0 0 10px; } |
| .msg-markdown p:last-child { margin-bottom:0; } |
| .msg-markdown ul, .msg-markdown ol { padding-left:22px; margin:8px 0 10px; } |
| .msg-markdown li { margin:4px 0; } |
| .msg-markdown h1,.msg-markdown h2,.msg-markdown h3 { font-weight:700; margin:16px 0 8px; } |
| .msg-markdown h1 { font-size:1.24em; } |
| .msg-markdown h2 { font-size:1.10em; } |
| .msg-markdown h3 { font-size:1.00em; } |
| .msg-markdown strong { font-weight:700; } |
| .msg-markdown em { color:var(--t2); font-style:italic; } |
| .msg-markdown a { color:var(--cy); text-decoration:underline; text-underline-offset:2px; } |
| .msg-markdown blockquote { |
| border-left:3px solid rgba(139,92,246,0.50); padding-left:14px; |
| margin:10px 0; color:var(--t2); font-style:italic; |
| } |
| .msg-markdown hr { border:none; border-top:1px solid var(--b); margin:14px 0; } |
| .msg-markdown table { border-collapse:collapse; width:100%; margin:10px 0; font-size:13px; } |
| .msg-markdown th,.msg-markdown td { border:1px solid var(--b); padding:8px 12px; } |
| .msg-markdown th { background:var(--s2); font-weight:700; } |
| .msg-markdown code { |
| background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.22); |
| padding:1px 6px; border-radius:5px; |
| font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; color:var(--vi2); |
| } |
|
|
| |
| .code-wrap { |
| position:relative; margin:12px 0; |
| border-radius:12px; overflow:hidden; |
| border:1px solid var(--b); background:rgba(0,0,0,0.40); |
| box-shadow:0 4px 20px rgba(0,0,0,0.30); |
| } |
| .code-header { |
| display:flex; align-items:center; justify-content:space-between; |
| padding:6px 14px; background:rgba(0,0,0,0.35); border-bottom:1px solid var(--b); |
| } |
| .code-lang { font-size:10.5px; font-weight:700; color:var(--t3); letter-spacing:0.08em; text-transform:uppercase; } |
| .copy-btn { |
| display:inline-flex; align-items:center; gap:5px; |
| padding:3px 10px; border-radius:var(--rx); border:1px solid var(--b); |
| background:var(--s2); color:var(--t3); font-size:11.5px; font-weight:600; |
| cursor:pointer; font-family:inherit; |
| transition: all 0.15s; |
| } |
| .copy-btn:hover { background:var(--gv); border-color:rgba(139,92,246,0.40); color:var(--vi2); } |
| .copy-btn.copied { background:rgba(0,0,0,0.18); border-color:rgba(255,255,255,0.18); color:var(--t); } |
| .hljs-pre { margin:0; padding:16px; overflow-x:auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; line-height:1.65; } |
| .msg-markdown .hljs-pre { border-radius:0; } |
|
|
| |
| .typing-cursor { |
| display:inline-block; width:2px; height:1.1em; |
| background:var(--vi); margin-left:2px; vertical-align:text-bottom; |
| animation:blink 0.8s ease-in-out infinite; |
| } |
| @keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} } |
|
|
| |
| .composer-wrap { |
| position: fixed; |
| bottom: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: calc(100% - 40px); |
| max-width: 800px; |
| z-index: 50; |
| |
| } |
|
|
| |
| .app-shell:has(.sidebar:not(.collapsed)) .composer-wrap { |
| left: calc(50% + var(--sw) / 2); |
| } |
|
|
| .composer { |
| width: 100%; |
| position: relative; |
| background: var(--glass); |
| backdrop-filter: blur(48px) saturate(2); |
| -webkit-backdrop-filter: blur(48px) saturate(2); |
| border-radius: 20px; |
| border: 1px solid var(--b2); |
| box-shadow: |
| 0 8px 32px rgba(0,0,0,0.32), |
| 0 2px 8px rgba(0,0,0,0.18), |
| inset 0 1px 0 rgba(255,255,255,0.06); |
| transition: box-shadow 0.22s, border-color 0.22s, transform 0.18s; |
| } |
| .composer:focus-within { |
| transform: translateY(-2px); |
| box-shadow: |
| 0 12px 40px rgba(0,0,0,0.38), |
| 0 3px 10px rgba(0,0,0,0.20), |
| inset 0 1px 0 rgba(255,255,255,0.08); |
| border-color: rgba(255,255,255,0.14); |
| } |
|
|
| |
| .composer-row { |
| display:flex; align-items:flex-end; gap:10px; |
| padding:14px 16px 6px; |
| } |
|
|
| .msg-input { |
| flex:1; border:none; background:transparent; color:var(--t); |
| font-family:inherit; font-size:15px; resize:none; outline:none; |
| line-height:1.6; min-height:36px; max-height:200px; |
| } |
| .msg-input::placeholder { color:var(--t4); } |
|
|
| |
| .composer-toolbar { |
| display:flex; align-items:center; justify-content:space-between; |
| padding:6px 10px 10px; |
| gap:6px; |
| } |
| .composer-toolbar-left { display:flex; align-items:center; gap:6px; } |
| .composer-toolbar-right { display:flex; align-items:center; gap:6px; flex-shrink:0; } |
|
|
| |
| .composer-icon-btn { |
| display:flex; align-items:center; justify-content:center; |
| width:32px; height:32px; border-radius:var(--rs); border:none; background:transparent; |
| color:var(--t3); cursor:pointer; |
| transition: all 0.18s var(--ease); |
| } |
| .composer-icon-btn:hover { background:var(--s2); color:var(--t2); } |
| .composer-icon-btn svg { |
| width:16px; height:16px; stroke:currentColor; fill:none; |
| stroke-width:2; stroke-linecap:round; stroke-linejoin:round; |
| } |
|
|
| |
| .composer-pill-btn { |
| display:inline-flex; align-items:center; gap:5px; |
| padding:5px 11px; border-radius:var(--rp); |
| border:1px solid var(--b); background:transparent; |
| color:var(--t2); font-size:12.5px; font-weight:500; |
| cursor:pointer; font-family:inherit; |
| transition: all 0.18s var(--ease); |
| } |
| .composer-pill-btn:hover { background:var(--s2); color:var(--t); border-color:var(--b2); } |
| .composer-pill-btn.active { background:var(--gv); border-color:rgba(139,92,246,0.40); color:var(--vi2); } |
| .composer-pill-btn .badge { |
| background:var(--vi); color:#fff; font-size:9px; font-weight:700; |
| padding:1px 5px; border-radius:var(--rp); margin-left:2px; |
| } |
| .composer-sep { opacity:0.35; margin:0 1px; } |
| .chevron-icon { |
| width:12px; height:12px; stroke:currentColor; fill:none; |
| stroke-width:2.5; stroke-linecap:round; |
| } |
|
|
| |
| .send-btn { |
| width:34px; height:34px; border-radius:50%; border:none; |
| background:#111; color:#fff; cursor:pointer; flex-shrink:0; |
| display:flex; align-items:center; justify-content:center; |
| transition: all 0.2s var(--spring); |
| } |
| [data-theme="light"] .send-btn { background:#1a1a1a; } |
| .send-btn:hover:not(:disabled) { background:#000; transform:scale(1.08); } |
| .send-btn:active:not(:disabled) { transform:scale(0.94); } |
| .send-btn:disabled { background:var(--s3); color:var(--t4); cursor:not-allowed; } |
| .send-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; } |
|
|
| |
| .attachments-bar { |
| display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px 0; |
| } |
| .att-chip { |
| display:inline-flex; align-items:center; gap:6px; |
| padding:4px 10px; border-radius:var(--rp); |
| background:var(--gv); border:1px solid rgba(139,92,246,0.35); |
| font-size:12px; color:var(--vi2); |
| } |
| .att-remove { |
| background:none; border:none; color:var(--vi2); cursor:pointer; padding:0; line-height:1; font-size:14px; |
| transition:color 0.15s; |
| } |
| .att-remove:hover { color:var(--rd); } |
|
|
| .composer-hint { |
| text-align:center; font-size:11.5px; color:var(--t4); padding:6px 0 0; |
| } |
| .composer-hint kbd { |
| background:var(--s2); border:1px solid var(--b2); padding:1px 5px; border-radius:4px; font-size:10.5px; |
| } |
|
|
| |
| .status-bar { |
| max-width:760px; margin:0 auto 6px; |
| display:flex; align-items:center; gap:8px; |
| padding:0 4px; |
| font-size:12px; color:var(--t3); |
| animation: fadeUp 200ms var(--ease) both; |
| } |
| .status-pulse { |
| width:7px; height:7px; border-radius:50%; background:var(--vi); |
| box-shadow:0 0 8px var(--vi); |
| animation:blink 0.9s ease-in-out infinite; |
| } |
|
|
| |
| .modal-overlay { |
| position:fixed; inset:0; z-index:200; |
| background:rgba(7,7,14,0.72); |
| backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); |
| display:flex; align-items:center; justify-content:center; |
| padding:20px; |
| animation:overlayIn 200ms ease both; |
| } |
| @keyframes overlayIn { from{opacity:0} to{opacity:1} } |
| .modal-card { |
| background:var(--glass); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); |
| border:1px solid var(--b2); border-radius:22px; |
| box-shadow:var(--sh2); |
| width:100%; max-width:440px; |
| animation:modalIn 280ms var(--spring) both; |
| overflow:hidden; |
| } |
| @keyframes modalIn { from{opacity:0;transform:scale(0.94) translateY(16px)} to{opacity:1;transform:none} } |
| .modal-header { |
| display:flex; align-items:center; justify-content:space-between; |
| padding:20px 22px 16px; border-bottom:1px solid var(--b); |
| } |
| .modal-title { font-size:16px; font-weight:700; } |
| .modal-close { |
| width:28px; height:28px; border-radius:var(--rx); border:none; background:var(--s); |
| color:var(--t3); cursor:pointer; display:flex; align-items:center; justify-content:center; |
| transition:all 0.15s; |
| } |
| .modal-close:hover { background:var(--s2); color:var(--t); } |
| .modal-close svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; } |
| .modal-body { padding:20px 22px; } |
| .modal-footer { padding:0 22px 20px; display:flex; justify-content:flex-end; gap:10px; } |
|
|
| .field-label { display:block; font-size:12.5px; font-weight:600; color:var(--t2); margin-bottom:6px; } |
| .field-input { |
| width:100%; padding:10px 14px; |
| border-radius:var(--rs); border:1px solid var(--b2); background:var(--s); |
| color:var(--t); font-size:13.5px; font-family:inherit; outline:none; |
| transition:all 0.2s var(--ease); margin-bottom:14px; |
| } |
| .field-input:focus { border-color:rgba(139,92,246,0.45); background:var(--s2); box-shadow:0 0 0 3px rgba(139,92,246,0.08); } |
| .field-input::placeholder { color:var(--t4); } |
|
|
| .field-error { font-size:12px; color:var(--rd); margin-top:-10px; margin-bottom:12px; min-height:16px; } |
|
|
| |
| .btn { |
| display:inline-flex; align-items:center; gap:7px; |
| padding:10px 20px; border-radius:var(--rs); border:1px solid var(--b2); |
| background:var(--s2); color:var(--t2); font-size:13.5px; font-weight:600; |
| cursor:pointer; font-family:inherit; |
| transition: all 0.2s var(--ease); |
| } |
| .btn:hover { background:var(--s3); color:var(--t); } |
| .btn-primary { |
| background:var(--grad); border-color:transparent; color:#fff; |
| box-shadow:0 4px 16px rgba(139,92,246,0.30); |
| } |
| .btn-primary:hover { box-shadow:0 6px 24px rgba(139,92,246,0.45); transform:translateY(-1px); } |
| .btn-primary:active { transform:scale(0.97); } |
| .btn-primary:disabled { opacity:0.45; cursor:not-allowed; transform:none; } |
| .btn-google { |
| background:var(--s); border-color:var(--b2); color:var(--t); |
| display:flex; align-items:center; justify-content:center; gap:10px; width:100%; |
| } |
| .btn-google:hover { background:var(--s2); } |
| .btn-danger { background:rgba(244,63,94,0.10); border-color:rgba(244,63,94,0.30); color:var(--rd); } |
| .btn-danger:hover { background:rgba(244,63,94,0.18); } |
| .btn-link { background:none; border:none; color:var(--vi2); font-size:13px; cursor:pointer; font-family:inherit; font-weight:500; } |
| .btn-link:hover { color:var(--vi); text-decoration:underline; } |
|
|
| .divider-or { |
| display:flex; align-items:center; gap:12px; margin:14px 0; |
| color:var(--t4); font-size:12px; |
| } |
| .divider-or::before,.divider-or::after { content:''; flex:1; height:1px; background:var(--b2); } |
|
|
| |
| .auth-tabs { |
| display:flex; border-radius:var(--rs); background:var(--s); border:1px solid var(--b); |
| padding:3px; gap:3px; margin-bottom:20px; |
| } |
| .auth-tab { |
| flex:1; padding:8px; border-radius:var(--rx); border:none; background:transparent; |
| color:var(--t3); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; |
| transition:all 0.2s var(--ease); |
| } |
| .auth-tab.active { background:var(--s2); color:var(--t); box-shadow:0 2px 8px rgba(0,0,0,0.20); } |
|
|
| |
| .model-picker-card { max-width:580px; } |
| .picker-layout { display:flex; gap:0; height:400px; } |
| .picker-providers { |
| width:160px; min-width:160px; padding:12px 8px; |
| border-right:1px solid var(--b); overflow-y:auto; |
| } |
| .picker-prov-btn { |
| width:100%; display:flex; align-items:center; gap:8px; |
| padding:9px 10px; border-radius:var(--rs); border:none; background:transparent; |
| color:var(--t2); font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit; |
| transition:all 0.18s; text-align:left; |
| } |
| .picker-prov-btn:hover { background:var(--s2); color:var(--t); } |
| .picker-prov-btn.active { background:var(--gv); color:var(--vi2); } |
| .picker-prov-icon { font-size:16px; flex-shrink:0; } |
| .picker-models { flex:1; padding:12px; overflow-y:auto; } |
| .picker-model-item { |
| display:flex; align-items:flex-start; gap:10px; |
| padding:10px 12px; border-radius:var(--rs); border:1px solid transparent; |
| cursor:pointer; margin-bottom:5px; transition:all 0.15s; |
| } |
| .picker-model-item:hover { background:var(--s2); border-color:var(--b); } |
| .picker-model-item.active { background:var(--gv); border-color:rgba(139,92,246,0.35); } |
| .picker-model-badge { font-size:20px; flex-shrink:0; margin-top:1px; } |
| .picker-model-name { font-size:13px; font-weight:600; color:var(--t); } |
| .picker-model-active .picker-model-name { color:var(--vi2); } |
| .picker-traits { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; } |
| .trait-pill { |
| font-size:10px; font-weight:700; padding:2px 7px; border-radius:var(--rp); |
| background:var(--s2); border:1px solid var(--b2); color:var(--t3); |
| } |
| .trait-pill.free { background:rgba(0,0,0,0.25); border-color:rgba(255,255,255,0.14); color:var(--t2); } |
| .trait-pill.fast { background:rgba(6,182,212,0.10); border-color:rgba(6,182,212,0.25); color:var(--cy2); } |
| .trait-pill.powerful { background:rgba(139,92,246,0.10); border-color:rgba(139,92,246,0.28); color:var(--vi2); } |
| .trait-pill.latest { background:rgba(245,158,11,0.10); border-color:rgba(245,158,11,0.28); color:var(--am); } |
| .trait-pill.reasoning { background:rgba(236,72,153,0.10); border-color:rgba(236,72,153,0.28); color:var(--pk); } |
|
|
| |
| .star-row { display:flex; gap:8px; margin-bottom:6px; } |
| .star-btn { |
| background:none; border:none; cursor:pointer; font-size:30px; |
| color:var(--b3); padding:0; line-height:1; |
| transition:all 0.15s var(--spring); |
| } |
| .star-btn.lit,.star-btn.hover { color:var(--am); transform:scale(1.15); filter:drop-shadow(0 0 6px rgba(245,158,11,0.55)); } |
| .star-hint { font-size:12px; color:var(--t3); height:16px; font-weight:500; } |
|
|
| .fcat-row { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 16px; } |
| .fcat-btn { |
| padding:6px 14px; border-radius:var(--rp); border:1px solid var(--b2); |
| background:var(--s); color:var(--t2); font-size:12.5px; font-weight:600; |
| cursor:pointer; font-family:inherit; transition:all 0.15s; |
| } |
| .fcat-btn:hover { background:var(--s2); color:var(--t); } |
| .fcat-btn.active { background:var(--gv); border-color:rgba(139,92,246,0.45); color:var(--vi2); } |
| .field-textarea { |
| width:100%; padding:10px 14px; border-radius:var(--rs); |
| border:1px solid var(--b2); background:var(--s); color:var(--t); |
| font-size:13.5px; font-family:inherit; resize:vertical; min-height:100px; outline:none; |
| transition:all 0.2s var(--ease); |
| } |
| .field-textarea:focus { border-color:rgba(139,92,246,0.45); background:var(--s2); box-shadow:0 0 0 3px rgba(139,92,246,0.08); } |
| .field-textarea::placeholder { color:var(--t4); } |
| .char-count { text-align:right; font-size:11px; color:var(--t4); margin-top:4px; } |
|
|
| .feedback-success { |
| display:flex; flex-direction:column; align-items:center; |
| padding:36px 24px 28px; gap:12px; text-align:center; |
| animation:modalIn 360ms var(--spring) both; |
| } |
| .feedback-success-icon { font-size:54px; line-height:1; animation:bounceIn 500ms var(--spring) both; } |
| @keyframes bounceIn { |
| 0% { transform:scale(0); opacity:0; } |
| 70% { transform:scale(1.2); opacity:1; } |
| 100% { transform:scale(1); } |
| } |
| .feedback-success-title { font-size:20px; font-weight:700; background:var(--gradt); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } |
| .feedback-success-sub { font-size:13.5px; color:var(--t2); max-width:280px; line-height:1.6; } |
|
|
| |
| .settings-row { |
| display:flex; align-items:center; justify-content:space-between; |
| padding:14px 0; border-bottom:1px solid var(--b); |
| } |
| .settings-row:last-child { border-bottom:none; } |
| .settings-row-label { font-size:13.5px; font-weight:600; } |
| .settings-row-sub { font-size:12px; color:var(--t3); margin-top:2px; } |
| .seg-ctrl { |
| display:flex; border-radius:var(--rs); background:var(--s); border:1px solid var(--b); padding:3px; gap:3px; |
| } |
| .seg-btn { |
| padding:6px 12px; border-radius:var(--rx); border:none; background:transparent; |
| color:var(--t3); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; |
| transition:all 0.18s; |
| } |
| .seg-btn.active { background:var(--s2); color:var(--t); box-shadow:0 2px 6px rgba(0,0,0,0.20); } |
|
|
| |
| @media (max-width: 700px) { |
| :root { --sw: 100vw; } |
| .sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform 0.3s var(--ease); } |
| .sidebar.open { transform:translateX(0); } |
| .suggestion-grid { grid-template-columns:1fr; } |
| .chat-inner { padding:0 12px; } |
| .composer-wrap { padding:10px 12px 14px; } |
| .picker-layout { flex-direction:column; } |
| .picker-providers { width:100%; min-width:0; display:flex; flex-wrap:wrap; gap:4px; border-right:none; border-bottom:1px solid var(--b); } |
| .picker-prov-btn { width:auto; } |
| } |
|
|
| |
| .flex { display:flex; } |
| .items-center { align-items:center; } |
| .gap-2 { gap:8px; } |
| .mt-1 { margin-top:4px; } |
| .mt-2 { margin-top:8px; } |
| .w-full { width:100%; } |
| .text-sm { font-size:12.5px; } |
| .text-muted { color:var(--t3); } |
| .font-bold { font-weight:700; } |
|
|
| |
| |
| @keyframes glowPulse { |
| 0%, 100% { opacity: 0.3; } |
| 50% { opacity: 0.6; } |
| } |
| .composer-glow { |
| position: absolute; inset: -2px; border-radius: 20px; |
| background: linear-gradient(135deg, var(--vi), var(--cy), var(--pk)); |
| opacity: 0; transition: opacity 0.3s; |
| z-index: -1; pointer-events: none; |
| } |
| .composer:focus-within .composer-glow { animation: glowPulse 3s ease-in-out infinite; } |
|
|
| |
| .scroll-fab { |
| position: fixed; bottom: 140px; right: 28px; |
| width: 40px; height: 40px; border-radius: 50%; |
| background: var(--glass); border: 1px solid var(--b2); |
| display: flex; align-items: center; justify-content: center; |
| color: var(--t2); cursor: pointer; |
| backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); |
| box-shadow: var(--sh); z-index: 60; |
| transition: all 0.2s var(--spring); |
| opacity: 0; pointer-events: none; transform: translateY(10px) scale(0.9); |
| } |
| .scroll-fab.visible { opacity: 1; pointer-events: auto; transform: none; } |
| .scroll-fab:hover { background: var(--s2); color: var(--t); transform: translateY(-3px) scale(1.05); } |
|
|
| |
| .msg-actions { |
| position: absolute; top: -14px; right: 12px; |
| display: flex; gap: 4px; padding: 4px; |
| background: var(--glass); border: 1px solid var(--b2); border-radius: 8px; |
| opacity: 0; transition: all 0.2s; pointer-events: none; |
| box-shadow: var(--sh); |
| } |
| .msg-card { position: relative; } |
| .msg-card:hover .msg-actions { opacity: 1; pointer-events: auto; } |
| .msg-action-btn { |
| background: none; border: none; padding: 4px; |
| color: var(--t3); border-radius: 4px; cursor: pointer; |
| display: flex; align-items: center; justify-content: center; |
| } |
| .msg-action-btn:hover { background: var(--s2); color: var(--t); } |
|
|
| |
| @media (max-width: 768px) { |
| .composer-wrap { |
| bottom: 12px; |
| width: calc(100% - 24px); |
| } |
|
|
| |
| .app-shell:has(.sidebar:not(.collapsed)) .composer-wrap { |
| left: 50%; |
| } |
|
|
| .chat-area { |
| padding-bottom: 140px; |
| } |
|
|
| .scroll-fab { |
| right: 14px; |
| bottom: 130px; |
| } |
|
|
| .suggestion-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
|
|
| |
| .typing-wave { display: flex; gap: 4px; align-items: center; height: 20px; } |
| .typing-dot { |
| width: 6px; height: 6px; border-radius: 50%; background: var(--vi); |
| animation: typingWave 1.4s infinite ease-in-out both; |
| } |
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } |
| @keyframes typingWave { |
| 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } |
| } |
|
|
| |
| .suggestion-card { will-change: transform, opacity; } |
|
|
|
|
