/* ═══════════════════════════════════════════
   HQ The Floor — Phase 1
   Project-scoped multi-agent room. Linear stream.
   Depends on tokens.css; mirrors chat.css aesthetic.
   ═══════════════════════════════════════════ */

/* ── View wrapper ──────────────────────────── */
.floor-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Header (project selector + title) ─────── */
.floor-header {
  padding: 14px var(--space-5) 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floor-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.floor-header__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.floor-header__sub {
  font-size: 11px;
  color: var(--color-dim);
  margin-top: 2px;
}

/* ── Project selector (button row) ─────────── */
.floor-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.floor-project-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-dim);
  color: var(--color-dim);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 32px;
  white-space: nowrap;
}

.floor-project-btn:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.floor-project-btn.is-active {
  /* Inline styles from JS set background + border-color + color to the
     project color; this rule only adds the amber accent ring. */
  box-shadow: inset 0 0 0 1px var(--color-amber-glow);
}

/* ── Presence strip ────────────────────────── */
.floor-presence {
  padding: 8px var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex-shrink: 0;
  min-height: 38px;
}

.floor-presence__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-amber);
  flex-shrink: 0;
}

.floor-presence__empty {
  font-size: 11px;
  color: var(--color-dim);
  font-style: italic;
}

.floor-presence__avatars {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.floor-presence__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}

/* Wraps a 20px avatar to give it a 44px tap target without bloating the
   row visual weight. Background transparent so only the avatar shows;
   amber outline ring + 📞 emoji affordance on hover/focus signals
   tappability. Per Brian's Q2/Q9 stamps on voice-mode-end-to-end-plan. */
.floor-presence__call-btn {
  background: transparent;
  border: none;
  padding: 12px;          /* 12 + 20 + 12 = 44px tap target */
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  transition: background 120ms ease;
}
.floor-presence__call-btn:hover {
  background: rgba(212, 165, 116, 0.10);
}
.floor-presence__call-btn:focus {
  outline: 2px solid #d4a574;
  outline-offset: 2px;
}
/* On hover, show a tiny 📞 indicator at the avatar's bottom-right. */
.floor-presence__call-btn::after {
  content: "📞";
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}
.floor-presence__call-btn:hover::after,
.floor-presence__call-btn:focus::after {
  opacity: 1;
}

/* Floor composer 📞 button uses the shared .floor-voice-btn style from
   voice-mode.css. It sits in .floor-input-row between the mic and the
   stop/send buttons — mirroring the chat composer's mic → 📞 → stop → send
   ordering. The input row's flex layout positions it naturally; no extra
   positioning needed here. Moved from .floor-header__row on 2026-05-11
   per Brian's feedback: 📞 belongs with send-modalities, not header tools. */

.floor-presence__more {
  font-size: 10px;
  color: var(--color-dim);
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-mono);
}

/* ── Throttle-queue banner ──────────────────────
   Sits between the presence strip and the stream. Surfaces cold-spawn
   queued state from `src/claude/spawn-throttle-queue.ts`. Muted styling
   (dim, italic) so it reads as informational, not alarming — distinct
   from the amber presence-strip accent. Auto-hides via the [hidden]
   attribute when the queue is empty. See `renderThrottleBanner` in
   public/js/floor.js. */
.floor-throttle-banner {
  padding: 6px var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-dim);
  font-style: italic;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-throttle-banner[hidden] {
  display: none;
}

.floor-throttle-banner__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim);
  font-style: normal;
  flex-shrink: 0;
}

.floor-throttle-banner__count {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--color-text);
  flex-shrink: 0;
}

.floor-throttle-banner__sep {
  color: var(--color-border);
  flex-shrink: 0;
}

.floor-throttle-banner__eta {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Message stream ────────────────────────── */
.floor-stream-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.floor-stream {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dim);
  font-size: 12px;
  font-style: italic;
  padding: 40px 20px;
  text-align: center;
}

/* ── Event rows ────────────────────────────── */
.floor-event {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: fade-in 0.2s ease;
}

.floor-event--user {
  flex-direction: row-reverse;
}

/* Small/subtle events (system, delegation stub, result stub, narration stub) */
.floor-event--compact {
  opacity: 0.75;
  font-size: 11px;
  align-items: center;
  padding: 2px 0;
}

.floor-event--compact .floor-event__content {
  flex: 1;
  color: var(--color-dim);
  font-family: var(--font-mono);
}

.floor-event__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  align-self: flex-start;
}

.floor-event__avatar--user {
  /* Amber (Brian's color) */
  background: linear-gradient(135deg, var(--color-amber-dim), var(--color-amber-glow));
  border: 1.5px solid var(--color-amber-glow);
  color: var(--color-amber);
}

.floor-event__body {
  min-width: 0;
  max-width: 75%;
  display: flex;
  flex-direction: column;
}

.floor-event__body--user {
  align-items: flex-end;
}

.floor-event__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 3px;
}

.floor-event__meta--user {
  justify-content: flex-end;
}

.floor-event__name {
  font-size: 11px;
  font-weight: 700;
}

