/* ============================================================
   Treehouse — C5ISR comms UI
   Palette is themable via the `data-theme` attribute on <html>:
     <html data-theme="dark">  (default)
     <html data-theme="light">
   Both modes share the same accent hues (yellow / orange / red /
   purple) but with brightness/saturation tuned for the surface
   they sit on. Semantic variables (--th-scrim, --th-hover, etc.)
   handle the rgba overlays so partial-opacity tints adapt with
   the theme rather than blowing out one mode or the other.
   ============================================================ */

:root,
[data-theme="dark"] {
  --th-black:         #0a0a0a;
  --th-text-grey:     #e8e8e8;
  --th-text-bright:   #f5f5f5;
  --th-titlebar:      #1e1e1e;
  --th-panel:         #101418;
  --th-panel-2:       #161b21;
  --th-steel-blue:    #334155;
  --th-steel-blue-2:  #475569;
  --th-pale-yellow:   #29261e;
  --th-bright-yellow: #9a8139;
  --th-pale-blue:     #1f222f;
  --th-pale-purple:   #8888cc;
  --th-dark-orange:   #452a16;
  --th-bright-orange: #c97531;
  /* Legible blue accent for text/borders on dark surfaces. NOT
     --th-pale-blue — that is a tinted SURFACE color (near-black in
     dark mode) and must never be used as a foreground. */
  --th-bright-blue:   #88c0d0;
  --th-red:           #ff4544;
  --th-divider:       #1f2228;
  --th-border:        #2a2e36;

  /* Elevated accent-grey surfaces — sit ABOVE --th-panel/--th-panel-2.
     Used for row hovers, zebra rows, key columns, chips and any
     "table-like" fill that needs to read as a distinct band without a
     hard border. Referenced widely across the sheet; keep them subtle. */
  --th-bg-1:          #1a2027;   /* faint lift — hover / odd rows      */
  --th-bg-2:          #222932;   /* accent-grey — headers / key column */

  /* Semantic overlay vars — rgba forms so semi-transparent layers
     adapt with the theme. */
  --th-scrim:         rgba(0, 0, 0, 0.6);    /* modal backdrops */
  --th-hover:         rgba(255, 255, 255, 0.06);
  --th-shadow:        0 12px 40px rgba(0, 0, 0, 0.55);
  --th-shadow-soft:   0 4px 12px rgba(0, 0, 0, 0.35);

  /* Typography (fonts.md) — two layers.
     DEFINITION (`--th-font-*`, `--th-zoom`): what the Treehouse config
     seeds at boot and what a runtime operator override writes onto the
     <html> inline style. APPLICATION (`--font-*`): what the rest of the
     sheet reads — never overridden directly, always derived. Default UI
     face is bundled Lato (self-hosted, see fonts.css); the fallback
     chain keeps the UI legible if the woff2 ever fails to load. */
  --th-font-ui:   "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --th-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --th-zoom:      1.1; /* keep in sync with config.cljs :default-zoom */

  --font-ui:   var(--th-font-ui);
  --font-mono: var(--th-font-mono);

  /* Root size — every type size in this sheet is expressed in `rem`, so
     this single multiplier scales the whole UI proportionally with no
     layout breakage. `:root` (specificity 0,1,0) beats the later
     `html, body, #app` rule for the <html> element, so body/#app keep
     their explicit baseline while <html> carries the zoom. `--th-zoom`
     is clamped 0.8–2.0 by the `:ui/set-zoom` handler. */
  font-size: calc(16px * var(--th-zoom));

  --topbar-h: 44px;
  --tabbar-h: 32px;
  --shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Persistent left pane (left-pane.md §3). `-w` expanded, `-rail-w`
     collapsed to avatars+dots. The `.left-pane-collapsed` modifier on
     `.th-app` swaps the grid column from one to the other. */
  --left-pane-w: 248px;
  --left-pane-rail-w: 56px;

  /* Outermost app button bar (full-slack.md §14) — the always-visible
     Home/Chat/Objects/Map/Agents/Settings rail, left of the panel. */
  --app-rail-w: 68px;
}

/* ---------- Light theme ----------------------------------------
   A warm off-white palette designed to read as a *companion* to
   dark mode — same accent hues, same UI rhythm, just inverted
   brightness. Avoids pure white surfaces (#fafaf8 base) because
   they're harsh in long-duration ops use; deep near-black text
   (#1a1a1a) for max contrast on the off-white. Accents are slightly
   darkened so they retain weight against the lighter surfaces. */

[data-theme="light"] {
  --th-black:         #fafaf6;   /* page bg — warm off-white */
  --th-text-grey:     #4a4a44;   /* secondary text */
  --th-text-bright:   #1a1a1a;   /* primary text */
  --th-titlebar:      #ecebe5;   /* slightly darker than page */
  --th-panel:         #f1f0ea;   /* sidebar / detail panes */
  --th-panel-2:       #ffffff;   /* card surfaces — pop above panels */
  --th-steel-blue:    #94a3b8;
  --th-steel-blue-2:  #64748b;
  --th-pale-yellow:   #f5efd4;
  --th-bright-yellow: #7a6418;   /* darkened for legibility on light */
  --th-pale-blue:     #e8eaf2;
  --th-pale-purple:   #4a4a99;   /* darkened */
  --th-dark-orange:   #f2d4b4;
  --th-bright-orange: #a85820;
  --th-bright-blue:   #2f6e85;   /* darkened for legibility on light */
  --th-red:           #c41e1c;
  --th-divider:       #d4d2cc;
  --th-border:        #c0bdb6;

  /* Accent-grey surfaces (see dark-theme note) — darkened bands that
     read above the off-white panels. */
  --th-bg-1:          #e9e7e0;   /* faint lift — hover / odd rows      */
  --th-bg-2:          #dddbd2;   /* accent-grey — headers / key column */

  --th-scrim:         rgba(20, 20, 20, 0.25);
  --th-hover:         rgba(0, 0, 0, 0.05);
  --th-shadow:        0 12px 40px rgba(40, 36, 28, 0.18);
  --th-shadow-soft:   0 4px 12px rgba(40, 36, 28, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--th-black);
  color: var(--th-text-grey);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.4;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--th-text-bright);
  background: var(--th-pale-blue);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 120ms ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--th-steel-blue-2);
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: #1f2228; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a2f37; }

/* ---------- App shell ---------- */
/* Grid areas (left-pane.md §3): a collapsing `banner` row (the reconnect
   bar renders nil when healthy, so its `auto` row is 0 then), a full-width
   `topbar`, and a `[pane | main]` content row. Overlays (toasts, drawer,
   modals, reactor popover) are all `position: fixed`, so they sit outside
   this grid and don't auto-place into it. */
.th-app {
  display: grid;
  grid-template-rows: auto var(--topbar-h) 1fr;
  grid-template-columns: var(--left-pane-w) 1fr;
  grid-template-areas:
    "banner banner"
    "topbar topbar"
    "pane   main";
  height: 100%;
  width: 100%;
}
.th-app.left-pane-collapsed { grid-template-columns: var(--left-pane-rail-w) 1fr; }
.th-app > .th-conn-banner { grid-area: banner; }
.th-app > .th-topbar      { grid-area: topbar; }
.th-app > .th-app-bar     { grid-area: rail; }
.th-app > .th-left-pane   { grid-area: pane; }
.th-app > .th-workspace   { grid-area: main; }

/* Pure-sidebar shell (full-slack.md §14) — no topbar row. An always-
   visible app button bar (rail) sits outside a context-dependent left
   panel: [rail | pane | main]. The workspace runs the full window
   height; overlays that anchored below the old bar re-tune to the
   window's top edge (§5.3). */
.th-app.no-topbar {
  grid-template-rows: auto 1fr;
  grid-template-columns: var(--app-rail-w) var(--left-pane-w) 1fr;
  grid-template-areas:
    "banner banner banner"
    "rail   pane   main";
}
/* Collapse hides the PANEL column (width 0); the app bar stays. */
.th-app.no-topbar.left-pane-collapsed {
  grid-template-columns: var(--app-rail-w) 0 1fr;
}
.th-app.no-topbar.left-pane-collapsed > .th-left-pane { display: none; }
.th-app.no-topbar .th-toast-stack  { top: 12px; }
.th-app.no-topbar .th-drawer-scrim { inset: 0; }
.th-app.no-topbar .th-drawer       { top: 0; }

/* ---------- Top bar ---------- */
.th-topbar {
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-black);
  display: flex;
  align-items: stretch;
  height: var(--topbar-h);
  user-select: none;
}
.th-topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-right: 1px solid var(--th-black);
  color: var(--th-text-bright);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  text-transform: uppercase;
}
.th-topbar .brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--th-bright-orange);
  box-shadow: 0 0 8px var(--th-bright-orange);
}

/* Tab strip host — flex container that holds both the visible
   tabs and the overflow popover button. `min-width: 0` is the
   critical bit; without it a flex item's natural width (its
   contents) prevents it from shrinking, which is what would push
   the tab strip past the viewport edge on small screens. */
.th-topbar .room-tabs-host {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.th-topbar .room-tabs {
  display: flex;
  align-items: stretch;
  /* Take the slack and clip — tabs don't shrink (`flex-shrink: 0`
     on `.room-tab` below) so anything that doesn't fit gets clipped
     on the right. The ResizeObserver in `tab-strip` watches this
     container and surfaces the clipped tabs in the overflow popover. */
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Tabs do NOT shrink — they keep their natural width so the strip
   either fits or clips. Without this, tabs would squish into
   unreadable slivers when room count grew. */
.th-topbar .room-tab { flex-shrink: 0; }
/* Overflow button + popover */
.th-topbar .room-tabs-overflow {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}
.th-topbar .room-tabs-overflow-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--th-black);
  color: var(--th-text-grey);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 0.8125rem;
  transition: background 120ms;
}
.th-topbar .room-tabs-overflow-btn:hover,
.th-topbar .room-tabs-overflow-btn.active {
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
}
.th-topbar .room-tabs-overflow-count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--th-bright-orange);
  color: var(--th-panel);
  line-height: 1.4;
}
.th-topbar .room-tabs-overflow-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.th-topbar .room-tabs-overflow-popover {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 210;
  min-width: 280px;
  max-width: 420px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  box-shadow: var(--th-shadow);
  padding: 4px 0;
}
.th-topbar .room-tabs-overflow-head {
  padding: 6px 12px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--th-divider);
  margin-bottom: 2px;
}
.th-topbar .room-tabs-overflow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--th-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 120ms;
}
.th-topbar .room-tabs-overflow-row:hover {
  background: var(--th-hover);
}
.th-topbar .room-tabs-overflow-row.active {
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
}
.th-topbar .room-tabs-overflow-row .idx {
  flex: 0 0 30px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}
.th-topbar .room-tabs-overflow-row .kind {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.th-topbar .room-tabs-overflow-row .name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--th-text-bright);
}
.th-topbar .room-tabs-overflow-row .unread {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--th-bright-orange);
  color: var(--th-panel);
}
.th-topbar .room-tabs-overflow-row .close {
  color: var(--th-text-grey);
  opacity: 0.6;
  cursor: pointer;
  padding: 0 4px;
}
.th-topbar .room-tabs-overflow-row .close:hover {
  opacity: 1;
  color: var(--th-bright-orange);
}
.th-topbar .room-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 0.8125rem;
  color: var(--th-text-grey);
  border-right: 1px solid var(--th-black);
  position: relative;
  white-space: nowrap;
  transition: background 120ms;
}
.th-topbar .room-tab:hover { background: var(--th-pale-blue); }
.th-topbar .room-tab.active {
  background: var(--th-panel);
  color: var(--th-text-bright);
}
.th-topbar .room-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--th-bright-orange);
}
/* Kind badge — muted metadata, never an accent. The brass underline
   on the active tab is the only color in the strip. */
.th-topbar .room-tab .kind {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  opacity: 0.75;
}
.th-topbar .room-tab .close {
  margin-left: 6px;
  color: var(--th-text-grey);
  opacity: 0.6;
  font-size: 0.875rem;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-topbar .room-tab .close:hover {
  color: var(--th-red);
  opacity: 1;
}
.th-topbar .room-tab .unread {
  background: var(--th-bright-orange);
  color: var(--th-black);
  font-weight: 600;
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 0.6875rem;
}

.th-topbar .controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-left: 1px solid var(--th-black);
}
.th-topbar .controls .btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--th-text-grey);
  border-radius: 2px;
  position: relative;
}
.th-topbar .controls .btn:hover { background: var(--th-pale-blue); color: var(--th-text-bright); }
.th-topbar .controls .btn.active { background: var(--th-panel); color: var(--th-bright-yellow); }
.th-topbar .controls .btn .badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  background: var(--th-red);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---------- Login screen ---------- */
.th-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(201,117,49,0.06), transparent 70%),
    radial-gradient(800px 600px at 90% 110%, rgba(136,136,204,0.05), transparent 60%),
    var(--th-black);
}
.th-login .panel {
  width: 380px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 4px;
  padding: 28px 24px 22px;
  box-shadow: var(--shadow-deep);
}
.th-login .panel .bma-logo {
  display: block;
  margin: 0 auto 14px;
  width: 96px;
  height: auto;
}
.th-login .panel h1 {
  margin: 0 0 22px;
  color: var(--th-text-bright);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}
.th-login .field {
  display: block;
  margin-bottom: 12px;
}
.th-login .field label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 4px;
}
.th-login .field input {
  width: 100%;
  font-family: var(--font-mono);
}
.th-login .submit {
  margin-top: 8px;
  width: 100%;
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  padding: 10px;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  transition: background 120ms;
}
.th-login .submit:hover:not(:disabled) { background: var(--th-steel-blue-2); }
.th-login .submit:disabled { opacity: 0.5; cursor: progress; }
.th-login .err {
  margin-top: 10px;
  color: var(--th-red);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}
.th-login .status {
  margin-top: 10px;
  color: var(--th-bright-yellow);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

/* ---------- Workspace ---------- */
.th-workspace {
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--th-black);
  overflow: hidden;
}

/* ---------- Persistent left pane (left-pane.md) ----------
   Always-present contact rail beside every room. Shares the dot / avatar /
   sub-badge visuals with the Contact List room (`.contact-*`, defined far
   below); only the pane's own layout lives here. */
.th-left-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--th-panel);
  border-right: 1px solid var(--th-black);
  overflow: hidden;
  user-select: none;
}
.th-left-pane .left-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--tabbar-h);
  padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--th-black);
  flex: 0 0 auto;
}
.th-left-pane .left-pane-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-text-grey);
}
.th-left-pane .left-pane-collapse {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 3px;
}
.th-left-pane .left-pane-collapse:hover {
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
}

/* Primary workspace launcher. The AC monogram is intentionally a small,
   typographic affordance rather than a new emoji/icon family. */
.th-left-pane .left-pane-agent-center {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  color: var(--th-text-bright);
}
.th-left-pane .left-pane-agent-center:hover { background: var(--th-pale-blue); }
.th-left-pane .left-pane-agent-center.active {
  background: var(--th-pale-blue);
  border-left-color: var(--th-bright-orange);
}
.th-left-pane .left-pane-agent-center-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.th-left-pane .left-pane-agent-center.active .left-pane-agent-center-mark {
  background: var(--th-bright-orange);
  color: var(--th-black);
}

.th-left-pane .left-pane-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
}
.th-left-pane .left-pane-group { margin-bottom: 2px; }
.th-left-pane .left-pane-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 2px;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-text-grey);
}
.th-left-pane .left-pane-group-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.th-left-pane .left-pane-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--th-text-bright);
}
.th-left-pane .left-pane-row:hover:not(:disabled) { background: var(--th-pale-blue); }
.th-left-pane .left-pane-row:disabled { cursor: default; opacity: 0.55; }
.th-left-pane .left-pane-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-left-pane .left-pane-status {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Joined-channel rows — `#` glyph + name + unread badge. */
.th-left-pane .left-pane-channels { margin-bottom: 4px; }
.th-left-pane .left-pane-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--th-text-bright);
}
.th-left-pane .left-pane-channel:hover { background: var(--th-pale-blue); }
.th-left-pane .left-pane-channel.active { background: var(--th-pale-blue); }
.th-left-pane .left-pane-channel.active .left-pane-name { color: var(--th-bright-yellow); }
.th-left-pane .left-pane-channel-glyph {
  flex: 0 0 22px;
  width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--th-text-grey);
}
.th-left-pane .left-pane-channel-unread {
  flex: 0 0 auto;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--th-bright-orange);
  color: var(--th-black);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.th-left-pane .left-pane-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--th-text-grey);
  font-size: 0.8125rem;
}

.th-left-pane .left-pane-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--th-black);
}
.th-left-pane .left-pane-foot .ghost { flex: 1 1 auto; }

/* Collapsed: a thin column of avatars with their presence dot overlaid. */
.th-left-pane.collapsed .left-pane-head { justify-content: center; padding: 0; }
.th-left-pane .left-pane-rail {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}
.th-left-pane .left-pane-rail-row {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}
.th-left-pane .left-pane-rail-row:hover:not(:disabled) { background: var(--th-pale-blue); }
.th-left-pane .left-pane-rail-row:disabled { cursor: default; opacity: 0.55; }
/* Overlay the shared 8px dot on the avatar's bottom-right corner. */
.th-left-pane .left-pane-rail-row .contact-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  box-shadow: 0 0 0 2px var(--th-panel);
}
/* Collapsed channel chip — a `#` glyph badge sized like an avatar. */
.th-left-pane .left-pane-rail-row.is-channel .left-pane-channel-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--th-pale-blue);
  color: var(--th-text-grey);
  font-weight: 700;
  font-size: 0.8125rem;
}
.th-left-pane .left-pane-rail-row.is-channel.active .left-pane-channel-glyph {
  color: var(--th-bright-yellow);
}
/* The collapsed Agent Center launcher shares the rail's compact geometry. */
.th-left-pane .left-pane-rail-row.is-agent-center {
  border-radius: 4px;
}
.th-left-pane .left-pane-rail-row.is-agent-center.active .left-pane-agent-center-mark {
  background: var(--th-bright-orange);
  color: var(--th-black);
}
.th-left-pane .left-pane-rail-unread-dot {
  position: absolute;
  right: 0;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--th-bright-orange);
  box-shadow: 0 0 0 2px var(--th-panel);
}
.th-left-pane .left-pane-rail-divider {
  width: 24px;
  height: 1px;
  margin: 4px 0;
  background: var(--th-black);
}

/* ---------- Sidebar mode (full-slack.md) ----------
   The pane as the whole chrome: brand head, Slack-style sections
   (Home / Windows / Channels / DMs / Contacts), icon foot. Rows share
   the old tab strip's anatomy — glyph · kind chip · name · ⌘N hint ·
   unread badge · hover ×. */

/* Head — the brand block relocated from the topbar (§5). */
.th-left-pane .sidebar-head .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--th-text-bright);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  text-transform: uppercase;
}
.th-left-pane .sidebar-head .brand .dot {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--th-bright-orange);
  box-shadow: 0 0 8px var(--th-bright-orange);
}
.th-left-pane .sidebar-head .brand .brand-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Section headers — foldable (§7). */
.th-left-pane .sidebar-section { margin-bottom: 2px; }
.th-left-pane .sidebar-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 2px 8px;
}
.th-left-pane .sidebar-section-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-text-grey);
}
.th-left-pane .sidebar-section-toggle:hover { color: var(--th-text-bright); }
.th-left-pane .sidebar-caret { flex: 0 0 10px; }
.th-left-pane .sidebar-section-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.th-left-pane .sidebar-mini {
  flex: 0 0 auto;
  padding: 0 5px;
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  line-height: 1.5;
  cursor: pointer;
}
.th-left-pane .sidebar-mini:hover {
  color: var(--th-text-bright);
  border-color: var(--th-steel-blue-2);
}
/* Section-head affordances that only surface on mouseover — the DM
   section's `+` (new conversation). Focus keeps it reachable by tab. */
.th-left-pane .sidebar-hover-mini { opacity: 0; transition: opacity 120ms; }
.th-left-pane .sidebar-section-head:hover .sidebar-hover-mini,
.th-left-pane .sidebar-hover-mini:focus-visible { opacity: 1; }

/* Rows. Kind accent carries on the left border, active on background +
   name color — same treatment the joined-channel rows established. */
.th-left-pane .sidebar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 12px 5px 8px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  color: var(--th-text-bright);
}
.th-left-pane .sidebar-row:hover { background: var(--th-pale-blue); }
.th-left-pane .sidebar-row.active {
  background: var(--th-pale-blue);
  border-left-color: var(--th-bright-orange);
}
.th-left-pane .sidebar-row.active .name { color: var(--th-bright-yellow); }
.th-left-pane .sidebar-row.closed { opacity: 0.55; }
.th-left-pane .sidebar-row .sidebar-glyph {
  flex: 0 0 20px;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--th-text-grey);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}
/* Group-chat participant-count badge — sits in the glyph column where
   a 1:1 DM row shows its presence dot (Slack's group-DM treatment). */
.th-left-pane .sidebar-row .sidebar-dm-count {
  flex: 0 0 auto;
  min-width: 14px;
  padding: 0 2px;
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.th-left-pane .sidebar-row .kind {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-text-grey);
}
.th-left-pane .sidebar-row .name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-left-pane .sidebar-row .sidebar-idx {
  flex: 0 0 auto;
  display: none;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-left-pane .sidebar-row:hover .sidebar-idx { display: inline; }
.th-left-pane .sidebar-row .unread,
.th-left-pane .sidebar-section-head .unread {
  flex: 0 0 auto;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--th-bright-orange);
  color: var(--th-black);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.th-left-pane .sidebar-row .close {
  flex: 0 0 auto;
  visibility: hidden;
  color: var(--th-text-grey);
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0 2px;
}
.th-left-pane .sidebar-row:hover .close { visibility: visible; }
.th-left-pane .sidebar-row .close:hover { color: var(--th-red, #c4564b); }

/* ---------- App button bar (full-slack.md §14) ----------
   The always-visible outermost rail: brand · destinations · settings ·
   collapse. Icon-over-label buttons, Slack/Mattermost style. */
.th-app-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  background: var(--th-titlebar);
  border-right: 1px solid var(--th-black);
  user-select: none;
  overflow: hidden;
}
.th-app-bar .app-bar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--th-black);
  flex: 0 0 auto;
}
.th-app-bar .app-bar-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.th-app-bar .app-bar-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  overflow-y: auto;
}
.th-app-bar .app-bar-spacer { flex: 1 1 auto; }
.th-app-bar .app-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px;
  margin: 2px 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--th-text-grey);
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.th-app-bar .app-bar-item:hover {
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
}
.th-app-bar .app-bar-item.active {
  background: var(--th-panel-2);
  color: var(--th-bright-yellow);
}
.th-app-bar .app-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.th-app-bar .app-bar-label {
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.th-app-bar .app-bar-collapse {
  flex: 0 0 auto;
  padding: 8px 2px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--th-black);
  color: var(--th-text-grey);
  font-size: 0.875rem;
  cursor: pointer;
}
.th-app-bar .app-bar-collapse:hover {
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
}

/* ---------- Settings panel (full-slack.md §14) ----------
   The Settings button swaps the left panel for the global controls —
   the old sidebar-foot icons, now full rows. */
.th-left-pane .settings-list { padding: 6px 8px; }
.th-left-pane .settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  color: var(--th-text-bright);
  position: relative;
}
.th-left-pane .settings-row:hover { background: var(--th-pale-blue); }
.th-left-pane .settings-row.active {
  background: var(--th-pale-blue);
  color: var(--th-bright-yellow);
}
.th-left-pane .settings-row-icon {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--th-text-grey);
  line-height: 0;
}
.th-left-pane .settings-row.active .settings-row-icon { color: var(--th-bright-yellow); }
.th-left-pane .settings-row-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-left-pane .settings-row-sub {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-left-pane .settings-row .badge {
  flex: 0 0 auto;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--th-red);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Link Analysis seed modal (full-slack.md §14) — paste id / by name /
   by type → the initial object(s). Rides the generic `.th-modal`. */
.la-seed-modal .la-seed-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 12px;
  border-bottom: 1px solid var(--th-divider);
}
.la-seed-modal .la-seed-tab {
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  cursor: pointer;
}
.la-seed-modal .la-seed-tab:hover { color: var(--th-text-bright); }
.la-seed-modal .la-seed-tab.active {
  color: var(--th-text-bright);
  border-bottom-color: var(--th-bright-orange);
}
.la-seed-modal .la-seed-body { display: flex; flex-direction: column; gap: 8px; }
.la-seed-modal .la-seed-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
}
.la-seed-modal .la-seed-input { width: 100%; }
.la-seed-modal .la-seed-hint {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.la-seed-modal .la-seed-matches {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--th-divider);
  border-radius: 3px;
}
.la-seed-modal .la-seed-match {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--th-text-bright);
}
.la-seed-modal .la-seed-match:hover { background: var(--th-pale-blue); }
.la-seed-modal .la-seed-match-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.la-seed-modal .la-seed-match-kind {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
/* Popovers rising beside the left panel (full-slack.md §14) — the same
   components the topbar hosted; only the anchors change. The host has
   no box of its own (its children are fixed-position). */
.th-popover-host { display: contents; }
.th-popover-host.from-panel .user-menu-scrim,
.th-popover-host.from-panel .settings-menu-scrim,
.th-popover-host.from-panel .search-menu-scrim {
  position: fixed;
  inset: 0;
}
.th-popover-host.from-panel .user-menu-panel,
.th-popover-host.from-panel .settings-menu-panel,
.th-popover-host.from-panel .search-menu-panel {
  position: fixed;
  left: calc(var(--app-rail-w) + var(--left-pane-w) + 8px);
  right: auto;
  top: auto;
  bottom: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
/* Panel hidden → anchor the popover off the app bar's right edge. */
.th-app.left-pane-collapsed .th-popover-host.from-panel .user-menu-panel,
.th-app.left-pane-collapsed .th-popover-host.from-panel .settings-menu-panel,
.th-app.left-pane-collapsed .th-popover-host.from-panel .search-menu-panel {
  left: calc(var(--app-rail-w) + 8px);
}

.th-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--th-text-grey);
  gap: 8px;
}
.th-empty h2 {
  color: var(--th-text-bright);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.th-empty .hint { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.7; }

/* ---------- Quickstart dashboard (docs/feature/quickstart.md) ---------- */
.th-quickstart {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  color: var(--th-text-grey);
  padding: 28px 32px 48px;
  box-sizing: border-box;
}
/* As the workspace empty-state, give it a comfortable centered column. */
.th-quickstart.as-empty > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

.dash-welcome { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.dash-welcome-h {
  color: var(--th-text-bright);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dash-welcome-sub { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.6; }

.dash-section { margin-bottom: 26px; }
.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--th-divider);
}
.dash-section-title {
  color: var(--th-text-bright);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dash-section-more {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--th-steel-blue-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.dash-section-more:hover { color: var(--th-text-bright); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.dash-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  background: var(--th-panel-2);
  border: 1px solid var(--th-border);
  border-left: 3px solid var(--th-steel-blue-2);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--th-text-grey);
  transition: background 0.12s ease, border-color 0.12s ease;
  min-width: 0;
}
.dash-card:hover { background: var(--th-titlebar); border-left-color: var(--th-bright-yellow); }
.dash-card-icon { font-size: 1.05rem; line-height: 1; flex: 0 0 auto; }
.dash-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dash-card-name {
  color: var(--th-text-bright);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-card-desc {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-card-badge {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  opacity: 0.7;
  white-space: nowrap;
}

/* Per-kind left-accent — mirrors the user-menu room-kind hues. */
.dash-card.kind-mission   { border-left-color: var(--th-bright-yellow); }
.dash-card.kind-channel   { border-left-color: var(--th-pale-purple); }
.dash-card.kind-document,
.dash-card.kind-data-file { border-left-color: var(--th-bright-orange); }
.dash-card.kind-library   { border-left-color: var(--th-steel-blue-2); }
.dash-card.kind-agent     { border-left-color: var(--th-pale-purple); }

.dash-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.7;
  padding: 4px 0;
}
.dash-empty-action {
  background: var(--th-panel-2);
  border: 1px solid var(--th-border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 10px;
}
.dash-empty-action:hover { background: var(--th-titlebar); border-color: var(--th-bright-yellow); }

/* ---------- Generic layout helpers ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.muted { color: var(--th-text-grey); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--th-divider);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.pill.warn { color: var(--th-bright-yellow); border-color: var(--th-pale-yellow); background: var(--th-pale-yellow); }
.pill.alert { color: var(--th-red); border-color: rgba(255,69,68,0.4); background: rgba(255,69,68,0.08); }
.pill.ok { color: var(--th-pale-purple); border-color: rgba(136,136,204,0.3); background: var(--th-pale-blue); }
.pill.geo { color: var(--th-bright-orange); border-color: var(--th-dark-orange); background: var(--th-dark-orange); }

/* ---------- Chat panel ---------- */
.th-chat {
  display: grid;
  grid-template-columns: 1fr 220px;
  height: 100%;
  background: var(--th-panel);
  border-left: 1px solid var(--th-divider);
}
.th-chat .messages {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--th-divider);
}
.th-chat .header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  height: var(--tabbar-h);
}
.th-chat .header .title {
  color: var(--th-text-bright);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.th-chat .scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px;
}
/* DM / plain-chat rooms render their message stream through
   `treehouse.rooms.channel/message-row` (the shared `.ch-msg`
   renderer), so the stacked meta-over-body layout, `.ch-msg-*`
   styling and the reactions/threads rules below cover them too. */
/* Layer-share chip — rendered in a chat/DM message body
   (`.ch-msg-body`, the shared channel/DM row renderer). */
.ch-msg-body .layer-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  background: var(--th-dark-orange);
  border: 1px solid var(--th-bright-orange);
  border-radius: 2px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  color: var(--th-bright-orange);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ch-msg-body .layer-share:hover { background: var(--th-bright-orange); color: var(--th-black); }
/* DM + plain chat composer — rich-input two-row layout. The composer
   stacks: format toolbar (B I S U | link, list, quote, code), then
   the textarea, then the action row (Aa, emoji, @, /, Send ▼). Both
   `:dm` and `:chat` rooms render through `treehouse.ui.composer`, so
   updating these rules re-styles both. */
.compose {
  display: flex;
  flex-direction: column;
  padding: 6px 12px 8px 12px;
  border-top: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  flex: 0 0 auto;
}
.compose .compose-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
}
.compose .compose-format-row {
  border-bottom: 1px solid var(--th-divider);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.compose .compose-fmt-btn,
.compose .compose-act-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1;
}
.compose .compose-fmt-btn { font-weight: 600; }
.compose .compose-fmt-btn:hover,
.compose .compose-act-btn:hover {
  background: var(--th-panel-2);
  border-color: var(--th-divider);
}
.compose .compose-act-btn.active {
  background: var(--th-dark-orange);
  border-color: var(--th-bright-orange);
}
.compose .compose-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--th-divider);
  margin: 0 4px;
}
.compose .compose-spacer { flex: 1; }
.compose .compose-input-wrap {
  position: relative;
  display: flex;
}
.compose .compose-input {
  flex: 1;
  /* Height is set dynamically by `treehouse.ui.composer/autosize!`
     based on scrollHeight (capped at ~240px). A min-height keeps the
     single-line look when empty. `resize: none` disables the manual
     drag handle — auto-grow replaces it. */
  min-height: 38px;
  resize: none;
  overflow-y: hidden;
  line-height: 1.4;
  padding: 8px 10px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-radius: 2px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.compose .compose-input:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
/* WYSIWYG variant — contenteditable mirror of the source-mode
   textarea. Same border / font / background; sized by content. The
   `th-wy-mark` spans are the kept-visible markdown markers — dimmed
   but still legible so the source remains roundtrip-editable. */
.compose .compose-input-rich {
  min-height: 38px;
  max-height: 240px;
  overflow-y: auto;
  line-height: 1.4;
  padding: 8px 10px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  cursor: text;
  flex: 1;
}
.compose .compose-input-rich:focus { border-color: var(--th-bright-orange); }
.compose .compose-input-rich:empty:before {
  content: attr(data-placeholder);
  color: var(--th-text-grey);
  pointer-events: none;
}
.compose .compose-input-rich .th-wy-mark {
  color: var(--th-text-grey);
  opacity: 0.55;
}
.compose .compose-input-rich .th-md-p { margin: 0; padding: 0; }
.compose .compose-input-rich .th-md-pre,
.compose .compose-input-rich .th-md-quote,
.compose .compose-input-rich .th-md-ul,
.compose .compose-input-rich .th-md-ol { margin: 4px 0; }
.compose .compose-input-rich strong { font-weight: 700; }
.compose .compose-input-rich em     { font-style: italic; }
.compose .compose-input-rich u      { text-decoration: underline; }
.compose .compose-input-rich s      { text-decoration: line-through; opacity: 0.85; }
.compose .compose-input-rich .th-md-code {
  font-family: var(--font-mono);
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  padding: 0 4px;
  border-radius: 2px;
}
.compose .compose-input-rich .th-md-link {
  color: var(--th-bright-orange);
  text-decoration: underline;
}
.compose .compose-send {
  background: var(--th-dark-orange);
  border: 1px solid var(--th-bright-orange);
  color: var(--th-text-bright);
  border-radius: 2px 0 0 2px;
  padding: 4px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.compose .compose-send-aux {
  background: var(--th-dark-orange);
  border: 1px solid var(--th-bright-orange);
  border-left: none;
  color: var(--th-text-bright);
  border-radius: 0 2px 2px 0;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}
/* Slash-command palette — anchored ABOVE the textarea so the cursor
   stays visible. Driven by `treehouse.ui.composer/slash-palette`. */
.compose .compose-slash-palette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  max-height: 220px;
  overflow-y: auto;
  background: var(--th-panel);
  border: 1px solid var(--th-bright-orange);
  border-radius: 2px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  z-index: 50;
}
.compose .compose-slash-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--th-divider);
}
.compose .compose-slash-row:last-child { border-bottom: none; }
.compose .compose-slash-row:hover,
.compose .compose-slash-row.active {
  background: var(--th-dark-orange);
}
.compose .compose-slash-name {
  font-weight: 700;
  color: var(--th-bright-orange);
  min-width: 110px;
}
.compose .compose-slash-row.active .compose-slash-name {
  color: var(--th-text-bright);
}
.compose .compose-slash-usage {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
}
.compose .compose-slash-desc {
  flex: 1;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
}
.compose .compose-slash-empty {
  padding: 10px 12px;
  color: var(--th-text-grey);
  font-style: italic;
  font-size: 0.75rem;
}

/* Shared popover chrome for emoji / mention / schedule pickers. The
   slash-palette has its own near-identical rules above for historical
   reasons; both anchor above the textarea inside .compose-input-wrap. */
