/* ===== The Deck — Jack's black command room =====
   Ported from the locked mockup design/mockups/2026-07-12/jack-final.html:
   pure-black room, a hairline "line system" aesthetic (thin borders, tick
   marks, precise geometry — the dynamic version of that lives in core.js's
   canvas), Focus du jour + Suivis (left) / Équipe + Projets (right), a
   central conversation panel (scrollable session chat) over Jack's ambient
   Core, an Activité ticker, and a composer bar. A directive still glides a
   stage panel in over everything; the Core docks to a corner while it's up. */

/* Pin the Deck to DARK regardless of OS color-scheme. deck.css colors text
   and icons via the shared app.css tokens below, but app.css flips those
   tokens between light/dark depending on `prefers-color-scheme`, while the
   Deck's own surfaces (.glass, #lab.deck-root background) are hardcoded
   black — re-declare every token deck.css consumes here, scoped to
   #lab.deck-root, so they win over whichever app.css block matched and the
   Deck always reads as the same black room, on any device/theme.
   Legacy token names (--fg/--accent/…) are kept so anything app.css/board.css
   -styled that renders INSIDE the Deck (the board in the stage panel, inputs)
   still gets pinned dark surfaces instead of the OS-light values — that
   caused a real white-cards-white-text bug before. The mockup's own token
   names (--t1/--t2/--t3/--blue/--violet/…) are ADDED alongside for exact
   fidelity in the panels below. */