.floor-event__time {
  font-size: var(--text-sm);
  color: var(--color-dim);
  font-family: var(--font-mono);
}

.floor-event__bubble {
  padding: 9px 13px;
  border-radius: var(--radius-xl);
  font-size: var(--text-md);
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.floor-event__bubble--agent {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.floor-event__bubble--user {
  background: var(--color-amber-dim);
  border: 1px solid var(--color-amber-glow);
  color: var(--color-text);
}

/* Minimal-chrome stub rows for delegation / result / narration (Phase 2+ populates). */
.floor-event__stub {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 10px;
  border-left: 2px solid var(--color-muted);
  color: var(--color-dim);
  font-size: 11px;
  font-family: var(--font-mono);
}

.floor-event__stub-icon {
  flex-shrink: 0;
  color: var(--color-muted);
}

/* Markdown inside agent bubbles */
.floor-event__bubble p { margin-bottom: 8px; }
.floor-event__bubble p:last-child { margin-bottom: 0; }
.floor-event__bubble ul, .floor-event__bubble ol {
  margin: 6px 0 8px 20px;
}
.floor-event__bubble li { margin-bottom: 4px; }
.floor-event__bubble code {
  background: var(--color-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.floor-event__bubble pre {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
}
.floor-event__bubble pre code {
  background: none;
  padding: 0;
}
.floor-event__bubble strong { color: var(--color-amber); }
.floor-event__bubble a {
  color: var(--color-blue);
  text-decoration: underline;
}

/* ── "New messages" jump pill (auto-scroll paused) ── */
.floor-jump-pill {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-amber);
  color: var(--color-bg);
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  box-shadow: var(--shadow-amber);
  z-index: 5;
  display: none;
}

.floor-jump-pill.is-visible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: fade-in 0.2s ease;
}

/* ── Input bar ─────────────────────────────── */
.floor-input-area {
  padding: 12px var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-panel);
  flex-shrink: 0;
}

.floor-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.floor-textarea {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 10px 12px;
  font-size: var(--text-md);
  outline: none;
  font-family: var(--font-body);
  resize: none;
  min-height: 44px;
  max-height: 200px;
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
  overflow-y: auto;
  line-height: 1.5;
}

.floor-textarea:focus {
  border-color: var(--color-amber-glow);
}

.floor-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.floor-send-btn {
  background: var(--color-amber);
  color: var(--color-bg);
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  font-family: var(--font-body);
  transition: opacity var(--transition-fast);
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}

.floor-send-btn:hover  { opacity: 0.9; }
.floor-send-btn:active { opacity: 0.8; }
.floor-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Floor composer mic — sized to match the 44px send button so the row
   visually balances. Inherits all icon/pulse/listening styles from
   .chat-mic-btn in chat.css. */
.floor-mic-btn {
  width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
.floor-mic-btn .chat-mic-btn__icon { font-size: 18px; }

.floor-input-hint {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 6px;
  display: flex;
  gap: 12px;
}

/* ── Spawn B — composer bar (typing indicator + routing pill) ──────────────
   The composer bar sits ABOVE the input row and hosts two surfaces:
     1. Persistent typing indicator (.floor-typing-indicator) — three pulsing
        dots that show whenever ANY agent in the active project has an
        in-flight Claude process. Sourced from `floor:active_count` WS event.
     2. Routing pill (.floor-routing-pill) — an informational badge showing
        which agent the next user message will route to (sticky-route or
        chief default). Read-only v1; tap-to-reset deferred. */
.floor-composer-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 22px;
  margin-bottom: 6px;
}

/* Three pulsing dots — pulse cycle 1.4s with 0.2s stagger between dots. The
   amber accent at 60% opacity stays subtle so the indicator doesn't compete
   with the message stream above. */
.floor-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.floor-typing-indicator[hidden] { display: none; }
.floor-typing-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-amber);
  opacity: 0.6;
  animation: floor-typing-pulse 1.4s ease-in-out infinite;
}
.floor-typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
.floor-typing-indicator__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes floor-typing-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50%      { transform: scale(1.0); opacity: 0.85; }
}

/* Respect prefers-reduced-motion: still show dots (signal carries info) but
   freeze the pulse so the reader-experience setting is honored. */
@media (prefers-reduced-motion: reduce) {
  .floor-typing-indicator__dot {
    animation: none;
    opacity: 0.7;
  }
}

/* Routing pill — small bordered badge showing "→ <agent name>". Color is
   set inline by floor.js (per-agent accent), tokens here own the rest. */
.floor-routing-pill {
  font-size: var(--text-sm);
  padding: 2px 10px;
  border: 1px solid var(--color-amber);
  border-radius: 999px;
  color: var(--color-amber);
  display: inline-block;
  line-height: 1.4;
  background: transparent;
  white-space: nowrap;
}
.floor-routing-pill[hidden] { display: none; }

/* Stop button — sits between mic and send. Visible only when the active
   process count is > 0. Red so it reads as a hard stop. The 44px floor
   matches the send button so the row is balanced and the button hits the
   mobile touch target. */
