/* ============ Agentic Coding Panel — dark, charcoal-neutral ============ */ :root { --bg-0:#16171a; /* editor surface (deepest) */ --bg-1:#1a1c1f; /* terminals */ --bg-2:#1f2226; /* sidebars */ --bg-3:#23262b; /* headers / tabs strip */ --hover:#2a2e34; --active:#313742; --sel:#2b323d; --border:#2a2d33; --border-2:#34383f; --fg-0:#e6e8ea; --fg-1:#b4bac2; --fg-2:#838a94; --fg-3:#5d636c; --accent:#4d8dff; --accent-soft:rgba(77,141,255,0.16); --accent-line:rgba(77,141,255,0.55); --add:#5cbd6b; --del:#e0696a; --mod:#d8a85c; --ren:#5aa6d6; --add-bg:rgba(92,189,107,0.10); --del-bg:rgba(224,105,106,0.10); /* syntax */ --t-key:#c98bdb; --t-str:#94c980; --t-num:#e0a06a; --t-fn:#6aa6f0; --t-com:#5f656e; --t-tag:#7fc6a0; --t-attr:#d8b15c; --t-punc:#9aa0a8; --t-var:#e6e8ea; --t-const:#e08b6a; --t-prop:#6ec0c0; --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } * { box-sizing:border-box; } html,body { margin:0; height:100%; } body { background:var(--bg-0); color:var(--fg-0); font-family:var(--ui); font-size:13px; overflow:hidden; -webkit-font-smoothing:antialiased; } #root { height:100vh; } ::selection { background:rgba(77,141,255,0.32); } /* scrollbars */ ::-webkit-scrollbar { width:11px; height:11px; } ::-webkit-scrollbar-thumb { background:#393e46; border-radius:6px; border:3px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover { background:#4a505a; background-clip:content-box; } ::-webkit-scrollbar-corner { background:transparent; } /* ============ shell ============ */ .app { display:flex; flex-direction:column; height:100vh; } .titlebar { height:36px; flex:0 0 36px; display:flex; align-items:center; background:var(--bg-3); border-bottom:1px solid var(--border); padding:0 12px; gap:14px; user-select:none; } .traffic { display:flex; gap:8px; } .traffic i { width:12px; height:12px; border-radius:50%; display:block; } .traffic .r{background:#e0696a;} .traffic .y{background:#d8a85c;} .traffic .g{background:#5cbd6b;} .tb-title { font-size:12px; color:var(--fg-1); display:flex; align-items:center; gap:7px; } .tb-title b { color:var(--fg-0); font-weight:600; } .tb-crumb { color:var(--fg-3); font-size:11.5px; font-family:var(--mono); } .tb-crumb .seg{color:var(--fg-2);} .tb-spacer { flex:1; } .tb-actions { display:flex; gap:6px; align-items:center; } .tb-btn { font-size:11.5px; color:var(--fg-2); background:transparent; border:1px solid transparent; border-radius:6px; padding:4px 9px; cursor:pointer; display:flex; align-items:center; gap:6px; } .tb-btn:hover { background:var(--hover); color:var(--fg-0); } .tb-btn kbd { font-family:var(--mono); font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:1px 5px; } .workbench { flex:1; display:flex; min-height:0; } .col { display:flex; flex-direction:column; height:100%; min-width:0; background:var(--bg-2); } .col.editor-col { flex:1; background:var(--bg-0); min-width:240px; } .col.right-col { background:var(--bg-1); } .splitter { flex:0 0 5px; cursor:col-resize; background:transparent; position:relative; z-index:5; } .splitter::after { content:""; position:absolute; inset:0 2px; background:var(--border); transition:background .12s; } .splitter:hover::after, .splitter.drag::after { background:var(--accent-line); } .splitter.h { cursor:row-resize; flex:0 0 5px; width:100%; } /* panel header */ .phead { height:30px; flex:0 0 30px; display:flex; align-items:center; gap:8px; padding:0 10px 0 12px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-2); border-bottom:1px solid var(--border); user-select:none; } .phead .ct { margin-left:auto; font-size:10px; color:var(--fg-3); letter-spacing:.02em; text-transform:none; background:var(--bg-3); border:1px solid var(--border); border-radius:9px; padding:0 7px; line-height:16px; } .phead .ico-btn { color:var(--fg-3); cursor:pointer; padding:2px; border-radius:4px; display:flex; } .phead .ico-btn:hover { background:var(--hover); color:var(--fg-1); } /* ============ git panel ============ */ .commit-box { padding:9px 10px; border-bottom:1px solid var(--border); display:flex; gap:7px; align-items:flex-start; } .commit-input { flex:1; min-width:0; resize:none; background:var(--bg-0); border:1px solid var(--border-2); border-radius:7px; color:var(--fg-0); font-family:var(--ui); font-size:12px; line-height:16px; padding:7px 9px; outline:none; min-height:32px; } .commit-input:focus { border-color:var(--accent-line); } .commit-input::placeholder { color:var(--fg-3); } .commit-btn { flex:0 0 auto; display:flex; align-items:center; gap:6px; background:var(--accent); color:#0c1320; border:0; border-radius:7px; font:inherit; font-size:12px; font-weight:600; padding:0 11px; height:32px; cursor:pointer; } .commit-btn:hover:not(:disabled) { background:#5d97ff; } .commit-btn:disabled { background:var(--bg-3); color:var(--fg-3); cursor:not-allowed; } .git-body { overflow:auto; flex:1; padding:4px 0 10px; } .git-group { padding:8px 12px 3px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); display:flex; align-items:center; gap:6px; } .git-group .gc { color:var(--fg-3); } .git-group .grp-act { margin-left:auto; display:flex; opacity:0; background:transparent; border:0; color:var(--fg-2); padding:2px; border-radius:4px; cursor:pointer; } .git-group:hover .grp-act { opacity:1; } .git-group .grp-act:hover { background:var(--hover); color:var(--fg-0); } .git-empty { display:flex; flex-direction:column; align-items:center; gap:9px; padding:30px 16px; color:var(--fg-3); font-size:12px; text-align:center; } .git-empty svg { color:var(--add); opacity:.7; } .git-none { padding:5px 14px 9px; font-size:11.5px; color:var(--fg-3); } .git-none .key { font-family:var(--mono); font-size:11px; color:var(--fg-2); border:1px solid var(--border-2); border-radius:4px; padding:0 5px; } .git-divider { height:1px; background:var(--border); margin:8px 12px 2px; } .git-row { display:flex; align-items:center; gap:8px; padding:3px 12px 3px 14px; cursor:pointer; position:relative; } .git-row:hover { background:var(--hover); } .git-row.active { background:var(--sel); } .git-row.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); } .git-stat { width:13px; text-align:center; font-family:var(--mono); font-size:11px; font-weight:600; flex:0 0 13px; } .git-stat.M{color:var(--mod);} .git-stat.A{color:var(--add);} .git-stat.D{color:var(--del);} .git-stat.R{color:var(--ren);} .git-stat.U{color:var(--add);} .git-name { font-size:12.5px; color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .git-row.active .git-name { color:var(--fg-0); } .git-name.del { text-decoration:line-through; color:var(--fg-3); } .git-dir { color:var(--fg-3); font-size:11px; margin-left:auto; padding-left:8px; white-space:nowrap; max-width:42%; overflow:hidden; text-overflow:ellipsis; direction:rtl; } .git-act { flex:0 0 auto; display:none; align-items:center; justify-content:center; width:20px; height:20px; padding:0; background:transparent; border:0; border-radius:5px; color:var(--fg-2); cursor:pointer; margin-left:4px; } .git-row:hover .git-act { display:flex; } .git-act:hover { background:var(--active); color:var(--fg-0); } .git-delta { font-family:var(--mono); font-size:10.5px; display:flex; gap:6px; flex:0 0 auto; } .git-delta .a{color:var(--add);} .git-delta .d{color:var(--del);} .git-foot { border-top:1px solid var(--border); padding:8px 12px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--fg-2); } .branch-chip { display:flex; align-items:center; gap:6px; color:var(--fg-1); } .branch-chip b { font-weight:600; color:var(--fg-0); } /* ============ file tree ============ */ .tree-body { overflow:auto; flex:1; padding:4px 0 14px; } .tree-row { display:flex; align-items:center; gap:6px; padding:2px 10px 2px 0; cursor:pointer; white-space:nowrap; position:relative; height:23px; } .tree-row:hover { background:var(--hover); } .tree-row.active { background:var(--sel); } .tree-row.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); } .tw { display:inline-flex; align-items:center; justify-content:center; width:14px; flex:0 0 14px; color:var(--fg-3); font-size:10px; } .tree-label { font-size:12.5px; color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; } .tree-row.active .tree-label { color:var(--fg-0); } .tree-row.folder .tree-label { color:var(--fg-1); } .tree-badge { margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600; padding-left:8px; } .tree-badge.M{color:var(--mod);} .tree-badge.A{color:var(--add);} .tree-badge.D{color:var(--del);} /* file type monogram icon */ .ficon { width:15px; height:15px; flex:0 0 15px; border-radius:3.5px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:7.5px; font-weight:700; color:#11131600; position:relative; } .ficon span { color:#0c0d0f; font-size:7.5px; line-height:1; letter-spacing:-.3px; } .folder-ic { width:15px; height:15px; flex:0 0 15px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-2); } /* ============ editor ============ */ .tabs { height:35px; flex:0 0 35px; display:flex; align-items:stretch; background:var(--bg-3); border-bottom:1px solid var(--border); overflow-x:auto; overflow-y:hidden; } .tabs::-webkit-scrollbar { height:0; } .tab { display:flex; align-items:center; gap:7px; padding:0 9px 0 13px; cursor:pointer; border-right:1px solid var(--border); color:var(--fg-2); font-size:12.5px; white-space:nowrap; background:var(--bg-3); position:relative; max-width:230px; } .tab:hover { background:#272b31; } .tab.active { background:var(--bg-0); color:var(--fg-0); } .tab.active::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); } .tab .tname { overflow:hidden; text-overflow:ellipsis; } .tab.dirty .tname::after { content:" ●"; color:var(--mod); font-size:10px; } .tab .tclose { width:17px; height:17px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--fg-3); flex:0 0 17px; } .tab .tclose:hover { background:var(--active); color:var(--fg-0); } .tab .tdot { display:none; width:7px; height:7px; border-radius:50%; background:var(--fg-2); } .tab.dirtyclose .tclose { display:none; } .tab.dirtyclose:hover .tclose { display:flex; } .tab.dirtyclose:hover .tdot { display:none; } .tab.dirtyclose .tdot { display:block; } .tab-mode { margin-left:6px; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:0 5px; line-height:14px; } .editor-wrap { flex:1; min-height:0; display:flex; flex-direction:column; position:relative; } .editor { flex:1; overflow:auto; font-family:var(--mono); font-size:13px; line-height:20px; padding:6px 0 40px; } .ln-row { display:flex; align-items:flex-start; min-height:20px; } .ln-row.cursor { background:rgba(255,255,255,0.035); } .ln-row.add { background:var(--add-bg); } .ln-row.del { background:var(--del-bg); } .ln-row.selrange { background:var(--accent-soft); } .ln-gutter { flex:0 0 54px; width:54px; text-align:right; padding-right:14px; color:var(--fg-3); user-select:none; cursor:pointer; font-size:12px; } .ln-row.cursor .ln-gutter { color:var(--fg-1); } .ln-gutter:hover { color:var(--fg-1); } .ln-sign { flex:0 0 14px; width:14px; text-align:center; user-select:none; color:var(--fg-3); } .ln-row.add .ln-sign { color:var(--add); } .ln-row.del .ln-sign { color:var(--del); } .ln-code { flex:1; white-space:pre; padding:0 16px 0 6px; min-width:0; } .editor.diff .ln-code { padding-left:6px; } .empty-ed { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--fg-3); gap:14px; } .empty-ed .big { font-size:13px; } .empty-ed kbd { font-family:var(--mono); font-size:11px; color:var(--fg-2); border:1px solid var(--border-2); border-radius:5px; padding:2px 7px; } .empty-ed .klist { display:flex; flex-direction:column; gap:9px; font-size:12px; } .empty-ed .klist div { display:flex; gap:10px; align-items:center; justify-content:space-between; min-width:230px; } .diff-bar { height:26px; flex:0 0 26px; display:flex; align-items:center; gap:12px; padding:0 14px; background:var(--bg-3); border-bottom:1px solid var(--border); font-size:11px; color:var(--fg-2); } .diff-bar .a{color:var(--add);font-family:var(--mono);} .diff-bar .d{color:var(--del);font-family:var(--mono);} .diff-bar .toggle { margin-left:auto; display:flex; border:1px solid var(--border-2); border-radius:6px; overflow:hidden; } .diff-bar .toggle button { background:transparent; border:0; color:var(--fg-2); font:inherit; font-size:11px; padding:2px 10px; cursor:pointer; } .diff-bar .toggle button.on { background:var(--accent-soft); color:var(--fg-0); } /* four-segment view control */ .diff-bar .seg { margin-left:auto; display:flex; border:1px solid var(--border-2); border-radius:7px; overflow:hidden; } .diff-bar .seg button { background:transparent; border:0; border-right:1px solid var(--border-2); color:var(--fg-2); font:inherit; font-size:11px; padding:3px 12px; cursor:pointer; display:flex; align-items:center; gap:6px; } .diff-bar .seg button:last-child { border-right:0; } .diff-bar .seg button:hover { color:var(--fg-0); background:var(--hover); } .diff-bar .seg button.on { background:var(--accent-soft); color:var(--fg-0); } .diff-bar .seg .split-btn svg { opacity:.85; } /* gutter change bars (Original / Updated / Split) */ .ln-row.bar-del { box-shadow:inset 2px 0 0 var(--del); } .ln-row.bar-add { box-shadow:inset 2px 0 0 var(--add); } .ln-row.empty { background:repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 7px, transparent 7px 14px); } /* full-screen split */ .split-overlay { position:fixed; inset:0; z-index:60; background:var(--bg-0); display:flex; flex-direction:column; animation:tin .12s ease-out; } .split-head { height:42px; flex:0 0 42px; display:flex; align-items:center; gap:11px; padding:0 16px; background:var(--bg-3); border-bottom:1px solid var(--border); } .split-head .sh-name { font-family:var(--mono); font-size:13px; color:var(--fg-0); } .split-head .git-stat { font-size:11px; } .split-exit { margin-left:auto; display:flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--border-2); border-radius:7px; color:var(--fg-1); font:inherit; font-size:12px; padding:5px 11px; cursor:pointer; } .split-exit:hover { background:var(--hover); color:var(--fg-0); } .split-exit kbd { font-family:var(--mono); font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:1px 5px; } .split-body { flex:1; display:flex; min-height:0; } .split-pane { flex:1; min-width:0; display:flex; flex-direction:column; } .split-pane.left { border-right:1px solid var(--border-2); } .split-label { height:27px; flex:0 0 27px; display:flex; align-items:center; gap:9px; padding:0 16px; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-2); background:var(--bg-2); border-bottom:1px solid var(--border); } .split-label span { text-transform:none; letter-spacing:0; color:var(--fg-3); font-family:var(--mono); font-size:10.5px; } /* syntax token colors */ .ln-code .token.keyword,.ln-code .token.rule,.ln-code .token.atrule,.ln-code .token.important{color:var(--t-key);} .ln-code .token.string,.ln-code .token.attr-value,.ln-code .token.char,.ln-code .token.regex{color:var(--t-str);} .ln-code .token.number,.ln-code .token.unit{color:var(--t-num);} .ln-code .token.function,.ln-code .token.method{color:var(--t-fn);} .ln-code .token.comment,.ln-code .token.prolog,.ln-code .token.doctype,.ln-code .token.cdata{color:var(--t-com);font-style:italic;} .ln-code .token.tag{color:var(--t-tag);} .ln-code .token.attr-name{color:var(--t-attr);} .ln-code .token.punctuation{color:var(--t-punc);} .ln-code .token.operator{color:var(--t-punc);} .ln-code .token.variable,.ln-code .token.symbol{color:var(--t-var);} .ln-code .token.constant,.ln-code .token.boolean,.ln-code .token.builtin{color:var(--t-const);} .ln-code .token.property,.ln-code .token.property-access{color:var(--t-prop);} .ln-code .token.class-name,.ln-code .token.maybe-class-name{color:var(--t-attr);} .ln-code .token.parameter{color:var(--fg-0);} .ln-code .token.namespace{color:var(--fg-2);} .ln-code .token.selector{color:var(--t-tag);} .ln-code .token.entity,.ln-code .token.url{color:var(--t-prop);} .ln-code .token.deleted{color:var(--del);} .ln-code .token.inserted{color:var(--add);} /* ============ terminals (right column) ============ */ .term-pane { display:flex; flex-direction:column; min-height:0; background:var(--bg-1); } .term-head { height:28px; flex:0 0 28px; display:flex; align-items:center; gap:8px; padding:0 10px; background:var(--bg-3); border-bottom:1px solid var(--border); font-size:11px; color:var(--fg-2); user-select:none; } .term-head .dot { width:7px; height:7px; border-radius:50%; background:var(--fg-3); } .term-head .dot.live { background:var(--add); box-shadow:0 0 0 0 rgba(92,189,107,.5); animation:pulse 2.2s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(92,189,107,.45);} 70%{box-shadow:0 0 0 5px rgba(92,189,107,0);} 100%{box-shadow:0 0 0 0 rgba(92,189,107,0);} } .term-head .lbl { color:var(--fg-1); font-family:var(--mono); } .term-head .tag { margin-left:auto; font-size:10px; color:var(--fg-3); font-family:var(--mono); } .term-body { flex:1; overflow:auto; padding:8px 12px 12px; font-family:var(--mono); font-size:12.5px; line-height:18px; cursor:text; } .tline { white-space:pre-wrap; word-break:break-word; } .tline.dim{color:var(--fg-3);} .tline.acc{color:var(--accent);} .tline.ok{color:var(--add);} .tline.warn{color:var(--mod);} .tline.err{color:var(--del);} .tline .pfx { color:var(--accent); } .tline .ag { color:#c98bdb; } .tline .tool { color:var(--mod); } .tline .fp { color:var(--t-prop); } .term-card { border:1px solid var(--border-2); border-radius:7px; padding:7px 10px; margin:5px 0; background:rgba(255,255,255,0.02); } .term-card .ch { color:var(--fg-2); font-size:11px; margin-bottom:4px; display:flex; gap:7px; align-items:center; min-width:0; } .term-card .ch span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .term-card .add,.term-card .del { white-space:pre-wrap; word-break:break-word; line-height:17px; } .term-card .add{color:var(--add);} .term-card .del{color:var(--del);} .term-input { display:flex; align-items:center; gap:8px; } .term-input .ip { color:var(--accent); } .term-input .ip.ag { color:#c98bdb; } .term-input input { flex:1; background:transparent; border:0; outline:0; color:var(--fg-0); font-family:var(--mono); font-size:12.5px; caret-color:var(--accent); } .cursor-blink { display:inline-block; width:7px; height:14px; background:var(--accent); margin-left:1px; animation:blink 1.1s step-end infinite; vertical-align:-2px; } @keyframes blink { 50%{opacity:0;} } /* ============ overlays ============ */ .scrim { position:fixed; inset:0; background:rgba(8,9,11,0.5); z-index:50; display:flex; justify-content:center; align-items:flex-start; padding-top:90px; backdrop-filter:blur(1.5px); } .palette { width:620px; max-width:92vw; background:#212429; border:1px solid var(--border-2); border-radius:11px; box-shadow:0 24px 70px rgba(0,0,0,.55); overflow:hidden; } .palette .pi { display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--border); } .palette .pi input { flex:1; background:transparent; border:0; outline:0; color:var(--fg-0); font-size:15px; font-family:var(--ui); } .palette .pi .mode-chip { font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:5px; padding:2px 7px; font-family:var(--mono); } .palette .results { max-height:380px; overflow:auto; padding:6px; } .pres { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; cursor:pointer; } .pres.sel { background:var(--accent-soft); } .pres .pn { font-size:13px; color:var(--fg-0); } .pres .pn b { color:var(--accent); font-weight:700; } .pres .pp { font-size:11px; color:var(--fg-3); margin-left:auto; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; direction:rtl; } .pempty { padding:26px; text-align:center; color:var(--fg-3); font-size:12.5px; } /* combined search modal (content + files) */ .search-modal { width:940px; max-width:94vw; background:#212429; border:1px solid var(--border-2); border-radius:11px; box-shadow:0 24px 70px rgba(0,0,0,.55); overflow:hidden; display:flex; flex-direction:column; } .search-cols { display:flex; min-height:0; } .sc-left { flex:1 1 auto; min-width:0; max-height:460px; overflow:auto; border-right:1px solid var(--border); padding-bottom:8px; } .sc-right { flex:0 0 256px; min-width:0; max-height:460px; overflow:auto; padding-bottom:8px; background:rgba(0,0,0,0.12); } .sc-head { position:sticky; top:0; z-index:1; background:#212429; padding:9px 14px 6px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3); display:flex; align-items:center; gap:7px; } .sc-right .sc-head { background:#1e2024; } .sc-head .sc-ct { color:var(--fg-2); background:var(--bg-3); border:1px solid var(--border); border-radius:9px; padding:0 7px; line-height:15px; font-size:10px; } .srf-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pempty.sm { padding:18px 14px; text-align:left; font-size:11.5px; } .fres { display:flex; align-items:center; gap:9px; padding:6px 12px; cursor:pointer; } .fres:hover { background:var(--hover); } .fres-txt { min-width:0; display:flex; flex-direction:column; line-height:1.25; } .fres-txt .fn { font-size:12.5px; color:var(--fg-0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fres-txt .fn b { color:var(--accent); font-weight:700; } .fres-txt .fd { font-size:10.5px; color:var(--fg-3); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* content search */ .search-results { max-height:420px; overflow:auto; padding:4px 0 8px; } .sr-file { padding:7px 14px 3px; font-size:11.5px; color:var(--fg-2); display:flex; align-items:center; gap:8px; cursor:pointer; } .sr-file:hover { color:var(--fg-0); } .sr-file .cnt { margin-left:auto; color:var(--fg-3); font-family:var(--mono); font-size:10.5px; } .sr-line { display:flex; gap:12px; padding:2px 14px 2px 38px; font-family:var(--mono); font-size:12px; cursor:pointer; color:var(--fg-1); } .sr-line:hover { background:var(--hover); } .sr-line .no { color:var(--fg-3); min-width:34px; text-align:right; } .sr-line .tx { white-space:pre; overflow:hidden; text-overflow:ellipsis; } .sr-line mark { background:rgba(216,168,92,.28); color:var(--fg-0); border-radius:2px; } /* pass-on-to-agent inline popup */ .pass-pop { position:fixed; z-index:85; width:344px; max-width:92vw; background:#23272d; border:1px solid var(--border-2); border-radius:10px; box-shadow:0 18px 48px rgba(0,0,0,.55); padding:11px; animation:popin .12s ease-out; } @keyframes popin { from { transform:translateY(6px); } } .pass-head { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-1); margin-bottom:9px; } .pass-head svg { color:#c98bdb; } .pass-head .pass-esc { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--fg-3); border:1px solid var(--border-2); border-radius:4px; padding:1px 6px; } .pass-input { width:100%; box-sizing:border-box; background:var(--bg-0); border:1px solid var(--border-2); border-radius:7px; color:var(--fg-0); font-family:var(--ui); font-size:13px; padding:8px 10px; outline:none; } .pass-input:focus { border-color:var(--accent-line); } .pass-input::placeholder { color:var(--fg-3); } .pass-preview { margin-top:9px; display:flex; align-items:center; gap:8px; min-width:0; } .pass-preview .pp-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); flex:0 0 auto; } .pass-preview code { font-family:var(--mono); font-size:11.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:3px 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pass-foot { margin-top:9px; font-size:10.5px; color:var(--fg-3); } .pass-foot kbd { font-family:var(--mono); font-size:10px; color:var(--fg-2); border:1px solid var(--border-2); border-radius:4px; padding:0 5px; } /* terminal multi-line input */ .term-input { align-items:flex-start; } .term-ta { flex:1; background:transparent; border:0; outline:0; color:var(--fg-0); font-family:var(--mono); font-size:12.5px; line-height:18px; caret-color:var(--accent); resize:none; padding:0; margin:0; overflow:hidden; } .term-ta::placeholder { color:var(--fg-3); } /* context menu */.ctx { position:fixed; z-index:80; background:#23272d; border:1px solid var(--border-2); border-radius:9px; padding:5px; min-width:248px; box-shadow:0 16px 44px rgba(0,0,0,.5); } .ctx-item { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:6px; cursor:pointer; font-size:12.5px; color:var(--fg-1); } .ctx-item:hover { background:var(--accent-soft); color:var(--fg-0); } .ctx-item .kc { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--fg-3); } .ctx-item.primary { color:var(--fg-0); } .ctx-item.primary .ic { color:var(--accent); } .ctx-item .ic { width:15px; display:flex; justify-content:center; color:var(--fg-3); } .ctx-sep { height:1px; background:var(--border); margin:5px 6px; } .ctx-note { padding:4px 11px 7px; font-size:10.5px; color:var(--fg-3); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* toast */ .toast-wrap { position:fixed; bottom:34px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; } .toast { background:#23272d; border:1px solid var(--border-2); border-left:3px solid var(--accent); border-radius:9px; padding:9px 14px; box-shadow:0 12px 34px rgba(0,0,0,.45); display:flex; align-items:center; gap:11px; animation:tin .18s ease-out; } @keyframes tin { from{opacity:0; transform:translateY(8px);} } .toast .tt { font-size:12.5px; color:var(--fg-0); } .toast .tref { font-family:var(--mono); font-size:11.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:2px 8px; } /* ============ status bar ============ */ .statusbar { height:23px; flex:0 0 23px; display:flex; align-items:center; gap:0; background:var(--bg-3); border-top:1px solid var(--border); font-size:11px; color:var(--fg-2); user-select:none; } .sb { display:flex; align-items:center; gap:6px; padding:0 11px; height:100%; } .sb:hover { background:var(--hover); } .sb.accent { background:var(--accent); color:#0c1320; } .sb.accent:hover { background:#5d97ff; } .sb.spacer { flex:1; } .sb .a{color:var(--add);} .sb .d{color:var(--del);} .sb b { font-weight:600; color:var(--fg-1); }