#lab.deck-root {
  --deck-chat-w: clamp(332px, 29vw, 384px); /* right chat sidebar (~380px on wide screens) */
  --bg: #000;
  --panel: rgba(12, 11, 17, .58);
  --line: rgba(132, 124, 196, .15);
  --line-strong: rgba(140, 148, 224, .28);
  --t1: #f7f6f4;
  --t2: #9aa0b5;
  --t3: #868aa3;
  --dial: #f4ecdd;
  --blue: #5da8f7;
  --violet: #8b6cf0;
  --pink: #e48acb;
  --cyan: #4fd1ff;
  --indigo: #4a3fbf;

  /* legacy tokens consumed by app.css/board.css-styled content inside the Deck */
  --fg: var(--t1);
  --fg-muted: var(--t2);
  --fg-dim: var(--t3);
  --accent: var(--blue);
  --accent-2: var(--violet);
  --accent-soft: #a9b8f2;
  --accent-fg: #05060a;
  --bg-elev: #0c0b11;
  --bg-sidebar: #0a0a0e;
  --bg-input: #17161f;
  --border: rgba(132, 124, 196, .18);
  --border-strong: rgba(140, 148, 224, .3);
  --bubble-user: #17161f;
  --bubble-asst: transparent;
  --code-bg: #17161f;
  --tool-bg: #0e0d13;
  --tool-border: rgba(140, 148, 224, .22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 10px 36px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

/* ---- scrollbars: thin, transparent track, rounded violet thumb — the
   default gray bar reads as a foreign object on the black room. Scoped to
   everything inside the Deck (chat, side columns, stage body). ---- */
#lab.deck-root * { scrollbar-color: rgba(139, 108, 240, .35) transparent; }
#lab.deck-root ::-webkit-scrollbar { width: 6px; height: 6px; }
#lab.deck-root ::-webkit-scrollbar-track { background: transparent; }
#lab.deck-root ::-webkit-scrollbar-corner { background: transparent; }
#lab.deck-root ::-webkit-scrollbar-thumb { background: rgba(139, 108, 240, .35); border-radius: 999px; }
#lab.deck-root ::-webkit-scrollbar-thumb:hover { background: rgba(139, 108, 240, .55); }

.glass {
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  border-radius: 12px;
}

/* ---- root ---- */
#lab.deck-root {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  font-family: 'Inter', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
}
@media (max-width: 768px) { #lab.deck-root { grid-column: 1; } }

/* ---- desktop full-bleed: with the Deck open, hide the sidebar and let the
   Deck fill the window. deck.js toggles #app.deck-active on openLab()/
   closeLab(). Mobile (<=820px) is untouched — off-canvas drawer already. ---- */
@media (min-width: 769px) {
  #app.deck-active { grid-template-columns: 1fr; }
  #app.deck-active #sidebar { display: none; }
  #app.deck-active #lab.deck-root { grid-column: 1; }
}

/* ---- ambient: two static, very low-opacity corner glows (never animated —
   the mockup's own .atmo has none) + a soft scrim behind the dialogue for
   text legibility over the line-field. ---- */
.deck-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deck-glow { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; }
.deck-glow-a {
  top: -20%; left: -10%;
  background: radial-gradient(circle, rgba(93, 168, 247, .05), transparent 68%);
}
.deck-glow-b {
  bottom: -24%; right: -14%;
  background: radial-gradient(circle, rgba(139, 108, 240, .05), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) { .deck-glow { transition: none; } }

/* Legibility gradient behind the centre hero (lives inside .deck-center). */
.deck-scrim {
  position: absolute; inset: 4% 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 68%);
}

/* ---- top bar: brand + status pill + clock + nav icons ---- */
.deck-topbar {
  position: relative; z-index: 6;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px 10px;
  gap: 14px;
}
.deck-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.deck-brand-mark { display: flex; flex: none; opacity: .92; }
.deck-brand-name { font-size: 15px; font-weight: 700; letter-spacing: .3em; color: var(--t1); }
.deck-brand-sep { width: 1px; height: 13px; background: var(--line-strong); flex: none; }
.deck-brand-sub {
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-top-right { display: flex; align-items: center; gap: 14px; flex: none; }
.deck-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
}
.deck-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: deckPulse 3.2s ease-in-out infinite; flex: none; }
.deck-pill-txt {
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .16em; color: var(--t2); text-transform: uppercase; white-space: nowrap;
}
@keyframes deckPulse { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
[data-deck-state="listening"] .deck-pill-dot, [data-deck-state="wake"] .deck-pill-dot { animation-duration: 1.1s; }
[data-deck-state="thinking"] .deck-pill-dot { background: var(--violet); animation-duration: .9s; }
[data-deck-state="wake"] .deck-pill-dot { background: var(--cyan); }
[data-deck-state="speaking"] .deck-pill-dot { animation-duration: 1.6s; }
[data-deck-state="listening"] .deck-pill, [data-deck-state="wake"] .deck-pill { border-color: rgba(130, 150, 235, .42); }
.deck-clock {
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .1em; color: var(--t3); text-transform: uppercase; white-space: nowrap;
}
.deck-date { display: none; }
.deck-topbar .icon-btn { color: var(--t3); }
.deck-topbar .icon-btn:hover { color: var(--t1); background: rgba(255, 255, 255, .06); }

/* voice mute kill-switch: slash hidden when live, shown + red when muted */
.deck-mute .mute-slash { display: none; }
.deck-mute.is-muted { color: #ff5c6c; }
.deck-mute.is-muted:hover { color: #ff7480; background: rgba(255, 92, 108, .10); }
.deck-mute.is-muted .mute-waves { display: none; }
.deck-mute.is-muted .mute-slash { display: block; }

/* ---- waiting-on-you pill (kept from before, restyled) ---- */
.deck-waiting-pill {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(228, 138, 203, .38);
  background: rgba(228, 138, 203, .1);
  color: var(--pink);
  font-size: 11px; font-weight: 600;
}
.deck-waiting-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); animation: deckPulse 1.6s ease-in-out infinite; flex: none; }

/* ---- main: desktop (>=769px) = a 2x2 grid — the work area (left panel stack
   + centre hero) on the left, the CHAT SIDEBAR (~380px, full height, composer
   at its bottom) on the right spanning both rows, the Activity ticker under
   the work area only. The stage panel lives INSIDE .deck-center, so a `jack`
   directive never covers the chat — Jack can talk about what he is showing.
   Mobile (<=768px) = a vertical stack: scrolling work area (hero first, then
   the panels), ticker, then the chat area with the composer at the very
   bottom. ---- */
.deck-main { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; }
@media (min-width: 769px) {
  .deck-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--deck-chat-w);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "shell chat" "ticker chat";
    gap: 0 18px;
    padding: 0 22px 10px 0;
  }
}
.deck-shell {
  grid-area: shell;
  position: relative; z-index: 1;
  min-height: 0; min-width: 0;
  display: grid;
  grid-template-columns: minmax(236px, 300px) minmax(0, 1fr);
  grid-template-areas: "left center";
  gap: 18px;
  padding: 6px 0 6px 28px;
  overflow: hidden;
}
.deck-col-left {
  grid-area: left;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  padding-right: 2px;
}
/* Centre = the Jarvis hero. The Core canvas is an absolutely-centred ambient
   layer (desktop); the tiny state label + hint sit at the bottom of the
   column; the stage panel overlays THIS column only. */
