| :root{color-scheme:dark;--bg:#18181e;--surface:#1e1e24;--panel:#22222b;--control:#282832;--hover:#343541;--selected:#3a3a4a;--line:#393942;--line-strong:#50505c;--text:#d4d4d4;--muted:#b0b0bd;--accent:#8abeb7;--danger:#e58b93;--ok:#a6cf8c;--r-s:8px;--r:14px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;scrollbar-color:var(--line-strong) var(--bg)} |
| *{box-sizing:border-box} |
| html,body,#root{height:100%} |
| body{margin:0;background:var(--bg);color:var(--text)} |
| button,input,textarea{font:inherit;color:inherit} |
| pre{margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;white-space:pre-wrap;word-break:break-word} |
| button{cursor:pointer;border:1px solid transparent;border-radius:var(--r-s);background:var(--control);padding:5px 10px;min-height:28px;font-size:12px;white-space:nowrap} |
| button:hover:not(:disabled){background:var(--hover)} |
| button:disabled{opacity:.45;cursor:default} |
| button.primary{background:var(--hover)} |
| button.send:not(:disabled){background:#fff;color:#18181e} |
| button.quiet{background:transparent;font-size:11px} |
| button.quiet:hover:not(:disabled){background:var(--control)} |
| :focus-visible{outline:2px solid var(--accent);outline-offset:2px} |
| textarea,input[type=text]{background:transparent;border:0;outline:none;resize:none;width:100%} |
| textarea:focus,input[type=text]:focus{box-shadow:inset 0 0 0 1px var(--accent)} |
| [hidden]{display:none!important} |
| .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} |
|
|
| .app{height:100%;display:flex;flex-direction:column;gap:10px;padding:12px 14px;max-width:1800px;margin:0 auto} |
| .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r);padding:8px 12px;min-height:48px} |
| .brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px} |
| .brand svg{width:18px;height:18px} |
| .meter{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--r-s);background:var(--panel);font-size:12px;color:var(--muted);white-space:nowrap} |
| .dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong)} |
| .meter[data-tone=active] .dot{background:var(--ok)} |
| .meter[data-tone=loading] .dot{background:var(--accent);animation:pulse 1.2s ease-in-out infinite} |
| .meter[data-tone=error] .dot{background:var(--danger)} |
| .meter .sep{width:1px;height:14px;background:var(--line)} |
| .meter svg{color:var(--accent)} |
| .model{display:flex;align-items:center;gap:10px;justify-self:end;min-width:0} |
| .model a{display:flex;align-items:center;gap:6px;color:inherit;text-decoration:none} |
| .model img{width:16px;height:16px;border-radius:4px} |
| .badge{font-size:10px;padding:1px 6px;border-radius:99px;background:var(--control);color:var(--muted)} |
| progress{width:110px;height:6px;accent-color:var(--accent)} |
|
|
| .banner{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line)} |
| .banner.error{border-color:#6b3a40;color:var(--danger)} |
| .banner span{flex:1} |
| .banner a{color:var(--accent)} |
|
|
| main{flex:1;min-height:0;display:grid;gap:0} |
| .chat,.workspace{min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden} |
| .resizer{cursor:col-resize;display:flex;justify-content:center} |
| .resizer::after{content:"";width:2px;margin:24px 0;border-radius:2px;background:var(--line)} |
| .resizer:hover::after,.resizer:focus-visible::after{background:var(--accent)} |
|
|
| .log{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px} |
| .empty{margin:auto;text-align:center;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted)} |
| .empty svg{width:44px;height:44px;color:var(--line-strong)} |
| .empty h2{margin:0;font-size:15px;color:var(--text)} |
| .msg{max-width:100%} |
| .msg.user{align-self:flex-end;background:var(--control);padding:8px 12px;border-radius:var(--r-s);white-space:pre-wrap;max-width:85%} |
| .msg.assistant{display:flex;flex-direction:column;gap:8px} |
| .msg .text{margin:0;white-space:pre-wrap;line-height:1.55} |
| .muted{color:var(--muted);margin:0} |
| .err{color:var(--danger);margin:0} |
| .thinking{border-left:2px solid var(--line-strong);padding-left:10px;color:var(--muted)} |
| .thinking summary{cursor:pointer;font-size:12px} |
| .thinking pre{margin-top:6px} |
| .tool{background:var(--panel);border-radius:var(--r-s);overflow:hidden} |
| .tool-head{display:flex;gap:8px;padding:6px 10px;font-size:12px;color:var(--accent);background:var(--control)} |
| .tool pre{padding:8px 10px} |
| .tool .kv{padding:0 10px 6px} |
| .tool .kv b{font-weight:500;color:var(--muted);font-size:11px} |
| .result{background:var(--panel);border-radius:var(--r-s);padding:6px 10px;border-left:2px solid var(--ok)} |
| .result.bad{border-left-color:var(--danger)} |
| .result summary{cursor:pointer;font-size:12px;color:var(--muted)} |
| .result pre{margin-top:6px;max-height:280px;overflow:auto} |
| .typing{display:inline-flex;gap:4px} |
| .typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:pulse 1.2s ease-in-out infinite} |
| .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s} |
| @keyframes pulse{50%{opacity:.35}} |
| @media (prefers-reduced-motion:reduce){.typing i,.meter .dot{animation:none}} |
|
|
| .composer{padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px} |
| .composer textarea{background:var(--panel);border-radius:var(--r-s);padding:10px 12px;min-height:64px;max-height:200px;line-height:1.5} |
| .controls{display:flex;align-items:center;gap:8px} |
| .controls .grow{flex:1;color:var(--muted);font-size:11px} |
|
|
| .ws-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px} |
| .ws-head h2{margin:0;font-size:13px;font-weight:600} |
| .ws-head div{display:flex;gap:2px} |
| .files-area{flex:1;min-height:0;display:grid;grid-template-columns:150px 1fr;gap:8px;padding:0 10px} |
| .files{overflow:auto;display:flex;flex-direction:column;gap:2px;padding:4px 0} |
| .file{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:transparent;overflow:hidden;text-overflow:ellipsis} |
| .file[aria-current=true]{background:var(--selected)} |
| .file img{width:14px;height:14px;flex:none} |
| .file span{overflow:hidden;text-overflow:ellipsis} |
| .addfile{padding:2px 0} |
| .addfile input{background:var(--panel);border-radius:var(--r-s);padding:5px 8px} |
| .editor{display:flex;flex-direction:column;min-width:0;min-height:0;gap:6px} |
| .editor-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted)} |
| .editor textarea{flex:1;background:var(--panel);border-radius:var(--r-s);padding:10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre;overflow:auto;tab-size:2} |
| .shell{margin:8px 10px 10px;background:var(--panel);border-radius:var(--r-s);display:flex;flex-direction:column;max-height:42%;min-height:130px} |
| .shell>summary{cursor:pointer;padding:8px 10px;font-size:12px;color:var(--muted)} |
| .shell-body{display:flex;flex-direction:column;min-height:0;flex:1} |
| .shell-out{flex:1;min-height:60px;overflow:auto;padding:0 10px 6px;display:flex;flex-direction:column;gap:6px} |
| .shell-out .cmd{color:var(--accent)} |
| .shell-out .stderr{color:var(--danger)} |
| .shell-out .code{color:var(--muted)} |
| .shell-form{display:flex;gap:6px;align-items:flex-start;padding:6px 10px 10px;border-top:1px solid var(--line)} |
| .shell-form span{padding-top:6px;color:var(--accent);font-family:ui-monospace,monospace} |
| .shell-form textarea{background:var(--control);border-radius:var(--r-s);padding:6px 8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;min-height:30px;max-height:120px} |
| .note{margin:0;padding:0 12px 10px;font-size:11px;color:var(--muted)} |
|
|
| .overlay{position:fixed;inset:0;background:rgba(8,8,12,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10} |
| .dialog{width:min(460px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;max-height:100%;overflow:auto} |
| .dialog h2{margin:0;font-size:15px} |
| .dialog p{margin:0;color:var(--muted);line-height:1.5} |
| .dialog .facts{background:var(--panel);border-radius:var(--r-s);padding:10px 12px;display:flex;flex-direction:column;gap:2px} |
| .dialog .facts strong{color:var(--text)} |
| .dialog .preview{background:var(--panel);border-radius:var(--r-s);padding:10px 12px;white-space:pre-wrap;max-height:120px;overflow:auto} |
| .dialog .actions{display:flex;justify-content:flex-end;gap:8px} |
| .dialog progress{width:100%} |
|
|
| @media (max-width:820px){ |
| .top{grid-template-columns:1fr auto} |
| .top .meter{display:none} |
| main{display:flex!important;flex-direction:column;gap:10px;overflow:auto} |
| .chat{min-height:60vh}.workspace{min-height:70vh} |
| .resizer{display:none} |
| .files-area{grid-template-columns:110px 1fr} |
| } |
|
|