.compose .compose-popover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--th-panel);
  border: 1px solid var(--th-bright-orange);
  border-radius: 2px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  z-index: 50;
}
.compose .compose-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.compose .compose-popover-x {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.compose .compose-popover-x:hover { color: var(--th-bright-orange); }

/* Emoji grid */
.compose .compose-emoji-popover { width: 320px; left: auto; }
.compose .compose-emoji-grid    { padding: 6px 8px; }
.compose .compose-emoji-group {
  margin: 6px 0 3px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.compose .compose-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.compose .compose-emoji-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.compose .compose-emoji-btn:hover {
  background: var(--th-panel-2);
  border-color: var(--th-divider);
}

/* Mention picker rows */
.compose .compose-mention-popover { width: 320px; left: auto; }
.compose .compose-mention-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}
.compose .compose-mention-row:last-child { border-bottom: none; }
.compose .compose-mention-row:hover,
.compose .compose-mention-row.active {
  background: var(--th-dark-orange);
}
.compose .compose-mention-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--th-bright-orange);
  font-size: 0.6875rem;
}
.compose .compose-mention-name { font-weight: 600; }
.compose .compose-mention-bot {
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  padding: 1px 4px;
  border-radius: 8px;
  background: var(--th-bright-orange);
  color: var(--th-black, #000);
}
.compose .compose-mention-jid {
  margin-left: auto;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
}
.compose .compose-mention-empty {
  padding: 10px 12px;
  color: var(--th-text-grey);
  font-style: italic;
  font-size: 0.75rem;
}

/* Object-link ($) picker — rows are shared between the composer
   popover and the object-ref-input dropdown, so they're not scoped
   under .compose. */
.compose .compose-link-popover { width: 380px; left: auto; }
.compose-link-search {
  display: block;
  width: 100%;
  padding: 6px 10px;
  background: var(--th-panel-2);
  border: none;
  border-bottom: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.compose-link-search:focus { outline: none; }
.compose-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}
.compose-link-row:last-child { border-bottom: none; }
.compose-link-row:hover,
.compose-link-row.active { background: var(--th-dark-orange); }
.compose-link-kind {
  flex: none;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-bright-orange);
}
.compose-link-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.compose-link-state {
  flex: none;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.compose-link-chan {
  flex: none;
  margin-left: auto;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
}
.compose-link-empty {
  padding: 10px 12px;
  color: var(--th-text-grey);
  font-style: italic;
  font-size: 0.75rem;
}
.compose-link-hint {
  padding: 4px 10px;
  border-top: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

/* object-ref-input — a form field with the $ picker attached
   (rich-linking.md Phase D). The dropdown reuses the link-picker
   rows above but carries its own box chrome because the composer's
   .compose-popover styles are scoped under .compose. */
.obj-ref-field { position: relative; }
.obj-ref-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.obj-ref-row .obj-ref-input { flex: 1 1 auto; min-width: 0; width: 100%; }
.obj-ref-row .obj-ref-input.obj-ref-bad { border-color: var(--th-bright-orange); }
.obj-ref-btn {
  flex: none;
  padding: 2px 7px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  color: var(--th-bright-orange);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.obj-ref-btn:hover,
.obj-ref-btn.active {
  background: var(--th-dark-orange);
  color: var(--th-text-bright);
}
.obj-ref-invalid {
  flex: none;
  color: var(--th-bright-orange);
  font-size: 0.6875rem;
  cursor: help;
}
.obj-ref-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 280px;
  overflow-y: auto;
  background: var(--th-panel);
  border: 1px solid var(--th-bright-orange);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 60;
}
.obj-ref-pop .compose-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.obj-ref-pop .compose-popover-x {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.obj-ref-pop .compose-popover-x:hover { color: var(--th-bright-orange); }

/* Schedule popover */
.compose .compose-schedule-popover { width: 280px; left: auto; }
.compose .compose-schedule-row {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}
.compose .compose-schedule-row:hover { background: var(--th-dark-orange); }
.compose .compose-schedule-when { font-weight: 600; }
.compose .compose-schedule-empty {
  padding: 10px 12px;
  color: var(--th-text-grey);
  font-style: italic;
  font-size: 0.75rem;
}
.compose .compose-schedule-custom {
  padding: 10px 12px;
  border-top: 1px solid var(--th-divider);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compose .compose-schedule-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.compose .compose-schedule-input {
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 6px;
  border-radius: 2px;
}
.compose .compose-schedule-go {
  margin-top: 4px;
  background: var(--th-dark-orange);
  border: 1px solid var(--th-bright-orange);
  color: var(--th-text-bright);
  border-radius: 2px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.compose .compose-schedule-go:disabled { opacity: 0.5; cursor: not-allowed; }

.th-chat .roster {
  display: flex;
  flex-direction: column;
  background: var(--th-panel-2);
}
.th-chat .roster .header { background: var(--th-titlebar); }
/* Invite affordance — shared by the MUC roster header and the DM
   participants head (DM → group escalation, treehouse.chat.invite). */
.th-chat .roster-invite {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  border-radius: 2px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.th-chat .roster-invite:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-chat .roster .header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-chat .roster ul {
  list-style: none;
  margin: 0; padding: 8px 0;
  overflow-y: auto;
  flex: 1;
}
.th-chat .roster li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: 0.8125rem;
  color: var(--th-text-bright);
}
.th-chat .roster li .presence {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--th-pale-purple);
}
.th-chat .roster li.away .presence { background: var(--th-bright-yellow); }
.th-chat .roster li.dnd .presence { background: var(--th-red); }
.th-chat .roster li.offline .presence { background: var(--th-text-grey); opacity: 0.4; }
.th-chat .roster li.bot .presence { background: var(--th-bright-orange); }

/* ---------- DM info pane (chat-room right side, kind :dm) ----- */
.th-chat .dm-info-pane {
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  border-left: 1px solid var(--th-divider);
  overflow: hidden;
}
.th-chat .dm-info-head {
  padding: 8px 14px;
  height: var(--tabbar-h);
  display: flex;
  align-items: center;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.th-chat .dm-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.th-chat .dm-info-id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.th-chat .dm-info-participants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.th-chat .dm-info-participant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.th-chat .dm-info-participant .dm-info-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
}
.th-chat .dm-info-participant.self .dm-info-avatar {
  background: var(--th-dark-orange);
  border-color: var(--th-bright-orange);
}
.th-chat .dm-info-participant .dm-info-name { font-size: 0.8125rem; }
.th-chat .dm-info-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--th-pale-blue);
  border: 1px solid var(--th-steel-blue);
  color: var(--th-text-bright);
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.th-chat .dm-info-id-text { min-width: 0; }
.th-chat .dm-info-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-chat .dm-info-jid {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-chat .dm-info-band {
  border-top: 1px solid var(--th-divider);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-chat .dm-info-band-head {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.th-chat .dm-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  gap: 8px;
}
.th-chat .dm-info-row .k {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: none;
}
.th-chat .dm-info-row .v {
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-chat .dm-info-link {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-pale-purple);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.th-chat .dm-info-link:hover {
  background: var(--th-hover);
  border-color: var(--th-pale-purple);
}
.th-chat .dm-info-channels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.th-chat .dm-info-empty {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  font-style: italic;
}
.th-chat .dm-info-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
}

/* ---------- Channel members — clickable rows ------------------ */
/*
 * Only override cursor + hover background. The previous version also
 * applied `padding: 4px 6px; margin: 0 -6px` to non-self rows, which
 * shifted their content 6px closer to the panel edge than the self
 * row (which inherited the base `li` padding of 4px 12px). Result:
 * the operator's own row was indented and everyone else's was flush
 * with the edge. Now every row shares the base padding for consistent
 * alignment, and the full-width hover background still works because
 * the `li` already spans the panel content width.
 */
.th-channel .ch-members .ch-mem-row[role="button"],
.th-canvas .ch-members .ch-mem-row[role="button"] {
  cursor: pointer;
}
.th-channel .ch-members .ch-mem-row[role="button"]:hover,
.th-canvas .ch-members .ch-mem-row[role="button"]:hover {
  background: var(--th-hover);
}

/* ---------- Threaded replies (XEP-0461) ----------------------------------
 * Hover toolbar + "N replies" pill render on every chat / DM / MIX message;
 * the side panel re-uses the right-most column of the room layout via the
 * `.with-thread` class on `.th-chat` / `.th-channel`.
 *
 * Threading is purely client-side (Hoot is XEP-0461 pass-through), so this
 * CSS only needs to make the in-channel chrome legible — there's no
 * server-driven aggregation indicator to style.
 * ------------------------------------------------------------------------ */

/* Message row anchors the absolutely-positioned hover toolbar.
   `.ch-msg` is the shared row for channels and DMs / plain chat. */
.ch-msg {
  position: relative;
}

.th-msg-actions {
  position: absolute;
  top: -10px;
  right: 8px;
  display: none;       /* revealed on row hover */
  z-index: 2;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  padding: 1px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.ch-msg:hover .th-msg-actions { display: inline-flex; }

.th-msg-action {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 2px;
}
.th-msg-action:hover {
  background: var(--th-panel-2);
  color: var(--th-text-bright);
}
/* Pinned state — the 📌 toggle stays lit when this message is pinned */
.th-msg-action.active {
  color: var(--th-bright-orange);
}

/* "N replies" pill — surfaces on thread roots in the main flow */
.th-replies-pill {
  appearance: none;
  margin-top: 4px;
  background: transparent;
  border: 1px solid var(--th-steel-blue-2);
  color: var(--th-steel-blue-2);
  border-radius: 12px;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-replies-pill:hover {
  background: var(--th-steel-blue-2);
  color: var(--th-black);
}
/* In channel rendering, the pill sits below the message body — same
   visual weight as the body, indented to align with the body column. */
.ch-msg .th-replies-pill { align-self: flex-start; margin-left: 2px; }

/* ------------------------------------------------------------------------
 * Reaction chip strip — inline under each message body. See
 * docs/feature/reactions.md §2 for the visual spec.
 * ------------------------------------------------------------------------ */

.th-rx-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  align-self: flex-start;
}

/* When the strip has no chips yet, only the trailing "+ Add reaction"
   button is shown — and only on row hover, so quiet messages don't
   sprout always-visible affordances. `visibility` (not `display`) so the
   strip keeps its height while hidden and the row doesn't jump on hover. */
.th-rx-strip.is-empty { visibility: hidden; }
.ch-msg:hover .th-rx-strip.is-empty { visibility: visible; }

.th-rx-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  border-radius: 12px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.08s, border-color 0.08s, box-shadow 0.08s;
}
.th-rx-chip:hover {
  border-color: var(--th-steel-blue-2);
  color: var(--th-text-bright);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.th-rx-chip.is-self {
  background: var(--th-steel-blue-2);
  border-color: var(--th-steel-blue-2);
  color: var(--th-black);
}
.th-rx-chip.is-self:hover {
  background: var(--th-bright-orange, var(--th-steel-blue-2));
  border-color: var(--th-bright-orange, var(--th-steel-blue-2));
}
.th-rx-chip-glyph { font-size: 0.8125rem; line-height: 1; }
.th-rx-chip-count { font-variant-numeric: tabular-nums; opacity: 0.85; }
.th-rx-chip-img { width: 14px; height: 14px; object-fit: contain; }

/* HERO-attributed (curated-library) chip — distinct outline so the
   curated vocabulary reads differently from stock-glyph reactions. */
.th-rx-chip.is-hero {
  border-color: var(--th-bright-orange, var(--th-steel-blue-2));
}
.th-rx-chip.is-hero.is-self {
  background: var(--th-bright-orange, var(--th-steel-blue-2));
  border-color: var(--th-bright-orange, var(--th-steel-blue-2));
}
.th-rx-chip-hero-name {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  padding-left: 4px;
  border-left: 1px solid currentColor;
  margin-left: 2px;
}

/* Inline image in the Team Library picker grid (image-uri attribute). */
.th-rx-picker-img { width: 22px; height: 22px; object-fit: contain; }

/* "+ New" affordance trailing the Team Library grid. */
.th-rx-library-new {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--th-text-grey);
  border: 1px dashed var(--th-divider);
}
.th-rx-library-new:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}

/* Mint-a-reaction modal. */
.th-rx-mint {
  width: 360px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-rx-mint-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-panel-2);
  display: flex;
  align-items: center;
}
.th-rx-mint-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-bright);
}
.th-rx-mint-body { padding: 12px; }
.th-rx-mint-body label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
  margin-bottom: 10px;
}
.th-rx-mint-body label input,
.th-rx-mint-body label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: var(--th-bg);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 5px 8px;
  border-radius: 3px;
  box-sizing: border-box;
  text-transform: none;
  letter-spacing: 0;
}
.th-rx-mint-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}
.th-rx-mint-cancel,
.th-rx-mint-submit {
  appearance: none;
  border: 1px solid var(--th-divider);
  background: var(--th-bg);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-rx-mint-submit {
  background: var(--th-steel-blue-2);
  border-color: var(--th-steel-blue-2);
  color: var(--th-black);
}
.th-rx-mint-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.th-rx-mint-cancel:hover { border-color: var(--th-text-bright); }
.th-rx-mint-submit:not(:disabled):hover {
  background: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}

/* The trailing "+ Add reaction" affordance — same chip shape, glyph-only. */
.th-rx-add { padding: 1px 7px; opacity: 0.7; }
.th-rx-add:hover { opacity: 1; }
.th-rx-add .th-rx-chip-glyph { font-size: 0.75rem; font-weight: 600; }

/* ------------------------------------------------------------------------
 * Reactions picker modal — opens from the "+" affordance. See
 * docs/feature/reactions.md §3.
 * ------------------------------------------------------------------------ */

.th-rx-picker {
  width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  overflow: hidden;
}

.th-rx-picker-search {
  padding: 8px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-panel-2);
}
.th-rx-picker-search-input {
  width: 100%;
  background: var(--th-bg);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 8px;
  border-radius: 3px;
  box-sizing: border-box;
}
.th-rx-picker-search-input:focus {
  outline: none;
  border-color: var(--th-steel-blue-2);
}

.th-rx-picker-body {
  overflow-y: auto;
  padding: 8px 8px 12px;
}

.th-rx-picker-section { margin-top: 6px; }
.th-rx-picker-section:first-child { margin-top: 0; }

.th-rx-picker-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  margin-bottom: 4px;
  padding-left: 2px;
}
.th-rx-picker-group { margin-top: 8px; }
.th-rx-picker-group:first-child { margin-top: 0; }
.th-rx-picker-group-label {
  font-size: 0.625rem;
  color: var(--th-text-grey);
  font-style: italic;
  margin-bottom: 3px;
  padding-left: 2px;
}

.th-rx-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.th-rx-picker-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font-size: 1.125rem;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
}
.th-rx-picker-btn:hover {
  background: var(--th-panel-2);
  border-color: var(--th-steel-blue-2);
}

.th-rx-picker-custom-cell {
  position: relative;
  display: inline-flex;
}
.th-rx-picker-custom-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  appearance: none;
  background: var(--th-bg);
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 12px;
  font-size: 0.6875rem;
  padding: 0;
  cursor: pointer;
  display: none;
}
.th-rx-picker-custom-cell:hover .th-rx-picker-custom-remove { display: inline-block; }
.th-rx-picker-custom-remove:hover { color: var(--th-bright-orange); }

.th-rx-picker-add-row {
  margin-top: 6px;
}
.th-rx-picker-add-input {
  width: 100%;
  background: var(--th-bg);
  border: 1px dashed var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 5px 8px;
  border-radius: 3px;
  box-sizing: border-box;
}
.th-rx-picker-add-input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--th-steel-blue-2);
}

.th-rx-picker-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  font-style: italic;
}

/* ------------------------------------------------------------------------
 * Reactors popover — opens on right-click of a chip; lists every
 * reactor for one (scope, parent, emoji). See docs/feature/reactions.md §6.
 * ------------------------------------------------------------------------ */

.th-rx-reactors-popover {
  width: 280px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  overflow: hidden;
}
.th-rx-reactors-head {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: var(--th-panel-2);
  border-bottom: 1px solid var(--th-divider);
  gap: 6px;
}
.th-rx-reactors-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.th-rx-reactors-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0 4px;
}
.th-rx-reactors-close:hover { color: var(--th-bright-orange); }
.th-rx-reactors-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
.th-rx-reactors-row {
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
}
.th-rx-reactors-row:hover { background: var(--th-panel-2); }
.th-rx-reactors-footer,
.th-rx-reactors-showall {
  padding: 8px 10px;
  border-top: 1px solid var(--th-divider);
  background: var(--th-panel-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  text-align: center;
}
.th-rx-reactors-showall {
  appearance: none;
  width: 100%;
  border: none;
  cursor: pointer;
}
.th-rx-reactors-showall:hover {
  background: var(--th-steel-blue-2);
  color: var(--th-black);
}

/* When a thread is open, widen the right-side column to fit the panel.
   (Channel rooms don't need a rule here — their .ch-body is a flex row
   and the thread panel carries its own flex-basis; see the channel
   body section.) */
.th-chat.with-thread { grid-template-columns: 1fr 340px; }

/* Thread side-panel */
.th-thread-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--th-panel);
  border-left: 1px solid var(--th-divider);
}
.th-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  height: var(--tabbar-h);
}
.th-thread-title {
  color: var(--th-text-bright);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.th-thread-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.th-thread-close:hover { color: var(--th-text-bright); }

.th-thread-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px;
}
.th-thread-root {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--th-divider);
  margin-bottom: 8px;
}
.th-thread-root-placeholder {
  color: var(--th-text-grey);
  font-style: italic;
  font-size: 0.75rem;
  padding: 6px 4px;
}
.th-thread-replies { display: flex; flex-direction: column; gap: 6px; }
.th-thread-reply { padding: 2px 0; }

.th-thread-composer {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--th-divider);
  background: var(--th-panel-2);
}
.th-thread-composer textarea {
  flex: 1;
  resize: none;
  height: 48px;
  background: var(--th-titlebar);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 8px;
  border-radius: 3px;
}
.th-thread-composer textarea:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
.th-thread-send {
  appearance: none;
  background: var(--th-bright-orange);
  color: var(--th-black);
  border: none;
  border-radius: 3px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.th-thread-send:hover { background: var(--th-pale-purple); }

/* ---------- GEOINT room ---------- */
/* Layout: a 36px control bar sits across the top (~80% of the 44px
   global topbar). The body below splits into three columns —
   left pane (320px), map (1fr), right pane (320px). Either pane
   can hide; the columns collapse via `.no-left` / `.no-right`
   classes set on the root. */
:root { --cop-control-bar-h: 36px; }
.th-geoint {
  /* `position: relative` anchors the floating detail (info) panel, which
     OVERLAYS the map rather than taking a grid column. Selecting /
     deselecting a feature therefore never reflows the map — which would
     resize the maplibre canvas and make it re-center ("jump") on every
     click. The map is only re-centered deliberately (on COP open, and the
     "View AO" control). */
  position: relative;
  display: grid;
  grid-template-rows: var(--cop-control-bar-h) 1fr;
  grid-template-columns: 320px 1fr;
  grid-template-areas:
    "bar   bar"
    "left  map";
  height: 100%;
}
.th-geoint.no-left { grid-template-columns: 0 1fr; }
/* `.no-right` is intentionally a no-op on the grid: the detail panel is an
   overlay (below), so its presence/absence never changes the map width. */
.th-geoint .cop-control-bar { grid-area: bar;   }
.th-geoint .cop-sidebar     { grid-area: left;  }
.th-geoint .map-host        { grid-area: map;   }

/* Second top bar — Controls / Layers / Tracks / Map Options. */
.cop-control-bar {
  display: flex;
  align-items: stretch;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-black);
  user-select: none;
}
.cop-control-bar-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--th-black);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
/* cop-chat.md — right-aligns the ◫ CHAT split-view jump. */
.cop-control-bar-spacer { flex: 1; }
.cop-control-bar .cop-split-btn {
  border-right: 0;
  border-left: 1px solid var(--th-black);
}
.cop-control-bar-btn:hover {
  background: var(--th-panel-2);
  color: var(--th-text-bright);
}
.cop-control-bar-btn.active {
  background: var(--th-panel);
  color: var(--th-text-bright);
  border-bottom: 2px solid var(--th-bright-orange);
}

/* Bottom-left sidebar toggle — sits flush with the sidebar/map
   boundary. Shows "<<" when the pane is open, ">>" when collapsed,
   so both states use the same hit target at the same location. */
.cop-left-toggle {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 20;
  width: 28px;
  height: 28px;
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  background: var(--th-panel);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  line-height: 1;
}
.cop-left-toggle:hover {
  background: var(--th-panel-2);
  color: var(--th-text-bright);
  border-color: var(--th-steel-blue-2);
}