.deck-center {
  grid-area: center;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 7px;
  min-height: 0; min-width: 0;
  padding: 4px 8px 16px;
}
[data-deck-state="wake"] .deck-center { transform: scale(1.012); transition: transform .5s cubic-bezier(.2, .7, .3, 1); }

@media (max-width: 1180px) {
  #lab.deck-root { --deck-chat-w: clamp(300px, 30vw, 348px); }
  .deck-shell { grid-template-columns: minmax(212px, 252px) minmax(0, 1fr); gap: 12px; padding: 6px 0 6px 16px; }
}
@media (max-width: 768px) {
  .deck-main { display: flex; flex-direction: column; }
  .deck-shell {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    padding: 4px 12px 8px;
    gap: 14px;
  }
  /* Hero first, panel stack after; each block sizes to its content. */
  .deck-center { order: -1; flex: none; justify-content: flex-start; padding: 2px 2px 8px; }
  .deck-col-left { flex: none; min-height: auto; overflow: visible; }
  /* Safety cap: a canvas created at desktop size (window shrunk without a
     reload) must scale down instead of blowing the stacked column apart. */
  .deck-core-dock { max-width: 100%; }
  .deck-core-dock canvas { max-width: 100%; height: auto; }
}

@media (max-width: 480px) {
  .deck-topbar { padding: 10px 10px 6px; gap: 6px; }
  .deck-brand-sep { display: none; }
  .deck-clock, .deck-date { display: none; }
  .deck-top-right { gap: 8px; }
  .deck-waiting-pill { padding: 5px 9px; gap: 6px; }
  .deck-waiting-label { display: none; }
  .deck-pill { padding: 5px 9px; }
}

/* ---- panel recipe (Focus/Suivis/Équipe/Projets) ---- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
}
.panel::before {
  content: ""; position: absolute; top: -1px; left: 14px; width: 26px; height: 1px;
  background: linear-gradient(90deg, rgba(93, 168, 247, .65), rgba(139, 108, 240, .4));
}
.panel::after {
  content: ""; position: absolute; inset: -1px; border-radius: 12px;
  border: 1px solid rgba(79, 209, 255, .55); opacity: 0; pointer-events: none;
}
[data-deck-state="wake"] .panel { transform: translateY(-2px); transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
[data-deck-state="wake"] .panel::after { animation: deckWakeFlash 1.1s ease-out both; }
@keyframes deckWakeFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.p-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.p-title {
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--t3);
}
.p-meta {
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .08em; color: var(--blue); white-space: nowrap;
}

/* focus du jour */
.f-item { position: relative; padding: 8px 0 8px 13px; border-top: 1px solid rgba(140, 140, 196, .09); }
.f-item:first-of-type { border-top: none; padding-top: 0; }
.f-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(93, 168, 247, .3); }
.f-item.live::before { background: var(--blue); }
.f-main { font-size: 13px; font-weight: 500; color: var(--t1); line-height: 1.35; }
.f-sub { font-size: 11px; color: var(--t3); margin-top: 2px; line-height: 1.4; }
.f-tag {
  display: inline-block; margin-top: 6px;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: .14em; color: var(--blue);
  border: 1px solid rgba(93, 168, 247, .32); border-radius: 4px; padding: 2px 6px; text-transform: uppercase;
}