.floor-stop-btn {
  background: var(--color-bg);
  color: #d62828;
  border: 1px solid #d62828;
  padding: 0 14px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  line-height: 1;
}
.floor-stop-btn:hover  { background: #d6282822; }
.floor-stop-btn:active { background: #d6282844; }
.floor-stop-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.floor-stop-btn[hidden] { display: none; }

/* ── Empty / error placeholder for when no projects exist ── */
.floor-no-projects {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dim);
  font-size: 12px;
  padding: 40px 20px;
  text-align: center;
}

/* ── Mobile breakpoints ────────────────────── */
@media (max-width: 768px) {
  .floor-header {
    padding: 12px var(--space-4) 8px;
  }

  .floor-presence {
    padding: 6px var(--space-4);
  }

  .floor-stream {
    padding: var(--space-4);
  }

  .floor-event__body {
    max-width: 85%;
  }

  .floor-input-hint {
    display: none;
  }

  /* iOS zoom suppression — textarea font-size must be >= 16px on phone. */
  .floor-textarea {
    font-size: 16px;
  }

  .floor-input-area {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
}

@media (max-width: 480px) {
  .floor-header {
    padding: 10px var(--space-3) 6px;
  }

  .floor-presence {
    padding: 6px var(--space-3);
  }

  .floor-stream {
    padding: var(--space-3);
  }

  .floor-input-area {
    padding: 10px var(--space-3);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
  }

  .floor-project-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  /* Composer crowding fix (2026-05-11 Playwright probe): at 375px with
     voice mode enabled (mic visible) the textarea was collapsing to
     ~97px — unusable. Tighten the row gap and the send button's
     horizontal padding so the textarea keeps usable width. The 📞 + mic
     + stop already meet the 44×44 floor; the send button shrinks from
     ~64px to a 44px square while still showing "Send". */
  .floor-input-row { gap: 4px; }
  .floor-send-btn { padding: 10px 10px; min-width: 44px; }
  /* Mirror chat-stop-btn narrow-viewport posture: icon-only 44×44. The
     floor-stop-btn doesn't carry an inline label, but the wide padding
     was eating row width unnecessarily. */
  .floor-stop-btn { padding: 0; width: 44px; min-width: 44px; }
}

/* ── Processing indicator (three-dot "agent is thinking") ──────────────────
   Anchored at the bottom of the stream after the user posts a message,
   replaced by the first agent message bubble that arrives. The animation
   itself lives in components.css under .typing-dots — shared with chat.js
   and dashboard.js so the visual signal is consistent across surfaces. */
.floor-event--processing {
  /* Match the existing .floor-event row layout (avatar + body), reuse. */
  opacity: 0.92;
}

.floor-event--processing .floor-event__bubble--agent {
  /* Slightly tighter padding than a message bubble so the dots feel like a
     status, not a content line. */
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Floor v2 — structured-payload chat bubbles, thread sidebar, journal viewer
   Wave 2C frontend. Renderer markup contract lives at:
     public/js/components/chat-bubble-v2.js
     public/js/components/floor-thread-sidebar.js
     public/js/components/floor-journal-viewer.js
   All variables defined in tokens.css; no hardcoded colors.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── v2 chat bubble (renders inside .floor-event__bubble--agent) ───────── */
.floor-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Why-summon banner — small contextual prefix above the summary, "Bringing
   in @x because: …". Subtle border-left accent so it reads as meta-info. */
.floor-v2__why-summon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-dim);
  padding: 4px 8px;
  border-left: 2px solid var(--color-amber-glow);
  background: var(--color-amber-dim);
  border-radius: var(--radius-sm);
}
.floor-v2__why-summon-prefix {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--text-xs);
  color: var(--color-amber);
}
.floor-v2__why-summon-text {
  color: var(--color-text);
}

/* Summary — the prominent first line. Heavier font weight + slight bump in
   line-height for readability. Voice hint icon (when voiceMode is on) sits
   inline as an opacity-low affordance. */
.floor-v2__summary {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
}
.floor-v2__summary-text {
  flex: 1;
  min-width: 0;
}
.floor-v2__voice-hint {
  font-size: var(--text-base);
  opacity: 0.7;
  cursor: help;
  flex-shrink: 0;
  /* Aligns to the descender of the heading — visually centered with the
     summary's first line without forcing the icon to baseline. */
  line-height: 1.55;
}

/* Show details disclosure — native <details>/<summary> element. Browser
   handles open/close on click; CSS reflects state via [open] selector.
   (Hotfix 2 2026-05-04: was a custom button + sibling div with hidden attr,
   never wired to a click handler. Switched to native widget.) */
.floor-v2__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.floor-v2__details-toggle {
  /* <summary> default rendering shows a list-item triangle marker — suppress
     so we can render our own ▾/▴ glyph via ::after (matches the prior
     button-based disclosure's visual). */
  list-style: none;
  cursor: pointer;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-dim);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
  transition: all var(--transition-fast);
  /* Touch target — 44px is the minimum on mobile; on desktop 32 is fine. */
  min-height: 32px;
}
/* Suppress the default disclosure triangle in WebKit/Safari. */
.floor-v2__details-toggle::-webkit-details-marker {
  display: none;
}
.floor-v2__details-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-amber-glow);
}
.floor-v2__details[open] > .floor-v2__details-toggle {
  color: var(--color-amber);
  border-color: var(--color-amber-glow);
}
.floor-v2__details[open] > .floor-v2__details-toggle::after {
  content: " ▴";
}
.floor-v2__details:not([open]) > .floor-v2__details-toggle::after {
  content: " ▾";
}
.floor-v2__details-body {
  padding: 8px 12px;
  border-left: 2px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: 1.55;
}