/* Tracks panel — left-pane list under the "Tracks" control-bar tab. */
.tracks-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
}
.tracks-panel .panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.cop-track-row {
  padding: 6px 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.cop-track-row:hover { background: var(--th-panel-2); }
.cop-track-row.active {
  background: var(--th-panel-2);
  border-left-color: var(--th-bright-orange);
}
.cop-track-row.aff-friend  { border-left-color: var(--th-steel-blue-2); }
.cop-track-row.aff-hostile { border-left-color: var(--th-red, #c4564b); }
.cop-track-row-main { flex: 1; min-width: 0; }
.cop-track-row-name {
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cop-track-row-meta {
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cop-track-row-threat {
  font-size: 0.5625rem;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.th-geoint .map-host {
  position: relative;
  background: #050810;
  overflow: hidden;
}
.th-geoint .map-host .deck-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 8px;
  border-radius: 2px;
  z-index: 10;
}
.th-geoint .layers-panel,
.th-geoint .info-panel {
  background: var(--th-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-geoint .layers-panel { border-right: 1px solid var(--th-divider); }
/* Detail panel overlays the map's right edge (it is NOT a grid column —
   see `.th-geoint` above) so opening/closing it never resizes the map. */
.th-geoint .info-panel  {
  position: absolute;
  top: var(--cop-control-bar-h);
  right: 0;
  bottom: 0;
  width: 320px;
  z-index: 5;
  border-left: 1px solid var(--th-divider);
}

/* COP sidebar — single panel at a time, driven by the control bar's
   active tab. The inner panel (layers / tracks / palette / map options)
   fills the available height. The parent provides the right border. */
.th-geoint .cop-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  border-right: 1px solid var(--th-divider);
  overflow: hidden;
}
.th-geoint .cop-sidebar > * {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.th-geoint .cop-sidebar .layers-panel { border-right: none; }
/* Map Options panel — wraps Controls + Operators. Each fills half by
   default; the children stack and scroll independently. */
.th-geoint .map-options-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-geoint .map-options-panel > * {
  flex: 1 1 0;
  min-height: 0;
}
/* COP Basemap picker — satellite / line / hybrid radio list. Shown
   inside Map Options, above Controls. */
.th-geoint .cop-basemap {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--th-divider);
  overflow: hidden;
}
.th-geoint .cop-basemap .panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* COP Controls panel — view-side toggles + AO summary. Shown inside
   Map Options. */
.th-geoint .controls-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-geoint .controls-panel .panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-geoint .cop-control {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: left;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-geoint .cop-control:hover {
  background: var(--th-hover);
  border-color: var(--th-pale-purple);
}
.th-geoint .cop-control.active {
  color: var(--th-bright-yellow);
  border-color: var(--th-bright-yellow);
}
.th-geoint .cop-control-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  padding: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-geoint .cop-control-meta .k {
  color: var(--th-text-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-geoint .cop-control-meta .row { font-size: 0.625rem; }

/* Tool palette (Phase A of hero-cop-features) — left-rail authoring
   toolbar that arms a HERO marker kind. The map-host gets a
   crosshair cursor whenever a tool is armed, so the operator's
   intent is unambiguous on hover. */
.th-geoint .cop-tools {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-geoint .cop-tools .panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.th-geoint .cop-tool-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.th-geoint .cop-tool-group-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
}
/* Add Object picker (cop-mgrs.md) — drop a locatable HERO of any kind */
.th-geoint .cop-add-object { margin-top: 8px; }
.th-geoint .cop-add-object-select {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 5px 8px;
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
}
.th-geoint .cop-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.th-geoint .cop-tool-tile {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  min-width: 38px;
  text-align: center;
}
.th-geoint .cop-tool-tile:hover {
  background: var(--th-hover);
  border-color: var(--th-pale-purple);
}
.th-geoint .cop-tool-tile.armed {
  background: var(--th-hover);
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}
.th-geoint .cop-tool-disarm {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.th-geoint .cop-tool-disarm:hover {
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}
.th-geoint .cop-tool-objective {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  background: rgba(154, 129, 57, 0.08);
  border: 1px solid rgba(154, 129, 57, 0.4);
  border-radius: 3px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.th-geoint .cop-tool-objective-id {
  color: var(--th-text-bright);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.625rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-geoint .cop-tool-objective-clear {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0 4px;
}
.th-geoint .cop-map-armed,
.th-geoint .cop-map-armed canvas {
  cursor: crosshair !important;
}

/* Site multi-tab modal (Phase C) — placement + edit for objective
   sites. Tabs strip + per-tab body + tag chip picker + floors/rooms
   accordion. All reuse the existing th-modal chrome. */
.th-modal.cop-site-modal { max-width: 90vw; }

.th-modal .cop-site-tabs {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  border-bottom: 1px solid var(--th-divider);
}
.th-modal .cop-site-tab {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.th-modal .cop-site-tab:hover { color: var(--th-text-bright); }
.th-modal .cop-site-tab.active {
  color: var(--th-text-bright);
  border-bottom-color: var(--th-bright-orange);
}

.th-modal .cop-site-tab-body {
  padding: 10px 0;
  max-height: 60vh;
  overflow-y: auto;
}

.th-modal .cop-site-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
  padding: 8px 10px;
  background: rgba(16,20,24,0.5);
  border: 1px solid var(--th-divider);
}
.th-modal .cop-site-summary .k {
  color: var(--th-text-grey);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.th-modal .cop-site-hint {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  margin: 8px 0;
}

/* Floors / rooms accordion */
.th-modal .cop-site-floor,
.th-modal .cop-site-room {
  border: 1px solid var(--th-divider);
  padding: 8px;
  margin-top: 8px;
  background: rgba(16,20,24,0.4);
}
.th-modal .cop-site-room {
  margin-left: 16px;
  background: rgba(16,20,24,0.6);
}
.th-modal .cop-site-floor-head {
  display: flex;
  gap: 6px;
  align-items: center;
}
.th-modal .cop-site-id {
  width: 80px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-modal .cop-site-label {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.75rem;
}
.th-modal .cop-site-desc {
  width: 100%;
  margin-top: 6px;
  font-size: 0.6875rem;
}
.th-modal .cop-site-remove {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  width: 24px; height: 24px;
  font-size: 0.875rem;
  cursor: pointer;
}
.th-modal .cop-site-remove:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
.th-modal .cop-site-rooms { margin-top: 8px; }
.th-modal .cop-site-add {
  margin-top: 8px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: transparent;
  border: 1px dashed var(--th-divider);
  color: var(--th-text-grey);
  cursor: pointer;
}
.th-modal .cop-site-add:hover {
  color: var(--th-text-bright);
  border-color: var(--th-bright-orange);
}

/* Tag chip picker — reused by site, floor, and room tag fields */
.th-modal .cop-tag-picker { margin-top: 6px; }
.th-modal .cop-tag-cat { margin-top: 8px; }
.th-modal .cop-tag-cat-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 4px;
}
.th-modal .cop-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.th-modal .cop-tag-chip {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  cursor: pointer;
}
.th-modal .cop-tag-chip:hover {
  color: var(--th-text-bright);
  border-color: var(--th-text-bright);
}
.th-modal .cop-tag-chip.selected {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
  background: rgba(201,117,49,0.08);
}
.th-modal .cop-tag-custom { margin-top: 8px; }
.th-modal .cop-tag-custom input { width: 100%; font-size: 0.6875rem; }

/* Polygon Done overlay (Phase C) — floats inside the map-host while
   the operator is collecting vertices for an objective-site footprint.
   Disabled until 3+ vertices are placed (a 2-point ring isn't a
   polygon). Cancel always works. */
.th-geoint .cop-polygon-overlay {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
  background: rgba(16,20,24,0.85);
  padding: 6px 10px;
  border: 1px solid var(--th-divider);
}
.th-geoint .cop-polygon-overlay .count {
  color: var(--th-text-grey);
  font-size: 0.625rem;
}
.th-geoint .cop-polygon-overlay button {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-geoint .cop-polygon-overlay button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Draft-plan save bar (cop-mgrs.md §4/§5) — sits just under the route
   Done bar's slot, wider to hold the name input. */
.th-geoint .cop-plan-bar {
  position: absolute;
  top: 52px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
  background: rgba(16,20,24,0.9);
  padding: 6px 10px;
  border: 1px solid var(--th-divider);
}
.th-geoint .cop-plan-bar-title { color: var(--th-text-bright); }
.th-geoint .cop-plan-bar-summary { color: var(--th-text-grey); font-size: 0.625rem; }
.th-geoint .cop-plan-bar-name {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 4px 8px;
  min-width: 200px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
}
.th-geoint .cop-plan-bar button {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-geoint .cop-plan-bar button.primary {
  background: var(--th-accent, #3a6);
  color: #fff;
}

/* Saved-plan rows in the Layers panel (cop-mgrs.md §6) */
.th-geoint .cop-plan-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 6px;
}
.th-geoint .cop-plan-row-actions {
  display: flex;
  gap: 6px;
  padding: 0 8px 4px;
}
.th-geoint .cop-plan-row-actions button {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 8px;
  color: var(--th-text-grey);
}

/* Place-marker modal — surfaces the kind doctrine line + the click
   coords so the operator knows what they're committing to. */
.th-modal .cop-place-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  margin-top: 4px;
}
.th-modal .cop-place-kind { color: var(--th-text-bright); }
.th-modal .cop-place-coords { font-size: 0.625rem; }
.th-modal .cop-place-scope { font-size: 0.625rem; }
.th-modal .cop-place-doctrine {
  margin: 8px 0 4px;
  padding: 6px 8px;
  border-left: 2px solid var(--th-pale-purple);
  background: rgba(136, 136, 204, 0.08);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  line-height: 1.4;
}

/* Building View modal — consolidated objective-site → floors → rooms tree.
   Distinct from the hero navigator (one HERO at a time); this shows the
   whole building at once for clearance planning. */
.th-modal.bv-modal { max-width: 92vw; }
.th-modal.bv-modal .bv-header {
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.th-modal.bv-modal .bv-summary {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.th-modal.bv-modal .bv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.th-modal.bv-modal .bv-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--th-border);
  background: var(--th-bg-1);
  color: var(--th-text-bright);
}
.th-modal.bv-modal .bv-attrs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 10px 0 0;
}
.th-modal.bv-modal .bv-attr { display: contents; }
.th-modal.bv-modal .bv-attr dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.th-modal.bv-modal .bv-attr dd { margin: 0; font-size: 0.75rem; color: var(--th-text-bright); }
.th-modal.bv-modal .bv-body {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.th-modal.bv-modal .bv-floors { display: flex; flex-direction: column; gap: 10px; }
.th-modal.bv-modal .bv-floor {
  border: 1px solid var(--th-border);
  border-radius: 6px;
  background: var(--th-panel-2);
  padding: 10px 12px;
}
.th-modal.bv-modal .bv-floor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.th-modal.bv-modal .bv-floor-name { font-weight: 700; color: var(--th-text-bright); }
.th-modal.bv-modal .bv-floor-count,
.th-modal.bv-modal .bv-room-id {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-modal.bv-modal .bv-floor-desc,
.th-modal.bv-modal .bv-room-desc {
  font-size: 0.75rem;
  color: var(--th-text-grey);
  margin-top: 2px;
}
.th-modal.bv-modal .bv-rooms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--th-border);
}
.th-modal.bv-modal .bv-room {
  background: var(--th-bg-1);
  border-radius: 4px;
  padding: 6px 8px;
}
.th-modal.bv-modal .bv-room-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.th-modal.bv-modal .bv-room-name { font-size: 0.8125rem; color: var(--th-text-bright); }
.th-modal.bv-modal .bv-empty {
  font-size: 0.75rem;
  color: var(--th-text-grey);
  font-style: italic;
  padding: 4px 0;
}

/* Edit AO modal — uses the standard modal scaffold (.th-modal) plus
   a narrower max-width since the form is short. */
.th-modal.cop-edit-ao { width: min(480px, 92vw); }
.th-modal.cop-edit-ao .hint {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  margin: 4px 0 8px 0;
}
.th-geoint .panel-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-bright);
  height: var(--tabbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.th-geoint .panel-body { flex: 1; overflow-y: auto; padding: 10px 0; }

/* Info-panel header X — clears the current track selection */
.th-geoint .info-panel-clear {
  background: transparent;
  border: 1px solid transparent;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  border-radius: 3px;
}
.th-geoint .info-panel-clear:hover {
  color: var(--th-text-bright);
  background: var(--th-hover);
  border-color: var(--th-divider);
}

.th-geoint .layer-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.8125rem;
}
.th-geoint .layer-row:hover { background: var(--th-panel-2); }
.th-geoint .layer-row .swatch {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--th-bright-orange);
  box-shadow: 0 0 6px rgba(201,117,49,0.5);
}
.th-geoint .layer-row .name { color: var(--th-text-bright); }
.th-geoint .layer-row .meta { color: var(--th-text-grey); font-size: 0.6875rem; }
.th-geoint .layer-row .toggle {
  width: 28px; height: 16px;
  background: var(--th-pale-blue);
  border-radius: 10px;
  position: relative;
  border: 1px solid var(--th-divider);
}
.th-geoint .layer-row .toggle::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  background: var(--th-text-grey);
  border-radius: 50%;
  transition: 120ms;
}
.th-geoint .layer-row.on .toggle { background: var(--th-dark-orange); border-color: var(--th-bright-orange); }
.th-geoint .layer-row.on .toggle::after { left: 13px; background: var(--th-bright-orange); }

/* Swatch removed from the Layers-pane rows — collapse the leading column
   so the label, the data-file entities button, and the toggle line up. */
.th-geoint .layer-row.no-swatch { grid-template-columns: 1fr auto auto; }
/* First-class layer rows (cop-layers.md) — stacked: a header line
   (swatch + name + active radio + edit + optional unmount + toggle),
   then the member count, then the layer's tag chips. */
.th-geoint .layer-row.cop-hero-layer-row {
  display: block;
  padding: 8px 14px;
}
.th-geoint .cop-hero-layer-row .layer-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.th-geoint .cop-hero-layer-row .layer-row-head .swatch,
.th-geoint .cop-hero-layer-row .layer-row-head .toggle,
.th-geoint .cop-hero-layer-row .layer-row-head .cop-entities-btn { flex: none; }
.th-geoint .cop-hero-layer-row .layer-row-head .name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
/* Member count + tags indent under the name (10px swatch + 8px gap). */
.th-geoint .cop-hero-layer-row > .meta { margin: 3px 0 0 18px; }
.th-geoint .cop-hero-layer-row .layer-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0 0 18px;
}
/* Chips here are informational, not filters — no pointer/hover accent. */
.th-geoint .layer-row-tags .layer-tag-chip { cursor: default; }
.th-geoint .layer-row-tags .layer-tag-chip:hover {
  color: var(--th-text-grey);
  border-color: var(--th-divider);
}
.th-geoint .cop-entities-btn.active {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
/* Tag chips (layer mount browser + editor). */
.layer-tag-chip {
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  cursor: pointer;
}
.layer-tag-chip:hover { color: var(--th-text-bright); border-color: var(--th-bright-orange); }
.layer-tag-chip.active {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
  background: var(--th-hover);
}
.th-geoint .layer-row-main { min-width: 0; cursor: pointer; }
.th-geoint .layer-row .toggle { cursor: pointer; }
/* Data-file button (mirrors the library tree's `kind-data-file` glyph) —
   opens the source's object list in the right pane. */
.th-geoint .cop-entities-btn {
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--th-text-grey);
  cursor: pointer;
}
.th-geoint .cop-entities-btn:hover {
  color: var(--th-text-bright);
  background: var(--th-hover);
  border-color: var(--th-bright-orange);
}

.th-geoint .ao-card {
  margin: 10px 14px;
  padding: 10px;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  background: var(--th-panel-2);
}
.th-geoint .ao-card h4 {
  margin: 0 0 6px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-bright-yellow);
}
.th-geoint .ao-card .row { gap: 6px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--th-text-bright); }

/* =========================================================
   Track / Feature detail card — tactical-style readout
   ========================================================= */

.th-geoint .feature-card {
  margin: 0;
  padding: 0;
  /* The affiliation stripe sits on the left edge as a 4px-wide bar
     so operators can identify friend / hostile / neutral / unknown
     at a glance even when the detail pane is partially obscured. */
  border-left: 4px solid var(--th-text-grey);
  background: var(--th-panel-2);
}
.th-geoint .feature-card.aff-friend   { border-left-color: #88aaff; }
.th-geoint .feature-card.aff-hostile  { border-left-color: var(--th-red); }
.th-geoint .feature-card.aff-neutral  { border-left-color: #d0d0d0; }
.th-geoint .feature-card.aff-suspect  { border-left-color: var(--th-bright-orange); }
.th-geoint .feature-card.aff-unknown  { border-left-color: var(--th-bright-yellow); }

/* --- Identity band ---------------------------------------- */
.th-geoint .feature-card .fc-id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px 14px;
  border-bottom: 1px solid var(--th-divider);
}
.th-geoint .feature-card .fc-icon {
  flex: none;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.7));
}
.th-geoint .feature-card .fc-id-text { min-width: 0; }
.th-geoint .feature-card .fc-callsign {
  color: var(--th-text-bright);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-geoint .feature-card .fc-sub {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* --- Generic band wrapper ---------------------------------- */
.th-geoint .feature-card .fc-band {
  padding: 10px 14px;
  border-bottom: 1px solid var(--th-divider);
}
.th-geoint .feature-card .fc-band-head {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

/* --- Position band ---------------------------------------- */
.th-geoint .feature-card .fc-position {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--th-text-bright);
  line-height: 1.4;
}
.th-geoint .feature-card .fc-coord {
  letter-spacing: 0.04em;
}

/* --- Kinematics row (Course / Speed / Alt) ---------------- */
.th-geoint .feature-card .fc-kine-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.th-geoint .feature-card .fc-kine {
  text-align: center;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--th-divider);
  border-radius: 4px;
  padding: 6px 4px;
}
.th-geoint .feature-card .fc-kine-label {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.th-geoint .feature-card .fc-kine-value {
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* --- Threat badge ----------------------------------------- */
.th-geoint .feature-card .fc-threat {
  margin: 10px 14px;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.th-geoint .feature-card .fc-threat.tl-low    { background: rgba(154, 129, 57, 0.18); color: var(--th-bright-yellow);  border: 1px solid var(--th-bright-yellow); }
.th-geoint .feature-card .fc-threat.tl-medium { background: rgba(201, 117, 49, 0.22); color: var(--th-bright-orange);  border: 1px solid var(--th-bright-orange); }
.th-geoint .feature-card .fc-threat.tl-high   { background: rgba(201, 117, 49, 0.35); color: #ffd0a0;                 border: 1px solid var(--th-bright-orange); }
.th-geoint .feature-card .fc-threat.tl-alert  { background: rgba(255, 68, 68, 0.30);  color: #ffd0d0;                 border: 1px solid var(--th-red); }
.th-geoint .feature-card .fc-maneuver {
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
}

/* --- Track-quality chips ---------------------------------- */
.th-geoint .feature-card .fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.th-geoint .feature-card .fc-chip {
  background: var(--th-hover);
  border: 1px solid var(--th-divider);
  border-radius: 12px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-bright);
}
.th-geoint .feature-card .fc-chip-k {
  color: var(--th-text-grey);
  margin-right: 2px;
}
.th-geoint .feature-card .fc-sensors {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* --- Identity metadata (MMSI / ICAO24 / Type) ------------- */
.th-geoint .feature-card .fc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-geoint .feature-card .fc-meta-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.th-geoint .feature-card .fc-meta-k {
  color: var(--th-text-grey);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-geoint .feature-card .fc-meta-v {
  color: var(--th-text-bright);
  font-variant-numeric: tabular-nums;
}

/* --- HERO marker band (Phase A of hero-cop-features) ------ */
.th-geoint .feature-card .fc-doctrine {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--th-pale-purple);
  background: rgba(136, 136, 204, 0.08);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  line-height: 1.4;
}
.th-geoint .feature-card .fc-description {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  white-space: pre-wrap;
  line-height: 1.4;
}
/* Doctrinal gloss surfaced as a hover hint on the Kind row, after a
   deliberate dwell (see `doctrine-hint`). The dotted underline cues that
   the kind carries an explanation. */
.th-geoint .feature-card .fc-doctrine-hint {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--th-pale-purple);
}
.th-geoint .feature-card .fc-doctrine-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: 6px 8px;
  border-left: 2px solid var(--th-pale-purple);
  border-radius: 2px;
  background: var(--th-panel, #1b1b24);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  font-size: 0.6875rem;
  font-variant-numeric: normal;
  color: var(--th-text-bright);
  line-height: 1.4;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  pointer-events: none;
}
.th-geoint .feature-card .fc-attr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-geoint .feature-card .fc-attr-table td {
  padding: 2px 4px;
  vertical-align: top;
}
.th-geoint .feature-card .fc-attr-table td.k {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
  white-space: nowrap;
  width: 1%;
}
.th-geoint .feature-card .fc-attr-table td.v {
  color: var(--th-text-bright);
  white-space: pre-wrap;
}
.th-geoint .feature-card .fc-refs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-geoint .feature-card .fc-ref-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-geoint .feature-card .fc-ref-rel {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
}
.th-geoint .feature-card .fc-ref-target {
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Layer membership band --------------------------------- */
/* Scoped on .feature-card alone (not .th-geoint) so the rows read
   the same in the right pane and the expanded track-detail modal. */
.feature-card .fc-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.75rem;
  cursor: pointer;
}
.feature-card .fc-layer-row:hover .fc-layer-name {
  color: var(--th-text-bright);
}
.feature-card .fc-layer-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.feature-card .fc-layer-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feature-card .fc-layer-meta {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  white-space: nowrap;
}

/* --- Timestamp footer ------------------------------------- */
.th-geoint .feature-card .fc-time {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--th-divider);
  font-family: var(--font-mono);
}
.th-geoint .feature-card .fc-relative {
  color: var(--th-text-bright);
  font-size: 0.75rem;
  font-weight: 600;
}
.th-geoint .feature-card .fc-clock {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
}

/* --- ID footer (small mono) ------------------------------- */
.th-geoint .feature-card .fc-ids {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-geoint .feature-card .fc-id-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.th-geoint .feature-card .fc-id-k {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-geoint .feature-card .fc-id-v {
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-geoint .map-overlay {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(16,20,24,0.85);
  border: 1px solid var(--th-divider);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  letter-spacing: 0.06em;
  z-index: 5;
  border-radius: 2px;
}
.th-geoint .map-overlay .crosshair { color: var(--th-bright-orange); }

/* =========================================================
   Floating COP callout — pops above the clicked track icon
   ========================================================= */
.th-geoint .map-host .cop-callout {
  position: absolute;
  /* The :left/:top in inline style point at the click site; the
     translate offsets shift the popup so its bottom-center sits a
     few px above the click so it doesn't cover the icon. */
  transform: translate(-50%, calc(-100% - 28px));
  min-width: 200px;
  max-width: 280px;
  background: rgba(16, 20, 24, 0.96);
  border: 1px solid var(--th-pale-purple);
  border-radius: 6px;
  padding: 10px 12px 12px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  font-family: var(--font-ui);
  color: var(--th-text-bright);
  z-index: 20;
  pointer-events: auto;
}
/* A small downward-pointing triangle below the box, marking the
   anchor point. */
.th-geoint .map-host .cop-callout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-top:   8px solid var(--th-pale-purple);
}

.th-geoint .map-host .cop-callout-actions {
  position: absolute;
  top: 4px; right: 4px;
  display: flex;
  gap: 2px;
}
.th-geoint .map-host .cop-callout-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
}
.th-geoint .map-host .cop-callout-btn:hover {
  color: var(--th-text-bright);
  background: var(--th-hover);
  border-color: var(--th-divider);
}
.th-geoint .map-host .cop-callout-btn.expand { font-weight: 700; }
.th-geoint .map-host .cop-callout-btn.close  { font-size: 1rem; }
/* Reposition action — same chrome as expand/close; the glyph is a
   four-way arrow so it reads as "move" next to the +/x pair. */
.th-geoint .map-host .cop-callout-btn.move   { font-size: 0.9375rem; }

.th-geoint .map-host .cop-callout-id {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 82px;   /* keep clear of the action buttons (3 since the
                            reposition action joined expand + close) */
}
.th-geoint .map-host .cop-callout-icon { flex: none; }
.th-geoint .map-host .cop-callout-id-text {
  min-width: 0;
  overflow: hidden;
}
.th-geoint .map-host .cop-callout-callsign {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--th-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}
.th-geoint .map-host .cop-callout-sub {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

.th-geoint .map-host .cop-callout-pos {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--th-text-bright);
}
.th-geoint .map-host .cop-callout-pos .cop-callout-pos-line {
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.th-geoint .map-host .cop-callout-kine {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--th-text-bright);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.th-geoint .map-host .cop-callout-threat {
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.th-geoint .map-host .cop-callout-threat.tl-low    { background: rgba(154,129,57,0.18); color: var(--th-bright-yellow); border: 1px solid var(--th-bright-yellow); }
.th-geoint .map-host .cop-callout-threat.tl-medium { background: rgba(201,117,49,0.22); color: var(--th-bright-orange); border: 1px solid var(--th-bright-orange); }
.th-geoint .map-host .cop-callout-threat.tl-high   { background: rgba(201,117,49,0.35); color: #ffd0a0; border: 1px solid var(--th-bright-orange); }
.th-geoint .map-host .cop-callout-threat.tl-alert  { background: rgba(255,68,68,0.30);  color: #ffd0d0; border: 1px solid var(--th-red); }

/* =========================================================
   COP — track detail modal (the expanded callout)
   ========================================================= */
.th-modal.cop-track-detail {
  width: min(560px, 92vw);
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}
.th-modal.cop-track-detail .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
}
.th-modal.cop-track-detail .modal-head h2 {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.th-modal.cop-track-detail .feature-card {
  /* In the modal we want the affiliation stripe along the top edge
     instead of the side, so the wider format reads better. */
  border-left: none;
  border-top:  4px solid var(--th-text-grey);
}
.th-modal.cop-track-detail .feature-card.aff-friend  { border-top-color: #88aaff; }
.th-modal.cop-track-detail .feature-card.aff-hostile { border-top-color: var(--th-red); }
.th-modal.cop-track-detail .feature-card.aff-neutral { border-top-color: #d0d0d0; }
.th-modal.cop-track-detail .feature-card.aff-suspect { border-top-color: var(--th-bright-orange); }
.th-modal.cop-track-detail .feature-card.aff-unknown { border-top-color: var(--th-bright-yellow); }

/* Annotations list — BB notes anchored to the clicked feature/track.
   Rendered between the feature-card and the annotate-button so the
   visual rhythm is: feature data → existing annotations → "+ add".
   Hidden when there are no matches so un-annotated features keep a
   clean detail pane. */
.cop-annotations {
  border-top: 1px solid var(--th-divider);
}
.cop-annotations-head {
  padding: 8px 14px 4px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cop-annotations-body {
  padding: 0 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cop-annotation-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-left: 3px solid var(--th-pale-purple);
  border-radius: 2px;
  color: var(--th-text);
  cursor: pointer;
  padding: 6px 8px;
  font: inherit;
  transition: border-color 120ms, background 120ms;
}
.cop-annotation-card:hover {
  border-color: var(--th-bright-orange);
  border-left-color: var(--th-bright-orange);
  background: var(--th-hover);
}
.cop-annotation-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cop-annotation-title {
  flex: 1;
  color: var(--th-text-bright);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cop-annotation-region {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-pale-purple);
  padding: 1px 5px;
  border: 1px solid var(--th-pale-purple);
  border-radius: 2px;
}
.cop-annotation-body {
  margin-top: 4px;
  color: var(--th-text);
  font-size: 0.75rem;
  line-height: 1.4;
}
.cop-annotation-foot {
  margin-top: 4px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}
.cop-annotation-author { color: var(--th-text); }
/* Hard-delete affordance on an annotation row — sits at the end of the
   flex head, faint until hover so it doesn't compete with the title. */
.cop-annotation-delete {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 2px;
  margin: 0;
  line-height: 1;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 120ms;
}
.cop-annotation-card:hover .cop-annotation-delete { opacity: 0.8; }
.cop-annotation-delete:hover { opacity: 1; }

/* Send-to-channel chip rendered under the feature-card in both the
   COP right-pane info-panel and the cop-track-detail modal. */
.cop-annotate-row {
  padding: 10px 14px;
  border-top: 1px solid var(--th-divider);
}
.cop-annotate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--th-pale-purple);
  border-radius: 2px;
  color: var(--th-pale-purple);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  text-transform: uppercase;
  transition: background 120ms, color 120ms;
}
.cop-annotate-btn:hover {
  background: var(--th-pale-purple);
  color: var(--th-panel);
}
.th-modal.cop-track-detail .cop-annotate-row {
  /* Modal version uses the same inner padding as the surrounding
     history/raw sections so all three rows align flush. */
  padding: 14px 18px;
}

.cop-track-history,
.cop-track-raw {
  padding: 14px 18px;
  border-top: 1px solid var(--th-divider);
}
.cop-track-section-head {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.cop-track-history-empty {
  color: var(--th-text-grey);
  font-size: 0.75rem;
  line-height: 1.45;
}
.cop-track-raw-toggle {
  background: transparent;
  border: none;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cop-track-raw-toggle:hover { color: var(--th-pale-purple); }
.cop-track-raw-body {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 320px;
  overflow: auto;
}

.th-geoint .scale-line {
  position: absolute;
  bottom: 14px; left: 48px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  background: rgba(16,20,24,0.7);
  padding: 4px 8px;
  border: 1px solid var(--th-divider);
}
.th-geoint .scale-line .bar {
  width: 80px; height: 4px;
  background: var(--th-bright-orange);
  border: 1px solid var(--th-black);
}

/* ---------- FMV (Full-Motion Video) room ---------- */
.th-fmv {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100%;
  background: var(--th-black);
}
.th-fmv .fmv-rail {
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  border-right: 1px solid var(--th-divider);
  overflow: hidden;
}
.th-fmv .fmv-rail .panel-header {
  padding: 8px 14px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-bright);
  height: var(--tabbar-h);
  display: flex;
  align-items: center;
}
.th-fmv .fmv-rail .panel-body { flex: 1; overflow-y: auto; padding: 6px 0; }
.th-fmv .fmv-stream-row {
  padding: 8px 14px;
  border-bottom: 1px solid var(--th-divider);
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-fmv .fmv-stream-row:hover { background: var(--th-panel-2); }
.th-fmv .fmv-stream-row.assigned { background: var(--th-pale-blue); }
.th-fmv .fmv-stream-meta { flex: 1; min-width: 0; }
.th-fmv .fmv-stream-name {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-fmv .fmv-stream-sub {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-fmv .fmv-slot-buttons {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  max-width: 90px;
  justify-content: flex-end;
}
.th-fmv .fmv-slot-btn,
.th-fmv .fmv-eject {
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  border-radius: 2px;
  padding: 3px 7px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}
.th-fmv .fmv-slot-btn:hover { background: var(--th-bright-orange); color: var(--th-black); }
.th-fmv .fmv-eject {
  background: var(--th-dark-orange);
  color: var(--th-bright-orange);
  border: 1px solid var(--th-bright-orange);
}
.th-fmv .fmv-eject:hover { background: var(--th-bright-orange); color: var(--th-black); }

.th-fmv .fmv-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-black);
  overflow: hidden;
}
.th-fmv .fmv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: var(--tabbar-h);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-fmv .fmv-room-title {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.th-fmv .fmv-layout-switcher {
  display: flex;
  gap: 2px;
}
.th-fmv .fmv-layout-btn {
  background: var(--th-panel);
  color: var(--th-text-grey);
  padding: 4px 8px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
}
.th-fmv .fmv-layout-btn:hover { color: var(--th-text-bright); }
.th-fmv .fmv-layout-btn.active {
  background: var(--th-pale-yellow);
  color: var(--th-bright-yellow);
  border-color: var(--th-bright-yellow);
}

.th-fmv .fmv-grid {
  flex: 1;
  display: grid;
  gap: 4px;
  padding: 4px;
  background: var(--th-black);
  min-height: 0;
}
.th-fmv .fmv-grid.grid-single   { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.th-fmv .fmv-grid.grid-grid-2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.th-fmv .fmv-grid.grid-grid-3x3 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

.th-fmv .fmv-cell {
  position: relative;
  background: #050608;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  overflow: hidden;
  min-height: 0;
}
.th-fmv .fmv-cell.focused { border-color: var(--th-bright-orange); }
.th-fmv .fmv-cell.empty {
  background:
    repeating-linear-gradient(45deg,
      transparent 0 8px,
      rgba(255,255,255,0.015) 8px 16px),
    var(--th-panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--th-divider);
}
.th-fmv .fmv-empty-text {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--th-text-grey);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.th-fmv .fmv-empty-title {
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--th-bright-yellow);
  margin-bottom: 4px;
}
.th-fmv .fmv-cell.broken { background: var(--th-panel-2); display: flex; align-items: center; justify-content: center; }

.th-fmv .fmv-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 8px;
  font-family: var(--font-mono);
  z-index: 5;
}
.th-fmv .fmv-hud > * { pointer-events: auto; }
.th-fmv .fmv-hud-top {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to bottom, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0) 100%);
  padding: 4px 6px;
  margin: -6px -8px 0 -8px;
}
.th-fmv .fmv-name {
  color: var(--th-text-bright);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.th-fmv .fmv-hud-btn {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--th-text-grey);
  border: 1px solid var(--th-divider);
  background: rgba(16,20,24,0.6);
  border-radius: 2px;
  font-size: 0.75rem;
}
.th-fmv .fmv-hud-btn:hover { color: var(--th-bright-orange); border-color: var(--th-bright-orange); }
.th-fmv .fmv-hud-bot {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0) 100%);
  padding: 4px 6px;
  margin: 0 -8px -6px -8px;
}
.th-fmv .fmv-tlm {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.th-fmv .fmv-tlm .k {
  font-size: 0.625rem;
  color: var(--th-text-grey);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.th-fmv .fmv-tlm .v {
  font-size: 0.75rem;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ---------- Kanban room ---------- */
.th-kanban {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-black);
  overflow: hidden;
}
.th-kanban .kb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: var(--tabbar-h);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-kanban .kb-title {
  color: var(--th-text-bright);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.th-kanban .kb-loading {
  padding: 24px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  max-width: 600px;
}
.th-kanban .kb-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: 0;
}
.th-kanban .kb-body.kb-detail-collapsed {
  grid-template-columns: 1fr;
}
.th-kanban .kb-columns {
  display: flex;
  gap: 6px;
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--th-black);
}
.th-kanban .kb-column {
  flex: 1 1 220px;
  min-width: 220px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.th-kanban .kb-column-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.th-kanban .kb-column-label {
  color: var(--th-text-bright);
  font-weight: 600;
  flex: 1;
}
.th-kanban .kb-column-count {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
}
.th-kanban .kb-column.drop-target {
  background: var(--th-bg-1);
  outline: 1px dashed var(--th-bright-orange);
}
.th-kanban .kb-column.drop-blocked {
  background: rgba(255, 69, 68, 0.06);
  outline: 1px dashed var(--th-red);
}
.th-kanban .kb-card {
  user-select: none;
}
.th-kanban .kb-card[draggable="true"]:hover {
  cursor: grab;
}
.th-kanban .kb-add {
  margin-left: 6px;
  width: 18px; height: 18px;
  background: transparent;
  color: var(--th-text-grey);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  font-size: 0.875rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-kanban .kb-add:hover {
  background: var(--th-bright-orange);
  color: var(--th-black);
  border-color: var(--th-bright-orange);
}
.th-kanban .kb-detail-actions {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--th-divider);
}
.th-kanban .kb-action {
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  padding: 5px 12px;
  border-radius: 2px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-kanban .kb-action:hover { background: var(--th-steel-blue-2); }
.th-kanban .kb-action.danger {
  background: var(--th-dark-orange);
  color: var(--th-red);
  border: 1px solid var(--th-red);
}
.th-kanban .kb-action.danger:hover {
  background: var(--th-red);
  color: var(--th-black);
}
.th-kanban .kb-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-kanban .kb-card {
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-left: 2px solid var(--th-text-grey);
  border-radius: 2px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 120ms;
}
.th-kanban .kb-card:hover { border-color: var(--th-bright-orange); }
.th-kanban .kb-card.kb-selected {
  border-color: var(--th-bright-orange);
  background: var(--th-bg-1);
}
.th-kanban .kb-card.prio-high { border-left-color: var(--th-red); }
.th-kanban .kb-card.prio-low  { border-left-color: var(--th-steel-blue-2); }
.th-kanban .kb-card.blocked   { background: rgba(255, 69, 68, 0.08); }
.th-kanban .kb-card.done      { opacity: 0.55; }
.th-kanban .kb-card-title {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.th-kanban .kb-card-sum {
  color: var(--th-text-grey);
  font-size: 0.75rem;
  line-height: 1.3;
  margin-bottom: 6px;
  white-space: pre-wrap;
}
.th-kanban .kb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
}
.th-kanban .kb-pill {
  background: var(--th-bg-2);
  border-radius: 8px;
  padding: 1px 6px;
  color: var(--th-text-grey);
}
.th-kanban .kb-pill.high  { background: rgba(255,69,68,0.15); color: var(--th-red); }
.th-kanban .kb-status     { color: var(--th-text-bright); }

.th-kanban .kb-side {
  background: var(--th-panel);
  border-left: 1px solid var(--th-divider);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-kanban .kb-side-header {
  padding: 8px 14px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-bright);
  height: var(--tabbar-h);
  display: flex;
  align-items: center;
}
.th-kanban .kb-side-header .spacer { flex: 1; }
.th-kanban .kb-side-close {
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.th-kanban .kb-side-close:hover {
  color: var(--th-text-bright);
  border-color: var(--th-divider);
  background: var(--th-steel-blue-2);
}
.th-kanban .kb-detail {
  padding: 12px 14px;
  overflow-y: auto;
}
.th-kanban .kb-detail-empty {
  padding: 20px 14px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
}
.th-kanban .kb-detail-title {
  color: var(--th-text-bright);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 6px;
}
.th-kanban .kb-detail-sum {
  color: var(--th-text-grey);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.th-kanban .kb-detail-grid {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 4px 8px;
  font-size: 0.75rem;
  margin-bottom: 14px;
}
.th-kanban .kb-detail-grid .k {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}
.th-kanban .kb-detail-grid .v {
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  word-break: break-word;
}
/* Person chip — clickable DM-open target for author / assignee fields
   in the task-detail pane. Plain label fallback when the value can't
   be resolved to a known JID. */
.th-kanban .kb-person-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--th-steel-blue-2);
  border-radius: 2px;
  color: var(--th-steel-blue-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  text-transform: uppercase;
  transition: background 120ms, color 120ms;
}
.th-kanban .kb-person-link:hover {
  background: var(--th-steel-blue-2);
  color: var(--th-panel);
}
.th-kanban .kb-person-plain {
  color: var(--th-text);
  font-family: var(--font-mono);
}
.th-kanban .kb-detail-notes {
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  padding: 8px 10px;
  border-radius: 2px;
}
.th-kanban .kb-detail-notes pre {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--th-text-bright);
  white-space: pre-wrap;
}

/* ---------- Blackboard room ---------- */
.th-blackboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-black);
  overflow: hidden;
}
.th-blackboard .bb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: var(--tabbar-h);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-blackboard .bb-title {
  color: var(--th-text-bright);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
/* Board fills the room; the control bar docks beneath it. */
.th-blackboard .bb-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.th-blackboard .bb-control-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px;
  background: var(--th-panel);
  border-top: 1px solid var(--th-divider);
  flex-shrink: 0;
}
.th-blackboard .bb-bar-sep {
  align-self: stretch;
  width: 1px;
  background: var(--th-divider);
  flex-shrink: 0;
}
.th-blackboard .bb-bar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.th-blackboard .bb-bar-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  flex-shrink: 0;
}
.th-blackboard .bb-write-btn {
  padding: 6px 14px;
  background: var(--th-pale-purple);
  border: 1px solid var(--th-pale-purple);
  border-radius: 4px;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 120ms;
}
.th-blackboard .bb-write-btn:hover,
.th-blackboard .bb-write-btn.active { filter: brightness(1.12); }
/* Write on Board kind picker — anchored popover that opens upward
   (the control bar is docked at the bottom of the room). */
.th-blackboard .bb-write-wrap {
  position: relative;
  flex-shrink: 0;
}
.th-blackboard .bb-write-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.th-blackboard .bb-write-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 110;
  min-width: 180px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  box-shadow: var(--th-shadow);
  padding: 4px 0;
}
.th-blackboard .bb-write-menu-head {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  border-bottom: 1px solid var(--th-divider);
  margin-bottom: 2px;
}
.th-blackboard .bb-write-menu-row {
  display: block;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--th-text-bright);
  cursor: pointer;
  font-size: 0.75rem;
  text-align: left;
}
.th-blackboard .bb-write-menu-row:hover { background: var(--th-hover); }
.th-blackboard .bb-tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.th-blackboard .bb-tag-chip {
  padding: 3px 9px;
  border: 1px solid var(--th-border);
  border-radius: 11px;
  background: var(--th-pale-blue);
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.th-blackboard .bb-tag-chip:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-text-bright);
}
.th-blackboard .bb-tag-chip.active {
  background: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
  color: #0a0a0a;
  font-weight: 600;
}
.th-blackboard .bb-tag-empty {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
}
.th-blackboard .bb-show-toggle {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.th-blackboard .bb-show-btn {
  padding: 5px 10px;
  border: 1px solid var(--th-border);
  border-radius: 4px;
  background: var(--th-panel-2);
  color: var(--th-text-grey);
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.th-blackboard .bb-show-btn:hover {
  border-color: var(--th-steel-blue-2);
  color: var(--th-text-bright);
}
.th-blackboard .bb-show-btn.active {
  background: var(--th-pale-blue);
  border-color: var(--th-bright-orange);
  color: var(--th-text-bright);
  font-weight: 600;
}
.th-blackboard .bb-tabs {
  display: flex;
  background: var(--th-panel);
  border-bottom: 1px solid var(--th-divider);
  overflow-x: auto;
}
.th-blackboard .bb-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid var(--th-divider);
  white-space: nowrap;
}
.th-blackboard .bb-tab:hover { background: var(--th-pale-blue); color: var(--th-text-bright); }
.th-blackboard .bb-tab.active {
  background: var(--th-pale-blue);
  color: var(--th-pale-purple);
  border-bottom: 2px solid var(--th-pale-purple);
}
.th-blackboard .bb-tab-count {
  font-family: var(--font-mono);
  background: var(--th-pale-blue);
  color: var(--th-text-grey);
  border-radius: 8px;
  padding: 0 6px;
  font-size: 0.6875rem;
}
.th-blackboard .bb-tab.active .bb-tab-count {
  background: var(--th-pale-purple);
  color: var(--th-black);
}
.th-blackboard .bb-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 0;
}
/* HERO-sourced rooms inspect via the navigator modal — no side pane. */
.th-blackboard .bb-body.no-detail {
  grid-template-columns: 1fr;
}
.th-blackboard .bb-region-body {
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--th-black);
}
.th-blackboard .bb-empty {
  padding: 24px;
  text-align: center;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.th-blackboard .bb-card {
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-left: 3px solid var(--th-text-grey);
  border-radius: 2px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 120ms;
}
.th-blackboard .bb-card:hover { border-color: var(--th-bright-orange); }
.th-blackboard .bb-card.bb-hypothesis { border-left-color: var(--th-pale-purple); }
.th-blackboard .bb-card.bb-plan       { border-left-color: var(--th-bright-yellow); }
.th-blackboard .bb-card.bb-note       { border-left-color: var(--th-text-grey); }
.th-blackboard .bb-card.bb-intent     { border-left-color: var(--th-bright-orange); }
.th-blackboard .bb-card.bb-assignment { border-left-color: var(--th-steel-blue-2); }
.th-blackboard .bb-card.bb-query      { border-left-color: var(--th-bright-orange); }
.th-blackboard .bb-card.bb-lock       { border-left-color: var(--th-red); }
.th-blackboard .bb-card.bb-status-done    { opacity: 0.6; }
.th-blackboard .bb-card.bb-status-blocked { background: var(--th-pale-yellow); }
.th-blackboard .bb-card.prio-high   { background: rgba(255,69,68,0.05); }

.th-blackboard .bb-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.th-blackboard .bb-card-title {
  color: var(--th-text-bright);
  font-weight: 600;
  font-size: 0.8125rem;
  flex: 1;
  min-width: 0;
}
.th-blackboard .bb-card-sum {
  color: var(--th-text-grey);
  font-size: 0.75rem;
  margin-bottom: 6px;
}

/* Phase §2.5 — Cooperative-lock countdown badge */
.th-blackboard .bb-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--th-bright-yellow);
  border-radius: 10px;
  background: rgba(154, 129, 57, 0.12);
  color: var(--th-bright-yellow);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.th-blackboard .bb-lock-badge.mine {
  border-color: var(--th-bright-orange);
  background: rgba(201, 117, 49, 0.15);
  color: var(--th-bright-orange);
}

/* Collab-edit live-session indicator. Renders alongside the lock badge
   when a Yjs session is open for this item. */
.th-blackboard .bb-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid #ef4444;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.bb-action.bb-action-live {
  border-color: #ef4444;
  color: #ef4444;
}
.th-blackboard .bb-card-foot {
  margin-top: 6px;
}
.th-blackboard .bb-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
}
.th-blackboard .bb-tag {
  background: var(--th-pale-blue);
  color: var(--th-pale-purple);
  border-radius: 8px;
  padding: 0 6px;
}

/* Phase 2.5 — Hammock enclosures: HTTPS-fetched inline previews
   attached to a BB card. Stacked vertically, separated from the
   typed body by a thin divider so the preview reads as additive
   evidence rather than the primary content. */
.th-blackboard .bb-enc-strip {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-blackboard .bb-enc {
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  background: var(--th-panel-2);
  overflow: hidden;
}
.th-blackboard .bb-enc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--th-text-bright);
}
.th-blackboard .bb-enc-icon  { opacity: 0.7; }
.th-blackboard .bb-enc-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-blackboard .bb-enc-type {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-blackboard .bb-enc-img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #050810;
}
.th-blackboard .bb-enc-text {
  margin: 0;
  padding: 6px 8px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
  background: var(--th-panel);
}
.th-blackboard .bb-enc-loading,
.th-blackboard .bb-enc-error {
  padding: 6px 8px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}
.th-blackboard .bb-enc-loading { color: var(--th-text-grey); }
.th-blackboard .bb-enc-error   { color: var(--th-red); }
.th-blackboard .bb-enc-download {
  display: block;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-bright-yellow);
  text-decoration: none;
}
.th-blackboard .bb-enc-download:hover { background: var(--th-titlebar); }
.th-blackboard .bb-enc-size { color: var(--th-text-grey); }

/* Phase 3.5 — Board admin modal */
.kb-board-modal .kb-phase-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.kb-board-modal .kb-phase-row {
  display: grid;
  grid-template-columns: 100px 1fr 80px 26px;
  gap: 6px;
  align-items: center;
}
.kb-board-modal .kb-phase-row input { width: 100%; }
.kb-board-modal .kb-phase-row .ghost.danger {
  padding: 0 6px;
  color: var(--th-red);
}

/* Phase 3.6 — kanban cross-refs UI */
.kb-ref-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-ref-row {
  display: grid;
  grid-template-columns: 110px 1fr 140px 26px;
  gap: 6px;
  align-items: center;
}
.kb-ref-row input,
.kb-ref-row select { width: 100%; }
.th-kanban .kb-detail-refs {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--th-divider);
}
.th-kanban .kb-detail-refs-header {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 4px;
}
.th-kanban .kb-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border: 1px solid var(--th-divider);
  border-radius: 12px;
  background: var(--th-panel-2);
  color: var(--th-text-bright);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
}
.th-kanban .kb-ref-chip:hover {
  border-color: var(--th-bright-orange);
  background: var(--th-titlebar);
}
.th-kanban .kb-ref-chip .kb-ref-rel {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--th-bg-2);
  color: var(--th-text-bright);
}
.th-kanban .kb-ref-chip.rel-depends-on .kb-ref-rel { color: var(--th-bright-yellow); }
.th-kanban .kb-ref-chip.rel-blocks     .kb-ref-rel { color: var(--th-red); }
.th-kanban .kb-ref-chip.rel-blocked-by .kb-ref-rel { color: var(--th-bright-orange); }
.th-kanban .kb-ref-chip .kb-ref-target {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phase 5 — Mission view: 2×2 composed surface */
.th-mission {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-panel);
}
.th-mission .mission-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  height: var(--tabbar-h);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-mission .mission-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--th-text-bright);
  letter-spacing: 0.05em;
}
.th-mission .mission-meta {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-mission .spacer { flex: 1; }
.th-mission .mission-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
  gap: 1px;
  background: var(--th-divider);
  min-height: 0;
}
.th-mission .mission-pane {
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.th-mission .mission-pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-bright);
}
.th-mission .mission-pane-title { flex: 0 0 auto; font-weight: 600; }
.th-mission .mission-pane-extra {
  flex: 0 0 auto;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.th-mission .mission-pane-spacer { flex: 1; }
.th-mission .mission-pane-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.th-mission .mission-pane-action {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  border-radius: 2px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.th-mission .mission-pane-action:hover,
.th-mission .mission-pane-action.active {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-mission .mission-pane-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Dropdown menu — used by the BB quick-add. Floats over the pane
   anchored to the action button. The scrim sits underneath as a
   full-viewport click-trap for dismiss-on-outside-click. */
.th-mission .mission-pane-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.th-mission .mission-pane-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 110;
  min-width: 200px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  box-shadow: var(--th-shadow);
  padding: 4px 0;
}
.th-mission .mission-pane-menu-head {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  border-bottom: 1px solid var(--th-divider);
  margin-bottom: 2px;
}
.th-mission .mission-pane-menu-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  background: transparent;
  border: none;
  color: var(--th-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.th-mission .mission-pane-menu-row:hover { background: var(--th-hover); }
.th-mission .mission-pane-menu-kind {
  flex: 0 0 90px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
}
.th-mission .mission-pane-menu-label {
  flex: 1;
  color: var(--th-text-bright);
  font-size: 0.75rem;
}
.th-mission .mission-pane-expand {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  border-radius: 2px;
  padding: 0 8px;
  font-size: 0.8125rem;
  cursor: pointer;
}
.th-mission .mission-pane-expand:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
/* Kanban pane: phase tab strip + all-phase column view */
.th-mission .mission-kb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-panel-2);
}
.th-mission .mission-kb-tab {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  border-radius: 2px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.th-mission .mission-kb-tab:hover {
  color: var(--th-text-bright);
  border-color: var(--th-text-grey);
}
.th-mission .mission-kb-tab.active {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
.th-mission .mission-kb-columns {
  flex: 1;
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
}
.th-mission .mission-kb-column {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  overflow: hidden;
}
.th-mission .mission-kb-column-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
}
.th-mission .mission-kb-column-label {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--th-text-bright);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
}
.th-mission .mission-kb-column-label:hover { color: var(--th-bright-orange); }
.th-mission .mission-kb-column-count {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.th-mission .mission-kb-column-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
}
.th-mission .mission-kb-column-empty {
  padding: 8px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-align: center;
}
.th-mission .mission-pane-empty {
  padding: 16px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

/* COP pane sub-bits */
.th-mission .mission-mini-map {
  flex: 1;
  position: relative;
  background: #050810;
  overflow: hidden;
}
/* Inline track-detail overlay — top-right of the mission COP
   quadrant. Lets the operator click a track on the mini-map, read
   the details inline, X out, and click another without ever
   leaving the mission view. Reuses `feature-card` from
   `treehouse.rooms.cop`, so the panel content matches what the
   full COP room renders in its right pane. */
.th-mission .mission-cop-detail {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 280px;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  box-shadow: var(--th-shadow);
  /* Sit above the maplibre canvas and any deck.gl overlays so
     pointer events on the close button + scrollbar work. */
  z-index: 50;
  pointer-events: auto;
}
.th-mission .mission-cop-detail-close {
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 2px;
  z-index: 1;
}
.th-mission .mission-cop-detail-close:hover {
  background: var(--th-hover);
  color: var(--th-bright-orange);
}
.th-mission .mission-cop-detail-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* The feature-card has its own dense padding; we just give it a
     scrollable host. The close button sits above it at z-index 1
     so it stays accessible even when the body scrolls. */
}
/* Slim down the feature-card layout for the constrained quadrant
   width without forking the component. */
.th-mission .mission-cop-detail .feature-card {
  padding: 8px 10px;
  font-size: 0.75rem;
}
.th-mission .mission-cop-detail .feature-card .fc-icon {
  width: 24px;
  height: 24px;
}
.th-mission .mission-cop-detail .feature-card .fc-callsign {
  font-size: 0.8125rem;
}

/* MIX-chat pane — wraps the channel's full chat-pane (message
   list + composer). The wrapper needs `min-height: 0` so the inner
   `.ch-scroll` can shrink and scroll inside the grid cell instead
   of pushing the pane taller than its row. */
.th-mission .mission-chat-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.th-mission .mission-chat-host .ch-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.th-mission .mission-chat-host .ch-scroll {
  flex: 1;
  overflow-y: auto;
}

/* BB pane: dense feed of one-liners */
.th-mission .mission-feed {
  flex: 1;
  overflow-y: auto;
}
.th-mission .mission-feed-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 4px 10px;
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  cursor: pointer;
}
.th-mission .mission-feed-row:hover { background: var(--th-panel-2); }
.th-mission .mission-feed-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
  text-align: center;
}
.th-mission .mission-feed-kind.hypothesis { color: var(--th-pale-purple); }
.th-mission .mission-feed-kind.plan       { color: var(--th-bright-yellow); }
.th-mission .mission-feed-kind.intent     { color: var(--th-bright-orange); }
.th-mission .mission-feed-kind.note       { color: var(--th-text-grey); }
.th-mission .mission-feed-kind.query      { color: var(--th-bright-orange); }
.th-mission .mission-feed-kind.bb         { color: var(--th-pale-purple); }
.th-mission .mission-feed-kind.kanban     { color: var(--th-steel-blue-2); }
.th-mission .mission-feed-title {
  color: var(--th-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-mission .mission-feed-meta {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* Kanban pane: compact card stack */
.th-mission .mission-kb-cards {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-mission .mission-kb-card {
  padding: 6px 8px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-left-width: 3px;
  border-radius: 2px;
  cursor: pointer;
}
.th-mission .mission-kb-card:hover { border-color: var(--th-bright-orange); }
.th-mission .mission-kb-card.prio-high   { border-left-color: var(--th-red); }
.th-mission .mission-kb-card.prio-medium { border-left-color: var(--th-bright-orange); }
.th-mission .mission-kb-card.prio-low    { border-left-color: var(--th-text-grey); }
.th-mission .mission-kb-card.stat-done   { opacity: 0.55; }
.th-mission .mission-kb-card.stat-blocked { background: rgba(255,69,68,0.08); }
.th-mission .mission-kb-card-title {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  font-weight: 500;
}
.th-mission .mission-kb-card-meta {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Ops + activity pane */
.th-mission .mission-ops-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-bottom: 1px solid var(--th-divider);
  max-height: 40%;
  overflow-y: auto;
}
.th-mission .mission-op-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
}
.th-mission .mission-op-row:hover { background: var(--th-panel-2); }
.th-mission .mission-op-row.self  { color: var(--th-text-bright); }
.th-mission .mission-op-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(102, 187, 187);
}
.th-mission .mission-op-dot.self {
  background: rgb(184, 230, 230);
  box-shadow: 0 0 5px rgba(184, 230, 230, 0.6);
}
.th-mission .mission-op-nick { flex: 1; color: var(--th-text-bright); }
.th-mission .mission-op-pos {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-mission .mission-feed-header {
  padding: 8px 10px 4px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
}

/* ---------------------------------------------------------------------------
   COP Chat — 2×1 composed room (docs/feature/cop-chat.md). Full COP map
   on the left, tabbed channel chat on the right, draggable divider
   between. Body columns come inline from the split ratio
   (treehouse.cop-chat.events/split->grid-cols); during a divider drag
   they're written straight onto the body node — no re-render.
--------------------------------------------------------------------------- */
.th-cop-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-panel);
}
.th-cop-chat .cop-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  height: var(--tabbar-h);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-cop-chat .cop-chat-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--th-text-bright);
  letter-spacing: 0.05em;
}
.th-cop-chat .spacer { flex: 1; }
.th-cop-chat .cop-chat-expand {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  border-radius: 2px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.th-cop-chat .cop-chat-expand:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-cop-chat .cop-chat-body {
  flex: 1;
  display: grid;
  /* grid-template-columns set inline from the split ratio */
  min-height: 0;
}
.th-cop-chat .cop-chat-cop {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--th-panel);
}
.th-cop-chat .cop-chat-divider {
  cursor: col-resize;
  background: var(--th-divider);
  touch-action: none;
}
.th-cop-chat .cop-chat-divider:hover,
.th-cop-chat .cop-chat-divider:focus {
  background: var(--th-bright-orange);
  outline: none;
}
body.th-col-resizing {
  cursor: col-resize;
  user-select: none;
}
/* Belt-and-braces with pointer capture: the maplibre canvas must never
   swallow the gesture mid-drag. */
body.th-col-resizing .th-cop-chat .cop-chat-cop { pointer-events: none; }
.th-cop-chat .cop-chat-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--th-panel);
}
/* Tab strip — reuses the channel strip's .ch-tab chrome. */
.th-cop-chat .cop-chat-tabs {
  display: flex;
  align-items: stretch;
  min-height: 30px;
  border-bottom: 1px solid var(--th-divider);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex: none;
}
.th-cop-chat .cop-chat-tab-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.th-cop-chat .cop-chat-tab-body > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
/* chat-pane sizing — the same min-height shim the mission chat host
   uses, so .ch-scroll scrolls instead of stretching the pane. */
.th-cop-chat .cop-chat-tab-body .ch-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.th-cop-chat .cop-chat-tab-body .ch-scroll {
  flex: 1;
  overflow-y: auto;
}
/* Embedded tab rooms ride .ch-tab-content — that rule is scoped
   .th-channel, so mirror it here (minus the border: the divider
   already separates us from the map). */
.th-cop-chat .ch-tab-content {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.th-cop-chat .ch-tab-content > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.th-cop-chat .cop-chat-empty {
  padding: 18px 14px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  line-height: 1.5;
}
/* Mission Catalog pane */
.th-cop-chat .cop-chat-mc {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.th-cop-chat .cop-chat-mc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--th-text-bright);
}
.th-cop-chat .cop-chat-mc-count {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-weight: 400;
}
.th-cop-chat .cop-chat-mc-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
}
.th-cop-chat .cop-chat-mc-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
}
.th-cop-chat .cop-chat-mc-group-count { font-family: var(--font-mono); }
.th-cop-chat .cop-chat-mc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  cursor: pointer;
}
.th-cop-chat .cop-chat-mc-row:hover { background: var(--th-bg-2); }
.th-cop-chat .cop-chat-mc-name {
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.th-cop-chat .cop-chat-mc-kind,
.th-cop-chat .cop-chat-mc-rel,
.th-cop-chat .cop-chat-mc-state {
  flex: none;
  font-size: 0.625rem;
  font-family: var(--font-mono);
  color: var(--th-text-grey);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 0 4px;
}
.th-cop-chat .cop-chat-mc-geo { flex: none; font-size: 0.6875rem; }

/* ---------------------------------------------------------------------------
   Canvas — freeform window-block workspace (canvas.md)
   --------------------------------------------------------------------------- */
.th-canvas {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-panel);
  /* Anchor for the bottom-left minimap overlay. */
  position: relative;
}
/* Minimap — the "you are here" overlay (canvas.md). Translucent until
   hovered; hidden entirely (component-side) when the surface fits. */
.th-canvas .canvas-minimap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 30;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  opacity: 0.35;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 120ms;
}
.th-canvas .canvas-minimap:hover { opacity: 1; }
.th-canvas .canvas-minimap-block {
  position: absolute;
  background: var(--th-divider);
  pointer-events: none;
}
.th-canvas .canvas-minimap-block.selected {
  background: var(--th-bright-orange);
  opacity: 0.7;
}
.th-canvas .canvas-minimap-view {
  position: absolute;
  border: 1px solid var(--th-bright-orange);
  background: rgba(255, 145, 0, 0.12);
  pointer-events: none;
}
.th-canvas .canvas-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  height: var(--tabbar-h);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-canvas .canvas-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--th-text-bright);
  letter-spacing: 0.05em;
}
.th-canvas .canvas-meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-canvas .spacer { flex: 1; }
.th-canvas .canvas-add {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  border-radius: 2px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.th-canvas .canvas-add:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-canvas .canvas-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--th-black);
}
/* Sized inline from the blocks' extent; the minima keep an empty (or
   sparse) canvas filling the scroll host so double-click-to-add works
   everywhere. */
.th-canvas .canvas-surface {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
/* pointer-events:none so the hint never steals the surface's
   double-click-to-add. */
.th-canvas .canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 15%;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  line-height: 1.7;
  pointer-events: none;
}
.th-canvas .canvas-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.th-canvas .canvas-block.selected,
.th-canvas .canvas-block:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
.th-canvas .canvas-block-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  flex: none;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.th-canvas .canvas-block-titlebar:active { cursor: grabbing; }
.th-canvas .canvas-block-glyph { flex: none; font-size: 0.75rem; }
.th-canvas .canvas-block-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--th-text-bright);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-canvas .canvas-block-btn {
  flex: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--th-text-grey);
  border-radius: 2px;
  padding: 0 4px;
  font-size: 0.6875rem;
  line-height: 1.4;
  cursor: pointer;
}
.th-canvas .canvas-block-btn:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-canvas .canvas-block-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.th-canvas .canvas-block-body > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
/* Embedded rooms ride .ch-tab-content — mirror the .th-channel /
   .th-cop-chat scoping here. */
.th-canvas .ch-tab-content {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.th-canvas .ch-tab-content > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
/* Channel block: the channel room's chat + Attachments / Pins /
   Members panel trio inside a block. The split div carries
   .th-channel and nests a .ch-body, so the channel room's panel CSS
   applies wholesale — no selector doubling (the .ch-members doubles
   that predate this wrapper are now redundant but harmless). Panels
   keep the channel's basis widths but may SHRINK here (flex-shrink
   1 vs the channel room's 0): a default 480px block is narrower
   than the attachments rail alone, so fixed panels would otherwise
   overflow the frame. */
.th-canvas .canvas-chat-split {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.th-canvas .canvas-chat-split .ch-body > .ch-rail    { flex: 0 1 320px; min-width: 160px; }
.th-canvas .canvas-chat-split .ch-body > .ch-pins    { flex: 0 1 280px; min-width: 140px; }
.th-canvas .canvas-chat-split .ch-body > .ch-members { flex: 0 1 200px; min-width: 120px; }
.th-canvas .canvas-block-btn.active {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
/* chat-pane sizing — the same min-height shim the cop-chat tab body
   uses, so .ch-scroll scrolls instead of stretching the block. */
.th-canvas .canvas-chat-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.th-canvas .canvas-chat-host .ch-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.th-canvas .canvas-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--th-divider) 50%);
}
.th-canvas .canvas-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, var(--th-bright-orange) 50%);
}
/* Belt-and-braces with pointer capture (the cop-chat divider rule):
   embedded map / video canvases must never swallow a gesture mid-drag. */
