/* ========================================================================
   Work-Flow Dynamic — list + canvas modes off one static page
   ========================================================================
   JS sets body.wfd-mode-list when URL has no ?conversation_id, otherwise
   body.wfd-mode-canvas. Both sections are present in HTML; class toggles
   visibility. wfd-mode-loading is the pre-JS state — both hidden — to
   avoid flashing the wrong view.
   ======================================================================== */

body.wfd-mode-loading .wfd-view { display: none; }
body.wfd-mode-list .wfd-view-list { display: block; }
body.wfd-mode-list .wfd-view-canvas { display: none; }
body.wfd-mode-canvas .wfd-view-canvas { display: block; }
body.wfd-mode-canvas .wfd-view-list { display: none; }

/* List view uses shared .container / .card / .form-group / .form-label /
   .form-control / .table .table-compact .table-hover / .status-badge .status-active
   from base+brainstem-home+admin-bs+components/*. */

/* New-conversation card: compact, pinned top-left above the existing-
   conversations list so both options read at a glance. Kill the shared
   .card hover lift — this is a form, not a marketing tile. */
.wfd-new-card {
  max-width: 420px;
  margin: 0 auto 0 0;
  padding: var(--spacing-4);
}
.wfd-new-card:hover {
  transform: none;
  box-shadow: var(--shadow-lg);
}
.wfd-new-card h2 {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-3);
}

.wfd-list-heading {
  font-size: 1.1rem;
  margin: var(--spacing-5) 0 var(--spacing-3);
}

/* ── Canvas view (3-col) ──────────────────────────────────────────────
   Adapted from eligtas_com .incident-layout (eligtas.css:1365). Brain-stem
   tokens. Flex primitive: 0-width sidebars + 1fr middle. */
.wfd-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-height) - 48px);
  background: rgb(var(--color-background));
}

/* Hidden columns collapse via .col-state sentinel: a 0-width contents
   element placed BEFORE its target column. Server OOB-swaps just this
   ~80-byte element to toggle visibility, preserving column children. */
.wfd-col-state {
  display: contents;
}
.wfd-col-state[data-state="hidden"] + .wfd-col {
  display: none;
}

.wfd-col {
  background: rgb(var(--color-surface));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Width is driver-controlled: starts at 40% via inline flex-basis from
   the JS boot path (restored from localStorage if the user has dragged
   before). Min-width keeps panel chrome legible; max-width caps the
   drag so the user can't accidentally hide the central pane. */
.wfd-col-assistant {
  flex: 0 0 40%;
  min-width: 320px;
  max-width: 80%;
  border-right: 1px solid rgba(var(--color-border), 0.35);
}

/* Drag-to-resize handle between terminal and central pane. Sits as a
   flex sibling, so changing .wfd-col-assistant's flex-basis pushes the
   central column over naturally. Hover + active states give visual
   confirmation of the drag region. */
.wfd-resizer {
  flex: 0 0 6px;
  background: transparent;
  cursor: col-resize;
  position: relative;
  transition: background 0.12s;
  touch-action: none;
}
.wfd-resizer::before {
  content: '';
  position: absolute;
  inset: 0 2px;
  background: rgba(var(--color-border), 0.45);
  border-radius: 1px;
}
.wfd-resizer:hover,
.wfd-resizer.is-dragging {
  background: rgba(var(--color-primary), 0.15);
}
.wfd-resizer:hover::before,
.wfd-resizer.is-dragging::before {
  background: rgb(var(--color-primary));
}
/* During drag: kill text selection + iframe pointer capture so the
   mouse stays glued to the handle. Set by JS via body.wfd-resizing. */
body.wfd-resizing {
  cursor: col-resize;
  user-select: none;
}
body.wfd-resizing iframe {
  pointer-events: none;
}

.wfd-col-central {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-4) var(--spacing-5);
}

.wfd-col-detail {
  flex: 0 0 320px;
  border-left: 1px solid rgba(var(--color-border), 0.35);
}