/* suivis */
.s-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(140, 140, 196, .09); }
.s-row:first-of-type { border-top: none; padding-top: 0; }
.s-box { flex: none; width: 11px; height: 11px; margin-top: 2px; border: 1px solid rgba(140, 140, 196, .38); border-radius: 3px; }
.s-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--t2); line-height: 1.4; }
.s-txt b { font-weight: 600; color: var(--t1); }
.s-due { flex: none; font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .06em; color: var(--t3); text-transform: uppercase; margin-top: 3px; }
.s-due.today { color: var(--pink); }
.s-more { padding-top: 9px; font-size: 11px; color: var(--t3); }

/* équipe */
.agent { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(140, 140, 196, .09); }
.agent:first-of-type { border-top: none; padding-top: 0; }
.a-init {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--t2); letter-spacing: .04em; background: rgba(140, 140, 196, .05);
}
.a-id { flex: 1; min-width: 0; }
.a-name { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.a-role { font-size: 10px; color: var(--t3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-st { flex: none; display: flex; align-items: center; gap: 6px; max-width: 40%; }
.a-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: deckPulse 3s ease-in-out infinite; }
.a-dot.idle { background: rgba(140, 140, 196, .38); animation: none; }
.a-txt { font-size: 10px; color: var(--t3); text-align: right; line-height: 1.3; }
.agent.active { background: rgba(93, 168, 247, .07); margin: 0 -8px; padding: 7px 8px; border-radius: 8px; }
.agent.active .a-init { border-color: rgba(93, 168, 247, .48); color: var(--blue); }
.agent.active .a-txt { color: var(--blue); }
.agent.active .a-dot { animation-duration: 1s; }

/* projets */
/* compact: capped so Team below it stays reachable in the stacked left rail */
.deck-projets-list { max-height: 164px; overflow-y: auto; scrollbar-width: thin; }
.prj { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid rgba(140, 140, 196, .09); font: inherit; width: 100%; text-align: left; color: inherit; background: none; border-left: none; border-right: none; border-bottom: none; cursor: pointer; }
.prj:first-of-type { border-top: none; padding-top: 0; }
.prj:hover .prj-name { color: var(--t1); }
.prj-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgba(140, 140, 196, .38); }
.prj-dot.on { background: var(--blue); animation: deckPulse 3s ease-in-out infinite; }
.prj-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prj-name { min-width: 0; font-size: 12px; font-weight: 500; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prj-sub { min-width: 0; font-size: 10px; color: var(--t3); opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prj-tel { font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .05em; color: var(--t3); text-transform: uppercase; white-space: nowrap; flex: none; }
.prj-tel.on { color: var(--blue); }

.deck-empty { padding: 4px 0; text-align: left; color: var(--t3); font-size: 12px; }

/* ---- centre chrome: the tiny live-state label + idle hint under the hero. ---- */
.d-label {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 18px;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--t3);
}
.d-label .live { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: deckPulse 1.1s ease-in-out infinite; flex: none; }
.d-label .on { color: var(--blue); }
.d-label svg { display: block; flex: none; }

/* The canvas sizes itself (crisp, internal res == display) via createCore's
   computed `size`; the dock just wraps it. */
.deck-core-dock { position: relative; z-index: 2; pointer-events: none; line-height: 0; }
.deck-core-dock canvas { display: block; }

/* HERO (idle, no stage panel): a big ambient layer filling the centre column,
   BEHIND the conversation panel (the panel's blurred background keeps its text
   readable while the field glows through). Desktop only — the field spreads
   across the whole centre without sliding under the side panels (its width is
   clamped to the column in JS). */
@media (min-width: 769px) {
  .deck-core-dock.core-hero {
    position: absolute; left: 50%; top: 46%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
}
/* Phone: stays in the normal stacked flow (createCore caps its size at 320). */

/* Docked to a corner while a stage panel is open (any width). Force the
   display size small regardless of the big internal resolution. */
.deck-core-dock.core-docked { position: absolute; left: 14px; bottom: 14px; z-index: 21; }
.deck-core-dock.core-docked canvas { width: 60px !important; height: 60px !important; }

/* ---- the conversation SIDEBAR (right): glass column, full height on
   desktop — slim header, the scrollable chat, the composer at its bottom.
   Bubble/scrollback/live-typing mechanics are untouched; only where the
   panel lives changed. ---- */
.deck-chat-side {
  grid-area: chat;
  position: relative; z-index: 2;
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
  background: rgba(9, 9, 14, .62);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
@media (min-width: 769px) { .deck-chat-side { margin: 6px 0 0; } }

/* "Jack is logged out" banner — first thing in the chat column, red while his
   Claude login is dead, green for a few seconds once it is back. flex: none so it
   keeps its full height inside the flex column instead of being squeezed. */
.deck-auth-banner { flex: none; margin: 8px 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.55); color: var(--t1); font-size: 13px; display: grid; gap: 8px; }
.deck-auth-banner.ok { background: rgba(52,199,123,.14); border-color: rgba(52,199,123,.55); }
.dab-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--t1); cursor: pointer; }
.dab-btn:hover { background: rgba(255,255,255,.14); }
.dab-link { color: var(--blue); text-decoration: underline; word-break: break-all; }
.dab-input { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: var(--t1); }
.dab-step { color: var(--t2); }
.dab-flow { display: grid; gap: 6px; }
.dab-row { display: flex; gap: 8px; align-items: center; }
.dab-btn-quiet { background: transparent; }

.deck-chat-side-head {
  flex-shrink: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.deck-chat-side-title {
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--t3);
}
.deck-chat-side-sub {
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3);
}
[data-deck-state="listening"] .deck-chat-side-sub,
[data-deck-state="speaking"] .deck-chat-side-sub { color: var(--blue); }

