/* =========================================================
   PHASE 7 FRONT-END / P1.4b — shellChat.css  (the brain DOCK chrome)
   The dock's OWN frame (head · thread · composer · collapsed pill) inside the shell's #gx-chat zone. The MESSAGE parts
   themselves render with the shared cv-* styles (chat.css, loaded by app-shell.html) — this file styles only the dock
   shell, with distinct gx-dock-* classes (no collision with chat.css cv-* or appShell gx-rail-*). Fully token-driven
   (colour/space/radius/motion via var(--*)); loaded only on the GEXI_SHELL /app page, inert elsewhere.
   ========================================================= */

.gx-dock {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--void, var(--bg));
  color: var(--ink);
}

/* ---- head: a slim brand bar + collapse ---- */
.gx-dock-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;                 /* wordmark dropped — only the collapse remains (desktop), pinned right */
  padding: var(--space-2) var(--space-3);
  border-bottom: 0;                          /* no empty bar-line under a now-titleless head */
  flex: 0 0 auto;
}
.gx-dock-title { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.01em; }
.gx-dock-mark, .gx-dock-pill-mark { color: var(--brand-500); }
.gx-dock-collapse {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: var(--text-lg); line-height: 1; padding: var(--space-1) var(--space-2); border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.gx-dock-collapse:hover { color: var(--ink); background: var(--card-alt); }
.gx-dock-collapse:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; box-shadow: var(--focus-ring); }
/* PHASE 7 mobile-nav — on a phone the chat is the WHOLE app: make room in the header for the floating hamburger
   (appShell.css .gx-burger, top-left) and drop the collapse-to-pill (there's nothing to collapse INTO on mobile). */
@media (max-width: 959px) {
  .gx-dock-head { display: none; }   /* no wordmark + collapse-to-pill is mobile-disabled -> nothing to show (the shell #gx-header is the top bar) */
}

/* ---- thread: the scrollable conversation ---- */
.gx-dock-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gx-dock-msg { max-width: 100%; min-width: 0; }
.gx-dock-msg.is-user { align-self: flex-end; background: var(--bubble-user, var(--card-alt)); color: var(--ink); padding: var(--space-2) var(--space-3); border-radius: var(--radius); }
.gx-dock-empty { margin: auto; color: var(--faint, var(--muted)); font-size: var(--text-sm); text-align: center; max-width: 30ch; line-height: 1.5; }
.gx-dock-reconnect { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--muted); background: var(--card-alt); border-bottom: 0.5px solid var(--line); }

/* ---- composer ---- */
/* WAVE 0.5 C8 CLEANUP — the .gx-dock-composer / .gx-dock-input / .gx-dock-send block is DELETED. Nothing
   rendered those classes: the dock adopted the SHARED cv-* composer (one composer, one behaviour, one set
   of affordances) and this styling has been dead ever since. Dead CSS for a control that no longer exists
   is worse than clutter — it reads as a second composer someone might try to revive. */

/* ---- collapsed: a compact pill + the latest status (e.g. over a full-screen Stage) ---- */
.gx-dock-pill {
  margin: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  max-width: calc(100% - 2 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  border: 0.5px solid var(--line); border-radius: 999px;
  background: var(--void-2, var(--card)); color: var(--ink);
  font-size: var(--text-sm); cursor: pointer;
  box-shadow: var(--shadow-md, 0 2px 12px rgba(0,0,0,0.18));
  transition: background var(--dur-fast) var(--ease-out);
}
.gx-dock-pill:hover { background: var(--card-alt); }
.gx-dock-pill:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; box-shadow: var(--focus-ring), var(--shadow-md, 0 2px 12px rgba(0,0,0,0.18)); }   /* stack: keep the resting elevation under the focus ring (box-shadow does not accumulate across rules) */
.gx-dock-pill-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

/* P1.6 — mobile one-handed guard: a >=16px composer font stops iOS Safari auto-zooming the viewport on focus (the desktop
   text-sm would trip the zoom). 16px is the iOS threshold; the dock is a column on mobile (appShell.css), not an overlay
   sheet, so there is no backdrop/swipe — the safe-area composer padding + this guard are the ergonomics that matter. */
/* C8 CLEANUP: the iOS ≥16px focus-zoom guards that targeted .gx-dock-input went with it. The SHARED cv-*
   composer the dock actually renders carries its own guard, so nothing is lost — the rules here only ever
   applied to an element that stopped existing. */
@media (prefers-reduced-motion: reduce) {
  .gx-dock-collapse, .gx-dock-pill { transition: none; }
}

/* mobile smoothness — native touch on the shell chat dock (go-live) */
.gx-dock { -webkit-tap-highlight-color: transparent; }
.gx-dock button, .gx-dock a, .gx-dock textarea { touch-action: manipulation; }
.gx-dock-thread { touch-action: pan-y; }

/* SU1 — the expanded-dock transient status line (attach errors / 429-402 rejects / stream errors are now VISIBLE when
   the dock is open, not only on the collapsed pill). Token-driven, mirrors the reconnect banner. */
.gx-dock-status { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--muted); background: var(--card-alt); border-bottom: 0.5px solid var(--line); text-align: center; }
/* SU1 — the shared composer's starter chips: the dock zone is narrow (the cramping comes from the GRID TRACK, not the
   viewport, so chat.css's viewport-gated single-column never fires here). Force one column inside the dock. */
.gx-dock .cv-suggest { grid-template-columns: 1fr; }