/* Panel chrome shared by all three columns (compact header + scrolling body
   + optional footer strip). Mirrors eligtas .incident-panel-* primitives. */
.wfd-panel-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid rgba(var(--color-border), 0.35);
  font-family: var(--font-family-display, var(--font-family-primary));
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--color-text-muted));
  flex-shrink: 0;
}

.wfd-panel-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-top: 1px solid rgba(var(--color-border), 0.35);
  font-size: 0.7rem;
  color: rgb(var(--color-text-muted));
  flex-shrink: 0;
}

.wfd-tab-id-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wfd-pane-body {
  flex: 1;
  padding: var(--spacing-4);
  overflow-y: auto;
}

/* ── SSE status indicator ── */
.wfd-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: auto;
  background: rgb(var(--color-text-muted));
}
.wfd-status-dot.connected {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.wfd-status-dot.connecting {
  background: #f59e0b;
  animation: wfd-pulse 1.5s infinite;
}
.wfd-status-dot.disconnected {
  background: #6b7280;
}
@keyframes wfd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── xterm host ────────────────────────────────────────────────────────
   xterm.js sizes itself off the host element's clientHeight/clientWidth.
   The flex column path is: .wfd-col-assistant (flex column) → .wfd-xterm-host
   (flex: 1 1 auto, min-height: 0). The min-height:0 escape hatch is what
   lets a flex child shrink below its content size — without it the
   terminal would grow to fit its scrollback and overflow the column. */
.wfd-xterm-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
  padding: var(--spacing-2);
}

.wfd-xterm-host .xterm,
.wfd-xterm-host .xterm-viewport,
.wfd-xterm-host .xterm-screen {
  height: 100% !important;
}

/* Visible scrollbar on xterm viewport so users can drag through scrollback.
   Note: alt-screen apps (tmux, claude, vim) don't push lines into scrollback
   — the bar appears empty during those sessions. */
.wfd-xterm-host .xterm-viewport {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #444 #000;
}
.wfd-xterm-host .xterm-viewport::-webkit-scrollbar {
  width: 10px;
}
.wfd-xterm-host .xterm-viewport::-webkit-scrollbar-track {
  background: #000;
}
.wfd-xterm-host .xterm-viewport::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}
.wfd-xterm-host .xterm-viewport::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.wfd-xterm-pending {
  color: rgb(var(--color-text-muted));
  font-family: var(--font-family-mono, monospace);
  font-size: 0.8rem;
  padding: var(--spacing-3);
}

/* ── Empty states for the OOB-targeted panes ── */
.wfd-empty,
.wfd-empty-sm {
  text-align: center;
  color: rgb(var(--color-text-muted));
}

.wfd-empty {
  padding: var(--spacing-6) var(--spacing-4);
}

.wfd-empty-sm {
  padding: var(--spacing-4) var(--spacing-3);
  font-size: 0.85rem;
}

.wfd-empty i,
.wfd-empty-sm i {
  display: block;
  margin-bottom: var(--spacing-3);
  opacity: 0.4;
}

.wfd-empty i {
  font-size: 2rem;
}

/* ── Agent-pushed chat sink (hidden in v1 — terminal IS the chat).
   Kept as a stable target so append_chat handler doesn't have to
   branch on page version. ── */
.wfd-chat-sink {
  display: none;
}
.wfd-msg {
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: 4px;
  background: rgba(var(--color-border), 0.08);
}
.wfd-msg-time {
  font-family: var(--font-family-mono, monospace);
  font-size: 0.7rem;
  color: rgb(var(--color-text-muted));
  margin-right: var(--spacing-2);
}

/* ── Mobile collapse ── */
@media (max-width: 1024px) {
  .wfd-layout {
    flex-direction: column;
  }
  .wfd-col-assistant {
    flex: 0 0 50vh;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid rgba(var(--color-border), 0.35);
  }
  .wfd-col-detail {
    border-left: none;
    border-top: 1px solid rgba(var(--color-border), 0.35);
  }
}