body.th-block-dragging,
body.th-block-resizing { user-select: none; }
body.th-block-dragging { cursor: grabbing; }
body.th-block-resizing { cursor: nwse-resize; }
body.th-block-dragging .th-canvas .canvas-block-body,
body.th-block-resizing .th-canvas .canvas-block-body { pointer-events: none; }
/* DM arrival alert (canvas.md §2.7) — blinking box-title chips in the
   bottom-right, mirroring the minimap's bottom-left anchoring (both
   ride .th-canvas's position:relative, same z band). The chip borrows
   the block title-bar chrome (.canvas-block-glyph/-title apply via the
   .th-canvas scope) so it reads as "a box title waiting to become a
   box". Click opens/raises the peer's DM block, which retires it. */
.th-canvas .canvas-dm-alerts {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.th-canvas .canvas-dm-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Fixed footprint (~3x the natural chip width, ~2x its height) —
     a watch-wall alert, not a tab-sized chip; uniform across the
     stack. Type scales with it below. */
  width: 300px;
  min-height: 54px;
  padding: 8px 14px;
  background: var(--th-titlebar);
  border: 1px solid var(--th-bright-orange);
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  animation: th-canvas-dm-blink 1.1s ease-in-out infinite;
}
/* Hovering steadies the target — reads as "seen, aiming to click". */
.th-canvas .canvas-dm-alert:hover { animation: none; }
/* Scale the borrowed title-bar chrome to the bigger box. */
.th-canvas .canvas-dm-alert .canvas-block-glyph { font-size: 1.25rem; }
.th-canvas .canvas-dm-alert .canvas-block-title {
  flex: 1;
  min-width: 0; /* keep the base rule's ellipsis working inside flex */
  text-align: left;
  font-size: 0.875rem;
}
.th-canvas .canvas-dm-alert-count {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--th-bright-orange);
  color: var(--th-black);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
@keyframes th-canvas-dm-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Phase 6 — Audit log viewer */
.th-audit {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-panel);
}
.th-audit .audit-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
}
.th-audit .audit-search {
  flex: 0 1 240px;
  padding: 4px 8px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: 2px;
}
.th-audit .audit-search:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
.th-audit .audit-cats {
  display: inline-flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 3px;
}
.th-audit .audit-cat {
  padding: 2px 8px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 11px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.th-audit .audit-cat.on {
  border-color: var(--th-bright-orange);
  color: var(--th-text-bright);
}
.th-audit .audit-tail,
.th-audit .audit-clear {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: 2px;
  cursor: pointer;
}
.th-audit .audit-tail.on { color: var(--th-bright-yellow); border-color: var(--th-bright-yellow); }
.th-audit .audit-clear:hover { color: var(--th-red); border-color: var(--th-red); }
.th-audit .audit-rows {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.th-audit .audit-row {
  display: grid;
  grid-template-columns: 80px 60px 220px 1fr;
  gap: 8px;
  padding: 3px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  color: var(--th-text-bright);
  cursor: pointer;
  align-items: start;
}
.th-audit .audit-row:hover  { background: var(--th-panel-2); }
.th-audit .audit-row.expanded .audit-args {
  white-space: pre-wrap;
  word-break: break-all;
}
.th-audit .audit-row:not(.expanded) .audit-args {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-audit .audit-ts {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.th-audit .audit-cat-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  height: 16px;
  line-height: 16px;
}
.th-audit .audit-row.cat-bb       .audit-cat-tag { color: var(--th-pale-purple); }
.th-audit .audit-row.cat-kb       .audit-cat-tag { color: var(--th-steel-blue-2); }
.th-audit .audit-row.cat-cop      .audit-cat-tag { color: var(--th-bright-orange); }
.th-audit .audit-row.cat-mission  .audit-cat-tag { color: var(--th-bright-yellow); }
.th-audit .audit-row.cat-pubsub   .audit-cat-tag { color: var(--th-pale-purple); }
.th-audit .audit-row.cat-chat     .audit-cat-tag { color: var(--th-text-bright); }
.th-audit .audit-row.cat-ui       .audit-cat-tag { color: var(--th-text-grey); }
.th-audit .audit-row.cat-system   .audit-cat-tag { color: var(--th-red); }
.th-audit .audit-id   { color: var(--th-bright-yellow); }
.th-audit .audit-args { color: var(--th-text-grey); }
.th-audit .audit-empty {
  padding: 24px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
}

/* ---------- Channels (MIX) ---------- */
/* Curated channels at channels.<server> — Slack-style workspace surface
   with rich attachment tiles. Distinct from the conference-MUC :chat
   room. Channel tabs carry a literal `#` on the name instead of a
   kind tag, so the two are easy to tell apart at a glance. */

.th-channel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-panel);
}
.th-channel .ch-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  min-height: var(--tabbar-h);
}
.th-channel .ch-head-main {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}
.th-channel .ch-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--th-text-bright);
}
.th-channel .ch-topic {
  color: var(--th-text-grey);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-channel .ch-head-actions { display: flex; gap: 6px; }
.th-channel .ch-info-btn,
.th-channel .ch-settings-btn,
.th-channel .ch-split-btn {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  border-radius: 2px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}
.th-channel .ch-info-btn { padding: 2px 6px; }
.th-channel .ch-info-btn:hover,
.th-channel .ch-settings-btn:hover,
.th-channel .ch-split-btn:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-channel .ch-desc-popover {
  position: absolute;
  top: 100%;
  right: 10px;
  width: 360px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 10px 12px;
  z-index: 25;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.th-channel .ch-desc { margin: 0 0 6px; color: var(--th-text-bright); font-size: 0.8125rem; }
.th-channel .ch-owners,
.th-channel .ch-access {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.th-channel .ch-desc-popover .label {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Channel body — Messages | Thread | Attachments | Pins | Members.
   A flex row (not a grid) because any subset of the right-side
   panels can be collapsed into the tab strip: the chat / tab column
   stretches, the Attachments / Pins / Members panels keep a fixed
   basis, and each panel draws its own LEFT divider so whatever
   subset is open still meets with single 1px seams. The thread
   panel is proportional, not fixed: grow 3 vs 2 splits the space
   left over after the fixed panels 60/40 between the message flow
   and the thread. With no thread open the chat column absorbs all
   of it, so the ratio only bites while a thread is showing. */
.th-channel .ch-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.th-channel .ch-body > .ch-chat,
.th-channel .ch-body > .ch-tab-content {
  flex: 3 1 0;
  min-width: 0;
}
.th-channel .ch-body > .th-thread-panel {
  flex: 2 1 0;
  min-width: 0;
}
.th-channel .ch-body > .ch-rail         { flex: 0 0 320px; }
.th-channel .ch-body > .ch-pins         { flex: 0 0 280px; }
.th-channel .ch-body > .ch-members      { flex: 0 0 200px; }
.th-channel .ch-body > .th-thread-panel,
.th-channel .ch-body > .ch-rail,
.th-channel .ch-body > .ch-pins,
.th-channel .ch-body > .ch-members {
  border-left: 1px solid var(--th-divider);
}

/* Channel topbar — tabbed views over the channel's attachments
   (docs/feature/slack-ux.md §2). Sits between the header and .ch-body;
   switching tabs swaps only the left 1fr column's content. */
.th-channel .ch-tabbar-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 30px;
  border-bottom: 1px solid var(--th-divider);
  flex: none;
}
.th-channel .ch-tabbar {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.ch-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-grey);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.ch-tab:hover { color: var(--th-text-bright); background: var(--th-bg-2); }
.ch-tab.active {
  color: var(--th-text-bright);
  border-bottom-color: var(--th-bright-orange);
}
.ch-tab.dragging { opacity: 0.5; }
.ch-tab-glyph { font-size: 0.8125rem; line-height: 1; }
.ch-tab-x {
  margin-left: 2px;
  padding: 0 2px;
  color: var(--th-text-grey);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  visibility: hidden;
}
.ch-tab:hover .ch-tab-x { visibility: visible; }
.ch-tab-x:hover { color: var(--th-bright-orange); }
.ch-tab-add {
  background: none;
  border: none;
  color: var(--th-text-grey);
  font-size: 0.875rem;
  padding: 0 10px;
  cursor: pointer;
  flex: none;
}
.ch-tab-add:hover { color: var(--th-text-bright); }
/* Collapsed-panel reopeners — right edge of the tab strip. One
   button per folded side panel (Attachments / Pins / Members);
   clicking reopens the panel and the button disappears. */
.ch-panel-menu {
  display: flex;
  align-items: stretch;
  flex: none;
  margin-left: auto;
}
.ch-panel-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-left: 1px solid var(--th-divider);
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  cursor: pointer;
  white-space: nowrap;
}
.ch-panel-btn:hover { color: var(--th-text-bright); background: var(--th-bg-2); }
.ch-tab-picker {
  position: absolute;
  top: 100%;
  right: 8px;
  min-width: 220px;
  max-width: 320px;
  background: var(--th-panel-2, var(--th-bg-2));
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 4px 0;
  z-index: 25;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.ch-tab-picker-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--th-text-bright);
}
.ch-tab-picker-row:hover { background: var(--th-bg-2); }
.ch-tab-picker-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  letter-spacing: 0.06em;
  flex: none;
}
.ch-tab-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-tab-picker-empty {
  padding: 8px 10px;
  font-size: 0.75rem;
  color: var(--th-text-grey);
}
/* Inline tab content — hosts a registered room component in the 1fr
   column. Embedded rooms assume workspace-style flex sizing, so the
   host mirrors .th-workspace's contract: flex child, min sizes 0. */
.th-channel .ch-tab-content {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.th-channel .ch-tab-content > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}
/* Pin-to-topbar affordance on rail tiles (slack-ux.md §6.2) — same
   chrome as the ↗ open button beside it. */
.ch-tile-pin {
  background: none;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
  flex: none;
}
.ch-tile-pin:hover { color: var(--th-text-bright); }

/* Chat column */
/* Chat-pane surface — used by `treehouse.rooms.channel/chat-pane`,
   which renders inside both the channel view AND the mission view's
   top-right quadrant. These rules are unscoped (no `.th-channel`
   parent) so the same styling applies in both contexts. (The channel
   body's column dividers are drawn by the right-side panels' own
   border-left — see the .ch-body section — so no border here.) */
.ch-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.ch-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  min-height: 0;
}
/* Slack anatomy: square avatar column beside a name-over-body column.
   System echoes render avatar-less (the app talking, not a person). */
.ch-msg {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.ch-msg-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* The square avatar — a published photo, or the tinted letter-combo
   square (initials) minted by cui/avatar-square. Shared class so any
   surface adopting the Slack row reuses the exact same chip. */
.th-avatar-sq {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  object-fit: cover;
  margin-top: 1px;   /* optically align with the name line */
}
.th-avatar-sq.initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}
.ch-msg-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.ch-msg-time { letter-spacing: 0.04em; }
.ch-msg-nick { color: var(--th-text-bright); font-weight: 600; }
.ch-msg.me .ch-msg-nick { color: var(--th-bright-orange); }
.ch-msg.sys .ch-msg-nick { color: var(--th-pale-purple); font-style: italic; }
.ch-msg.sys .ch-msg-body { color: var(--th-pale-purple); font-style: italic; }
.ch-msg-body {
  font-size: 0.875rem;
  color: var(--th-text-bright);
  white-space: pre-wrap;
  word-break: break-word;
}
.ch-empty {
  padding: 24px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
}
/* Channel history boundary — the "beginning of loaded history" marker
   shown atop a channel pane when Hoot's <replay> says older messages
   exist beyond the loaded window (backfill.md §5.4). Static label, not
   a button: deeper channel history isn't client-queryable (ICD §10.1). */
.ch-history-start {
  padding: 8px 12px;
  margin: 4px auto 8px;
  text-align: center;
  color: var(--th-text-grey);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px dashed var(--th-border, rgba(255, 255, 255, 0.12));
}
/* DM scroll-up — "load earlier" affordance, shown while the MAM cursor
   reports more older history (backfill.md §4). */
.load-earlier {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}
.load-earlier-btn {
  background: transparent;
  border: 1px solid var(--th-border, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  color: var(--th-text-grey);
  font-size: 0.7rem;
  padding: 3px 12px;
  cursor: pointer;
}
.load-earlier-btn:hover {
  color: var(--th-text, #fff);
  border-color: var(--th-accent, #4a9eff);
}
/* The legacy `.ch-compose` rules used to style the channel composer.
   They were superseded by the shared `.compose` rules above (see the
   "rich-input two-row layout" block). Channel rooms now render the
   same composer component as chat / DM. */

/* IEP command line — friendly render of a `!track`/`!entity`/… chat
   command, with a status glyph that flips to ✓ once the iep-bridge
   confirms (the bridge's separate ack message is suppressed) or ✗ on
   error, ⏳ while awaiting. */
.ch-iep-cmd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 8px;
  border-left: 2px solid var(--th-steel-blue-2);
  border-radius: 2px;
  background: var(--th-panel-2);
}
.ch-iep-cmd.ok      { border-left-color: #4caf50; }
.ch-iep-cmd.error   { border-left-color: var(--th-red, #c4564b); }
.ch-iep-cmd.pending { border-left-color: var(--th-bright-yellow); }
.ch-iep-glyph {
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1.2;
}
.ch-iep-cmd.ok      .ch-iep-glyph { color: #4caf50; }
.ch-iep-cmd.error   .ch-iep-glyph { color: var(--th-red, #c4564b); }
.ch-iep-cmd.pending .ch-iep-glyph { color: var(--th-bright-yellow); opacity: 0.8; }
.ch-iep-verb {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-steel-blue-2);
  padding: 1px 5px;
  border: 1px solid var(--th-steel-blue-2);
  border-radius: 2px;
  align-self: center;
}
.ch-iep-text {
  flex: 1;
  color: var(--th-text-bright);
  font-size: 0.8125rem;
}
/* Clickable IEP command line — references a coordinate, so clicking
   opens the channel COP panned to that point. */
.ch-iep-cmd.clickable {
  cursor: pointer;
  transition: background 120ms, border-left-color 120ms;
}
.ch-iep-cmd.clickable:hover {
  background: var(--th-hover);
  border-left-color: var(--th-bright-orange);
}
.ch-iep-goto {
  flex: 0 0 auto;
  color: var(--th-text-grey);
  font-size: 0.8125rem;
  align-self: center;
}
.ch-iep-cmd.clickable:hover .ch-iep-goto { color: var(--th-bright-orange); }

/* Attachment rail */
.th-channel .ch-rail {
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  min-height: 0;
  overflow-y: auto;
}
.th-channel .ch-rail-head {
  padding: 8px 12px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  border-bottom: 1px solid var(--th-divider);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The rail / members / pins titlebars double as collapse toggles —
   clicking folds the panel into the tab strip's right-edge buttons. */
.th-channel .ch-rail-title { flex: 1; cursor: pointer; }
.th-channel .ch-rail-title:hover,
.th-channel .ch-members-head.collapsible:hover,
.th-channel .ch-pins-head:hover { color: var(--th-text-bright); }
.th-channel .ch-members-head.collapsible,
.th-channel .ch-pins-head { cursor: pointer; }
.th-channel .ch-rail-add {
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 2px 8px;
}
.th-channel .ch-rail-add:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-channel .ch-rail-composer {
  padding: 8px;
  background: var(--th-panel-2);
  border-bottom: 1px solid var(--th-divider);
}
.th-channel .ch-rail-composer-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.th-channel .ch-rail-kind {
  flex: 0 0 auto;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 4px 6px;
}
.th-channel .ch-rail-ref {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 4px 6px;
}
.th-channel .ch-rail-ref:focus {
  border-color: var(--th-bright-orange);
  outline: none;
}
.th-channel .ch-rail-attach-btn {
  flex: 0 0 auto;
  background: var(--th-panel);
  border: 1px solid var(--th-bright-orange);
  color: var(--th-bright-orange);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  text-transform: uppercase;
}
.th-channel .ch-rail-attach-btn:hover:not(:disabled) {
  background: var(--th-bright-orange);
  color: var(--th-panel);
}
.th-channel .ch-rail-attach-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.th-channel .ch-rail-composer-foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-channel .ch-rail-composer-hint {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: var(--th-text-grey);
  text-transform: none;
}
.th-channel .ch-rail-cancel-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  text-transform: uppercase;
  transition: border-color 120ms, color 120ms;
}
.th-channel .ch-rail-cancel-btn:hover {
  border-color: var(--th-text-bright);
  color: var(--th-text-bright);
}
.th-channel .ch-tile {
  margin: 8px;
  padding: 8px 10px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-left-width: 3px;
  border-radius: 2px;
  cursor: pointer;
}
.th-channel .ch-tile:hover { border-color: var(--th-bright-orange); }
.th-channel .ch-tile.kind-kanban   { border-left-color: var(--th-steel-blue-2); }
.th-channel .ch-tile.kind-bb       { border-left-color: var(--th-pale-purple); }
.th-channel .ch-tile.kind-cop      { border-left-color: var(--th-bright-orange); }
.th-channel .ch-tile.kind-calendar { border-left-color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-dataset  { border-left-color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-tak      { border-left-color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-list     { border-left-color: var(--th-pale-purple); }
.th-channel .ch-tile.detached {
  opacity: 0.65;
  border-style: dashed;
  border-color: var(--th-red, #c4564b);
}
.th-channel .ch-tile.detached .ch-tile-sub { color: var(--th-red, #c4564b); }
.th-channel .ch-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}
.th-channel .ch-tile-kind {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
}
.th-channel .ch-tile.kind-kanban   .ch-tile-kind { color: var(--th-steel-blue-2); }
.th-channel .ch-tile.kind-bb       .ch-tile-kind { color: var(--th-pale-purple); }
.th-channel .ch-tile.kind-cop      .ch-tile-kind { color: var(--th-bright-orange); }
.th-channel .ch-tile.kind-calendar .ch-tile-kind { color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-dataset  .ch-tile-kind { color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-tak     .ch-tile-kind { color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-list    .ch-tile-kind { color: var(--th-pale-purple); }
.th-channel .ch-tile-label {
  flex: 1;
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-channel .ch-tile-open {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  cursor: pointer;
}
.th-channel .ch-tile:hover .ch-tile-open { color: var(--th-bright-orange); }
.th-channel .ch-tile-sub {
  margin-top: 3px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-channel .ch-tile-sub .dim { opacity: 0.6; }

/* Grouped dataset tile — one card listing every `:dataset`
   attachment on the channel as a compact name/version table.
   Replaces the old one-tile-per-dataset shape so a channel with
   three blue-force feeds reads as a single Datasets card rather
   than three separate ones. */
.th-channel .ch-tile-group {
  /* The grouped variant has no single :on-click — interactivity
     lives on each row, so suppress the parent's pointer hint. */
  cursor: default;
}
.th-channel .ch-tile-group:hover {
  border-color: var(--th-divider);
}
.th-channel .ch-dataset-table {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-channel .ch-dataset-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms;
}
.th-channel .ch-dataset-row:hover {
  background: var(--th-hover);
}
.th-channel .ch-dataset-row.detached {
  opacity: 0.65;
}
.th-channel .ch-dataset-name {
  flex: 1;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-channel .ch-dataset-versions {
  flex: 0 0 auto;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-channel .ch-dataset-row.detached .ch-dataset-versions {
  color: var(--th-red, #c4564b);
}
.th-channel .ch-dataset-upload {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  padding: 1px 7px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 100ms, border-color 100ms, background 100ms;
}
.th-channel .ch-dataset-upload:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
.th-channel .ch-dataset-upload:disabled {
  cursor: default;
  color: var(--th-bright-yellow);
  border-color: var(--th-divider);
  animation: th-spin 1.4s linear infinite;
}
.th-channel .ch-dataset-row.detached .ch-dataset-upload {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Bookmarks + pinned-messages attachment tiles (ch-links-ux.md)      */
/* ------------------------------------------------------------------ */
.th-channel .ch-tile.kind-bookmarks       { border-left-color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-bookmarks .ch-tile-kind { color: var(--th-bright-yellow); }
.th-channel .ch-tile.kind-pinned-messages { border-left-color: var(--th-bright-orange); }
.th-channel .ch-tile.kind-pinned-messages .ch-tile-kind { color: var(--th-bright-orange); }

/* The `+` add affordance on the bookmarks tile head */
.th-channel .ch-tile-add,
.ch-bookmarks-pane .ch-tile-add {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  padding: 1px 7px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 100ms, border-color 100ms;
}
.th-channel .ch-tile-add:hover,
.ch-bookmarks-pane .ch-tile-add:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}

.th-channel .ch-bookmark-list,
.ch-bookmarks-pane .ch-bookmark-list,
.th-channel .ch-pin-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-channel .ch-bookmark-row,
.ch-bookmarks-pane .ch-bookmark-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms;
}
.th-channel .ch-bookmark-row:hover,
.ch-bookmarks-pane .ch-bookmark-row:hover { background: var(--th-hover); }
.th-channel .ch-bookmark-icon,
.ch-bookmarks-pane .ch-bookmark-icon { flex: 0 0 auto; font-size: 0.6875rem; }
.th-channel .ch-bookmark-title,
.ch-bookmarks-pane .ch-bookmark-title {
  flex: 1;
  color: var(--th-text-bright);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-channel .ch-bookmark-x,
.ch-bookmarks-pane .ch-bookmark-x,
.th-channel .ch-pin-x {
  flex: 0 0 auto;
  visibility: hidden;
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.th-channel .ch-bookmark-row:hover .ch-bookmark-x,
.ch-bookmarks-pane .ch-bookmark-row:hover .ch-bookmark-x,
.th-channel .ch-pin-row:hover .ch-pin-x { visibility: visible; }
.th-channel .ch-bookmark-x:hover,
.ch-bookmarks-pane .ch-bookmark-x:hover,
.th-channel .ch-pin-x:hover { color: var(--th-red, #c4564b); }
.th-channel .ch-bookmark-more {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  padding: 2px 4px;
}

/* Bookmarks pane — the topbar Bookmarks tab's inline content (rows
   shared with the rail tile's rules above). Also mounted by the
   cop-chat right-pane tabs, hence the unscoped selectors. */
.ch-bookmarks-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  overflow-y: auto;
}
.ch-bookmarks-pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-divider);
}
.ch-bookmarks-pane-title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
}
.ch-bookmarks-pane .ch-bookmark-list {
  margin-top: 0;
  padding: 6px 8px;
}

/* Pinned-message rows — two-line: meta strip + excerpt */
.th-channel .ch-pin-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  padding: 3px 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms;
}
.th-channel .ch-pin-row:hover { background: var(--th-hover); }
.th-channel .ch-pin-meta {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.th-channel .ch-pin-icon { font-size: 0.625rem; }
.th-channel .ch-pin-author {
  color: var(--th-bright-orange);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
}
.th-channel .ch-pin-excerpt {
  grid-column: 1;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-channel .ch-pin-x { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Footer affordance — creates + attaches a new dataset family to
   the channel. Bracketed look matches the operator's mental model
   of "this is the catch-all bottom action," same idiom used by
   "[ Open ]" buttons elsewhere in the rail. */
.th-channel .ch-dataset-new {
  margin-top: 8px;
  align-self: stretch;
  background: transparent;
  border: 1px dashed var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 100ms, border-color 100ms;
}
.th-channel .ch-dataset-new:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}

/* Members panel */
.th-channel .ch-members,
.th-canvas .ch-members {
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  min-height: 0;
  overflow-y: auto;
}
.th-channel .ch-members-head,
.th-canvas .ch-members-head {
  padding: 8px 12px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  border-bottom: 1px solid var(--th-divider);
}

/* Pins panel — the channel's pinned messages as a full right-side
   column (the rail tile shows a capped peek of the same data). Rows
   reuse the .ch-pin-* rules above. */
.th-channel .ch-pins {
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
  min-height: 0;
  overflow-y: auto;
}
.th-channel .ch-pins-head {
  padding: 8px 12px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  border-bottom: 1px solid var(--th-divider);
}
.th-channel .ch-pins .ch-pin-list {
  margin-top: 0;
  padding: 6px 8px;
}
.th-channel .ch-members ul,
.th-canvas .ch-members ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.th-channel .ch-members li,
.th-canvas .ch-members li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: var(--th-text-bright);
}
.th-channel .ch-members li.self,
.th-canvas .ch-members li.self { color: var(--th-bright-orange); }
.th-channel .ch-mem-dot,
.th-canvas .ch-mem-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Default = unknown presence — neutral teal, matches legacy look. */
  background: rgb(102, 187, 187);
  transition: background 120ms;
}
.th-channel .ch-mem-dot.presence-online,
.th-canvas .ch-mem-dot.presence-online { background: #4caf50; }
.th-channel .ch-mem-dot.presence-away,
.th-canvas .ch-mem-dot.presence-away { background: #d4a017; }
.th-channel .ch-mem-dot.presence-dnd,
.th-canvas .ch-mem-dot.presence-dnd { background: #c4564b; }
.th-channel .ch-mem-dot.presence-xa,
.th-canvas .ch-mem-dot.presence-xa { background: #6a7a86; }
.th-channel .ch-mem-dot.presence-offline,
.th-canvas .ch-mem-dot.presence-offline { background: #444c55; }
/* Self's dot wins over presence-* — the orange ID color reads as
   "this is you" regardless of state. The presence still surfaces in
   the hover tooltip. */
.th-channel .ch-members li.self .ch-mem-dot,
.th-canvas .ch-members li.self .ch-mem-dot { background: var(--th-bright-orange); }
.th-channel .ch-mem-nick,
.th-canvas .ch-mem-nick { flex: 1; }
.th-channel .ch-mem-tag,
.th-canvas .ch-mem-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}

/* Channel settings modal */
.channel-settings-modal .ch-set-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--th-divider);
}
.channel-settings-modal .ch-set-head {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 6px;
}
.channel-settings-modal .ch-set-empty {
  padding: 6px 0;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
/* Read-only JID display in the Identity section — full JID on a
   single line with a copy button, broken-down local/service parts
   on a second line for the cases where the operator wants to
   reference a sub-component (e.g. the channels service host). */
.channel-settings-modal .ch-set-jid-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.channel-settings-modal .ch-set-jid {
  flex: 1;
  display: block;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 5px 8px;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  word-break: break-all;
}
.channel-settings-modal .ch-set-jid-copy {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 4px 10px;
}
.channel-settings-modal .ch-set-jid-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.channel-settings-modal .ch-set-jid-parts .k {
  color: var(--th-text-grey);
  margin-right: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.625rem;
}
.channel-settings-modal .ch-set-jid-parts .v {
  color: var(--th-text-bright);
}
.channel-settings-modal .ch-set-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--th-hover);
}
.channel-settings-modal .ch-set-row.new {
  margin-top: 6px;
  border-bottom: none;
  padding-top: 8px;
  border-top: 1px dashed var(--th-divider);
}
.channel-settings-modal .ch-set-kind {
  display: inline-block;
  flex: 0 0 60px;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--th-pale-blue);
  text-align: center;
  color: var(--th-text-bright);
}
.channel-settings-modal .ch-set-ref {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--th-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-settings-modal .ch-set-row select,
.channel-settings-modal .ch-set-row input { padding: 3px 6px; }
.channel-settings-modal .ch-set-row select { flex: 0 0 110px; }
.channel-settings-modal .ch-set-row input  { flex: 1; }
.channel-settings-modal .ch-set-row-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.channel-settings-modal .ch-set-mam { display: grid; gap: 4px; }
.channel-settings-modal .ch-set-mam-row {
  display: flex; gap: 12px; font-family: var(--font-mono); font-size: 0.6875rem;
}
.channel-settings-modal .ch-set-mam-row .k {
  flex: 0 0 140px; color: var(--th-text-grey);
}
.channel-settings-modal .ch-set-mam-row .v { color: var(--th-text-bright); }

.channel-settings-modal .ch-set-attach { display: grid; gap: 6px; }
.channel-settings-modal .ch-set-options summary {
  cursor: pointer;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0;
}
.channel-settings-modal .ch-set-options[open] summary { color: var(--th-text-bright); }

/* User-menu popover anchored under the topbar's user icon */
.th-popover-host .user-menu-scrim {
  position: fixed;
  inset: var(--tabbar-h) 0 0 0;
  background: transparent;
  z-index: 40;
}
.th-popover-host .user-menu-panel {
  position: absolute;
  right: 86px;        /* clear the settings + power buttons */
  top: calc(var(--tabbar-h) + 4px);
  width: 360px;
  max-height: calc(100vh - var(--tabbar-h) - 12px);
  overflow-y: auto;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.th-popover-host .user-menu-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--th-divider);
}
.th-popover-host .user-menu-section:last-child { border-bottom: none; }
.th-popover-host .user-menu-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 6px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
}
.th-popover-host .user-menu-refresh {
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 1px 6px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.th-popover-host .user-menu-refresh:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
.th-popover-host .user-menu-discover-meta {
  padding: 0 12px 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-popover-host .user-menu-discover-meta .err { color: var(--th-red); }
.th-popover-host .user-menu-room-tag {
  padding: 0 6px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.th-popover-host .user-menu-agent-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 0 8px 4px;
}
.th-popover-host .user-menu-agent-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 6px;
  color: var(--th-text-grey);
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-align: left;
  cursor: pointer;
}
.th-popover-host .user-menu-agent-group:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
.th-popover-host .user-menu-agent-group-count {
  flex: none;
  color: var(--th-text-bright);
}
.th-popover-host .user-menu-account {
  padding: 12px;
  background: var(--th-titlebar);
}
.th-popover-host .user-menu-nick-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.th-popover-host .user-menu-nick {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--th-bright-yellow);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.th-popover-host .user-menu-nick.placeholder {
  font-weight: 400;
  color: var(--th-text-grey);
  font-style: italic;
}
.th-popover-host .user-menu-nick-edit {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
}
.th-popover-host .user-menu-nick-edit:hover {
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}
.th-popover-host .user-menu-nick-editor {
  margin-top: 8px;
  padding: 8px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
}
.th-popover-host .user-menu-nick-input {
  width: 100%;
  padding: 4px 6px;
  background: var(--th-pale-blue);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-radius: 2px;
  box-sizing: border-box;
}
.th-popover-host .user-menu-nick-input:focus {
  outline: none;
  border-color: var(--th-bright-yellow);
}
.th-popover-host .user-menu-nick-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-popover-host .user-menu-nick-count.over { color: var(--th-red); }
.th-popover-host .user-menu-nick-pending { color: var(--th-bright-yellow); }
.th-popover-host .user-menu-nick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}
.th-popover-host .user-menu-nick-actions button {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  border-radius: 2px;
  cursor: pointer;
}
.th-popover-host .user-menu-nick-actions button:hover:not(:disabled) {
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}
.th-popover-host .user-menu-nick-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.th-popover-host .user-menu-nick-clear:hover:not(:disabled) {
  border-color: var(--th-red);
  color: var(--th-red);
}
.th-popover-host .user-menu-jid {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  word-break: break-all;
}
/* Presence selector under the nick / JID — flex row with a label
   on the left and a native <select> on the right. Themed from the
   same custom-property palette so light/dark both look right. */
.th-popover-host .user-menu-presence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.th-popover-host .user-menu-presence-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  flex: 0 0 auto;
}
.th-popover-host .user-menu-presence-select {
  flex: 1;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 6px;
  cursor: pointer;
}
.th-popover-host .user-menu-presence-select:focus {
  border-color: var(--th-bright-orange);
  outline: none;
}
.th-popover-host .user-menu-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.th-popover-host .user-menu-status {
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--th-divider);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-popover-host .user-menu-status.connected      { color: rgb(102, 187, 187); border-color: rgb(102, 187, 187); }
.th-popover-host .user-menu-status.connecting,
.th-popover-host .user-menu-status.authenticating { color: var(--th-bright-yellow); border-color: var(--th-bright-yellow); }
.th-popover-host .user-menu-status.disconnected   { color: var(--th-text-grey); }
.th-popover-host .user-menu-status.error,
.th-popover-host .user-menu-status.auth-failed,
.th-popover-host .user-menu-status.connection-failed { color: var(--th-red); border-color: var(--th-red); }
.th-popover-host .user-menu-ws {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-popover-host .user-menu-logout {
  margin-top: 8px;
  width: 100%;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-red);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: 2px;
  cursor: pointer;
}
.th-popover-host .user-menu-logout:hover { border-color: var(--th-red); }
.th-popover-host .user-menu-empty {
  padding: 4px 12px;
  font-size: 0.75rem;
  color: var(--th-text-grey);
}
.th-popover-host .user-menu-room,
.th-popover-host .user-menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 0.75rem;
  cursor: pointer;
}
.th-popover-host .user-menu-row { cursor: default; }
.th-popover-host .user-menu-room:hover { background: var(--th-panel-2); }
.th-popover-host .user-menu-room.active { background: var(--th-titlebar); }
.th-popover-host .user-menu-room-kind {
  flex: 0 0 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.th-popover-host .user-menu-room.kind-cop        .user-menu-room-kind { color: var(--th-bright-orange); }
.th-popover-host .user-menu-room.kind-blackboard .user-menu-room-kind { color: var(--th-pale-purple); }
.th-popover-host .user-menu-room.kind-kanban     .user-menu-room-kind { color: var(--th-steel-blue-2); }
.th-popover-host .user-menu-room.kind-mission    .user-menu-room-kind { color: var(--th-bright-yellow); }
.th-popover-host .user-menu-room.kind-datasets   .user-menu-room-kind { color: var(--th-bright-yellow); }
.th-popover-host .user-menu-room.kind-audit      .user-menu-room-kind { color: var(--th-red); }
.th-popover-host .user-menu-room.kind-channel    .user-menu-room-kind { color: rgb(102, 187, 187); }
.th-popover-host .user-menu-room-name {
  flex: 1;
  color: var(--th-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-popover-host .user-menu-room-unread {
  padding: 0 6px;
  border-radius: 8px;
  background: var(--th-bright-orange);
  color: var(--th-black);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.th-popover-host .user-menu-op-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(102, 187, 187);
}
.th-popover-host .user-menu-op-dot.self { background: rgb(184, 230, 230); }
.th-popover-host .user-menu-op-nick { flex: 1; color: var(--th-text-bright); }
.th-popover-host .user-menu-op-tag {
  padding: 0 5px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.th-popover-host .user-menu-quicks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 0 12px;
}
.th-popover-host .user-menu-quick {
  padding: 4px 6px;
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}
.th-popover-host .user-menu-quick:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

/* Settings (gear) popover — same z-index / scrim model as user-menu */
.th-popover-host .settings-menu-scrim {
  position: fixed;
  inset: var(--tabbar-h) 0 0 0;
  background: transparent;
  z-index: 40;
}
.th-popover-host .settings-menu-panel {
  position: absolute;
  right: 48px;
  top: calc(var(--tabbar-h) + 4px);
  width: 280px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
  padding: 4px 0;
}
.th-popover-host .settings-menu-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--th-divider);
}
.th-popover-host .settings-menu-section:last-child { border-bottom: none; }
.th-popover-host .settings-menu-head {
  padding: 0 12px 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
}
.th-popover-host .settings-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 4px 12px;
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  cursor: pointer;
}
.th-popover-host .settings-menu-item:hover { background: var(--th-panel-2); }
.th-popover-host .settings-menu-hint {
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  line-height: 1.4;
}

/* Mission wizard sections */
.mission-wizard-modal .wizard-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--th-divider);
}
.mission-wizard-modal .wizard-section-head {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 6px;
}
.mission-wizard-modal .wizard-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--th-text-bright);
}
.mission-wizard-modal .wizard-radio input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--th-bright-orange);
}
.mission-wizard-modal .wizard-radio input[type="radio"]:disabled + span {
  color: var(--th-text-grey);
  opacity: 0.5;
}
.mission-wizard-modal .wizard-hint {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.mission-wizard-modal .wizard-select {
  width: 100%;
  margin-top: 6px;
  margin-left: 22px;
  width: calc(100% - 22px);
}

.th-blackboard .bb-pill {
  background: var(--th-pale-blue);
  color: var(--th-text-bright);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-blackboard .bb-pill.high   { background: rgba(255,69,68,0.15); color: var(--th-red); }
.th-blackboard .bb-pill.medium { background: var(--th-pale-blue); color: var(--th-pale-purple); }
.th-blackboard .bb-pill.low    { background: var(--th-pale-blue); color: var(--th-text-grey); }

.th-blackboard .bb-conf {
  display: flex;
  align-items: center;
  gap: 4px;
}
.th-blackboard .bb-conf-track {
  width: 60px; height: 6px;
  background: var(--th-pale-blue);
  border-radius: 3px;
  overflow: hidden;
}
.th-blackboard .bb-conf-fill {
  height: 100%;
  background: var(--th-pale-purple);
}
.th-blackboard .bb-conf-label {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--th-text-grey);
}

.th-blackboard .bb-claim {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.th-blackboard .bb-plan-steps {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.th-blackboard .bb-step {
  display: flex;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
}
.th-blackboard .bb-step-num   { color: var(--th-text-grey); width: 18px; }
.th-blackboard .bb-step-task  { flex: 1; }
.th-blackboard .bb-step-actor { color: var(--th-pale-purple); font-size: 0.6875rem; }

.th-blackboard .bb-intent-body,
.th-blackboard .bb-assignment-body,
.th-blackboard .bb-query-prompt,
.th-blackboard .bb-lock-body,
.th-blackboard .bb-unknown-body {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* Markdown-rendered surfaces. Note bodies render as real HTML now;
   the read-side card and the detail-pane body share these rules. */
.th-blackboard .bb-note-body,
.th-blackboard .bb-note-detail-body {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.th-markdown h1, .th-markdown h2, .th-markdown h3,
.th-markdown h4, .th-markdown h5, .th-markdown h6 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 6px 0 2px;
  color: var(--th-text-bright);
  text-transform: none;
  letter-spacing: 0;
}
.th-markdown h1 { font-size: 0.9375rem; }
.th-markdown h2 { font-size: 0.875rem; }
.th-markdown p { margin: 4px 0; }
.th-markdown ul, .th-markdown ol { margin: 4px 0; padding-left: 20px; }
.th-markdown li { margin: 2px 0; }
.th-markdown li > input[type="checkbox"] { margin-right: 6px; }
.th-markdown code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 1px 4px;
  background: rgba(127,127,127,0.18);
  border-radius: 2px;
}
.th-markdown pre {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 8px;
  background: rgba(127,127,127,0.12);
  border-left: 2px solid var(--th-divider);
  overflow-x: auto;
  margin: 4px 0;
}
.th-markdown pre code { background: none; padding: 0; }
.th-markdown blockquote {
  border-left: 2px solid var(--th-pale-purple);
  margin: 4px 0;
  padding: 2px 8px;
  color: var(--th-text-grey);
}
.th-markdown hr {
  border: 0;
  border-top: 1px dashed var(--th-divider);
  margin: 6px 0;
}
.th-markdown a { color: var(--th-bright-blue); text-decoration: underline; }
.th-markdown a.th-md-ref {
  color: var(--th-bright-orange);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 1px 4px;
  background: rgba(255,165,0,0.10);
  border-radius: 2px;
  cursor: pointer;
}
.th-markdown a.th-md-ref:hover { background: rgba(255,165,0,0.22); }
.th-blackboard .bb-query-answer {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--th-pale-blue);
  border-radius: 2px;
  color: var(--th-text-bright);
  font-size: 0.8125rem;
}
.th-blackboard .bb-actor    { color: var(--th-pale-purple); font-family: var(--font-mono); }
.th-blackboard .bb-task-ref { color: var(--th-bright-orange); font-family: var(--font-mono); }

/* Detail pane */
.th-blackboard .bb-detail {
  background: var(--th-panel);
  border-left: 1px solid var(--th-divider);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-blackboard .bb-side-header {
  padding: 8px 14px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-bright);
  height: var(--tabbar-h);
  display: flex;
  align-items: center;
}
.th-blackboard .bb-detail-empty {
  padding: 20px 14px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
}
.th-blackboard .bb-detail-body { padding: 12px 14px; overflow-y: auto; }
.th-blackboard .bb-detail-title { color: var(--th-text-bright); font-weight: 600; font-size: 0.875rem; margin-bottom: 6px; }
.th-blackboard .bb-detail-sum { color: var(--th-text-grey); font-size: 0.75rem; margin-bottom: 12px; }
.th-blackboard .bb-detail-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 4px 8px;
  font-size: 0.75rem;
  margin-bottom: 14px;
}
.th-blackboard .bb-detail-grid .k {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}
.th-blackboard .bb-detail-grid .v {
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  word-break: break-word;
}
.th-blackboard .bb-detail-section {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 4px;
}
.th-blackboard .bb-link {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--th-text-bright);
  margin-bottom: 2px;
  word-break: break-all;
}
.th-blackboard .bb-rel {
  color: var(--th-bright-yellow);
  margin-right: 4px;
}
.th-blackboard .bb-link {
  cursor: pointer;
  transition: color 120ms;
}
.th-blackboard .bb-link:hover {
  color: var(--th-bright-orange);
}
.th-blackboard .bb-link:hover .bb-href {
  text-decoration: underline;
}
/* Plan-step list — structured rendering of a `:plan` typed payload's
   `:steps` (replaces the generic pr-str dump). Numbered <ol> with
   per-step rows; the `:actor` becomes a clickable DM-open chip when
   resolvable. */
.th-blackboard .bb-plan-steps {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--th-divider);
}
.th-blackboard .bb-plan-list {
  margin: 0;
  padding-left: 22px;
  font-size: 0.75rem;
}
.th-blackboard .bb-plan-step {
  margin-bottom: 8px;
  color: var(--th-text);
}
.th-blackboard .bb-plan-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.th-blackboard .bb-plan-task {
  color: var(--th-text-bright);
  font-weight: 500;
}
.th-blackboard .bb-plan-step-meta {
  margin-top: 2px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-blackboard .bb-plan-meta-k { color: var(--th-text-grey); }
.th-blackboard .bb-plan-meta-v { color: var(--th-text); }
/* Clickable target-ref — used when the step's `:target-ref` is a
   resolvable BB / xmpp ref (jumps to the linked sibling item). Reads
   inline with the surrounding `target:` label so the visual rhythm
   of the row stays compact; subtle underline + orange hover signals
   "this is clickable" without the bulk of a button chrome. */
.th-blackboard .bb-plan-ref-link {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--th-bright-blue);
  font: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all;
}
.th-blackboard .bb-plan-ref-link:hover {
  color: var(--th-bright-orange);
  text-decoration: underline solid;
}
.th-blackboard .bb-plan-step-note {
  margin-top: 3px;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  font-style: italic;
}
/* Inline BB-ref card — rich preview rendered in chat message bodies
   whenever a `bb:<mission>:<region>#<id>` shorthand appears in the
   text. Falls back to a monospaced link chip when the ref can't be
   resolved (BB room not subscribed, item not in pubsub state). */
.bb-inline-card {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  max-width: 380px;
  margin: 2px 4px;
  padding: 6px 8px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-left: 3px solid var(--th-pale-purple);
  border-radius: 2px;
  color: var(--th-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 120ms, background 120ms;
}
.bb-inline-card:hover {
  border-color: var(--th-bright-orange);
  border-left-color: var(--th-bright-orange);
  background: var(--th-hover);
}
.bb-inline-card.kind-hypothesis { border-left-color: var(--th-bright-yellow); }
.bb-inline-card.kind-plan       { border-left-color: var(--th-steel-blue-2); }
.bb-inline-card.kind-note       { border-left-color: var(--th-pale-purple); }
.bb-inline-card.kind-query      { border-left-color: var(--th-bright-orange); }
.bb-inline-card.kind-assignment { border-left-color: var(--th-bright-blue); }
.bb-inline-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bb-inline-card-kind {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  flex: 0 0 auto;
}
.bb-inline-card-title {
  flex: 1;
  color: var(--th-text-bright);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-inline-card-sum {
  margin-top: 3px;
  color: var(--th-text);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.bb-inline-card.unresolved {
  /* Fallback — looks like a monospaced link chip rather than a
     full preview card. Same click behavior (still routes through
     the matching jump-to-ref event so the source room opens
     lazily). */
  display: inline-block;
  border-left-width: 1px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-bright-blue);
  max-width: none;
  vertical-align: baseline;
}
.bb-inline-card.unresolved:hover {
  color: var(--th-bright-orange);
}
/* Linked-message card (docs/feature/linked-message.md §4). A quoted
   reference to another message + a ↗ jump. Teal left-border to set it
   apart from bb/kb/hero/dataset cards. */
.bb-inline-card.message {
  border-left-color: var(--th-steel-blue, #5e81ac);
  max-width: 460px;
}
.bb-inline-card.message:hover {
  border-left-color: var(--th-bright-orange);
}
.bb-inline-card-jump {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--th-bright-blue);
}
.bb-inline-card.message:hover .bb-inline-card-jump {
  color: var(--th-bright-orange);
}
.bb-inline-card-sum.msg-quote {
  /* The captured excerpt — preserve line breaks, clamp tall quotes. */
  white-space: pre-wrap;
  color: var(--th-text-grey);
  border-left: 2px solid var(--th-divider);
  padding-left: 8px;
  max-height: 5.6em;
  overflow: hidden;
}
/* Bare `msg:` link with no captured quote — a compact jump chip. */
.bb-inline-card.message.bare {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  max-width: none;
  padding: 2px 8px;
  vertical-align: baseline;
}
.bb-inline-card.message.bare .msg-jump-label {
  font-size: 0.6875rem;
  color: var(--th-text);
}
/* Jump-to-message target flash — pulses the row the link lands on. */
@keyframes th-msg-flash-kf {
  0%   { background: var(--th-bright-orange); }
  100% { background: transparent; }
}
.th-msg-flash {
  animation: th-msg-flash-kf 1.5s ease-out;
  border-radius: 2px;
}
/* Kanban variant of the inline card — steel-blue left-border to
   match the kanban tile palette in the channel rail. Includes a
   small meta row for priority + assignee chips, mirroring the
   full kanban card. */
.bb-inline-card.kb {
  border-left-color: var(--th-steel-blue-2);
}
.bb-inline-card.kb:hover {
  border-left-color: var(--th-bright-orange);
}
.bb-inline-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.bb-inline-card-meta .kb-pill {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--th-panel);
  color: var(--th-text-grey);
}
.bb-inline-card-meta .kb-pill.high   { color: var(--th-red, #c4564b); }
.bb-inline-card-meta .kb-pill.medium { color: var(--th-bright-yellow); }
.bb-inline-card-meta .kb-pill.low    { color: var(--th-text-grey); }
.bb-inline-card-meta .kb-assignee {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}

/* Hypothesis evidence — structured list rendering of a hypothesis's
   `:evidence` vec. Each row shows kind + ref + weight on the head
   line, with an optional note below. Refs that resolve to a BB
   shorthand or xmpp URI become clickable jumps (`.bb-plan-ref-link`
   styling, shared). Free-form refs render as monospace text. */
.th-blackboard .bb-evidence {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--th-divider);
}
.th-blackboard .bb-evidence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-blackboard .bb-evidence-row {
  padding: 6px 8px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-left: 3px solid var(--th-bright-yellow);
  border-radius: 2px;
}
.th-blackboard .bb-evidence-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.th-blackboard .bb-evidence-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-bright-yellow);
  padding: 1px 5px;
  border: 1px solid var(--th-bright-yellow);
  border-radius: 2px;
  flex: 0 0 auto;
}
.th-blackboard .bb-evidence-ref {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  word-break: break-all;
}
.th-blackboard .bb-evidence-row .bb-plan-ref-link {
  flex: 1;
  text-align: left;
}
.th-blackboard .bb-evidence-weight {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--th-text-grey);
  flex: 0 0 auto;
}
.th-blackboard .bb-evidence-note {
  margin-top: 4px;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  font-style: italic;
}
/* Actor chip — only rendered when the step's `:actor` resolved to a
   known JID (directly or via nick reverse-lookup). The plain-text
   fallback for unresolved actors uses `.bb-actor-plain`. */
.th-blackboard .bb-actor-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--th-steel-blue-2);
  border-radius: 2px;
  color: var(--th-steel-blue-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  text-transform: uppercase;
  transition: background 120ms, color 120ms;
}
.th-blackboard .bb-actor-link:hover {
  background: var(--th-steel-blue-2);
  color: var(--th-panel);
}
.th-blackboard .bb-actor-plain {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Geo-jump chip — surfaced when a BB card carries a `geo:` link or a
   typed anchor. Clicking pans the channel-paired COP via
   `:blackboard/jump-to-cop!`. */
.th-blackboard .bb-geo-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px 0;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--th-bright-orange);
  border-radius: 2px;
  color: var(--th-bright-orange);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  transition: background 120ms, color 120ms;
}
.th-blackboard .bb-geo-jump:hover {
  background: var(--th-bright-orange);
  color: var(--th-panel);
}
.th-blackboard .bb-detail-actions {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--th-divider);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.th-blackboard .bb-action {
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  padding: 5px 12px;
  border-radius: 2px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-blackboard .bb-action:hover { background: var(--th-steel-blue-2); }
.th-blackboard .bb-action-primary {
  background: var(--th-dark-orange);
  color: var(--th-bright-orange);
  border: 1px solid var(--th-bright-orange);
}
.th-blackboard .bb-action-primary:hover {
  background: var(--th-bright-orange);
  color: var(--th-black);
}
.th-blackboard .bb-action.danger {
  background: var(--th-dark-orange);
  color: var(--th-red);
  border: 1px solid var(--th-red);
}
.th-blackboard .bb-action.danger:hover {
  background: var(--th-red);
  color: var(--th-black);
}
.th-blackboard .bb-add {
  margin-left: auto;
  min-width: 32px;
  font-size: 1rem;
}

/* ---------- Datasets browser ---------- */
.th-datasets {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  height: 100%;
  background: var(--th-black);
}
.th-datasets > * {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--th-panel);
}
.th-datasets .ds-families,
.th-datasets .ds-versions { border-right: 1px solid var(--th-divider); }
.th-datasets .panel-header {
  padding: 8px 14px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-bright);
  height: var(--tabbar-h);
  display: flex;
  align-items: center;
  gap: 6px;
}
.th-datasets .panel-header > span:first-child {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phase 4.4 — write-path header action buttons (new, relax, upload). */
.th-datasets .ds-action {
  flex-shrink: 0;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 2px 8px;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
}
.th-datasets .ds-action:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

/* Per-row delete chip — only readable on hover so it doesn't compete
   with the row text for attention. */
.th-datasets .ds-row-delete {
  background: transparent;
  border: 1px solid transparent;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0 6px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms;
}
.th-datasets .ds-family-row:hover .ds-row-delete,
.th-datasets .ds-versions-table tbody tr:hover .ds-row-delete { opacity: 0.6; }
.th-datasets .ds-row-delete:hover {
  opacity: 1 !important;
  color: var(--th-red);
  border-color: var(--th-red);
}

/* In-flight upload strip */
.th-datasets .ds-upload-strip {
  padding: 6px 14px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-datasets .ds-upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.th-datasets .ds-upload-spinner {
  color: var(--th-bright-yellow);
  animation: th-spin 1.4s linear infinite;
  display: inline-block;
}
@keyframes th-spin {
  to { transform: rotate(360deg); }
}
.th-datasets .ds-upload-id    { color: var(--th-text-bright); flex: 1; }
.th-datasets .ds-upload-stage { color: var(--th-text-grey); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.625rem; }
.th-datasets .panel-body { flex: 1; overflow: auto; }
.th-datasets .ds-empty {
  padding: 16px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.th-datasets .ds-family-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--th-divider);
  cursor: pointer;
}
.th-datasets .ds-family-row-main { flex: 1; min-width: 0; }
.th-datasets .ds-family-row:hover { background: var(--th-panel-2); }
.th-datasets .ds-family-row.active {
  background: var(--th-pale-yellow);
  border-left: 3px solid var(--th-bright-yellow);
  padding-left: 11px;
}
.th-datasets .ds-family-name {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  font-weight: 600;
}
.th-datasets .ds-family-node {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.th-datasets .ds-versions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.th-datasets .ds-versions-table th {
  text-align: left;
  padding: 6px 8px;
  background: var(--th-titlebar);
  color: var(--th-text-grey);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  position: sticky;
  top: 0;
}
.th-datasets .ds-versions-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--th-divider);
}
.th-datasets .ds-versions-table tbody tr:hover { background: var(--th-panel-2); }
.th-datasets .ds-versions-table tbody tr.active {
  background: var(--th-pale-yellow);
}

/* Phase 4.6 — stale-Hammock indicator. The fetch returned 404, so
   clicking the row again won't help; dim the whole row and append
   a `(stale)` tag in red after the key. */
.th-datasets .ds-versions-table tbody tr.stale {
  opacity: 0.55;
  cursor: not-allowed;
}
.th-datasets .ds-versions-table tbody tr.stale:hover { background: transparent; }
.th-datasets .ds-stale-tag {
  color: var(--th-red);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.th-datasets .ds-versions-table td {
  padding: 6px 8px;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-datasets .ds-versions-table td.k { color: var(--th-bright-orange); }
.th-datasets .ds-versions-table td.t { color: var(--th-pale-purple); font-size: 0.6875rem; }
.th-datasets .ds-versions-table td.n { text-align: right; }
.th-datasets .ds-versions-table td.p { color: var(--th-text-grey); font-size: 0.6875rem; }
.th-datasets .ds-versions-table td.b { color: var(--th-text-grey); font-size: 0.6875rem; }

.th-datasets .ds-content-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.th-datasets .ds-meta {
  padding: 8px 14px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-panel-2);
}
.th-datasets .ds-meta-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 3px 8px;
  font-size: 0.75rem;
}
.th-datasets .ds-meta-grid .k {
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
}
.th-datasets .ds-meta-grid .v {
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  word-break: break-all;
}
.th-datasets .ds-url { color: var(--th-pale-purple) !important; }
.th-datasets .ds-pin-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--th-divider);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.th-datasets .ds-pin-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
}
.th-datasets .ds-pin-btn {
  background: var(--th-pale-blue);
  color: var(--th-pale-purple);
  border: 1px solid var(--th-divider);
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.th-datasets .ds-pin-btn:hover {
  background: var(--th-pale-purple);
  color: var(--th-black);
  border-color: var(--th-pale-purple);
}
.th-datasets .ds-body { flex: 1; overflow: auto; padding: 10px 14px; }
.th-datasets .ds-loading {
  color: var(--th-bright-yellow);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.th-datasets .ds-error {
  color: var(--th-red);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.th-datasets .ds-unknown {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* JSON tree */
.th-datasets .ds-json {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
  white-space: pre;
}
.th-datasets .ds-json-obj,
.th-datasets .ds-json-arr {
  padding-left: 12px;
}
.th-datasets .ds-json-key { color: var(--th-pale-purple); }
.th-datasets .ds-json-str { color: var(--th-bright-yellow); }
.th-datasets .ds-json-num { color: var(--th-bright-orange); }
.th-datasets .ds-json-bool { color: var(--th-red); }
.th-datasets .ds-json-null { color: var(--th-text-grey); }
.th-datasets .ds-json-pair { padding-left: 8px; }

/* CSV/TSV table */
.th-datasets .ds-table {
  overflow: auto;
  border: 1px solid var(--th-divider);
}
.th-datasets .ds-table table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  width: 100%;
}
.th-datasets .ds-table th,
.th-datasets .ds-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--th-divider);
}
.th-datasets .ds-table th {
  background: var(--th-titlebar);
  color: var(--th-pale-purple);
  font-weight: 600;
}
.th-datasets .ds-table td {
  color: var(--th-text-bright);
}

/* Image / text */
.th-datasets .ds-image img {
  max-width: 100%;
  max-height: 80vh;
  border: 1px solid var(--th-divider);
  background: var(--th-black);
}
.th-datasets .ds-text pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
}

/* GeoJSON */
.th-datasets .ds-geojson-summary {
  padding: 8px;
  background: var(--th-pale-blue);
  border-radius: 2px;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  color: var(--th-text-bright);
}

/* ---------- Notification chip & drawer ---------- */
.th-toast-stack {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  pointer-events: none;
}
.th-toast {
  pointer-events: auto;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-left: 3px solid var(--th-pale-purple);
  border-radius: 2px;
  padding: 8px 12px;
  min-width: 280px;
  max-width: 360px;
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  box-shadow: var(--shadow-deep);
  animation: th-toast-in 180ms ease-out;
}
.th-toast.alert { border-left-color: var(--th-red); }
.th-toast.warn  { border-left-color: var(--th-bright-yellow); }
.th-toast.info  { border-left-color: var(--th-pale-purple); }
.th-toast.geo   { border-left-color: var(--th-bright-orange); }
.th-toast .title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 2px;
}
.th-toast.alert .title { color: var(--th-red); }
.th-toast.warn .title  { color: var(--th-bright-yellow); }
.th-toast.geo .title   { color: var(--th-bright-orange); }
@keyframes th-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.th-drawer-scrim {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
}
.th-drawer {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  right: 0;
  width: 380px;
  background: var(--th-panel);
  border-left: 1px solid var(--th-divider);
  z-index: 41;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-deep);
  animation: th-drawer-in 200ms ease-out;
}
@keyframes th-drawer-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.th-drawer .header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-text-bright);
  height: var(--tabbar-h);
}
.th-drawer .header .clear {
  margin-left: auto;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
}
.th-drawer .header .clear:hover { color: var(--th-red); }
.th-drawer .list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.th-drawer .item {
  display: grid;
  grid-template-columns: 4px 1fr;
  border-bottom: 1px solid var(--th-divider);
}
.th-drawer .item .stripe { background: var(--th-pale-purple); }
.th-drawer .item.alert .stripe { background: var(--th-red); }
.th-drawer .item.warn  .stripe { background: var(--th-bright-yellow); }
.th-drawer .item.geo   .stripe { background: var(--th-bright-orange); }
.th-drawer .item .body { padding: 8px 12px; }
.th-drawer .item .meta {
  display: flex;
  gap: 6px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.th-drawer .item .text { color: var(--th-text-bright); font-size: 0.8125rem; }
.th-drawer .item .meta .source {
  color: var(--th-pale-purple);
  font-weight: 600;
}
.th-toast .title .th-toast-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  margin-left: 4px;
}

