:root { --bg:#0e1017; --side:#12151f; --panel:#1a1f2c; --line:#2a3040; --text:#f5f7fb; --muted:#99a2b4; --accent:#8b73ff; --accent-soft:#3b3269; --user:#e8e4ff; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--text); background:var(--bg); font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, textarea { font:inherit; } button { border:0; cursor:pointer; } .app-shell { min-height:100vh; display:flex; }
.sidebar { width:272px; flex:none; padding:15px 11px; background:var(--side); border-right:1px solid #202532; display:flex; flex-direction:column; transition:transform .2s ease; } .sidebar-top { display:grid; gap:20px; }
.new-chat { height:44px; border:1px solid #3a4256; border-radius:10px; color:var(--text); background:#202635; text-align:left; padding:0 14px; font-weight:600; } .new-chat:hover { background:#283043; } .new-chat span { color:#b7abff; font-size:22px; vertical-align:-2px; margin-right:8px; }
.brand { padding:0 8px; font-weight:700; letter-spacing:.01em; color:#dfe4ef; } .brand-mark { color:#a996ff; margin-right:8px; } .chat-list { flex:1; overflow:auto; padding-top:18px; } .chat-item { width:100%; border-radius:8px; color:#c7cedb; background:transparent; padding:10px 11px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-item:hover,.chat-item.active { background:#252b39; color:white; } .privacy-note { padding:11px 8px 1px; color:#7e899d; font-size:12px; border-top:1px solid #222836; } .privacy-note span { color:#ad9dff; font-size:15px; margin-right:5px; }
.main { min-width:0; flex:1; min-height:100vh; display:flex; flex-direction:column; } .topbar { min-height:76px; padding:13px clamp(18px,4vw,56px); display:flex; align-items:center; gap:18px; border-bottom:1px solid rgba(255,255,255,.04); } .sidebar-toggle { display:none; color:var(--text); background:#242a38; border-radius:8px; width:38px; height:38px; font-size:18px; }
.model-selector { display:flex; gap:9px; } .model-card { min-width:151px; display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid #303748; border-radius:10px; color:#cad2e2; background:#171b27; text-align:left; transition:.15s; } .model-card:hover { border-color:#6c5fc1; background:#1e2231; } .model-card.active { color:white; border-color:#9380ff; background:#25203e; box-shadow:inset 0 0 0 1px rgba(166,148,255,.2); } .model-card:disabled { opacity:.52; cursor:not-allowed; } .model-card b,.model-card small { display:block; } .model-card b { font-size:13px; } .model-card small { color:#9fa9ba; font-size:11px; margin-top:1px; } .model-card i { display:none; width:7px; height:7px; background:#8ce0ad; border-radius:50%; margin-left:auto; } .model-card.active i { display:block; } .model-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; font-size:17px; font-style:normal; } .flash { color:#f5d77d; background:#4d4024; } .pro { color:#c3b7ff; background:#3c3367; }
.other { color:#9fb2cd; background:#2b3444; }
.model-more { position:relative; }
.model-more-button.selected { color:white; border-color:#9380ff; background:#25203e; box-shadow:inset 0 0 0 1px rgba(166,148,255,.2); }
.model-more-button[aria-expanded="true"] { border-color:#6c5fc1; }
.model-menu { position:absolute; z-index:20; top:calc(100% + 7px); left:0; width:min(360px,80vw); max-height:min(440px,62vh); overflow-y:auto; overscroll-behavior:contain; padding:6px; border:1px solid #343b4b; border-radius:13px; background:#161a25; box-shadow:0 20px 48px rgba(0,0,0,.5); }
.model-menu-group { padding:9px 10px 4px; color:#79839a; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.model-menu-group:first-child { padding-top:4px; }
.model-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:9px; color:#c8d0e0; background:transparent; text-align:left; font-size:13px; }
.model-menu button:hover:not(:disabled) { background:#232a3a; }
.model-menu button.active { color:white; background:#2a2350; box-shadow:inset 0 0 0 1px rgba(166,148,255,.28); }
.model-menu button:disabled { opacity:.4; cursor:not-allowed; }
.model-menu button small { margin-left:auto; padding-left:10px; color:#8792a6; font-size:11px; white-space:nowrap; }
.model-menu-empty { padding:14px 12px; color:#8792a6; font-size:12px; text-align:center; }
.thinking-toggle { display:flex; align-items:center; gap:7px; height:38px; padding:0 12px; border:1px solid #353c4d; border-radius:9px; color:#9ba5b9; background:#171b27; font-size:12px; } .thinking-toggle span { font-size:17px; color:#748099; } .thinking-toggle.active { color:#e6e1ff; background:#25203e; border-color:#796bcb; } .thinking-toggle.active span { color:#b6a7ff; } .thinking-toggle:disabled { opacity:.48; cursor:not-allowed; }
.connection { margin-left:auto; display:flex; align-items:center; gap:7px; color:#97a2b7; font-size:12px; white-space:nowrap; } .connection span { width:8px; height:8px; border-radius:50%; background:#6e7789; } .connection.online span { background:#62ce8a; box-shadow:0 0 0 3px rgba(98,206,138,.12); } .connection.offline span { background:#e57575; }
.chat-area { flex:1; width:min(860px,100%); margin:0 auto; padding:46px 30px 24px; overflow:auto; } .welcome { max-width:640px; margin:clamp(40px,14vh,140px) auto 0; text-align:center; } .welcome-logo { display:grid; place-items:center; margin:0 auto 18px; width:48px; height:48px; border:1px solid #4a4276; border-radius:15px; color:#c8bdff; background:radial-gradient(circle at 35% 35%,#6559a0,#282344); font-size:24px; } h1 { margin:0; font-size:clamp(28px,4vw,40px); letter-spacing:-.04em; } .welcome p { color:var(--muted); margin:9px 0 25px; } .suggestions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; } .suggestions button { color:#bfc8d8; background:#1b202d; border:1px solid #2c3445; border-radius:18px; padding:8px 13px; font-size:13px; } .suggestions button:hover { color:white; border-color:#7669c5; } .messages { display:grid; gap:26px; padding-bottom:12px; } .message { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; align-items:start; } .avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; font-size:15px; font-weight:700; } .message.user .avatar { color:#e1dcff; background:#4b407d; } .message.assistant .avatar { color:#f6d47b; background:#524323; } .message-content { min-width:0; color:#edf0f6; white-space:pre-wrap; overflow-wrap:anywhere; padding:5px 0; } .message.user .message-content { color:var(--user); } .thoughts { margin:0 0 12px; border:1px solid #39324f; border-radius:10px; background:#171522; overflow:hidden; white-space:normal; } .thoughts summary { cursor:pointer; padding:8px 11px; color:#c9c1f7; font-size:12px; user-select:none; } .thoughts summary::marker { color:#a998ff; } .thoughts-body { padding:0 12px 11px; color:#adb5c5; white-space:pre-wrap; font-size:13px; line-height:1.5; } .streaming-note { color:#9ca6b8; font-size:13px; } .typing { color:#a7afc1; letter-spacing:3px; animation:blink 1s infinite; } @keyframes blink { 50% { opacity:.35; } }
.markdown { white-space:normal; line-height:1.58; } .markdown > :first-child { margin-top:0; } .markdown > :last-child { margin-bottom:0; } .markdown p { margin:0 0 13px; white-space:normal; } .markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6 { margin:20px 0 9px; line-height:1.25; letter-spacing:-.02em; } .markdown h1 { font-size:1.6em; } .markdown h2 { font-size:1.35em; } .markdown h3 { font-size:1.16em; } .markdown ul,.markdown ol { margin:0 0 13px; padding-left:24px; } .markdown li + li { margin-top:4px; } .markdown code { padding:2px 5px; border-radius:5px; color:#ddd6ff; background:#29253a; font:12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; } .markdown pre { margin:0 0 14px; padding:13px; overflow:auto; border:1px solid #313747; border-radius:10px; background:#11141c; white-space:pre; } .markdown pre code { padding:0; color:#d9e0ed; background:transparent; font-size:12px; } .markdown a { color:#b4a7ff; text-decoration:underline; text-underline-offset:2px; } .markdown blockquote { margin:0 0 13px; padding:5px 0 5px 13px; border-left:3px solid #7d6bda; color:#bec7d8; } .markdown hr { height:1px; margin:17px 0; border:0; background:#384051; } .table-wrap { max-width:100%; margin:0 0 14px; overflow:auto; border:1px solid #32394a; border-radius:9px; } .markdown table { width:100%; border-collapse:collapse; font-size:13px; } .markdown th,.markdown td { padding:8px 10px; border-bottom:1px solid #32394a; text-align:left; vertical-align:top; } .markdown th { color:#ded9ff; background:#201d2e; } .markdown tr:last-child td { border-bottom:0; }
.composer-wrap { width:min(900px,100%); margin:0 auto; padding:14px 30px 20px; } .composer-tools { display:flex; align-items:center; gap:8px; margin:0 0 9px 2px; } .composer { display:flex; align-items:flex-end; gap:10px; padding:8px 9px 8px 15px; background:#1b202d; border:1px solid #343b4b; border-radius:16px; box-shadow:0 12px 35px rgba(0,0,0,.2); } .composer:focus-within { border-color:#6f61bf; } textarea { resize:none; border:0; outline:0; min-height:29px; max-height:180px; flex:1; padding:5px 0; color:var(--text); background:transparent; line-height:1.35; } textarea::placeholder { color:#7e899d; } #send { width:34px; height:34px; flex:none; border-radius:10px; color:#171323; background:#a896ff; font-size:21px; line-height:1; } #send:hover { background:#c1b5ff; } #send:disabled { color:#6b6680; background:#343949; cursor:not-allowed; } .composer-wrap p { min-height:16px; margin:8px 4px 0; color:#778197; text-align:center; font-size:11px; } .toast { position:fixed; z-index:5; bottom:24px; left:50%; max-width:min(520px,calc(100% - 32px)); padding:11px 14px; border-radius:10px; color:#ffe8e8; background:#7d343b; box-shadow:0 10px 26px #0007; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.2s; } .toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:720px) { .sidebar { position:fixed; z-index:3; inset:0 auto 0 0; transform:translateX(-100%); box-shadow:12px 0 30px #0007; } .sidebar.open { transform:translateX(0); } .sidebar-toggle { display:block; } .topbar { padding:10px 14px; gap:10px; } .model-selector { flex:1; gap:6px; } .model-card { min-width:0; flex:1; padding:7px; gap:6px; } .model-card small { display:none; } .model-menu { width:min(360px,84vw); } .model-more { position:static; } .model-menu { left:12px; right:12px; width:auto; } .model-icon { width:27px; height:27px; } .connection { display:none; } .chat-area { padding:25px 17px 15px; } .welcome { margin-top:50px; } .composer-wrap { padding:10px 12px 15px; } .messages { gap:20px; } }
.login-shell { display:grid; place-items:center; min-height:100vh; padding:24px; }
.login-card { width:min(380px,100%); padding:32px 28px; border:1px solid #2b3242; border-radius:18px; background:#161a25; box-shadow:0 24px 60px rgba(0,0,0,.45); text-align:center; }
.login-logo { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 16px; border-radius:15px; color:#c3b7ff; background:#3c3367; font-size:25px; }
.login-card h1 { margin:0 0 7px; font-size:21px; }
.login-sub { margin:0 0 22px; color:#98a2b6; font-size:13px; }
.login-error { margin:0 0 16px; padding:9px 12px; border-radius:9px; color:#ffd9d9; background:#5d2b31; font-size:12px; }
.google-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:44px; border:1px solid #414a5e; border-radius:11px; color:#e8ecf5; background:#1e2431; font-size:14px; font-weight:500; text-decoration:none; transition:.15s; }
.google-button:hover { border-color:#6c5fc1; background:#252b3a; }
.login-note { margin:18px 0 0; color:#6f7a8e; font-size:11px; line-height:1.5; }
.user-box { display:flex; align-items:center; gap:9px; margin:10px 2px 0; padding:8px 10px; border:1px solid #2a3140; border-radius:11px; background:#171b27; }
.user-box img { width:28px; height:28px; flex:none; border-radius:50%; background:#2b3444; }
.user-box .user-text { min-width:0; flex:1; }
.user-box b { display:block; overflow:hidden; color:#dfe4ee; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.user-box small { display:block; overflow:hidden; color:#7e899d; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.user-box a { flex:none; color:#8792a6; font-size:15px; text-decoration:none; }
.user-box a:hover { color:#ff9d9d; }