.deck-chat {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; scrollbar-width: thin;
  padding: 14px 14px 12px;
  text-align: left;
}

.deck-chat-empty {
  margin: auto; padding: 12px;
  text-align: center;
  font-size: 16.5px; font-weight: 300; line-height: 1.45; color: var(--dial);
}

@media (max-width: 768px) {
  .deck-chat-side {
    flex: none;
    height: 42vh; min-height: 250px;
    margin: 0;
    border-left: none; border-right: none; border-bottom: none;
    border-radius: 0;
  }
  .deck-chat-side-head { display: none; }
}
.deck-chat-empty .sub {
  display: block; margin-top: 14px;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--t3);
}

.msg { max-width: 88%; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.msg.her { align-self: flex-end; align-items: flex-end; }
.msg.jack { align-self: flex-start; align-items: flex-start; }
.msg-head {
  display: flex; align-items: center; gap: 6px; padding: 0 2px;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3);
}
.msg-head .on { color: var(--blue); }
.msg-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: deckPulse 1.1s ease-in-out infinite; flex: none; }
.msg.queued .msg-head::after { content: '· queued'; color: var(--t3); opacity: .85; }
.msg-body {
  min-width: 0; max-width: 100%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 300; line-height: 1.5;
  overflow-wrap: break-word;
}
.msg.her .msg-body {
  background: rgba(93, 168, 247, .13);
  border: 1px solid rgba(93, 168, 247, .2);
  border-bottom-right-radius: 4px;
  color: var(--t1);
}
.msg.jack .msg-body {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(140, 140, 196, .16);
  border-bottom-left-radius: 4px;
  color: var(--dial);
}
.msg-body p { margin: 0 0 6px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body ul, .msg-body ol { margin: 4px 0; padding-left: 20px; }
.msg-body .think-line { font-size: 13.5px; }

/* Inline chat attachments — a playable audio card or a clickable file link,
   rendered INSIDE Jack's bubble (see web/js/attachments.js), never the stage. */
.msg-attach { display: block; }
.msg-attach-audio {
  margin: 10px 0 2px;
  padding: 9px 11px;
  border: 1px solid rgba(139, 108, 240, .28);
  border-radius: 12px;
  background: rgba(139, 108, 240, .08);
}
.msg-attach-audio .att-title {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px;
  font-size: 12.5px; font-weight: 400; color: var(--t2);
  overflow-wrap: anywhere;
}
.msg-attach-audio .att-title svg { color: var(--violet); flex: none; }
.att-audio { display: block; width: 100%; height: 34px; }
.msg-attach-file {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px 13px; text-decoration: none;
  border: 1px solid rgba(93, 168, 247, .3); border-radius: 10px;
  background: rgba(93, 168, 247, .1);
  color: var(--blue); font-size: 13.5px; font-weight: 400;
}
.msg-attach-file:hover { background: rgba(93, 168, 247, .16); }
.msg-attach-file svg { flex: none; }

.caret { display: inline-block; width: 2px; height: 1em; margin-left: 4px; vertical-align: -.1em; background: var(--blue); animation: deckBlink 1s steps(1) infinite; }
@keyframes deckBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

.think-line { font-size: 17px; font-weight: 300; color: var(--t2); }
.think-dots span { display: inline-block; width: 4px; height: 4px; margin-left: 5px; border-radius: 50%; background: var(--t3); animation: deckTdot 1.2s ease-in-out infinite; }
.think-dots span:nth-child(2) { animation-delay: .15s; }
.think-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes deckTdot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.deleg {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 14px;
  border: 1px solid rgba(139, 108, 240, .4); border-radius: 999px; background: rgba(139, 108, 240, .08);
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet);
}
.deleg .d-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); animation: deckPulse 1s ease-in-out infinite; }