/* notify-by-feature.md §8 — drawer source-filter chips */
.th-drawer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-bg-deep, rgba(0,0,0,0.2));
}
.th-drawer-chip {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.th-drawer-chip:hover  { color: var(--th-text-bright); border-color: var(--th-pale-purple); }
.th-drawer-chip.active { color: var(--th-text-bright); border-color: var(--th-pale-purple); background: rgba(168, 121, 211, 0.15); }
.th-drawer-chip.empty  { opacity: 0.45; }
.th-drawer-chip .cnt {
  font-weight: 700;
  color: var(--th-pale-purple);
}

/* ---------- Channel mute bell (notify-by-feature.md §6) ---------- */
.th-channel .ch-mute-btn {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
}
.th-channel .ch-mute-btn:hover { color: var(--th-text-bright); background: var(--th-hover); }

/* ---------- Notification preferences modal (notify-by-feature.md §6) ---------- */
.th-modal.notify-prefs { width: min(640px, 92vw); max-width: 640px; }
.notify-prefs h2 { margin-top: 0; }
.notify-prefs-masters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.notify-prefs-master {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.notify-prefs-master input[type=checkbox] { margin-top: 3px; }
.notify-prefs-master-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-bright);
}
.notify-prefs-master-hint {
  font-size: 0.75rem;
  color: var(--th-text-grey);
  margin-top: 2px;
}
.notify-prefs-section { margin-top: 16px; }
.notify-prefs-section-head {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  margin-bottom: 8px;
}
.notify-prefs-hint {
  font-size: 0.75rem;
  color: var(--th-text-grey);
  margin-bottom: 8px;
}
.notify-prefs-grid { display: flex; flex-direction: column; gap: 4px; }
.notify-prefs-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
}
.notify-prefs-row:hover { background: rgba(255,255,255,0.03); }
.notify-prefs-header { color: var(--th-text-grey); }
.notify-prefs-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-bright);
}
.notify-prefs-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  cursor: pointer;
}
.notify-prefs-cell-header {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
}
.notify-prefs-rooms {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notify-prefs-room-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
}
.notify-prefs-room-jid {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
}
.notify-prefs-room-state {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-pale-purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.notify-prefs-room-reset {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.notify-prefs-room-reset:hover { color: var(--th-text-bright); border-color: var(--th-pale-purple); }

/* ---------- Modal ---------- */
.th-modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--th-scrim);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-modal {
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 4px;
  padding: 22px 24px;
  box-shadow: var(--shadow-deep);
  min-width: 320px;
  max-width: 480px;
  /* Never let a tall modal (e.g. a kind with many attributes) run off
     the top/bottom of the viewport — the scrim centres it, so cap the
     height and scroll the body internally instead. */
  max-height: 90vh;
  overflow-y: auto;
}
/* Edit-info modal: when it surfaces the attributes grid it needs more
   horizontal room so the kind-form's two-column layout reads compactly
   instead of wrapping into a thin, tall column. Identity-only HEROs
   (no attributes section) keep the snug default width. */
.th-modal.hero-edit-info { width: 560px; max-width: 94vw; }
.th-modal.hero-edit-info.wide { width: 760px; max-width: 94vw; }
/* Attributes section in the edit modal — a titled, bordered panel
   (accent-grey header band over a padded body) so the generated
   widgets read as a grouped form rather than free-floating fields. */
.hero-edit-attrs {
  margin-top: 16px;
  border: 1px solid var(--th-border);
  border-radius: 4px;
  overflow: hidden;
}
/* kind-form widgets: keep the value text at the same scale as the
   0.625rem uppercase labels above them — the global input rule's
   inherited size + 8px/10px padding made values read oversized and
   "indented" relative to their labels. */
.kind-form-field input,
.kind-form-field textarea,
.kind-form-field select {
  font-size: 0.75rem;
  padding: 5px 8px;
}
.hero-edit-attrs > .panel-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 6px 10px;
  background: var(--th-bg-2);
  border-bottom: 1px solid var(--th-border);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
}
.hero-edit-attrs-body { padding: 4px 12px 12px; }
.hero-edit-attrs-note {
  margin-top: 10px;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
}
.hero-edit-attrs-warn {
  margin-top: 6px;
  font-size: 0.6875rem;
  color: var(--th-bright-yellow);
  font-family: var(--font-mono);
}
.th-modal h2 {
  margin: 0 0 10px;
  color: var(--th-text-bright);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.th-modal .actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.th-modal .actions button {
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-modal .actions button:hover { background: var(--th-steel-blue-2); }
.th-modal .actions button.ghost {
  background: transparent;
  color: var(--th-text-grey);
}

/* ---------- HERO room ---------------------------------------------------- */
.th-hero {
  display: grid;
  grid-template-columns: 220px 320px 1fr;
  height: 100%;
  background: var(--th-bg);
}
.th-hero .hero-kinds,
.th-hero .hero-list,
.th-hero .hero-detail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--th-border);
  overflow: hidden;
}
.th-hero .hero-detail { border-right: 0; }
.th-hero .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  border-bottom: 1px solid var(--th-border);
  gap: 6px;
}
.th-hero .panel-body { flex: 1; overflow-y: auto; padding: 6px; }
/* Detail pane: one shared left edge. Every block (head, description,
   subheads, tables) sits flush against the pane padding — no
   per-block side margins, so nothing reads as randomly indented. */
.th-hero .hero-detail .panel-body { padding: 8px 12px; }
.th-hero .hero-detail .hero-empty { padding: 6px 0; }
.th-hero .panel-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  margin: 14px 0 4px;
}
.th-hero .hero-empty {
  padding: 14px;
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  line-height: 1.5;
}
.hero-action {
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  padding: 3px 10px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.hero-action:hover { background: var(--th-steel-blue-2); }
.hero-action:disabled {
  background: var(--th-bg-2);
  color: var(--th-text-grey);
  cursor: not-allowed;
}
.hero-action.small { padding: 2px 6px; font-size: 0.5625rem; }
.hero-action.danger { background: var(--th-red, #c4564b); }

.hero-kind-row, .hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  gap: 6px;
}
.hero-kind-row:hover, .hero-row:hover { background: var(--th-bg-2); }
.hero-kind-row.active, .hero-row.active {
  background: var(--th-bg-2);
  border-left-color: var(--th-bright-orange);
}
.hero-kind-row.subbed { border-left-color: var(--th-steel-blue-2); }
.hero-kind-main, .hero-row-main { flex: 1; min-width: 0; }
.hero-kind-name, .hero-row-name {
  color: var(--th-text-bright);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-kind-meta, .hero-row-meta {
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  margin-top: 2px;
}
.hero-kind-live { color: var(--th-bright-orange); font-size: 0.5625rem; }
.hero-row.retired { opacity: 0.5; text-decoration: line-through; }
.hero-row.archived { opacity: 0.7; }
.hero-admin-lock { color: var(--th-bright-yellow); font-size: 0.625rem; }

/* Catalog kinds rail — per-category section header. */
.hero-kind-cat { margin-bottom: 4px; }
.hero-kind-cat-label {
  /* inline-style on element provides most of the look; this gives us
     hover affordance and divider consistency. */
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 2px;
}

/* Kind-info chip + inline expander on the catalog row. */
.hero-kind-row-wrap { display: flex; flex-direction: column; }
.hero-kind-info {
  width: 16px; height: 16px;
  padding: 0;
  margin-left: 4px;
  border: 1px solid var(--th-border);
  border-radius: 50%;
  background: transparent;
  color: var(--th-text-grey);
  font-size: 0.5625rem;
  font-family: var(--font-mono);
  font-style: italic;
  cursor: pointer;
  line-height: 1;
}
.hero-kind-info:hover {
  background: var(--th-bg-2);
  color: var(--th-text-bright);
  border-color: var(--th-steel-blue-2);
}
.hero-kind-info-pane {
  background: var(--th-bg-1, rgba(0,0,0,0.2));
  border-left: 2px solid var(--th-steel-blue-2);
  padding: 8px 10px;
  font-size: 0.6875rem;
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-kind-info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
}
.hero-kind-info-row + .hero-kind-info-row {
  border-top: 1px dashed var(--th-border);
  padding-top: 6px;
}
.hero-kind-info-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.hero-kind-info-name { color: var(--th-text-bright); font-weight: 500; }
.hero-kind-info-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-pale-purple);
}
.hero-kind-info-cat,
.hero-kind-info-icon,
.hero-kind-info-since {
  font-size: 0.5625rem;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--th-bg-2);
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-kind-info-since { color: var(--th-bright-yellow); }
.hero-kind-info-desc { color: var(--th-text-grey); }
.hero-kind-info-posture {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.hero-kind-info-doctrine a {
  font-size: 0.625rem;
  color: var(--th-steel-blue-2);
  text-decoration: none;
}
.hero-kind-info-doctrine a:hover { color: var(--th-bright-orange); }
.hero-kind-info-attrs-head {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 4px;
}
.hero-kind-info-attrs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hero-kind-info-attr {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 6px;
  background: var(--th-bg-2);
  border-radius: 2px;
  color: var(--th-text-bright);
}
.hero-kind-info-attr-type {
  margin-left: 4px;
  color: var(--th-text-grey);
}
.hero-kind-info-attr-req {
  margin-left: 2px;
  color: var(--th-red, #c4564b);
}
.hero-kind-info-actions { margin-top: 2px; }

/* Members / Linked / Lineage panels (Phase 4) — the rows themselves
   are .hero-rel-table rows sharing the attributes-table skin. */
.hero-members, .hero-linked, .hero-lineage {
  margin-top: 10px;
}

/* Kinds-help modal (Phase 4 §7.5). */
.kinds-help-modal {
  font-size: 0.75rem;
}
.kinds-help-head {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--th-border);
  margin-bottom: 10px;
}
.kinds-help-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.kinds-help-filter-row input,
.kinds-help-filter-row select {
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.kinds-help-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}
.kinds-help-foot {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--th-border);
  font-size: 0.625rem;
  font-family: var(--font-mono);
  color: var(--th-text-grey);
}
.kinds-help-cat { margin-bottom: 14px; }
.kinds-help-cat-head {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 2px;
  margin-bottom: 6px;
}
.kinds-help-card {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--th-bg-1, rgba(0,0,0,0.15));
  border-left: 2px solid var(--th-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kinds-help-card.focused {
  border-left-color: var(--th-bright-orange);
  background: var(--th-bg-2);
}
.kinds-help-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.kinds-help-card-label {
  color: var(--th-text-bright);
  font-weight: 500;
}
.kinds-help-card-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-pale-purple);
}
.kinds-help-card-desc {
  color: var(--th-text-grey);
  font-size: 0.6875rem;
}
.kinds-help-row {
  display: flex;
  gap: 8px;
  font-size: 0.6875rem;
  align-items: flex-start;
}
.kinds-help-row.kinds-help-attrs,
.kinds-help-row.kinds-help-refs {
  display: block;
}
.kinds-help-row-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  min-width: 96px;
  flex-shrink: 0;
}
.kinds-help-row-body { color: var(--th-text-bright); }
.kinds-help-row-body.mono { font-family: var(--font-mono); }
.kinds-help-attrs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.kinds-help-attr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.kinds-help-attr-values {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.kinds-help-attr-desc {
  width: 100%;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  margin-left: 6px;
}
.kinds-help-ref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.kinds-help-ref-card,
.kinds-help-ref-required,
.kinds-help-ref-substrate {
  font-size: 0.5625rem;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--th-bg-2);
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kinds-help-ref-required { color: var(--th-red, #c4564b); }
.kinds-help-ref-substrate { color: var(--th-pale-purple); }
.kinds-help-ref-kinds {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-bright);
}
.kinds-help-ref-desc {
  width: 100%;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  margin-left: 12px;
}

/* Phase 5 — locally-edited badges on the detail head and the
   Attributes subhead. Surfaces in-flight attribute edits that
   haven't reached the server (Hoot's hero-set-attrs ICD pending). */
.hero-detail-edited-badge,
.hero-attrs-local-badge {
  font-size: 0.5625rem;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--th-bg-2);
  color: var(--th-bright-yellow);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
}

/* Specialized panels (Phase 4.5) — disposition row, F3EA ribbon, chips. */
.hero-disposition {
  margin: 6px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-disposition-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hero-f3ea-ribbon {
  display: flex;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.hero-f3ea-ribbon-stop {
  flex: 1;
  padding: 3px 6px;
  text-align: center;
  background: var(--th-bg-2);
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
}
.hero-f3ea-ribbon-stop.active {
  color: var(--th-text-bright);
  background: var(--th-bg-1, rgba(0,0,0,0.2));
  border-bottom-color: var(--th-bright-orange);
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  border: 1px solid var(--th-border);
  border-radius: 2px;
  overflow: hidden;
  font-family: var(--font-mono);
}
.hero-chip-label {
  padding: 1px 5px;
  background: var(--th-bg-2);
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-chip-value {
  padding: 1px 6px;
  color: var(--th-text-bright);
}
/* Disposition chip color accents — keyed on attribute value. */
.hero-chip.pri-critical .hero-chip-value  { color: var(--th-red, #c4564b); }
.hero-chip.pri-high     .hero-chip-value  { color: var(--th-bright-orange); }
.hero-chip.pri-medium   .hero-chip-value  { color: var(--th-bright-yellow); }
.hero-chip.pri-low      .hero-chip-value  { color: var(--th-text-grey); }
.hero-chip.host-hostile         .hero-chip-value { color: var(--th-red, #c4564b); }
.hero-chip.host-hostile-suspect .hero-chip-value { color: var(--th-bright-orange); }
.hero-chip.host-friendly        .hero-chip-value { color: var(--th-steel-blue-2); }
.hero-chip.host-neutral         .hero-chip-value { color: var(--th-bright-yellow); }
.hero-chip.host-unknown         .hero-chip-value { color: var(--th-text-grey); }
.hero-chip[class*="intent-"] .hero-chip-value { color: var(--th-pale-purple); }

/* asset/cop panel — Open COP button row. */
.hero-cop-jump {
  margin: 8px 0;
}
.hero-cop-jump-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* operation / mission Children rail — re-uses members styling but
   labelled differently. The members-panel's own subhead is hidden
   when wrapped in .hero-children so our outer label is the one
   that shows. */
.hero-children > .hero-members > .panel-subhead { display: none; }
.hero-children > .panel-subhead { margin-bottom: 4px; }

.hero-state-badge {
  font-size: 0.5625rem;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--th-bg-2);
  color: var(--th-text-grey);
}
.hero-state-badge.state-active   { background: var(--th-steel-blue);   color: var(--th-text-bright); }
.hero-state-badge.state-draft    { background: var(--th-bg-2);          color: var(--th-text-grey); }
.hero-state-badge.state-archived { background: var(--th-bg-2);          color: var(--th-text-grey); opacity: 0.7; }
.hero-state-badge.state-retired  { background: var(--th-red, #c4564b);  color: var(--th-text-bright); opacity: 0.7; }

.hero-f3ea {
  font-size: 0.5625rem;
  padding: 1px 5px;
  border: 1px solid var(--th-border);
  border-radius: 2px;
  color: var(--th-text-grey);
}
.hero-f3ea.stage-find    { border-color: var(--th-steel-blue-2);  color: var(--th-steel-blue-2); }
.hero-f3ea.stage-fix     { border-color: var(--th-bright-yellow); color: var(--th-bright-yellow); }
.hero-f3ea.stage-finish  { border-color: var(--th-bright-orange); color: var(--th-bright-orange); }
.hero-f3ea.stage-exploit { border-color: var(--th-pale-purple);   color: var(--th-pale-purple); }
.hero-f3ea.stage-analyze { border-color: var(--th-steel-blue);    color: var(--th-steel-blue); }

.hero-posture-chips { display: flex; gap: 2px; }
.hero-pc {
  font-size: 0.5625rem;
  width: 14px;
  text-align: center;
  border-radius: 2px;
  background: var(--th-bg-2);
  color: var(--th-text-grey);
}
.hero-pc.describable  { color: var(--th-steel-blue-2); }
.hero-pc.subscribable { color: var(--th-bright-orange); }
.hero-pc.locatable    { color: var(--th-bright-yellow); }

.hero-detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
/* The canonical id is the head's anchor — same mono size as the
   tables below, bright like a value (ids elsewhere in the pane are
   the muted .hero-ref-id grey; this one is THE record). */
.hero-detail-id { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--th-text-bright); }
.hero-detail-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-pale-purple);
  padding: 1px 5px;
  border: 1px solid var(--th-border);
  border-radius: 2px;
}
.hero-detail-desc {
  margin: 8px 0;
  font-size: 0.75rem;
  color: var(--th-text-bright);
  line-height: 1.5;
}
.hero-detail-owners .hero-owner {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 1px 6px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  border: 1px solid var(--th-border);
  border-radius: 2px;
}

.hero-geo {
  margin-top: 10px;
  padding: 8px;
  background: var(--th-bg-2);
  border-radius: 3px;
}
.hero-geo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-geo-coords { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--th-bright-yellow); }
.hero-geo-via { font-size: 0.5625rem; color: var(--th-text-grey); margin-top: 4px; font-family: var(--font-mono); }

/* Attributes render as a real two-column table — a muted accent-grey
   key column on the left, value on the right, hairline row dividers and
   a hover band so a long attribute set scans as a list, not a run-on
   block of words. Shared by the HERO room detail pane and the navigator
   / edit modals. */
.hero-attr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  border: 1px solid var(--th-border);
  border-radius: 4px;
  overflow: hidden;
}
.hero-attr-table tr { border-bottom: 1px solid var(--th-divider); }
.hero-attr-table tr:last-child { border-bottom: none; }
.hero-attr-table tr:hover td { background: var(--th-bg-1); }
.hero-attr-table td { padding: 6px 10px; vertical-align: top; line-height: 1.45; }
.hero-attr-table td.k {
  color: var(--th-text-grey);
  white-space: nowrap;
  width: 1%;
  background: var(--th-bg-2);
  border-right: 1px solid var(--th-border);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero-attr-table tr:hover td.k { background: var(--th-bg-2); }
.hero-attr-table td.v { color: var(--th-text-bright); word-break: break-all; }
.hero-attr-type { color: var(--th-text-grey); font-size: 0.5625rem; margin-left: 4px; }
.hero-attr-rich { color: var(--th-pale-purple); }

/* Refs / Members / Linked-by / Lineage in the catalog detail pane all
   share the attributes-table skin (.hero-attr-table) plus these row
   affordances: pointer rows, a flex value cell laying out kind chip +
   name + state + drill arrow, and the hover-revealed action cluster
   anchored inside the cell. One table design — the Attributes one. */
.hero-rel-table tr.hero-rel-row { cursor: pointer; }
.hero-rel-table tr.hero-rel-row.ref-static { cursor: default; }
.hero-rel-table tr.hero-rel-row.ref-static:hover td { background: transparent; }
.hero-rel-table tr.hero-rel-row.ref-static:hover td.k { background: var(--th-bg-2); }
.hero-rel-cell {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 16px;
}
.hero-rel-table .hero-ref-name {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  color: var(--th-text-bright);
}
/* Raw ids inside the tables: always the same muted mono, same size
   as every other cell — no more per-panel id styling. */
.hero-rel-table .hero-ref-id {
  font-size: inherit;
  opacity: 1;
  color: var(--th-text-grey);
  white-space: normal;
  word-break: break-all;
}
.hero-rel-table .hero-ref-go { padding-top: 0; }
.hero-rel-empty { color: var(--th-text-grey); }
/* Lineage accents ride on the key cell (the old ladder's border-left). */
.hero-rel-table tr.current td.k   { color: var(--th-bright-orange); }
.hero-rel-table tr.substrate td.k { color: var(--th-pale-purple); }
.hero-rel-table tr.missing td.v   { opacity: 0.7; }
.hero-rel-table .hero-ref-actions {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.hero-rel-table tr.hero-rel-row:hover .hero-ref-actions { display: inline-flex; }

.hero-ref-rel {
  color: var(--th-bright-orange);
  text-transform: uppercase;
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.hero-ref-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-ref-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hero-ref-name {
  color: var(--th-text-bright);
  font-weight: 500;
  font-size: 0.75rem;
  font-family: inherit;
}
.hero-ref-kind-chip {
  display: inline-flex;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  background: var(--th-bg-2, var(--th-panel-2));
  color: var(--th-pale-purple);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-ref-loading {
  color: var(--th-text-grey);
  font-size: 0.5625rem;
  opacity: 0.6;
}
.hero-ref-id {
  color: var(--th-text-grey);
  font-size: 0.5625rem;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-ref-go {
  color: var(--th-bright-orange);
  font-weight: bold;
  padding-top: 2px;
}

/* Hover-revealed edit / delete / copy cluster on every ref row.       */
/* Floats over the right edge so it never disturbs the row's grid      */
/* columns (single-line catalog rows or two-line navigator rows).      */
.hero-ref-row { position: relative; }
.hero-ref-actions {
  position: absolute;
  top: 3px;
  right: 4px;
  display: none;
  gap: 2px;
  align-items: center;
  background: var(--th-bg-2, var(--th-panel-2));
  border-radius: 3px;
  padding: 1px 2px;
}
.hero-ref-row:hover .hero-ref-actions { display: inline-flex; }
.hero-ref-act {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 2px;
}
.hero-ref-act:hover {
  background: var(--th-bg-1, var(--th-panel-1));
  color: var(--th-text-bright);
}

.hero-events .hero-event-row {
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  border-left: 2px solid var(--th-border);
  margin-bottom: 4px;
}
.hero-event-kind   { color: var(--th-bright-orange); text-transform: uppercase; }
.hero-event-ts     { color: var(--th-text-grey); margin-left: 8px; }
.hero-event-author { color: var(--th-text-grey); }
.hero-event-title  { color: var(--th-text-bright); margin-top: 2px; }
.hero-event-summary { color: var(--th-text-grey); margin-top: 2px; }

.hero-actions { display: flex; gap: 6px; margin-top: 12px; padding: 0 4px; }

/* ---------- Inline hero: chat card --------------------------------------- */
.bb-inline-card.hero {
  border-left-color: var(--th-bright-orange);
}
.bb-inline-card.hero.retired  { opacity: 0.5; text-decoration: line-through; }
.bb-inline-card.hero.archived { opacity: 0.7; }
.bb-inline-card.hero .bb-inline-card-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  margin-top: 4px;
}

/* ---------- HERO channel attachment tile --------------------------------- */
.th-channel .ch-tile.kind-hero {
  border-left-color: var(--th-bright-orange);
}
.th-channel .ch-tile.kind-hero .ch-tile-kind {
  color: var(--th-bright-orange);
}
.ch-hero-cop {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.5625rem;
  background: var(--th-steel-blue);
  color: var(--th-text-bright);
  border-radius: 2px;
}
.ch-hero-cop:hover { background: var(--th-bright-orange); }

/* ---------- HERO navigator modal ----------------------------------------- */
/* The navigator is a data-browsing surface, not a confirm dialog —
   give it ~90% of the tab window (override the base .th-modal 480px
   cap) so the refs / attributes / events panes have room to breathe.
   The scrim centres it; the body scrolls internally. */
.th-modal.hero-navigator {
  width: 90vw;
  max-width: 90vw;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.th-modal.hero-navigator .hero-nav-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.hero-nav-back {
  background: var(--th-bg-2);
  color: var(--th-text-bright);
  padding: 2px 10px;
  border-radius: 2px;
  font-size: 0.75rem;
}
.hero-nav-back:disabled { opacity: 0.4; cursor: not-allowed; }
.hero-nav-trail {
  flex: 1;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.hero-nav-crumb {
  padding: 2px 6px;
  background: var(--th-bg-2);
  border-radius: 2px;
  color: var(--th-text-grey);
  cursor: pointer;
}
.hero-nav-crumb.active { color: var(--th-bright-orange); }
.hero-nav-crumb::after { content: " \203A"; color: var(--th-text-grey); }
.hero-nav-crumb:last-child::after { content: ""; }

.hero-nav-detail { overflow-y: auto; flex: 1; padding-right: 4px; }
.hero-nav-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.hero-nav-id { font-family: var(--font-mono); font-size: 0.625rem; color: var(--th-text-grey); }
.hero-nav-name { font-size: 0.875rem; color: var(--th-text-bright); }
.hero-nav-meta { display: flex; gap: 6px; align-items: center; }
.hero-nav-desc { font-size: 0.75rem; color: var(--th-text-bright); line-height: 1.5; margin-bottom: 8px; }
.hero-nav-geo {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--th-bg-2);
  border-radius: 3px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-bright-yellow);
}
.hero-nav-empty {
  padding: 30px;
  text-align: center;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* Identity header — id / name / kind+state — sits above the section
   cards with a divider so the snapshot reads top-down. */
.hero-navigator .hero-nav-head {
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--th-border);
}
.hero-navigator .hero-nav-name { font-size: 0.875rem; font-weight: 600; }

/* Refs / Attributes / Events each become a titled, bordered card: an
   accent-grey header band (the .panel-subhead) over a flush body, so
   the panes read as organized tables rather than a condensed wall of
   words. */
.hero-navigator .hero-nav-refs,
.hero-navigator .hero-nav-attrs,
.hero-navigator .hero-nav-events {
  margin-top: 16px;
  border: 1px solid var(--th-border);
  border-radius: 4px;
  overflow: hidden;
}
.hero-navigator .panel-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 6px 10px;
  background: var(--th-bg-2);
  border-bottom: 1px solid var(--th-border);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
}
/* The attribute table already carries its own border for the room
   pane; inside the bordered card it sits flush, so drop the duplicate. */
.hero-navigator .hero-nav-attrs .hero-attr-table { border: none; border-radius: 0; }

/* Navigator ref rows: a fixed rel pill column + the two-line body
   (name/kind/↗ over the muted id). Hairline dividers + a hover band
   give the list a table rhythm. The HERO-room catalog rows keep their
   own 3-column grid (.hero-refs .hero-ref-row) above. */
.hero-nav-refs .hero-ref-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: start;
  gap: 10px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
  border-bottom: 1px solid var(--th-divider);
}
.hero-nav-refs .hero-ref-row:last-child { border-bottom: none; }
.hero-nav-refs .hero-ref-row:hover { background: var(--th-bg-1); }
.hero-nav-refs .hero-ref-row.ref-static { cursor: default; }
.hero-nav-refs .hero-ref-row.ref-static:hover { background: transparent; }

/* Event rows flush inside their card — drop the standalone left rail
   and bottom margin, use dividers instead. */
.hero-nav-events .hero-event-row {
  border-left: none;
  border-bottom: 1px solid var(--th-divider);
  margin-bottom: 0;
  padding: 6px 10px;
}
.hero-nav-events .hero-event-row:last-child { border-bottom: none; }

.hero-posture-cb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
}

/* ---------- Mission Catalog channel attachment tile --------------------- */
/* See docs/feature/hero-mix.md. The Mission Catalog wraps one umbrella   */
/* HERO and surfaces every relevant member as a grouped row.              */
.th-channel .ch-tile.kind-mission-catalog {
  border-left-color: var(--th-pale-purple);
}
.th-channel .ch-tile.kind-mission-catalog .ch-tile-kind {
  color: var(--th-pale-purple);
}
.th-channel .ch-mc-kind-tail {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  opacity: 0.8;
}
.th-channel .ch-mc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.th-channel .ch-mc-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.th-channel .ch-mc-group-head {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px 4px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--th-text-grey);
  border-bottom: 1px dashed var(--th-border);
}
.th-channel .ch-mc-group-name { color: var(--th-pale-purple); }
.th-channel .ch-mc-group-count { opacity: 0.7; }
.th-channel .ch-mc-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 4px;
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  cursor: pointer;
  border-radius: 2px;
}
.th-channel .ch-mc-row:hover {
  background: var(--th-bg-2, var(--th-panel-2));
}
.th-channel .ch-mc-row.off-template {
  opacity: 0.7;
  font-style: italic;
}
.th-channel .ch-mc-icon {
  width: 14px;
  text-align: center;
  color: var(--th-pale-purple);
  font-family: var(--font-mono);
}
.th-channel .ch-mc-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-channel .ch-mc-kind {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  opacity: 0.7;
}
.th-channel .ch-mc-stage {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-bright-yellow);
  letter-spacing: -1px;
}
.th-channel .ch-mc-chip {
  display: inline-flex;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  background: var(--th-bg-2, var(--th-panel-2));
  color: var(--th-text-grey);
  border-radius: 2px;
}
.th-channel .ch-mc-rel {
  display: inline-flex;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  background: var(--th-pale-purple);
  color: var(--th-black);
  border-radius: 2px;
  opacity: 0.85;
}
.th-channel .ch-mc-geo {
  font-size: 0.625rem;
  opacity: 0.85;
}
.th-channel .ch-mc-state {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--th-text-grey);
}
.th-channel .ch-mc-state.retired,
.th-channel .ch-mc-state.archived {
  color: var(--th-red);
  opacity: 0.85;
}
.th-channel .ch-mc-hint {
  margin-top: 4px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  font-style: italic;
}

/* ---------- Kanban "From Mission Catalog" overlay column ---------------- */
/* See docs/feature/hero-mix.md cross-attachment inference. The column     */
/* uses the same pale-purple accent the mission-catalog tile uses, so      */
/* operators see at a glance that these cards come from a different        */
/* substrate than the live kanban tasks.                                   */
.th-kanban .kb-column.kb-mc-column {
  /* Leftmost column — the heavier separator divides it from the phase
     columns to its right (these are potential taskings, not done work). */
  border-right: 2px solid var(--th-border);
  background: var(--th-panel-2);
}
.th-kanban .kb-column.kb-mc-column .kb-column-header {
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-kanban .kb-mc-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.th-kanban .kb-mc-group-head {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 2px 2px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--th-text-grey);
  letter-spacing: 0.05em;
  border-bottom: 1px dashed var(--th-divider);
}
.th-kanban .kb-mc-group-count { opacity: 0.7; }
.th-kanban .kb-mc-card {
  cursor: grab;
}
.th-kanban .kb-mc-card:active {
  cursor: grabbing;
}
.th-kanban .kb-mc-card.off-template {
  opacity: 0.7;
  font-style: italic;
}
.th-kanban .kb-mc-card-head {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 0.5625rem;
  font-family: var(--font-mono);
  color: var(--th-text-grey);
  margin-bottom: 2px;
}
.th-kanban .kb-mc-card-icon {
  color: var(--th-text-grey);
}
.th-kanban .kb-mc-card-rel {
  display: inline-flex;
  padding: 0 5px;
  font-size: 0.5625rem;
  text-transform: uppercase;
  background: var(--th-bg-2);
  color: var(--th-text-bright);
  border-radius: 2px;
  opacity: 0.85;
}
.th-kanban .kb-mc-card-state {
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--th-red);
  opacity: 0.85;
}
.th-kanban .kb-mc-card-kind {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  margin-top: 2px;
  opacity: 0.8;
}

