/* Tubik-inspired design system — warm cream canvas, charcoal ink,
   coral-orange accent, generous radii, soft diffused shadows. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

#delegate-pane {
  display: none !important;
}

/* ---- Hormone UI (Sage's personality made visible) ---- */
.mood-indicator {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.mood-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mood-emoji {
  font-size: 2rem;
  display: block;
  line-height: 1;
}

.mood-text {
  flex: 1;
}

.mood-label {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}

.mood-description {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 2px;
}

.hormone-bars {
  display: grid;
  gap: 8px;
}

.hormone-bar {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}

.bar-label {
  font-weight: 600;
  color: #64748b;
  text-align: right;
}

.bar-track {
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
}

.bar-value {
  text-align: right;
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.75rem;
  min-width: 24px;
}

/* Manager messages shift style based on hormone state */
.manager-message {
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.manager-message.confident {
  font-weight: 600;
  opacity: 1;
  border-left-color: #eab308;
}

.manager-message.urgent {
  font-size: 0.95em;
  letter-spacing: -0.3px;
  border-left-color: #ef4444;
}

:root {
  /* Tubik-style palette: warm cream canvas, charcoal ink, coral accent */
  --bg: #F6F1EA;
  --surface: #ffffff;
  --primary: #1D1B16;        /* charcoal — primary buttons, headlines */
  --secondary: #F4582A;      /* coral-orange — the single vibrant accent */
  --accent: #F2A93B;         /* warm amber — secondary highlights */
  --text: #1D1B16;
  --muted: #8A8378;          /* warm gray */
  --border: #ECE5DA;         /* warm hairline */
  --success: #3BA55D;
  --warning: #F2A93B;
  --danger: #E5484D;
  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(29, 27, 22, 0.07);
  --shadow-lift: 0 16px 40px rgba(29, 27, 22, 0.12);
}

* {
  box-sizing: border-box;
}

/* Lock the document — the app is a fixed shell; only inner panes scroll.
   Prevents any programmatic scroll from blanking the viewport. */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Finish details — selection + keyboard focus carry the accent */
::selection {
  background: rgba(244, 88, 42, 0.22);
}

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible {
  outline-offset: 3px;
}

.app-shell {
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

/* ===== Left sidebar — brand, nav, Sage identity =====
   On desktop, .sidebar-drawer uses display:contents so its children
   (brand, view-toggle, user-foot) flow into the parent .sidebar flex
   column as if the wrapper wasn't there. Flex order rules below put them
   in the right visual order alongside the Sage card. On mobile (≤768px)
   the wrapper becomes a real off-canvas slide-in panel — see @media. */
.sidebar-drawer {
  display: contents;
}
/* Desktop visual order — brand, nav, sage card, spacer, user-foot, cost */
.sidebar-drawer .brand     { order: 1; }
.sidebar-drawer .view-toggle { order: 2; }
.sidebar-sage              { order: 3; }
.sidebar-spacer            { order: 4; }
.sidebar-drawer .user-foot { order: 5; }
.sidebar .cost-window      { order: 6; }
.drawer-close {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted, #8A8378);
  cursor: pointer;
  align-self: flex-end;
  padding: 4px 8px;
}
.drawer-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex: 0 0 auto;
}
.drawer-toggle:hover { background: var(--bg-soft, #FBF8F3); }
.drawer-backdrop {
  display: none;
}

.sidebar {
  flex: 0 0 264px;
  width: 264px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 18px 20px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}

.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 4px rgba(244, 88, 42, 0.15);
  flex-shrink: 0;
}

.brand h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.nav-icon {
  font-size: 0.95rem;
  width: 20px;
  display: inline-block;
  text-align: center;
  opacity: 0.75;
}

/* Sage identity card in the sidebar */
.sidebar-sage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-spacer {
  flex: 1;
}

/* ===== Right contextual rail — Sage's live state ===== */
.context-rail {
  flex: 0 0 296px;
  width: 296px;
  height: 100%;
  overflow-y: auto;
  padding: 24px 18px;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}

.context-rail::-webkit-scrollbar { width: 5px; }
.context-rail::-webkit-scrollbar-thumb { background: rgba(29, 27, 22, 0.12); border-radius: 3px; }

.rail-title {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 4px;
}

/* Sage's presence — her always-on ambient body. Now lives inside the
   Sage identity card in the left sidebar (was a separate right rail) so
   her body language sits right next to her name + status. Seamless with
   the card (no border, surface background) so the swarm reads like a
   living part of her card, not a framed picture. */



@media (max-width: 1020px) {
  .sidebar { flex-basis: 220px; width: 220px; }
}

/* (Phone styles live at the END of this file so they win the cascade.) */

.app-header {
  /* Fade away after load — starts visible then transitions to hidden */
  opacity: 1;
  transition: opacity 3s ease-out 1s, height 0.5s ease-out;
  height: auto;
  padding: 12px 20px;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(244, 88, 42, 0.1);
  margin-bottom: 0;
}

.app-header.faded {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

.app-header h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
}

.app-header p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.status-pill {
  display: none; /* Hidden for streamlined design */
}

/* Sidebar navigation — vertical, charcoal active pill (Tubik) */
.view-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  flex: 0 0 auto;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.view-toggle-btn:hover {
  background: rgba(29, 27, 22, 0.05);
  color: var(--text);
}

/* The Team Chat nav item is an <a>, and is hidden until access is granted.
   .view-toggle-btn sets display:flex, which would override the plain [hidden]
   attribute, so force it; and strip the anchor underline. */
.view-toggle-btn.nav-external { text-decoration: none; }
.view-toggle-btn[hidden] { display: none !important; }

.view-toggle-btn.active {
  background: var(--primary);
  color: #FBF8F3;
  box-shadow: 0 8px 20px rgba(29, 27, 22, 0.18);
}

.view-toggle-btn.active .nav-icon {
  opacity: 1;
}

/* Browser toggle — compact pill in the Shared Space header; coral when open. */
.sv-browser-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border, #ECE5DA);
  background: transparent;
  color: var(--muted, #6B6557);
  padding: 4px 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 4px;
  flex-shrink: 0;
}
.sv-browser-toggle svg { flex-shrink: 0; }
.sv-browser-toggle:hover { background: rgba(29, 27, 22, 0.05); color: var(--text); }
.sv-browser-toggle.active {
  background: var(--secondary, #F4582A);
  border-color: var(--secondary, #F4582A);
  color: #fff;
}

.grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  height: auto;       /* flex sizes it — header + toggle take their share */
  flex: 1;
  min-height: 0;      /* lets the chat history scroll instead of the page */
  overflow: hidden;
  position: relative;
}

.grid-layout .panel {
  display: flex;
  content-visibility: hidden;
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.grid-layout.view-chat .chat-panel,
.grid-layout.view-operations .operations-panel {
  content-visibility: visible;
  position: relative;
  pointer-events: auto;
}

.panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-panel {
  height: 100%;
  min-height: unset;
  padding: 0;
  border: none;
  background: transparent;
  flex-direction: column;
  overflow: hidden;
}

.operations-panel {
  height: 100%;
  min-height: unset;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .panel {
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
  }

  .chat-panel {
    height: 100%;
  }

  .operations-panel {
    height: 100%;
  }
}

/* Manager Section — floating white identity card on the cream canvas */
.manager-section {
  margin: 10px max(16px, calc((100% - 1400px) / 2)) 0;
  padding: 14px 18px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  flex: 0 0 auto;
}

.cost-window {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  color: var(--muted);
}

.cost-window .cost-label {
  color: var(--muted);
}

.cost-window strong {
  color: var(--primary);
  font-weight: 700;
}

.cost-window .cost-divider {
  opacity: 0.4;
}

.call-cost-window {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.65);
}

.call-cost-window .cost-label {
  color: rgba(255, 255, 255, 0.65);
}

.call-cost-window strong {
  color: white;
}

.manager-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* No avatar anymore — Sage is represented purely through its name, status
   text and the live context readout. Give the info block a touch more
   breathing room since it's no longer sharing the row with a face. */
.manager-header.no-avatar .manager-info {
  padding-left: 2px;
}

.manager-role-tag {
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Manager info */
.manager-info {
  flex: 1;
  min-width: 0;
}

.manager-info h2 {
  margin: 0 0 1px 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.manager-status {
  display: none;
}

/* Green pulsing dot sits to the left of the "Sage" heading */
.manager-info h2 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.manager-info h2::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  flex-shrink: 0;
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.context-usage {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.context-usage.warning { color: var(--warning); }
.context-usage.critical { color: var(--danger); }

/* Call toggle button — icon-only coral circle */
.call-toggle-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--secondary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(244, 88, 42, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.call-toggle-btn:hover {
  transform: translateY(-2px);
  background: #D9481E;
  box-shadow: 0 10px 24px rgba(244, 88, 42, 0.40);
}

/* Live-call state — the same button becomes a red hang-up control. The
   phone glyph rotates 135° (universal "end call" affordance) and a soft
   red pulse signals the call is active. Clicking it ends the call. */
.call-toggle-btn.call-active {
  background: #DC3545;
  box-shadow: 0 6px 18px rgba(220, 53, 69, 0.35);
  animation: call-active-pulse 1.8s ease-in-out infinite;
}
.call-toggle-btn.call-active:hover {
  background: #C42333;
  box-shadow: 0 10px 24px rgba(220, 53, 69, 0.45);
}
.call-toggle-btn.call-active svg {
  transform: rotate(135deg);
  transition: transform 0.2s ease;
}
@keyframes call-active-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(220, 53, 69, 0.35); }
  50%      { box-shadow: 0 6px 26px rgba(220, 53, 69, 0.6); }
}

/* Call Overlay — no avatar; the screen itself communicates state. Its tint
   shifts with how full the active context window is, so load is felt at a
   glance (calm teal → busy amber → critical red) instead of a face performing it. */
.call-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border-radius: 16px;
  overflow: hidden;
  animation: fadeInCall 0.4s ease;
  transition: background 0.6s ease;
}

/* Floating chrome — top and bottom strips that sit ABOVE the shared view
   (which fills the whole call window underneath). Auto-hides after 3s of
   inactivity (the .chrome-hidden modifier slides them off-screen with a
   subtle fade); revealing again on mouse-move or tap, like Zoom/Meet. */
.call-chrome {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.45));
  backdrop-filter: blur(10px);
  padding: 10px 16px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}

.call-chrome-top {
  top: 0;
  border-radius: 16px 16px 0 0;
  justify-content: space-between;
  gap: 12px;
}

.call-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.call-chrome-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.call-chrome-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Fullscreen call mode — overrides the absolute positioning so the call
   overlay genuinely fills the viewport, hiding everything else. */
.call-overlay.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  border-radius: 0;
}
.call-overlay.fullscreen .call-shared-view {
  border-radius: 0;
}
.call-overlay.fullscreen .call-chrome-top {
  border-radius: 0;
}
.call-overlay.fullscreen .call-chrome-bottom {
  border-radius: 0;
}

.call-chrome-bottom {
  bottom: 0;
  border-radius: 0 0 16px 16px;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.5));
}

/* When inactive, slide the chrome off-screen so it never blocks content */
.call-chrome-top.chrome-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.call-chrome-bottom.chrome-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.call-topbar-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.call-chrome-divider {
  color: rgba(255, 255, 255, 0.3);
}

.call-topbar-info .call-name {
  margin: 0;
  font-size: 0.95rem;
}

.call-topbar-info .call-status {
  margin: 0;
  font-size: 0.78rem;
}

.call-shared-view-title {
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
}

.call-bottombar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.call-bottombar-row .call-controls {
  margin-top: 0;
}