/* Question chips — interactive, prefill the composer on click (data-question
   attribute carries the prefill text). Wrap on mobile; ≥44px tap target. */
.floor-v2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.floor-v2__chip {
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 12px;
  border-radius: 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  min-height: 32px;
  max-width: 100%;
  /* Allow chips to wrap text on long questions; chips themselves still wrap
     in their parent flexbox. */
  white-space: normal;
  line-height: 1.4;
}
.floor-v2__chip:hover {
  border-color: var(--color-amber-glow);
  background: var(--color-amber-dim);
  color: var(--color-amber);
}
.floor-v2__chip:active {
  transform: translateY(1px);
}
.floor-v2__chip:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

/* Options card — list of labeled options, each with a collapsible
   <details>/<summary> exposing pros/cons. Native disclosure widget for
   keyboard + screen-reader correctness. */
.floor-v2__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.floor-v2__option {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floor-v2__option + .floor-v2__option {
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.floor-v2__option-label {
  font-weight: 700;
  color: var(--color-amber);
  font-size: var(--text-md);
}
.floor-v2__option-details {
  /* Reset native <details> baseline. */
  margin: 0;
}
.floor-v2__option-summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-dim);
  padding: 4px 0;
  user-select: none;
}
.floor-v2__option-summary::-webkit-details-marker { display: none; }
.floor-v2__option-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--transition-fast);
}
.floor-v2__option-details[open] > .floor-v2__option-summary::before {
  content: "▾ ";
}
.floor-v2__option-summary:hover { color: var(--color-text); }
.floor-v2__option-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 4px 14px;
  font-size: var(--text-md);
}
.floor-v2__option-list-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-dim);
  margin-bottom: 2px;
}
.floor-v2__option-pros .floor-v2__option-list-label { color: var(--color-green); }
.floor-v2__option-cons .floor-v2__option-list-label { color: var(--color-red); }
.floor-v2__option-pros ul,
.floor-v2__option-cons ul {
  margin: 0 0 0 16px;
  padding: 0;
  list-style: disc;
}
.floor-v2__option-pros li,
.floor-v2__option-cons li {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 2px;
}

/* ── Floor v2 layout shell — sidebar + main column ──────────────────────
   When the v2 sidebar is mounted, .floor-view becomes a horizontal flex
   container with the sidebar on the left and the existing stream-stack on
   the right. The sidebar JS mounts into a .floor-thread-sidebar root. */
.floor-view--v2 {
  flex-direction: row;
}
.floor-view--v2 .floor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ── Thread sidebar (left rail) ─────────────────────────────────────────
   Slack-like list: one row per thread for the active project. MAIN is
   pinned at top. Selected row gets the amber accent. */
.floor-thread-sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}

.floor-thread-sidebar__header {
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.floor-thread-sidebar__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-amber);
}
.floor-thread-sidebar__close {
  /* Mobile drawer close button — hidden on desktop. */
  background: transparent;
  border: 0;
  color: var(--color-dim);
  font-size: var(--text-xl);
  cursor: pointer;
  display: none;
  padding: 4px 8px;
  line-height: 1;
}

.floor-thread-sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.floor-thread-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--space-3);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: background var(--transition-fast), border-left-color var(--transition-fast);
  min-height: 44px;
}
.floor-thread-row:hover {
  background: var(--color-panel2);
}
.floor-thread-row.is-active {
  background: var(--color-panel2);
  border-left-color: var(--color-amber);
}
.floor-thread-row:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: -2px;
}

.floor-thread-row__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--color-panel2);
  color: var(--color-dim);
  border: 1px solid var(--color-border);
}
.floor-thread-row.is-active .floor-thread-row__avatar {
  background: var(--color-amber-dim);
  border-color: var(--color-amber-glow);
  color: var(--color-amber);
}

.floor-thread-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.floor-thread-row__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  /* Truncate long titles to keep row height stable. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor-thread-row__title-input {
  /* Inline-edit input — replaces the title text on click. */
  background: var(--color-bg);
  border: 1px solid var(--color-amber-glow);
  color: var(--color-text);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-family: var(--font-body);
  font-weight: 600;
  width: 100%;
  outline: none;
}
.floor-thread-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-dim);
  font-family: var(--font-mono);
}
.floor-thread-row__time {
  font-size: var(--text-xs);
  color: var(--color-dim);
}

.floor-thread-row__unread {
  background: var(--color-amber);
  color: var(--color-bg);
  font-weight: 700;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  min-width: 18px;
  text-align: center;
}

