/* SyntaxUX — dark theme lifted from AIMacro's greyscale palette + prismatic glow */
/* Shared design-token vocabulary (single source of truth, sitewide). The CORE
   palette below now resolves to those semantic tokens (identical hex → zero
   visual change); legacy names (--bg2/--surface-hi/--muted/…) and --font are
   defined in tokens.css so every existing rule keeps working. */
@import 'dev-tokens.css';
:root{
  /* The CORE palette (--bg/--surface/--text/--border/--accent + legacy
     aliases + --font) now comes from tokens.css; only SyntaxUX-specific
     LAYOUT vars live here. */
  --rail:64px; --panel:360px;
  /* selection indicator for TILES (cards) — white, single sitewide source.
     Inputs get NO selection board at all (see the :focus-visible rules below). */
  --sel-ring:#ffffff;
  /* accent text on dark chips/badges/buttons/CTAs — a NEUTRAL light grey, NOT
     the old lavender var(--chip-fg) (which read as purple on tile hover etc.). */
  --chip-fg:#d8d8d8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:14px; overflow:hidden; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}   /* authoritative over author display rules */
/* keyboard focus visibility (dark theme hides the UA default) */
:focus-visible{outline:2px solid #cfcfcf;outline-offset:2px}
.tab:focus-visible,.big-btn:focus-visible,.back-btn:focus-visible{outline:2px solid #cfcfcf;outline-offset:3px;border-radius:12px}
/* tiles (cards): a selection/focus ring is fine — but WHITE, never purple */
.card:focus-visible{outline:2px solid var(--sel-ring);outline-offset:3px;border-radius:12px}
/* input boxes: no selection board at all (was a purple #5a6b9a outline) */
input:focus,textarea:focus,input:focus-visible,textarea:focus-visible,
#prompt:focus-visible,#search:focus-visible{outline:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a}

#app{display:grid;grid-template-columns:var(--rail) var(--panel) 1fr;height:100vh;
  grid-template-areas:"rail panel port"}
#rail{grid-area:rail}
#panel{grid-area:panel;position:relative}
#port{grid-area:port}

/* ── resizable + LEFT/RIGHT-orientable sidebar (desktop) ──────────────────────
   Drag the panel's port-facing edge to resize (--panel, persisted); right-click the
   panel or nav rail → "Sidebar orientation" → Left/Right moves the rail+panel to that
   side. Scoped to ≥761px so it never fights the ≤760px stacked mobile layout. */
.panel-resize{display:none}
@media (min-width:761px){
  #app[data-side="right"]{grid-template-columns:1fr var(--panel) var(--rail);
    grid-template-areas:"port panel rail"}
  /* a thin grab strip on the panel's port-facing edge (right edge on LEFT, left edge on RIGHT) */
  .panel-resize{display:block;position:absolute;top:0;bottom:0;width:7px;z-index:30;
    cursor:col-resize;touch-action:none}
  /* no glow on hover — the col-resize cursor is the only affordance; a faint tint only while dragging */
  .panel-resize.dragging{background:linear-gradient(90deg,transparent,#3a3a3a)}
  #app[data-side="left"]  .panel-resize{right:-3px}
  #app[data-side="right"] .panel-resize{left:-3px}
  body.panel-resizing{cursor:col-resize;user-select:none}
}

/* ── tab rail ─────────────────────────────────────────────────────────── */
#rail{
  background:linear-gradient(180deg,#141414,#101010);
  border-right:1px solid var(--border-lo);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;
}
.rail-brand{width:38px;height:38px;display:grid;place-items:center;margin-bottom:8px;
  color:#dadada;font-size:20px;filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
/* BLACKRAT logo on the rail — transparent mark (black rat + green glow), no tile/background behind it */
.rail-brand img{width:36px;height:36px;display:block;background:none;border-radius:0;
  /* brighter green glow BEHIND the mark so the black rat reads on the dark rail (a glow, not a tile) */
  filter:drop-shadow(0 0 5px rgba(0,255,80,.80)) drop-shadow(0 0 13px rgba(0,255,80,.50))}
.tab{
  width:50px;height:50px;border:1px solid transparent;border-radius:12px;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);transition:.16s ease;position:relative;
}
.tab .ico{font-size:17px;line-height:1}
.tab .lbl{font-size:8.5px;letter-spacing:.04em;text-transform:uppercase}
.tab:hover{background:var(--surface-hi);color:var(--text)}
.tab.active{color:#fff;background:#202020;border-color:#3a3a3a}
.tab.active::before{
  content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(255,255,255,.7)}
.rail-spacer{flex:1}
.rail-mode{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted-2);font-size:8px}
.rail-mode .dot{width:8px;height:8px;border-radius:50%;background:#444}
.rail-mode.live .dot{background:#cfcfcf;box-shadow:0 0 8px rgba(255,255,255,.7)}
.rail-mode.off  .dot{background:var(--bad)}

/* ── side panel ───────────────────────────────────────────────────────── */
#panel{
  background:linear-gradient(180deg,#191919,#151515);border-right:1px solid var(--border-lo);
  display:flex;flex-direction:column;min-height:0;
  position:relative;z-index:2;   /* above the port so the hologram can overflow onto it */
}
/* shared section "eyebrow" label — ONE definition so PROJECT, PROJECT STATUS, PLAN APPROVAL,
   etc. are always identical (single source of truth; layout lives on the containers below). */
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);line-height:1}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 6px}
.panel-head .hint{color:var(--muted-2);font-size:10px}

/* company wordmark — large title at the very top of the side panel, above PROJECT.
   Proxima Nova (normal weight); falls back to the system stack where the licensed
   font isn't available. "proxima-nova" = the Adobe Fonts/Typekit family name. */
.panel-brand{padding:16px 14px 10px;
  font-family:"proxima-nova","Proxima Nova",var(--font);
  font-size:32px;font-weight:600;font-style:normal;letter-spacing:.08em;
  color:#fff;line-height:1;white-space:nowrap;
  border-bottom:1px solid var(--border-lo)}   /* small divider between BLACKRAT and the project name */
/* project header (top of panel) */
.proj-head{display:flex;align-items:baseline;gap:10px;padding:10px 14px 9px;border-bottom:1px solid var(--border-lo)}
.ph-label{flex:none}   /* typography comes from the shared .eyebrow class */
.ph-name{flex:0 1 auto;min-width:0;font-size:15px;color:#eaeaea;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-vh{flex:none;margin-left:auto;align-self:center;background:transparent;border:1px solid var(--border);color:var(--text-dim);
  border-radius:var(--radius-sm,6px);width:26px;height:24px;font-size:13px;cursor:pointer;line-height:1;padding:0}
.ph-vh:hover{color:var(--brand-2);border-color:var(--brand-2);background:var(--surface-hi)}

/* agent bar (bottom): status text on the left + hologram from a button at the lower-right edge */
.agent-bar{display:flex;align-items:flex-end;flex:none;border-top:1px solid var(--border-lo);padding:10px 14px}
/* circular ⟳ redo button: replays the agent's last spoken message */
.redo-btn{margin-left:auto;align-self:center;width:30px;height:30px;border-radius:50%;
  background:#1d1d1d;border:1px solid #343434;color:var(--muted);font:inherit;font-size:16px;line-height:1;
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .15s,border-color .15s,color .15s,transform .15s}
.redo-btn:hover{background:var(--surface-hov);color:var(--text);border-color:#4a4a4a}
.redo-btn:active{transform:scale(.92)}
.redo-btn.spin{animation:redo-spin .6s ease}
@keyframes redo-spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.holo-meta{pointer-events:none}
.holo-name{font-size:12px;letter-spacing:.16em;color:#cfcfcf}
.holo-name span{color:var(--muted);letter-spacing:.1em}
.holo-status{font-size:10.5px;color:var(--muted);margin-top:2px}
.holo-status.busy{color:#cfcfcf}
/* "Agent Voice" volume row — a custom item inside the panel right-click menu (.ctx-menu lives below) */
.ctx-menu .mi-voice{padding:6px 11px 9px;cursor:default}
.mi-voice-title{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:7px}
.mi-voice-row{display:flex;align-items:center;gap:9px}
.mi-voice-row .ctx-lbl{font-size:12px;color:var(--muted);flex:none}
.mi-voice-row .ctx-val{flex:none;width:36px;text-align:right;font-size:12px;color:#cfcfcf;font-variant-numeric:tabular-nums}
.ctx-slider{flex:1;min-width:96px;appearance:none;-webkit-appearance:none;height:4px;border-radius:3px;background:#3a3a3a;outline:0}
.ctx-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#dadada;border:0;cursor:pointer}
.ctx-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#dadada;border:0;cursor:pointer}
/* hologram: a canal runs out from the big button's rainbow ring and the 3D head
   resolves to the right, OVERFLOWING the panel edge into the display port. */
.btn-row{position:relative;display:flex;align-items:center;justify-content:center}
/* The AI bar starts just OUTSIDE the centred button's outer ring (50% + ~ring radius) and
   ends AT the panel's right edge (right:10px) — `right` anchors it so it can never overflow
   "way past" into the port. Thin (64px box → a sleek bar with a round tip). */
/* canal canvas: starts AT the ring's outer edge (the bar stops at the ring) and runs
   to the panel edge; beyond the edge it projects a cone + holographic head into the
   port. z-index:1 keeps it BEHIND the ring (.big-btn is z-index:2). top nudged +6px to
   the button's optical centre (its 14px/2px margins sit the ring below the row centre);
   tall enough to give the projected head vertical room. */
#holo{position:absolute;top:calc(50% + 6px);left:calc(50% + 80px);width:900px;transform:translateY(-50%);
  height:320px;pointer-events:none;z-index:1}

/* checklist */
.checklist-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.checklist{overflow:auto;padding:2px 12px 12px;display:flex;flex-direction:column;gap:5px}
.ck{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:9px;
  background:#171717;border:1px solid var(--border-lo);font-size:12.5px;line-height:1.35}
.ck .mark{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #3a3a3a;margin-top:1px;display:grid;place-items:center;font-size:10px;color:#0a0a0a}
.ck.done .mark{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}
.ck.work .mark{border-color:#9e9e9e;animation:spin 1.1s linear infinite;border-top-color:transparent} /* LIVE work only */
.ck.pending .mark{border-color:#3a3a3a}                       /* static: queued / not started */
.ck.partial .mark{border-color:#6a6a6a}                       /* static: made, awaiting bake */
.ck.partial .mark::after{content:"";width:6px;height:6px;border-radius:50%;background:#6a6a6a}
.ck.miss .mark{border-color:#5a3a3a}
.ck .body{flex:1;min-width:0}
.ck .body .t{color:var(--text)}
.ck .body .s{color:var(--muted-2);font-size:11px;margin-top:1px;word-break:break-word}
.ck.miss .body .t{color:var(--muted)}
.ck-group{color:var(--muted-2);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin:8px 2px 1px}
/* asset quick-action chips */
.qa{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 6px}
.qa-chip{background:#1d1d1d;border:1px solid #343434;color:var(--chip-fg);border-radius:18px;padding:5px 12px;font:inherit;font-size:11.5px;cursor:pointer}
.qa-chip:hover{background:var(--surface-hov)}
.qa-chip.danger{color:#d98a8a;border-color:#4a3030}
.qa-chip.danger:hover{background:#3a2424;color:#f0a0a0}

/* right-click context menu (tiles) */
.ctx-menu{position:fixed;z-index:60;min-width:160px;background:#1a1a1a;border:1px solid #343434;border-radius:10px;
  padding:5px;box-shadow:0 16px 44px rgba(0,0,0,.6);font-size:13px}
.ctx-menu .mi{padding:7px 11px;border-radius:7px;color:#dcdcdc;cursor:pointer}
.ctx-menu .mi:hover,.ctx-menu .mi:focus{background:var(--surface-hov);outline:none}
.ctx-menu .mi.danger{color:#d98a8a}
.ctx-menu .mi.danger:hover,.ctx-menu .mi.danger:focus{background:#3a2424;color:#f0a0a0}
.ctx-menu .sep{height:1px;background:#2a2a2a;margin:4px 6px}

/* prompt + references */
.prompt-wrap{border-top:1px solid var(--border-lo);padding:10px 12px 14px;background:#141414}
.refs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px;min-height:0}
.chip{display:inline-flex;align-items:center;gap:6px;background:#1d1d1d;border:1px solid #343434;
  color:var(--chip-fg);border-radius:20px;padding:3px 9px;font-size:11px}
.chip b{font-weight:600;color:#fff}
.chip .x{color:var(--muted);cursor:pointer}
.chip .x:hover{color:#fff}
.prompt-box{position:relative;border-radius:12px;background:#0c0c0c;
  padding:3px;box-shadow:inset 0 3px 9px rgba(0,0,0,.85), inset 0 1px 0 rgba(0,0,0,.9),
  inset 0 0 0 1px #232323, 0 1px 0 #2b2b2b}
.prompt-box.drag-ref{box-shadow:inset 0 0 0 2px #9e9e9e, inset 0 3px 9px rgba(0,0,0,.7)}  /* drop a card here */
#prompt{
  width:100%;border:0;outline:0;resize:none;background:transparent;color:var(--text);
  border-radius:10px;padding:10px 11px;font-family:inherit;font-size:13px;line-height:1.45;
  min-height:60px;max-height:150px;
}
#prompt::placeholder{color:var(--muted-2)}
.at-menu{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);background:#1a1a1a;
  border:1px solid #333;border-radius:10px;max-height:200px;overflow:auto;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.at-menu .opt{padding:7px 11px;font-size:12.5px;display:flex;justify-content:space-between;gap:10px}
.at-menu .opt:hover,.at-menu .opt.sel{background:var(--surface-hov)}
.at-menu .opt .k{color:var(--muted-2);font-size:10.5px}

/* the big prismatic button — perfectly round, AIMacro rotating-spectrum halo */
.big-btn{position:relative;width:190px;height:190px;margin:14px auto 2px;border:0;background:transparent;
  display:grid;place-items:center;overflow:visible;z-index:2}   /* ring sits ABOVE the hologram canal */
/* FX canvas is larger than the 190px button and centred on it, so the soft
   bloom has room to fully decay (no clip, no bleed to the panel). Centred with
   a transform — NOT inset/width:auto, which a <canvas> (a replaced element)
   ignores, rendering off-centre at its intrinsic size. */
.big-btn #bigBtnFx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:240px;height:240px;pointer-events:none}
/* flat circular button — NO bevel; same surface as the project-tab tiles (.card) */
.big-face{position:relative;width:138px;height:138px;border-radius:50%;
  background:linear-gradient(180deg,#1e1e1e,#191919);
  border:1px solid var(--border-lo);
  transition:box-shadow .18s ease, border-color .18s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
/* hover/active match the tiles: lift via a drop shadow + border tint only — no inset bevel, never moves */
.big-btn:hover .big-face{border-color:#3d3d3d;box-shadow:0 16px 38px rgba(0,0,0,.6)}
.big-btn:active .big-face{border-color:#3d3d3d;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.big-label{font-size:17px;font-weight:700;letter-spacing:.16em;color:#f2f2f2;line-height:1;
  text-shadow:0 0 14px rgba(255,255,255,.22)}
.big-type{font-size:13px;font-weight:600;letter-spacing:.22em;color:#cfcfcf;line-height:1}
.big-btn.busy{cursor:progress}
.big-btn.busy .big-label{color:#cfcfcf}

/* ── display port ─────────────────────────────────────────────────────── */
#port{position:relative;z-index:1;min-width:0;overflow:hidden;background-color:#121212;
  background-image:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.7px),
    radial-gradient(130% 130% at 50% 32%, transparent 58%, rgba(0,0,0,.45)),
    radial-gradient(140% 120% at 70% -10%, #1e1e1e 0%, #161616 55%, #0f0f0f 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0}

/* background-feeling search */
.search-layer{position:absolute;top:0;left:0;right:0;height:96px;display:flex;align-items:center;
  justify-content:center;z-index:1;pointer-events:none}
/* SOLID recessed input (opaque so the dot grid never shows through), with a magnifying-glass
   icon on the LEFT and no placeholder words — the icon is the only affordance. */
.search-layer input{
  pointer-events:auto;width:min(520px,66%);text-align:left;
  background:#121212 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa0a6'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='16.5'%20y1='16.5'%20x2='21'%20y2='21'/%3E%3C/svg%3E") no-repeat 14px center;
  background-size:17px 17px;
  border:0;outline:0;border-radius:12px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  padding:11px 18px 11px 42px;color:var(--text);font-family:inherit;font-size:18px;line-height:1.45;
}
.search-layer input::placeholder{color:transparent}
.search-layer.hidden{display:none}

.back-btn{position:absolute;top:14px;left:16px;z-index:6;background:#1c1c1ccc;border:1px solid #333;
  color:var(--link);border-radius:9px;padding:6px 12px;font-size:12px;backdrop-filter:blur(6px)}
.back-btn:hover{background:var(--surface-hov);color:#fff}

/* the 3D view */
.view{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.view-hud{position:absolute;left:18px;bottom:16px;z-index:5;max-width:60%;pointer-events:none}
.view-hud .vt{font-size:18px;letter-spacing:.04em;color:#f0f0f0;text-shadow:0 2px 18px #000}
.view-hud .vs{font-size:12px;color:var(--muted);margin-top:3px}

/* grids */
.grid{position:absolute;inset:0;top:96px;overflow:auto;padding:18px 22px 28px;z-index:3;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px;align-content:start}
.card{background:linear-gradient(180deg,#1e1e1e,#191919);border:1px solid var(--border-lo);
  border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:box-shadow .18s ease, border-color .18s ease}
/* hover lifts via shadow only — tile never moves */
.card:hover{border-color:#3d3d3d;box-shadow:0 16px 38px rgba(0,0,0,.6)}
.card .thumb{height:118px;position:relative;display:grid;place-items:center;
  background:radial-gradient(80% 90% at 50% 30%,#262626,#161616);background-size:cover;background-position:center;
  color:#9e9e9e;font-size:40px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.card .thumb.has-img .glyph{display:none}
.card .thumb .badge{position:absolute;top:8px;right:8px;font-size:9px;letter-spacing:.08em;
  padding:2px 7px;border-radius:20px;background:#0d0d0dcc;border:1px solid #333;color:var(--muted)}
.card .thumb .badge.baked{color:#cfcfcf;border-color:#3a3a3a}
.card .thumb .badge.generated{color:var(--chip-fg);border-color:#343434}
.card .meta{padding:9px 11px}
.card .nm{font-size:13px;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .kd{font-size:10.5px;color:var(--muted-2);margin-top:2px;text-transform:uppercase;letter-spacing:.08em}
.card.proj .thumb{font-size:34px;color:#6a6a6a}
.card.proj.sel{border-color:var(--sel-ring);box-shadow:0 0 0 1px var(--sel-ring),0 12px 30px rgba(0,0,0,.5)}
.card.proj.sel .nm{color:#fff}
/* bulk-select (Assets grid): a full-width action bar + a per-card checkbox */
.sel-bar{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:0 2px 4px;
  color:var(--muted-2);font-size:12px}
.sel-bar .sb-btn{background:#1d1d1d;border:1px solid #343434;color:var(--chip-fg);border-radius:8px;
  padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.sel-bar .sb-btn:hover{background:var(--surface-hov)}
.sel-bar .sb-btn.danger{color:#d98a8a;border-color:#4a3030}
.sel-bar .sb-btn.danger:hover{background:#3a2424;color:#f0a0a0}
.sel-bar .sb-btn:disabled{opacity:.4;cursor:default;background:#1d1d1d}
.sel-bar .sb-count{margin-left:auto;margin-right:2px}
/* checkbox sits over the thumb; transparent until selected/hovered so it stays subtle */
.card .pick{position:absolute;top:8px;left:8px;z-index:4;width:22px;height:22px;padding:0;
  border-radius:6px;border:1px solid #4a4a4a;background:#0d0d0dcc;color:transparent;
  font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .12s,background .12s,border-color .12s,color .12s}
.card:hover .pick,.card.sel .pick{opacity:1}
.card .pick:hover{border-color:#9e9e9e}
.card.sel{border-color:var(--sel-ring);box-shadow:0 0 0 1px var(--sel-ring),0 12px 30px rgba(0,0,0,.5)}
.card.sel .pick{background:var(--sel-ring);border-color:var(--sel-ring);color:#111;opacity:1}
/* loading skeletons (reuses the pulse keyframe) */
.card.skeleton{pointer-events:none;cursor:default}
.card.skeleton .thumb{background:#1d1d1d;animation:pulse 1.2s ease-in-out infinite}
.sk-line{height:10px;border-radius:5px;background:#242424;margin:4px 0;animation:pulse 1.2s ease-in-out infinite}
.sk-line.short{width:55%}
/* designed empty state */
.grid-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:46vh;text-align:center;gap:8px}
.ge-glyph{font-size:54px;color:#383838}
.ge-head{font-size:16px;color:#cfcfcf}
.ge-sub{font-size:12.5px;color:var(--muted-2);max-width:360px;line-height:1.5}
.ge-cta{margin-top:10px;background:#1d1d1d;border:1px solid #343434;color:var(--chip-fg);border-radius:9px;padding:8px 16px;font:inherit;font-size:13px;cursor:pointer}
.ge-cta:hover{background:var(--surface-hov)}
.card.add{align-items:center;justify-content:center;border-style:dashed;color:var(--muted-2);
  min-height:160px;font-size:13px}
.card.add:hover{color:var(--chip-fg);border-color:#3d3d3d}
.card.add .plus{font-size:34px;margin-bottom:6px}
input.proj-name{width:86%;background:#0c0c0c;border:1px solid #3a3a3a;border-radius:8px;color:var(--text);
  padding:8px 10px;font:inherit;font-size:13px;outline:0;text-align:center}
input.proj-name:focus{border-color:#6a6a6a}   /* neutral, not purple — inputs get no coloured board */

.empty{position:absolute;inset:96px 0 0;display:grid;place-items:center;color:var(--muted-2);
  z-index:3;text-align:center;font-size:13px;pointer-events:none}

/* game embed */
.game-view{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center}
.game-view iframe{border:0;width:100%;height:100%;background:#000}
.game-view .msg{color:var(--muted);text-align:center;max-width:460px;line-height:1.6}
.game-view .msg code{background:#0e0e0e;border:1px solid #333;border-radius:6px;padding:2px 7px;color:var(--chip-fg)}

/* drop overlay — flat on the backdrop, no glow */
.drop{position:absolute;inset:0;z-index:30;background:#101010e6;display:grid;place-items:center}
.drop-inner{border:1px dashed #3a3a3a;border-radius:14px;padding:46px 68px;color:var(--muted);
  font-size:17px;letter-spacing:.04em}

/* agent transcript toast */
.stream{position:absolute;right:16px;top:16px;z-index:7;width:min(380px,40%);overflow:hidden;
  background:#121212ee;border:1px solid #2c2c2c;border-radius:12px;padding:11px 13px;
  font-size:12px;line-height:1.5;color:#cfcfcf;box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.stream-head{display:flex;align-items:center;gap:7px;margin:-2px 0 7px;padding-bottom:7px;border-bottom:1px solid #2a2a2a}
.st-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.st-title{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9e9e9e}
.st-sp{flex:1}
.st-btn{background:none;border:0;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 5px;border-radius:6px}
.st-btn:hover{color:#fff;background:#ffffff14}
.stream-body{max-height:38vh;overflow:auto}
.stream.collapsed .stream-body{display:none}
.stream .line{margin:0 0 6px}
.stream .tool{color:#cfcfcf}
.stream .tool::before{content:"▸ ";color:#6a6a6a}
.stream .res{color:var(--good)}
.stream .err{color:var(--bad)}
.stream .txt{color:#e6e6e6;white-space:pre-wrap}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
/* freshly-generated card gets a brief accent ring */
.card.flash{animation:flash 2.2s ease}
@keyframes flash{0%{box-shadow:0 0 0 2px #cfcfcf,0 0 26px rgba(255,255,255,.6)}100%{box-shadow:0 16px 38px rgba(0,0,0,.6)}}

/* respect reduced-motion: kill perpetual CSS motion (JS animators self-gate too) */
@media (prefers-reduced-motion: reduce){
  .ck.work .mark{animation:none}
  .tab.active::before{animation:none}
  .card.flash{animation:none}
  .card.skeleton .thumb,.sk-line{animation:none}
}

/* ── approval flow (plan → demo → review → generate) ───────────────────────── */
.approval-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.approval-wrap .panel-head{align-items:center}
.apr-exit{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 6px;border-radius:6px}
.apr-exit:hover{color:var(--bad);background:#2a2020}
.approval{overflow:auto;padding:2px 12px 12px;display:flex;flex-direction:column;gap:8px}
.apr-head .apr-title{font-size:14px;font-weight:650;color:var(--text);letter-spacing:.2px}
.apr-head .apr-sub{font-size:10.5px;color:var(--muted-2);margin-top:2px;text-transform:none}
.apr-pillars{display:flex;flex-wrap:wrap;gap:5px;margin:-2px 0 4px}
.apr-pillars span{font-size:10px;color:var(--chip-fg);background:#1d1d1d;border:1px solid #343434;
  border-radius:12px;padding:2px 9px;letter-spacing:.3px}
.apr-list{display:flex;flex-direction:column;gap:7px}
.apr-row{display:grid;grid-template-columns:auto 1fr;gap:9px;background:var(--surface);
  border:1px solid var(--border-lo);border-radius:11px;padding:9px 10px;transition:border-color .15s,background .15s}
.apr-row:hover{border-color:#3c3c3c}
.apr-votes{display:flex;flex-direction:column;gap:4px}
.apr-up,.apr-down{width:30px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:var(--field);cursor:pointer;font-size:14px;line-height:1;filter:grayscale(.6) opacity(.7);transition:all .12s}
.apr-up:hover,.apr-down:hover{background:var(--surface-hov);filter:none}
.apr-up.on{background:#1e2e1e;border-color:#3c5c3c;filter:none;box-shadow:0 0 0 1px #3c5c3c inset}
.apr-down.on{background:#2e1e1e;border-color:#5c3c3c;filter:none;box-shadow:0 0 0 1px #5c3c3c inset}
.apr-body{min-width:0}
.apr-row-title{font-size:12.5px;color:var(--text);font-weight:560;line-height:1.3}
.apr-ph{display:inline-block;margin-left:6px;font-size:9px;font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;padding:1px 6px;border-radius:9px;color:#ffcf8f;background:#2a2113;
  border:1px solid #5a4520;vertical-align:middle}
.apr-row-detail{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}
.apr-tag{display:inline-block;margin-top:5px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;
  padding:1px 7px;border-radius:9px;color:#bbb;background:#202020;border:1px solid #303030}
.apr-tag-world{color:#cfcfcf}.apr-tag-assets{color:#cfcfcf}.apr-tag-mechanics{color:#cfcfcf}
.apr-tag-audio{color:#cfcfcf}.apr-tag-ui{color:#cfcfcf}.apr-tag-fx{color:#cfcfcf}
.apr-note{grid-column:1 / -1;margin-top:8px;width:100%;box-sizing:border-box;resize:vertical;
  background:var(--field-dk);border:1px solid #4a3030;color:var(--text);border-radius:8px;
  padding:6px 8px;font:inherit;font-size:11.5px}
.apr-note:focus{outline:none;border-color:#6a4040}
.apr-timer{font-size:11px;color:var(--accent);text-align:center;padding:6px;letter-spacing:.4px;
  background:#1a1a1a;border:1px solid #333333;border-radius:9px}
.apr-timer.low{color:var(--warn);border-color:#403428}
.apr-error{color:var(--bad);font-size:12px;padding:12px;background:#2a2020;border:1px solid #4a3030;border-radius:10px}
.big-btn.disabled{opacity:.5;cursor:not-allowed}
.big-btn.disabled .big-label{color:var(--muted)}

/* ── voice input (mic button in the prompt box) ────────────────────────────── */
.mic-btn{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border);background:var(--field-lt);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;transition:all .15s}
.mic-btn:hover{color:var(--text);background:var(--surface-hov);border-color:#444}
.mic-btn.listening{color:#fff;background:#3a2030;border-color:#a04060;
  box-shadow:0 0 0 3px rgba(220,80,120,.25);animation:micPulse 1.1s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 3px rgba(220,80,120,.22)}50%{box-shadow:0 0 0 6px rgba(220,80,120,.10)}}
.prompt-box textarea{padding-right:44px}   /* room for the mic */
@media (prefers-reduced-motion: reduce){ .mic-btn.listening{animation:none} }

/* ── full mobile support: dev editor + play, any device size ──────────────── */
/* Tablet: narrow the side panel so the port keeps room. */
@media (max-width: 1024px){
  :root{ --panel:300px; }
}
/* Phone / small tablet: stack to a single column — content port on top, the
   control panel as a scrollable sheet, the tab rail as a bottom nav bar.
   Touch-first: bigger tap targets, no desktop-only hover reliance. */
@media (max-width: 760px){
  #app{
    grid-template-columns:1fr;
    grid-template-rows: 1fr minmax(0,46vh) calc(var(--rail) + env(safe-area-inset-bottom, 0px));
    grid-template-areas:"port" "panel" "rail";
  }
  #rail{
    flex-direction:row; align-items:center; justify-content:space-around;
    border-right:0; border-top:1px solid var(--border-lo);
    padding:4px 6px env(safe-area-inset-bottom, 0px); gap:2px;
    background:linear-gradient(0deg,#141414,#101010);
  }
  .rail-brand{display:none}
  .rail-spacer{display:none}
  .rail-mode{flex-direction:row;gap:5px}
  .tab{width:auto;flex:1;height:46px;flex-direction:row;gap:6px;border-radius:10px}
  .tab .lbl{font-size:11px}
  .tab.active::before{display:none}            /* the left accent bar makes no sense horizontally */
  #panel{
    border-right:0; border-top:1px solid var(--border-lo);
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
  /* the hologram head would shoot off a narrow screen — keep it inside the panel */
  #holo{left:auto;right:-10px;width:200px;height:120px}
  .big-btn{width:150px;height:150px}           /* fits two-up with the holo on a phone */
  /* roomy, thumb-sized controls */
  .prompt-box textarea{font-size:16px}         /* ≥16px stops iOS zoom-on-focus */
  .mic-btn{width:36px;height:36px}
  .apr-up,.apr-down{width:38px;height:34px}    /* bigger thumbs targets */
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important;gap:8px}
  .search-layer{position:static}
  .back-btn{padding:10px 14px;font-size:14px}
}
/* very small phones: single-column asset grid */
@media (max-width: 380px){
  .grid{grid-template-columns:1fr!important}
  .big-btn{width:128px;height:128px}
}
/* coarse-pointer (touch) devices of ANY size: remove hover-only affordances and
   enlarge hit areas, so a large touchscreen is first-class too. */
@media (pointer: coarse){
  .qa-chip,.chip,.tab{min-height:38px}
  .ctx-menu .mi{padding:11px 13px}
}

/* in-game touch controls overlay (PLAY on touch devices) — a virtual stick +
   action buttons rendered over the game view; hidden on non-touch by JS. */
.touch-controls{position:absolute;inset:0;pointer-events:none;z-index:8;display:none}
.touch-controls.on{display:block}
.tc-stick{position:absolute;left:18px;bottom:26px;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1.5px solid rgba(255,255,255,.18);pointer-events:auto;touch-action:none}
.tc-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(255,255,255,.35);border:1.5px solid rgba(255,255,255,.6)}
.tc-btns{position:absolute;right:18px;bottom:26px;display:grid;grid-template-columns:repeat(2,64px);
  gap:12px;pointer-events:auto}
.tc-btn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,255,255,.5);color:#eaeaea;font-size:13px;display:grid;place-items:center;
  user-select:none;touch-action:none}
.tc-btn:active,.tc-stick:active{filter:brightness(1.4)}
.apr-cost{font-size:11px;color:var(--muted);text-align:center;padding:4px 6px;font-style:italic}

/* ── version-history viewer (immutable VC: revert / cherry-pick) ───────────── */
.vh-back{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.62);
  display:grid;place-items:center;backdrop-filter:blur(2px)}
.vh-box{width:min(560px,92vw);max-height:84vh;overflow:auto;background:#161616;
  border:1px solid #343434;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);padding:16px 18px}
.vh-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#eaeaea;margin-bottom:12px}
.vh-head b{color:#fff}
.vh-x{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;line-height:1}
.vh-x:hover{color:#fff}
.vh-commit{width:100%;border:1px solid #3a3a3a;background:#202020;color:#cfcfcf;border-radius:9px;
  padding:9px;font-size:12.5px;cursor:pointer;margin-bottom:12px}
.vh-commit:hover{background:#2a2a2a}.vh-commit:disabled{opacity:.6;cursor:default}
.vh-list{display:flex;flex-direction:column;gap:8px}
.vh-empty{color:var(--muted-2);font-size:12.5px;text-align:center;padding:18px 6px}
.vh-row{border:1px solid var(--border-lo);border-radius:10px;padding:9px 11px;background:var(--surface)}
.vh-meta{display:flex;align-items:baseline;gap:9px;font-size:12.5px;flex-wrap:wrap}
.vh-meta code{color:#cfcfcf;font-size:11.5px}
.vh-msg{color:#eaeaea;flex:1 1 auto;min-width:0}
.vh-files{color:var(--muted-2);font-size:11px}
.vh-acts{display:flex;gap:8px;margin-top:8px}
.vh-acts button{border:1px solid #3a3a3a;background:#202020;color:#cfcfcf;border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer}
.vh-acts button:hover{background:#2a2a2a;border-color:#4a4a4a}
.vh-pick{margin-top:9px;border-top:1px solid var(--border-lo);padding-top:9px;display:flex;flex-direction:column;gap:5px}
.vh-pick label{font-size:12px;color:#cfcfcf;display:flex;align-items:center;gap:7px;cursor:pointer}
.vh-go{align-self:flex-start;margin-top:6px;border:1px solid #3a3a3a;background:#202020;color:#cfcfcf;border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer}