/* Coordinator chrome layout (extracted from the standalone page's inline
   <style> so the console can load it for coordinator panes too).  Every
   rule is #coord- or coordinator-class scoped; the lone page-level body rule
   became `.coord-chrome-root` (added by buildCoordChrome to the pane root). */

/* Coordinator-specific layout glue.  Messages, header, and sidebar
   chrome live in shared_static/{chat,ui-base}.css and
   console/static/style.css; the inline tool-batch construct lives
   in coordinator.css.  What remains here is the page-level flex
   wiring (chat pane + right sidebar), tree-view row metadata
   (indent, state dots, child highlight), and the <700px responsive
   accordion.  Rules that target .msg / .appbar / .sidebar are
   intentionally absent — those primitives ship from the shared
   sheets and we don't restyle them here (the coordinator pane has no
   header at all — name/state live in the tab + rail). */
.coord-chrome-root {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* The coord chrome owns its own scroll regions (#coord-messages, the sidebar
   bodies); when it IS the pane body, the generic `.pane-body { overflow:auto }`
   scroller is redundant and would wrap the sticky appbar in a second scroll
   parent.  Neutralise it for this pane type only (dashboard/admin keep theirs). */
.pane-body.coord-chrome-root {
  overflow: hidden;
}

/* Main layout — chat pane (2fr) + sidebar (1fr) with shared
   #coord-main and #coord-body flex wiring. */
#coord-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}
#coord-main {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
/* Override the .sidebar positional defaults (which assume an
   admin-shell grid with sticky positioning under a .topbar) so the
   coordinator's right aside flexes into its column of #coord-body.
   The shared visual chrome (panel bg, hair border, side-section
   vocabulary) still applies via the .sidebar rules in
   console/static/coordinator/coordinator.css; we only unset the
   positional defaults meant for the admin shell. */
#coord-sidebar.sidebar {
  position: static;
  top: auto;
  height: auto;
  align-self: auto;
  flex: 1 1 0;
  border-right: none;
  border-left: 1px solid var(--hair);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Pane-hosted: the shell's per-pane ✕/− chip floats in the pane's top-right
   corner (top 5px + 28px tall) — exactly where this sidebar's toggle row and
   the Children refresh sit.  Drop the sidebar content below the chip's lane;
   padding (not margin) keeps the column's left border running the full pane
   height.  (In practice this is EVERY coordinator — the /coordinator/{ws_id}
   standalone page is a chip-less direct-URL fallback no UI path navigates to;
   the .pane-body scope just keeps that lane honest.) */
.pane-body.coord-chrome-root #coord-sidebar.sidebar {
  padding-top: 44px;
}
#coord-children-wrap {
  min-height: 40%;
  max-height: 60%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#coord-tasks-wrap {
  min-height: 30%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.coord-sidebar-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
}
.coord-sidebar-head .side-label {
  flex: 1;
  padding: 0;
}
.coord-sidebar-head .side-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.coord-sidebar-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

#coord-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.msg .coord-ws-link {
  color: var(--accent);
  text-decoration: underline;
}

/* Sidebar list rows — tree-view children + task list.  Coordinator-
   only vocabulary; the multi-line row shape (link + meta on second
   line) is specific to this page's child + task data, so we don't
   reuse the .side-item primitive — its single-row flex layout fights
   the column-stacked ws-link + meta we need. */
.ch-row,
.task-row {
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-2);
  border: 1px solid transparent;
}
.ch-row + .ch-row,
.task-row + .task-row {
  margin-top: 2px;
}
.ch-row:hover,
.task-row:hover {
  background: var(--hair-2);
}
.ch-row.closed {
  opacity: 0.55;
}
.ch-row a.ws-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.ch-row a.ws-link:hover {
  color: var(--accent);
}
/* Keyboard-focus indicators — accent ring matches the .side-item and
   .btn focus-visible treatment so tab-nav stays visible across both
   themes. */
.ch-row a.ws-link:focus-visible,
.task-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* glyph treatment (.ui-glyph / .ui-glyph-<state>) comes from
   shared_static/ui-base.css; stateGlyph() emits those classes. */
.ch-row .name {
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.ch-row .meta {
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  gap: 8px;
  padding-left: 22px;
}
.ch-row .badge-attention {
  color: var(--err);
  font-weight: 600;
}

/* Inline approval block — rendered as a third sub-row inside
   .ch-row when pending_approval_detail is present.  Layout is
   column-stacked so the header / summary / reasoning / preview /
   actions read top-down on every viewport.  Padding-left aligns
   to the same 22px indent as .meta so the visual hierarchy stays
   consistent with the rest of the row. */
.ch-row .approval-block {
  margin-top: 4px;
  padding: 6px 8px 6px 22px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
}
/* Loading-state placeholder rendered while the bulk fetch is
   in-flight. Same outer container as the real block so the row
   height is stable when the real content swaps in. */
.ch-row .approval-block-loading {
  color: var(--ink-3);
}
.ch-row .approval-loading-spin {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  border-top-color: transparent;
  margin-right: 5px;
  animation: ts-spin 0.9s linear infinite;
  vertical-align: middle;
}
/* Inline status note shown when the operator clicks Approve/Deny
   but the call_id is stale (already resolved on another channel).
   Quieter than a toast — the row is about to be replaced wholesale
   by the refresh, so this only needs to bridge ~350ms. */
.ch-row .approval-stale-note {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .ch-row .approval-loading-spin {
    animation: none;
  }
}
/* Auto-approved pill — same 22px indent as .approval-block / .meta
   so a child row showing both stacks cleanly.  Lower visual weight
   than the live approve/deny block (this is informational, not
   actionable) but still distinct enough that the operator notices
   when a tool call bypassed the gate. */
.ch-row .ch-auto-approved-pill {
  margin-top: 2px;
  padding: 2px 8px 2px 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-3);
  cursor: help;
}
.ch-row .ch-auto-approved-label {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--hair);
  background: var(--surface-1, transparent);
}
.ch-row .approval-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.ch-row .approval-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--hair);
  color: var(--ink-3);
}
/* Recommendation chip inside the disclosure footer — same 12/38/70%
   colour-mix scheme as the inline tool-batch verdict chips
   (.coord-tool-row-verdict code.rec-*), scoped here to the row's
   disclosure since this children-tree surface uses its own
   .approval-disclosure container. */
.ch-row .approval-disclosure code.rec-approve,
.ch-row .approval-disclosure code.rec-review,
.ch-row .approval-disclosure code.rec-deny {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  border: 1px solid var(--hair);
  margin-top: 4px;
}
.ch-row .approval-disclosure code.rec-approve {
  color: color-mix(in srgb, var(--ok) 70%, var(--ink-2));
  border-color: color-mix(in srgb, var(--ok) 38%, var(--hair));
  background: color-mix(in srgb, var(--ok) 12%, var(--panel-2));
}
.ch-row .approval-disclosure code.rec-review {
  color: color-mix(in srgb, var(--warn) 70%, var(--ink-2));
  border-color: color-mix(in srgb, var(--warn) 38%, var(--hair));
  background: var(--warn-tint);
}
.ch-row .approval-disclosure code.rec-deny {
  color: color-mix(in srgb, var(--err) 70%, var(--ink-2));
  border-color: color-mix(in srgb, var(--err) 38%, var(--hair));
  background: color-mix(in srgb, var(--err) 12%, var(--panel-2));
}
.ch-row .approval-pill.approval-pill-pending {
  color: var(--ink-3);
  background: var(--panel-2);
}
.ch-row .approval-tool {
  font-weight: 600;
  color: var(--ink);
}
.ch-row .approval-tier {
  color: var(--ink-3);
  font-size: 10px;
}
.ch-row .approval-summary {
  color: var(--ink-2);
}
.ch-row .approval-reasoning {
  color: var(--ink-3);
  font-style: italic;
}
.ch-row .approval-reasoning-lead {
  color: var(--ink-3);
  font-style: normal;
}
.ch-row .approval-disclosure {
  color: var(--ink-3);
}
.ch-row .approval-disclosure summary {
  cursor: pointer;
  font-size: 10px;
  color: var(--accent);
  user-select: none;
}
.ch-row .approval-evidence {
  margin: 4px 0 0 16px;
  padding: 0;
  color: var(--ink-3);
}
.ch-row .approval-preview {
  margin: 0;
  padding: 4px 6px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 6em;
}
.ch-row .approval-policy-block {
  color: var(--err);
  font-weight: 600;
  background: color-mix(in srgb, var(--err) 12%, var(--panel-2));
  padding: 4px 6px;
  border-radius: var(--r-sm);
}
.ch-row .approval-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 2px;
}
/* Inline .act buttons for the children-tree approval block —
   compact (.sm) variant of the colour/border treatment used by the
   coord chat's tool-batch action row (coordinator.css
   .coord-tool-actions button.act).  Duplicated locally because the
   children-tree row sits in the right-rail sidebar with its own
   parent class; if we ever lift `.act` to a shared primitive these
   local overrides can drop. */
.ch-row .approval-actions .act {
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  min-height: 24px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--panel);
  border: 1.5px solid var(--hair-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}
.ch-row .approval-actions .act:hover {
  color: var(--ink);
  border-color: var(--ink-4);
}
.ch-row .approval-actions .act:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ch-row .approval-actions .act:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ch-row .approval-actions .act.primary {
  background: color-mix(in srgb, var(--ok) 28%, var(--panel));
  color: var(--ok-text);
  border-color: color-mix(in srgb, var(--ok) 65%, var(--hair));
  font-weight: 600;
}
.ch-row .approval-actions .act.primary:hover {
  background: color-mix(in srgb, var(--ok) 40%, var(--panel));
  color: var(--ink);
  border-color: var(--ok);
}
.ch-row .approval-actions .act.danger {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 42%, var(--hair));
}
.ch-row .approval-actions .act.danger:hover {
  background: var(--err-soft);
  color: var(--err);
  border-color: var(--err);
}
/* Mobile (<700px) — hit targets must stay ≥44px tall on touch.
   Buttons share the row 50/50 (flex: 1 on each) so Deny + Approve
   each get half the available width with a comfortable touch
   target. Stacking would push the action row off-screen below the
   preview/disclosure on tall envelopes; side-by-side keeps both
   verbs reachable without a scroll. Larger font + min-height
   bring the targets into WCAG 2.5.5. */
@media (max-width: 700px) {
  .ch-row .approval-actions {
    flex-direction: row;
  }
  .ch-row .approval-actions .act.sm {
    flex: 1 1 0;
    min-height: 44px;
    font-size: 13px;
  }
}
.task-row .title {
  font-weight: 500;
  color: var(--ink);
}
.task-row .meta {
  font-size: 11px;
  color: var(--ink-3);
}
/* Task-status text — the .pill primitive handles the chip; this only
   covers the mono status text inside the row header before the title. */
.task-row .status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
  border: 1px solid var(--hair);
  color: var(--ink-3);
}
.task-row .status-in_progress {
  color: var(--think);
  border-color: color-mix(in srgb, var(--think) 45%, var(--hair));
  background: var(--think-soft);
}
.task-row .status-done {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--hair));
  background: var(--ok-soft);
}
.task-row .status-blocked {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 45%, var(--hair));
  background: var(--err-soft);
}
.sidebar-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink-4);
  font-style: italic;
}
/* Brief flash when a task-row "→ child" link scrolls into the
   tree — signals the click resolved without the user hunting for
   which row was the target.  accent-soft reads as "focused, not
   error" on both light + dark themes. */
.ch-row.highlight {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--hair));
  transition:
    background 0.6s ease-out,
    border-color 0.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ch-row.highlight {
    transition: none;
  }
}

/* @keyframes ts-spin — drives the .coord-tool-row-verdict
   code.judging spinner.  Defined here because this page doesn't
   link feed.css (no .feed-item usage). */
@keyframes ts-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sidebar mobile toggle (desktop hides; mobile shows via media query
   below). */
#coord-sidebar-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 13px;
}
#coord-sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[aria-busy="true"].coord-sidebar-body {
  opacity: 0.55;
}

/* Sub-700px: sidebar collapses to an accordion above the chat;
   appbar wraps its right cluster; composer tightens. */
@media (max-width: 700px) {
  .appbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
  }
  #coord-messages {
    padding: 12px 14px;
  }
  #coord-body {
    flex-direction: column;
  }
  #coord-sidebar.sidebar {
    max-height: 50vh;
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid var(--hair);
  }
  #coord-sidebar-toggle {
    display: inline-flex;
  }
  #coord-sidebar[aria-expanded="false"] #coord-children-wrap,
  #coord-sidebar[aria-expanded="false"] #coord-tasks-wrap {
    display: none;
  }
  #coord-sidebar[aria-expanded="false"] {
    max-height: none;
  }
}