.call-overlay.tone-calm {
  background: linear-gradient(180deg, #0b2a2c 0%, #123c40 55%, #1e293b 100%);
}

.call-overlay.tone-busy {
  background: linear-gradient(180deg, #2a230b 0%, #3d3013 55%, #1e293b 100%);
}

.call-overlay.tone-critical {
  background: linear-gradient(180deg, #321113 0%, #3d1b1e 55%, #1e293b 100%);
}

@keyframes fadeInCall {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.call-name {
  color: white;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.01em;
}

.call-status {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  margin: 0;
}

.call-context-readout {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* Captions pinned to the bottom edge — fully transparent background, just
   the text with heavy theatrical text-shadow for legibility on any
   background. No box, no gradient — pure subtitle aesthetic. */
.call-captions-floating {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 25;
  background: transparent;
  padding: 8px 24px;
  text-align: center;
  pointer-events: none;
}

.call-captions-floating p {
  margin: 0 auto;
  max-width: min(720px, 92%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  /* Heavy multi-layer shadow gives crisp letterforms on light or dark
     content underneath — the only way to stay legible without a box. */
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 0.95),
    0 1px 3px rgba(0, 0, 0, 1),
    0 2px 6px rgba(0, 0, 0, 0.9),
    1px 0 2px rgba(0, 0, 0, 1),
    -1px 0 2px rgba(0, 0, 0, 1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1rem * 1.35 * 2);
}

/* When bottom chrome is visible, lift captions slightly so the controls
   don't crowd them. */
.call-overlay:not(:has(.call-chrome-bottom.chrome-hidden)) .call-captions-floating {
  bottom: 90px;
  transition: bottom 0.3s ease;
}

.call-captions {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  text-align: center;
  flex-shrink: 0;
}

.call-captions p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(0.85rem * 1.35 * 2);
}

.call-controls {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.call-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.call-btn.end {
  background: var(--danger);
  font-size: 0.85rem;
  font-weight: 700;
  width: auto;
  padding: 0 22px;
  border-radius: 26px;
}

.call-btn-text {
  width: auto;
  padding: 0 22px;
  border-radius: 26px;
  font-size: 0.85rem;
  font-weight: 600;
}

.call-btn.end:hover {
  background: #dc2626;
}

.call-btn.muted {
  background: rgba(239, 68, 68, 0.4);
}

/* Make chat-panel relative for call overlay */
.chat-panel {
  position: relative;
}

/* Chat History - Full height, only scrolls itself. Sits directly on the
   warm cream canvas — messages float as cards, no boxed-in container. */
.chat-history {
  flex: 1;
  min-height: 0; /* Important for flex containers */
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  border-radius: 0;
  padding: 20px max(16px, calc((100% - 1400px) / 2));
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 0;
  scroll-behavior: smooth;
}

.chat-history::-webkit-scrollbar {
  width: 5px;
}

.chat-history::-webkit-scrollbar-track {
  background: transparent;
}

.chat-history::-webkit-scrollbar-thumb {
  background: rgba(244, 88, 42, 0.3);
  border-radius: 3px;
}

.chat-history::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 88, 42, 0.5);
}

/* Manager's live shared view — a FLOATING, draggable, resizable window so
   it never swallows the whole chat (the old inline block pushed the
   conversation off-screen, brutal on mobile). The panel-state machine in
   app.js toggles display via inline style; drag + resize are wired in
   makeSharedViewFloating(). Call mode uses the separate .call-overlay, so
   this panel is chat-mode only. */
.shared-view-panel {
  display: none;            /* state machine → flex */
  flex-direction: column;
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: min(560px, calc(100vw - 48px));
  height: min(460px, calc(100vh - 190px));
  min-width: 300px;
  min-height: 200px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 110px);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #ECE5DA);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(29, 27, 22, 0.22);
  overflow: hidden;
  z-index: 60;
  resize: both;             /* native bottom-right grabber */
  animation: slideIn 0.2s ease;
}

/* Minimized — hide the panel entirely (no persistent docked header strip)
   and let the "Shared Space" restore pill be the way back, same as mobile. */
.shared-view-panel.minimized {
  display: none !important;
}

/* Restore pill — clean Tubik chip, bottom-right on desktop. Shown by JS
   (updateRestorePill) only when a surface exists but the panel is hidden or
   minimized, so the Shared Space is always one click away without a
   persistent bar. The mobile media query repositions/recolors it. */
.sv-restore-pill {
  position: fixed;
  right: 24px;
  bottom: 120px;            /* clear the chat composer (~109px tall) + Send button */
  z-index: 110;
  display: none;            /* JS toggles to flex */
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: var(--surface, #FFFFFF);
  color: var(--text, #1D1B16);
  border: 1px solid var(--border, #ECE5DA);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: 0 10px 30px rgba(29, 27, 22, 0.12);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sv-restore-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(29, 27, 22, 0.18);
}
.sv-restore-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary, #F4582A);
  flex-shrink: 0;
}

/* The chat-mode floating panel must never show in call mode (call uses the
   full-screen overlay instead). */
.chat-panel.in-call .shared-view-panel { display: none !important; }

.shared-view-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(244, 88, 42, 0.08);
  border-bottom: 1px solid rgba(244, 88, 42, 0.18);
  cursor: move;            /* drag handle */
  user-select: none;
  touch-action: none;      /* let JS own touch-drag */
  flex-shrink: 0;
}
.shared-view-header .shared-view-time { flex: 1; }
.shared-view-min,
.shared-view-close {
  background: none; border: none;
  color: var(--muted, #7C7870);
  cursor: pointer;
  font-size: 1rem; line-height: 1;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.shared-view-min:hover,
.shared-view-close:hover {
  background: rgba(29, 27, 22, 0.08);
  color: var(--text, #1D1B16);
}

.shared-view-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F4582A;
  box-shadow: 0 0 0 0 rgba(244, 88, 42, 0.55);
  animation: shared-view-pulse 1.8s infinite;
  flex-shrink: 0;
}

@keyframes shared-view-pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 88, 42, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(244, 88, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 88, 42, 0); }
}

.shared-view-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  flex: 1;
}

.shared-view-time {
  font-size: 0.72rem;
  color: var(--muted);
}

.shared-view-close {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
}

.shared-view-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
}

.shared-view-body {
  padding: 22px 26px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  transition: max-height 0.25s ease;
  /* Whiteboard surface: warm off-white with a subtle grid so it reads as a
     real working canvas, not a chat reply. */
  background-color: #fafaf6;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* ---- Whiteboard callout cards (Sage's :::note / :::insight / etc.) ---- */
.wb-callout {
  margin: 14px 0;
  border-radius: 10px;
  padding: 12px 16px 14px;
  background: #ffffff;
  border-left: 4px solid var(--secondary, #F4582A);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  position: relative;
}
.wb-callout-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--secondary, #F4582A);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wb-callout-title::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.wb-callout-body p:first-child { margin-top: 0; }
.wb-callout-body p:last-child { margin-bottom: 0; }

.wb-note     { border-left-color: #F4582A; }
.wb-note     .wb-callout-title { color: #F4582A; }
.wb-insight  { border-left-color: #7c3aed; background: linear-gradient(180deg, #faf5ff, #fff); }
.wb-insight  .wb-callout-title { color: #7c3aed; }
.wb-warning  { border-left-color: #d97706; background: linear-gradient(180deg, #fffbeb, #fff); }
.wb-warning  .wb-callout-title { color: #b45309; }
.wb-action   { border-left-color: #059669; background: linear-gradient(180deg, #ecfdf5, #fff); }
.wb-action   .wb-callout-title { color: #047857; }
.wb-question { border-left-color: #2563eb; background: linear-gradient(180deg, #eff6ff, #fff); }
.wb-question .wb-callout-title { color: #1d4ed8; }

/* ---- Mermaid diagrams ---- */
.wb-diagram {
  margin: 16px 0;
  padding: 14px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  overflow-x: auto;
  text-align: center;
}
.wb-diagram svg { max-width: 100%; height: auto; }
.wb-diagram pre.mermaid {
  /* Pre-render: show source as a faint placeholder so the box isn't empty
     during the brief async render. */
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.78rem;
  color: #64748b;
  background: transparent;
  text-align: left;
  white-space: pre-wrap;
}

.shared-view-body mark,
.shared-view-body .highlight {
  background: linear-gradient(120deg, rgba(255, 193, 7, 0.3), rgba(255, 152, 0, 0.2));
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.3);
}

/* Dynamic sizing — the shared view grows or shrinks to fit what's actually
   being shown: a quick one-liner stays compact, a dense table-filled brief
   gets the room it needs. Mirrors a real "screen share" auto-resizing. */
.shared-view-panel.size-compact .shared-view-body { max-height: 140px; }
.shared-view-panel.size-medium .shared-view-body { max-height: 260px; }
.shared-view-panel.size-roomy .shared-view-body { max-height: 420px; }
.shared-view-panel.size-expanded .shared-view-body { max-height: 580px; }

.shared-view-body h1,
.shared-view-body h2,
.shared-view-body h3 {
  margin: 0.6em 0 0.3em;
  color: var(--text);
}

.shared-view-body h1 { font-size: 1.15rem; }
.shared-view-body h2 { font-size: 1.05rem; }
.shared-view-body h3 { font-size: 0.95rem; }

.shared-view-body p {
  margin: 0.4em 0;
}

.shared-view-body ul,
.shared-view-body ol {
  margin: 0.3em 0;
  padding-left: 1.4em;
}

.shared-view-body li {
  margin: 0.15em 0;
}

.shared-view-body code {
  background: rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}

.shared-view-body pre {
  background: rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
}

.shared-view-body pre code {
  background: none;
  padding: 0;
}

.shared-view-body .table-scroll {
  overflow-x: auto;
  margin: 0.4em 0;
}

.shared-view-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 0.82rem;
}

.shared-view-body th,
.shared-view-body td {
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 5px 8px;
  text-align: left;
}

.shared-view-body th {
  background: rgba(244, 88, 42, 0.08);
  font-weight: 700;
}

.shared-view-body strong {
  color: var(--text);
}

/* Shared view surfaced inside the Call overlay — compact "screen share" card.
   Width and height are then tuned per size-tier below, so the card visibly
   resizes to fit whatever the Manager is showing — a short note stays small,
   a table-filled brief opens up, just like a real screen share would. */
/* The shared view is now THE call screen — it claims essentially all of the
   space between the slim top and bottom bars (flex: 1 lets it grow/shrink
   with whatever room the call overlay actually has), and its size-tier
   classes additionally raise its floor (min-height) so genuinely large
   content (long briefs, tables, multi-section docs) gets to actually expand
   the card rather than being squeezed into a fixed box. The goal: whatever
   Sage shares should be big enough to read at a glance, the way a real
   screen-share would be. */
/* Shared view IS the call screen — fills the entire overlay edge-to-edge.
   The chrome (top/bottom bars) floats over it and auto-hides, so the
   content gets the whole window. */
.call-shared-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.99);
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
  animation: slideIn 0.25s ease;
}

/* The call overlay's height is fixed by its container (not the viewport), so
   sizing by vh would overflow it — instead the size tiers nudge how
   aggressively the shared view claims the flexible space relative to the
   bars around it. flex: 1 already makes it dominant; these just let bigger
   content claim a bit more of that flexible share. */
/* Bias even harder toward the share view dominating — captions are now
   2-line-clamped so they take a fixed, predictable amount of room, and the
   rest goes here. */
.call-shared-view.size-compact { flex-grow: 4; }
.call-shared-view.size-medium { flex-grow: 5; }
.call-shared-view.size-roomy { flex-grow: 6; }
.call-shared-view.size-expanded { flex-grow: 7; }

/* Sticky title bar — viewer always knows WHAT they're looking at. Kept slim
   so the body content is what dominates. */
.call-shared-view-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(244, 88, 42, 0.12), rgba(244, 88, 42, 0.06));
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  border-bottom: 1px solid rgba(244, 88, 42, 0.22);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  letter-spacing: -0.01em;
}

/* Body — sized for "many lines visible at once" rather than "huge text". Real
   screen shares fit a whole page of context in view; that's what we want
   here, not three bullets blown up. */
/* Body padding includes safe areas at top and bottom so the floating chrome
   doesn't cover content even while it's visible. When chrome auto-hides,
   the content visually extends edge-to-edge. */
.call-shared-view-body {
  padding: 56px 24px 110px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
  scroll-behavior: smooth;
}

/* Modest heading hierarchy — still scannable, but no longer eats half the
   screen. */
.call-shared-view-body h1 {
  margin: 0.35em 0 0.35em;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  border-bottom: 1px solid rgba(244, 88, 42, 0.18);
  padding-bottom: 0.15em;
}
.call-shared-view-body h2 {
  margin: 0.6em 0 0.25em;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0a5b5d;
}
.call-shared-view-body h3 {
  margin: 0.5em 0 0.2em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.call-shared-view-body p {
  margin: 0.3em 0;
}

.call-shared-view-body strong {
  color: #0a5b5d;
  font-weight: 700;
}

.call-shared-view-body ul,
.call-shared-view-body ol {
  margin: 0.3em 0;
  padding-left: 1.3em;
}

.call-shared-view-body li {
  margin: 0.15em 0;
}

.call-shared-view-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.76rem;
  margin: 0.4em 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.call-shared-view-body th,
.call-shared-view-body td {
  border: 1px solid rgba(15, 23, 42, 0.1);
  padding: 5px 8px;
  text-align: left;
}

.call-shared-view-body th {
  background: rgba(244, 88, 42, 0.08);
}

/* Sage's interactive highlight marker — like a yellow highlighter pen
   drawn live on the shared view. Pulses subtly so it's unmistakably the
   thing she wants you looking at, without being seizure-inducing. */
mark.sage-highlight {
  background: linear-gradient(180deg, transparent 25%, #fef08a 25%, #fef08a 95%, transparent 95%);
  color: #1f2937;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
  animation: sage-highlight-pulse 1.8s ease-in-out infinite;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@keyframes sage-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0); }
}

/* Caption that explains WHY Sage highlighted these — a tiny floating note
   that anchors at the top of the shared view body so you read it before
   scanning the highlights themselves. */
.shared-view-highlight-note {
  background: linear-gradient(135deg, #fde68a, #fcd34d);
  color: #78350f;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 12px;
  border-left: 3px solid #f59e0b;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.18);
}

.call-shared-view-placeholder {
  margin: auto;
  color: var(--muted);
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  padding: 16px;
  max-width: 60ch;
}

.chat-message {
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 13px 18px;
  max-width: 74%;
  position: relative;
  box-shadow: var(--shadow-soft);
  animation: slideIn 0.3s ease;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-bottom: 4px;
}

/* Agent messages containing tables expand to the full chat width so the
   table has room to breathe instead of cramping into a 74% bubble. */
.chat-message.agent.has-wide-content {
  max-width: 100%;
}

/* Wide markdown content scrolls horizontally inside the bubble instead of
   stretching it. Tables especially — model output for comparison tables
   was leaking into the sidebar before. */
.chat-message .message-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 8px 0;
}
.chat-message .message-content table th,
.chat-message .message-content table td {
  border: 1px solid var(--border, #ECE5DA);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}
.chat-message .message-content table th {
  background: var(--bg-soft, #FBF8F3);
  font-weight: 700;
}
.chat-message .message-content pre,
.chat-message .message-content code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-message .message-content img,
.chat-message .message-content video {
  max-width: 100%;
  height: auto;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Founder (you): charcoal ink bubble, white text — the bold Tubik move */
.chat-message.founder {
  background: var(--primary);
  align-self: flex-end;
  border: none;
  border-radius: var(--radius-card) var(--radius-card) 6px var(--radius-card);
  box-shadow: 0 8px 24px rgba(29, 27, 22, 0.18);
}

.chat-message.founder p,
.chat-message.founder .message-content,
.chat-message.founder .message-content p {
  color: #FBF8F3;
}

.chat-message.founder .sender,
.chat-message.founder .sender-label {
  color: rgba(251, 248, 243, 0.55);
}

/* Sage: clean white card, warm shadow, coral signature dot via sender label */
.chat-message.agent {
  background: var(--surface);
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 6px;
  box-shadow: var(--shadow-soft);
}

.chat-message.agent .sender,
.chat-message.agent .sender-label {
  color: var(--secondary);
}

.chat-message.system {
  background: transparent;
  align-self: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  max-width: 92%;
  opacity: 0.85;
  box-shadow: none;
}

.chat-message.system .sender {
  display: none;
}

.chat-message.system p {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

.chat-message .sender-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chat-message .sender {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.chat-message p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
}

.chat-message.highlight {
  background: rgba(242, 169, 59, 0.15);
  border-left: 3px solid var(--accent);
  animation: highlightPulse 0.6s ease;
}

@keyframes highlightPulse {
  0% { background: rgba(242, 169, 59, 0.3); }
  100% { background: rgba(242, 169, 59, 0.15); }
}

/* Markdown content styling */
.message-content {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
  word-wrap: break-word;
  letter-spacing: -0.005em;
}

/* Inside the dark founder bubble, every markdown element reads cream */
.chat-message.founder .message-content strong,
.chat-message.founder .message-content b,
.chat-message.founder .message-content em,
.chat-message.founder .message-content i,
.chat-message.founder .message-content li,
.chat-message.founder .message-content h1,
.chat-message.founder .message-content h2,
.chat-message.founder .message-content h3 {
  color: #FBF8F3;
}

.chat-message.founder .message-content code {
  background: rgba(251, 248, 243, 0.15);
  color: #FBF8F3;
}

.message-content strong,
.message-content b {
  font-weight: 700;
  color: var(--text);
}

.message-content em,
.message-content i {
  font-style: italic;
  color: var(--text);
}

.message-content code {
  background: rgba(15, 23, 42, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.85rem;
  color: #e11d48;
}

.message-content pre {
  background: rgba(15, 23, 42, 0.08);
  border-left: 3px solid var(--secondary);
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 10px 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.message-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
  margin: 12px 0 8px 0;
  font-weight: 700;
  color: var(--text);
}

.message-content h1 { font-size: 1.3rem; }
.message-content h2 { font-size: 1.15rem; }
.message-content h3 { font-size: 1.05rem; }
.message-content h4,
.message-content h5,
.message-content h6 { font-size: 0.95rem; }

.message-content ul,
.message-content ol {
  margin: 8px 0;
  padding-left: 24px;
  color: var(--text);
}

.message-content li {
  margin: 4px 0;
  line-height: 1.6;
}

.message-content blockquote {
  border-left: 3px solid var(--secondary);
  padding-left: 12px;
  margin: 10px 0;
  color: var(--muted);
  font-style: italic;
}

.message-content a {
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 88, 42, 0.3);
}

.message-content a:hover {
  border-bottom-color: var(--secondary);
}

.message-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 0.85rem;
}

.message-content th,
.message-content td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

.message-content th {
  background: rgba(244, 88, 42, 0.1);
  font-weight: 700;
}

.message-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

.voice-indicator {
  font-size: 0.75rem;
  color: #F4582A;
  font-weight: 600;
  margin-top: 4px;
}

/* Chat Controls & Search */
.chat-controls {
  padding: 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}

.chat-search {
  display: none; /* Hidden by default for cleaner UI - user can click Cmd+F to search */
  gap: 8px;
  align-items: center;
}

/* Show search only when results are being displayed */
.chat-search-results:not([style*="display: none"]) ~ .chat-search {
  display: flex;
}

.chat-search input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s ease;
}

.chat-search input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(244, 88, 42, 0.1);
}

.chat-search input::placeholder {
  color: var(--muted);
}

.search-btn {
  padding: 10px 20px;
  border: 1px solid var(--secondary);
  border-radius: 6px;
  background: var(--secondary);
  color: white;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.search-btn:hover {
  background: #D9481E;
  border-color: #D9481E;
  box-shadow: 0 2px 8px rgba(244, 88, 42, 0.2);
}

.search-btn:active {
  transform: translateY(1px);
}

.chat-search-results {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.close-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.close-search-btn:hover {
  color: var(--text);
}

.search-list {
  padding: 8px 0;
}

.search-result {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 0.9rem;
}

.search-result:hover {
  background: rgba(244, 88, 42, 0.05);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result-sender {
  font-weight: 600;
  color: var(--secondary);
  font-size: 0.8rem;
  text-transform: capitalize;
}

.search-result-text {
  color: var(--text);
  margin: 6px 0 4px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-matches {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
}

/* Closed Captions */
.closed-captions {
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #f3f4f6;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  min-height: 32px;
  line-height: 1.5;
  word-wrap: break-word;
  animation: slideIn 0.3s ease;
  border-left: 3px solid #F4582A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.closed-captions.thinking {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, #78350f, #451a03);
}

.closed-captions.thinking::before {
  content: '💭 Thinking... ';
  font-weight: 600;
  color: #fbbf24;
  margin-right: 6px;
}

#caption-text {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto';
}

/* Hidden in call mode */
.chat-panel.in-call .chat-history,
.chat-panel.in-call .chat-form,
.chat-panel.in-call .closed-captions,
.chat-panel.in-call .manager-section {
  display: none;
}

/* Chat Form — floating composer bar: white pill input + charcoal send,
   side by side like a modern messenger */
.chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px max(16px, calc((100% - 1400px) / 2)) 18px;
  background: transparent;
  border-top: none;
}

/* Composer-side buttons (paperclip, mic) — tubik aesthetic: a clean
   round affordance that reads as part of the input pill, with a warm
   cream hover. The icon is the only mark; no chrome, no shadow. */
.composer-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-bottom: 1px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #8A8378);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.composer-btn:hover {
  background: var(--bg-soft, #FBF8F3);
  color: var(--text, #1D1B16);
  border-color: var(--border, #ECE5DA);
}
.composer-btn:active { transform: scale(0.96); }
.composer-btn svg { display: block; }

/* Mic: when listening, it flips to the brand-warm filled state with a
   pulsing red dot in the corner so the founder can see at a glance that
   it's hot. */
.mic-btn .mic-rec-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E5484D;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mic-btn.active {
  background: var(--secondary, #F4582A);
  color: #FFFDFA;
  border-color: var(--secondary, #F4582A);
}
/* Jailbreak toggle — reads as a deliberate "danger/override" affordance when
   active so it never blends in with the ordinary composer buttons. */
.jailbreak-btn.active {
  background: var(--danger, #E5484D);
  color: #FFFDFA;
  border-color: var(--danger, #E5484D);
}
.jailbreak-btn.active:hover { background: var(--danger, #E5484D); color: #FFFDFA; }
.jailbreak-caution {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--danger, #E5484D);
  border-radius: 8px;
  background: rgba(229, 72, 77, 0.10);
  color: var(--danger, #E5484D);
  font-size: 0.82rem;
  line-height: 1.4;
}
.jailbreak-caution strong { font-weight: 600; }
.mic-btn.active:hover {
  background: var(--secondary, #F4582A);
  color: #FFFDFA;
}
.mic-btn.active .mic-rec-dot {
  opacity: 1;
  transform: scale(1);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
}

.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px max(16px, calc((100% - 1400px) / 2)) 0;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft, #FBF8F3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  font-size: 0.82rem;
}
.attachment-name { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { color: var(--muted); font-size: 0.75rem; }
.attachment-remove {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: 0 4px;
}
.attachment-remove:hover { color: var(--text); }

/* Drag-over highlight so the founder knows drop will work */
.chat-panel.drag-over {
  outline: 2px dashed var(--secondary, #F4582A);
  outline-offset: -10px;
  background: rgba(244, 88, 42, 0.04);
}

/* Integrations card (MCP) — lists external tool servers Sage can call,
   plus the add/test/remove controls. Tubik aesthetic: each server is a
   soft card, badges read as small pills. */
.mcp-servers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.mcp-empty {
  color: var(--muted, #8A8378);
  font-size: 0.88rem;
  padding: 14px 16px;
  background: var(--bg-soft, #FBF8F3);
  border: 1px dashed var(--border, #ECE5DA);
  border-radius: 12px;
  margin: 0;
}
.mcp-server {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mcp-server-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mcp-server-head strong { font-size: 0.95rem; }
.mcp-server-id {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--bg-soft, #FBF8F3);
  padding: 2px 8px;
  border-radius: 999px;
}
.mcp-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.mcp-badge.on { background: rgba(59,165,93,0.15); color: #1d6b3b; }
.mcp-badge.off { background: rgba(138,131,118,0.18); color: var(--muted); }
.mcp-badge.auth { background: rgba(242,169,59,0.18); color: #8a5b0d; }
.mcp-server-url {
  margin-top: 6px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  word-break: break-all;
}
.mcp-server-desc { margin-top: 4px; font-size: 0.84rem; color: var(--text); }
.mcp-server-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mcp-action {
  background: transparent;
  border: 1px solid var(--border, #ECE5DA);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mcp-action:hover { background: var(--bg-soft, #FBF8F3); }
.mcp-action.danger { color: #b8353a; border-color: rgba(184,53,58,0.3); }
.mcp-action.danger:hover { background: rgba(184,53,58,0.08); }

.mcp-add-form {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr auto;
  gap: 8px;
  padding: 12px;
  background: var(--bg-soft, #FBF8F3);
  border: 1px solid var(--border, #ECE5DA);
  border-radius: 12px;
}
.mcp-add-form input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--surface);
  min-width: 0;
}
.mcp-add-btn {
  background: var(--text, #1D1B16);
  color: var(--bg, #F6F1EA);
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.mcp-add-btn:hover { opacity: 0.9; }
@media (max-width: 900px) {
  .mcp-add-form { grid-template-columns: 1fr 1fr; }
  .mcp-add-btn { grid-column: 1 / -1; }
}
.mcp-status {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1em;
}
.mcp-status.ok { color: #1d6b3b; }
.mcp-status.error { color: #b8353a; }

/* Artifact chips — files Sage saved to the workspace this turn. Each
   chip opens the file in a new tab (HTML previews) or downloads it
   (everything else). Lives inside a system-message bubble. */
.artifact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.artifact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border, #ECE5DA);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--text, #1D1B16);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.artifact-chip:hover {
  background: var(--bg-soft, #FBF8F3);
  border-color: var(--secondary, #F4582A);
}
.artifact-name { font-weight: 600; }
.artifact-size { color: var(--muted, #8A8378); font-size: 0.78rem; }

/* WhatsApp-style inline attachments — how Sage "sends" a generated file.
   A vertical stack of attachment cards; images render as thumbnails, every
   other type as a file card (glyph · name · type/size · download). */
.artifact-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  max-width: 340px;
}
.artifact-att {
  text-decoration: none;
  color: var(--text, #1D1B16);
  border: 1px solid var(--border, #ECE5DA);
  border-radius: 14px;
  background: var(--surface, #fff);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.artifact-att:hover {
  border-color: var(--secondary, #F4582A);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.artifact-att:active { transform: scale(0.995); }

/* File card */
.artifact-att-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.artifact-att-icon {
  flex: 0 0 auto;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary, #F4582A);
}
.artifact-att-icon svg { width: 24px; height: 24px; }
.artifact-att-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.artifact-att-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artifact-att-sub { color: var(--muted, #8A8378); font-size: 0.76rem; margin-top: 1px; }
.artifact-att-dl {
  flex: 0 0 auto;
  color: var(--muted, #8A8378);
  padding-left: 4px;
  display: flex;
  align-items: center;
}
.artifact-att-file { cursor: pointer; }
.artifact-att-file:hover .artifact-att-dl { color: var(--secondary, #F4582A); }

/* Image thumbnail */
.artifact-att-img { display: block; }
.artifact-att-img img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  background: var(--bg-soft, #FBF8F3);
}
.artifact-att-cap {
  display: block;
  padding: 7px 12px;
  font-size: 0.78rem;
  color: var(--muted, #8A8378);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace Files panel — a Shared Space surface listing everything in the
   founder's workspace (Sage's generated files + their uploads), downloadable. */
.workspace-files-host {
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px 14px;
  gap: 6px;
}
.wsf-head {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8A8378);
  padding: 2px 2px 8px;
}
.wsf-status {
  color: var(--muted, #8A8378);
  font-size: 0.86rem;
  padding: 18px 6px;
  line-height: 1.5;
}
.wsf-list { display: flex; flex-direction: column; gap: 4px; }
.wsf-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #1D1B16);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.wsf-row:hover {
  background: var(--bg-soft, #FBF8F3);
  border-color: var(--border, #ECE5DA);
}
.wsf-icon {
  flex: 0 0 auto;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #8A8378);
}
.wsf-icon svg { width: 21px; height: 21px; }
.wsf-row { cursor: pointer; }
.wsf-row:hover .wsf-icon { color: var(--secondary, #F4582A); }
.wsf-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wsf-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wsf-sub {
  color: var(--muted, #8A8378);
  font-size: 0.74rem;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wsf-dl { flex: 0 0 auto; color: var(--muted, #8A8378); display: flex; align-items: center; opacity: 0; transition: opacity 0.12s ease; }
.wsf-row:hover .wsf-dl { opacity: 1; color: var(--secondary, #F4582A); }
.artifact-att-img .js-ws-img { min-height: 60px; }
.artifact-att-img .js-ws-img.ws-img-failed { min-height: 0; }

.input-group {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 8px 8px 8px 20px;
  box-shadow: var(--shadow-lift);
}

#chat-input {
  flex: 1;
  min-height: 24px;
  max-height: 120px;
  width: auto;
  padding: 10px 0;
  border: none;
  border-radius: 0;
  resize: none;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: none;
  background: transparent;
  color: var(--text);
}

#chat-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
}

#chat-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.send-btn {
  padding: 12px 26px;
  background: var(--primary);
  color: #FBF8F3;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  flex: 0 0 auto;
}

.send-btn:hover {
  background: var(--secondary);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(244, 88, 42, 0.35);
}

.send-btn:active {
  transform: translateY(0);
}

/* Team Operations */
.team-ops-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.team-ops-header h2 {
  margin: 0 0 3px 0;
  font-size: 1rem;
  font-weight: 600;
}

.monitor-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Team Chat card (Team Ops) — embeds the /teamchat page inline. */
.team-chat-embed {
  position: relative;
}
.team-chat-open {
  position: absolute;
  top: -34px;
  right: 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
}
.team-chat-open:hover { color: var(--text, #222); text-decoration: underline; }
.team-chat-frame {
  width: 100%;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #12141a;
  display: block;
}

/* ===== Team Operations — desktop command center =====
   One accordion container, dividing lines between rows, click a row to
   expand it — replaces the old always-expanded 2-column grid so the tab
   stops being a long scroll. White surface on cream, Tubik all the way. */
.ops-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 36px 40px;
  animation: fadeIn 0.3s ease;
}

.ops-scroll::-webkit-scrollbar { width: 6px; }
.ops-scroll::-webkit-scrollbar-track { background: transparent; }
.ops-scroll::-webkit-scrollbar-thumb { background: rgba(29, 27, 22, 0.14); border-radius: 3px; }
.ops-scroll::-webkit-scrollbar-thumb:hover { background: rgba(29, 27, 22, 0.25); }

.ops-header {
  max-width: 1080px;
  margin: 0 auto 20px;
}

.ops-header h2 {
  margin: 0 0 4px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}

.ops-accordion {
  display: flex;
  flex-direction: column;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;   /* clips first/last row to the container's rounded corners */
}

.ops-card {
  min-width: 0;
  border-bottom: 1px solid var(--border);
}

.ops-card:last-child {
  border-bottom: none;
}

.ops-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ops-card-head:hover {
  background: rgba(29, 27, 22, 0.02);
}

.ops-card-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
  flex-shrink: 0;
}

.ops-card-hint {
  font-size: 0.74rem;
  color: var(--muted);
  flex: 1 1 auto;
  min-width: 0;
}

.ops-card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ops-card-toggle:hover {
  background: rgba(29, 27, 22, 0.06);
}

.ops-card-toggle svg {
  transition: transform 0.2s ease;
}

.ops-card.open .ops-card-toggle svg {
  transform: rotate(180deg);
}

.ops-card-body {
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 22px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.ops-card.open .ops-card-body {
  max-height: 2000px;
  opacity: 1;
  padding: 0 22px 20px;
}

/* The Models card stacks three sections and can grow past any fixed max-height
   clamp on a narrow phone (several providers + the expanded add-provider form),
   which the shared clamp above would clip. Animate grid-template-rows 0fr→1fr
   instead — it expands to the content's real height with no magic number and
   never clips. Its body wraps a single child (.models-layout), which the row
   collapse hides via overflow while closed. */
.ops-card[data-card-id="models"] .ops-card-body {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.ops-card[data-card-id="models"].open .ops-card-body {
  grid-template-rows: 1fr;
  max-height: none;
}
.ops-card[data-card-id="models"] .ops-card-body > .models-layout {
  min-height: 0;
  overflow: hidden;
}

.ops-two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-top: 14px;
}

/* Live feeds are capped — the card stays a card; the feed scrolls inside it */
.status-list,
.task-progress-list,
.kg-node-list,
.subagent-list {
  max-height: 430px;
  overflow-y: auto;
  padding-right: 6px;
}

.status-list::-webkit-scrollbar,
.task-progress-list::-webkit-scrollbar,
.kg-node-list::-webkit-scrollbar,
.subagent-list::-webkit-scrollbar { width: 5px; }

.status-list::-webkit-scrollbar-thumb,
.task-progress-list::-webkit-scrollbar-thumb,
.kg-node-list::-webkit-scrollbar-thumb,
.subagent-list::-webkit-scrollbar-thumb { background: rgba(29, 27, 22, 0.14); border-radius: 3px; }

.ops-subhead {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .ops-two-col { grid-template-columns: 1fr; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Task Cards */
.status-list,
/* Daily-spend bar chart — horizontally scrollable. */
.usage-history-chart { margin-top: 14px; }
.usage-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.usage-chart-scroll {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 124px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 0;
  scrollbar-width: thin;
}
.usage-chart-scroll::-webkit-scrollbar { height: 6px; }
.usage-chart-scroll::-webkit-scrollbar-thumb { background: var(--border, #ECE5DA); border-radius: 999px; }
.usage-bar-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.usage-bar {
  width: 16px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--secondary, #F4582A), #F2A93B);
  transition: opacity 0.15s ease;
}
.usage-bar:hover { opacity: 0.8; }
.usage-bar.empty { background: var(--border, #ECE5DA); }
.usage-bar-label { font-size: 0.62rem; color: var(--muted, #6B6557); white-space: nowrap; }

.token-dashboard {
  display: grid;
  gap: 10px;
}

/* Work in flight — agent queues tile 2-up inside the wide card */
.task-progress-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .task-progress-list { grid-template-columns: 1fr; }
}

.task-card {
  display: grid;
  gap: 10px;
  align-content: start;
  background: var(--bg);
  border: none;
  border-radius: 16px;
  padding: 16px 18px;
  transition: background 0.2s ease;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}

.task-card:hover {
  background: #F1EAE0;
  transform: none;
  box-shadow: none;
}

.task-card strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  color: var(--text);
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--muted);
  gap: 8px;
}

.progress-bar {
  width: 100%;
  height: 7px;
  border-radius: var(--radius-pill);
  background: rgba(29, 27, 22, 0.08);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.task-agent-row {
  padding: 9px 12px;
  background: var(--surface);
  border-radius: 10px;
  font-size: 0.8rem;
  border-left: 3px solid var(--secondary);
  min-width: 0;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.task-agent-row strong {
  display: block;
  color: var(--text);
  margin-bottom: 2px;
}

.task-agent-row p {
  margin: 0;
  color: var(--muted);
}

.task-card button {
  border: none;
  background: var(--primary);
  color: #FBF8F3;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.78rem;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.task-card button:hover {
  background: var(--secondary);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(244, 88, 42, 0.25);
}

.task-card button:disabled {
  background: rgba(29, 27, 22, 0.18);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Status Cards */
/* Activity feed rows — quiet, ledger-like */
.status-card {
  background: var(--bg);
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  transition: background 0.2s ease;
}

.status-card:hover {
  background: #F1EAE0;
}

.status-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--secondary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-card p {
  margin: 0;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ===== Team Ops traceability ===== */
.task-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.task-card-head strong { color: var(--text); font-size: 0.95rem; }
.task-card-meta { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }

/* Live pulsing dot */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(59, 165, 93, 0.5);
  animation: livepulse 1.6s ease-out infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(59, 165, 93, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(59, 165, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 165, 93, 0); }
}

/* Work-in-flight rows carry a status-coloured left edge */
.task-agent-row.working  { border-left-color: var(--success); }
.task-agent-row.delegated{ border-left-color: var(--accent); }
.task-agent-row.done     { border-left-color: var(--muted); }
.task-agent-row.bad      { border-left-color: var(--danger); }

.tar-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 3px; }
.tar-when { margin-left: auto; color: var(--muted); font-size: 0.68rem; }
.tar-task { margin: 0 0 5px; color: var(--text) !important; font-size: 0.82rem; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; }

.deleg-status {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(29,27,22,0.06); color: var(--text);
}
.deleg-status.working { background: rgba(59,165,93,0.14); color: #2f7d47; }
.deleg-status.delegated { background: rgba(242,169,59,0.16); color: #9a6a12; }
.deleg-status.bad { background: rgba(229,72,77,0.14); color: var(--danger); }

.deleg-type {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: var(--radius-pill);
  background: rgba(29,27,22,0.05); color: var(--muted);
}
.deleg-outcome {
  font-size: 0.66rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.deleg-outcome.ok   { background: rgba(59,165,93,0.14); color: #2f7d47; }
.deleg-outcome.warn { background: rgba(242,169,59,0.18); color: #9a6a12; }
.deleg-outcome.bad  { background: rgba(229,72,77,0.14); color: var(--danger); }

/* Evidence chips: model · tools · duration · cost · findings · retries */
.tar-trace { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.tar-trace span {
  font-size: 0.68rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: var(--radius-pill);
}
.tar-summary { margin: 2px 0 0; font-size: 0.76rem; color: var(--muted); line-height: 1.4; }
.tar-summary.bad { color: var(--danger); }

/* Live activity timeline */
.activity-row { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.activity-row:last-child { border-bottom: none; }
.activity-icon {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.72rem;
  background: rgba(29,27,22,0.06); color: var(--muted);
}
.activity-row.ok   .activity-icon { background: rgba(59,165,93,0.16); color: #2f7d47; }
.activity-row.warn .activity-icon { background: rgba(242,169,59,0.2); color: #9a6a12; }
.activity-row.bad  .activity-icon { background: rgba(229,72,77,0.16); color: var(--danger); }
.activity-body { min-width: 0; flex: 1; }
.activity-head { display: flex; align-items: baseline; gap: 6px; font-size: 0.74rem; }
.activity-head strong { color: var(--secondary); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.68rem; }
.activity-head span { color: var(--muted); }
.activity-when { margin-left: auto; font-size: 0.66rem; }
.activity-body p { margin: 1px 0 0; font-size: 0.8rem; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }

/* Plans */
.plans-list { display: flex; flex-direction: column; gap: 12px; }
.plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.plan-head strong { color: var(--text); font-size: 0.9rem; }
.plan-badge { font-size: 0.66rem; font-weight: 800; padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.plan-badge.working { background: rgba(59,165,93,0.14); color: #2f7d47; }
.plan-badge.ok { background: rgba(29,27,22,0.06); color: var(--muted); }
.plan-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.plan-step { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.plan-step-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.plan-step.working .plan-step-dot { background: var(--success); animation: livepulse 1.6s ease-out infinite; }
.plan-step.ok  .plan-step-dot { background: var(--success); }
.plan-step.bad .plan-step-dot { background: var(--danger); }
.plan-step-text { flex: 1; color: var(--text); min-width: 0; }
.plan-step.ok .plan-step-text { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(138,131,120,0.5); }
.plan-step-status { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.02em; }
.plan-step.working .plan-step-status { color: #2f7d47; }
.plan-step.bad .plan-step-status { color: var(--danger); }

/* Delegation trace drill-down */
.tar-trace-toggle {
  margin-top: 6px; padding: 2px 8px; font-size: 0.66rem; font-family: inherit;
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer; transition: all 0.15s ease;
}
.tar-trace-toggle:hover { color: var(--secondary); border-color: var(--secondary); }
.tar-trace-detail {
  margin-top: 8px; padding: 8px 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.7rem;
  max-height: 260px; overflow-y: auto;
}
.trace-loading { margin: 0; color: var(--muted); font-size: 0.72rem; }
.trace-span { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; line-height: 1.4; }
.trace-span + .trace-span { border-top: 1px dashed var(--border); }
.trace-icon { flex: 0 0 14px; color: var(--muted); text-align: center; }
.trace-line { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.trace-line b { font-weight: 700; }
.trace-at { color: var(--muted); font-size: 0.64rem; white-space: nowrap; }
.trace-args { color: var(--muted); }
.trace-ms { color: var(--muted); }
.trace-err { color: var(--danger); font-weight: 700; }
.trace-warn { color: #9a6a12; }
.trace-span.spawn .trace-icon, .trace-span.outcome .trace-icon { color: var(--secondary); }

/* Sage's own turn trace — same visual language as .tar-trace-toggle, on a chat bubble */
.sage-trace-toggle {
  margin-top: 6px; padding: 2px 8px; font-size: 0.66rem; font-family: inherit;
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer; transition: all 0.15s ease;
}
.sage-trace-toggle:hover { color: var(--secondary); border-color: var(--secondary); }
.trace-span.sage_turn_summary .trace-icon { color: var(--secondary); }

/* Fleet analytics */
.fleet-analytics { font-size: 0.82rem; }
.fa-stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.fa-stat {
  flex: 1 1 90px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.fa-stat strong { font-size: 1.15rem; color: var(--text); }
.fa-stat span { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fa-ok { color: var(--success); } .fa-warn { color: #9a6a12; } .fa-bad { color: var(--danger); }
.fa-alert {
  background: rgba(229,72,77,0.08); border: 1px solid rgba(229,72,77,0.25);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
  color: var(--danger); font-size: 0.78rem;
}
.fa-alert ul { margin: 6px 0 0; padding-left: 18px; }
.fa-alert li { color: var(--text); margin: 2px 0; }
.fa-alert em { color: var(--danger); font-style: normal; }
.fa-h { margin: 12px 0 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.fa-h .fa-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fa-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.fa-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.fa-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); color: var(--text); }
.fa-table tr:last-child td { border-bottom: none; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-chip {
  font-size: 0.7rem; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--bg); border: 1px solid var(--border); color: var(--muted);
}
.fa-chip.ok { background: rgba(59,165,93,0.12); color: #2f7d47; border-color: transparent; }
.fa-chip.warn { background: rgba(242,169,59,0.16); color: #9a6a12; border-color: transparent; }
.fa-chip.bad { background: rgba(229,72,77,0.12); color: var(--danger); border-color: transparent; }

/* OpenRouter account status */
.openrouter-status { margin-bottom: 12px; }
.openrouter-status:empty { display: none; }
.or-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.or-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.or-val { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.or-bar { height: 6px; background: var(--border); border-radius: var(--radius-pill); margin: 6px 0 4px; overflow: hidden; }
.or-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--secondary), var(--accent)); }
.or-fill.bad { background: var(--danger); }
.or-sub { font-size: 0.68rem; color: var(--muted); }
.or-of { color: var(--muted); font-weight: 400; font-size: 0.72rem; }

.backend-cost-breakdown { margin-bottom: 12px; }
.backend-cost-breakdown:empty { display: none; }
.backend-cost-breakdown .or-row { margin-bottom: 4px; }

/* ===== Reply-to-a-message ===== */
.chat-message { position: relative; }
/* ===== First-run onboarding ===== */
.onboarding-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(29, 27, 22, 0.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.onboarding-backdrop[hidden] { display: none; }
.onboarding-card {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border-radius: 22px; padding: 30px 32px;
  box-shadow: var(--shadow-lift);
}
.ob-kicker { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondary); margin-bottom: 6px; }
.onboarding-card h2 { margin: 0 0 10px; font-size: 1.45rem; color: var(--text); }
.onboarding-card p { margin: 0 0 12px; font-size: 0.9rem; color: var(--text); line-height: 1.55; }
.ob-sub { color: var(--muted) !important; }
.ob-points { margin: 0 0 16px; padding-left: 20px; font-size: 0.86rem; line-height: 1.7; color: var(--text); }
.ob-path { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 4px; }
.ob-path-head { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.ob-path p { font-size: 0.8rem; color: var(--muted); }
.ob-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ob-divider::before, .ob-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ob-mini-steps { margin: 0 0 10px; padding-left: 20px; font-size: 0.82rem; line-height: 1.8; color: var(--text); }
.ob-mini-steps a { color: var(--secondary); font-weight: 600; }
.ob-paste-row { display: flex; gap: 8px; }
.ob-error { color: var(--danger) !important; font-size: 0.78rem !important; margin-top: 8px !important; }
.ob-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ob-btn {
  padding: 10px 18px; font-family: inherit; font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); cursor: pointer; transition: all 0.15s ease;
}
.ob-btn:hover { border-color: var(--secondary); color: var(--secondary); }
.ob-btn.primary { background: var(--primary); color: #FBF8F3; border-color: var(--primary); }
.ob-btn.primary:hover { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.ob-btn.ghost { border-color: transparent; color: var(--muted); }
.ob-btn.ghost:hover { color: var(--text); border-color: var(--border); }
.ob-btn:disabled { opacity: 0.5; cursor: default; }
.ob-check { color: var(--success); }
.ob-balance { font-size: 0.95rem !important; }
.ob-balance strong { color: var(--success); }

/* ===== Guided setup coach (docked beside Sage's browser) ===== */
.ob-coach {
  position: fixed; left: 18px; bottom: 18px; z-index: 190;
  width: min(340px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lift);
}
.ob-coach[hidden] { display: none; }
.ob-coach-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ob-coach-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--secondary); }
.ob-coach-x { border: none; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ob-coach-x:hover { color: var(--danger); }
.ob-coach-steps { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.ob-coach-steps li { font-size: 0.8rem; color: var(--text); line-height: 1.4; }
.ob-coach-steps strong { display: block; }
.ob-coach-steps span { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 1px; }
.ob-coach-link {
  margin-top: 5px; padding: 4px 10px; font-family: inherit; font-size: 0.7rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--secondary); cursor: pointer;
}
.ob-coach-link:hover { border-color: var(--secondary); }

/* ===== Low-balance banner ===== */
.balance-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 195;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 42px 9px 16px;
  background: rgba(242, 169, 59, 0.16); border-bottom: 1px solid rgba(242, 169, 59, 0.4);
  font-size: 0.8rem; color: var(--text);
}
.balance-banner[hidden] { display: none; }
.balance-banner.critical { background: rgba(229, 72, 77, 0.14); border-bottom-color: rgba(229, 72, 77, 0.4); }
.balance-banner-cta {
  flex-shrink: 0; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--primary); color: #FBF8F3; font-weight: 700; font-size: 0.74rem; text-decoration: none;
}
.balance-banner-cta:hover { background: var(--secondary); }
.balance-banner-x {
  position: absolute; right: 12px; border: none; background: transparent;
  color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.balance-banner-x:hover { color: var(--text); }

/* ===== BYOK — connect your OpenRouter account ===== */
.byok-panel {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
}
.byok-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.byok-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.byok-state { font-size: 0.78rem; color: var(--muted); }
.byok-state.ok { color: var(--success); font-weight: 700; }
.byok-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.byok-btn {
  padding: 7px 14px; font-family: inherit; font-size: 0.78rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); cursor: pointer; transition: all 0.15s ease;
}
.byok-btn:hover { border-color: var(--secondary); color: var(--secondary); }
.byok-btn.primary { background: var(--primary); color: #FBF8F3; border-color: var(--primary); }
.byok-btn.primary:hover { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.byok-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.byok-btn:disabled { opacity: 0.5; cursor: default; }
.byok-input {
  flex: 1; min-width: 180px; padding: 7px 12px; font-family: inherit; font-size: 0.78rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
}
.byok-input:focus { outline: none; border-color: var(--secondary); }
.byok-note { margin: 8px 0 0; font-size: 0.7rem; color: var(--muted); line-height: 1.45; }

/* ===== Sage's live activity — inline in the chat ===== */
/* A live "what Sage is doing" bubble that appears under the founder's message
   while the turn runs, then is replaced by her reply. Works on desktop AND
   mobile (the old sidebar card was hidden on phones). */
.chat-activity {
  align-self: flex-start;
  max-width: min(560px, 88%);
  margin: 4px 0 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--secondary);
  border-radius: 14px;
}
.ca-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ca-title { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--secondary); }
.ca-spinner {
  width: 12px; height: 12px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--secondary);
  border-radius: 50%; animation: caspin 0.7s linear infinite;
}
@keyframes caspin { to { transform: rotate(360deg); } }
.ca-now { font-size: 0.85rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.ca-steps { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--border); padding-left: 9px; }
.ca-step { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Animated ellipsis on the current step — reads as "in progress". */
.sa-ellipsis::after {
  content: '…'; margin-left: 1px;
  animation: saellipsis 1.4s steps(4, end) infinite;
}
@keyframes saellipsis { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }

/* Nav icons — real SVGs, sized and aligned with the label */
.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon svg { display: block; }

/* ===== Topic index rail ===== */
.chat-body { display: flex; gap: 12px; flex: 1; min-height: 0; }
.chat-body > .chat-history { flex: 1; min-width: 0; }

.topic-rail {
  flex: 0 0 210px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px; overflow: hidden;
}
.topic-rail[hidden] { display: none; }
.topic-rail-head { display: flex; align-items: center; justify-content: space-between; }
.topic-rail-title { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.topic-refresh {
  border: none; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 0.9rem; line-height: 1; padding: 2px 5px; border-radius: 6px;
}
.topic-refresh:hover { color: var(--secondary); background: rgba(244,88,42,0.08); }
.topic-refresh.spinning { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.topic-filter {
  width: 100%; padding: 6px 9px; font-family: inherit; font-size: 0.76rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 9px;
}
.topic-filter:focus { outline: none; border-color: var(--secondary); }

.topic-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.topic-item {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  width: 100%; padding: 7px 9px; cursor: pointer;
  background: transparent; border: none; border-left: 2px solid transparent;
  border-radius: 8px; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease;
}
.topic-item:hover { background: var(--surface); border-left-color: var(--secondary); }
.topic-title { font-size: 0.78rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.topic-meta {
  font-size: 0.66rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topic-item.hit .topic-title { color: var(--secondary); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }
.topic-sep {
  margin-top: 6px; padding: 4px 9px 2px; border-top: 1px solid var(--border);
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.topic-empty { margin: 4px 2px; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
@keyframes topicmiss { 0%,100% { background: transparent; } 40% { background: rgba(229,72,77,0.16); } }
.topic-missing { animation: topicmiss 1.1s ease; }

.topic-toggle {
  position: absolute; top: 8px; left: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; font-family: inherit; font-size: 0.72rem; font-weight: 700;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(29, 27, 22, 0.06);
}
.topic-toggle:hover { color: var(--secondary); border-color: var(--secondary); }
.topic-toggle.active { color: #FBF8F3; background: var(--primary); border-color: var(--primary); }

@media (max-width: 900px) {
  .topic-rail { position: absolute; inset: 44px 12px auto 12px; z-index: 6; max-height: 60vh; box-shadow: var(--shadow-lift); }
}

/* Reply lives in the sender-label row, LEFT-aligned. Absolute top-right put it
   underneath the Shared Space panel (rendered but invisible). Always visible —
   a hover-only affordance is undiscoverable and unreachable on touch. */
.msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-reply-btn {
  opacity: 0.55; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.02em; line-height: 1;
  padding: 4px 10px; min-height: 24px;
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 999px;
}
.chat-message:hover .msg-reply-btn, .msg-reply-btn:focus-visible { opacity: 1; }
.msg-reply-btn:hover { color: var(--secondary); border-color: var(--secondary); background: rgba(244,88,42,0.08); }
/* No hover (touch/mobile): keep it fully visible so it's always tappable. */
@media (hover: none) {
  .msg-reply-btn { opacity: 0.85; }
}

/* Quoted original shown above a reply */
.msg-quote {
  display: flex; flex-direction: column; gap: 1px;
  border-left: 3px solid var(--secondary);
  background: rgba(29,27,22,0.04);
  border-radius: 8px; padding: 5px 9px; margin-bottom: 6px;
  cursor: pointer; transition: background 0.15s ease;
}
.msg-quote:hover { background: rgba(244,88,42,0.09); }
.msg-quote-who { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--secondary); }
.msg-quote-text { font-size: 0.76rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* WhatsApp-style per-message timestamp — small, muted, bottom-right */
.msg-time {
  margin-top: 4px; text-align: right; font-size: 0.64rem;
  color: var(--muted); opacity: 0.75; user-select: none;
}
.chat-message.founder .msg-time { text-align: left; }

/* Flash the target when you jump to it from a quote */
@keyframes msgflash { 0%,100% { background: transparent; } 30% { background: rgba(242,169,59,0.28); } }
.msg-flash { animation: msgflash 1.5s ease; border-radius: 12px; }

/* Composer chip: what you're replying to */
.reply-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 4px 0; padding: 6px 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--secondary); border-radius: 10px;
}
.reply-chip[hidden] { display: none; }
.reply-chip-label { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--secondary); white-space: nowrap; }
.reply-chip-text { flex: 1; min-width: 0; font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-chip-x {
  flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 4px; border-radius: 6px;
}
.reply-chip-x:hover { color: var(--danger); }

/* Self-tuning routing */
.fa-policy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fa-policy strong { color: var(--secondary); }
.fa-evolve {
  flex-shrink: 0; padding: 5px 12px; font-size: 0.72rem; font-family: inherit; font-weight: 700;
  color: #FBF8F3; background: var(--primary); border: none; border-radius: var(--radius-pill);
  cursor: pointer; transition: all 0.15s ease;
}
.fa-evolve:hover { background: var(--secondary); }
.fa-evolve:disabled { opacity: 0.5; cursor: default; }
.fa-policy-note { margin: 6px 0 0; font-size: 0.68rem; color: var(--muted); }

/* Usage stats — big charcoal numbers, Tubik style */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-cell {
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.stat-value {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-sub {
  font-size: 0.74rem;
  color: var(--muted);
}

.stat-bar-block {
  padding: 0 2px;
}

.stat-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.stat-bar-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(29, 27, 22, 0.08);
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  transition: width 0.5s ease;
}

.stat-trend {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Backend settings pane */
.ollama-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  font-size: 0.85rem;
}
.ollama-status .status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.ollama-status.healthy { background: rgba(16, 185, 129, 0.08); color: #065f46; }
.ollama-status.healthy .status-dot { background: #10b981; }
.ollama-status.down { background: rgba(239, 68, 68, 0.08); color: #991b1b; }
.ollama-status.down .status-dot { background: #ef4444; }

/* ===== Models card — responsive sections (desktop + mobile) =====
   .models-layout is a container-query context so the sub-panels reflow to the
   card's OWN width (works whether the card is full-width on desktop or a narrow
   column on a phone / split Shared Space pane), independent of the viewport. */
.models-layout {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.models-section-head { margin-bottom: 12px; }
.models-section-title {
  margin: 0;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text);
}
.models-section-sub {
  margin: 5px 0 0;
  font-size: 0.75rem; line-height: 1.5; color: var(--muted);
}

/* Effective role → model cards (rendered by model-selector.js). This is the
   only rule that styles #backend-matrix now that the old native-inference
   renderer (and its `.backend-matrix` rule) are gone. */
.role-cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 0;
}
.model-card {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); min-width: 0;
}
.model-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.model-card-value { margin-top: 4px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.model-card-blurb { margin-top: 2px; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

/* Role → model selector rows */
.model-selector { margin-top: 14px; }
.model-rows { display: flex; flex-direction: column; }
.model-row {
  display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.model-row:last-child { border-bottom: none; }
.model-row-label { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.model-row-select {
  width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; font-family: inherit; font-size: 0.88rem;
  background: var(--bg-soft, var(--bg)); color: var(--text);
}

/* Even spacing between the provider sub-panels inside one section */
.models-section .byok-panel { margin-bottom: 10px; }
.models-section .byok-panel:last-child { margin-bottom: 0; }

/* Checkbox rows — box top-aligned with wrapping label text */
.byok-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.byok-check input { margin-top: 2px; flex: none; }

/* Add-custom-provider form */
.add-provider-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.add-provider-form[hidden] { display: none; }
.cb-price-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-price-input { flex: 1 1 200px; min-width: 0; max-width: 260px; }
.cb-error { color: var(--danger, #b8353a); }

/* Narrow container (phones, split panes): single-column cards, stacked
   label-over-control rows, full-width inputs, no horizontal overflow. */
@container (max-width: 460px) {
  .role-cards { grid-template-columns: 1fr; }
  .model-row { grid-template-columns: 1fr; gap: 6px; align-items: stretch; }
  .cb-price-input { max-width: none; flex-basis: 100%; }
  .byok-actions .byok-input { flex-basis: 100%; min-width: 0; }
}

/* Toggle switch (shared component) */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  user-select: none;
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-switch {
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-label input:checked + .toggle-switch {
  background: var(--primary);
}

.toggle-label input:checked + .toggle-switch::after {
  left: 19px;
}

/* Delegate panel */
.delegate-section {
  margin-bottom: 18px;
}

.delegate-section h3 {
  margin: 0 0 2px 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.agent-roster-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.agent-roster-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: all 0.2s ease;
}

.agent-roster-card:hover {
  border-color: #F4582A;
  box-shadow: 0 4px 12px rgba(244, 88, 42, 0.1);
}

.agent-roster-card strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
}

.agent-roster-card .agent-role {
  margin: 2px 0 8px 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.agent-roster-card .agent-fact {
  margin: 3px 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.agent-roster-card .agent-fact span {
  font-weight: 600;
  color: var(--primary);
}

.delegate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.delegate-form select,
.delegate-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  background: white;
}

.delegate-form textarea {
  min-height: 80px;
  resize: vertical;
}

.delegate-form-row {
  display: flex;
  gap: 10px;
}

.delegate-form-row select {
  flex: 1;
}

.delegate-submit-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #F4582A, #1D1B16);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delegate-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 88, 42, 0.25);
}

.delegation-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.delegation-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.delegation-card .delegation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.delegation-card strong {
  font-size: 0.85rem;
  color: var(--text);
}

.delegation-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.delegation-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.delegation-status.delegated {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.delegation-status.in-progress {
  background: rgba(244, 88, 42, 0.15);
  color: var(--primary);
}

.delegation-status.done {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.delegation-reason {
  margin-top: 6px !important;
  font-size: 0.76rem !important;
  font-style: italic;
  color: var(--primary) !important;
}

.delegation-priority {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--muted);
}

/* Friendly empty state — dashed cream box, never a bare line of text */
.delegation-empty {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 6px 0 0;
  padding: 18px 16px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--bg);
  text-align: center;
  line-height: 1.5;
}

/* Knowledge Graph */
.kg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.kg-stat {
  background: var(--bg);
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  text-align: center;
  min-width: 84px;
}

.kg-stat strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kg-stat span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kg-node-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.kg-group {
  background: var(--bg);
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
}

.kg-group h4 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--text);
}

.kg-group h4 span {
  font-weight: 400;
  color: var(--muted);
}

.kg-group ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.kg-group li {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.kg-summary {
  font-style: italic;
}

.kg-more {
  list-style: none;
  margin-left: -18px;
  font-style: italic;
}

/* Sub-agent activity */
.subagent-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.subagent-card {
  background: var(--bg);
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
}

.subagent-card .delegation-meta strong {
  font-size: 0.82rem;
}

.subagent-card p {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

.delegation-status.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.delegation-status.running {
  background: rgba(244, 88, 42, 0.15);
  color: var(--primary);
}

.delegation-status.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

/* Responsive */
/* ===== Sage's browser — her in-call screen-share window =====
   Lives on the call shared view. Tubik chrome (cream, charcoal, coral tag),
   sandboxed iframe carrying whatever URL she opened. */
.sage-browser {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.sage-browser-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.sage-browser-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.sage-browser-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border); }
.sage-browser-dot:nth-child(1) { background: #FF5F57; }
.sage-browser-dot:nth-child(2) { background: #FEBC2E; }
.sage-browser-dot:nth-child(3) { background: #28C840; }

.sage-browser-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 16px;
  background: var(--bg);
  border-radius: var(--radius-pill);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sage-browser-tag {
  font-size: 0.68rem;
  color: var(--secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.sage-browser-note {
  padding: 9px 16px;
  background: rgba(244, 88, 42, 0.07);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  flex: 0 0 auto;
}

.sage-browser-frame {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background: white;
  min-height: 0;
}

/* ===== Microbots — Sage's expressive swarm stage =====
   Lives on the platform's own cream canvas; bots are charcoal ink and
   coral/amber embers with Patronus-style trails. */







/* ===== Phone (≤768px) — same product, native app shape =====
   Lives at the END of the file so it wins the cascade over every
   desktop rule above. The sidebar dissolves (display: contents):
   Sage's card becomes the top bar, the nav becomes a bottom tab bar,
   brand/cost/rail step aside. */
@media (max-width: 768px) {
  .app-shell {
    flex-direction: column;
  }

  /* Floating shared-view → full-width bottom SHEET on phones. Anchored to
     the bottom edge with `dvh` (dynamic viewport height) so the collapsing
     mobile address bar / on-screen keyboard can't push it off-screen — the
     old `vh` + fixed-offset math was the reason it "vanished". High z-index
     keeps it above the chat input and top app bar. Tap the header's –/✕ to
     minimize or dismiss; the restore pill (below) brings it back. */
  .shared-view-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 70vh;          /* fallback for browsers without dvh */
    height: 70dvh;
    min-width: 0;
    max-width: none;
    max-height: none;
    border-radius: 16px 16px 0 0;
    z-index: 120;
    resize: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* On mobile, minimizing fully hides the panel — the persistent header
     strip at the bottom was confusing on a phone, and the Shared Space
     restore pill (above) is a cleaner way to bring it back. */
  .shared-view-panel.minimized {
    display: none !important;
  }

  /* Mobile restore pill — when a surface exists but the sheet is hidden,
     a tappable chip floats above the chat input so the browser/whiteboard
     is always one tap away (never truly "gone"). Shown/hidden by JS. */
  .sv-restore-pill {
    position: fixed;
    right: 14px;
    bottom: 104px;
    left: auto;
    transform: none;
    z-index: 110;
    display: none;            /* JS toggles to flex */
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--secondary, #F4582A);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(244, 88, 42, 0.35);
    cursor: pointer;
    white-space: nowrap;
  }
  /* White dot reads on the coral mobile pill (coral-on-coral would vanish). */
  .sv-restore-pill-dot { background: #fff; }

  /* The sidebar itself goes invisible — its two children take over: the
     drawer (off-canvas) and the Sage card (top bar). display:contents
     keeps both as direct children of .app-shell for ordering. */
  .sidebar {
    display: contents;
  }

  .sidebar .cost-window {
    display: none;
  }

  /* Hamburger appears in the top bar (left of Sage's name) */
  .drawer-toggle {
    display: inline-flex;
    color: var(--text);
    margin-right: 4px;
  }

  /* Close X appears at top-right of the drawer */
  .drawer-close {
    display: inline-block;
  }

  /* Drawer = off-canvas slide-in panel. Closed by default; .open class
     slides it in from the left. Tubik aesthetic — soft cream surface,
     subtle border, rounded corners on the right edge only.
     Note: this overrides the desktop's display:contents — on mobile we
     want a real container so position:fixed works and the drawer's
     children stay grouped inside it. */
  .sidebar-drawer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    background: var(--surface);
    z-index: 1100;
    padding: calc(14px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
    border-right: 1px solid var(--border);
    border-radius: 0 18px 18px 0;
    box-shadow: 8px 0 30px rgba(29, 27, 22, 0.18);
    transform: translateX(-110%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Reset desktop order rules — mobile uses source order inside the drawer */
  .sidebar-drawer .brand,
  .sidebar-drawer .view-toggle,
  .sidebar-drawer .user-foot { order: 0; }
  .sidebar-spacer { display: none; }
  .sidebar-drawer.open {
    transform: translateX(0);
  }
  /* While the founder is dragging, kill the transition so the panel
     tracks their finger 1:1. JS removes this class on touchend. */
  .sidebar-drawer.dragging {
    transition: none;
  }

  /* Backdrop dims the rest of the app while the drawer is open. Tapping
     it closes the drawer. */
  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(29, 27, 22, 0.45);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer-internal elements: brand is visible inside the drawer (the
     little b·u·n·g·a logo); nav buttons are big and tappable; user-foot
     anchors to the bottom of the drawer. */
  .sidebar-drawer .brand { display: flex; }
  .sidebar-drawer .view-toggle { flex-direction: column; gap: 6px; }
  .sidebar-drawer .view-toggle-btn {
    padding: 12px 14px;
    border-radius: var(--radius-pill);
    text-align: left;
    font-size: 0.95rem;
  }
  .sidebar-drawer .user-foot {
    margin-top: auto;
    background: var(--bg-soft, #FBF8F3);
  }

  /* Sage card → compact top app bar — sleek, minimal height */
  .sidebar-sage {
    order: -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding: 6px 12px;
    padding-top: calc(6px + env(safe-area-inset-top));
    background: var(--surface);
  }

  /* flex: 1 makes manager-info grow to fill space, keeping Sage left-aligned
     right after the hamburger while pushing the call button to the right */
  .sidebar-sage .manager-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .sidebar-sage .manager-role-tag {
    display: none;
  }

  .sidebar-sage .manager-info h2 {
    font-size: 0.92rem;
    margin: 0;
  }

  .sidebar-sage .context-usage {
    display: none;
  }


  /* Circle icon-only button on mobile — smaller to match sleek header */
  .call-toggle-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .call-toggle-btn svg {
    width: 15px;
    height: 15px;
  }

  .call-toggle-btn .call-btn-label {
    display: none;
  }

  /* Nav now lives inside the drawer — drop the old bottom-tab-bar overrides.
     The drawer's own .view-toggle rule (above) sets column layout. */

  .grid-layout {
    order: 0;
  }

  /* Chat breathes on a small screen */
  .chat-history {
    padding: 14px 12px;
    gap: 10px;
  }

  .chat-message {
    max-width: 88%;
    padding: 11px 14px;
  }

  /* On mobile, table-containing messages go full-bleed like rich content cards */
  .chat-message.agent.has-wide-content {
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 13px 0;
  }

  .chat-message.agent.has-wide-content .sender-label {
    padding: 0 14px;
  }

  .chat-message.agent.has-wide-content .message-content {
    padding: 0 14px;
  }

  .chat-message.agent.has-wide-content .message-content .table-scroll,
  .chat-message.agent.has-wide-content .message-content > table {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .chat-message.agent.has-wide-content .message-content .table-scroll {
    padding: 0;
    margin: 6px 0;
  }

  .chat-message.agent.has-wide-content .message-content table {
    min-width: 100%;
  }

  .chat-form {
    padding: 8px 10px 12px;
  }

  /* Mic is a desktop affordance — on mobile most users tap-and-hold the
     native keyboard mic anyway, so removing ours saves a precious bit of
     horizontal space for the textarea. */
  #chat-mic-btn {
    display: none;
  }

  .input-group {
    border-radius: 24px;
    padding: 6px 6px 6px 16px;
  }

  /* 16px stops iOS Safari from zooming the page on focus */
  #chat-input {
    font-size: 16px;
  }

  .send-btn {
    padding: 10px 18px;
    font-size: 0.85rem;
  }

  /* Operations on phone — single column, tighter frame */
  .ops-scroll {
    padding: 18px 14px 28px;
  }

  .ops-header h2 {
    font-size: 1.2rem;
  }

  .ops-accordion {
    border-radius: 14px;
  }

  .ops-card-head {
    padding: 14px 16px;
    gap: 8px;
  }

  /* Title + hint share the first line up to here; below this width the hint
     drops to its own line under the title instead of squeezing the chevron
     — it's real content, not something to truncate or hide on a phone. */
  .ops-card-hint {
    flex-basis: 100%;
  }

  .ops-card.open .ops-card-body {
    padding: 0 16px 16px;
  }

  /* The tap target is the whole header row (full-width, ~48px tall with the
     padding above), not just the chevron icon, so it already clears the
     44x44px minimum touch-target guideline without needing a larger icon
     button — enlarging just the icon here would look oversized relative to
     the 12px chevron glyph it contains. */

  .task-progress-list,
  .ops-two-col {
    grid-template-columns: 1fr;
  }

  .task-card {
    padding: 12px 14px;
    border-radius: 12px;
    gap: 8px;
  }

  .task-card strong {
    font-size: 0.84rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .task-agent-row {
    padding: 7px 10px;
    font-size: 0.76rem;
  }

  .task-card-head {
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
  }

  .task-card-head strong {
    font-size: 0.86rem;
  }

  .task-meta {
    flex-wrap: wrap;
    font-size: 0.7rem;
  }

  .tar-task {
    font-size: 0.76rem;
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-value {
    font-size: 1.2rem;
  }
}

/* ===== Integration setup wizard =====
   Renders in both the chat-mode shared-view panel (compact card) and the
   call-mode shared-view card (larger, edge-to-edge). Coral signature,
   step-by-step rhythm so Sage can voice-narrate while the founder clicks. */

.integration-wizard-host {
  padding: 14px 16px;
}
.call-integration-wizard-host {
  padding: 28px;
}
.integration-wizard-host:empty {
  padding: 0;
}

.iw-card {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #ECE5DA);
  border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-soft, 0 6px 24px rgba(29, 27, 22, 0.08));
  position: relative;
  animation: iw-fade-in 0.3s ease;
}

@keyframes iw-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.iw-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.iw-tag {
  display: inline-block;
  background: rgba(244, 88, 42, 0.10);
  color: var(--secondary, #F4582A);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.iw-step-count {
  font-size: 0.72rem; font-weight: 700;
  color: var(--muted, #7C7870);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.iw-title {
  margin: 0 0 10px;
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--text, #1D1B16);
}
.iw-body {
  margin: 0 0 16px;
  font-size: 0.95rem; line-height: 1.5;
  color: var(--text, #1D1B16);
}

.iw-open-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-soft, #FBF8F3);
  border: 1px solid var(--border, #ECE5DA);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text, #1D1B16);
  text-decoration: none;
  margin-bottom: 14px;
  transition: all 0.15s;
  word-break: break-all;
}
.iw-open-link:hover {
  border-color: var(--secondary, #F4582A);
  background: white;
}
.iw-open-arrow { color: var(--secondary, #F4582A); font-weight: 700; }

.iw-token-label {
  display: block; margin-bottom: 8px;
}
.iw-token-label > span {
  display: block;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted, #7C7870);
  margin-bottom: 6px;
}
.iw-token-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--border, #ECE5DA); border-radius: 10px;
  background: var(--bg-soft, #FBF8F3);
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text, #1D1B16);
  transition: border-color 0.15s;
}
.iw-token-input:focus {
  outline: none; border-color: var(--secondary, #F4582A);
  background: white;
}
.iw-token-help {
  font-size: 0.78rem; color: var(--muted, #7C7870);
  margin: 6px 0 12px; line-height: 1.45;
}
.iw-test-ok {
  background: rgba(47, 158, 90, 0.10);
  color: #1E6B3E;
  border-left: 3px solid #2F9E5A;
  border-radius: 6px;
  padding: 9px 12px; margin-bottom: 12px;
  font-size: 0.85rem; font-weight: 600;
}
.iw-test-fail {
  background: rgba(220, 53, 69, 0.08);
  color: #A12B36;
  border-left: 3px solid #DC3545;
  border-radius: 6px;
  padding: 9px 12px; margin-bottom: 12px;
  font-size: 0.85rem; font-weight: 500;
}

.iw-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 6px;
}
.iw-btn {
  font-family: inherit;
  border: none; border-radius: 999px;
  padding: 11px 22px;
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.iw-btn-primary {
  background: var(--secondary, #F4582A);
  color: white;
  box-shadow: 0 4px 14px rgba(244, 88, 42, 0.30);
}
.iw-btn-primary:hover:not(:disabled) {
  background: var(--coral-dark, #D9481E);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(244, 88, 42, 0.40);
}
.iw-btn:disabled {
  opacity: 0.6; cursor: progress;
}
.iw-btn-loading::after {
  content: '…'; margin-left: 4px;
}

.iw-cancel-link {
  display: block; margin: 12px 0 0;
  background: none; border: none;
  color: var(--muted, #7C7870);
  font-size: 0.75rem; cursor: pointer;
  padding: 4px 0; text-align: left;
}
.iw-cancel-link:hover {
  color: var(--secondary, #F4582A);
  text-decoration: underline;
}

/* Call mode — bigger card so it reads at a glance on a phone in a video call */
.call-integration-wizard-host .iw-card {
  padding: 28px 32px 24px;
  max-width: 560px; margin: 0 auto;
}
.call-integration-wizard-host .iw-title { font-size: 1.5rem; }
.call-integration-wizard-host .iw-body { font-size: 1.02rem; }

/* ===== Live browser (noVNC) =====
   The dark chrome around the canvas mirrors a real browser window.
   Coral status dot pulses to make it obvious this is a LIVE shared
   session — Sage and the founder are both touching the same Chromium. */

/* Chat-mode browser host — needs explicit flex so the iframe inside has a
   viewport to render into. Mirrors the call-mode rule below. */
.live-browser-host {
  padding: 0;
  flex: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.live-browser-host:empty {
  display: none;
  flex: 0 0 auto;
}
.live-browser-host .live-browser-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
}
.live-browser-host .live-browser-iframe {
  flex: 1;
  width: 100%;
  height: auto;
}

.live-browser-card {
  background: #1D1B16;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2A2620;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  margin: 12px 0;
}
.live-browser-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #2A2620;
  color: #FBF8F3;
  font-size: 0.78rem;
  border-bottom: 1px solid #1D1B16;
}
.live-browser-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F4582A;
  animation: lb-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lb-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244, 88, 42, 0.5); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 4px rgba(244, 88, 42, 0); }
}
.live-browser-status { flex: 1; opacity: 0.88; }
.live-browser-close {
  background: none; border: none; color: rgba(251,248,243,0.6);
  cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 4px;
  transition: all 0.15s;
}
.live-browser-close:hover { color: #FBF8F3; background: rgba(255,255,255,0.08); }

.live-browser-iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  background: #1D1B16;
}

/* Browser chrome bar — back / forward / reload / URL / new-tab. Dark to
   match the live-browser card; sits between the status bar and the canvas. */
.lb-chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #232019;
  border-bottom: 1px solid #15130f;
  flex-shrink: 0;
}
.lb-nav {
  background: rgba(255,255,255,0.06);
  border: none;
  color: #FBF8F3;
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}
.lb-nav:hover { background: rgba(244, 88, 42, 0.4); }
.lb-zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.lb-zoom-label { color: rgba(251,248,243,0.85); font-size: 0.72rem; font-weight: 600; min-width: 34px; text-align: center; }
.lb-url {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  background: #15130f;
  border: 1px solid #2e2a22;
  border-radius: 14px;
  color: #FBF8F3;
  font-family: inherit;
  font-size: 0.8rem;
}
.lb-url:focus { outline: none; border-color: var(--secondary, #F4582A); }

/* Tab strip — only shown when >1 tab. */
.lb-tabs {
  display: none;        /* JS → flex when >1 tab */
  align-items: stretch;
  gap: 2px;
  padding: 4px 6px 0;
  background: #232019;
  overflow-x: auto;
  flex-shrink: 0;
}
.lb-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px;
  background: rgba(255,255,255,0.05);
  color: rgba(251,248,243,0.6);
  border-radius: 8px 8px 0 0;
  font-size: 0.74rem; font-weight: 600;
  cursor: pointer;
  max-width: 180px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lb-tab-active { background: #1D1B16; color: #FBF8F3; }
.lb-tab-label { overflow: hidden; text-overflow: ellipsis; }
.lb-tab-close {
  background: none; border: none;
  color: inherit; opacity: 0.6;
  cursor: pointer; font-size: 0.7rem;
  width: 16px; height: 16px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lb-tab-close:hover { opacity: 1; background: rgba(255,255,255,0.12); }

/* CDP-screencast stage: the canvas fills the card. Image-rendering
   crisp-edges so JPEG frames don't blur on Retina / scaled displays. */
.live-browser-stage {
  flex: 1;
  display: flex;
  align-items: center;      /* center + letterbox the canvas */
  justify-content: center;
  background: #1D1B16;
  min-height: 320px;
  overflow: hidden;
}
.live-browser-canvas {
  /* Keep the page's true aspect ratio (the screenshot is 1440×900) so the
     page isn't vertically squished. The canvas scales uniformly to fit the
     stage and letterboxes — and because the element box == the drawn image
     (no object-fit), click mapping via getBoundingClientRect stays exact. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 1440 / 900;
  display: block;
  outline: none;
  image-rendering: auto;
  cursor: crosshair;
  background: #1D1B16;
}
.live-browser-canvas:focus { outline: 2px solid var(--secondary, #F4582A); outline-offset: -2px; }

/* Hidden mobile-keyboard relay — must be focusable, so we can't display:none.
   Position absolutely with near-zero size + invisible; opening the soft
   keyboard on touch needs a real <input> in the DOM that the OS treats as
   text-editable AND not "hidden". iOS/Android refuse to raise the keyboard
   for an input with z-index below the page or a sub-16px font, so we keep it
   stacked in-flow (z-index:1) with font-size:16px while staying invisible
   via opacity. pointer-events:none keeps canvas taps hitting the canvas. */
.live-browser-kbd {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  font-size: 16px;          /* <16px makes iOS reject/zoom; 0 disqualifies */
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  z-index: 1;
}

/* Sage's cursor — coral pulse that flashes wherever she just clicked or
   typed via mcp_browser_*. Distinguishes her actions from the founder's
   own clicks (which the founder is making themselves so don't need a
   visual marker). */
.live-browser-stage { position: relative; }
.sage-cursor-pulse {
  position: absolute;
  width: 18px; height: 18px;
  margin-left: -9px; margin-top: -9px;
  border-radius: 50%;
  background: rgba(244, 88, 42, 0.55);
  box-shadow: 0 0 0 0 rgba(244, 88, 42, 0.8);
  pointer-events: none;
  animation: sage-cursor-pulse 1.2s ease-out forwards;
  z-index: 5;
}
@keyframes sage-cursor-pulse {
  0%   { transform: scale(0.5); box-shadow: 0 0 0 0 rgba(244, 88, 42, 0.8); opacity: 1; }
  60%  { transform: scale(2.0); box-shadow: 0 0 0 18px rgba(244, 88, 42, 0); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Call mode: the panel-state machine hides call-shared-view-body when the
   browser or wizard is active. But call-shared-view is flex column with
   body:flex:1, so siblings with no flex value collapse to 0. Make the
   alternative hosts (browser, wizard) and their cards FILL the parent so
   the iframe actually has a viewport to render into. */
.call-live-browser-host,
.call-integration-wizard-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.call-live-browser-host:empty,
.call-integration-wizard-host:empty {
  flex: 0 0 auto;
  display: none;
}
.call-live-browser-host .live-browser-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
}
.call-live-browser-host .live-browser-iframe {
  flex: 1;
  height: auto;        /* let flex own the height */
  max-height: none;
  width: 100%;
}

/* ===== Panel tabs (whiteboard / browser / wizard) =====
   Shown only when more than one surface is "available". Coral underline
   marks the active tab. */
.shared-view-tabs {
  display: flex; gap: 6px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border, #ECE5DA);
  background: var(--surface, #FFFFFF);
}
.shared-view-tabs:empty { display: none; }
/* Call mode is voice + screen-share first — Sage controls what's shown and
   the floating chrome already labels it, so the manual tab switcher just
   floated awkwardly over the content. Hide it entirely in call mode; the
   tabs remain a chat-mode-only affordance. */
.call-shared-view-tabs { display: none !important; }
.pv-tab {
  background: none; border: none;
  padding: 8px 12px 10px;
  font-family: inherit;
  font-size: 0.78rem; font-weight: 700;
  color: var(--muted, #7C7870);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.pv-tab:hover { color: var(--text, #1D1B16); }
.pv-tab-active {
  color: var(--secondary, #F4582A);
  border-bottom-color: var(--secondary, #F4582A);
}
.call-shared-view-tabs .pv-tab { color: rgba(251,248,243,0.6); }
.call-shared-view-tabs .pv-tab:hover { color: #FBF8F3; }
.call-shared-view-tabs .pv-tab-active { color: #F4582A; }