Spaces:
Running
Running
| @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 ; } | |
| 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 ; transition:none ; scroll-behavior:auto ; } } | |
| @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; } } | |