.d-hint { margin-top: 8px; font-size: 11.5px; color: var(--t3); opacity: 0; transition: opacity .5s; min-height: 16px; }
[data-deck-state="idle"] .d-hint { opacity: 1; }
.d-hint .kbd { font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace; font-size: 10px; color: var(--t2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; margin: 0 2px; }

/* ---- activity ticker (under the work area; the chat sidebar runs past it) ---- */
.deck-ticker {
  grid-area: ticker;
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 2px 12px 8px;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
}
.tk-label { color: var(--blue); flex: none; }
.tk-sep { width: 1px; height: 10px; background: var(--line-strong); flex: none; }
.tk-body { color: var(--t3); opacity: 1; transition: opacity .45s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
.tk-body.out { opacity: 0; }
.tk-time { color: var(--t2); }

/* ---- stage: a `jack` directive's board/doc/card panel. Desktop: it fills
   the CENTRE column only (absolute inside .deck-center) — the chat sidebar,
   its composer, and the left panels stay visible and interactive beside it,
   so Jack can keep talking about what he is showing. The Core docks to the
   column's corner while it is up. Mobile: full-screen takeover (no room for
   side-by-side). ---- */
.deck-stage {
  position: absolute; inset: 0;
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px;
  pointer-events: none;
}
.deck-stage.active { pointer-events: auto; background: rgba(0, 0, 0, .35); border-radius: 12px; }
@media (max-width: 768px) {
  .deck-stage { position: fixed; inset: 0; z-index: 60; padding: 14px; }
  .deck-stage.active { background: rgba(0, 0, 0, .6); border-radius: 0; }
}
.deck-stage-panel {
  width: min(880px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), opacity 240ms cubic-bezier(.2, .8, .2, 1);
}
.deck-stage.active .deck-stage-panel { opacity: 1; transform: translateY(0) scale(1); }
.deck-stage-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--t1);
  border-bottom: 1px solid var(--line);
}
.deck-stage-head .icon-btn { color: var(--t3); }
.deck-stage-body {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.deck-stage-body .board-lanes { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
/* narrower lanes: two fit side by side in the centre-column stage. flex-basis
   must be set too — board.css's `flex: 0 0 270px` would beat a bare width. */
.deck-stage-body .board-lanes .lane { width: 220px; flex: 0 0 220px; }

.lab-doc { font-size: 14px; line-height: 1.6; color: var(--t1); }
.lab-doc h1, .lab-doc h2 { font-size: 16px; margin-top: 0; color: var(--t1); }
.lab-approve { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.lab-approve .cb-jack-btn { width: auto; margin-top: 0; }
.lab-approve button { display: inline-flex; align-items: center; gap: 6px; }

/* ---- composer: real functional controls at the BOTTOM of the chat sidebar ---- */
.deck-composer-zone {
  position: relative; z-index: 2; flex-shrink: 0;
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(9, 9, 14, .5);
}
.deck-status { font-size: 11.5px; color: var(--t3); text-align: center; min-height: 15px; padding-bottom: 6px; }
.deck-status:empty { padding-bottom: 0; }
.deck-composer {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.deck-input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; outline: none;
  font-size: 15px; /* iOS zoom guard (>=16px handled by 16.5 below on phones) */
  color: var(--t1);
  padding: 10px 4px;
  font-family: inherit;
  /* Now a <textarea> (Shift/Ctrl+Enter must insert a newline): keep it looking
     like one line but let it grow a little, no drag handle. */
  resize: none;
  line-height: 1.35;
  max-height: 120px;
  overflow-y: auto;
}
.deck-input::placeholder { color: var(--t3); }

.deck-mic {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(93, 168, 247, .1);
  color: var(--t2);
  transition: background 200ms;
}
.deck-mic:hover { background: rgba(93, 168, 247, .16); }
.deck-mic-icon { display: flex; position: relative; z-index: 1; }
.deck-mic-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; transition: border-color 200ms, box-shadow 200ms; }
.deck-mic.live { background: rgba(93, 168, 247, .2); color: var(--blue); }
.deck-mic.live .deck-mic-ring { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(93, 168, 247, .2); animation: deckPulse 1.6s ease-in-out infinite; }
.deck-mic.state-connecting .deck-mic-ring { border-color: #e6a23c; }
.deck-mic.state-error .deck-mic-ring, .deck-mic.state-capped .deck-mic-ring { border-color: #e5484d; }
.deck-mic.state-fallback .deck-mic-ring { border-color: #e6a23c; box-shadow: 0 0 0 4px rgba(230, 162, 60, .2); }
/* Touch press-and-hold: while held, the button grows a violet ring so it reads as
   actively capturing. Larger tap target + no text selection on a long press. */
.deck-mic.holding { background: rgba(139, 92, 246, .26); color: var(--violet, #8b5cf6); transform: scale(1.06); }
.deck-mic.holding .deck-mic-ring { border-color: var(--violet, #8b5cf6); box-shadow: 0 0 0 5px rgba(139, 92, 246, .25); animation: deckPulse 1.1s ease-in-out infinite; }
.deck-mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.deck-handsfree {
  position: relative; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t3);
  background: rgba(139, 108, 240, .08);
  transition: background 200ms, color 200ms, box-shadow 200ms;
}
.deck-handsfree:hover { background: rgba(139, 108, 240, .16); }
.deck-handsfree.on { color: var(--violet); background: rgba(139, 108, 240, .2); box-shadow: 0 0 0 2px rgba(139, 108, 240, .28); }

.composer-send {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--t2); background: rgba(255, 255, 255, .04);
  transition: background 200ms, color 200ms;
}
.composer-send:hover { color: var(--blue); background: rgba(93, 168, 247, .14); }

/* ---- footer corners ---- */
.deck-foot {
  position: absolute; bottom: 8px; z-index: 3;
  font-family: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3);
  display: flex; align-items: center; gap: 7px; pointer-events: none;
}
.deck-foot.fl { left: 28px; }
/* keep the voice-link corner out from under the chat sidebar */
.deck-foot.fr { right: calc(var(--deck-chat-w) + 40px); }
.deck-foot .f-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: deckPulse 2.6s ease-in-out infinite; }
.deck-foot.fr .f-dot { background: rgba(140, 140, 196, .38); animation: none; }
.deck-foot.fr.live .f-dot { background: var(--blue); animation: deckPulse 2.6s ease-in-out infinite; }
@media (max-width: 1180px) { .deck-foot { display: none; } }

/* ===== phone (<=820px): tighter spacing to match the 768px shell collapse ===== */
@media (max-width: 820px) {
  .deck-topbar { padding: 12px 14px 8px; gap: 8px; }
  .deck-brand-sub { display: none; }
  .deck-clock { font-size: 9px; }
  .deck-ticker { padding: 2px 10px 6px; font-size: 9px; }
}