app.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme:dark; --bg:#101117; --panel:#171820; --line:#2a2b37; --text:#efedf6; --muted:#a09ead; --accent:#b7a2ff; --mint:#8ad3b0; font-family:'DM Sans',system-ui,sans-serif; font-size:14px; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; transition:background .15s, border-color .15s; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
a { color:inherit; }
p,h1,h2 { margin:0; }
.app-shell { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:100dvh; max-width:1800px; margin:auto; }
.sidebar { background:#14151d; padding:30px 24px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:24px; height:100dvh; overflow-y:auto; scrollbar-color:#393645 transparent; }
.sidebar>* { flex-shrink:0; }
.brand { text-decoration:none; display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-size:23px; font-weight:600; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--accent); color:#221b34; border-radius:10px; font-size:24px; }
.brand-version { color:var(--muted); margin-left:3px; font-weight:400; }
.brand-tag { margin-left:auto; font:10px 'DM Sans',sans-serif; letter-spacing:1.3px; color:var(--muted); border:1px solid var(--line); padding:4px 6px; border-radius:4px; }
.primary,.secondary { min-height:40px; border:1px solid transparent; border-radius:9px; padding:9px 15px; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-weight:600; }
.primary { background:var(--accent); color:#221b34; }
.primary:hover:not(:disabled) { background:#c8b8ff; }
.secondary { background:transparent; color:var(--text); border-color:#393946; }
.secondary:hover:not(:disabled) { background:#262631; border-color:#595364; }
.new-chat { width:100%; justify-content:flex-start; }
.new-chat>span { font-size:22px; font-weight:400; }
.model-card { padding:17px; background:#1b1c25; border:1px solid #30303c; border-radius:12px; }
.eyebrow { font-size:10px; letter-spacing:1.5px; font-weight:600; color:var(--muted); }
.model-title { display:flex; justify-content:space-between; align-items:center; margin:14px 0 4px; }
.model-title h2 { font-family:'Space Grotesk',sans-serif; font-size:23px; }
.chip { color:#cec3ed; font-size:11px; background:#30293f; border:1px solid #453b58; border-radius:5px; padding:3px 6px; }
.muted { color:var(--muted); line-height:1.5; }
.small { font-size:11px; }
.model-facts { margin:22px 0; font-size:11px; }
.model-facts>div { display:flex; justify-content:space-between; gap:12px; margin:10px 0; }
dt { color:var(--muted); } dd { margin:0; text-align:right; max-width:120px; overflow-wrap:anywhere; }
.model-card button { width:100%; }
#cancel-load { margin-top:8px; }
.model-note { color:var(--muted); font-size:11px; line-height:1.6; margin-top:12px; }
#loading-panel { margin-top:16px; }
.progress-label { display:flex; justify-content:space-between; gap:8px; font-size:11px; margin-bottom:8px; }
#progress-value { color:var(--accent); font-variant-numeric:tabular-nums; }
progress { display:block; width:100%; height:6px; border:0; border-radius:8px; overflow:hidden; background:#34313f; accent-color:var(--accent); }
progress::-webkit-progress-bar { background:#34313f; border-radius:8px; }
progress::-webkit-progress-value { background:var(--accent); border-radius:8px; transition:width .12s; }
progress::-moz-progress-bar { background:var(--accent); }
progress:indeterminate { background:linear-gradient(90deg,#34313f 0%,var(--accent) 45%,#34313f 70%); background-size:200% 100%; animation:loading 1.7s linear infinite; }
progress:indeterminate::-webkit-progress-bar { background:transparent; }
#progress-detail { margin-top:8px; min-height:16px; }
summary { cursor:pointer; color:#ccc8d9; font-size:12px; font-weight:600; }
.setting { margin-top:19px; }
.setting>label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:9px; }
output { color:var(--accent); }
input[type=range] { width:100%; accent-color:var(--accent); margin:0; }
.range-ends { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:5px; }
select { width:100%; background:#1c1d27; border:1px solid #353441; border-radius:7px; color:#ded9ec; padding:10px 8px; font-size:11px; }
.setting p { margin-top:7px; }
.privacy { display:flex; align-items:flex-start; gap:9px; margin-top:auto; padding-top:12px; }
.privacy-dot { width:6px; height:6px; background:var(--mint); border-radius:50%; flex-shrink:0; margin-top:5px; }
.privacy strong { font-size:11px; font-weight:500; color:#c5dfd2; }
.privacy p { color:var(--muted); font-size:11px; line-height:1.6; margin-top:6px; }
.model-link { font-size:11px; color:var(--muted); text-decoration:none; }
.model-link:hover { color:var(--accent); }
main { min-width:0; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.topbar,.notice,.composer-area { flex-shrink:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:25px 38px 22px; border-bottom:1px solid var(--line); gap:12px; }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
#export-chat { font-size:11px; min-height:32px; padding:6px 10px; }
.workspace-label { font-size:9px; letter-spacing:1.6px; color:var(--muted); }
h1 { font-weight:500; font-size:15px; margin-top:6px; }
.status-badge { display:inline-flex; align-items:center; gap:7px; color:var(--muted); background:#1b1c24; border:1px solid var(--line); padding:7px 10px; border-radius:30px; font-size:10px; white-space:nowrap; }
.status-badge>span { width:5px; height:5px; background:currentColor; border-radius:50%; }
.status-badge[data-state=ready] { color:var(--mint); border-color:#344d43; background:#18241f; }
.status-badge[data-state=loading],.status-badge[data-state=generating] { color:var(--accent); }
.notice { padding:12px 38px; font-size:12px; color:var(--muted); line-height:1.6; border-bottom:1px solid #24242f; background:#15151d; overflow-wrap:anywhere; }
.notice[data-kind=error] { color:#ffbdbd; background:#261b23; }
.chat { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:#393645 transparent; padding:24px 38px; }
.welcome { max-width:730px; margin:clamp(10px,5vh,55px) auto 24px; }
.hero-symbol { display:grid; place-items:center; font:58px 'Space Grotesk',sans-serif; width:80px; height:80px; border-radius:22px; color:var(--accent); background:radial-gradient(ellipse at center,#3c3156,#211d2d 72%); border:1px solid #3e344f; margin-bottom:28px; }
.welcome .eyebrow { color:#b5a0d6; }
.welcome h2 { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(30px,4vw,48px); letter-spacing:-1.7px; line-height:1.12; margin:15px 0 19px; }
.welcome-description { color:var(--muted); font-size:14px; line-height:1.8; }
.suggestions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:32px; }
.suggestions button { text-align:left; color:var(--text); background:#1a1b24; padding:17px 14px; border:1px solid #30303d; border-radius:10px; position:relative; }
.suggestions button:hover { border-color:#786393; background:#21202d; }
.suggestion-icon { color:var(--accent); font-family:monospace; display:block; height:29px; }
.suggestions strong { display:block; font-size:11px; font-weight:500; line-height:1.5; }
.suggestion-description { display:block; font-size:10px; color:var(--muted); margin-top:5px; line-height:1.5; }
.suggestions .arrow { position:absolute; right:14px; top:16px; color:#7c768a; font-size:12px; }
#messages { max-width:780px; margin:0 auto; }
.message { padding:18px 0 26px; min-width:0; }
.message+.message { border-top:1px solid #252530; }
.message-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; font-weight:600; }
.avatar { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#302640; color:var(--accent); font-family:'Space Grotesk',sans-serif; }
.message.user .avatar { color:#b8bdcb; background:#292d38; }
.message-body { line-height:1.8; color:#ddd9e9; overflow-wrap:anywhere; font-size:14px; }
.message-body p { margin:0 0 12px; }
.message-body.plain-text p { white-space:pre-wrap; }
.message-body h1,.message-body h2,.message-body h3,.message-body h4,.message-body h5,.message-body h6 { font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:1.4; margin:20px 0 10px; letter-spacing:0; }
.message-body h1 { font-size:24px; } .message-body h2 { font-size:21px; } .message-body h3 { font-size:18px; }
.message-body h4,.message-body h5,.message-body h6 { font-size:15px; }
.message-body ul,.message-body ol { padding-left:25px; margin:10px 0 16px; }
.message-body li { margin:5px 0; } .message-body li>p { margin:4px 0; }
.message-body :not(pre)>code { font:12px/1.6 Consolas,'SFMono-Regular',monospace; color:#decaff; background:#302737; padding:2px 5px; border-radius:4px; }
.message-body a { color:#c9b6ff; text-underline-offset:3px; }
.message-body blockquote { border-left:3px solid #77618f; margin:15px 0; padding:5px 16px; color:#bab0c9; background:#1c1925; }
.message-body blockquote p:last-child { margin-bottom:0; }
.message-body hr { border:0; border-top:1px solid var(--line); margin:20px 0; }
.table-scroll { overflow-x:auto; margin:16px 0; border:1px solid #393240; border-radius:8px; }
.message-body table { border-collapse:collapse; width:100%; font-size:12px; }
.message-body th,.message-body td { padding:9px 12px; text-align:left; border-bottom:1px solid #393240; min-width:95px; }
.message-body th { background:#25212e; color:#ded3ed; }
.message-body tbody tr:last-child td { border-bottom:0; }
.message-body .code-block { margin:14px 0; border:1px solid #383343; border-radius:10px; overflow:hidden; }
.code-head { background:#24212e; display:flex; align-items:center; justify-content:space-between; padding:7px 12px; color:#ada4bb; font:11px system-ui,sans-serif; }
pre { background:#12121a; margin:0; padding:16px; overflow-x:auto; white-space:pre; }
pre code { font:12px/1.75 Consolas,'SFMono-Regular',monospace; color:#d4c6ec; }
.copy { background:transparent; border:0; color:var(--muted); font-size:11px; padding:5px 8px; border-radius:5px; }
.copy:hover { background:#38313f; color:var(--text); }
.message-header .copy { margin-left:auto; }
.message-meta { color:var(--muted); font-size:11px; margin-top:10px; }
.reply-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:12px; }
.reply-actions button { min-height:32px; font-size:11px; padding:6px 10px; }
.previous-replies { margin-top:16px; border:1px solid var(--line); border-radius:8px; padding:12px; }
.previous-replies summary { font-size:11px; }
.previous-reply { padding-top:16px; }
.previous-reply+.previous-reply { margin-top:16px; border-top:1px solid var(--line); }
.previous-reply-label { font-size:10px; color:var(--muted); margin-bottom:12px; }
.thinking { color:var(--muted); animation:breathing 1.4s ease-in-out infinite; }
.composer-area { padding:12px 38px 20px; }
.composer { border:1px solid #44404f; border-radius:13px; background:#1a1b24; padding:15px; max-width:850px; margin:auto; }
.composer:focus-within { border-color:#87709f; box-shadow:0 0 0 3px #b7a2ff08; }
textarea { background:transparent; color:var(--text); outline:none; border:0; resize:none; width:100%; display:block; min-height:50px; max-height:170px; line-height:1.6; padding:0; }
textarea::placeholder { color:#7f7b8e; }
.composer-bottom { display:flex; align-items:center; gap:8px; margin-top:9px; }
#composer-hint { margin-right:auto; font-size:10px; color:var(--muted); }
.composer button { min-height:34px; padding:7px 12px; font-size:12px; }
.composer-footer { display:flex; justify-content:space-between; gap:10px; max-width:850px; margin:12px auto 0; color:#9b94a8; font-size:9px; line-height:1.5; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:12px 18px; background:#302a3f; color:var(--text); border:1px solid #695981; border-radius:10px; font-size:12px; z-index:5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes loading { from { background-position:100% 0; } to { background-position:-100% 0; } }
@keyframes breathing { 50% { opacity:.4; } }
@media (max-width:1050px) { .sidebar { padding:24px 18px; } .app-shell { grid-template-columns:250px minmax(0,1fr); } .topbar,.chat { padding-left:25px; padding-right:25px; } .notice { padding-left:25px; padding-right:25px; } .composer-area { padding:12px 25px 18px; } .suggestions { grid-template-columns:1fr; gap:7px; margin-top:24px; } .suggestions button { padding:12px 14px 12px 42px; } .suggestion-icon { position:absolute; left:13px; top:14px; } .welcome { margin-top:12px; } }
@media (max-width:680px) { .app-shell { display:block; } .sidebar { border-right:0; border-bottom:1px solid var(--line); padding:18px; gap:16px; } .brand { font-size:20px; } .new-chat { position:absolute; top:18px; right:18px; width:auto; font-size:11px; min-height:34px; } .brand-tag { display:none; } .model-card { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; } .model-card>.eyebrow,.model-title,.model-card>.muted { grid-column:1; } .model-title { margin-top:7px; } .model-facts { grid-column:2; grid-row:1 / 4; margin:0; } .model-card>#load { grid-column:1 / -1; margin-top:15px; } #cancel-load,#loading-panel,.model-note { grid-column:1 / -1; } .privacy,.model-link { display:none; } .settings { padding:0 4px; } main { height:calc(100dvh - 65px); min-height:660px; } .topbar { padding:19px; } .notice { padding:10px 19px; } .chat { padding:20px; } .hero-symbol { width:60px; height:60px; font-size:44px; margin-bottom:20px; } .welcome h2 { font-size:34px; } .welcome-description { font-size:12px; } .composer-area { padding:10px 14px 18px; } .composer-footer { flex-direction:column; gap:2px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (max-width:680px) { .sidebar { height:auto; overflow:visible; } }
@media (max-width:420px) { .topbar { align-items:flex-start; } .topbar-actions { max-width:135px; gap:7px; } .topbar h1 { font-size:13px; } }