/* ------------------------------------------------------------
 * Tasking projection (MR-001) — projected cards + kind columns
 * ------------------------------------------------------------ */

/* A projected card is a view of a HERO; the accent distinguishes it
 * from operator-authored tasks (which keep the priority accent). */
.th-kanban .kb-projected-card {
  border-left-color: var(--th-cyan, #3fb6c0);
}
.th-kanban .kb-projected-card.kb-proj-pending {
  opacity: 0.55;
}
.th-kanban .kb-proj-badge {
  display: inline-flex;
  padding: 0 5px;
  font-size: 0.5625rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  background: var(--th-cyan, #3fb6c0);
  color: var(--th-black);
  border-radius: 2px;
  opacity: 0.9;
}

/* Kind-spec (lifecycle) columns vs operator columns. */
.th-kanban .kb-column-header.kb-kind-column .kb-column-label {
  color: var(--th-cyan, #3fb6c0);
}
.th-kanban .kb-column-terminal {
  margin-left: 4px;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  opacity: 0.8;
}
/* Divider between lifecycle columns and operator/housekeeping ones. */
.th-kanban .kb-column-divider {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 0 6px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--th-border, rgba(255, 255, 255, 0.18)),
    transparent
  );
}

/* ============================================================
 * Collab-edit editor surface — CodeMirror 6 + Yjs + markdown
 * ============================================================ */

.th-collab {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--th-divider);
  border-radius: 4px;
  background: var(--th-panel);
  margin-top: 6px;
}

/* Peer strip — avatars of every operator currently in the session */
.th-collab-peers {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--th-divider);
  flex-wrap: wrap;
}
.th-collab-peer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--th-divider);
  border-radius: 10px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--th-text-bright);
  background: rgba(127, 127, 127, 0.04);
  transition: opacity 0.2s ease;
}
.th-collab-peer-self {
  border-color: var(--th-text-bright);
  background: rgba(127, 127, 127, 0.10);
}
.th-collab-peer-blur { opacity: 0.45; }
.th-collab-peer-typing { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.40); }
.th-collab-peer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.th-collab-peer-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}

/* Toolbar — slim row of formatting commands above the editor */
.th-collab-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--th-divider);
  flex-wrap: wrap;
  background: rgba(127, 127, 127, 0.04);
}
.th-collab-tb-btn {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 2px 8px;
  border: 1px solid var(--th-divider);
  background: var(--th-panel);
  color: var(--th-text-bright);
  border-radius: 2px;
  cursor: pointer;
}
.th-collab-tb-btn:hover {
  border-color: var(--th-text-bright);
  background: rgba(127, 127, 127, 0.10);
}
.th-collab-tb-sep {
  width: 1px;
  height: 16px;
  background: var(--th-divider);
  margin: 0 4px;
}
.th-collab-tb-spacer { flex: 1; }
.th-collab-tb-h, .th-collab-tb-preview {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: var(--th-panel);
  color: var(--th-text-bright);
  border: 1px solid var(--th-divider);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Body — edit pane, preview pane, or split. The note edit modal is
   wide and intended to be mostly editor real estate; we set a tall
   floor so a short note still gets a usable canvas, and a high
   ceiling so a long note gets generous vertical room. */
.th-collab-body {
  display: flex;
  gap: 8px;
  min-height: 60vh;
  max-height: 70vh;
}
.th-collab-body-split  .th-collab-edit-col,
.th-collab-body-split  .th-collab-preview-col { flex: 1; min-width: 0; }
.th-collab-body-edit    .th-collab-edit-col   { flex: 1; min-width: 0; }
.th-collab-body-preview .th-collab-preview-col { flex: 1; min-width: 0; }

.th-collab-edit-col, .th-collab-preview-col {
  overflow: auto;
  padding: 8px;
}
.th-collab-edit-col {
  border-right: 1px solid var(--th-divider);
}

/* CodeMirror styling overrides — keep it dark-themed, terminal-flavored */
.th-collab-editor-host { height: 100%; }
.th-collab-editor-host .cm-editor {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: transparent;
  color: var(--th-text-bright);
}
.th-collab-editor-host .cm-content {
  caret-color: var(--th-bright-orange);
  padding: 4px 0;
}
.th-collab-editor-host .cm-focused { outline: none; }
.th-collab-editor-host .cm-scroller { line-height: 1.45; }
.th-collab-editor-host .cm-line { padding: 0 4px; }
.th-collab-editor-host .cm-activeLine {
  background: rgba(127, 127, 127, 0.06);
}
.th-collab-editor-host .cm-selectionBackground,
.th-collab-editor-host .cm-content ::selection {
  background: rgba(124, 58, 237, 0.30) !important;
}

/* y-codemirror.next remote-cursor decorations. The package emits
   `.ySelectionCaret` + `.ySelectionCaretDot` markers per peer; we
   restyle to match our palette. */
.th-collab-editor-host .ySelectionCaret {
  border-left: 2px solid;
  border-right: none;
  margin-right: -2px;
  margin-left: -1px;
  position: relative;
}
.th-collab-editor-host .ySelectionCaretDot {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: -3px;
  left: -4px;
}
.th-collab-editor-host .ySelectionInfo {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 0 4px;
  background: currentColor;
  color: var(--th-bg);
  position: absolute;
  top: -14px;
  left: -2px;
  border-radius: 2px 2px 2px 0;
  white-space: nowrap;
}
.th-collab-editor-host .ySelection {
  opacity: 0.30;
}

/* Preview pane — reuses .th-markdown styles, just constrains scrolling */
.th-collab-preview {
  font-size: 0.8125rem;
}

.th-collab-loading {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-grey);
  font-style: italic;
}

/* =============================================================
 * CAL — Calendar room (treehouse.rooms.cal)
 *
 * Layout mirrors the COP: thin control bar on top, palette on
 * the left, grid/agenda in the middle, info panel on the right.
 * ============================================================= */

.cal-room {
  display: grid;
  grid-template-rows: 36px 1fr;
  height: 100%;
  background: var(--th-bg);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.cal-room.armed { cursor: crosshair; }

.cal-control-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-bg-elevated, #181818);
}

.cal-view-toggle { display: flex; gap: 4px; }
.cal-view-btn {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.cal-view-btn:hover {
  border-color: var(--th-pale-purple);
  color: var(--th-text-bright);
}
.cal-view-btn.active {
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}

.cal-anchor-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cal-nav-btn {
  background: var(--th-bg-elevated, #181818);
  border: 1px solid var(--th-pale-purple);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cal-nav-btn:hover {
  background: var(--th-hover);
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}
.cal-nav-btn.today {
  background: rgba(240, 196, 25, 0.10);
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}
.cal-nav-btn.today.active {
  background: var(--th-bright-yellow);
  color: var(--th-bg, #000);
}
.cal-anchor-label {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  margin-left: 6px;
}

.cal-room-cal-id {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  letter-spacing: 0.06em;
}

.cal-body {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  min-height: 0;
}

/* ---------- Tool palette (left rail) ---------- */
.cal-tool-palette {
  border-right: 1px solid var(--th-border);
  padding: 10px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cal-tool-head {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-text-grey);
}
.cal-tool-group { display: flex; flex-direction: column; gap: 4px; }
.cal-tool-group-head {
  font-size: 0.625rem;
  color: var(--th-text-grey);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cal-tool-group-tiles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-tool-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
}
.cal-tool-tile:hover {
  background: var(--th-hover);
  border-color: var(--th-pale-purple);
}
.cal-tool-tile.armed {
  background: var(--th-hover);
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}
.cal-tool-tile-label {
  min-width: 32px;
  font-weight: bold;
}
.cal-tool-tile-long {
  color: var(--th-text-grey);
  font-size: 0.625rem;
}
.cal-tool-armed-hint {
  font-size: 0.625rem;
  color: var(--th-bright-yellow);
  background: rgba(255, 215, 0, 0.06);
  padding: 6px 8px;
  border-radius: 3px;
}

/* ---------- Main pane ---------- */
.cal-main {
  min-width: 0;
  overflow: auto;
  background: var(--th-bg);
}

/* ---------- Week view ---------- */
.cal-week {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(120px, 1fr));
  min-height: 100%;
}
.cal-week-rail {
  border-right: 1px solid var(--th-border);
  background: var(--th-bg-elevated, #181818);
}
.cal-week-rail-header {
  height: 32px;
  border-bottom: 1px solid var(--th-border);
}
.cal-week-rail-cell {
  border-bottom: 1px dashed var(--th-border);
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  padding: 2px 4px;
  letter-spacing: 0.04em;
}
.cal-week-col {
  border-right: 1px solid var(--th-border);
  display: flex;
  flex-direction: column;
}
.cal-week-col-header {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--th-border);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
  background: var(--th-bg-elevated, #181818);
}
.cal-week-col-body {
  position: relative;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      var(--th-border) 27px,
      var(--th-border) 28px);
  cursor: pointer;
}
.cal-week-col-body:hover {
  background-color: rgba(255, 255, 255, 0.01);
}

/* Today's column reads slightly brighter. */
.cal-week-col.today .cal-week-col-body {
  background-color: rgba(240, 196, 25, 0.03);
}
.cal-week-col-header.today {
  color: var(--th-bright-yellow);
  border-bottom-color: var(--th-bright-yellow);
}

/* Current-hour ribbon — subtle band the eye can follow across all
   day columns when scanning the grid. */
.cal-now-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(240, 196, 25, 0.06);
  border-top: 1px dashed rgba(240, 196, 25, 0.25);
  border-bottom: 1px dashed rgba(240, 196, 25, 0.25);
  pointer-events: none;
  z-index: 1;
}

/* Sharp "now" line — only drawn on today's column at the current
   minute. Sits above events so it's always visible. */
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--th-bright-yellow);
  box-shadow: 0 0 6px rgba(240, 196, 25, 0.6);
  pointer-events: none;
  z-index: 3;
}
.cal-now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--th-bright-yellow);
}

.cal-event {
  position: absolute;
  left: 2px;
  right: 2px;
  border: 1px solid var(--th-pale-purple);
  background: rgba(154, 129, 209, 0.18);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.625rem;
  overflow: hidden;
  cursor: pointer;
}
.cal-event:hover {
  background: rgba(154, 129, 209, 0.32);
}
.cal-event.confirmed { border-color: var(--th-bright-yellow); }
.cal-event.occurred  { opacity: 0.55; }
.cal-event.cancelled { opacity: 0.4; text-decoration: line-through; }
.cal-event.missed    { border-color: var(--th-red, #c4564b); background: rgba(196, 86, 75, 0.18); }
.cal-event.tentative { border-style: dashed; }
.cal-event.chevron   {
  border-color: var(--th-bright-yellow);
  background: rgba(255, 215, 0, 0.12);
}

.cal-event-label {
  font-weight: bold;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.cal-event-title {
  color: var(--th-text-bright);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cal-event-time {
  font-size: 0.5625rem;
  color: var(--th-text-grey);
}

/* ---------- Agenda view ---------- */
.cal-agenda {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cal-agenda-empty {
  padding: 24px;
  color: var(--th-text-grey);
  font-style: italic;
  font-size: 0.75rem;
}
.cal-agenda-day-header {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  text-transform: uppercase;
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 2px;
  margin-bottom: 4px;
}
.cal-agenda-row {
  display: grid;
  grid-template-columns: 110px 50px 1fr;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  align-items: baseline;
}
.cal-agenda-row:hover { background: var(--th-hover); }
.cal-agenda-row.cancelled { opacity: 0.4; text-decoration: line-through; }
.cal-agenda-row.occurred  { opacity: 0.55; }
.cal-agenda-row.missed    { color: var(--th-red, #c4564b); }
.cal-agenda-time  { font-size: 0.6875rem; color: var(--th-text-grey); }
.cal-agenda-kind  { font-size: 0.625rem; color: var(--th-pale-purple); font-weight: bold; }
.cal-agenda-title { color: var(--th-text-bright); font-size: 0.75rem; }

/* ---------- Info panel (right rail) ---------- */
.cal-info-panel {
  border-left: 1px solid var(--th-border);
  background: var(--th-bg-elevated, #181818);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cal-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--th-border);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-text-grey);
}
.cal-info-clear {
  background: transparent;
  border: 0;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
}
.cal-info-clear:hover { color: var(--th-bright-yellow); }
.cal-info-body {
  padding: 10px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.6875rem;
}
.cal-info-empty {
  color: var(--th-text-grey);
  font-style: italic;
}
.cal-info-row { display: grid; grid-template-columns: 90px 1fr; gap: 6px; }
.cal-info-key {
  color: var(--th-text-grey);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cal-info-val { color: var(--th-text-bright); word-break: break-word; }
.cal-info-desc {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--th-border);
  color: var(--th-text-bright);
  font-size: 0.6875rem;
  white-space: pre-wrap;
}
.cal-info-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--th-border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cal-info-disp {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--th-border);
}
.cal-info-disp select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* Occurrence marker — fanned-out recurring events read slightly muted */
.cal-event.occurrence       { border-style: dashed; }
.cal-agenda-row.occurrence  { color: var(--th-text-grey); }
.cal-agenda-occurrence-tag {
  margin-left: 4px;
  color: var(--th-pale-purple);
  font-size: 0.625rem;
}

/* RRULE editor — by-day toggle buttons */
.cal-byday-btn {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  cursor: pointer;
  padding: 0;
}
.cal-byday-btn:hover { border-color: var(--th-pale-purple); }
.cal-byday-btn.on {
  background: var(--th-bright-yellow);
  border-color: var(--th-bright-yellow);
  color: var(--th-bg);
}

/* ---------- Calendar container info banner (Phase E) ---------- */
.cal-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-bg-elevated, #181818);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  align-items: center;
}
.cal-banner-name {
  font-size: 0.8125rem;
  color: var(--th-text-bright);
  font-weight: bold;
}
.cal-banner-kind {
  font-weight: normal;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  letter-spacing: 0.08em;
}
.cal-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  grid-column: 1 / -1;
}
.cal-banner-chip {
  font-size: 0.625rem;
  color: var(--th-text-bright);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--th-border);
  padding: 1px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.cal-banner-actions {
  justify-self: end;
}

/* ---------- Overlay events (Phase D) ---------- */
.cal-event.overlay {
  background: repeating-linear-gradient(
    45deg,
    rgba(154, 129, 209, 0.18) 0,
    rgba(154, 129, 209, 0.18) 4px,
    rgba(154, 129, 209, 0.30) 4px,
    rgba(154, 129, 209, 0.30) 8px);
  border-style: dotted;
}
.cal-agenda-row.overlay {
  background: rgba(154, 129, 209, 0.08);
}
.cal-agenda-overlay-tag {
  margin-left: 4px;
  color: var(--th-pale-purple);
  font-size: 0.625rem;
}

/* Overlay picker in the event modal */
.cal-overlay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cal-overlay-chip {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.cal-overlay-chip:hover {
  border-color: var(--th-pale-purple);
}
.cal-overlay-chip.on {
  background: var(--th-pale-purple);
  border-color: var(--th-pale-purple);
  color: var(--th-bg);
}

/* ---------- Shift dispositions (Phase C — cal-view.md §9) ----------
 * Per hero-productivity-icd §4.2 shifts override :event/disposition's
 * vocabulary. The cell color carries the watch state at a glance.
 */
.cal-event.shift-open        { border-color: var(--th-text-grey, #8a8a8a); background: rgba(138, 138, 138, 0.18); }
.cal-event.shift-assigned    { border-color: var(--th-steel-blue-2, #5b8fb9); background: rgba(91, 143, 185, 0.20); }
.cal-event.shift-acked       { border-color: #4caf50; background: rgba(76, 175, 80, 0.20); }
.cal-event.shift-in-progress { border-color: var(--th-bright-yellow, #f0c419); background: rgba(240, 196, 25, 0.22); }
.cal-event.shift-complete    { border-color: #607d8b; background: rgba(96, 125, 139, 0.15); opacity: 0.85; }
.cal-event.shift-handed-over { border-color: #9575cd; background: rgba(149, 117, 205, 0.16); opacity: 0.85; }

.cal-agenda-row.shift-open        { color: var(--th-text-grey); }
.cal-agenda-row.shift-assigned    { color: var(--th-steel-blue-2, #5b8fb9); }
.cal-agenda-row.shift-acked       { color: #4caf50; }
.cal-agenda-row.shift-in-progress { color: var(--th-bright-yellow, #f0c419); font-weight: bold; }
.cal-agenda-row.shift-complete    { opacity: 0.6; }
.cal-agenda-row.shift-handed-over { opacity: 0.65; font-style: italic; }

/* ---------- Shift modal (Phase C) ---------- */
.shift-modal-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--th-border);
}
.shift-modal-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.shift-modal-section-head {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-bright-yellow, #f0c419);
  margin-bottom: 8px;
}
.shift-modal-neighbor-hint {
  font-size: 0.625rem;
  color: var(--th-text-grey);
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--th-pale-purple);
  padding: 4px 8px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
.shift-modal-template {
  margin-top: 10px;
}
.shift-modal-template-body {
  margin-top: 4px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--th-border);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  white-space: pre-wrap;
}

/* ---------- Scheduler reminder (Phase B) ---------- */
.cal-event-bell {
  margin-left: 4px;
  color: var(--th-bright-yellow);
}
.cal-agenda-bell-tag {
  margin-left: 4px;
  color: var(--th-bright-yellow);
  font-size: 0.625rem;
}
.cal-info-reminder {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--th-border);
}
.cal-info-reminder-head {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  margin-bottom: 6px;
}
.cal-info-reminder-job {
  color: var(--th-bright-yellow);
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0.02em;
}
.cal-info-reminder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ---------- Calendar-create modal kind selector (Phase E) ---------- */
.cal-create-kinds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-create-kind-row {
  display: grid;
  grid-template-columns: 18px 100px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.cal-create-kind-row:hover {
  background: var(--th-hover);
}
.cal-create-kind-row.selected {
  border-color: var(--th-bright-yellow);
  background: rgba(255, 215, 0, 0.06);
}
.cal-create-kind-label {
  color: var(--th-text-bright);
  font-weight: bold;
}
.cal-create-kind-desc {
  color: var(--th-text-grey);
  font-size: 0.625rem;
}

/* Attendee suggestion chips below the event modal's attendees field */
.cal-attendee-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cal-attendee-chip {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: 10px;
  cursor: pointer;
}
.cal-attendee-chip:hover {
  border-color: var(--th-bright-yellow);
  color: var(--th-bright-yellow);
}

/* ===========================================================================
   List Room — hero-list.md surface
   =========================================================================== */

.th-list-room {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--th-panel);
  color: var(--th-text);
  font-family: var(--font-mono);
}

.list-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-panel-2);
}
.list-header-titles {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.875rem;
}
.list-header-name {
  color: var(--th-text-bright);
  font-weight: 600;
}
.list-header-kind { color: var(--th-pale-purple); font-size: 0.75rem; }
.list-header-retired { color: var(--th-red, #c4564b); font-size: 0.6875rem; }
.list-header-meta {
  margin-top: 4px;
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.list-header-cust   { color: var(--th-pale-purple); }
.list-header-cadence { font-style: italic; }
.list-header-count  { color: var(--th-text); }
.list-header-channel { margin-left: auto; }
.list-header-back {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.list-header-back:hover {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
.list-header-purpose {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--th-text);
  font-style: italic;
  opacity: 0.85;
}

.list-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(260px, 1fr);
  min-height: 0;
}
.list-body-left,
.list-body-right {
  overflow-y: auto;
  padding: 10px 14px;
}
.list-body-right {
  border-left: 1px solid var(--th-divider);
  background: var(--th-panel-2);
}

.list-items-pane,
.list-members-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-items-group,
.list-members-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.list-items-group-head {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  padding: 2px 0;
  border-bottom: 1px dashed var(--th-divider);
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-items-group-count { opacity: 0.7; }

.list-item-row,
.list-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.75rem;
}
.list-item-row:hover,
.list-member-row:hover {
  background: var(--th-divider);
}
.list-item-row.selected,
.list-member-row.selected {
  background: var(--th-divider);
  outline: 1px solid var(--th-pale-purple);
}
.list-item-row.blocked .list-item-title {
  color: var(--th-bright-yellow);
}
.list-item-glyph {
  width: 14px;
  text-align: center;
  color: var(--th-text-grey);
}
.list-item-glyph.status-done,
.list-item-glyph.status-complete,
.list-item-glyph.status-closed,
.list-item-glyph.status-go,
.list-item-glyph.status-waived { color: var(--th-pale-purple); }
.list-item-glyph.status-blocked { color: var(--th-bright-yellow); }
.list-item-glyph.status-no-go,
.list-item-glyph.status-missing { color: var(--th-red, #c4564b); }
.list-item-title {
  flex: 1;
  color: var(--th-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-assignee,
.list-item-due,
.list-item-priority,
.list-item-blocked-reason {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.list-item-assignee { color: var(--th-pale-purple); }
.list-item-priority.p-critical,
.list-item-priority.p-high { color: var(--th-bright-yellow); }
.list-item-priority.p-catastrophic,
.list-item-priority.p-critical { color: var(--th-red, #c4564b); }
.list-item-blocked-reason {
  font-style: italic;
  opacity: 0.75;
}

.list-member-kind {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  min-width: 80px;
}
.list-member-name {
  flex: 1;
  color: var(--th-text-bright);
}
.list-member-stage,
.list-member-chip,
.list-member-state {
  font-size: 0.625rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--th-divider);
  color: var(--th-text);
}
.list-member-state.retired { color: var(--th-red, #c4564b); }

.list-empty {
  padding: 16px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.5;
}

.list-detail-pane { font-size: 0.75rem; }
.list-detail-empty {
  color: var(--th-text-grey);
  font-style: italic;
  padding: 8px 0;
}
.list-detail-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.list-detail-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--th-text-bright);
}
.list-detail-kind { font-size: 0.6875rem; color: var(--th-pale-purple); }
.list-detail-state {
  font-size: 0.625rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--th-divider);
}
.list-detail-state.retired { color: var(--th-red, #c4564b); }
.list-detail-id {
  margin-bottom: 8px;
  font-size: 0.625rem;
  opacity: 0.7;
}
.list-detail-attrs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.list-detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  padding: 2px 0;
}
.list-detail-key {
  color: var(--th-text-grey);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.list-detail-val {
  color: var(--th-text);
  word-break: break-word;
  white-space: pre-wrap;
}
.list-detail-refs-head {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  margin-top: 6px;
  margin-bottom: 4px;
}
.list-detail-ref {
  display: flex;
  gap: 6px;
  font-size: 0.6875rem;
  padding: 1px 0;
}
.list-detail-ref-rel {
  color: var(--th-pale-purple);
  min-width: 70px;
}
.list-detail-ref-target {
  color: var(--th-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-detail-actions {
  margin-top: 10px;
}
.list-detail-actions button {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.list-detail-actions button:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

.list-add-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--th-divider);
}
.list-add-bar .list-add-row {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.list-add-row {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--th-divider);
}
.list-add-trigger {
  background: transparent;
  border: 1px dashed var(--th-divider);
  color: var(--th-text-grey);
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  width: 100%;
  text-align: left;
}
.list-add-trigger:hover {
  border-color: var(--th-pale-purple);
  color: var(--th-pale-purple);
}
.list-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.list-add-title {
  flex: 1;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  padding: 4px 8px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.list-add-title:focus {
  outline: none;
  border-color: var(--th-pale-purple);
}
.list-add-submit,
.list-add-cancel {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.list-add-submit:hover { border-color: var(--th-pale-purple); color: var(--th-pale-purple); }
.list-add-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.list-add-cancel:hover { border-color: var(--th-red, #c4564b); color: var(--th-red, #c4564b); }

.list-detail-form {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--th-divider);
}

.list-item-glyph {
  cursor: pointer;
  user-select: none;
}
.list-item-glyph:hover {
  color: var(--th-bright-orange);
}

/* Channel rail "+ list" quick-create button — distinct from the
   generic attach "+" so the workflow reads as a single button click. */
.th-channel .ch-rail-new-list {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-pale-purple);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 8px;
  border-radius: 2px;
  cursor: pointer;
  margin-left: auto;
}
.th-channel .ch-rail-new-list:hover {
  border-color: var(--th-pale-purple);
  background: rgba(136, 136, 204, 0.08);
}

/* ===========================================================================
   List Create Modal
   =========================================================================== */

.list-create-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.list-create-category {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
}
.list-create-cat-head {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-pale-purple);
  margin-bottom: 2px;
}
.list-create-kind-row {
  display: grid;
  grid-template-columns: 14px auto;
  grid-template-rows: auto auto;
  gap: 2px 6px;
  padding: 4px 4px 4px 2px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.list-create-kind-row:hover {
  background: var(--th-divider);
}
.list-create-kind-row.selected {
  background: var(--th-divider);
  outline: 1px solid var(--th-pale-purple);
}
.list-create-kind-row input[type="radio"] {
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 3px;
}
.list-create-kind-label {
  color: var(--th-text-bright);
  font-weight: 600;
}
.list-create-kind-desc {
  color: var(--th-text-grey);
  font-size: 0.625rem;
  line-height: 1.3;
}
.list-create-pattern-hint {
  margin-top: 6px;
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  font-style: italic;
}

/* Collab editor inside the list-item detail pane. */
.list-detail-collab {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--th-divider);
}
.list-detail-collab-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-text-grey);
}

.list-header-promote {
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-bright-yellow);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.list-header-promote:hover {
  border-color: var(--th-bright-yellow);
  background: rgba(154, 129, 57, 0.1);
}

.list-member-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.list-member-picker .list-add-title {
  width: 100%;
}
.list-member-picker-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.list-member-picker-empty {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  font-style: italic;
  padding: 6px;
}
.list-member-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.75rem;
}
.list-member-pick-row:hover { background: var(--th-divider); }
.list-member-pick-kind {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  min-width: 80px;
}
.list-member-pick-name {
  flex: 1;
  color: var(--th-text-bright);
}
.list-member-pick-state {
  font-size: 0.625rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--th-divider);
}
.list-member-pick-state.retired { color: var(--th-red, #c4564b); }

/* ------------------------------------------------------------------
   Rich-text message body — formatting produced by the new chat
   markdown renderer (treehouse.chat.markdown). Wire format is
   XEP-0393 + light CommonMark; the renderer maps each construct to
   a `.th-md-*` element. CSS keeps the C5ISR mono palette but adds
   the visual weight Slack-style operators expect (bold heavier,
   code in panel-2 background, quote with left-bar, etc.).

   Scoped to `.ch-msg-body` — the message-body element produced by
   `treehouse.rooms.channel/message-row`, the shared row renderer for
   channels AND `:dm` / `:chat` rooms. (Previously `.msg .body`, the
   bespoke DM markup that has since been folded into `message-row`.)
   ------------------------------------------------------------------ */
.ch-msg-body .th-md-p {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.ch-msg-body .th-md-p + .th-md-p,
.ch-msg-body .th-md-p + .th-md-ul,
.ch-msg-body .th-md-p + .th-md-ol,
.ch-msg-body .th-md-p + .th-md-quote,
.ch-msg-body .th-md-p + .th-md-pre {
  margin-top: 4px;
}
.ch-msg-body strong { font-weight: 700; color: var(--th-text-bright); }
.ch-msg-body em     { font-style: italic; }
.ch-msg-body s      { text-decoration: line-through; opacity: 0.85; }
.ch-msg-body u      { text-decoration: underline; }
.ch-msg-body .th-md-code {
  font-family: var(--font-mono);
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  padding: 0 4px;
  border-radius: 2px;
  font-size: 0.75rem;
}
.ch-msg-body .th-md-pre {
  margin: 4px 0;
  padding: 0;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  overflow-x: auto;
}
.ch-msg-body .th-md-codeblock {
  display: block;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: pre;
  color: var(--th-text-bright);
}
.ch-msg-body .th-md-ul,
.ch-msg-body .th-md-ol {
  margin: 4px 0;
  padding-left: 20px;
}
.ch-msg-body .th-md-li { margin: 1px 0; }
.ch-msg-body .th-md-quote {
  margin: 4px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--th-bright-orange);
  color: var(--th-text-grey);
}
.ch-msg-body .th-md-link {
  color: var(--th-bright-orange);
  text-decoration: underline;
}
.ch-msg-body .th-md-link:hover { color: var(--th-text-bright); }
.ch-msg-body .th-md-ref {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  padding: 0 4px;
  border-radius: 2px;
  color: var(--th-text-grey);
}

/* GFM constructs the renderer now promotes to blocks (headings, rules,
   tables) — what Gorilla/Claude emit. Sized down for chat density. */
.ch-msg-body .th-md-h1,
.ch-msg-body .th-md-h2,
.ch-msg-body .th-md-h3,
.ch-msg-body .th-md-h4,
.ch-msg-body .th-md-h5,
.ch-msg-body .th-md-h6 {
  margin: 8px 0 2px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--th-text-bright);
}
.ch-msg-body .th-md-h1:first-child,
.ch-msg-body .th-md-h2:first-child,
.ch-msg-body .th-md-h3:first-child,
.ch-msg-body .th-md-h4:first-child,
.ch-msg-body .th-md-h5:first-child,
.ch-msg-body .th-md-h6:first-child { margin-top: 0; }
.ch-msg-body .th-md-h1 { font-size: 1.05rem; }
.ch-msg-body .th-md-h2 { font-size: 0.95rem; }
.ch-msg-body .th-md-h3 { font-size: 0.875rem; }
.ch-msg-body .th-md-h4,
.ch-msg-body .th-md-h5,
.ch-msg-body .th-md-h6 {
  font-size: 0.8125rem;
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ch-msg-body .th-md-hr {
  border: 0;
  border-top: 1px solid var(--th-divider);
  margin: 8px 0;
}
.ch-msg-body .th-md-table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 6px 0;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.ch-msg-body .th-md-th,
.ch-msg-body .th-md-td {
  border: 1px solid var(--th-divider);
  padding: 3px 8px;
  text-align: left;
  vertical-align: top;
}
.ch-msg-body .th-md-th {
  background: var(--th-panel-2);
  color: var(--th-text-bright);
  font-weight: 600;
}

/* ─────────────────────────── Dataset rich preview ─────────────────────────
 * Inline `dataset:` ref card in chat, the shared table component used by
 * the dataset content pane / inline card / expand modal, and the expand +
 * share modals. See docs/feature/rich-dataset-view.md.
 * ────────────────────────────────────────────────────────────────────────── */

/* Inline-card variant for datasets — teal left-border to distinguish from
   bb (purple) / kb (steel-blue) / hero (orange-tinted). */
.bb-inline-card.dataset {
  border-left-color: var(--th-bright-yellow);
  max-width: 480px;
}
.bb-inline-card.dataset:hover {
  border-left-color: var(--th-bright-orange);
}
.bb-inline-card.dataset.unresolved {
  border-left-color: var(--th-bright-yellow);
}
.bb-inline-card .ds-card-table {
  margin-top: 6px;
}
.bb-inline-card .ds-card-table .ds-table {
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  overflow: hidden;
}
.bb-inline-card .ds-card-table .ds-table table {
  font-size: 0.6875rem;
}
.bb-inline-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  justify-content: flex-end;
}
.bb-inline-card-actions .ds-card-action {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 8px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text);
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
}
.bb-inline-card-actions .ds-card-action:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

/* Shared table component — three variants (:card / :full / :modal) that
   only differ in which controls render. The header/body/footer chrome
   below is shared. */
.ds-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ds-table .ds-table-scroll {
  overflow: auto;
  flex: 1;
}
.ds-table table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  width: 100%;
}
.ds-table th,
.ds-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--th-divider);
  white-space: nowrap;
}
.ds-table th {
  position: sticky;
  top: 0;
  background: var(--th-titlebar);
  color: var(--th-pale-purple);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.ds-table th.num,
.ds-table td.num {
  text-align: right;
}
.ds-table th.sorted {
  color: var(--th-bright-orange);
}
.ds-table th .ds-th-arrow {
  font-size: 0.5625rem;
  margin-left: 2px;
}
.ds-table.card th {
  cursor: default;
}
.ds-table td {
  color: var(--th-text-bright);
}
.ds-table .ds-cell-null { color: var(--th-text-grey); }
.ds-table .ds-cell-num {
  font-variant-numeric: tabular-nums;
}
.ds-table .ds-cell-date {
  color: var(--th-bright-blue);
}
.ds-table .ds-cell-url {
  color: var(--th-bright-orange);
  text-decoration: underline;
}
.ds-table .ds-cell-json {
  color: var(--th-text-grey);
  font-style: italic;
}
.ds-table .ds-table-empty {
  color: var(--th-text-grey);
  text-align: center;
  padding: 12px 8px;
}
.ds-table-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--th-titlebar);
  border-top: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.ds-table-footer .ds-table-page-info {
  margin-right: auto;
}
.ds-table-footer .ds-table-pager {
  padding: 1px 8px;
  font-family: var(--font-mono);
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text);
  cursor: pointer;
}
.ds-table-footer .ds-table-pager:hover:not(:disabled) {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.ds-table-footer .ds-table-pager:disabled {
  opacity: 0.4;
  cursor: default;
}
.ds-table-footer .ds-table-pagesize {
  background: var(--th-panel);
  color: var(--th-text);
  border: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 4px;
}
.ds-table-footer .ds-table-action {
  padding: 1px 8px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text);
  cursor: pointer;
  font-family: var(--font-mono);
}
.ds-table-footer .ds-table-action:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

/* Make the datasets-room content pane stretch the new table component
   to fill the remaining height. */
.th-datasets .ds-body .ds-table {
  height: 100%;
}

/* ── Expand modal ─────────────────────────────────────────────────────── */
.ds-modal-expand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-modal-expand .ds-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--th-divider);
}
.ds-modal-expand .ds-modal-title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex: 1;
  min-width: 0;
}
.ds-modal-expand .ds-modal-kind {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-bright-yellow);
}
.ds-modal-expand .ds-modal-name {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-modal-expand .ds-modal-close {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-size: 1rem;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
}
.ds-modal-expand .ds-modal-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.ds-modal-expand .ds-modal-body {
  flex: 1;
  min-height: 320px;
  overflow: auto;
  border: 1px solid var(--th-divider);
  background: var(--th-panel-2);
}
.ds-modal-expand .ds-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--th-divider);
}

/* Download link on the expand modal */
.ds-modal-download-native {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 10px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text);
  cursor: pointer;
  text-decoration: none;
}
.ds-modal-download-native:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

/* ── Share modal ──────────────────────────────────────────────────────── */
.ds-modal-share .ds-share-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  min-height: 32px;
  align-items: center;
}
.ds-modal-share .ds-share-input {
  flex: 1;
  min-width: 140px;
  border: none;
  background: transparent;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  outline: none;
}
.ds-share-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
}
.ds-share-chip.kind-channel { border-left: 3px solid var(--th-bright-yellow); }
.ds-share-chip.kind-dm      { border-left: 3px solid var(--th-pale-purple); }
.ds-share-chip.kind-chat    { border-left: 3px solid var(--th-steel-blue-2); }
.ds-share-chip-kind {
  color: var(--th-text-grey);
}
.ds-share-chip-x {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  padding: 0 2px;
  font-family: var(--font-mono);
}
.ds-share-chip-x:hover { color: var(--th-red); }

.ds-share-suggestions {
  margin-top: 2px;
  border: 1px solid var(--th-divider);
  background: var(--th-panel-2);
  max-height: 200px;
  overflow: auto;
}
.ds-share-suggestion {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
  border-bottom: 1px solid var(--th-divider);
}
.ds-share-suggestion:last-child { border-bottom: none; }
.ds-share-suggestion:hover {
  background: var(--th-hover);
}
.ds-share-suggestion-kind {
  color: var(--th-text-grey);
  width: 12px;
}
.ds-share-suggestion-label {
  color: var(--th-text-bright);
  flex: 1;
}
.ds-share-suggestion-jid {
  color: var(--th-text-grey);
  font-size: 0.625rem;
}

.ds-share-preview {
  margin-top: 10px;
  border: 1px solid var(--th-divider);
  background: var(--th-panel);
}
.ds-share-preview-head {
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-text-grey);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.ds-share-preview-body {
  margin: 0;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 60px;
  max-height: 160px;
  overflow: auto;
}

/* ---------------------------------------------------------------------------
   Search popover (anchored under the topbar 🔍 icon) and the dedicated
   Search room (`:search`). Mirrors the visual language of the user-menu
   popover and the datasets room so the two surfaces feel native.
   --------------------------------------------------------------------------- */

.th-popover-host .search-menu-scrim {
  position: fixed;
  inset: var(--tabbar-h) 0 0 0;
  background: transparent;
  z-index: 40;
}
.th-popover-host .search-menu-panel {
  position: absolute;
  /* Anchor below the search button — the controls row aligns
     buttons right-to-left with the search icon ~5th from the right. */
  right: 170px;
  top: calc(var(--tabbar-h) + 4px);
  width: 380px;
  max-height: calc(100vh - var(--tabbar-h) - 12px);
  overflow-y: auto;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
  padding: 8px;
}
.th-popover-host .search-menu-form { display: flex; flex-direction: column; gap: 6px; }
.th-popover-host .search-menu-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: 2px;
}
.th-popover-host .search-menu-input:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
.th-popover-host .search-menu-chip {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.th-popover-host .search-menu-chip .tag {
  color: var(--th-bright-orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-popover-host .search-menu-chip .q {
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-popover-host .search-menu-unavailable,
.th-popover-host .search-menu-discover {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  padding: 4px 2px;
}
.th-popover-host .search-menu-unavailable {
  color: var(--th-red);
}
.th-popover-host .search-menu-section {
  border-top: 1px solid var(--th-divider);
  padding-top: 6px;
  margin-top: 2px;
}
.th-popover-host .search-menu-head {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  padding: 0 2px 4px;
}
.th-popover-host .search-menu-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
}
.th-popover-host .search-menu-row:hover {
  background: var(--th-titlebar);
  color: var(--th-bright-orange);
}
.th-popover-host .search-menu-row-arrow {
  color: var(--th-text-grey);
  flex: 0 0 auto;
}
.th-popover-host .search-menu-row-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-popover-host .search-menu-actions {
  display: flex;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--th-divider);
  margin-top: 2px;
}
.th-popover-host .search-menu-submit,
.th-popover-host .search-menu-advanced {
  flex: 1 1 auto;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
  cursor: pointer;
}
.th-popover-host .search-menu-submit {
  background: var(--th-bright-orange);
  color: var(--th-panel);
  border: 1px solid var(--th-bright-orange);
}
.th-popover-host .search-menu-submit:hover { filter: brightness(1.1); }
.th-popover-host .search-menu-submit:disabled,
.th-popover-host .search-menu-advanced:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.th-popover-host .search-menu-advanced {
  background: transparent;
  color: var(--th-text-bright);
  border: 1px solid var(--th-divider);
}
.th-popover-host .search-menu-advanced:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

/* Search room — singleton :search tab */

.th-search {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-panel);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
}
.th-search-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
}
.th-search-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.th-search-input {
  flex: 1 1 auto;
  padding: 6px 8px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-radius: 2px;
}
.th-search-input:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
.th-search-submit {
  padding: 6px 12px;
  background: var(--th-bright-orange);
  color: var(--th-panel);
  border: 1px solid var(--th-bright-orange);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-submit:hover { filter: brightness(1.1); }
.th-search-mode {
  padding: 4px 8px;
  background: transparent;
  color: var(--th-text-grey);
  border: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-mode:hover,
.th-search-mode.active {
  color: var(--th-bright-orange);
  border-color: var(--th-bright-orange);
}
.th-search-chip {
  padding-top: 4px;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.th-search-chip-mode {
  color: var(--th-bright-orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.th-search-chip-q {
  color: var(--th-text-bright);
}
.th-search-chip-meta {
  color: var(--th-text-grey);
}
.th-search-chip-sep { color: var(--th-divider); }

/* Result area */

.th-search-results {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.th-search-split {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 0;
}
.th-search-results-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

/* Advanced-mode form pane (left rail) */

.th-search-form-pane {
  border-right: 1px solid var(--th-divider);
  background: var(--th-panel-2);
  font-family: var(--font-mono);
  overflow-y: auto;
  padding: 8px 0;
}
.th-search-form-section {
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-divider);
}
.th-search-form-section:last-child { border-bottom: 0; }
.th-search-form-section-head {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  margin-bottom: 6px;
}
.th-search-form-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.th-search-form-label {
  flex: 0 0 80px;
  font-size: 0.625rem;
  color: var(--th-text-grey);
  text-transform: lowercase;
}
.th-search-form-text,
.th-search-form-select {
  flex: 1 1 auto;
  padding: 4px 6px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  border-radius: 2px;
  width: 100%;
}
.th-search-form-text:focus,
.th-search-form-select:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
.th-search-form-num { max-width: 80px; }
.th-search-form-badge {
  display: inline-block;
  font-size: 0.5625rem;
  color: var(--th-bright-orange);
  border: 1px solid var(--th-bright-orange);
  border-radius: 2px;
  padding: 0 4px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.th-search-form-hint {
  margin-top: 4px;
  font-size: 0.625rem;
  color: var(--th-text-grey);
}

.th-search-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.th-search-chip-toggle {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.th-search-chip-toggle:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-chip-toggle.active {
  background: var(--th-bright-orange);
  color: var(--th-panel);
  border-color: var(--th-bright-orange);
}

.th-search-form-attr-row {
  display: grid;
  grid-template-columns: 1fr 80px 1.5fr 24px;
  gap: 4px;
  margin-bottom: 4px;
}
.th-search-form-attr-op {
  padding: 2px 4px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  border-radius: 2px;
}
.th-search-form-attr-x {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-form-attr-x:hover { color: var(--th-red); border-color: var(--th-red); }
.th-search-form-attr-add {
  background: transparent;
  border: 1px dashed var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  width: 100%;
}
.th-search-form-attr-add:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

.th-search-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
}
.th-search-form-actions button {
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-form-submit {
  background: var(--th-bright-orange);
  color: var(--th-panel);
  border: 1px solid var(--th-bright-orange);
  grid-column: span 2;
}
.th-search-form-submit:hover { filter: brightness(1.1); }
.th-search-form-explain,
.th-search-form-reset {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
}
.th-search-form-explain:hover,
.th-search-form-reset:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-form-watch {
  grid-column: span 2;
  background: transparent;
  border: 1px solid var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-form-watch:hover:not(:disabled) {
  background: var(--th-bright-orange);
  color: var(--th-panel);
}
.th-search-form-watch:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--th-divider);
  color: var(--th-text-grey);
}

.th-search-compiled {
  padding: 8px 12px;
  border-top: 1px solid var(--th-divider);
  background: var(--th-panel);
}
.th-search-compiled-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  margin-bottom: 4px;
}
.th-search-compiled-copy {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-compiled-copy:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-compiled-copy:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.th-search-compiled-body {
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-bright-orange);
  border-radius: 2px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 24px;
}

/* Explain banner over the result pane */
.th-search-explain {
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  font-family: var(--font-mono);
}
.th-search-explain-head {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  margin-bottom: 6px;
}
.th-search-explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}
.th-search-explain-cell {
  padding: 4px 6px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
}
.th-search-explain-label {
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--th-text-grey);
  letter-spacing: 0.08em;
}
.th-search-explain-value {
  font-size: 0.75rem;
  color: var(--th-bright-orange);
}
.th-search-explain-notes {
  margin-top: 8px;
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}

/* Attribute-row type hint */
.th-search-form-attr-block { margin-bottom: 6px; }
.th-search-form-attr-hint {
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  padding-left: 4px;
  margin-top: 2px;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

/* View switcher (Results | Watches) above the result/watches pane */

.th-search-view-switcher {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-titlebar);
}
.th-search-view-tab {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  cursor: pointer;
}
.th-search-view-tab:hover { color: var(--th-bright-orange); }
.th-search-view-tab.active {
  color: var(--th-bright-orange);
  background: var(--th-panel);
  border-bottom: 2px solid var(--th-bright-orange);
  margin-bottom: -1px;
}
.th-search-view-count {
  color: var(--th-text-grey);
  font-size: 0.625rem;
}

/* Watches panel */

.th-search-watches {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--th-panel);
  font-family: var(--font-mono);
}
.th-search-watches-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-text-grey);
  background: var(--th-titlebar);
}
.th-search-watches-refresh {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-watches-refresh:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-watches-empty {
  padding: 24px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
}
.th-search-watches-list {
  display: flex;
  flex-direction: column;
}
.th-search-watch {
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-panel);
}
.th-search-watch-head {
  display: grid;
  grid-template-columns: 16px 90px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}
.th-search-watch-head:hover { background: var(--th-titlebar); }
.th-search-watch-toggle {
  color: var(--th-text-grey);
  font-size: 0.625rem;
}
.th-search-watch-id {
  color: var(--th-bright-orange);
  font-size: 0.6875rem;
}
.th-search-watch-expr {
  color: var(--th-text-bright);
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-search-watch-count {
  color: var(--th-text-grey);
  font-size: 0.625rem;
}
.th-search-watch-cancel {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-watch-cancel:hover {
  border-color: var(--th-red);
  color: var(--th-red);
}
.th-search-watch-body {
  padding: 0 12px 8px 38px;
  background: var(--th-panel-2);
  border-top: 1px solid var(--th-divider);
}
.th-search-watch-matches {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}
.th-search-watch-match {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  font-size: 0.6875rem;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-watch-match:hover { background: var(--th-titlebar); }
.th-search-watch-match-name {
  color: var(--th-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-search-watch-match-ts { color: var(--th-text-grey); }
.th-search-watch-empty {
  padding: 8px 0;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  font-style: italic;
}

.th-search-table {
  display: flex;
  flex-direction: column;
}
.th-search-row {
  display: grid;
  grid-template-columns: 110px 1fr 80px 110px 90px 160px 160px;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.75rem;
  cursor: pointer;
  align-items: center;
}
.th-search-row:hover { background: var(--th-titlebar); }
.th-search-row.th-search-row-head {
  cursor: default;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  background: var(--th-titlebar);
  position: sticky;
  top: 0;
  z-index: 1;
}
.th-search-row.th-search-row-head:hover { background: var(--th-titlebar); }
.th-search-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-search-cell.name { color: var(--th-text-bright); font-weight: 500; }
.th-search-cell.updated, .th-search-cell.owner, .th-search-cell.created-by {
  color: var(--th-text-grey);
}
.th-search-kind-chip {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--th-divider);
  border-radius: 8px;
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-search-state-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.625rem;
  text-transform: lowercase;
  border: 1px solid var(--th-divider);
}
.th-search-state-badge.state-active   { color: var(--th-bright-orange); border-color: var(--th-bright-orange); }
.th-search-state-badge.state-draft    { color: var(--th-text-grey);     }
.th-search-state-badge.state-archived { color: var(--th-text-grey);     opacity: 0.7; }
.th-search-state-badge.state-retired  { color: var(--th-text-grey);     text-decoration: line-through; }
.th-search-priority-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.625rem;
  border: 1px solid var(--th-divider);
}
.th-search-priority-chip.priority-critical { color: var(--th-red); border-color: var(--th-red); }
.th-search-priority-chip.priority-high     { color: var(--th-bright-orange); border-color: var(--th-bright-orange); }
.th-search-priority-chip.priority-medium   { color: var(--th-text-bright); }
.th-search-priority-chip.priority-low      { color: var(--th-text-grey); }
.th-search-priority-chip.priority-info     { color: var(--th-text-grey); opacity: 0.8; }

.th-search-skeleton { padding: 12px; }
.th-search-skeleton-row {
  height: 14px;
  margin-bottom: 8px;
  background: var(--th-divider);
  opacity: 0.4;
  border-radius: 2px;
  animation: th-search-pulse 1.2s ease-in-out infinite;
}
@keyframes th-search-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.6; }
}

.th-search-empty {
  padding: 24px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
}
.th-search-empty-title {
  color: var(--th-text-bright);
  font-size: 0.875rem;
  margin-bottom: 8px;
}
.th-search-empty-hint { margin-bottom: 8px; }
.th-search-empty-examples {
  list-style: none;
  padding: 0;
  margin: 0;
}
.th-search-empty-examples li {
  padding: 2px 0;
}
.th-search-empty-examples code {
  background: var(--th-panel-2);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--th-bright-orange);
}

.th-search-notes,
.th-search-error {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--th-divider);
  font-size: 0.6875rem;
}
.th-search-notes { background: var(--th-titlebar); color: var(--th-text-bright); }
.th-search-error { background: var(--th-titlebar); color: var(--th-red); }
.th-search-notes-icon,
.th-search-error-icon { flex: 0 0 auto; font-size: 0.875rem; }
.th-search-notes-line { color: var(--th-text-grey); padding-top: 2px; }
.th-search-error-text { color: var(--th-text-grey); margin-top: 2px; }

.th-search-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--th-divider);
  background: var(--th-titlebar);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.th-search-page-label { flex: 1 1 auto; }
.th-search-page-btn {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-page-btn:hover:not(:disabled) {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Per-row kebab popover */
.th-search-row {
  /* override row grid for the new select + kebab columns */
  grid-template-columns: 24px 110px 1fr 80px 110px 90px 160px 160px 24px;
}
.th-search-cell.select,
.th-search-cell.kebab {
  text-align: center;
}
.th-search-cell.select input[type="checkbox"] {
  margin: 0;
}
.th-search-cell-link {
  background: transparent;
  border: 0;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.th-search-cell-link:hover {
  color: var(--th-bright-orange);
  text-decoration: underline;
}
.th-search-row.selected {
  background: var(--th-titlebar);
  box-shadow: inset 3px 0 0 var(--th-bright-orange);
}
.th-search-kebab-btn {
  background: transparent;
  border: 0;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 2px;
}
.th-search-row:hover .th-search-kebab-btn { color: var(--th-text-bright); }
.th-search-kebab-btn:hover { color: var(--th-bright-orange); }
.th-search-kebab-scrim {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 60;
}
.th-search-kebab-popover {
  position: absolute;
  right: 12px;
  margin-top: 4px;
  min-width: 180px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  z-index: 70;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.th-search-kebab-item {
  background: transparent;
  border: 0;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-align: left;
  padding: 6px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-kebab-item:hover {
  background: var(--th-titlebar);
  color: var(--th-bright-orange);
}

/* Multi-select toolbar */
.th-search-multi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.th-search-multi-count {
  color: var(--th-bright-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-search-multi-btn {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-multi-btn:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-multi-btn.danger {
  margin-left: auto;
  color: var(--th-text-grey);
}
.th-search-multi-btn.danger:hover {
  border-color: var(--th-red);
  color: var(--th-red);
}

/* Save-as-set inline control in the pagination footer */
.th-search-saveset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
}
.th-search-saveset-name {
  width: 120px;
  padding: 3px 6px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  border-radius: 2px;
}
.th-search-saveset-name:focus {
  outline: none;
  border-color: var(--th-bright-orange);
}
.th-search-saveset-btn {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.th-search-saveset-btn:hover:not(:disabled) {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-search-saveset-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Saved sets in the topbar popover */
.th-popover-host .search-menu-saved-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.th-popover-host .search-menu-saved-row .search-menu-row {
  flex: 1 1 auto;
}
.th-popover-host .search-menu-saved-x {
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  cursor: pointer;
  flex: 0 0 auto;
}
.th-popover-host .search-menu-saved-x:hover {
  border-color: var(--th-red);
  color: var(--th-red);
}
.th-popover-host .search-menu-row-meta {
  color: var(--th-text-grey);
  font-size: 0.625rem;
  margin-left: auto;
}

/* COP map-overlay 'search this area' button */
.map-overlay-search {
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 1px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.map-overlay-search:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}

/* ===========================================================================
   Library — read-only browser (library-ux.md Phase A)
   Two-pane room: tree (left) + kind-dispatched content (right). Mirrors
   the datasets room's tokens so the surfaces feel of-a-piece.
   =========================================================================== */
.th-library {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100%;
  background: var(--th-black);
}
.th-library > * {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--th-panel);
}

/* Tree pane */
.th-library .lib-tree {
  border-right: 1px solid var(--th-divider);
  overflow: auto;
  padding: 6px 0;
}
.th-library .lib-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  padding: 6px 12px;
  color: var(--th-text-grey);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  cursor: pointer;
}
.th-library .lib-tree-row:hover { background: var(--th-pale-blue); }
.th-library .lib-tree-row.active {
  background: var(--th-pale-blue);
  border-left-color: var(--th-bright-orange);
  color: var(--th-text-bright);
}
.th-library .lib-tree-row.kind-library { font-weight: 600; color: var(--th-text-bright); }
.th-library .lib-tree-icon { flex: 0 0 auto; font-size: 0.8125rem; }
.th-library .lib-tree-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Content pane */
.th-library .lib-content-pane {
  flex: 1;
  overflow: auto;
  padding: 18px 22px;
}
.th-library .lib-empty {
  padding: 16px 0;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.th-library .lib-crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px; margin-bottom: 8px;
  font-size: 0.6875rem; color: var(--th-text-grey);
}
.th-library .lib-crumb:not(:last-child)::after { content: "\203A"; margin: 0 4px; opacity: 0.5; }
.th-library .lib-crumb-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--th-text-grey); font-size: 0.6875rem; font-family: var(--font-ui);
}
.th-library .lib-crumb-btn:hover { color: var(--th-bright-orange); text-decoration: underline; }

.th-library .lib-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.th-library .lib-head-title {
  font-size: 0.875rem; font-weight: 600; color: var(--th-text-bright);
}
.th-library .lib-role-badge {
  font-family: var(--font-mono); font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--th-divider); color: var(--th-text-grey);
}
.th-library .lib-role-badge.role-admin { border-color: var(--th-bright-orange); color: var(--th-bright-orange); }
.th-library .lib-role-badge.role-edit  { border-color: var(--th-bright-yellow); color: var(--th-bright-yellow); }

.th-library .lib-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--th-text-grey); margin-bottom: 14px;
}
.th-library .lib-overview-counts,
.th-library .lib-datafile { font-family: var(--font-mono); font-size: 0.75rem; color: var(--th-text-grey); }

.th-library .lib-child-list,
.th-library .lib-overview-counts { margin-top: 8px; }
.th-library .lib-child-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: var(--th-panel-2); border: 1px solid var(--th-divider);
  border-radius: 3px; padding: 8px 10px; margin-bottom: 4px;
  color: var(--th-text-grey); font-size: 0.8125rem; cursor: pointer;
}
.th-library .lib-child-row:hover { border-color: var(--th-steel-blue-2); color: var(--th-text-bright); }

.th-library .lib-doc-body { border-top: 1px solid var(--th-divider); padding-top: 12px; }
.th-library .lib-md { font-size: 0.875rem; line-height: 1.55; }
.th-library .lib-doc-external a,
.th-library .lib-download {
  color: var(--th-pale-purple); font-family: var(--font-mono); font-size: 0.75rem;
}
.th-library .lib-download:hover { color: var(--th-bright-orange); }

.th-library .lib-tags {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--th-divider);
}
.th-library .lib-tags-label { font-size: 0.6875rem; color: var(--th-text-grey); }
.th-library .lib-tag {
  font-family: var(--font-mono); font-size: 0.625rem;
  padding: 1px 6px; border-radius: 2px;
  background: var(--th-pale-blue); color: var(--th-text-grey);
}

/* User-menu Libraries section sub-group headers (Mine / Channel / Shared) */
.th-popover-host .user-menu-subhead {
  padding: 4px 14px 2px;
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--th-text-grey); opacity: 0.7;
}

/* ---- Library Phase B — document editor toggle, live cue, inline doc card ---- */
.th-library .lib-head-spacer { flex: 1; }
.th-library .lib-action {
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 3px 10px;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.th-library .lib-action:hover { border-color: var(--th-bright-orange); color: var(--th-bright-orange); }
.th-library .lib-action.primary { border-color: var(--th-steel-blue-2); color: var(--th-text-bright); }
.th-library .lib-action.primary:hover { border-color: var(--th-bright-orange); color: var(--th-bright-orange); }
.th-library .lib-live-cue {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--th-red); letter-spacing: 0.04em;
}
/* Monochrome live dot — stands in for the old 🔴 emoji so live cues
   stay in the theme palette wherever .lib-live-cue appears. */
.th-live-dot { color: var(--th-red, #c4564b); }
.th-library .lib-saved { color: var(--th-bright-yellow); }
.th-library .lib-doc-editor {
  border-top: 1px solid var(--th-divider);
  margin-top: 8px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.th-library .lib-doc-editor .th-collab { flex: 1; min-height: 0; }

/* Read-only collab toolbar variant */
.th-collab-toolbar.read-only {
  display: flex; align-items: center; gap: 8px;
}
.th-collab-readonly-tag {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--th-text-grey); letter-spacing: 0.04em;
}

/* Inline document card (chat) */
.bb-inline-card.library.document .bb-inline-card-rev {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 0.625rem; color: var(--th-text-grey);
}
.bb-inline-card.library .bb-inline-card-crumb {
  font-size: 0.625rem; color: var(--th-text-grey);
  padding: 0 10px 2px; opacity: 0.85;
}
.bb-inline-card.library .lib-doc-preview {
  white-space: pre-wrap; font-family: var(--font-mono);
  font-size: 0.6875rem; line-height: 1.45;
}
.bb-inline-card.library .bb-inline-card-sum.muted { color: var(--th-text-grey); font-style: italic; }

/* ---- Library Phase C — data-file preview, uploads, drafts, modals ---- */
.th-library .lib-tree { display: flex; flex-direction: column; }
.th-library .lib-tree-nodes { flex: 1; overflow: auto; }
.th-library .lib-tree-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--th-divider); background: var(--th-titlebar);
}
.th-library .lib-actions-row {
  display: flex; gap: 10px; align-items: center;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--th-divider);
}
.th-library .lib-action.danger { border-color: transparent; color: var(--th-text-grey); }
.th-library .lib-action.danger:hover { border-color: var(--th-red); color: var(--th-red); }
.th-library .lib-file-preview {
  border-top: 1px solid var(--th-divider); padding-top: 12px; overflow: auto;
}
.th-library .lib-file-preview .ds-image img { max-width: 100%; height: auto; }
.th-library .lib-draft-tag {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--th-bright-yellow); letter-spacing: 0.04em;
}

/* Drafts disclosure (tree footer) */
.th-library .lib-drafts { border-top: 1px solid var(--th-divider); }
.th-library .lib-drafts-head {
  width: 100%; text-align: left; background: transparent; border: none;
  padding: 6px 12px; color: var(--th-bright-yellow);
  font-family: var(--font-mono); font-size: 0.6875rem; cursor: pointer;
}
.th-library .lib-draft-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 20px;
}
.th-library .lib-draft-row .lib-tree-name {
  background: none; border: none; color: var(--th-text-grey);
  font-size: 0.75rem; cursor: pointer; text-align: left;
}

/* Library upload / import modals */
.lib-modal { width: min(92vw, 520px); }
.lib-modal-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--th-divider);
}
.lib-modal-title { flex: 1; font-weight: 600; color: var(--th-text-bright); }
.lib-modal-close { font-size: 1rem; line-height: 1; }
.lib-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.lib-modal-label {
  display: block; margin-bottom: 4px;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--th-text-grey);
}
.lib-modal-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  background: var(--th-panel-2); border: 1px solid var(--th-divider);
  border-radius: 2px; color: var(--th-text-bright);
  font-family: var(--font-mono); font-size: 0.75rem;
}
.lib-modal-filerow { display: flex; gap: 8px; align-items: center; }
.lib-modal-fileinfo { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--th-text-grey); }
.lib-modal-note { font-size: 0.6875rem; color: var(--th-text-grey); line-height: 1.4; }
.lib-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--th-divider);
}
.lib-modal-actions .primary {
  background: var(--th-steel-blue); border: 1px solid var(--th-steel-blue-2);
  color: var(--th-text-bright); border-radius: 2px; padding: 5px 14px;
  font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer;
}
.lib-modal-actions .primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Inline data-file card image thumb */
.bb-inline-card.dataset.library .ds-card-image img { max-width: 100%; max-height: 160px; border-radius: 2px; }

/* ---- Library Phase D — share modals ---- */
.lib-share-rows { display: flex; flex-direction: column; gap: 4px; }
.lib-share-row { display: flex; align-items: center; gap: 8px; }
.lib-share-jid { flex: 1; font-family: var(--font-mono); font-size: 0.75rem; color: var(--th-text-bright); }
.lib-share-role { width: auto; flex: 0 0 90px; }
.lib-share-x {
  background: transparent; border: 1px solid transparent; color: var(--th-text-grey);
  border-radius: 50%; width: 22px; height: 22px; cursor: pointer; line-height: 1;
}
.lib-share-x:hover { border-color: var(--th-red); color: var(--th-red); }
.lib-share-add { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.lib-share-add .lib-modal-input:first-child { flex: 1; }
.lib-share-channel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--th-divider); display: flex; flex-direction: column; gap: 4px; }
.lib-share-advisory {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; padding: 6px 8px; border-radius: 3px;
  background: var(--th-pale-yellow); color: var(--th-bright-yellow);
  font-size: 0.6875rem; font-family: var(--font-mono);
}
.lib-share-advisory-actions { display: flex; gap: 6px; }
.lib-modal .ds-share-targets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lib-modal .ds-share-preview-body {
  margin-top: 8px; padding: 8px; background: var(--th-panel-2);
  border: 1px solid var(--th-divider); border-radius: 3px;
  font-family: var(--font-mono); font-size: 0.6875rem; white-space: pre-wrap; color: var(--th-text-grey);
}

/* ---- Library Phase E — channel-rail Libraries section + attach modal ---- */
.ch-rail-libsection { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--th-divider); }
.ch-rail-subhead {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--th-text-grey); padding: 0 2px 4px;
}
.ch-libtile {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 3px; cursor: pointer;
  font-size: 0.75rem; color: var(--th-text-grey);
}
.ch-libtile:hover { background: var(--th-pale-blue); color: var(--th-text-bright); }
.ch-libtile.stale .ch-libtile-label { text-decoration: line-through; opacity: 0.6; }
.ch-libtile-icon { flex: 0 0 auto; }
.ch-libtile-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-libtile-rev { font-family: var(--font-mono); font-size: 0.625rem; color: var(--th-text-grey); }
.ch-libtile-x {
  background: transparent; border: none; color: var(--th-text-grey);
  cursor: pointer; opacity: 0; line-height: 1; padding: 0 2px;
}
.ch-libtile:hover .ch-libtile-x { opacity: 0.6; }
.ch-libtile-x:hover { opacity: 1; color: var(--th-red); }

.lib-attach-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.lib-attach-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: 3px; cursor: pointer; font-size: 0.8125rem; color: var(--th-text-bright);
}
.lib-attach-row:hover { background: var(--th-pale-blue); }
.lib-attach-name { flex: 1; }

/* ---- Library import-object — by-reference member marker ---- */
.th-library .lib-tree-refmark {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-library .lib-tree-row.ref .lib-tree-name,
.th-library .lib-child-row.ref .lib-tree-name { font-style: italic; }

/* ---- Library Phase F — lifecycle: retired badge, diff, time-travel ---- */
.th-library .lib-tree-row.retired .lib-tree-name { text-decoration: line-through; opacity: 0.6; }
.th-library .lib-retired-tag {
  font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--th-red); color: var(--th-red);
}
.th-library .lib-diff-heads {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--th-text-grey);
  padding-bottom: 6px; border-bottom: 1px solid var(--th-divider); margin-bottom: 6px;
}
.th-library .lib-diff-stat { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--th-text-grey); margin-bottom: 6px; }
.th-library .lib-diff-body { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; }
.th-library .lib-diff-line { display: flex; gap: 8px; white-space: pre-wrap; }
.th-library .lib-diff-line.ins { background: rgba(16,185,129,0.12); }
.th-library .lib-diff-line.del { background: rgba(239,69,68,0.12); }
.th-library .lib-diff-gutter { flex: 0 0 14px; text-align: center; color: var(--th-text-grey); user-select: none; }
.th-library .lib-diff-line.ins .lib-diff-gutter { color: #10b981; }
.th-library .lib-diff-line.del .lib-diff-gutter { color: var(--th-red); }
.th-library .lib-diff-text { flex: 1; min-width: 0; }

.lib-supersede-override { display: block; font-size: 0.75rem; color: var(--th-text-grey); margin: 4px 0; }
.lib-timetravel-result { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--th-divider); }
.lib-timetravel-body {
  white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.75rem;
  background: var(--th-panel-2); border: 1px solid var(--th-divider);
  border-radius: 3px; padding: 8px; max-height: 320px; overflow: auto; color: var(--th-text-grey);
}

/* ---- Library — DM / self-DM library band (library-ux.md §7 DM targets) ---- */
.dm-library-band .dm-lib-new {
  background: transparent; border: 1px solid var(--th-divider); border-radius: 2px;
  padding: 1px 6px; margin: 4px 0; cursor: pointer;
  color: var(--th-text-grey); font-family: var(--font-mono); font-size: 0.625rem;
}
.dm-library-band .dm-lib-new:hover { border-color: var(--th-bright-orange); color: var(--th-bright-orange); }
.dm-library-band .dm-lib-list { display: flex; flex-direction: column; gap: 2px; }

/* channel-rail Libraries header create button */
.ch-rail-libsection .ch-rail-subhead { display: flex; align-items: center; justify-content: space-between; }
.ch-rail-libsection .ch-libnew {
  background: transparent; border: 1px solid var(--th-divider); border-radius: 2px;
  padding: 0 6px; cursor: pointer; color: var(--th-text-grey);
  font-family: var(--font-mono); font-size: 0.625rem;
}
.ch-rail-libsection .ch-libnew:hover { border-color: var(--th-bright-orange); color: var(--th-bright-orange); }

/* =========================================================
   Agent Hub (agent-catalog-ux.md §3) — agent card grid
   ========================================================= */

/* Column shell: fixed header + compact directory on the left and an
   inspector on the right. The two panels scroll independently; the room
   itself does not. */
.agent-hub-room {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--th-black);
}

/* Compact directory at left; selected-agent inspector at right. */
.agent-hub-split {
  flex: 1;
  display: flex;
  min-height: 0;
}
.agent-hub-left,
.agent-hub-right {
  min-width: 0;
  overflow-y: auto;
}
.agent-hub-left {
  flex: 0 0 42%;
  width: 42%;
  border-right: 1px solid var(--th-divider);
  padding-bottom: 24px;
}
.agent-hub-right {
  flex: 1 1 58%;
  width: 58%;
  padding-bottom: 24px;
}

.agent-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 12px;
  background: var(--th-black);
  border-bottom: 1px solid var(--th-divider);
}
.agent-hub-head h2 {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-text-bright);
}
.agent-hub-subtitle {
  margin-top: 3px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.agent-hub-refresh {
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  background: transparent;
}
.agent-hub-refresh:hover { border-color: var(--th-bright-orange); color: var(--th-bright-orange); }

/* Failed models-capability probe — hover carries the server diagnostic. */
.agent-hub-models-note {
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: help;
}

.agent-hub-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-hub-create {
  border: 1px solid var(--th-bright-orange);
  background: color-mix(in srgb, var(--th-bright-orange) 12%, transparent);
  color: var(--th-bright-orange);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.agent-hub-create:hover {
  background: color-mix(in srgb, var(--th-bright-orange) 20%, transparent);
}

/* The directory is a real registry, not a product-card wall. The toolbar
   makes the single backed view explicit and keeps search close to the list. */
.agent-hub-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--th-divider);
  background: var(--th-panel);
}
.agent-hub-current-view {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agent-hub-current-view strong {
  color: var(--th-text-bright);
  font-weight: 700;
}
.agent-hub-view-switch {
  display: inline-flex;
  border: 1px solid var(--th-divider);
  background: var(--th-black);
}
.agent-hub-view-switch button {
  border: 0;
  border-right: 1px solid var(--th-divider);
  border-radius: 0;
  padding: 5px 10px;
  color: var(--th-text-grey);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.agent-hub-view-switch button:last-child { border-right: 0; }
.agent-hub-view-switch button.active {
  color: var(--th-text-bright);
  background: var(--th-steel-blue);
}
.agent-hub-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: min(340px, 54%);
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agent-hub-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--th-divider);
  border-radius: 0;
  padding: 5px 7px;
  color: var(--th-text-bright);
  background: var(--th-black);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.agent-hub-search input:focus {
  outline: none;
  border-color: var(--th-steel-blue-2);
}

/* Operator-facing group headers keep the catalog's open wire taxonomy out of
   the main scan path. Each group owns its own responsive card grid. */
.agent-group {
  border-bottom: 1px solid var(--th-divider);
}
.agent-group-head {
  padding: 12px 14px 4px;
}
.agent-group-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-text-bright);
}
.agent-group-explainer {
  margin-top: 3px;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--th-text-grey);
}

/* Dense registry rows keep a large directory scannable. The selection still
   drives the full right-hand inspector; nothing about the broker contract or
   action authority changes here. */
.agent-hub-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 10px;
}

