/* Scene stages recreate TAO CODING's own UI: values mirror src/index.css
   (18px root, so text-xs = 13.5px, text-2xs = 11.25px) and the xterm theme in
   src/lib/terminal-registry.ts. The window is 960×600 on a 1040×680 macOS
   desktop, the whole thing scaled by --s. Chrome is the macOS build: the OS
   traffic lights over an Overlay title bar (tauri.macos.conf.json), no custom
   window buttons. */
.scene { position: relative; margin: 0; aspect-ratio: 1040 / 680; max-width: 100%; border-radius: 12px; overflow: hidden; background: #0b0d12; min-width: 0; }
.scene .stage {
  --bg: #141414; --canvas: #0e0e0e; --card: #181818; --fg: #e3e3e3; --muted: #999; --accent: #252525;
  --border: #242424; --pane-border: #292929; --ring: #3f60a6; --activity: #facc14; --orange: #f97316; --sky: #00b0f4;
  position: absolute; top: 0; left: 0; width: 1040px; height: 680px; transform: scale(var(--s, 1)); transform-origin: 0 0;
  font: 13.5px/1.35 -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: var(--fg); letter-spacing: 0;
  background:
    radial-gradient(120% 90% at 15% 0%, #25324a 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, #3a2a24 0%, transparent 55%),
    linear-gradient(160deg, #141a26, #0b0d12 60%, #151013);
}
.scene .win { position: absolute; left: 40px; top: 36px; width: 960px; height: 600px; display: flex; flex-direction: column; background: var(--canvas); border-radius: 11px; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.1), 0 22px 70px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.35); }
.scene .lights { position: absolute; left: 13px; top: 14px; display: flex; gap: 8px; z-index: 2; }
.scene .lights b { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.scene .lights b:nth-child(1) { background: #ff5f57; } .scene .lights b:nth-child(2) { background: #febc2e; } .scene .lights b:nth-child(3) { background: #28c840; }
/* window chrome: title bar, navbar, workspace tabs (App.tsx, TitleBar, Navbar, WorkspaceTabs) */
.scene .tb { height: 40px; flex: none; display: flex; align-items: center; gap: 6px; padding-left: 80px; padding-right: 8px; background: var(--card); border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 600; }
.scene .tb .logo { width: 27px; height: 27px; }
.scene .tb .right { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 100%; font-weight: 400; }
.scene .quota { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--accent); font-size: 11.25px; font-variant-numeric: tabular-nums; }
.scene .quota .barq { width: 40px; height: 6px; border-radius: 9px; background: rgba(227,227,227,.15); overflow: hidden; }
.scene .quota .barq b { display: block; height: 100%; width: 38%; background: rgba(227,227,227,.6); border-radius: 9px; }
.scene .obtn { display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 11px; border: 1px solid var(--input, #2e2e2e); border-radius: 6px; font-size: 13.5px; }
.scene .obtn i { width: 16px; height: 16px; }
.scene .wbtn { width: 49px; height: 100%; display: grid; place-items: center; color: var(--muted); }
.scene .wbtn i { width: 16px; height: 16px; } .scene .wbtn.sm i { width: 14px; height: 14px; }
.scene .main { flex: 1; min-height: 0; display: flex; }
.scene .nav { width: 206px; flex: none; display: flex; flex-direction: column; background: var(--card); border-right: 1px solid var(--border); }
.scene .nav .hd { display: flex; align-items: center; gap: 6px; padding: 12px 12px 4px; font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(227,227,227,.8); }
.scene .badge { border-radius: 99px; padding: 0 6px; font-size: 11.25px; font-weight: 600; line-height: 16px; letter-spacing: 0; }
.scene .badge.red { background: #f14c4c; color: #fff; } .scene .badge.green { background: #23d18b; color: #000; }
.scene .wsrow { display: flex; align-items: center; gap: 6px; margin: 0 8px; padding: 6px 8px; border-radius: 6px; font-size: 15.75px; color: var(--muted); }
.scene .wsrow.on { background: var(--accent); color: #f0f0f0; }
.scene .wsrow .cnt { margin-left: auto; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scene .tree { margin: 2px 8px 4px 20px; padding-left: 6px; border-left: 1px solid var(--border); display: grid; gap: 1px; }
.scene .tree div { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 13.5px; }
.scene .tree .f { background: rgba(37,37,37,.7); }
.scene .tree .st { margin-left: auto; }
.scene .newws { display: flex; align-items: center; gap: 8px; margin: 4px 8px; padding: 6px 8px; color: var(--muted); font-size: 13.5px; }
.scene .hist { margin-top: auto; border-top: 1px solid var(--border); }
.scene .hist .hh { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(28,28,28,.4); border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(227,227,227,.8); }
.scene .hist .hh i { color: var(--muted); width: 13px; height: 13px; }
.scene .hist ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.scene .hist li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 15.75px; color: var(--muted); white-space: nowrap; }
.scene .hist li span { flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.scene .hist li small { font-size: 11.25px; color: rgba(153,153,153,.7); }
.scene .settings { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13.5px; }
.scene .content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scene .wtabs { height: 35px; flex: none; display: flex; align-items: stretch; background: var(--card); border-bottom: 1px solid var(--border); }
.scene .wtab { display: flex; align-items: center; gap: 8px; margin: 4px 0 4px 4px; min-width: 130px; padding: 0 12px; border-radius: 6px; font-size: 15.75px; color: var(--muted); }
.scene .wtab.on { background: var(--accent); color: #f0f0f0; }
.scene .wplus { display: grid; place-items: center; width: 28px; margin: 4px 0 4px 4px; color: var(--muted); }
.scene .workarea { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 4px 340px; background: var(--canvas); }
.scene i[data-i], .scene i[data-logo] { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; font-style: normal; }
.scene i svg { width: 100%; height: 100%; }
.scene [hidden] { display: none !important; }
/* Pane headers shrink like lib/header-layout.ts: branch name capped under
   320px of pane width, icon only under 260px. */
.scene .pane { container-type: inline-size; }
.scene .chip .t { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 319px) { .scene .chip .t { max-width: 90px; } }
@container (max-width: 259px) { .scene .chip .t { display: none; } .scene .ph .act i:not(:last-child) { display: none; } }
/* State icons get swapped at runtime (class rewritten), so size them here, once. */
.scene i.st { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; font-style: normal; }
.scene .xs { font-size: 13.5px; } .scene .x2 { font-size: 11.25px; line-height: 15.75px; } .scene .mut { color: var(--muted); }

/* panes */
.scene .panes { display: grid; grid-template-rows: 1fr 1fr; gap: 9px; padding: 9px; min-width: 0; min-height: 0; }
.scene .pane { display: flex; flex-direction: column; min-height: 0; background: var(--bg); border: 1px solid var(--pane-border); border-radius: 6px; overflow: hidden; transition: border-color .2s; }
.scene .pane.focus { border-color: var(--ring); }
.scene .ph { height: 31px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 7px; background: var(--card); border-bottom: 1px solid var(--border); font-size: 13.5px; white-space: nowrap; }
.scene .ph .title { flex: 1; overflow: hidden; text-overflow: ellipsis; padding-inline: 4px; }
.scene .ph .st { width: 14px; height: 14px; }
.scene .ph .chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: var(--muted); border-radius: 4px; padding: 1px 6px; font-size: 11.25px; }
.scene .ph .chip i { width: 12px; height: 12px; }
.scene .ph .act { color: var(--muted); display: flex; gap: 10px; padding-left: 4px; }
.scene .st.work { color: var(--activity); animation: sc-spin 1s linear infinite; }
.scene .st.done { color: #23d18b; }
.scene .st.block { color: #f14c4c; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.scene .term { flex: 1; min-height: 0; overflow: hidden; padding: 6px 8px; font: 12px/1.45 "JetBrains Mono", "Cascadia Mono", Consolas, monospace; color: #ccc; white-space: pre-wrap; }
.scene .term .w { color: #e5e5e5; } .scene .term .g { color: #23d18b; } .scene .term .d { color: #666; } .scene .term .c { color: #29b8db; } .scene .term .o { color: #d97757; } .scene .term .y { color: #f5f543; }
.scene .caret::after { content: ""; display: inline-block; width: 7px; height: 14px; background: #ccc; vertical-align: -2px; margin-left: 1px; }
.scene .prompt { color: #e5e5e5; }

/* right panel */
.scene .rp { grid-column: 3; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-left: 1px solid var(--border); }
.scene .tabs { display: flex; flex: none; background: rgba(28,28,28,.3); border-bottom: 1px solid var(--border); color: var(--muted); }
.scene .tabs span { padding: 7px 11px; border-bottom: 2px solid transparent; display: grid; place-items: center; }
.scene .tabs span.on { color: var(--fg); background: var(--bg); border-bottom-color: var(--orange); }
.scene .roster { flex: none; padding: 7px 9px 8px; }
.scene .roster .hd { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 5px; font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(227,227,227,.8); }
.scene .room { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 13.5px; background: var(--accent); }
.scene .room .n { margin-left: auto; font-size: 11.25px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scene .members { margin: 3px 0 0 12px; padding-left: 6px; border-left: 1px solid var(--border); display: grid; gap: 2px; min-height: 22px; }
.scene .member { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 4px; border-radius: 6px; font-size: 13.5px; }
.scene .member .st { width: 12px; height: 12px; }
.scene .member .idle { width: 6px; height: 6px; border-radius: 50%; background: rgba(153,153,153,.5); }
.scene .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 15%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.scene .av i { width: 14px; height: 14px; color: var(--c); }
.scene .av.sm { width: 18px; height: 18px; } .scene .av.sm i { width: 11px; height: 11px; }
.scene .divider { height: 4px; flex: none; border-top: 1px solid var(--border); }
.scene .rtitle { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 600; }
.scene .rtitle i { color: var(--muted); }
.scene .transcript { flex: 1; min-height: 0; overflow: hidden; padding: 4px; display: flex; flex-direction: column; gap: 2px; justify-content: flex-end; }
.scene .sys { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 11.25px; color: var(--muted); }
.scene .sys i { width: 12px; height: 12px; }
.scene .msg { padding: 4px; border-radius: 4px; animation: sc-in .35s ease-out; }
.scene .msg .top { display: flex; align-items: center; gap: 8px; }
.scene .msg .from { font-weight: 600; font-size: 13.5px; }
.scene .msg .to { font-size: 13.5px; }
.scene .msg .time { margin-left: auto; font-size: 11.25px; color: var(--muted); }
.scene .msg .body { margin-left: 32px; font-size: 13.5px; line-height: 1.55; }
.scene .msg code { background: #1c1c1c; border-radius: 4px; padding: 0 4px; font: 11.25px "JetBrains Mono", monospace; }
.scene .exec { margin: 2px 0 2px 32px; border-left: 2px solid var(--orange); background: rgba(249,115,22,.1); border-radius: 0 4px 4px 0; padding: 4px 4px 4px 8px; }
.scene .exec .lbl { font-size: 11.25px; font-weight: 600; color: var(--orange); display: flex; align-items: center; gap: 3px; }
.scene .exec .lbl i { width: 11px; height: 11px; }
.scene .exec .body { margin-left: 0; }
@keyframes sc-in { from { opacity: 0; transform: translateY(6px); } }
.scene .composer { flex: none; border-top: 1px solid var(--border); padding: 6px; }
.scene .cbox { border: 1px solid var(--border); border-radius: 6px; background: var(--card); transition: border-color .2s; }
.scene .cbox.exec-mode { border-color: rgba(249,115,22,.5); }
.scene .cbox.typing { border-color: var(--sky); }
.scene .ctext { min-height: 26px; padding: 6px 8px 4px; font-size: 13.5px; line-height: 18px; }
.scene .ctext:empty::before { content: attr(data-ph); color: var(--muted); }
.scene .ctools { display: flex; align-items: center; gap: 4px; padding: 0 4px 4px; font-size: 11.25px; color: var(--muted); }
.scene .ctools i { width: 12px; height: 12px; }
.scene .rcpt { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; }
.scene .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.scene .modes { display: flex; background: rgba(28,28,28,.6); border-radius: 4px; padding: 1px; }
.scene .modes span { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 3px; }
.scene .modes .on { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.scene .modes .on.x { background: rgba(249,115,22,.2); color: var(--orange); box-shadow: none; }
.scene .send { margin-left: auto; padding: 4px; color: rgba(153,153,153,.4); display: grid; }
.scene .send i { width: 14px; height: 14px; }
.scene .send.ready { color: var(--sky); } .scene .send.ready.x { color: var(--orange); }
.scene .pressed { filter: brightness(1.4); }

/* drag ghost + pointer */
.scene .ghost { position: absolute; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--pane-border); box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 13.5px; pointer-events: none; transition: left .7s ease-in-out, top .7s ease-in-out; transform: translate(-20%, -50%) scale(var(--s, 1)); transform-origin: 0 50%; }
.scene .rp.drop { box-shadow: inset 0 0 0 2px var(--orange); }
.scene .cursor { position: absolute; z-index: 5; left: 60%; top: 70%; width: 18px; height: 18px; margin: -2px 0 0 -3px; opacity: 0; pointer-events: none; transition-property: left, top, opacity; transition-timing-function: cubic-bezier(.45,.05,.25,1); }
.scene .cursor.on { opacity: 1; }
.scene .cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.scene .cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); opacity: 0; }
.scene .cursor.press::after { animation: sc-ping .45s ease-out; }
@keyframes sc-ping { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .scene .st.work { animation: none; } .scene .msg { animation: none; } }

/* pane layouts beyond two stacked panes */
.scene .panes.g3 { grid-template: 1fr 1fr / 1fr 1fr; } .scene .panes.g3 > :nth-child(3) { grid-column: 1 / 3; }
.scene .panes.g4 { grid-template: 1fr 1fr / 1fr 1fr; }
.scene .pane { animation: sc-in .3s ease-out; }
.scene .welcome { border: 1px solid #d97757; border-radius: 6px; padding: 4px 8px; color: #ccc; }

/* New-workspace composer (App.tsx overlay, Welcome/Welcome.tsx) */
.scene .overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.7); animation: sc-fade .2s ease-out; }
@keyframes sc-fade { from { opacity: 0; } }
.scene .dlg { width: 100%; max-width: 860px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 13.5px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); }
.scene .dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 9px 22px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.scene .dlg-h i { color: var(--muted); width: 18px; height: 18px; }
.scene .dlg-b { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; padding: 22px; background: var(--bg); }
.scene .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.scene .lbl { font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(227,227,227,.8); display: flex; justify-content: space-between; align-items: baseline; }
.scene .lbl small { font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.scene .field { display: flex; align-items: center; gap: 9px; border: 1px solid #2e2e2e; border-radius: 8px; padding: 4px 4px 4px 13px; font-size: 15.75px; }
.scene .field i { color: var(--muted); width: 18px; height: 18px; }
.scene .field .v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.scene .field .v:empty::before { content: "Choose a folder…"; color: var(--muted); }
.scene .field .browse { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; font-size: 13.5px; font-weight: 500; }
.scene .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.scene .chips span { border: 1px solid var(--border); border-radius: 6px; padding: 1px 9px; }
.scene .chips span.sel { border-color: var(--ring); background: var(--accent); color: var(--fg); }
.scene .agents-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.scene .agents-pick span { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; font-size: 13.5px; }
.scene .agents-pick span > i:first-child { color: var(--muted); width: 13px; height: 13px; }
.scene .plist { height: 171px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.scene .plist .empty { margin: auto; font-size: 13.5px; color: var(--muted); }
.scene .prow { display: flex; align-items: center; gap: 9px; padding: 4px 9px; border-radius: 6px; font-size: 15.75px; animation: sc-in .25s ease-out; }
.scene .prow b { width: 18px; text-align: right; font-weight: 400; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scene .prow i { width: 18px; height: 18px; }
.scene .lprev { height: 171px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.scene .lprev.empty { border-style: dashed; }
.scene .lprev .r { display: flex; gap: 4px; min-height: 0; }
.scene .lprev .c { flex: 1; border-radius: 3px; background: rgba(37,37,37,.4); display: grid; place-items: center; }
.scene .lprev .c i { width: 18px; height: 18px; }
.scene .sess { border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.scene .sess.empty { border-style: dashed; padding: 9px 13px; font-size: 13.5px; color: var(--muted); }
.scene .sess div { display: flex; align-items: center; gap: 9px; padding: 6px 9px; font-size: 15.75px; }
.scene .sess div span:not(.cb) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene .sess small { font-size: 13.5px; color: var(--muted); }
.scene .cb { width: 14px; height: 14px; border: 1px solid #555; border-radius: 3px; flex: none; display: grid; place-items: center; background: #1f1f1f; }
.scene .cb.on { background: #2f6fdb; border-color: #2f6fdb; }
.scene .cb.on::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.scene .dlg-f { display: flex; align-items: center; gap: 13px; padding: 13px 22px; border-top: 1px solid var(--border); }
.scene .dlg-f .wt { flex: 1; display: flex; align-items: center; gap: 9px; font-size: 15.75px; min-width: 0; white-space: nowrap; }
.scene .dlg-f .wt small { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.scene .dlg-f .hint { font-size: 13.5px; color: var(--muted); }
.scene .dlg-f .cancel { font-size: 13.5px; color: var(--muted); padding: 0 12px; }
.scene .create { height: 40px; display: flex; align-items: center; padding: 0 18px; border-radius: 6px; background: #2f6fdb; color: #fff; font-size: 15.75px; font-weight: 500; }

/* Git tab (Git/WorktreeSelector, ChangedFileList, InlineDiff, GitPanel) */
.scene .git { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.scene .git .sec { padding: 9px 9px 4px; font-size: 11.25px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.scene .git .pillc { border-radius: 99px; background: rgba(78,201,78,.15); color: #4ec994; padding: 0 6px; text-transform: none; }
.scene .wts { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.scene .wtr { display: flex; align-items: center; gap: 9px; padding: 4px 9px; border-left: 2px solid transparent; color: var(--muted); transition: background .2s; }
.scene .wtr .d { width: 7px; height: 7px; border-radius: 50%; background: rgba(153,153,153,.4); }
.scene .wtr i { width: 13.5px; height: 13.5px; }
.scene .wtr .b { flex: 1; }
.scene .wtr small { font-size: 11.25px; color: #4ec994; font-variant-numeric: tabular-nums; }
.scene .wtr.on { border-left-color: #4ec994; background: rgba(78,201,78,.1); color: #b5efca; }
.scene .wtr.on .d { background: #4ec994; }
.scene .files { flex: 1; min-height: 0; overflow: hidden; }
.scene .fr { display: flex; align-items: center; gap: 7px; padding: 4px 9px; }
.scene .fr .ch { width: 13px; font-size: 11.25px; color: rgba(153,153,153,.6); }
.scene .fr .s { width: 13px; font-size: 11.25px; font-weight: 700; }
.scene .fr .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene .fr .cnt { font-size: 11.25px; } .scene .fr .cnt .a { color: #4ec94e; } .scene .fr .cnt .r { color: #f14c4c; }
.scene .fr.open { background: rgba(37,37,37,.5); }
.scene .diff { border-left: 2px solid #4ec994; background: var(--canvas); padding: 4px 0; font: 12px/1.6 "JetBrains Mono", "Cascadia Mono", monospace; animation: sc-in .25s ease-out; }
.scene .diff div { display: flex; white-space: pre; }
.scene .diff .g { width: 30px; flex: none; padding-right: 6px; text-align: right; color: rgba(153,153,153,.5); }
.scene .diff .h { padding: 1px 13px; color: var(--muted); }
.scene .diff .add { background: rgba(78,201,78,.1); color: #4ec94e; } .scene .diff .del { background: rgba(241,76,76,.1); color: #f14c4c; } .scene .diff .ctx { color: var(--muted); }
.scene .gfoot { border-top: 1px solid var(--border); background: rgba(28,28,28,.3); padding: 4px 9px; font-size: 11.25px; color: var(--muted); display: flex; gap: 4px; }
.scene .gfoot .sha { margin-left: auto; font-family: "JetBrains Mono", monospace; }
.scene .gfoot.ok { color: #4ec994; } .scene .gfoot.warn { color: #e2c08d; }

/* Brewline demo shop, as rendered inside the preview and on the phone */
.scene .site { background: #faf7f2; color: #1d1b19; font: 11px/1.35 ui-sans-serif, system-ui, sans-serif; height: 100%; overflow: hidden; }
.scene .site .top { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #e7e0d6; }
.scene .site .top b { font-size: 13px; } .scene .site .top span { opacity: .7; }
.scene .site h1 { font-size: 15px; margin: 10px 12px 8px; }
.scene .site .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px; }
.scene .site .card { background: #fff; border: 1px solid #e7e0d6; border-radius: 8px; overflow: visible; }
.scene .site .bag { height: 52px; border-radius: 8px 8px 0 0; }
.scene .site .cb2 { padding: 6px 8px 8px; }
.scene .site .cb2 .t { display: flex; justify-content: space-between; font-weight: 600; font-size: 10.5px; }
.scene .site .cb2 p { margin: 2px 0 6px; font-size: 9.5px; opacity: .65; }
.scene .site .add { display: block; width: calc(100% + 26px); white-space: nowrap; background: #b5542b; color: #fff; border-radius: 6px; padding: 5px 8px; font-size: 9.5px; transition: width .4s; }
.scene .site.fixed .add { width: 100%; }
.scene .site.phone .grid { grid-template-columns: repeat(3, 118px); }
.scene .site.phone.fixed .grid { grid-template-columns: 1fr; }
.scene .site.phone .add { width: 100%; }

/* Website tab (Browser/AddressBar, BrowserColumn) */
.scene .bcol { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scene .abar { display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-bottom: 1px solid var(--border); color: var(--muted); }
.scene .abar > i, .scene .abar .ib { width: 24px; height: 24px; padding: 4px; border-radius: 4px; display: grid; place-items: center; }
.scene .abar .ib i { width: 16px; height: 16px; }
.scene .abar .ib.on { background: #1c1c1c; color: #0ea5e9; }
.scene .url { flex: 1; min-width: 0; border-radius: 99px; background: #1c1c1c; padding: 4px 13px; font-size: 13.5px; color: var(--fg); white-space: nowrap; overflow: hidden; }
.scene .zoom { font-size: 13.5px; padding: 2px 4px; }
.scene .pickstrip { padding: 4px 9px; font-size: 11.25px; color: var(--muted); background: rgba(14,165,233,.1); border-bottom: 1px solid var(--border); }
.scene .pview { flex: 1; min-height: 0; position: relative; }
.scene .hbox { position: absolute; border: 2px solid #0ea5e9; background: rgba(14,165,233,.12); pointer-events: none; }
.scene .htag { position: absolute; top: -18px; left: -2px; background: #0ea5e9; color: #fff; font: 11px/1.5 ui-monospace, monospace; padding: 0 4px; border-radius: 2px; white-space: nowrap; }
.scene .req { position: absolute; display: flex; align-items: center; gap: 6px; background: #1f1f1f; border: 1px solid #0ea5e9; border-radius: 4px; padding: 3px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.35); font: 12px system-ui, sans-serif; color: #e5e5e5; white-space: nowrap; z-index: 2; }
.scene .req .in { min-width: 190px; }
.scene .req .in:empty::before { content: attr(data-ph); color: #8b8b8b; }
.scene .req small { color: #8b8b8b; font-size: 11px; }
.scene .tray { flex: none; border-top: 1px solid var(--border); }
.scene .tray .cards { display: flex; gap: 7px; padding: 7px; }
.scene .tcard { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 4px; background: rgba(28,28,28,.3); padding: 4px; animation: sc-in .25s ease-out; }
.scene .tcard .ico { width: 45px; height: 45px; border-radius: 4px; background: #1c1c1c; color: #0ea5e9; display: grid; place-items: center; }
.scene .tcard .ico i { width: 20px; height: 20px; }
.scene .tcard .thumb { width: 45px; height: 45px; border-radius: 4px; overflow: hidden; position: relative; background: #faf7f2; }
.scene .tcard .rq { max-width: 144px; font-size: 11.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene .tcard > i { width: 13px; height: 13px; color: var(--muted); }
.scene .tray .tf { display: flex; align-items: center; gap: 4px; padding: 0 9px 7px; font-size: 11.25px; color: var(--muted); }
.scene .tray .tf span:first-child { flex: 1; }
.scene .tray .sendall { display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 11px; border-radius: 6px; background: #1f1f1f; color: var(--fg); font-size: 13.5px; font-weight: 500; }
.scene .tray .sendall i { width: 15px; height: 15px; }
.scene .ph .dev { color: #4ec9b0; }

/* Mobile tab (Mobile/MobilePanel, Capture/SelectionOverlay) */
.scene .mbar { display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-bottom: 1px solid var(--border); color: var(--muted); }
.scene .mbar .sel { flex: 1; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-size: 13.5px; color: var(--fg); display: flex; justify-content: space-between; align-items: center; }
.scene .mbar .sel i { width: 12px; height: 12px; }
.scene .mbar .x1 { font-size: 11.25px; padding: 2px 4px; }
.scene .mbar .ib { padding: 2px 4px; display: grid; } .scene .mbar .ib i { width: 16px; height: 16px; } .scene .mbar .ib.on { color: #4ec9b0; }
.scene .mirror { flex: 1; min-height: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); position: relative; }
.scene .screen { position: relative; height: 94%; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 3px; }
.scene .screen .sbar { height: 16px; background: #faf7f2; font: 9px system-ui; color: #1d1b19; display: flex; justify-content: space-between; padding: 3px 8px 0; }
.scene .sbox { position: absolute; border: 2px solid #4ec9b0; background: rgba(78,201,176,.1); pointer-events: none; }
.scene .spop { position: absolute; z-index: 2; display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); padding: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.4); font-size: 13.5px; white-space: nowrap; }
.scene .spop .in { width: 230px; overflow: hidden; }
.scene .spop .in:empty::before { content: "What should the agent do with this region?"; color: var(--muted); }
.scene .spop b { font-size: 11.25px; font-weight: 400; color: #4ec9b0; }
.scene .mnav { flex: none; display: flex; justify-content: center; gap: 18px; padding: 4px 0; border-top: 1px solid var(--border); color: var(--muted); }

/* Database tab (Database/DatabasePanel, TableList, ResultGrid, DataView) */
.scene .db { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.scene .conn { display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-bottom: 1px solid var(--border); color: var(--muted); }
.scene .conn .trig { display: flex; align-items: center; gap: 6px; padding: 2px 6px; color: var(--fg); }
.scene .conn .trig i { width: 13px; height: 13px; color: var(--muted); }
.scene .conn .edot { width: 9px; height: 9px; border-radius: 50%; background: #4ec994; }
.scene .conn .sp { flex: 1; } .scene .conn > i { width: 16px; height: 16px; margin-left: 4px; }
.scene .subt { display: flex; padding: 0 4px; border-bottom: 1px solid var(--border); }
.scene .subt span { padding: 4px 11px; border-bottom: 2px solid transparent; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.scene .subt span.on { border-color: rgba(227,227,227,.6); color: var(--fg); }
.scene .subt .abadge { border-radius: 99px; background: rgba(250,204,20,.2); color: var(--activity); font-size: 11.25px; padding: 0 6px; }
.scene .dsplit { flex: 1; min-height: 0; display: grid; grid-template-columns: 138px 1px 1fr; }
.scene .tlist { padding: 6px 0; } .scene .tlist .srch { margin: 0 6px 6px; height: 27px; border: 1px solid #2e2e2e; border-radius: 4px; padding: 3px 7px; color: var(--muted); }
.scene .tlist div.t { display: flex; align-items: center; gap: 6px; padding: 3px 9px; color: rgba(227,227,227,.9); }
.scene .tlist div.t i { width: 15px; height: 15px; color: var(--muted); }
.scene .tlist div.t.on { background: var(--accent); color: var(--fg); }
.scene .vsep { background: var(--border); }
.scene .gridv { min-width: 0; display: flex; flex-direction: column; }
.scene .fbar { padding: 6px 9px; border-bottom: 1px solid var(--border); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.scene .fbar i { width: 13px; height: 13px; }
.scene .rg { flex: 1; min-height: 0; overflow: hidden; font: 12px/25px "JetBrains Mono", "Cascadia Mono", monospace; }
.scene .rg .row { display: flex; height: 26px; border-bottom: 1px solid rgba(36,36,36,.6); white-space: nowrap; }
.scene .rg .row.hd { background: var(--card); border-bottom-color: var(--border); font-family: -apple-system, ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 13.5px; }
.scene .rg .row > span { flex: none; padding: 0 8px; border-right: 1px solid rgba(36,36,36,.6); overflow: hidden; text-overflow: ellipsis; }
.scene .rg .row > span:first-child { width: 40px; text-align: right; font-size: 11.25px; color: var(--muted); padding: 0 6px; border-right-color: var(--border); }
.scene .rg .hd small { font-size: 11.25px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.scene .rg .hd i { width: 13px; height: 13px; color: rgba(250,204,20,.8); vertical-align: -2px; margin-right: 3px; }
.scene .rg .w1 { width: 124px; } .scene .rg .w2 { width: 96px; } .scene .rg .w3 { width: 70px; }
.scene .rg .row.new { background: rgba(78,201,148,.1); animation: sc-in .25s ease-out; }
.scene .rg .ed { background: rgba(250,204,20,.15); }
.scene .rg .editing { box-shadow: inset 0 0 0 1px var(--ring); background: var(--bg); }
.scene .rg .def { font-style: italic; color: rgba(153,153,153,.6); }
.scene .dtool { display: flex; flex-wrap: wrap; row-gap: 2px; align-items: center; gap: 6px; padding: 4px 9px; border-top: 1px solid var(--border); background: var(--card); color: var(--muted); white-space: nowrap; }
.scene .dtool i { width: 15px; height: 15px; }
.scene .dtool .btn { display: flex; align-items: center; gap: 5px; height: 27px; padding: 0 9px; border-radius: 6px; font-weight: 500; color: var(--fg); }
.scene .dtool .btn i { width: 13px; height: 13px; }
.scene .dtool .pend { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.scene .dtool .pend .n { color: var(--activity); margin-right: 4px; }
.scene .dtool .commit { background: #2f6fdb; color: #fff; }

/* Architecture tab: archify diagram with the app theme and bridge overlays */
.scene .arch { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scene .stale { display: flex; align-items: center; gap: 9px; padding: 4px 9px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--muted); }
.scene .stale .b { border: 1px solid var(--border); border-radius: 4px; padding: 1px 9px; }
.scene .arch svg.dg { flex: 1; min-height: 0; width: 100%; }
.scene .dg text { font-family: "JetBrains Mono", ui-monospace, monospace; }
.scene .dg .node rect.k { stroke-width: 1.5; transition: stroke .3s; }
.scene .dg .node.pulse rect.k { stroke: var(--c); stroke-width: 3; animation: sc-pulse 1.1s ease-in-out infinite; }
@keyframes sc-pulse { 50% { stroke-width: 7; stroke-opacity: .35; } }
.scene .dg .node.hot rect.k { filter: drop-shadow(0 0 7px #4fc1ff); }
.scene .apop { position: absolute; width: 260px; z-index: 2; border: 1px solid var(--border); border-radius: 6px; background: #212121; padding: 13px; font-size: 13.5px; box-shadow: 0 10px 15px rgba(0,0,0,.4); animation: sc-in .2s ease-out; }
.scene .apop b { display: block; margin-bottom: 4px; color: #ebebeb; }
.scene .apop p { margin: 0; line-height: 1.6; color: var(--muted); }
.scene .apop code { font: 11.25px "JetBrains Mono", monospace; color: #ccc; }
@media (prefers-reduced-motion: reduce) { .scene .dg .node.pulse rect.k { animation: none; stroke-width: 5; } }
.scene .panes.g1 { grid-template-rows: 1fr; }