/* Per-thread voice opt-in toggle (Wave 3A). Renders as a small inline
 * speaker glyph; opacity carries the "muted vs active" signal in addition
 * to the glyph swap so the state is visible at a glance. The element is a
 * <span role="button"> rather than a nested <button> because the row's
 * outer element is itself a <button> and nested <button> is invalid
 * markup. Click handling is delegated through the row's container in
 * floor-thread-sidebar.js#onClick. */
.floor-thread-row__voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 120ms ease, background 120ms ease;
  user-select: none;
}
.floor-thread-row__voice:hover,
.floor-thread-row__voice:focus-visible {
  opacity: 1;
  background: var(--color-border-soft, rgba(255,255,255,.06));
  outline: none;
}
.floor-thread-row__voice.is-on {
  opacity: 1;
  color: var(--color-amber);
}

/* Pencil rename button — Bug L follow-up. Single-click triggers inline
 * rename so the gesture works on touch (where dblclick is unreliable) and
 * doesn't fight the row's single-click select handler. Element is a
 * <span role="button"> for the same reason the voice toggle is — nested
 * <button> inside the row's outer <button> is invalid HTML. Click handling
 * is delegated through the row's container in
 * floor-thread-sidebar.js#onClick (rename branch checked before row-select
 * with ev.stopPropagation() so the rerender doesn't tear down the input). */
.floor-thread-row__rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  margin-left: 4px;
  opacity: 0.5;
  transition: opacity 120ms ease, background 120ms ease;
  user-select: none;
}
.floor-thread-row__rename-btn:hover,
.floor-thread-row__rename-btn:focus-visible {
  opacity: 1;
  background: var(--color-border-soft, rgba(255,255,255,.06));
  outline: none;
}

/* Generic per-row action button (move-up ⬆️, move-down ⬇️, archive 📦,
 * reactivate 🔄). Mirrors the rename pencil pattern: <span role="button">
 * to keep nested-button HTML invalid, opacity-driven hover affordance,
 * 22px square so the touch target stays close to 44px when the parent
 * row's flex gap is included. Click handling is delegated through the
 * sidebar's onClick router with stopPropagation per action so the click
 * doesn't fall through to the row's thread-select gesture. */
.floor-thread-row__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  margin-left: 2px;
  opacity: 0.5;
  transition: opacity 120ms ease, background 120ms ease;
  user-select: none;
}
.floor-thread-row__action-btn:hover,
.floor-thread-row__action-btn:focus-visible {
  opacity: 1;
  background: var(--color-border-soft, rgba(255,255,255,.06));
  outline: none;
}

/* Kebab (⋮) overflow button — replaces the prior 4-button cluster
 * (⬆️ ⬇️ ✏️ 📦) which Brian flagged as squeezing the title to ~2 letters.
 * Visually matches the existing rename pencil pattern (22px square,
 * opacity-driven hover affordance) so it reads as a sibling of the
 * voice-toggle 🔊 that stays inline. Click handling lives in
 * floor-thread-sidebar.js#toggleKebabMenu. */
.floor-thread-row__kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  margin-left: 4px;
  opacity: 0.5;
  transition: opacity 120ms ease, background 120ms ease;
  user-select: none;
}
.floor-thread-row__kebab:hover,
.floor-thread-row__kebab:focus-visible,
.floor-thread-row__kebab[aria-expanded="true"] {
  opacity: 1;
  background: var(--color-border-soft, rgba(255,255,255,.06));
  outline: none;
}

/* Kebab popover menu — absolutely-positioned next to the trigger kebab.
 * Rendered as a sibling of the row (not a child) because the row is
 * itself a <button> and nesting interactive elements inside a <button>
 * is invalid HTML. The host (sidebar list) is set to position: relative
 * by the JS so the menu's absolute coords resolve against it. */
.floor-thread-row__menu {
  position: absolute;
  background: var(--color-bg-elev, #2a2a2a);
  border: 1px solid var(--color-border, rgba(255,255,255,.1));
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  padding: 4px 0;
  min-width: 150px;
  z-index: 100;
}
.floor-thread-row__menu-item {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  color: var(--color-text, #e8e8e8);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}
.floor-thread-row__menu-item:hover,
.floor-thread-row__menu-item:focus {
  background: var(--color-border-soft, rgba(255,255,255,.06));
  outline: none;
}

/* Archived disclosure at the bottom of the sidebar list. Uses the native
 * <details>/<summary> pair so the open/closed state is keyboard-accessible
 * with no extra JS. The summary mirrors the thread-row visual scale so the
 * disclosure feels like a continuation of the list, not a footer. */
.floor-thread-sidebar__archived {
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}
.floor-thread-sidebar__archived-summary {
  cursor: pointer;
  list-style: none;
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-dim);
  font-weight: 600;
  letter-spacing: 0.3px;
  user-select: none;
}
.floor-thread-sidebar__archived-summary::-webkit-details-marker {
  display: none;
}
.floor-thread-sidebar__archived-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 120ms ease;
}
.floor-thread-sidebar__archived[open] > .floor-thread-sidebar__archived-summary::before {
  content: "▾ ";
}
.floor-thread-sidebar__archived-summary:hover,
.floor-thread-sidebar__archived-summary:focus-visible {
  color: var(--color-text);
  outline: none;
}
.floor-thread-sidebar__archived-list {
  margin-top: 4px;
}

/* Archived row — visually muted so it reads as inactive at a glance. The
 * row is a <div> rather than a <button> because clicking the row body
 * does nothing (only the 🔄 reactivate button is interactive); making
 * it a button would imply an action surface that isn't there. */
.floor-thread-row--archived,
.floor-thread-row.is-archived {
  opacity: 0.5;
  cursor: default;
}
.floor-thread-row--archived:hover,
.floor-thread-row.is-archived:hover {
  opacity: 0.7;
}
.floor-thread-row--archived .floor-thread-row__action-btn {
  /* Reactivate stays at full opacity even on a muted row so the affordance
   * is discoverable. Click event propagates through the parent's
   * 0.5-opacity layer without inheriting it. */
  opacity: 0.9;
}
.floor-thread-row--archived .floor-thread-row__action-btn:hover {
  opacity: 1;
}

/* MAIN row — always pinned at top, slightly distinguished. */
.floor-thread-row--main {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.floor-thread-row--main .floor-thread-row__title {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--text-sm);
}

/* Empty / loading states for the sidebar list. */
.floor-thread-sidebar__empty {
  padding: 12px var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-dim);
  font-style: italic;
  text-align: center;
}