.agent-hub-empty {
  padding: 40px 22px;
  text-align: center;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.agent-hub-meta {
  padding: 4px 14px 0;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  opacity: 0.7;
}

/* --- The card (a selectable master-list button) --------------------- */
.agent-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--th-divider);
  border-left: 3px solid var(--th-steel-blue);
  border-radius: 0;
  padding: 8px 14px;
  box-shadow: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.agent-card:hover {
  background: var(--th-hover);
}
/* The focused card mirrors the detail pane. */
.agent-card.selected {
  border-color: var(--th-bright-orange);
  background: var(--th-panel-2);
}
.agent-card.agent-group-ai        { border-left-color: var(--th-bright-orange); }
.agent-card.agent-group-assistant { border-left-color: var(--th-pale-purple); }
.agent-card.agent-group-courier   { border-left-color: #2e8b8b; }

.agent-card-head {
  display: flex;
  align-items: center;
  flex: 0 0 138px;
  min-width: 0;
  gap: 8px;
}
.agent-card-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  border-radius: 2px;
  background: var(--th-pale-blue);
}
.agent-card-name {
  font-weight: 700;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--th-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-card-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--th-text-bright);
}
.agent-card-caps {
  margin: 2px 0 0;
  padding-left: 16px;
  font-size: 0.75rem;
  color: var(--th-text-grey);
}
.agent-card-caps li { margin: 1px 0; }
.agent-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.agent-card-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  background: var(--th-hover);
  border-radius: 3px;
  padding: 1px 6px;
}

.agent-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--th-divider);
}
.agent-card-btn {
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 5px 12px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--th-text-bright);
  background: transparent;
}
.agent-card-btn:hover:not(:disabled) {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
/* The first action (Open chat) reads as the primary affordance. */
.agent-card-btn:first-of-type {
  background: var(--th-steel-blue);
  border-color: var(--th-steel-blue);
  color: var(--th-text-bright);
}
.agent-card-btn:first-of-type:hover:not(:disabled) {
  background: var(--th-steel-blue-2);
  border-color: var(--th-steel-blue-2);
  color: var(--th-text-bright);
}
.agent-card-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.agent-card-docs {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  cursor: help;
}

@media (max-width: 900px) {
  .agent-hub-split { flex-direction: column; overflow-y: auto; }
  .agent-hub-left,
  .agent-hub-right {
    flex: none;
    width: 100%;
    overflow-y: visible;
  }
  .agent-hub-left {
    max-height: 46%;
    border-right: 0;
    border-bottom: 1px solid var(--th-divider);
  }
}

@media (max-width: 620px) {
  .agent-hub-toolbar { align-items: stretch; flex-direction: column; }
  .agent-hub-search { min-width: 0; }
  .agent-card-head { flex-basis: 124px; }
  .agent-card-summary { display: none; }
}

/* --- Agent Details (right panel) ------------------------------------ */
.agent-detail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.agent-detail-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Header — icon + name/group, with an operator-group keyed left stripe. */
.agent-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--th-divider);
  border-left: 3px solid var(--th-steel-blue);
}
.agent-detail-head.agent-group-ai        { border-left-color: var(--th-bright-orange); }
.agent-detail-head.agent-group-assistant { border-left-color: var(--th-pale-purple); }
.agent-detail-head.agent-group-courier   { border-left-color: #2e8b8b; }
.agent-detail-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.625rem;
  border-radius: 50%;
  background: var(--th-pale-blue);
}
.agent-detail-titles { flex: 1; min-width: 0; }
.agent-detail-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--th-text-bright);
}
.agent-detail-group {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-grey);
}

.agent-detail-body {
  flex: 1;
  padding: 6px 24px 16px;
}
.agent-detail-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--th-divider);
}
.agent-detail-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-text-grey);
  margin-bottom: 8px;
}
.agent-detail-block { margin-top: 10px; }
.agent-detail-block:first-of-type { margin-top: 0; }
.agent-detail-subhead {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--th-text-bright);
  margin-bottom: 4px;
}
.agent-detail-na {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-grey);
  opacity: 0.6;
}

/* JID — click to DM */
.agent-detail-jid {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--th-text-grey);
  word-break: break-all;
}
.agent-detail-jid-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--th-steel-blue-2);
  background: transparent;
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  word-break: break-all;
}
.agent-detail-jid-link:hover {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.agent-detail-jid-dm {
  flex: none;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
}

.agent-detail-kind-val {
  font-size: 0.875rem;
  color: var(--th-text-bright);
  text-transform: capitalize;
}
.agent-detail-summary {
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--th-text-grey);
}
.agent-detail-how-to {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--th-text-bright);
}

.agent-detail-caps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.8125rem;
  color: var(--th-text-grey);
}
.agent-detail-caps li { margin: 2px 0; }

/* Commands — a definition list of command → description. */
.agent-detail-cmds { margin: 0; }
.agent-detail-cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 3px 0;
}
.agent-detail-cmd-name {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--th-bright-orange);
  margin: 0;
}
.agent-detail-cmd-desc {
  flex: 1;
  min-width: 140px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--th-text-grey);
}
.agent-detail-example {
  margin: 0;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--th-text-bright);
  background: var(--th-panel-2);
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  white-space: pre-wrap;
  overflow-x: auto;
}

.agent-detail-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-detail-chan {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--th-text-bright);
  background: var(--th-hover);
  border-radius: 3px;
  padding: 2px 8px;
}
.agent-detail-tokens {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--th-text-bright);
}

/* Agent Design is an owner-only projection over existing Hoot commands and
   Library documents. Keep it dense and procedural rather than another card. */
.agent-design {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-design-lead,
.agent-design-field-head,
.agent-design-model,
.agent-design-lifecycle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.agent-design-title {
  color: var(--th-text-bright);
  font-size: 0.8125rem;
  font-weight: 700;
}
.agent-design-copy,
.agent-design-help,
.agent-design-empty,
.agent-design-loading {
  color: var(--th-text-grey);
  font-size: 0.71875rem;
  line-height: 1.45;
}
.agent-design-refresh,
.agent-design-btn {
  flex: none;
  border: 1px solid var(--th-divider);
  border-radius: 1px;
  padding: 5px 9px;
  color: var(--th-text-bright);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  cursor: pointer;
}
.agent-design-refresh:hover:not(:disabled),
.agent-design-btn:hover:not(:disabled) {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.agent-design-btn.primary {
  border-color: var(--th-steel-blue-2);
  background: var(--th-steel-blue);
}
.agent-design-btn.danger {
  border-color: color-mix(in srgb, #d85b5b 55%, var(--th-divider));
  color: #e28585;
}
.agent-design-refresh:disabled,
.agent-design-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.agent-design-error {
  border-left: 2px solid #d85b5b;
  padding: 6px 8px;
  color: #e7a0a0;
  background: color-mix(in srgb, #d85b5b 8%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.agent-design-statebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border-top: 1px solid var(--th-divider);
  border-bottom: 1px solid var(--th-divider);
  padding: 7px 0;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.agent-design-state {
  padding: 2px 6px;
  color: var(--th-text-bright);
  border: 1px solid var(--th-divider);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agent-design-state.state-active { border-color: #3f8d68; color: #80c9a2; }
.agent-design-state.state-paused { border-color: #9b7a3c; color: #e0bb70; }
.agent-design-field {
  border-left: 2px solid var(--th-steel-blue);
  padding: 8px 0 8px 10px;
}
.agent-design-field-label {
  margin-bottom: 3px;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.agent-design-ref {
  max-width: 430px;
  overflow: hidden;
  color: var(--th-steel-blue-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-design-context-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0;
}
.agent-design-context {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  background: var(--th-panel-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.agent-design-context span { padding: 3px 6px; }
.agent-design-context button {
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--th-divider);
  border-radius: 0;
  color: var(--th-text-grey);
  background: transparent;
  cursor: pointer;
}
.agent-design-add-context {
  display: flex;
  gap: 6px;
  margin: 7px 0 4px;
}
.agent-design-add-context input,
.agent-design-model select {
  min-width: 0;
  border: 1px solid var(--th-divider);
  border-radius: 0;
  padding: 5px 7px;
  color: var(--th-text-bright);
  background: var(--th-black);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.agent-design-add-context input { flex: 1; }
.agent-design-model select { min-width: 190px; }
.agent-design-lifecycle {
  justify-content: flex-start;
  padding-top: 3px;
}
.agent-design-lifecycle .danger { margin-left: auto; }

.agent-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--th-divider);
}
.agent-detail-btn {
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--th-text-bright);
  background: transparent;
  cursor: pointer;
}
.agent-detail-btn.primary {
  background: var(--th-steel-blue);
  border-color: var(--th-steel-blue);
}
.agent-detail-btn.primary:hover:not(:disabled) {
  background: var(--th-steel-blue-2);
  border-color: var(--th-steel-blue-2);
}
.agent-detail-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.agent-detail-docs {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  cursor: help;
}
.agent-detail-loading {
  padding: 8px 24px 16px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  opacity: 0.7;
}

/* ---- Library version history modal (§11.4) ---- */
.lib-versions { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto;
                border: 1px solid var(--th-divider); border-radius: 3px; padding: 4px; }
.lib-version-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 2px; padding: 6px 8px;
  color: var(--th-text-grey); font-size: 0.75rem; cursor: pointer;
}
.lib-version-row:hover { background: var(--th-pale-blue); }
.lib-version-row.active { background: var(--th-pale-blue); color: var(--th-text-bright); }
.lib-version-dot { flex: 0 0 auto; color: var(--th-bright-orange); }
.lib-version-when { flex: 1; font-family: var(--font-mono); }
.lib-version-by { color: var(--th-text-grey); font-size: 0.6875rem; }
.lib-timetravel-result { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--th-divider); }
.lib-timetravel-result .lib-action { margin-top: 8px; }

/* ---- Library tree disclosure (collapsible folders) ---- */
.th-library .lib-tree-item { display: flex; align-items: center; }
.th-library .lib-tree-chevron {
  flex: 0 0 16px; width: 16px; height: 22px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--th-text-grey); font-size: 0.625rem; line-height: 1;
}
.th-library .lib-tree-chevron:hover { color: var(--th-bright-orange); }
.th-library .lib-tree-chevron-spacer { flex: 0 0 16px; width: 16px; }
/* The row is now the name button inside .lib-tree-item; indentation comes
   from the item's padding-left, so trim the row's own left padding. */
.th-library .lib-tree-item .lib-tree-row { flex: 1; min-width: 0; padding: 6px 8px; }

/* ===========================================================================
   Contact list (docs/feature/contact-list.md §7) — three-pane buddy list:
   groups rail | presence-sorted contacts | contact card.
   =========================================================================== */
.th-contacts {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  width: 100%;
  height: 100%;
  background: var(--th-panel);
  color: var(--th-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.th-contacts > * { overflow: auto; min-width: 0; }

/* presence dot — shared by rows, cards, and inline chat cards */
.contact-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: var(--th-text-grey);
}
.contact-dot.online  { background: #3fb950; }
.contact-dot.away    { background: var(--th-bright-yellow); }
.contact-dot.dnd     { background: var(--th-red); }
.contact-dot.offline { background: var(--th-text-grey); opacity: 0.5; }

/* groups rail */
.contacts-rail {
  border-right: 1px solid var(--th-divider);
  padding: 6px 0;
  display: flex; flex-direction: column;
}
.contacts-rail-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: none;
  border-left: 2px solid transparent;
  padding: 6px 12px; color: var(--th-text-grey); cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.contacts-rail-row:hover { background: var(--th-pale-blue); }
.contacts-rail-row.active {
  background: var(--th-pale-blue);
  border-left-color: var(--th-bright-orange);
  color: var(--th-text-bright);
}
.contacts-rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-rail-count { color: var(--th-text-grey); font-size: 0.6875rem; }
.contacts-rail-pending { padding: 6px 12px; color: var(--th-bright-yellow); font-size: 0.6875rem; }
.contacts-rail-foot { margin-top: auto; display: flex; gap: 6px; padding: 8px 12px; }

/* contacts pane */
.contacts-list { border-right: 1px solid var(--th-divider); padding: 4px 0; }
.contacts-empty { padding: 16px; color: var(--th-text-grey); display: flex; flex-direction: column; gap: 8px; }
.contact-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: none;
  border-left: 2px solid transparent;
  padding: 6px 12px; color: var(--th-text); cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.contact-row:hover { background: var(--th-pale-blue); }
.contact-row.selected { background: var(--th-pale-blue); border-left-color: var(--th-bright-orange); }
.contact-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row-status { color: var(--th-text-grey); font-size: 0.6875rem; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.contact-row-unfiled { color: var(--th-bright-orange); font-size: 0.6875rem; }
.contact-sub-badge { color: var(--th-text-grey); font-size: 0.75rem; }
.contact-sub-badge.none { color: var(--th-red); }

/* avatar */
.contact-avatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; object-fit: cover; }
.contact-avatar.initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--th-steel-blue); color: var(--th-text-bright);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em;
}

/* pending requests drawer */
.contacts-pending { border-bottom: 1px solid var(--th-divider); padding: 6px 12px; margin-bottom: 4px; }
.contacts-pending-head { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--th-text-grey); }
.contacts-pending-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.contacts-pending-jid { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-pending-actions { display: flex; gap: 4px; }

/* contact card */
.contact-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.contact-card.empty { color: var(--th-text-grey); }
.contact-card-head { display: flex; align-items: center; gap: 10px; }
.contact-card-head .contact-avatar { width: 40px; height: 40px; flex: 0 0 40px; font-size: 0.875rem; }
.contact-card-name { font-weight: 600; color: var(--th-text-bright); }
.contact-card-jid { color: var(--th-text-grey); font-size: 0.6875rem; }
.contact-card-presence { color: var(--th-text-grey); font-size: 0.6875rem; }
.contact-presence-hint {
  font-size: 0.6875rem; color: var(--th-text-grey);
  background: var(--th-bg-2); border-left: 2px solid var(--th-bright-yellow);
  padding: 5px 8px; border-radius: 2px;
}
.contact-presence-hint .link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--th-cyan); text-decoration: underline; font: inherit;
}
.contact-section-head {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--th-text-grey); border-top: 1px solid var(--th-divider);
  padding-top: 8px; margin-top: 4px;
}
.contact-vcard-field { display: flex; gap: 8px; padding: 2px 0; }
.contact-vcard-key { flex: 0 0 64px; color: var(--th-text-grey); font-size: 0.6875rem; }
.contact-vcard-val { flex: 1; min-width: 0; word-break: break-word; }
.contact-vcard-empty { color: var(--th-text-grey); font-style: italic; }
.contact-anno-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.contact-anno-row label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--th-text-grey); }
.contact-anno-row input[type="text"] { width: 100%; }
.contact-group-pick { display: flex; gap: 6px; align-items: stretch; }
.contact-group-select { flex: 1 1 auto; min-width: 0; }
.contact-group-new { flex: 0 0 auto; white-space: nowrap; }
.contact-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.contact-tag, .contact-prop { background: var(--th-pale-purple); color: var(--th-text-bright);
  border-radius: 3px; padding: 1px 6px; font-size: 0.6875rem; }
.contact-props { display: flex; flex-direction: column; gap: 2px; }
.contact-prop .k { color: var(--th-text-grey); margin-right: 4px; }
.contact-fav { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; }
.contact-card-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Messaging address (AOR) — the bare JID you reach this contact on.
   Prominent, monospace, one-click copy, with a direct DM beside it. */
.contact-aor-row { display: flex; align-items: stretch; gap: 6px; }
.contact-aor-jid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--th-panel-2, var(--th-black));
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  color: var(--th-text-bright);
}
.contact-aor-jid:hover { border-color: var(--th-bright-blue); }
.contact-aor-jid-val {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  word-break: break-all;
}
.contact-aor-copy { flex: 0 0 auto; color: var(--th-text-grey); }
.contact-aor-dm { flex: 0 0 auto; }

/* Full-vCard extras: free-text note + category chips + actionable links. */
.contact-vcard-val.note { white-space: pre-wrap; }
.contact-vcard-val.link { color: var(--th-bright-blue); text-decoration: none; }
.contact-vcard-val.link:hover { text-decoration: underline; }
.contact-vcard-cats { display: flex; gap: 4px; flex-wrap: wrap; }
.contact-vcard-cat {
  background: var(--th-pale-purple);
  color: var(--th-text-bright);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.6875rem;
}

/* inline chat cards (contact-list.md §10) */
.bb-inline-card.contact, .bb-inline-card.contact-group { border-left: 2px solid var(--th-bright-yellow); }
.bb-inline-card.contact .bb-inline-card-kind,
.bb-inline-card.contact-group .bb-inline-card-kind { color: var(--th-bright-yellow); }

/* ── Operator decision card (treehouse.ui.decision-popup) ───────────────
   Sits OVER the COP, deliberately non-blocking: a tasking answer is
   time-critical, but so is the picture underneath it. Bottom-right keeps
   it clear of the top-left coordinate readout and the left pane toggle. */
.decision-card {
  position: absolute; right: 16px; bottom: 56px; z-index: 20;
  width: 340px; padding: 12px 14px;
  background: rgba(18, 20, 24, 0.96);
  border: 1px solid #c97531; border-left: 3px solid #c97531;
  border-radius: 4px; color: #d8d8d8;
  font-family: ui-monospace, monospace; font-size: 0.75rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}
.decision-header { display: flex; justify-content: space-between; align-items: center; }
.decision-badge {
  color: #ffb454; font-weight: 700; letter-spacing: 0.08em; font-size: 0.625rem;
}
.decision-close {
  background: none; border: none; color: #888; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.decision-close:hover { color: #ddd; }
.decision-title { margin-top: 6px; font-weight: 700; color: #fff; font-size: 0.8125rem; }
.decision-summary { margin-top: 3px; color: #aaa; line-height: 1.35; }
.decision-facts { margin-top: 8px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.decision-fact { display: contents; }
.decision-fact-label { color: #7d8590; font-size: 0.625rem; letter-spacing: 0.06em; }
.decision-fact-value { color: #d8d8d8; }
.decision-rationale {
  width: 100%; margin-top: 10px; padding: 5px 6px; resize: vertical;
  background: #0e1013; color: #d8d8d8;
  border: 1px solid #2b2f36; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 0.6875rem;
}
.decision-actions { margin-top: 8px; display: flex; gap: 6px; }
.decision-actions button {
  flex: 1; padding: 6px 0; cursor: pointer; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; border: 1px solid transparent;
}
.decision-approve { background: #1d3d24; color: #7ee08a; border-color: #2f6b3c !important; }
.decision-approve:hover { background: #255030; }
.decision-defer   { background: #3a3320; color: #e0c97e; border-color: #6b5d2f !important; }
.decision-defer:hover { background: #4a4128; }
.decision-deny    { background: #3d1d1d; color: #e08a8a; border-color: #6b2f2f !important; }
.decision-deny:hover { background: #502525; }
.decision-foot { margin-top: 8px; color: #6b727c; font-size: 0.625rem; }

/* Counted tray badge for the non-urgent proposal classes. */
.decision-tray-badge {
  background: #2a2118; color: #ffb454; border: 1px solid #6b5d2f;
  border-radius: 3px; padding: 3px 8px; cursor: pointer;
  font-family: ui-monospace, monospace; font-size: 0.625rem; letter-spacing: 0.06em;
}

/* ===========================================================================
   Link Analysis room (link-analysis-tool.md) — .th-la
   Node-link graph over HERO refs: SVG surface, kind-category node
   discs, direction-arrowed edges, focus+context hover dimming.
   =========================================================================== */

.th-la {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--th-panel);
  outline: none;             /* tabindex host for Cmd/Ctrl+Z */
  /* Category palette — mid-tones that read on both themes; light
     theme darkens them below. One custom prop per kind-spec
     :category, consumed by the node disc stroke + monogram. */
  --la-cat-operational:    #4f8fd0;
  --la-cat-tactical:       #d05f5a;
  --la-cat-infrastructure: #4fae8e;
  --la-cat-intelligence:   #a06fc8;
  --la-cat-reference:      #b98a3d;
  --la-cat-other:          #7a8494;
}
[data-theme="light"] .th-la {
  --la-cat-operational:    #3672ad;
  --la-cat-tactical:       #b1443f;
  --la-cat-infrastructure: #358c6f;
  --la-cat-intelligence:   #7f4fa8;
  --la-cat-reference:      #93691f;
  --la-cat-other:          #5b6472;
}

/* ---- title bar + controls row ------------------------------------------- */
.th-la .la-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  min-height: var(--tabbar-h);
  background: var(--th-titlebar);
  border-bottom: 1px solid var(--th-divider);
}
.th-la .la-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--th-panel);
  border-bottom: 1px solid var(--th-divider);
}
.th-la .la-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--th-text-bright);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-la .la-counts {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  white-space: nowrap;
}
.th-la .la-btn,
.hero-share-modal .la-btn {
  background: transparent;
  border: 1px solid var(--th-border);
  border-radius: 3px;
  color: var(--th-text-grey);
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.th-la .la-btn:hover:not(:disabled),
.hero-share-modal .la-btn:hover:not(:disabled) {
  background: var(--th-bg-1);
  color: var(--th-text-bright);
  border-color: var(--th-steel-blue-2);
}
.th-la .la-btn:disabled { opacity: 0.35; cursor: default; }
/* icon-only buttons (undo/redo) — glyphs need a larger size to read */
.th-la .la-btn.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  padding: 1px 8px;
}
.th-la .la-btn.primary {
  border-color: var(--th-bright-orange);
  color: var(--th-bright-orange);
}
.th-la .la-btn.primary:hover:not(:disabled) {
  background: var(--th-dark-orange);
  color: var(--th-text-bright);
}

/* rel-filter chips — on by default, .off = that edge class is hidden */
.th-la .la-rel-chips {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 40%;
}
.th-la .la-chip {
  background: var(--th-bg-2);
  border: 1px solid var(--th-border);
  border-radius: 10px;
  color: var(--th-text-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.th-la .la-chip:hover { color: var(--th-text-bright); }
.th-la .la-chip.off {
  background: transparent;
  opacity: 0.45;
  text-decoration: line-through;
}

/* Types panel — the Object types button's bottom drawer: object-type
   (kind) toggles + the link-type (rel) toggles. */
.th-la .la-types-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px;
  background: var(--th-panel);
  border-top: 1px solid var(--th-divider);
  max-height: 30%;
  overflow-y: auto;
}
.th-la .la-types-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.th-la .la-types-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 6px;
  white-space: nowrap;
}
.th-la .la-types-none {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
/* category-colored dot inside an object-type chip */
.th-la .la-chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--la-cat-other);
}
.th-la .la-chip-dot.la-cat-operational    { background: var(--la-cat-operational); }
.th-la .la-chip-dot.la-cat-tactical       { background: var(--la-cat-tactical); }
.th-la .la-chip-dot.la-cat-infrastructure { background: var(--la-cat-infrastructure); }
.th-la .la-chip-dot.la-cat-intelligence   { background: var(--la-cat-intelligence); }
.th-la .la-chip-dot.la-cat-reference      { background: var(--la-cat-reference); }
/* the Object types button when some types are switched off */
.th-la .la-btn.filtering { border-color: var(--th-bright-yellow); }

/* ---- body + surface ----------------------------------------------------- */
.th-la .la-body { flex: 1; position: relative; min-height: 0; }
/* Split layout when the map pane is open: graph left, map right. */
.th-la .la-body.with-map { display: flex; }
.th-la .la-body.with-map .la-surface-host { position: relative; flex: 1 1 60%; }
.th-la .la-map-pane {
  flex: 0 0 40%;
  min-width: 280px;
  max-width: 60%;
  border-left: 1px solid var(--th-divider);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--th-panel);
}
.th-la .la-map-host { flex: 1; position: relative; min-height: 0; }
.th-la .la-map-caption {
  padding: 3px 10px;
  background: var(--th-titlebar);
  border-top: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-la .la-map-none { color: var(--th-bright-yellow); }
.th-la .la-btn.active {
  background: var(--th-bg-2);
  color: var(--th-text-bright);
  border-color: var(--th-steel-blue-2);
}

/* Layer-export modal (link-analysis-tool.md §2.8) */
.la-export-modal .la-export-cut,
.la-export-modal .la-export-done {
  font-size: 0.8125rem;
  color: var(--th-text-grey);
  margin: 0 0 10px;
}
.la-export-modal .la-export-name,
.la-share-modal .ds-share-input { color: var(--th-text-bright); }
.la-export-modal .la-export-name {
  width: 100%;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  font: inherit;
  padding: 6px 8px;
}
.la-export-modal .la-export-id-row,
.hero-share-modal .la-export-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.la-export-modal .la-export-id,
.hero-share-modal .la-export-id {
  flex: 1;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-bright);
  overflow-x: auto;
  white-space: nowrap;
}
.la-export-modal .ds-share-targets {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px;
  background: var(--th-panel); border: 1px solid var(--th-divider);
  min-height: 32px; align-items: center;
}
/* Save-as modal (link-analysis-tool.md §2.6) */
.la-save-as-modal input[type="text"] {
  width: 100%;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  font: inherit;
  color: var(--th-text-bright);
  padding: 6px 8px;
}
.la-save-as-modal .la-save-as-id-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.la-save-as-modal .la-save-as-id-prefix {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  white-space: nowrap;
}
.la-save-as-modal .la-save-as-id-tail {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.la-save-as-modal .la-save-as-id-err {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--th-red, #c4564b);
}
.la-export-modal .ds-share-input {
  flex: 1; min-width: 140px; border: none; background: transparent;
  color: var(--th-text-bright); font-family: var(--font-mono);
  font-size: 0.75rem; outline: none;
}
.th-la .la-surface-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* graph-canvas dot grid — orientation texture, fixed scale */
  background-image: radial-gradient(var(--th-divider) 1px, transparent 1px);
  background-size: 26px 26px;
}
.th-la .la-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.th-la .la-svg:active { cursor: grabbing; }

/* ---- nodes -------------------------------------------------------------- */
.th-la .la-node { cursor: pointer; }
.th-la .la-node > g { transition: opacity 140ms ease; }
.th-la .la-node.dim { opacity: 0.22; }
.th-la .la-node.faded { opacity: 0.5; }
.th-la .la-node.faded .la-node-label { text-decoration: line-through; }

.th-la .la-node-disc {
  fill: var(--th-panel-2);
  stroke: var(--la-cat-other);
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.th-la .la-node.hot .la-node-disc,
.th-la .la-node.selected .la-node-disc { stroke-width: 2.5; }
.th-la .la-cat-operational    .la-node-disc { stroke: var(--la-cat-operational); }
.th-la .la-cat-tactical       .la-node-disc { stroke: var(--la-cat-tactical); }
.th-la .la-cat-infrastructure .la-node-disc { stroke: var(--la-cat-infrastructure); }
.th-la .la-cat-intelligence   .la-node-disc { stroke: var(--la-cat-intelligence); }
.th-la .la-cat-reference      .la-node-disc { stroke: var(--la-cat-reference); }

.th-la .la-node.stub .la-node-disc { stroke-dasharray: 4 3; }
.th-la .la-node.stub .la-node-label { font-style: italic; opacity: 0.75; }
.th-la .la-node.substrate .la-node-disc {
  stroke: var(--th-steel-blue-2);
  stroke-dasharray: 1.5 2.5;
}

.th-la .la-node-select-ring {
  fill: none;
  stroke: var(--th-bright-orange);
  stroke-width: 1.75;
  opacity: 0.9;
}
.th-la .la-node-monogram {
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--th-text-bright);
  pointer-events: none;
}
.th-la .la-cat-operational    .la-node-monogram { fill: var(--la-cat-operational); }
.th-la .la-cat-tactical       .la-node-monogram { fill: var(--la-cat-tactical); }
.th-la .la-cat-infrastructure .la-node-monogram { fill: var(--la-cat-infrastructure); }
.th-la .la-cat-intelligence   .la-node-monogram { fill: var(--la-cat-intelligence); }
.th-la .la-cat-reference      .la-node-monogram { fill: var(--la-cat-reference); }

/* halo labels — paint-order strokes a panel-colored outline under the
   glyphs so labels stay legible over edges and the dot grid */
.th-la .la-node-label {
  text-anchor: middle;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  fill: var(--th-text-grey);
  paint-order: stroke;
  stroke: var(--th-panel);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.th-la .la-node.hot .la-node-label,
.th-la .la-node.selected .la-node-label {
  fill: var(--th-text-bright);
  font-weight: 600;
}

.th-la .la-expand-badge { cursor: pointer; }
.th-la .la-expand-badge circle {
  fill: var(--th-bright-orange);
  stroke: var(--th-panel);
  stroke-width: 1.5;
}
.th-la .la-expand-badge text {
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  fill: #0a0a0a;
  pointer-events: none;
}

@keyframes la-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.35; }
  100% { opacity: 1; }
}
.th-la .la-node.expanding .la-node-disc {
  animation: la-pulse 1.1s ease-in-out infinite;
}

/* petals — rel-group summary pills */
.th-la .la-petal-pill rect {
  fill: var(--th-bg-2);
  stroke: var(--th-steel-blue-2);
  stroke-dasharray: 4 3;
  stroke-width: 1.25;
}
.th-la .la-node.hot .la-petal-pill rect,
.th-la .la-node.selected .la-petal-pill rect { stroke: var(--th-bright-orange); }
.th-la .la-petal-text {
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  fill: var(--th-text-bright);
  pointer-events: none;
}

/* ---- edges -------------------------------------------------------------- */
.th-la .la-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 12;
  pointer-events: stroke;
}
.th-la .la-edge-line {
  fill: none;
  stroke: var(--th-steel-blue-2);
  stroke-width: 1.25;
  opacity: 0.75;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.th-la .la-edge.petal .la-edge-line { stroke-dasharray: 4 4; }
/* nearby (proximity) links — computed in this view, not refs */
.th-la .la-edge.virtual .la-edge-line { stroke-dasharray: 1.5 5; }
.th-la .la-edge.virtual .la-edge-label { font-style: italic; }
.th-la .la-edge.hot .la-edge-line {
  stroke: var(--th-bright-orange);
  stroke-width: 1.75;
  opacity: 1;
}
.th-la .la-edge.dim .la-edge-line { opacity: 0.1; }
.th-la .la-arrow-head { fill: var(--th-steel-blue-2); }

.th-la .la-edge-label {
  text-anchor: middle;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  fill: var(--th-text-grey);
  paint-order: stroke;
  stroke: var(--th-panel);
  stroke-width: 2.5px;
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.th-la .la-edge.hot .la-edge-label,
.th-la .la-edge:hover .la-edge-label { opacity: 1; }
.th-la .la-edge.dim:hover .la-edge-label { opacity: 0; }

/* ---- detail card -------------------------------------------------------- */
.th-la .la-card {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 20;
  max-width: 340px;
  background: var(--th-panel-2);
  border: 1px solid var(--th-border);
  border-radius: 4px;
  box-shadow: var(--th-shadow-soft);
  padding: 10px 12px;
}
.th-la .la-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.th-la .la-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--th-text-bright);
}
.th-la .la-card-kind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  border: 1px solid var(--th-border);
  border-radius: 3px;
  padding: 1px 5px;
}
.th-la .la-card-state {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.th-la .la-card-state.active   { color: #6fae6f; }
.th-la .la-card-state.draft    { color: var(--th-bright-yellow); }
.th-la .la-card-state.archived,
.th-la .la-card-state.retired  { color: var(--th-text-grey); }
.th-la .la-card-stub {
  font-size: 0.625rem;
  font-style: italic;
  color: var(--th-text-grey);
}
.th-la .la-card-id {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--th-text-grey);
  margin-top: 3px;
  word-break: break-all;
}
.th-la .la-card-geo {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
  margin-top: 2px;
}
.th-la .la-card-desc {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  margin-top: 6px;
  max-height: 3.2em;
  overflow: hidden;
}
.th-la .la-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---- status strip ------------------------------------------------------- */
.th-la .la-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 3px 12px;
  background: var(--th-titlebar);
  border-top: 1px solid var(--th-divider);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.th-la .la-status-stubs { color: var(--th-bright-yellow); }
.th-la .la-status-busy {
  color: var(--th-bright-orange);
  animation: la-pulse 1.1s ease-in-out infinite;
}

/* ---- empty state -------------------------------------------------------- */
.th-la .la-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--th-text-grey);
  font-size: 0.8125rem;
  max-width: 460px;
  margin: 0 auto;
}
.th-la .la-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--th-text-bright);
}
.th-la .la-empty-row { display: flex; gap: 8px; align-items: center; }
.th-la .la-empty-row select {
  background: var(--th-panel-2);
  color: var(--th-text-bright);
  border: 1px solid var(--th-border);
  border-radius: 3px;
  font-size: 0.75rem;
  padding: 4px 8px;
}
.th-la .la-empty-hint { font-size: 0.6875rem; opacity: 0.8; }

/* Saved-view affordances (link-analysis-tool.md §2.6) */
.th-la .la-dirty {
  color: var(--th-bright-orange);
  font-size: 0.75rem;
  vertical-align: middle;
}

/* Thumbnail — the rich card's vector snapshot (§2.7). Colored by the
   same category palette the room uses; consumed by the chat/library
   inline card, so the vars live on .la-thumb itself (the card isn't
   inside .th-la). */
.la-thumb {
  --la-cat-operational:    #4f8fd0;
  --la-cat-tactical:       #d05f5a;
  --la-cat-infrastructure: #4fae8e;
  --la-cat-intelligence:   #a06fc8;
  --la-cat-reference:      #b98a3d;
  --la-cat-other:          #7a8494;
  display: block;
  width: 100%;
  height: auto;
  background: var(--th-panel);
  border-radius: 3px;
}
[data-theme="light"] .la-thumb {
  --la-cat-operational:    #3672ad;
  --la-cat-tactical:       #b1443f;
  --la-cat-infrastructure: #358c6f;
  --la-cat-intelligence:   #7f4fa8;
  --la-cat-reference:      #93691f;
  --la-cat-other:          #5b6472;
}
.la-thumb .la-thumb-edges line {
  stroke: var(--th-steel-blue-2);
  stroke-width: 1;
  opacity: 0.6;
}
.la-thumb .la-thumb-nodes circle          { fill: var(--la-cat-other); }
.la-thumb circle.la-cat-operational       { fill: var(--la-cat-operational); }
.la-thumb circle.la-cat-tactical          { fill: var(--la-cat-tactical); }
.la-thumb circle.la-cat-infrastructure    { fill: var(--la-cat-infrastructure); }
.la-thumb circle.la-cat-intelligence      { fill: var(--la-cat-intelligence); }
.la-thumb circle.la-cat-reference         { fill: var(--la-cat-reference); }
.la-thumb circle.seed {
  stroke: var(--th-bright-orange);
  stroke-width: 1.5;
}

/* Link-view rich card (link-analysis-tool.md §2.7) — a saved graph
   shared into a channel or library doc: SVG thumbnail + counts, click
   reopens it in the Link Analysis tool. */
.bb-inline-card.link-view {
  border-left-color: var(--th-pale-purple);
  max-width: 320px;
  gap: 5px;
}
.bb-inline-card.link-view .bb-inline-card-kind {
  color: var(--th-pale-purple);
  letter-spacing: 0.06em;
}
.bb-inline-card.link-view .la-card-thumb {
  margin: 2px 0;
  border: 1px solid var(--th-divider);
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}
.bb-inline-card.link-view .bb-inline-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--th-text-grey);
}
.bb-inline-card.link-view .la-card-open-cue {
  margin-left: auto;
  color: var(--th-bright-orange);
}

/* Link-view Share modal (link-analysis-tool.md §2.7). Reuses the global
   .ds-share-chip / .ds-share-suggestion styles; only the target-box
   layout is scoped, so mirror it here. */
.la-share-modal .la-share-subject,
.hero-share-modal .la-share-subject {
  color: var(--th-text-grey);
  font-weight: 400;
  font-size: 0.8125rem;
}
.la-share-modal .ds-share-targets,
.hero-share-modal .ds-share-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  min-height: 32px;
  align-items: center;
}
.la-share-modal .ds-share-input,
.hero-share-modal .ds-share-input {
  flex: 1;
  min-width: 140px;
  border: none;
  background: transparent;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  outline: none;
}
.la-share-modal .la-share-message,
.hero-share-modal .la-share-message {
  width: 100%;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  border-radius: 2px;
  color: var(--th-text-bright);
  font: inherit;
  padding: 6px 8px;
  resize: vertical;
}
.la-share-modal .la-share-hint,
.hero-share-modal .la-share-hint {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  margin: 4px 0 0;
}

/* User card modal — vCard identity behind any clickable person row
   (MUC roster, DM participants). Header: 48px avatar square beside
   name/JID; body: k/v rows mirroring the DM info-pane's shape. */
.user-card-modal .user-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.user-card-modal .user-card-head .th-avatar-sq {
  width: 48px;
  height: 48px;
  font-size: 1rem;
  border-radius: 7px;
}
.user-card-modal .user-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--th-text-bright);
}
.user-card-modal .user-card-jid {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--th-text-grey);
}
.user-card-modal .user-card-nick {
  font-size: 0.6875rem;
  color: var(--th-text-grey);
  font-style: italic;
}
.user-card-modal .user-card-row {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--th-divider);
}
.user-card-modal .user-card-row .k {
  flex: 0 0 90px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
  line-height: 1.9;
}
.user-card-modal .user-card-row .v {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--th-text-bright);
}
.user-card-modal .user-card-note {
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--th-panel);
  border-left: 2px solid var(--th-divider);
  font-size: 0.8125rem;
  color: var(--th-text-bright);
  white-space: pre-wrap;
}
.user-card-modal .user-card-band { margin-top: 10px; }
.user-card-modal .user-card-band-head {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-grey);
  margin-bottom: 2px;
}
/* People rows are now clickable — cursor cue on the roster + DM
   participant surfaces. */
.roster li.roster-member { cursor: pointer; }
.roster li.roster-member:hover { background: var(--th-panel); }
.dm-info-participant[role="button"] { cursor: pointer; }
.dm-info-participant[role="button"]:hover { background: var(--th-panel); }

/* New-conversation modal (the DM section's hover `+`, full-slack.md
   §3.1) — chips-in-a-box target picker over a contact list. */
.dm-new-modal .dm-new-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  background: var(--th-panel);
  border: 1px solid var(--th-divider);
  min-height: 32px;
  align-items: center;
}
.dm-new-modal .dm-new-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 7px;
  background: var(--th-steel-blue-3, var(--th-divider));
  border-radius: 3px;
  font-size: 0.75rem;
  color: var(--th-text-bright);
}
.dm-new-modal .dm-new-chip-x {
  background: transparent;
  border: none;
  color: var(--th-text-grey);
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0 2px;
}
.dm-new-modal .dm-new-chip-x:hover { color: var(--th-red, #c4564b); }
.dm-new-modal .dm-new-input {
  flex: 1;
  min-width: 140px;
  border: none;
  background: transparent;
  color: var(--th-text-bright);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  outline: none;
}
.dm-new-modal .dm-new-list {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 8px;
  border-top: 1px solid var(--th-divider);
}
.dm-new-modal .dm-new-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--th-divider);
  color: var(--th-text-bright);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
}
.dm-new-modal .dm-new-row:hover { background: var(--th-panel); }
.dm-new-modal .dm-new-row-name {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-new-modal .dm-new-row-status {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--th-text-grey);
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Embedded object cards inside a library document body (§2.7). Each
   lone-ref line renders as a card between markdown runs. */
.lib-md-cards { display: flex; flex-direction: column; gap: 2px; }
.lib-md-cards .th-markdown { margin: 0; }
.lib-md-card { margin: 6px 0; }