/* Mobile drawer — slides in from the left. */
.floor-thread-sidebar-toggle {
  /* "Threads" hamburger that opens the drawer on mobile. Hidden on desktop. */
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-dim);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 32px;
}
.floor-thread-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9;
}
.floor-thread-sidebar-backdrop.is-visible { display: block; }

@media (max-width: 768px) {
  .floor-thread-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    width: min(280px, 80vw);
    box-shadow: 4px 0 14px rgba(0, 0, 0, 0.4);
    /* iOS safe-area handling for the drawer. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .floor-thread-sidebar.is-open {
    transform: translateX(0);
  }
  .floor-thread-sidebar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
  }
  .floor-thread-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  /* On mobile the v2 view collapses back to a single column — sidebar is
     a drawer, not an inline rail. */
  .floor-view--v2 {
    flex-direction: column;
  }
}

/* ── Journal viewer (modal / drawer) ────────────────────────────────────
   Three sections: latest state, open questions, why participants are
   here. Brian-annotation input at the bottom (currently disabled — Wave 2B
   will enable saving once the schema column lands). */
.floor-journal-viewer {
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  width: 360px;
  max-width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

.floor-journal-viewer__header {
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  background: var(--color-panel2);
}
.floor-journal-viewer__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-amber);
  margin: 0;
}
.floor-journal-viewer__close {
  background: transparent;
  border: 0;
  color: var(--color-dim);
  font-size: var(--text-xl);
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: var(--radius-sm);
  min-width: 32px;
  min-height: 32px;
}
.floor-journal-viewer__close:hover { color: var(--color-text); }

.floor-journal-viewer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.floor-journal-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.floor-journal-section__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-amber);
  margin: 0;
}
.floor-journal-section__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
}
.floor-journal-section__body p { margin: 0 0 8px; }
.floor-journal-section__body p:last-child { margin: 0; }
.floor-journal-section__body ul,
.floor-journal-section__body ol {
  margin: 6px 0 8px 20px;
  padding: 0;
}
.floor-journal-section__body li { margin-bottom: 4px; }
.floor-journal-section__body code {
  background: var(--color-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
}
.floor-journal-section__body strong { color: var(--color-amber); }
.floor-journal-section__body em { color: var(--color-dim); }
.floor-journal-section__body--empty {
  font-style: italic;
  color: var(--color-dim);
}

.floor-journal-viewer__footer {
  padding: 10px var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-dim);
  font-family: var(--font-mono);
  flex-shrink: 0;
  background: var(--color-panel2);
}

.floor-journal-annotation {
  padding: 10px var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.floor-journal-annotation__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-dim);
}
.floor-journal-annotation__input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 10px;
  font-size: var(--text-md);
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  min-height: 60px;
}
.floor-journal-annotation__input:focus {
  border-color: var(--color-amber-glow);
}
.floor-journal-annotation__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.floor-journal-annotation__hint {
  font-size: var(--text-xs);
  color: var(--color-dim);
  font-style: italic;
}

/* Mobile journal viewer — full-width drawer. */
@media (max-width: 768px) {
  .floor-journal-viewer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    z-index: 10;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    box-shadow: -4px 0 14px rgba(0, 0, 0, 0.4);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .floor-journal-viewer.is-open {
    transform: translateX(0);
  }
}

/* ── Mobile tweaks for v2 chat bubble ─────────────────────────────────── */
@media (max-width: 768px) {
  .floor-v2__summary {
    /* Slightly smaller heading on phone — preserve hierarchy without
       blowing out the bubble width. */
    font-size: var(--text-md);
  }
  .floor-v2__details-toggle,
  .floor-v2__chip {
    /* Touch targets — bump to 44px on mobile per HQ standard. */
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .floor-v2__options {
    padding: 8px 10px;
  }
}

/* ── @-mention picker (Floor v2 Feature B) ────────────────────────────── */
/* Mounted by mountMentionPicker() on the Floor composer textarea. The
 * overlay is appended to the textarea's parent (which is forced to
 * position:relative on mount), so the absolute positioning below
 * anchors above the textarea on desktop. */

.mention-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-bg-elev-2, #2a2a2a);
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  margin-bottom: 6px;
  z-index: 100;
}

.mention-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  min-height: 40px;
  font-size: var(--text-sm, 14px);
  color: var(--color-text, #e5e5e5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mention-picker__row:last-child {
  border-bottom: none;
}

.mention-picker__row.is-selected,
.mention-picker__row:hover {
  background: var(--color-bg-elev-3, #3a3a3a);
}

.mention-picker__icon {
  flex: 0 0 auto;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.mention-picker__name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.mention-picker__slug {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--color-text-muted, #999);
}

.mention-picker__empty {
  padding: 12px;
  color: var(--color-text-muted, #999);
  font-size: var(--text-sm, 14px);
  text-align: center;
}

/* Mobile: bottom-sheet treatment so the picker doesn't get squeezed
 * behind the soft keyboard on phones. */
@media (max-width: 600px) {
  .mention-picker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: 50vh;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    margin-bottom: 0;
  }
  .mention-picker__row {
    /* 44px touch target per HQ standard. */
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ── Header actions: clear-room (5.3) + Roundtable (W7.5) ──────────────── */

/* The action cluster owns margin-left:auto now; the roundtable button's
   own auto-margin was moved here when clear-room joined it. */
.floor-header__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-self: flex-start;
}

.floor-clear-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-dim);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.floor-clear-btn:hover {
  border-color: var(--color-red, #E85555);
  color: var(--color-red, #E85555);
}

.floor-archived-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-dim);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

.floor-archived-divider__restore {
  background: transparent;
  border: none;
  color: var(--color-accent, #d4a574);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  min-height: 24px;
}

.floor-roundtable-btn {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--color-accent, #d4a574);
  background: transparent;
  color: var(--color-accent, #d4a574);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.floor-roundtable-btn:hover { background: rgba(212, 165, 116, 0.12); }

.rt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.rt-modal {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #1f1d1a);
  border: 1px solid var(--color-border, #3a352d);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.rt-modal--live { max-width: 640px; height: 88vh; }
.rt-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border, #3a352d);
}
.rt-modal__title { font-weight: 700; color: var(--color-text, #e8e2d8); }
.rt-close {
  min-width: 44px; min-height: 44px;
  background: transparent; border: none;
  color: var(--color-dim, #9a9186); font-size: 1.1rem; cursor: pointer;
}
.rt-modal__body { padding: 16px; overflow-y: auto; }
.rt-field { display: block; margin-bottom: 16px; }
.rt-field--rounds { max-width: 140px; }

/* Mode picker (Task 4): debate vs conversation. */
.rt-mode {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rt-mode__opt {
  flex: 1 1 200px;
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
}

.rt-mode__opt:has(input:checked) {
  border-color: var(--color-accent, #d4a574);
  background: rgba(212, 165, 116, 0.08);
}

.rt-mode__opt input {
  margin-right: 6px;
}

.rt-mode__name {
  font-weight: 700;
}

.rt-mode__opt .rt-hint {
  display: block;
  margin-top: 4px;
}
.rt-label {
  display: block; margin-bottom: 6px;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-dim, #9a9186);
}
.rt-input {
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 10px 12px;
  background: var(--color-bg, #17150f);
  border: 1px solid var(--color-border, #3a352d);
  border-radius: 10px;
  color: var(--color-text, #e8e2d8);
  font-size: 16px; /* iOS: prevents zoom-on-focus */
}
textarea.rt-input { resize: vertical; }
/* Org-tree participant picker (option B — Brian-picked 2026-07-12) */
.rt-tree {
  border: 1px solid var(--color-border, #3a352d);
  border-radius: 10px; overflow: hidden;
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
}
.rt-agent__cb {
  width: 20px; height: 20px; flex: none;
  accent-color: var(--color-accent, #d4a574);
}
.rt-tline {
  display: flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 2px 10px;
  border-bottom: 1px solid var(--color-border, #3a352d);
  color: var(--color-text, #e8e2d8); cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.rt-tnode:last-child > .rt-tline { border-bottom: 0; }
.rt-tline--d1 { padding-left: 26px; }
.rt-tline--d2 { padding-left: 44px; box-shadow: inset 20px 0 0 -19px var(--color-border, #3a352d); }
.rt-tline--d3 { padding-left: 62px; box-shadow: inset 38px 0 0 -37px var(--color-border, #3a352d); }
.rt-tline--d4 { padding-left: 80px; box-shadow: inset 56px 0 0 -55px var(--color-border, #3a352d); }
.rt-tline--parked .rt-tname { color: var(--color-dim, #9a9186); opacity: 0.75; }
.rt-caret {
  width: 34px; height: 34px; flex: none; margin: 0 -4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-dim, #9a9186); font-size: 11px;
  transition: transform 0.15s ease;
}
.rt-caret--open { transform: rotate(90deg); color: var(--color-accent, #d4a574); }
.rt-caret--blank { visibility: hidden; }
.rt-cbwrap { display: inline-flex; padding: 12px; margin: -12px; cursor: pointer; }
.rt-tname { flex: 1; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rt-tcount {
  font-size: 0.75rem; color: var(--color-dim, #9a9186);
  font-variant-numeric: tabular-nums;
}
.rt-tbadge {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 4px; padding: 1px 5px;
}
.rt-tbadge--lead { color: var(--color-accent, #d4a574); border: 1px solid var(--color-accent-dim, #8a6a44); }
.rt-tbadge--parked { color: var(--color-dim, #9a9186); border: 1px solid var(--color-border, #3a352d); }
.rt-kids { display: none; }
.rt-kids--open { display: block; }
.rt-seatct {
  float: right; font-variant-numeric: tabular-nums;
  color: var(--color-dim, #9a9186); text-transform: none; letter-spacing: 0;
}
.rt-seatct--ok { color: var(--color-accent, #d4a574); font-weight: 600; }
.rt-seated {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.rt-seatchip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 6px 12px 6px 14px;
  background: var(--color-accent, #d4a574); color: #17150f;
  border: 0; border-radius: 999px;
  font-size: 0.85rem; font-weight: 650; cursor: pointer;
}
.rt-seatchip__x { font-weight: 800; opacity: 0.65; }
@media (prefers-reduced-motion: reduce) {
  .rt-caret { transition: none; }
}
.rt-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.rt-btn {
  min-height: 44px; padding: 0 18px;
  border-radius: 10px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--color-border, #3a352d);
  background: transparent; color: var(--color-text, #e8e2d8);
}
.rt-btn--primary {
  background: var(--color-accent, #d4a574);
  border-color: var(--color-accent, #d4a574);
  color: #17150f;
}
.rt-btn--ghost { color: var(--color-dim, #9a9186); }
.rt-btn--stop { color: #e26d5c; border-color: #e26d5c; }
.rt-error { color: #e26d5c; margin: 8px 0; font-size: 0.9rem; }
.rt-loading { color: var(--color-dim, #9a9186); padding: 16px 0; text-align: center; }

.rt-live-topic {
  padding: 12px 16px;
  color: var(--color-text, #e8e2d8);
  font-style: italic;
  border-bottom: 1px solid var(--color-border, #3a352d);
}
.rt-status { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
.rt-status--running { color: var(--color-accent, #d4a574); }
.rt-status--done { color: #6fae6f; }
.rt-status--stopped { color: #d0a24a; }
.rt-status--failed { color: #e26d5c; }
.rt-thread {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.rt-turn {
  border-radius: 10px; padding: 10px 12px;
  border: 1px solid var(--color-border, #3a352d);
  background: var(--color-bg, #17150f);
}
.rt-turn--synthesis { border-left: 3px solid var(--color-accent, #d4a574); }
.rt-turn--invocation { opacity: 0.75; font-size: 0.85rem; }
.rt-turn--response { border-left: 3px solid #6fae6f; }
.rt-turn__speaker {
  font-weight: 700; font-size: 0.78rem; margin-bottom: 4px;
  color: var(--color-accent, #d4a574);
}
.rt-turn__text { color: var(--color-text, #e8e2d8); white-space: pre-wrap; word-break: break-word; }
/* W7.6 — mid-table invite affordances. */
.rt-invited-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--color-accent, #d4a574); border-radius: 8px;
  color: var(--color-accent, #d4a574); vertical-align: middle;
}
.rt-invited {
  margin: 0 16px 8px; font-size: 0.75rem; color: var(--color-text-dim, #b6ad9e);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.rt-invited__lead { color: var(--color-text-dim, #b6ad9e); }
.rt-invited__chip {
  padding: 1px 8px; border: 1px solid var(--color-accent, #d4a574); border-radius: 10px;
  color: var(--color-accent, #d4a574);
}
.rt-hint {
  margin: 4px 0 10px; font-size: 0.75rem; line-height: 1.35;
  color: var(--color-text-dim, #b6ad9e);
}
.rt-summary {
  margin: 0 16px 12px; padding: 12px;
  border: 1px solid var(--color-accent, #d4a574); border-radius: 10px;
  color: var(--color-text, #e8e2d8); white-space: pre-wrap; word-break: break-word;
}
.rt-steer {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--color-border, #3a352d);
}
.rt-steer__input { flex: 1; }
.rt-steer--disabled { opacity: 0.5; pointer-events: none; }

@media (max-width: 480px) {
  .rt-modal--live { height: 92vh; }
  .rt-steer { flex-wrap: wrap; }
  .rt-steer__input { flex: 1 1 100%; }
}

/* ── Sidebar roundtables section (2026-07-13) ── */
.floor-thread-sidebar__header--rt {
  margin-bottom: 2px;
}

.floor-thread-sidebar__rt-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.floor-rt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.floor-rt-row:hover {
  background: rgba(212, 165, 116, 0.10);
}

.floor-rt-row__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.floor-rt-row__topic {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-rt-row__mode {
  flex-shrink: 0;
  font-size: 11px;
}