/* ==========================================================================
   Wholegrain Managing Director — voice PWA
   ChatGPT-style glowing blue orb on near-black. CSS does all the pixel work;
   app.js only writes --amp each frame and toggles the root state class.
   ========================================================================== */

/* ---- 5.1 Palette + animatable breath ---------------------------------- */
:root {
  /* Wholegrain brand (sampled from wholegrain.ai): charcoal ground, cream ink,
     warm wheat/amber accent that ties to the wholegrain-bread logo. */
  --bg-0: #090a0c;
  --bg-1: #101318;

  /* Exact Director console teal (#4ec9b0) — unifies the orb glow + UI chrome
     with the Director. Mood states (warming/transcribing) still override these. */
  --accent: #4ec9b0;
  --accent-rgb: 78, 201, 176;
  --accent-soft: #94decf;
  --glow: rgba(78, 201, 176, 0.5);
  /* Back-compat alias so shared components (spinner, Start button) go warm. */
  --orb-mid: var(--accent);

  --text-primary: #e8e6e1;
  --text-secondary: #9ca3af;
  --text-tertiary: rgba(232, 230, 225, 0.42);

  --ctrl-bg: rgba(255, 255, 255, 0.10);
  --ctrl-glyph-muted: #9ca3af;

  --end-red: #E5484D;
  --end-red-rgb: 229, 72, 77;
  --end-red-press: #C93B3F;
  --error-text: #E5848A;

  --ok-green: #5fcf9e;
  /* Document-branch marks stay a light grey, independent of voice mood. */
  --chat-branch: #c8c8c8;
  --chat-branch-rgb: 200, 200, 200;
  --chat-branch-ink: #c8c8c8;

  /* Pre-first-speech: portfolio connect / greet prep (red, not live teal). */
  --warm-accent: #f87171;
  --warm-accent-rgb: 248, 113, 113;
  --warm-accent-soft: #fca5a5;
  --warm-glow: rgba(248, 113, 113, 0.45);

  --transcribe-accent: #a78bfa;
  --transcribe-accent-rgb: 167, 139, 250;
  --transcribe-accent-soft: #ddd6fe;
  --transcribe-glow: rgba(167, 139, 250, 0.5);

  /* Audio amplitude (0..1), written by the rAF loop. */
  --amp: 0;

  /* Responsive avatar diameter; everything else scales off it. */
  --orb: clamp(150px, 44vw, 210px);

  /* Raleway leads the body stack to match the Director console's typographic
     identity (already preloaded in index.html); Inter remains as a fallback. */
  /* User text-size preference (Settings → Display). Every font-size in this
     sheet is multiplied by it; rem sizes scale via the html font-size below.
     Written to the document element by app.js from device-local storage. */
  --wg-text-scale: 1;
  /* Artifact editor reading zoom (toolbar − / % / +). Stacks on text-size. */
  --artifact-doc-zoom: 1;

  --font-sans: "Raleway", "Inter", -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
  --wg-body-weight: 400;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Site / document pair — licensed stand-in for Claude's anthropic-sans + anthropic-serif. */
  --font-site-sans: "Source Sans 3", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-site-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  /* Chat column: 744px is the previous 620px cap + 20%. Composer, log, chips,
     and chat-mode detail panels (Schedule, Top of mind, Recent, Watches) share it. */
  --chat-column-max: 744px;
  --chat-column-width: min(var(--chat-column-max), 92vw);
  /* Document reading column: sibling of --chat-column-max. 800px matches the
     Reader's --content-width. Chat stays 744 (conversation); the artifact card
     gets a slightly wider page. Applied to the reading surface, not the pane. */
  --reading-column-max: 800px;
  /* Left lane for the chat-mode icon stack. 0 = the stack may overlay (mobile,
     companion float). Desktop always reserves this so the column does not
     slide under the icons when they fade or tuck into the logo. */
  --chat-rail-gutter: 0px;
  --chat-rail-end: 24px;

  /* Chat composer: reserve = pill + top padding; gutter = gap from viewport bottom. */
  --chat-composer-reserve: 104px;        /* desktop stacked (textarea + toolbar) */
  --chat-composer-reserve-mobile: 68px;   /* mobile single-row pill */
  --chat-composer-gutter: 20px;          /* desktop breathing room below the box */
  /* Mobile keyboard-closed gap: full home-indicator inset so the composer floats
     above the bottom edge like native chat apps (ChatGPT-style). */
  --chat-mobile-gap: max(12px, env(safe-area-inset-bottom));

  /* Solid "island" surface for floating top-bar controls on mobile (so the
     scrolling conversation can't show through behind them). */
  --island-bg: #1c2026;
  --island-bg-hover: #262b32;

  /* ---- Director design-system tokens (ported from ui/storybook-app, Level 1)
     Structural primitives borrowed from the Director console so the Managing
     Director shares its surfaces, hairline borders, radii, depth and motion.
     The voice-orb accent system (the --accent vars and --glow) is intentionally
     left intact so the orb keeps its mood-reactive theming
     (warming/transcribing). */
  --ds-surface-1: rgba(255, 255, 255, 0.03);
  --ds-surface-2: rgba(18, 20, 24, 0.78);
  --ds-border-hairline: rgba(255, 255, 255, 0.06);
  --ds-border-hairline-hover: rgba(255, 255, 255, 0.10);
  /* Ultra thinking. Cool indigo, off the warm Low→Max thinking ramp so Ultra
     never reads as "redder than Max". */
  --ultra-accent: rgb(124, 108, 232);
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.45);
  --ds-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-duration-fast: 150ms;
  --ds-duration-normal: 200ms;
  /* Director teal at low alpha — a single, consistent keyboard focus affordance. */
  --ds-focus-ring: rgba(78, 201, 176, 0.35);

  /* "Glass" recipe (Director console .surface--glass): a translucent white sheen
     + backdrop blur + hairline edge + top highlight. Used on the chat box and
     floating popovers. --ds-overlay-* is the heavier frosted variant for sheets. */
  --ds-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  --ds-glass-blur: 16px;
  --ds-overlay-bg: rgba(18, 20, 24, 0.82);
  --ds-overlay-blur: 20px;

  /* Perplexity-style floating glass controls: dark translucent material,
     heavy frost blur over scrolling content, subtle top-edge highlight. */
  --ui-glass-fill: rgba(32, 34, 38, 0.44);
  --ui-glass-fill-hover: rgba(44, 47, 52, 0.54);
  --ui-glass-border: rgba(255, 255, 255, 0.11);
  --ui-glass-blur: 40px;
  --ui-glass-saturate: 160%;
  --ui-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.04);
  --ui-glass-icon: rgba(255, 255, 255, 0.92);
}

/* Director-aligned focus ring: one consistent, low-specificity (:where) keyboard
   affordance across interactive elements. Uses `outline` (not box-shadow) so it
   never clobbers an element's own shadow, and component rules that define their
   own focus style still win. */
:where(button, a[href], input, textarea, select, [contenteditable="true"], [tabindex]):focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

/* Registered so the breathing value is animatable and composable in calc(). */
@property --breath {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

* { box-sizing: border-box; }

html {
  /* rem is only ever used for font-size in this sheet, so moving the root size
     scales those declarations without disturbing any spacing. */
  font-size: calc(16px * var(--wg-text-scale));
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
}

html.wg-font-simple {
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
}
html.wg-font-raleway {
  --font-sans: "Raleway", "Inter", -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
}
html.wg-contrast-high {
  --text-primary: #e5e7eb;
  --text: #e5e7eb;
  --wg-body-weight: 500;
}
html.wg-contrast-high body,
html.wg-contrast-high .chat-msg,
html.wg-contrast-high .chat-msg-body,
html.wg-contrast-high .caption,
html.wg-contrast-high .idle-tips {
  font-weight: var(--wg-body-weight, 500);
}

/* Grayscale AA is a Mac polish trick; on Windows Chrome it thins webfonts.
   Leave the platform default (ClearType / DirectWrite) there. */
html:not(.wg-os-windows),
html:not(.wg-os-windows) body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  /* Kill the iOS double-tap-to-zoom gesture (and its 300ms tap delay) while
     still allowing pinch-zoom and scrolling. */
  touch-action: manipulation;
}

/* ---- 5.6 Layout root --------------------------------------------------- */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Pane-relative column so split/float inherit a width that is not 92vw. */
  --chat-column-width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
  min-height: 100vh;        /* fallback */
  min-height: 100svh;       /* avoids URL-bar jump */
  padding-top: calc(env(safe-area-inset-top) + 12px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, var(--bg-1) 0%, var(--bg-0) 70%);
}

/* ==========================================================================
   5.2 LIVING AVATAR — reactive canvas field (#field) behind the Wholegrain
   logo orb. app.js draws the glow / rings / particles into the canvas every
   frame from the smoothed audio amplitude + the root state class.
   ========================================================================== */
.avatar {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--orb) * 2.5);
  height: calc(var(--orb) * 2.5);
  display: grid;
  place-items: center;
  /* The orb doubles as a press-and-hold push-to-talk (the space-bar equivalent
     for touch). Suppress scroll, the iOS long-press callout, and text selection
     so a hold reads as "talk" rather than a gesture/selection. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* While muted in voice mode the orb IS the talk button — hint it's pressable. */
.mode-voice.voice-muted .avatar { cursor: pointer; }

/* The reactive field fills the avatar box; the logo sits centered on top. */
.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.orb {
  position: relative;
  z-index: 2;
  width: var(--orb);
  height: var(--orb);
  border-radius: 50%;
  overflow: hidden;
  /* Lifts the bread off the ground; warm rim ties it to the glow. */
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.30),
    0 20px 60px -22px rgba(0, 0, 0, 0.9);
  /* Only transform is animated continuously; hinting `filter` makes WebKit retain
     a filter backing buffer (bbox + blur radius) in the GPU process for the whole
     session. The throttled voice drop-shadow works without the hint. */
  will-change: transform;
}
.orb-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The logo art already sits on a near-black ground; a hair of contrast +
     warmth helps it read as lit rather than flat. */
  filter: saturate(1.05) contrast(1.03);
  -webkit-user-select: none;
          user-select: none;
}
/* Warm inner edge so the orb fuses with the canvas glow/rings. */
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
  pointer-events: none;
}

/* Warming up: connected but the MD has not spoken yet — red field, calm breath. */
:root.state-warming {
  --accent: var(--warm-accent);
  --accent-rgb: var(--warm-accent-rgb);
  --accent-soft: var(--warm-accent-soft);
  --glow: var(--warm-glow);
}
.state-warming .status {
  color: var(--warm-accent-soft);
}

/* Transcription-only mode: purple field, no assistant speech. */
:root.state-transcribing {
  --accent: var(--transcribe-accent);
  --accent-rgb: var(--transcribe-accent-rgb);
  --accent-soft: var(--transcribe-accent-soft);
  --glow: var(--transcribe-glow);
}
.state-transcribing .status {
  color: var(--transcribe-accent-soft);
  transition: color .45s ease, opacity .45s ease;
}
/* After ~10s the hint fades to unobtrusive grey; touch re-brightens briefly. */
.state-transcribing.transcription-status-dim:not(.transcription-status-bright) .status {
  color: #4a4f58;
  opacity: 0.55;
}
.state-transcribing.transcription-status-bright .status {
  color: var(--transcribe-accent-soft);
  opacity: 1;
}
.mode-transcription .avatar { cursor: pointer; }
.mode-transcription .orb::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.26);
  pointer-events: none;
  z-index: 3;
}
.transcription-holding .orb::before {
  border-color: rgba(var(--accent-rgb), 0.85);
  animation: transcribe-hold 5s linear forwards;
}
.transcription-holding .orb {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.65),
    0 0 0 12px rgba(var(--accent-rgb), 0.10),
    0 0 34px rgba(var(--accent-rgb), 0.55),
    0 20px 60px -22px rgba(0, 0, 0, 0.9);
}
.transcription-holding .status {
  color: var(--transcribe-accent-soft);
}
@keyframes transcribe-hold {
  from { box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0.12); }
  to { box-shadow: inset 0 0 0 calc(var(--orb) / 2) rgba(var(--accent-rgb), 0.28); }
}
/* Dictation orb runs a compositor-only breathing pulse so a long File Note
   session doesn't drive the WebAudio analyser + 60fps canvas render — app.js
   disconnects the analyser and skips the canvas while transcribing, since that
   sustained load was reaping the tab on iOS. Transform only → GPU-cheap. */
.mode-transcription .orb {
  animation: md-transcribe-breathe 3.8s ease-in-out infinite;
}
@keyframes md-transcribe-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .mode-transcription .orb { animation: none; }
}

/* The error state desaturates the whole avatar. */
.state-error .avatar { filter: saturate(.6) brightness(.85); }

/* ==========================================================================
   5.5 Status + captions
   ========================================================================== */
.status {
  position: absolute;
  top: calc(43% + var(--orb) * 0.62 + 26px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 86vw;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-height: 18px;
  transition: color .24s ease, opacity .24s ease;
}
.state-error .status { color: var(--error-text); }

/* Voice: the orb carries listening/speaking — hide those labels. Thinking… stays visible. */
:root:not(.mode-chat).state-listening .status,
:root:not(.mode-chat).state-speaking .status {
  opacity: 0;
  visibility: hidden;
}

/* Idle coaching tips — short hints after ~10s of quiet listening. Hidden while
   tools run or the orb is thinking/speaking. JS owns crossfade + rotation. */
.idle-tips {
  position: absolute;
  top: calc(43% + var(--orb) * 0.62 + 22px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: min(600px, 86vw);
  max-height: min(38vh, 320px);
  overflow: hidden;
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: calc(15px * var(--wg-text-scale));
  line-height: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.idle-tips.show {
  opacity: .9;
  transform: translate(-50%, 0);
}
/* While a tip is showing, the "LISTENING" status gives way to it. */
.tips-active .status { opacity: 0; visibility: hidden; }
/* Tips are voice-only; never show them in chat mode. */
.mode-chat .idle-tips { display: none; }

.captions {
  position: absolute;
  top: 64%;
  bottom: calc(env(safe-area-inset-bottom) + 104px);
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 86vw);
  max-height: calc(36% - env(safe-area-inset-bottom) - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  pointer-events: auto;
  padding: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.captions::-webkit-scrollbar { width: 6px; }
.captions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.caption {
  margin: 0 0 6px;
  font-size: calc(17px * var(--wg-text-scale));
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  opacity: .92;
  transition: opacity .24s cubic-bezier(.4, 0, .2, 1),
              transform .24s cubic-bezier(.4, 0, .2, 1);
}
.caption:empty { opacity: 0; }
.caption-user { color: var(--text-secondary); }
.caption-assistant { color: var(--text-primary); }

/* ==========================================================================
   Tool-activity panel (§7.2) — rich per-tool status between orb and captions
   ========================================================================== */
.tool-activity {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  /* Hidden until it has active rows; revealed via .active. */
  opacity: 0;
  transition: opacity .24s ease;
}
.tool-activity.active { opacity: 1; }
.tool-activity.fade-out { opacity: 0; transition: opacity .6s ease; }

/* While tool rows are visible, hide the redundant "Thinking…" status line so it
   does not stack over the tool list (voice mode). */
.stage:has(.tool-activity.active) .status {
  opacity: 0;
  visibility: hidden;
}
.state-transcribing .stage:has(.tool-activity.active) .status {
  opacity: 1;
  visibility: visible;
}

.tool-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 18px;
  letter-spacing: .01em;
  color: var(--text-secondary);
  /* Each row fades in over .24s (§7.2). */
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .24s ease, transform .24s ease;
}
.tool-row.show { opacity: 1; transform: translateY(0); }

.tool-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.tool-label {
  font-weight: 500;
  white-space: nowrap;
}
.tool-detail {
  color: var(--text-secondary);
  opacity: .7;
  font-size: calc(12.5px * var(--wg-text-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 36ch;
}
.tool-detail:empty { display: none; }

/* ---- Leading status indicator (spinner / check / cross) ---- */
.tool-indicator {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
}

/* Running: a thin warm spinner in the brand accent. */
.tool-running .tool-indicator {
  border: 2px solid rgba(var(--accent-rgb), 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tool-spin .8s linear infinite;
}

/* Done: a green check glyph; the row label dims. */
.tool-done .tool-indicator::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--ok-green);
  border-bottom: 2px solid var(--ok-green);
  transform: translateY(-1px) rotate(-45deg);
}
.tool-done { color: var(--text-secondary); opacity: .72; }

/* Failed: an ✕ glyph in the end-red accent. */
.tool-failed .tool-indicator {
  color: var(--end-red);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 700;
  line-height: 1;
}
.tool-failed .tool-indicator::before { content: "\00D7"; }
.tool-failed { color: var(--error-text); }

/* Soft (§C3): a slow tool that timed out — neutral, between done-green and
   failed-red. A muted dot, muted text; never reads as a hard failure. */
.tool-soft .tool-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-secondary);
}
.tool-soft { color: var(--text-secondary); opacity: .7; }

@keyframes tool-spin { to { transform: rotate(360deg); } }

/* Reduced motion: no spin — pulse the indicator's opacity instead (§7.2). */
@media (prefers-reduced-motion: reduce) {
  .tool-running .tool-indicator {
    animation: tool-pulse 1.2s ease-in-out infinite;
  }
  .tool-row { transition: opacity .24s ease; transform: none; }
  .tool-row.show { transform: none; }
}
@keyframes tool-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ==========================================================================
   5.4 Control bar
   ========================================================================== */
.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

.ctrl-btn {
  width: 60px;
  height: 60px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ctrl-bg);
  color: #FFFFFF;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: transform .12s var(--ds-ease-out), background var(--ds-duration-normal) var(--ds-ease-out), color var(--ds-duration-normal) var(--ds-ease-out);
}
.ctrl-btn:active { transform: scale(.92); }
/* Locked out during transcription (voice/chat toggle). */
.ctrl-btn:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
.ctrl-btn:disabled:active { transform: none; }

.ctrl-btn .icon {
  width: 24px;
  height: 24px;
}

/* Mute toggle (§E): mic icon when live, mic-slash when muted. The mic stays a
   LIVE track on mute (silence sent); the icon just reflects state. Hidden in
   chat mode (the mic is fully stopped there). */
.ctrl-btn.mute .icon-mic-slash { display: none; }
.voice-muted .ctrl-btn.mute .icon-mic { display: none; }
.voice-muted .ctrl-btn.mute .icon-mic-slash { display: block; }
.ctrl-btn.mute[aria-pressed="true"] {
  background: rgba(var(--end-red-rgb, 229, 72, 77), 0.22);
  color: #f3b6b8;
}

/* Chat toggle (§E): keyboard icon in voice mode (switch to text). In CHAT mode
   the button is hidden entirely — switching back to voice lives in the
   composer's Use Voice button instead. */
.ctrl-btn.chat .icon-voice { display: none; }

/* Captions + mute are redundant in chat mode (mic off, log is always text);
   the voice/chat toggle is replaced by the composer's Use Voice button. */
.mode-chat .ctrl-btn.cc,
.mode-chat .ctrl-btn.mute,
.mode-chat .ctrl-btn.chat { display: none; }

/* Captions: muted glyph; on = brighter bg + white glyph. */
.ctrl-btn.cc .cc-glyph {
  font-size: calc(15px * var(--wg-text-scale));
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ctrl-glyph-muted);
}
.ctrl-btn.cc[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.22);
}
.ctrl-btn.cc[aria-pressed="true"] .cc-glyph { color: #FFFFFF; }

/* ---- Push-to-talk hint (§E) ------------------------------------------- */
/* A subtle persistent notice sitting just above the controls, shown only in
   voice mode while the mic is muted. While Space is held (.ptt-talking) it
   swaps to a "Talking…" affordance with an accent tint. */
.ptt-notice {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 5;
  transition: background .18s ease, color .18s ease;
}
/* Only meaningful in voice mode + muted. */
.voice-muted .ptt-notice { display: flex; }
.mode-chat .ptt-notice { display: none !important; }
.ptt-notice kbd {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.ptt-notice .ptt-live { display: none; }
/* While Space is held: hide the idle hint, reveal the talking affordance. */
.ptt-talking .ptt-notice {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-soft);
}
.ptt-talking .ptt-notice .ptt-idle { display: none; }
.ptt-talking .ptt-notice .ptt-live { display: inline-flex; }

/* ---- Quick actions (top-left, voice + chat) --------------------------- */
/* A small vertical stack of circular buttons: attach a file, take a photo,
   attend a meeting, and start transcription. Sits beneath the Start overlay
   (z-index 10) until a call is live. Available in BOTH modes: chat shifts the
   stack down to clear the small top-left site logo. */
.voice-tools {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  left: calc(env(safe-area-inset-left) + 16px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Chat mode: the small site logo sits at the top of this column (40px + 12px
   gap), so start the quick actions just below it. */
.mode-chat .voice-tools {
  top: calc(env(safe-area-inset-top) + 66px);
  z-index: 7;
}
/* Desktop: keep a reserved lane so cards / composer shrink beside the stack
   even after the icons fade or collapse into the logo. Below 900px the stack
   overlays (same breakpoint as the docked split) — mobile can use the width. */
@media (min-width: 900px) {
  html.mode-chat body:not(.md-companion-open) {
    --chat-rail-gutter: calc(env(safe-area-inset-left, 0px) + 72px);
  }
}
/* ---- Chat mode: the logo hides/shows the stack beneath it -------------- */
/* Each button "jumps" into the logo when hiding (and back out when showing):
   its travel distance is its offset from the logo slot (rows are 40px + 12px
   gap = 52px; the stack starts 52px below the logo). --jump-d staggers the
   hide; the show replays the same stagger in reverse playback direction. */
.mode-chat .voice-tools .voice-tool:nth-child(1) { --jump-y: -52px;  --jump-d: 0ms; }
.mode-chat .voice-tools .voice-tool:nth-child(2) { --jump-y: -104px; --jump-d: 70ms; }
.mode-chat .voice-tools .voice-tool:nth-child(3) { --jump-y: -156px; --jump-d: 140ms; }
.mode-chat .voice-tools .voice-tool:nth-child(4) { --jump-y: -208px; --jump-d: 210ms; }
.mode-chat .voice-tools .voice-tool:nth-child(5) { --jump-y: -260px; --jump-d: 280ms; }
.mode-chat .voice-tools .voice-tool:nth-child(6) { --jump-y: -312px; --jump-d: 350ms; }
.mode-chat .voice-tools .voice-tool:nth-child(7) { --jump-y: -364px; --jump-d: 420ms; }
/* Steady collapsed state (also what a page load restores to, sans animation). */
.mode-chat.tools-collapsed .voice-tools .voice-tool {
  transform: translateY(var(--jump-y)) scale(.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* .tools-anim is added by JS for the duration of a toggle so restoring the
   collapsed state on load (or re-entering chat mode) never replays the jump. */
.mode-chat.tools-anim.tools-collapsed .voice-tools .voice-tool {
  animation: toolJumpIn .34s cubic-bezier(.55, -0.35, .65, 1) both;
  animation-delay: var(--jump-d);
}
.mode-chat.tools-anim:not(.tools-collapsed) .voice-tools .voice-tool {
  animation: toolJumpOut .34s cubic-bezier(.3, 1.45, .55, 1) backwards;
  animation-delay: var(--jump-d);
}
@keyframes toolJumpIn {
  from { transform: none; opacity: .7; visibility: visible; }
  to   { transform: translateY(var(--jump-y)) scale(.15); opacity: 0; visibility: hidden; }
}
@keyframes toolJumpOut {
  from { transform: translateY(var(--jump-y)) scale(.15); opacity: 0; }
  to   { transform: none; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .mode-chat.tools-anim .voice-tools .voice-tool { animation: none; }
}
/* During transcription the quick-action group stays, but only the camera button
   is offered (attach/meeting/transcribe don't apply while dictating a note). */
.mode-transcription .voice-tools > :not(#voiceCamera) { display: none; }
.mode-chat.tools-collapsed .feature-banner-host { display: none; }
.voice-tool {
  position: relative;
  overflow: visible;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ui-glass-icon);
  cursor: pointer;
  opacity: 0.92;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-out), color var(--ds-duration-fast) var(--ds-ease-out), opacity var(--ds-duration-fast) var(--ds-ease-out), transform .12s var(--ds-ease-out), border-color var(--ds-duration-fast) var(--ds-ease-out);
}
.mode-chat.tools-collapsed .voice-tools {
  pointer-events: none;
}
.voice-tool:hover { color: #fff; opacity: 1; }
.voice-tool:focus-visible,
.voice-tool:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.voice-tool svg { width: 20px; height: 20px; pointer-events: none; }
.voice-tool > .native-file-hit { border-radius: 50%; }

/* Attend-a-meeting submit (reuses the file-note modal field styling). */
.meeting-form { display: block; }
.meeting-step {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--ds-duration-fast, 180ms) var(--ds-ease-out, ease),
    transform var(--ds-duration-fast, 180ms) var(--ds-ease-out, ease);
}
/* Author `display: block` overrides UA [hidden]{display:none} — restore it. */
.meeting-step[hidden] { display: none !important; }
.meeting-step.is-fading {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .meeting-step {
    transition: none;
  }
}
.meeting-submit,
.meeting-mode {
  min-height: 44px;
  margin: 4px 0 0;
  padding: 11px 16px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #0f1114;
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease-out), transform .12s var(--ds-ease-out), opacity var(--ds-duration-fast) var(--ds-ease-out);
}
.meeting-submit { width: 100%; }
.meeting-submit:hover,
.meeting-mode:hover { background: var(--accent-soft, var(--accent)); }
.meeting-submit:active,
.meeting-mode:active { transform: scale(.98); }
.meeting-submit:disabled,
.meeting-mode:disabled { opacity: .5; cursor: default; }
.meeting-confirm-actions {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  align-items: stretch;
}
/* Author `display: grid` overrides UA [hidden]{display:none} — restore it. */
.meeting-confirm-actions[hidden],
.meeting-attendee-block[hidden],
.meeting-wp-picker[hidden],
.meeting-mode-hint[hidden],
.meeting-wp-empty[hidden] {
  display: none !important;
}
.meeting-confirm-actions-rep {
  grid-template-columns: auto 1fr;
}
.meeting-attendee-block {
  margin: 4px 0 12px;
}
.meeting-attendee-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 10px;
}
.meeting-attendee-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: calc(13px * var(--wg-text-scale));
  cursor: pointer;
}
.meeting-attendee-choice:has(input:checked) {
  border-color: rgba(94, 196, 176, 0.55);
  background: rgba(94, 196, 176, 0.08);
}
.meeting-attendee-choice input {
  accent-color: var(--accent);
}
.meeting-wp-picker {
  margin-top: 4px;
}
.meeting-wp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  margin: 6px 0 4px;
}
.meeting-wp-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: calc(13px * var(--wg-text-scale));
  cursor: pointer;
}
.meeting-wp-option:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.meeting-wp-option.is-selected {
  border-color: rgba(94, 196, 176, 0.55);
  background: rgba(94, 196, 176, 0.08);
}
.meeting-wp-empty {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.45;
}
.meeting-current-block {
  margin: 4px 0 14px;
}
.meeting-current-status {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.45;
}
.meeting-current-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow: auto;
  margin: 6px 0 0;
}
.meeting-current-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: calc(13px * var(--wg-text-scale));
  cursor: pointer;
}
.meeting-current-option:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.meeting-current-option-title {
  font-weight: 500;
  line-height: 1.35;
}
.meeting-current-option-meta {
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(11px * var(--wg-text-scale));
  line-height: 1.4;
  font-family: var(--font-mono);
  letter-spacing: .02em;
}
.meeting-current-block[hidden],
.meeting-current-status[hidden] {
  display: none !important;
}
.meeting-back {
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  letter-spacing: .04em;
  cursor: pointer;
}
.meeting-back:hover { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.meeting-mode-hint {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.45;
}
.meeting-name-input {
  min-height: 44px;
  margin-bottom: 6px;
}
.meeting-resolve-status,
.meeting-meta,
.meeting-link-preview {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.45;
}
.meeting-link-preview {
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  color: rgba(255, 255, 255, 0.48);
}
/* The settings panel reuses .object-modal* visuals; just make it narrower. */
.settings-modal .object-modal-sheet,
.meeting-modal .object-modal-sheet { width: min(460px, 100%); }
.appearance-crop-modal .object-modal-sheet { width: min(520px, 100%); }
.meeting-input {
  min-height: 108px;
  resize: vertical;
  line-height: 1.45;
}

/* ==========================================================================
   Toast (brief OAuth confirmation)
   ========================================================================== */
.toast {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  max-width: 86vw;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 500;
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
  /* Above chat-toolbar (7), settings-cog (8), and the float handle (40). */
  z-index: 80;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.toast-error { color: var(--error-text); }

/* ==========================================================================
   Shell update — bottom-left when this tab is behind the deployed MD.
   ========================================================================== */
.shell-update {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 16px);
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--ui-glass-border);
  background-color: var(--ui-glass-fill);
  -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturate));
          backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturate));
  box-shadow: var(--ui-glass-shadow);
  color: var(--text-primary);
  font-family: inherit;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  pointer-events: auto;
}
.shell-update[hidden] { display: none !important; }
.shell-update:hover { background-color: var(--ui-glass-fill-hover); }
.shell-update:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shell-update:active { transform: scale(0.96); }
.shell-update:disabled { opacity: 0.75; cursor: default; transform: none; }
.shell-update svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
html.mode-chat:not(.state-idle) .shell-update {
  bottom: calc(var(--chat-input-height, calc(var(--chat-composer-gutter) + var(--chat-composer-reserve))) + 16px);
}
html.coarse-pointer.mode-chat:not(.state-idle) .shell-update {
  bottom: calc(
    var(--chat-kb-offset, 0px) + var(--chat-mobile-gap, 14px) +
    var(--chat-input-height, var(--chat-composer-reserve-mobile)) + 16px
  );
}

/* ==========================================================================
   Voice-unavailable banner (realtime provider unreachable — text chat only)
   Sits just below the reclaim banner's stacking slot; both are top-anchored,
   but they never appear together (a paused session has no live transport).
   ========================================================================== */
.voice-blocked-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 499;
  display: flex;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 0;
  pointer-events: none;
}
.voice-blocked-banner[hidden] {
  display: none !important;
}
.voice-blocked-inner {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  max-width: min(520px, 94vw);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(18, 18, 20, 0.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 196, 106, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
}
.voice-blocked-text {
  margin: 0;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  line-height: 1.35;
}
.voice-blocked-dismiss {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font: inherit;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
}

/* ==========================================================================
   Reclaim banner (superseded on another device — pause in place)
   Sits above the project viewer (z-index 400) so Resume is reachable on
   narrow layouts where .stage (and Start) are hidden.
   ========================================================================== */
.reclaim-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 0;
  pointer-events: none;
}
.reclaim-banner[hidden] {
  display: none !important;
}
.reclaim-banner-inner {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  max-width: min(520px, 94vw);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(18, 18, 20, 0.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
}
.reclaim-banner-text {
  margin: 0;
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 500;
  line-height: 1.35;
}
.reclaim-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reclaim-banner-btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  cursor: pointer;
  color: #0f1114;
  background: #f2efe8;
}
.reclaim-banner-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.reclaim-banner-dismiss {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font: inherit;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  cursor: pointer;
  padding: 8px 10px;
}
.reclaim-banner-connecting {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  width: 100%;
  justify-content: center;
  font-size: calc(13px * var(--wg-text-scale));
  color: rgba(255, 255, 255, 0.7);
}
.reclaim-banner-connecting[hidden] {
  display: none !important;
}
/* Keep chat visible while paused (state-idle normally hides it for Start).
   Do not require .state-idle — a failed Resume can land in connecting/error
   for a beat, and the conversation must stay on screen. */
html.paused-for-reclaim.mode-chat .chat-input,
html.paused-for-reclaim.mode-chat #chat,
html.paused-for-reclaim.mode-chat .chat-toolbar {
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   Start overlay
   ========================================================================== */
.start-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
  background:
    radial-gradient(circle at 50% 42%, var(--bg-1) 0%, var(--bg-0) 70%);
  transition: opacity .35s ease;
}
.start-overlay.hide {
  opacity: 0;
  pointer-events: none;
}

/* Chat mode persists across sessions; keep the composer out of sight and touch
   while the Start overlay is up (the JS also blurs it so iOS won't show the KB). */
.state-idle.mode-chat .chat-input,
.state-idle.mode-chat #chat,
.state-idle.mode-chat .chat-toolbar {
  visibility: hidden;
  pointer-events: none;
}

.start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* Wrapper is transparent to the column layout until short screens turn it into a row. */
.start-brand { display: contents; }

.start-mark {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
/* Soft breathing wheat-glow behind the bread so it feels alive at rest. */
.start-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  filter: blur(26px);
  animation: start-breathe 4.6s ease-in-out infinite;
}
.start-logo {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.30),
    0 22px 60px -20px rgba(0, 0, 0, 0.9);
  filter: saturate(1.05) contrast(1.03);
  animation: start-float 4.6s ease-in-out infinite;
}

@keyframes start-breathe {
  0%, 100% { opacity: .55; transform: scale(1);    }
  50%      { opacity: .9;  transform: scale(1.08); }
}
@keyframes start-float {
  0%, 100% { transform: scale(1)     translateY(0);    }
  50%      { transform: scale(1.025) translateY(-3px); }
}

.start-wordmark {
  margin: 4px 0 -4px;
  font-family: var(--font-serif);
  font-size: calc(30px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-primary);
}
.start-wordmark span { color: inherit; }

.start-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.start-sub {
  margin: 2px 0 0;
  max-width: 30ch;
  font-size: calc(15px * var(--wg-text-scale));
  line-height: 22px;
  color: var(--text-secondary);
}
.start-title[hidden],
.start-sub[hidden] { display: none !important; }

.start-btn {
  margin-top: 20px;
  min-width: 240px;
  padding: 15px 32px;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s var(--ds-ease-out), background var(--ds-duration-normal) var(--ds-ease-out), color var(--ds-duration-normal) var(--ds-ease-out);
}
.start-btn:hover { background: rgba(var(--accent-rgb), 0.26); color: #fff; }
.start-btn:active { transform: scale(.96); }
.start-btn:disabled {
  opacity: .6;
  cursor: default;
}
.start-btn[hidden] { display: none; }

/* Two-panel Start chooser (unauthenticated front door) */
.start-chooser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  width: min(100%, 440px);
}
.start-chooser[hidden] { display: none; }
@media (min-width: 640px) {
  .start-chooser { flex-direction: row; gap: 14px; }
  .start-chooser .start-panel { flex: 1; }
}
.start-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 22px 24px;
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-2);
  box-shadow: var(--ds-shadow-soft), var(--ds-inset-top);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--ds-duration-normal) var(--ds-ease-out), border-color var(--ds-duration-normal) var(--ds-ease-out), transform .12s var(--ds-ease-out), box-shadow var(--ds-duration-normal) var(--ds-ease-out);
}
.start-panel:hover {
  border-color: var(--ds-border-hairline-hover);
  box-shadow: var(--ds-shadow-soft), var(--ds-inset-top), 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}
.start-panel:active { transform: scale(.985); }
.start-panel-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent-soft);
}
.start-panel-mark svg { width: 18px; height: 18px; }
.start-panel-title {
  font-family: var(--font-serif);
  font-size: calc(18px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text-primary);
}
/* Terms of Service stage (pre-auth gate for both lanes) */
.terms-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
  width: min(100%, 440px);
  text-align: left;
}

@media (min-width: 640px) {
  /* Use vw — .start-inner shrink-wraps, so % width never exceeds ~440px. */
  .start-inner:has(.terms-stage:not([hidden])),
  .start-inner:has(.ai-consent-stage:not([hidden])) {
    width: min(92vw, 880px);
    max-width: 880px;
  }
  .terms-stage {
    width: min(92vw, 880px);
    max-width: 880px;
  }
}
.terms-stage[hidden] { display: none; }
.terms-stage-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ds-text-primary, #f2f4f7);
}
.terms-stage-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ds-text-muted, rgba(255, 255, 255, 0.62));
  line-height: 1.4;
}
.terms-stage-body {
  width: 100%;
  /* Scale with viewport height so the Continue button stays visible on short screens. */
  height: clamp(90px, 32vh, 300px);
  min-height: 0;
  max-height: 300px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-2);
  box-shadow: var(--ds-inset-top);
  color: var(--ds-text-primary, #e8eaed);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.terms-stage-body:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.45);
}
.terms-stage-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ds-text-primary, #f2f4f7);
  cursor: pointer;
}
.terms-stage-agree input {
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: rgb(var(--accent-rgb));
}
.terms-stage-link-wrap {
  margin: 0;
  font-size: 0.78rem;
}
.terms-stage-link {
  color: rgba(var(--accent-rgb), 0.92);
  text-decoration: none;
}
.terms-stage-link:hover { text-decoration: underline; }
.terms-stage-link-sep {
  margin: 0 0.35em;
  color: var(--ds-text-muted, rgba(255, 255, 255, 0.45));
}
.terms-stage .start-btn {
  width: 100%;
  margin-top: 4px;
}
@media (max-height: 700px) {
  .terms-stage {
    gap: 8px;
    margin-top: 12px;
  }
  .terms-stage-body {
    padding: 10px 12px;
  }
  .start-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .start-mark {
    width: 56px;
    height: 56px;
    margin-bottom: 0;
  }
  .start-logo {
    width: 52px;
    height: 52px;
  }
  .start-wordmark {
    margin: 0;
    font-size: calc(24px * var(--wg-text-scale));
  }
}
.ai-consent-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.ai-consent-actions .start-btn,
.ai-consent-actions .start-secondary {
  width: 100%;
}
.settings-privacy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.start-panel-sub {
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Participant OTP sheet */
.participant-otp-panel[hidden] { display: none; }
.participant-otp-panel {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.participant-otp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}
.participant-otp-sheet {
  position: relative;
  width: min(100%, 420px);
  max-height: min(92vh, 720px);
  overflow: auto;
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--ds-radius-xl);
  background: var(--bg-1, #101318);
  box-shadow: var(--ds-shadow-soft);
}
.participant-otp-brandrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ds-border-hairline);
}
.participant-otp-brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}
.participant-otp-brandmark img { width: 100%; height: 100%; object-fit: cover; }
.participant-otp-wordmark {
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.participant-otp-close {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  cursor: pointer;
}
.participant-otp-body { padding: 22px 20px 22px; }
.participant-otp-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: calc(28px * var(--wg-text-scale));
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-primary);
}
.participant-otp-lead {
  margin: 0 0 18px;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.55;
  color: var(--text-secondary);
}
.participant-otp-support {
  color: var(--accent-soft);
  text-decoration: none;
}
.participant-otp-support:hover { text-decoration: underline; }

/* Passkey vs mobile verification tabs */
.participant-auth-mode {
  display: flex;
  gap: 8px;
  margin: 18px 0 14px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}
.participant-auth-mode[hidden] { display: none !important; }
.participant-auth-mode-btn {
  flex: 1 1 0;
  padding: 10px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.participant-auth-mode-btn[aria-selected="true"] {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}
.participant-auth-mode-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.participant-auth-pane[hidden] { display: none !important; }
.participant-otp-phone-wrap[hidden] { display: none !important; }
.participant-passkey-btn {
  width: 100%;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.participant-passkey-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--accent-soft, #7dd3c0);
}
.participant-passkey-svg {
  width: 26px;
  height: 26px;
  display: block;
}
.participant-passkey-svg--faceid {
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 8px;
  background: #fff;
  color: #111;
  box-sizing: content-box;
}
.participant-passkey-label {
  line-height: 1.2;
}
.participant-passkey-hint {
  margin: 10px 0 0;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
}
.participant-passkey-register-pane {
  margin-top: 12px;
}
.participant-passkey-register-lead {
  margin: 0 0 12px;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.45;
  color: var(--text-secondary);
}
.participant-otp-actions--inline {
  margin-top: 16px;
}

.participant-otp-field-label {
  display: block;
  margin: 14px 0 6px;
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.participant-otp-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--ds-radius-lg);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font-size: calc(16px * var(--wg-text-scale));
  transition: border-color var(--ds-duration-normal) var(--ds-ease-out), box-shadow var(--ds-duration-normal) var(--ds-ease-out);
}
.participant-otp-input::placeholder { color: var(--text-secondary); opacity: .7; }
.participant-otp-input:focus {
  outline: none;
}
/* Force the dark surface over Chrome/Safari autofill, which otherwise paints a
   bright white box and ignores `background`. The inset box-shadow covers the
   autofill fill; -webkit-text-fill-color keeps the typed text light. */
.participant-otp-input:-webkit-autofill,
.participant-otp-input:-webkit-autofill:hover,
.participant-otp-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.45) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-out, box-shadow 9999s ease-out;
}
.participant-otp-code {
  letter-spacing: .32em;
  text-align: center;
}
.participant-otp-error {
  margin: 12px 0 0;
  font-size: calc(13px * var(--wg-text-scale));
  color: #f87171;
}
.participant-otp-error[hidden] { display: none; }
.participant-otp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.participant-otp-btn {
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ds-duration-normal) var(--ds-ease-out), border-color var(--ds-duration-normal) var(--ds-ease-out), color var(--ds-duration-normal) var(--ds-ease-out);
}
.participant-otp-btn--primary {
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--accent-soft);
}
.participant-otp-btn--primary:hover {
  background: rgba(var(--accent-rgb), 0.3);
  color: #fff;
}
.participant-otp-btn--secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 12px 20px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: transparent;
  color: var(--text-secondary);
}
.participant-otp-btn--secondary:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-soft);
}
.participant-otp-btn--secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.participant-otp-btn--secondary:disabled:hover {
  border-color: var(--ds-border-hairline-hover);
  color: var(--text-secondary);
}
/* Valid international number entered: make Send the obvious next step. */
.participant-otp-btn--secondary.participant-otp-btn--ready {
  border-color: rgba(var(--accent-rgb), 0.65);
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 0 18px rgba(var(--accent-rgb), 0.18);
}
.participant-otp-btn--secondary.participant-otp-btn--ready:hover {
  background: rgba(var(--accent-rgb), 0.32);
  color: #fff;
}
.participant-otp-field-label--phone {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.participant-otp-phone-hint {
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: .02em;
  text-transform: none;
  color: #e8b04b;
}
.participant-otp-phone-hint[hidden] { display: none !important; }
.participant-otp-btn--secondary[aria-busy="true"] {
  pointer-events: none;
}
.participant-otp-send-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.participant-otp-send-spinner[hidden],
.participant-otp-send-label[hidden] {
  display: none;
}
.participant-otp-verify-step[hidden] {
  display: none !important;
}
.participant-otp-btn--ghost {
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
}
.participant-otp-btn--ghost:hover { color: var(--text-primary); }
.participant-otp-actions .participant-otp-btn--primary { flex: 0 0 auto; }

/* Slash-command autocomplete (agent mode composer) */
.slash-command-menu {
  position: fixed;
  z-index: 12050;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: rgba(12, 14, 18, 0.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.slash-command-menu[hidden] { display: none !important; }
.slash-command-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.slash-command-item.is-selected,
.slash-command-item:hover {
  background: rgba(var(--accent-rgb), 0.14);
}
.slash-command-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92rem;
  color: var(--accent-soft);
}
.slash-command-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
}

/* Expertise picker — richer rows when /expertise suggestions are open */
.slash-command-menu--expertise {
  max-height: min(360px, 46vh);
  gap: 4px;
  padding: 8px;
}
.slash-command-head {
  padding: 4px 10px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.85;
}
.slash-command-empty {
  margin: 0;
  padding: 14px 12px 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
}
.slash-command-item--rich {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
}
.slash-command-item--expertise.is-selected,
.slash-command-item--expertise:hover {
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}
.slash-suggest-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.22), rgba(255, 255, 255, 0.06));
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.slash-suggest-initials {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-soft);
  text-transform: uppercase;
}
.slash-suggest-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.slash-suggest-title {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slash-suggest-meta {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
  opacity: 0.82;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slash-command-item--expertise.is-selected .slash-suggest-meta,
.slash-command-item--expertise:hover .slash-suggest-meta {
  opacity: 0.95;
}

/* Typed-confirm dialog (slash /reset, future destructive actions) */
.typed-confirm-panel[hidden] { display: none; }
.typed-confirm-panel {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.typed-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.typed-confirm-sheet {
  position: relative;
  width: min(440px, 100%);
  border-radius: 18px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: rgba(14, 16, 20, 0.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.typed-confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}
.typed-confirm-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.typed-confirm-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.typed-confirm-close:hover { color: var(--text-primary); }
.typed-confirm-body { padding: 14px 18px 18px; }
.typed-confirm-message {
  margin: 0 0 14px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.typed-confirm-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.typed-confirm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.typed-confirm-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
}
.typed-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.typed-confirm-btn {
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}
.typed-confirm-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.typed-confirm-btn--ghost:hover { color: var(--text-primary); }
.typed-confirm-btn--danger {
  background: rgba(220, 70, 70, 0.22);
  color: #ffb4b4;
}
.typed-confirm-btn--danger:hover:not(:disabled) {
  background: rgba(220, 70, 70, 0.32);
  color: #fff;
}
.typed-confirm-btn--danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Participant mode — hide director-only chrome (class is on <html>, not body). */
.participant-mode #btnSettings,
.participant-mode #chatToolbar,
.participant-mode #historyPanel,
.participant-mode #watchesPanel,
.participant-mode #schedulePanel,
.participant-mode #dataPanel,
.participant-mode #objectsPanel,
.participant-mode #providerChip,
.participant-mode #disconnectLink {
  display: none !important;
}
/* Participant: attach, screenshot, and agent connect stay visible; meeting/transcribe/projects/expertise/agent-skills/thinking-level are director-only. */
.participant-mode #voiceMeeting,
.participant-mode #voiceTranscribe,
.participant-mode #voiceProjects,
.participant-mode #voiceExpertise,
.participant-mode #voiceAgentSkills,
.participant-mode #agentSkillsPanel,
.participant-mode .chat-thinking-level-wrap,
.participant-mode .composer-menu-item[data-proxy="voiceMeeting"],
.participant-mode .composer-menu-item[data-proxy="voiceTranscribe"],
.participant-mode .composer-menu-item[data-proxy="voiceExpertise"],
.participant-mode #caseBoard,
.participant-mode #agentsConsole,
.participant-mode #caseStanceCard,
.participant-mode .case-stance-card {
  display: none !important;
}
/* Persistent failure guidance on the Start screen. Unlike the transient toast,
   this stays until the next Start attempt — it's the only surface that explains
   silent strand-on-Start causes (blocked mic, blocked storage, no HTTPS, connect
   timeout) and tells the user how to recover. */
.start-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  max-width: 34ch;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid rgba(var(--accent-rgb), 0.34);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.08);
}
.start-notice[hidden] { display: none; }
.start-notice-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--accent-soft);
}
.start-notice-icon svg { width: 100%; height: 100%; display: block; }
.start-notice-body { display: flex; flex-direction: column; gap: 4px; }
.start-notice-title {
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  color: var(--text-primary);
}
.start-notice-text {
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 19px;
  color: var(--text-secondary);
}

/* Low-emphasis secondary action on the Start screen — only shown after a reap
   mid-dictation ("Save note instead"). A quiet text button under the primary. */
.start-secondary {
  margin-top: 14px;
  padding: 8px 16px;
  border: 0;
  background: none;
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .75;
  cursor: pointer;
  transition: opacity var(--ds-duration-normal) var(--ds-ease-out);
}
.start-secondary:hover { opacity: 1; color: #fff; }
.start-secondary:disabled { opacity: .4; cursor: default; }
.start-secondary[hidden] { display: none; }

/* Shown on the Start screen while /api/session mints (often 10–20s). */
.start-connecting {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 240px;
  padding: 15px 32px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.10);
}
.start-connecting[hidden] { display: none; }
.start-connecting .oc-spinner { width: 20px; height: 20px; flex-shrink: 0; }
.start-connecting-label {
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.connect-link {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(156, 163, 175, 0.4);
  padding-bottom: 2px;
}
.connect-link:active { color: var(--text-primary); }

/* The disconnect affordance reuses .connect-link but is a <button>; strip the
   native button chrome so it reads as the same quiet text link. */
button.connect-link {
  display: inline-block;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(156, 163, 175, 0.4);
  cursor: pointer;
}
/* display:inline-block above overrides the UA [hidden] rule */
button.connect-link[hidden] { display: none !important; }

.participant-start-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.participant-start-actions[hidden] { display: none !important; }
.participant-start-actions .connect-link { margin-top: 0; }

.settings-modal.participant-only .settings-operator-only { display: none; }

/* ==========================================================================
   Text-chat mode — `mode-chat` on <html>. The avatar shrinks to a small live
   presence up top; a scrollable log + composer take over. Voice mode hides all
   of this. The mode is remembered in localStorage and restored on return.
   ========================================================================== */
/* In chat mode the full living avatar is HIDDEN (replaced by a small top-left
   site logo) so the conversation reclaims the centre/upper area. */
.mode-chat .avatar { display: none; }
.mode-chat .status,
.mode-chat .captions,
.mode-chat .tool-activity,
/* Hide only the voice References panel here, NOT the shared #historyPanel,
   which reuses the .objects-panel chrome but is available in chat too. */
.mode-chat #objectsPanel,
.mode-chat .voice-refs { display: none; }
.mode-chat .data-panel { display: none; }

/* ---- Perplexity-style glass toolbar controls --------------------------- */
.chat-logo,
.chat-recent-open,
.estimate-sense-now,
.chat-search-open,
.chat-incognito-toggle,
.chat-dnd-toggle,
.settings-cog,
.voice-tool {
  border: 0.5px solid var(--ui-glass-border);
  background-color: var(--ui-glass-fill);
  -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturate));
          backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturate));
  box-shadow: var(--ui-glass-shadow);
  transition:
    background-color var(--ds-duration-fast) var(--ds-ease-out),
    transform 0.1s var(--ds-ease-out),
    color var(--ds-duration-fast) var(--ds-ease-out),
    border-color var(--ds-duration-fast) var(--ds-ease-out),
    opacity 0.55s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-logo,
  .chat-recent-open,
  .estimate-sense-now,
  .chat-search-open,
  .chat-incognito-toggle,
  .chat-dnd-toggle,
  .settings-cog,
  .voice-tool {
    background-color: rgba(28, 30, 34, 0.88);
  }
}
.chat-logo:hover,
.chat-recent-open:hover,
.estimate-sense-now:hover:not(:disabled),
.chat-search-open:hover,
.chat-incognito-toggle:hover,
.chat-dnd-toggle:hover,
.settings-cog:hover,
.voice-tool:hover {
  background-color: var(--ui-glass-fill-hover);
  border-color: rgba(255, 255, 255, 0.62);
}
.chat-logo:active,
.chat-recent-open:active,
.estimate-sense-now:active:not(:disabled),
.chat-search-open:active,
.chat-incognito-toggle:active,
.chat-dnd-toggle:active,
.settings-cog:active,
.voice-tool:active {
  transform: scale(0.96);
}
.settings-cog:active,
.voice-tool:active {
  transform: scale(0.92);
}

/* ---- Chat-mode top-left site logo (§B) -------------------------------- */
/* A small round Wholegrain mark in the top-left safe area; shown only in chat
   mode. Voice mode uses the full avatar instead, so this stays hidden. */
.chat-logo {
  position: absolute;
  /* Same size, column, and top as the quick-action icons below it so the logo
     reads as the head of the vertical stack. */
  top: calc(env(safe-area-inset-top) + 14px);
  left: calc(env(safe-area-inset-left) + 16px);
  z-index: 7;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  display: none;
  opacity: 1;
  cursor: pointer;
}
.chat-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.03);
  -webkit-user-select: none;
          user-select: none;
}
.mode-chat .chat-logo { display: block; }

/* Idle fade: logo + quick-action rail + top chrome dim after quiet. */
.voice-tools,
.chat-toolbar {
  transition: opacity 0.55s ease;
}
html.chrome-rail-idle-25 .chat-logo,
html.chrome-rail-idle-25 .voice-tools { opacity: 0.25; }
html.chrome-rail-idle-10 .chat-logo,
html.chrome-rail-idle-10 .voice-tools { opacity: 0.1; }
html.chrome-top-idle-25 .chat-toolbar,
html.chrome-top-idle-25 .settings-cog { opacity: 0.25; }
html.chrome-top-idle-10 .chat-toolbar,
html.chrome-top-idle-10 .settings-cog { opacity: 0.1; }
html.chrome-rail-idle-25:has(.chat-logo:focus-visible) .chat-logo,
html.chrome-rail-idle-25:has(.chat-logo:focus-visible) .voice-tools,
html.chrome-rail-idle-10:has(.chat-logo:focus-visible) .chat-logo,
html.chrome-rail-idle-10:has(.chat-logo:focus-visible) .voice-tools,
html.chrome-rail-idle-25:has(.voice-tools:focus-within) .chat-logo,
html.chrome-rail-idle-25:has(.voice-tools:focus-within) .voice-tools,
html.chrome-rail-idle-10:has(.voice-tools:focus-within) .chat-logo,
html.chrome-rail-idle-10:has(.voice-tools:focus-within) .voice-tools {
  opacity: 1;
}
html.chrome-top-idle-25:has(.chat-toolbar:focus-within) .chat-toolbar,
html.chrome-top-idle-25:has(.chat-toolbar:focus-within) .settings-cog,
html.chrome-top-idle-10:has(.chat-toolbar:focus-within) .chat-toolbar,
html.chrome-top-idle-10:has(.chat-toolbar:focus-within) .settings-cog,
html.chrome-top-idle-25:has(.settings-cog:focus-visible) .chat-toolbar,
html.chrome-top-idle-25:has(.settings-cog:focus-visible) .settings-cog,
html.chrome-top-idle-10:has(.settings-cog:focus-visible) .chat-toolbar,
html.chrome-top-idle-10:has(.settings-cog:focus-visible) .settings-cog {
  opacity: 1;
}
/* Hover-restore is desktop only. iOS sticky :hover would keep the chrome
   looking fully on after a tap, then the next tap would be treated as a
   reveal and swallowed. */
@media (hover: hover) {
  html.chrome-rail-idle-25:has(.chat-logo:hover) .chat-logo,
  html.chrome-rail-idle-25:has(.chat-logo:hover) .voice-tools,
  html.chrome-rail-idle-10:has(.chat-logo:hover) .chat-logo,
  html.chrome-rail-idle-10:has(.chat-logo:hover) .voice-tools,
  html.chrome-rail-idle-25:has(.voice-tools:hover) .chat-logo,
  html.chrome-rail-idle-25:has(.voice-tools:hover) .voice-tools,
  html.chrome-rail-idle-10:has(.voice-tools:hover) .chat-logo,
  html.chrome-rail-idle-10:has(.voice-tools:hover) .voice-tools {
    opacity: 1;
  }
  html.chrome-top-idle-25:has(.chat-toolbar:hover) .chat-toolbar,
  html.chrome-top-idle-25:has(.chat-toolbar:hover) .settings-cog,
  html.chrome-top-idle-10:has(.chat-toolbar:hover) .chat-toolbar,
  html.chrome-top-idle-10:has(.chat-toolbar:hover) .settings-cog,
  html.chrome-top-idle-25:has(.settings-cog:hover) .chat-toolbar,
  html.chrome-top-idle-25:has(.settings-cog:hover) .settings-cog,
  html.chrome-top-idle-10:has(.settings-cog:hover) .chat-toolbar,
  html.chrome-top-idle-10:has(.settings-cog:hover) .settings-cog {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-logo,
  .voice-tools,
  .chat-toolbar,
  .settings-cog {
    transition-duration: 0.01s;
  }
}

/* Chat-mode toolbar (search) — sits left of the settings cog (40px + 14px gap). */
.chat-toolbar {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 70px);
  z-index: 5;
  display: none;
}
.mode-chat .chat-toolbar {
  display: flex;
  align-items: center;
  /* safe: if the strip overflows, fall back to start so left pills stay reachable. */
  justify-content: safe flex-end;
  gap: 14px;
  z-index: 7;
  /* Bound the strip between the logo and the settings cog so we can
     query pane width — not window width — for compact chrome. */
  left: calc(env(safe-area-inset-left) + 16px + 40px + 12px);
  min-width: 0;
  container-type: inline-size;
  container-name: md-toolbar;
  /* The empty span of this strip sits above the centred agent session
     pill (.agent-bar-end, z-index 6) and would swallow its clicks. */
  pointer-events: none;
}
.mode-chat .chat-toolbar > * {
  pointer-events: auto;
}
.chat-estimate-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chat-estimate-cluster[hidden] { display: none !important; }
.estimate-sense-now {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.estimate-sense-now[hidden] { display: none !important; }
.estimate-sense-now:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}
.estimate-sense-now .tom-icon,
.voice-history-toggle .tom-icon,
.chat-estimate-open .tom-icon {
  width: 18px;
  height: 18px;
  overflow: visible;
}
.estimate-sense-now {
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: var(--text-secondary);
}
.estimate-sense-now:hover:not(:disabled),
.estimate-sense-now.is-running {
  color: var(--text-primary);
}
.tom-icon .tom-line {
  transform-box: fill-box;
  transform-origin: 4px 50%;
}
.estimate-sense-now:hover:not(:disabled) .tom-line,
.estimate-sense-now.is-running .tom-line,
.voice-history-toggle:hover .tom-line,
.voice-history-toggle.is-running .tom-line {
  animation: tom-sense 1.05s ease-in-out infinite;
}
.tom-icon .tom-line-2 { animation-delay: 0.12s; }
.tom-icon .tom-line-3 { animation-delay: 0.24s; }
@keyframes tom-sense {
  0%, 100% { transform: scaleX(1); }
  45% { transform: scaleX(0.58); }
}
@media (prefers-reduced-motion: reduce) {
  .estimate-sense-now:hover:not(:disabled) .tom-line,
  .estimate-sense-now.is-running .tom-line,
  .voice-history-toggle:hover .tom-line,
  .voice-history-toggle.is-running .tom-line {
    animation: none;
  }
}
.chat-recent-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.chat-recent-open[hidden] { display: none !important; }
.chat-recent-open[aria-expanded="true"] { color: var(--accent); }
.chat-recent-open .cro-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(78, 201, 176, 0.18);
  color: var(--accent);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: 0;
}
.chat-recent-open .cro-count[hidden] { display: none; }
.chat-schedule-open .cro-count--active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}
.chat-schedule-open .cro-count--alert {
  background: rgba(255, 120, 90, 0.22);
  color: #ffb4ab;
}
html.coarse-pointer .chat-schedule-open .cro-label { display: none; }
html.coarse-pointer .chat-schedule-open.has-alert .cro-count--active { display: none !important; }
/* Mobile top bar: the Wholegrain logo (quick-action toggle) shares the top-left
   corner with the chat toolbar. Without a reserved slot the RECENT pill grows
   wide enough to paint over the logo (same z-index, later in DOM). */
html.coarse-pointer.mode-chat .chat-logo {
  z-index: 9;
}
html.coarse-pointer.mode-chat .chat-toolbar {
  left: calc(env(safe-area-inset-left) + 16px + 40px + 12px);
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.coarse-pointer.mode-chat .chat-toolbar::-webkit-scrollbar {
  display: none;
}
/* Compact RECENT / Watches pills to 40px circles (Schedule already drops its
   label above) so the toolbar fits beside the logo on narrow viewports. */
html.coarse-pointer .chat-recent-open .cro-label {
  display: none;
}
html.coarse-pointer .chat-recent-open {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.chat-recent-open .cro-label {
  white-space: nowrap;
}
.chat-recent-open .cro-icon,
.voice-history-toggle .vht-icon {
  display: none;
}
html.coarse-pointer .chat-recent-open:has(.cro-icon) .cro-icon,
html.coarse-pointer .voice-history-toggle#voiceEstimateToggle .vht-icon,
.voice-history-toggle.is-running .vht-icon.tom-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
html.coarse-pointer .chat-recent-open:has(.cro-icon) .cro-count {
  position: absolute;
  top: -2px;
  right: -2px;
}
/* Tight toolbar: collapse Recent / Top of mind / Schedule to the icon. */
@container md-toolbar (max-width: 800px) {
  .chat-recent-open:has(.cro-icon) .cro-label {
    display: none;
  }
  .chat-recent-open:has(.cro-icon) .cro-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .chat-recent-open:has(.cro-icon) {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .chat-recent-open:has(.cro-icon) .cro-count {
    position: absolute;
    top: -2px;
    right: -2px;
  }
}
/* Full-window fallback: same collapse when the laptop itself is narrow. */
@media (max-width: 1280px) {
  html:not(.coarse-pointer) .chat-recent-open:has(.cro-icon) .cro-label {
    display: none;
  }
  html:not(.coarse-pointer) .chat-recent-open:has(.cro-icon) .cro-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  html:not(.coarse-pointer) .chat-recent-open:has(.cro-icon) {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  html:not(.coarse-pointer) .chat-recent-open:has(.cro-icon) .cro-count {
    position: absolute;
    top: -2px;
    right: -2px;
  }
}
html.coarse-pointer .voice-history-toggle#voiceEstimateToggle .vht-label {
  display: none;
}
html.coarse-pointer .voice-history-toggle#voiceEstimateToggle {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}

/* ---- MD chrome name hints (rail labels + compact toolbar chips) -------- */
:where(.voice-tool, .chat-recent-open, .chat-search-open, .chat-dnd-toggle,
       .chat-incognito-toggle, .settings-cog, .voice-history-toggle)[data-label]::after {
  content: attr(data-label);
  position: absolute;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(20, 22, 26, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  z-index: 9;
}
.voice-tool[data-label]::after {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%) translateX(-4px);
  transition:
    opacity .14s ease .15s,
    transform .14s ease .15s,
    visibility 0s linear .29s;
}
.chat-recent-open[data-label]::after,
.chat-search-open[data-label]::after,
.chat-dnd-toggle[data-label]::after,
.chat-incognito-toggle[data-label]::after,
.settings-cog[data-label]::after,
.voice-history-toggle[data-label]::after {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.voice-tools.is-open .voice-tool[data-label]::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
@media (hover: hover) {
  .voice-tool[data-label]:hover::after,
  .voice-tool[data-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0s;
  }
  .chat-search-open[data-label]:hover::after,
  .chat-search-open[data-label]:focus-visible::after,
  .chat-dnd-toggle[data-label]:hover::after,
  .chat-dnd-toggle[data-label]:focus-visible::after,
  .chat-incognito-toggle[data-label]:hover::after,
  .chat-incognito-toggle[data-label]:focus-visible::after,
  .settings-cog[data-label]:hover::after,
  .settings-cog[data-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
  @container md-toolbar (max-width: 800px) {
    .chat-recent-open[data-label]:hover::after,
    .chat-recent-open[data-label]:focus-visible::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      transition-delay: 0s;
    }
  }
}
@media (hover: hover) and (max-width: 1280px) {
  html:not(.coarse-pointer) .chat-recent-open[data-label]:hover::after,
  html:not(.coarse-pointer) .chat-recent-open[data-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
}
@media (hover: hover) {
  html.coarse-pointer .voice-schedule-toggle[data-label]:hover::after,
  html.coarse-pointer .voice-schedule-toggle[data-label]:focus-visible::after,
  html.coarse-pointer .voice-history-toggle#voiceEstimateToggle[data-label]:hover::after,
  html.coarse-pointer .voice-history-toggle#voiceEstimateToggle[data-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
}
.mode-chat.tools-collapsed .voice-tool[data-label]::after,
.mode-chat.tools-anim .voice-tool[data-label]::after {
  content: none;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none;
}
@media (hover: none) {
  .chat-recent-open[data-label]::after,
  .chat-search-open[data-label]::after,
  .chat-dnd-toggle[data-label]::after,
  .chat-incognito-toggle[data-label]::after,
  .settings-cog[data-label]::after,
  .voice-history-toggle[data-label]::after {
    content: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-tool[data-label]::after,
  .chat-recent-open[data-label]::after,
  .chat-search-open[data-label]::after,
  .chat-dnd-toggle[data-label]::after,
  .chat-incognito-toggle[data-label]::after,
  .settings-cog[data-label]::after,
  .voice-history-toggle[data-label]::after {
    transition: none;
  }
}

.chat-search-open {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ui-glass-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-search-open svg { width: 18px; height: 18px; }

/* Incognito toggle (ghost icon) — same glass circle as the search button. The
   pressed state tints the icon/teal so the user can see incognito is on. */
.chat-incognito-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ui-glass-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-incognito-toggle svg { width: 19px; height: 19px; }
.chat-incognito-toggle[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(78, 201, 176, 0.28);
  --ui-glass-fill: rgba(78, 201, 176, 0.16);
  --ui-glass-fill-hover: rgba(78, 201, 176, 0.24);
}
.chat-incognito-toggle[aria-pressed="true"]:hover {
  background-color: var(--ui-glass-fill-hover);
}
.chat-incognito-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Do Not Disturb toggle — moon icon, same shell as incognito. */
.chat-dnd-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ui-glass-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.chat-dnd-toggle svg { width: 18px; height: 18px; }
.chat-dnd-wrap { position: relative; }
.chat-dnd-toggle[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(78, 201, 176, 0.28);
  --ui-glass-fill: rgba(78, 201, 176, 0.16);
  --ui-glass-fill-hover: rgba(78, 201, 176, 0.24);
}
.chat-dnd-toggle[aria-pressed="true"]:hover {
  background-color: var(--ui-glass-fill-hover);
}
.chat-dnd-popover {
  /* Fixed so split / coarse-pointer toolbar overflow (which forces overflow-y
     to auto) cannot clip the menu. Top/left are written by JS from the toggle. */
  position: fixed;
  top: calc(env(safe-area-inset-top) + 62px);
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(22, 22, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  z-index: 640;
}
.chat-dnd-popover[hidden] { display: none !important; }
.chat-dnd-popover-title {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
}
.chat-dnd-popover-sub {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
}
.chat-dnd-presets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-dnd-preset,
.chat-dnd-off {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.chat-dnd-preset:hover,
.chat-dnd-off:hover {
  background: rgba(255, 255, 255, 0.1);
}
.chat-dnd-off {
  margin-top: 8px;
  color: var(--accent-soft);
}

.chat-search-panel[hidden] { display: none !important; }
.chat-search-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 12px) 12px 12px;
}
.chat-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.chat-search-sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  /* Director glass: frosted sheet so the dimmed app reads faintly behind it. */
  background: var(--ds-overlay-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), var(--ds-inset-top);
  overflow: hidden;
}
.chat-search-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chat-search-head input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: max(16px, calc(16px * var(--wg-text-scale)));
  outline: none;
}
.chat-search-head input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.chat-search-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-search-close svg { width: 16px; height: 16px; }
.chat-search-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
.chat-search-result {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  padding: 10px 12px;
  cursor: pointer;
}
.chat-search-result:hover,
.chat-search-result:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.chat-search-result-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  opacity: 0.75;
  margin-bottom: 4px;
}
.chat-search-result-snippet {
  display: block;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.35;
  color: var(--text-primary);
}
.chat-search-empty {
  margin: 0;
  padding: 18px 14px 22px;
  text-align: center;
  color: var(--text-secondary);
  font-size: calc(14px * var(--wg-text-scale));
}

/* ---- Research sources sheet + citation pills --------------------------- */
.sources-sheet-panel[hidden] { display: none !important; }
.sources-sheet-panel {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sources-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.sources-sheet {
  position: relative;
  width: min(560px, 100%);
  max-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--ds-overlay-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.sources-sheet-grab {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin: 8px auto 4px;
}
.sources-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sources-sheet-title {
  margin: 0;
  font-size: calc(15px * var(--wg-text-scale));
  font-weight: 600;
  color: var(--text-primary);
}
.sources-sheet-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sources-sheet-close svg { width: 16px; height: 16px; }
.sources-sheet-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px 14px;
  overflow-y: auto;
  flex: 1;
}
.sources-sheet-row {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sources-sheet-row:hover,
.sources-sheet-row:focus-visible,
.sources-sheet-row.is-highlight {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.sources-sheet-row .ss-favicon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.sources-sheet-row .ss-entity-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
.sources-sheet-row .ss-entity-icon svg {
  width: 14px;
  height: 14px;
}
.list-pill-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  margin-left: -4px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.list-pill-icons .list-pill-icon:first-child { margin-left: 0; }
.list-pill-icon svg {
  width: 10px;
  height: 10px;
}
.sources-sheet-row .ss-body { min-width: 0; flex: 1; }
.sources-sheet-row .ss-publisher {
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.sources-sheet-row .ss-title {
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
}
@media (min-width: 721px) {
  .sources-sheet-row .ss-title {
    font-size: calc(13px * var(--wg-text-scale));
    font-weight: 400;
    color: var(--text-secondary);
  }
}
.sources-sheet-row .ss-snippet {
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.35;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sources-sheet-row .ss-date {
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  margin-top: 4px;
  opacity: 0.85;
}
.sources-sheet-row.is-openable {
  cursor: pointer;
}
.sources-sheet-row .ss-open-chevron {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  opacity: 0.55;
  display: inline-flex;
}
.sources-sheet-row .ss-open-chevron svg {
  width: 16px;
  height: 16px;
}
.sources-sheet-row:hover .ss-open-chevron,
.sources-sheet-row:focus-visible .ss-open-chevron {
  opacity: 0.9;
}

.chat-turn-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;
}
.chat-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px;
  padding-left: 2px;
}
/* Per-response rating. Stays quiet until hover so it never competes with the
   answer, and fades to a settled state once the principal has rated. */
.chat-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  padding-left: 2px;
  opacity: 0.35;
  transition: opacity 120ms ease;
}
.chat-turn-block:hover .chat-rating,
.chat-rating:focus-within,
.chat-rating.is-rated {
  opacity: 1;
}
.chat-rating-tier {
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.02em;
}
.chat-rating-btn {
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale));
  cursor: pointer;
}
.chat-rating-btn:hover:not(:disabled),
.chat-rating-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
  outline: none;
}
.chat-rating-btn[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.22);
  color: var(--text-primary);
}
.chat-rating-btn:disabled {
  cursor: default;
}
.chat-rating.is-rated .chat-rating-btn:not([aria-checked="true"]) {
  display: none;
}
.sources-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
  max-width: 100%;
}
.sources-pill:hover,
.sources-pill:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  outline: none;
}
.sources-pill-favicons {
  display: inline-flex;
  align-items: center;
}
.sources-pill-favicons img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  margin-left: -4px;
  background: rgba(255, 255, 255, 0.08);
}
.sources-pill-favicons img:first-child { margin-left: 0; }
.sources-pill-label { white-space: nowrap; }

.cite-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
  border: none;
  border-radius: 999px;
  padding: 1px 8px 1px 4px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale));
  line-height: 1.6;
  cursor: pointer;
  max-width: 160px;
}
.cite-pill:hover,
.cite-pill:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  outline: none;
}
.cite-pill img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cite-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-sources-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 8px 4px;
  justify-content: center;
}
.voice-sources-row:empty { display: none; }

.chat-objects--superseded { display: none !important; }

/* ---- Agent session surface --------------------------------------------- */
.surface-agent #chatRecentOpen,
.surface-agent #chatScheduleOpen,
.surface-agent #chatWatchesOpen,
/* Ghost stays visible — Edge reserves Shift+Ctrl+I for DevTools. */
.surface-agent #chatSearchOpen,
.surface-agent #voiceMeeting,
.surface-agent #voiceTranscribe,
.surface-agent .chat-thinking-level-wrap,
.surface-agent .chat-inbox-strip {
  display: none !important;
}
.agent-bar-end {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6; /* below chat-logo (7) and settings-cog (8) */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 40px;
  /* 16px inset + 40px corner control + 14px gap — same rhythm as chat-toolbar */
  max-width: min(
    520px,
    calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 140px)
  );
  padding: 0 10px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: var(--ds-overlay-bg);
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), var(--ds-inset-top);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary);
}
.agent-bar-end[hidden] { display: none !important; }
/* Resume banner sits in the same top-center slot — keep the agent pill readable. */
html.paused-for-reclaim.surface-agent .agent-bar-end {
  top: calc(env(safe-area-inset-top) + 72px);
}
.agent-bar-end:hover,
.agent-bar-end:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
.agent-bar-end:disabled {
  opacity: 0.55;
  cursor: default;
}
.agent-bar-end-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.agent-bar-end-icon img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.agent-bar-end-icon svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}
.agent-bar-end-icon .agent-connect-initials {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  text-transform: uppercase;
}
.agent-bar-end-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-align: left;
}
.agent-bar-end-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  opacity: 0.85;
}
.agent-bar-end-close svg {
  width: 14px;
  height: 14px;
}
.agent-bar-end:hover .agent-bar-end-close,
.agent-bar-end:focus-visible .agent-bar-end-close {
  color: var(--text-primary);
  opacity: 1;
}

/* Agent surface: the fixed agent bar pill occupies the top safe area — push
   toasts and the chat log below it so neither is clipped or obscured. */
.surface-agent {
  --agent-bar-clearance: calc(env(safe-area-inset-top) + 64px);
}
.surface-agent .toast {
  top: var(--agent-bar-clearance);
}
.surface-agent.mode-chat #chat {
  top: var(--agent-bar-clearance);
  --chat-anchor-inset: 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 44px), transparent 100%);
}
html.coarse-pointer.surface-agent.mode-chat #chat {
  top: var(--agent-bar-clearance);
}

.agent-connect-panel[hidden] { display: none !important; }
.agent-connect-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 12px) 12px 12px;
}
.agent-connect-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.agent-connect-sheet {
  position: relative;
  width: min(480px, 100%);
  max-height: min(80vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--ds-overlay-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  border-radius: 22px;
  /* Faint accent highlight along the top edge so the sheet reads as "special"
     against ordinary overlay panels. */
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(var(--accent-rgb), 0.18) inset,
    var(--ds-inset-top);
  overflow: hidden;
}
.agent-connect-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.agent-connect-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: calc(16px * var(--wg-text-scale));
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.agent-connect-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 180px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-primary);
  font-size: calc(13px * var(--wg-text-scale));
  font-family: inherit;
  font-weight: 400;
}
.agent-connect-search::placeholder {
  color: var(--text-secondary);
  opacity: 0.75;
}
.agent-connect-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.4);
}
.agent-connect-search[hidden] {
  display: none !important;
}
.agent-connect-close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.agent-connect-close svg { width: 16px; height: 16px; }
.agent-connect-body {
  /* Single content column: the pill, the Recent label, recent rows, and the
     error all align to this left edge — no extra insets below. */
  padding: 18px 20px 20px;
  overflow-y: auto;
}
.agent-connect-label {
  margin: 20px 0 6px;
  padding: 0;
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.agent-connect-recents {
  margin-top: 0;
  margin-bottom: 4px;
}
.agent-connect-directory {
  margin-top: 0;
  margin-bottom: 4px;
}
.agent-connect-directory-project + .agent-connect-directory-project {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.agent-connect-directory-project-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  min-width: 0;
}
.agent-connect-directory-project-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.agent-connect-directory-project-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agent-connect-directory-project-icon .agent-connect-initials {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agent-connect-directory-project-name {
  margin: 0;
  padding: 0;
  min-width: 0;
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 600;
  color: var(--text-primary);
}
.agent-connect-directory-project-desc {
  margin: 0 0 8px;
  padding: 0;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.agent-connect-directory-wp {
  margin: 12px 0 4px;
  padding: 0;
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.75;
}
.agent-connect-recents-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.agent-connect-recents-list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.agent-connect-recent-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: center;
  width: calc(100% + 16px);
  text-align: left;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  /* Negative side margins give the hover highlight breathing room while the
     icon/text stay flush with the body's content column. */
  margin: 0 -8px;
  padding: 11px 8px;
  cursor: pointer;
  font-size: calc(13.5px * var(--wg-text-scale));
  line-height: 1.35;
  transition: color var(--ds-duration-fast, .16s) var(--ds-ease-out, ease),
              background var(--ds-duration-fast, .16s) var(--ds-ease-out, ease);
}
.agent-connect-recent-item:hover,
.agent-connect-recent-item:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  outline: none;
}
.agent-connect-recent-item:active {
  background: rgba(255, 255, 255, 0.08);
}
.agent-connect-recent-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.agent-connect-recent-icon img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.agent-connect-recent-icon svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}
.agent-connect-recent-icon .agent-connect-initials {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  text-transform: uppercase;
}
.agent-connect-recent-text {
  min-width: 0;
}
.agent-connect-recent-title {
  display: block;
  letter-spacing: 0.01em;
  font-weight: 400;
}
.agent-connect-recent-meta {
  display: block;
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  opacity: 0.6;
  margin-top: 3px;
  transition: opacity var(--ds-duration-fast, .16s) var(--ds-ease-out, ease);
}
.agent-connect-recent-item:hover .agent-connect-recent-meta,
.agent-connect-recent-item:focus-visible .agent-connect-recent-meta {
  opacity: 0.9;
}
/* Chat-pill code entry — mirrors the chat composer (.chat-pill / .chat-send):
   glass pill, borderless field, circular go button. */
.agent-connect-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 26px;
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  box-shadow: var(--ds-inset-top), 0 8px 32px rgba(0, 0, 0, 0.4);
  transition: border-color var(--ds-duration-fast, .16s) var(--ds-ease-out, ease);
}
/* Author display:flex overrides UA [hidden]{display:none} — restore it. */
.agent-connect-pill[hidden] {
  display: none !important;
}
.agent-connect-directory[hidden] {
  display: none !important;
}
.agent-connect-pill:focus-within {
  border-color: rgba(255, 255, 255, 0.24);
}
.agent-connect-pill-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.agent-connect-pill-icon img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.agent-connect-pill-icon svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}
.agent-connect-pill-icon .agent-connect-initials {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  text-transform: uppercase;
}
.agent-connect-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  /* 16px so iOS Safari doesn't zoom on focus (matches the mobile chat field). */
  font-size: calc(16px * var(--wg-text-scale));
  padding: 10px 0;
  outline: none;
}
.agent-connect-input::placeholder {
  color: var(--text-secondary);
}
.agent-connect-go {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--text-primary);
  color: #0f1114;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s var(--ds-ease-out, ease),
              opacity var(--ds-duration-fast, .16s) var(--ds-ease-out, ease),
              background var(--ds-duration-fast, .16s) var(--ds-ease-out, ease);
}
.agent-connect-go:hover { background: #ffffff; }
.agent-connect-go:active { transform: scale(.92); }
.agent-connect-go:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: var(--text-primary);
}
.agent-connect-go svg { width: 20px; height: 20px; }
.agent-connect-error {
  margin: 10px 0 0;
  font-size: calc(13px * var(--wg-text-scale));
  color: #ff8a8a;
}
.chat-history-sentinel {
  align-self: center;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.65;
  padding: 4px 0 8px;
  text-align: center;
}
.chat-msg.segment-divider {
  align-self: center;
  max-width: min(100%, 420px);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.72;
  text-align: center;
  padding: 8px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: transparent;
}
.chat-msg-highlight {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55);
  animation: chatHighlight 2.4s ease;
}
@keyframes chatHighlight {
  0%, 35% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55); }
  100% { box-shadow: none; }
}

/* Chat mode: bottom control bar is empty (mute/captions/chat hidden). */
.mode-chat .controls {
  display: none;
}
/* Composer popovers (quick actions, shared files) are absolutely positioned
   inside .chat-input, so this z-index traps them beneath .chat-compose-chips
   (z-index 5) — the attachment chips and review banner paint over the panel.
   .has-popover lifts the whole composer while one is open. */
.mode-chat .chat-input.has-popover {
  z-index: 14;
}
.mode-chat .chat-input {
  bottom: 0;
  padding: 14px 0 var(--chat-composer-gutter);
  z-index: 4;
}
.mode-chat #chat {
  /* Extend the scroll area down behind the glass composer; the reserve becomes
     bottom padding so the latest message still rests above the composer while
     scrolled-past messages pass behind the translucent pill and fade out.
     Tracks --chat-input-height (published by syncComposerHeight) so the log
     keeps clearing the composer as it grows up to 75vh. --chat-in-progress-height
     is the inbox / deep-think / attachment stack above the composer. */
  bottom: var(--chat-composer-gutter);
  padding-bottom: calc(var(--chat-input-height, var(--chat-composer-reserve)) + var(--chat-in-progress-height, 0px));
}
/* Short threads hug the composer; long threads still scroll normally. */
.mode-chat #chat::before {
  content: "";
  flex: 1 1 auto;
  min-height: 0;
}
.mode-chat .chat-compose-chips {
  bottom: calc(var(--chat-input-height, calc(var(--chat-composer-gutter) + var(--chat-composer-reserve))) + 8px);
}
/* Mobile: the composer + chat log are FIXED to the viewport and lift by the
   keyboard height (--chat-kb-offset, 0 when closed via the JS threshold). We do
   NOT resize/position the .stage itself — making the whole stage fixed collapses
   it and throws the composer to the top of the screen on iOS when the keyboard
   opens. Threshold-gating the offset also stops safe-area noise from floating
   the composer up when no keyboard is shown. */
html.coarse-pointer.mode-chat .chat-input {
  position: fixed;
  bottom: calc(var(--chat-kb-offset, 0px) + var(--chat-mobile-gap, 14px));
  padding: 6px 0 0;
}
/* Keyboard open: hug it (the offset already clears the home indicator). */
html.coarse-pointer.mode-chat.chat-kb-open .chat-input {
  bottom: calc(var(--chat-kb-offset, 0px) + 6px);
}
html.coarse-pointer.mode-chat #chat {
  position: fixed;
  bottom: calc(var(--chat-kb-offset, 0px) + var(--chat-mobile-gap, 14px) + var(--chat-input-height, var(--chat-composer-reserve-mobile)));
  padding-bottom: var(--chat-in-progress-height, 0px);
}
html.coarse-pointer.mode-chat.chat-kb-open #chat {
  bottom: calc(var(--chat-kb-offset, 0px) + 6px + var(--chat-input-height, var(--chat-composer-reserve-mobile)));
  padding-bottom: var(--chat-in-progress-height, 0px);
}
html.coarse-pointer.mode-chat .chat-compose-chips {
  position: fixed;
  bottom: calc(var(--chat-kb-offset, 0px) + var(--chat-mobile-gap, 14px) + var(--chat-input-height, var(--chat-composer-reserve-mobile)) + 8px);
}
html.coarse-pointer.mode-chat.chat-kb-open .chat-compose-chips {
  bottom: calc(var(--chat-kb-offset, 0px) + 6px + var(--chat-input-height, var(--chat-composer-reserve-mobile)) + 8px);
}

/* Scrollable conversation log. Starts higher in chat mode now that the avatar
   is gone, using the reclaimed space. */
/* Chat LOG container, addressed by id so the `.chat` class can't collide with
   the control-bar chat BUTTON (.ctrl-btn.chat), which it was hiding. */
#chat {
  position: absolute;
  top: 7%;
  bottom: calc(env(safe-area-inset-bottom) + 152px);
  /* Scroll pin tuck when a sent turn is anchored to the viewport top (app.js). */
  --chat-anchor-inset: 8px;
  /* Full-width scroll hit area so trackpad/wheel scrolling works in the side
     margins; horizontal padding keeps the conversation column centred. */
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  box-sizing: border-box;
  --chat-column-width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
  display: none;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Asymmetric once the rail gutter is live: left never goes under the icons,
     right stays the usual centred remainder (or --chat-rail-end on a narrow pane). */
  padding: 4px
    max(var(--chat-rail-end), calc((100% - var(--chat-column-width)) / 2))
    8px
    max(var(--chat-rail-gutter), calc((100% - var(--chat-column-width)) / 2));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  /* Fade the top edge and, near the bottom, fade messages out as they pass
     behind the translucent glass composer (so some text reads through it). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%);
}
.mode-chat #chat { display: flex; }
/* Mobile: a longer top fade so chat text dissolves before reaching the floating
   top controls (logo + RECENT/search/close) instead of reading as noise. */
html.coarse-pointer #chat {
  /* Match the 84px top fade — pin sent turns below the floating chrome. */
  --chat-anchor-inset: 80px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 84px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 84px, #000 calc(100% - 44px), transparent 100%);
}
#chat::-webkit-scrollbar { width: 6px; }
#chat::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

/* A turn is a flex COLUMN: body first, then the time/copy bar BELOW the box
   (order swaps them; the markup keeps bar-then-body). Desktop: 14px / 1.7.
   Touch (html.coarse-pointer): 17px — see mobile chat typography below. */
.chat-msg {
  max-width: 86%;
  display: flex;
  flex-direction: column;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: chat-in .2s ease;
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
/* User turns: a neutral rounded pill on the right (per the reference design).
   The fill lives on the BODY so the time/copy bar sits below the box. */
.chat-msg.user {
  align-self: flex-end;
  align-items: flex-end;
  max-width: 78%;
  color: var(--text-primary);
}
.chat-msg.user.is-live-draft {
  opacity: 0.78;
}
.chat-msg.user.is-live-draft .chat-msg-body {
  border-style: dashed;
  color: var(--text-secondary);
}
.chat-msg.user.is-live-draft .chat-msg-bar,
.chat-msg.user.is-live-draft .chat-copy-dropdown,
.chat-msg.user.is-live-draft .chat-branch-mark {
  display: none;
}
.chat-msg.user.is-live-settled .chat-awareness-label-text {
  letter-spacing: 0.02em;
}
.chat-msg.user.chat-answers {
  align-self: stretch;
  align-items: stretch;
  max-width: none;
  width: 100%;
  white-space: normal;
}
.chat-msg.user.chat-answers .chat-msg-body {
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-radius: 0;
  padding: 0;
}
.chat-answers-card {
  display: block;
  padding: 14px 16px 16px;
  border-radius: 14px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: var(--ds-surface-2);
}
.chat-answers-label {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}
.chat-answers-item + .chat-answers-item {
  margin-top: 16px;
}
.chat-answers-tag {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: calc(11.5px * var(--wg-text-scale));
  font-weight: 500;
  color: var(--text-secondary);
}
.chat-answers-q {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
  font-size: calc(15px * var(--wg-text-scale));
  line-height: 1.4;
}
.chat-answers-a {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: calc(14.5px * var(--wg-text-scale));
  line-height: 1.45;
}
.chat-answers-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ds-border-hairline);
  color: var(--text-primary);
  font-size: calc(14.5px * var(--wg-text-scale));
  line-height: 1.45;
  white-space: pre-wrap;
}
.chat-msg.user .chat-msg-body {
  /* Director glass user bubble: subtle translucent surface + hairline edge,
     frosted over the conversation behind it. */
  position: relative;
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 10px 16px;
  overflow: visible;
}
.chat-msg.user.has-branch .chat-msg-body,
html.live-md-threads .chat-msg.user:has(.chat-thread-tag) .chat-msg-body {
  padding-left: 32px;
}
/* Turns spoken to the document facilitator, not the agent. Dashed so the review
   side-conversation reads as a different exchange from the agent transcript. */
.chat-msg.user.chat-review-turn {
  opacity: 0.72;
}
/* Posted on the user's side of the agent conversation, but answered from their
   files rather than by them. Full strength — this is a participant speaking,
   not scaffolding — with a label carrying the attribution. */
.chat-msg.user.chat-file-turn {
  opacity: 1;
}
.chat-msg.user.chat-file-turn .chat-msg-body {
  padding: 0 0 10px;
  overflow: hidden;
}
.chat-msg.user.chat-file-turn .chat-awareness-label {
  color: rgba(175, 215, 200, 0.92);
  border-bottom-color: rgba(150, 195, 180, 0.18);
  padding: 8px 16px 7px;
}
.chat-msg.user.chat-file-turn .chat-msg-body > :not(.chat-awareness-label) {
  padding: 8px 16px 0;
}
.chat-msg.user.chat-review-turn .chat-msg-body {
  background: transparent;
  border-style: dashed;
}
.chat-msg.memory {
  align-self: center;
  max-width: min(100%, 420px);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.72;
  text-align: center;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  animation: chat-in .24s ease;
}
/* Assistant turns: NO surround (per the reference design) — the answer sits
   directly on the page, left-aligned, using the full column width. */
.chat-msg.facilitator {
  align-self: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}
.chat-msg.facilitator .chat-msg-body {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ds-border-hairline-hover);
  background: var(--ds-glass-bg);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  box-shadow: var(--ds-inset-top);
}
.chat-msg.facilitator .chat-awareness-label {
  color: var(--text-secondary);
  border-bottom: none;
  padding: 10px 14px 0;
}
.chat-msg.facilitator .chat-msg-body > :not(.chat-awareness-label) {
  padding: 8px 14px 0;
}
.chat-msg.assistant {
  align-self: stretch;
  max-width: 100%;
  color: var(--text-primary);
}
.chat-msg.assistant .chat-msg-body { position: relative; padding: 0 2px; }
.chat-msg.assistant:not(.chat-awareness).has-branch .chat-msg-body,
html.live-md-threads .chat-msg.assistant:not(.chat-awareness):has(.chat-thread-tag) .chat-msg-body {
  padding-left: 20px;
}
/* Working document chip: the advisor wrote to the document beside the chat.
   Sits under the reply prose; tapping it (re)opens the docked reader. */
.chat-document-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.chat-document-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.9);
}
.chat-document-chip:hover,
.chat-document-chip:focus-visible {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.5);
  outline: none;
}
/* A chip with no reply prose to sit under lands as its own line in the log. */
#chat > .chat-document-chip {
  align-self: flex-start;
  margin: 4px 0 8px;
}
/* Ephemeral session-resume briefing ("Last time we spoke…") — keeps a softer,
   dashed bubble so it reads as a recap rather than a fresh answer. */
.chat-msg.assistant.resume-briefing {
  align-self: flex-start;
  align-items: flex-start;
  max-width: 86%;
}
.chat-msg.assistant.resume-briefing .chat-msg-body {
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px dashed rgba(var(--accent-rgb), 0.22);
}
/* Proactive portfolio awareness + fired reminders — not MD answers. */
.chat-msg.assistant.chat-awareness {
  align-self: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  transition: opacity 220ms var(--ds-ease-out, ease), transform 220ms var(--ds-ease-out, ease);
}
.chat-msg.assistant.chat-awareness.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg.assistant.chat-awareness {
    transition: none;
  }
  .chat-msg.assistant.chat-awareness.is-leaving {
    transform: none;
  }
}
.chat-msg.assistant.chat-awareness .chat-msg-body {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(140, 175, 215, 0.28);
  background: rgba(100, 140, 190, 0.07);
}
.chat-msg.assistant.chat-awareness--urgent .chat-msg-body {
  border-color: rgba(220, 145, 95, 0.38);
  background: rgba(220, 120, 70, 0.08);
}
.chat-msg.assistant.chat-awareness--reminder .chat-msg-body {
  overflow: visible;
  border-color: rgba(160, 190, 140, 0.28);
  background: rgba(120, 160, 100, 0.07);
}
.chat-msg.assistant.chat-awareness--job-complete .chat-msg-body {
  border-color: rgba(150, 185, 230, 0.34);
  background: rgba(90, 130, 180, 0.09);
}
.chat-awareness-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px 6px;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(170, 205, 245, 0.92);
  border-bottom: 1px solid rgba(140, 175, 215, 0.16);
}
.chat-awareness-dismiss {
  appearance: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: -4px -7px -3px auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  font-weight: 500;
  font-size: calc(18px * var(--wg-text-scale));
  line-height: 1.34;
  font-family: var(--font-sans);
  text-align: center;
  opacity: 0.62;
  cursor: pointer;
}
.chat-awareness-dismiss:hover,
.chat-awareness-dismiss:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
  outline: none;
}
.chat-awareness-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: -4px -7px -3px auto;
  flex: 0 0 auto;
  position: relative;
}
.chat-awareness-header-actions .chat-awareness-dismiss {
  margin: 0;
}
.chat-msg.assistant.chat-awareness--reminder.is-snooze-open {
  position: relative;
  z-index: 6;
}
.chat-awareness-snooze-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.chat-awareness-snooze-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  font-family: var(--font-sans);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  opacity: 0.78;
  cursor: pointer;
  transition: background 0.14s var(--ds-ease-out), opacity 0.14s var(--ds-ease-out);
}
.chat-awareness-snooze-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
  transition: transform 0.14s var(--ds-ease-out);
}
.chat-awareness-snooze-toggle:hover,
.chat-awareness-snooze-toggle:focus-visible,
.chat-awareness-snooze-wrap.is-open .chat-awareness-snooze-toggle {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
  outline: none;
}
.chat-awareness-snooze-wrap.is-open .chat-awareness-snooze-toggle::after {
  transform: rotate(180deg);
}
.chat-awareness--snoozed .chat-awareness-snooze-toggle {
  opacity: 0.92;
}
.chat-awareness-snooze-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  min-width: 176px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: var(--ds-overlay-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  box-shadow:
    var(--ds-inset-top),
    0 18px 44px -16px rgba(0, 0, 0, 0.95);
  transform-origin: top right;
  animation: reminderSnoozeMenuIn 0.16s var(--ds-ease-out);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
}
/* Ported to document.body so the menu can paint above the glass composer
   (.chat-input z-index 4) and escape #chat's bottom fade mask. */
.chat-awareness-snooze-menu.is-ported {
  position: fixed;
  top: auto;
  right: auto;
  /* Above the companion float (.stage z-index 600) and the glass composer. */
  z-index: 700;
  max-height: min(360px, calc(100vh - 24px));
  overflow-y: auto;
}
.chat-awareness-snooze-menu.is-above {
  transform-origin: bottom right;
}
.chat-awareness-snooze-menu[hidden] { display: none !important; }
@keyframes reminderSnoozeMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.chat-awareness-snooze-btn {
  appearance: none;
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
.chat-awareness-snooze-btn:hover:not(:disabled),
.chat-awareness-snooze-btn:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.chat-awareness-snooze-btn.is-selected {
  background: rgba(120, 160, 100, 0.22);
}
.chat-awareness-snooze-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Document / agent / file-note / project focus: no branch glyph. */
.chat-msg.assistant.chat-awareness--focus .chat-msg-body {
  border-radius: 16px;
  border: 1px solid rgba(var(--chat-branch-rgb), 0.32);
  background: rgba(var(--chat-branch-rgb), 0.10);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
}
.chat-awareness--focus .chat-awareness-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px 0;
  color: var(--text-secondary);
  border-bottom: none;
}
.chat-awareness--focus .chat-awareness-text {
  padding-top: 8px;
}
.chat-branch-box {
  display: none;
}
.chat-branch-mark {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: transparent;
  color: var(--chat-branch);
  pointer-events: none;
}
.chat-branch-mark svg {
  width: 14px;
  height: 14px;
}
.chat-msg.assistant:not(.chat-awareness) .chat-branch-mark {
  top: 2px;
  left: 0;
}
.chat-msg.assistant.chat-awareness .chat-branch-mark,
.chat-msg.chat-answers .chat-branch-mark,
.chat-msg.user.chat-file-turn .chat-branch-mark,
.chat-msg:not(.has-branch):not(:has(.chat-thread-tag)) .chat-branch-mark,
html:not(.live-md-threads) .chat-branch-mark {
  display: none;
}
.chat-awareness-open-glyph {
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex: 0 0 auto;
  opacity: 0.72;
  color: var(--text-secondary);
}
.chat-awareness--focus .chat-awareness-dismiss {
  margin-left: 0;
}
.chat-awareness-open-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}
.chat-msg.assistant.chat-awareness--focus .chat-msg-body.chat-awareness-body--openable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-msg.assistant.chat-awareness--focus .chat-msg-body.chat-awareness-body--openable:hover,
.chat-msg.assistant.chat-awareness--focus .chat-msg-body.chat-awareness-body--openable:focus-visible {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    var(--ds-inset-top),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  outline: none;
}
.chat-msg.assistant.chat-awareness--focus .chat-msg-body.chat-awareness-body--openable:hover .chat-awareness-open-glyph,
.chat-msg.assistant.chat-awareness--focus .chat-msg-body.chat-awareness-body--openable:focus-visible .chat-awareness-open-glyph {
  opacity: 1;
  color: var(--text-primary);
}
.chat-awareness-label--urgent {
  color: rgba(255, 190, 150, 0.95);
  border-bottom-color: rgba(220, 145, 95, 0.22);
}
.chat-awareness-label--reminder {
  color: rgba(190, 220, 165, 0.92);
  border-bottom-color: rgba(160, 190, 140, 0.18);
}
.chat-awareness-label--job-research {
  color: rgba(175, 210, 255, 0.95);
}
.chat-awareness-label--job-think {
  color: rgba(200, 185, 255, 0.92);
}
.chat-awareness-project {
  margin: 0;
  padding: 8px 14px 7px;
  border-bottom: 1px solid rgba(140, 175, 215, 0.12);
}
.chat-awareness-project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  color: rgba(200, 225, 255, 0.95);
  text-decoration: none;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1.35;
}
.chat-awareness-project-link:hover,
.chat-awareness-project-link:focus-visible {
  color: rgba(230, 242, 255, 1);
  text-decoration: underline;
}
.chat-awareness-project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-awareness-project-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
}
.chat-awareness-project-icon img {
  width: 18px;
  height: 18px;
  object-fit: cover;
  display: block;
}
.chat-awareness-project-initials {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: calc(8px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1;
  color: rgba(230, 242, 255, 0.88);
  text-transform: uppercase;
}
.chat-awareness-text {
  padding: 10px 14px 12px;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.65;
}
.chat-msg.assistant.chat-awareness .chat-awareness-text > :first-child { margin-top: 0; }
.chat-msg.assistant.chat-awareness .chat-awareness-text > :last-child { margin-bottom: 0; }
.chat-msg.assistant.chat-awareness .chat-awareness-text p { margin: 0 0 0.65em; }
.chat-msg.assistant.chat-awareness .chat-awareness-text p:last-child { margin-bottom: 0; }
.chat-awareness-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(140, 175, 215, 0.12);
}
.chat-awareness-reply-btn {
  border: 1px solid rgba(140, 175, 215, 0.35);
  border-radius: 999px;
  background: rgba(100, 140, 190, 0.12);
  color: rgba(200, 225, 255, 0.95);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  cursor: pointer;
}
.chat-awareness-reply-btn:hover:not(:disabled),
.chat-awareness-reply-btn:focus-visible:not(:disabled) {
  background: rgba(100, 140, 190, 0.22);
  border-color: rgba(170, 205, 245, 0.5);
}
.chat-awareness-reply-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.chat-msg.assistant.chat-awareness.is-replying .chat-msg-body {
  border-color: rgba(170, 205, 245, 0.52);
  box-shadow: 0 0 0 1px rgba(170, 205, 245, 0.14);
}
.chat-msg.assistant.chat-awareness--urgent.is-replying .chat-msg-body {
  border-color: rgba(220, 165, 120, 0.55);
  box-shadow: 0 0 0 1px rgba(220, 145, 95, 0.18);
}
/* Per-message copy + local datetime, shown BELOW the box (order: 2 places
   it after the body inside the flex-column turn). Cluster sits on the left
   for assistant bubbles; user bubbles flip the bar so the cluster stays on
   the bubble's outer edge. */
.chat-msg-bar {
  order: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 5px 4px 0;
  min-height: 18px;
}
.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.chat-msg:hover .chat-msg-meta,
.chat-msg:focus-within .chat-msg-meta,
.chat-msg-meta:has(.chat-copy-wrap.is-open) {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .chat-msg-meta { opacity: 0.72; }
}
.chat-msg-time {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  opacity: 0.6;
  margin: 0;
  flex: 0 0 auto;
}
.chat-msg.user .chat-msg-bar { flex-direction: row-reverse; }
.chat-copy-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}
.chat-copy,
.chat-copy-menu {
  flex: 0 0 auto;
  height: 26px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-copy {
  width: 26px;
  border-radius: 6px 0 0 6px;
}
.chat-copy-menu {
  width: 18px;
  padding: 0;
  border-radius: 0 6px 6px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-copy svg { width: 14px; height: 14px; }
.chat-copy-menu svg { width: 10px; height: 10px; opacity: 0.85; }
.chat-copy:hover,
.chat-copy:focus-visible,
.chat-copy-menu:hover,
.chat-copy-menu:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  outline: none;
}
.chat-copy-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 24, 28, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.chat-msg.user .chat-copy-dropdown {
  left: auto;
  right: 0;
}
.chat-copy-dropdown[hidden] { display: none !important; }
.chat-copy-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 16px;
  text-align: left;
  cursor: pointer;
}
.chat-copy-option:hover,
.chat-copy-option:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
.chat-msg-body { display: block; max-width: 100%; min-width: 0; }
/* Rendered markdown uses block elements; don't inherit pre-wrap from .chat-msg.
   Wide content (GFM tables, code) scrolls INSIDE the bubble instead of pushing
   it past the page width — the bubble is shrink-to-fit, so a table's own
   max-width:100% can't resolve against it; the body must clip and scroll. */
.chat-msg.chat-md .chat-msg-body {
  white-space: normal;
  overflow-x: auto;
}
/* Reminder snooze menu is absolutely positioned; overflow:auto here would clip it
   (overflow-x:auto also forces overflow-y to compute as auto). */
.chat-msg.chat-md.chat-awareness--reminder .chat-msg-body {
  overflow: visible;
}
/* Typing placeholder before the first transcript delta lands. */
.chat-msg.assistant.empty::after { content: "…"; color: var(--text-secondary); }

/* Streamed answer chunks fade in as they arrive (instead of popping in). */
.chat-stream-chunk {
  animation: chatChunkFade 0.4s ease both;
}
@keyframes chatChunkFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Non-streamed replies (agent turns) fade in word-by-word. Opacity only — no
   transform/inline-block so line wrapping stays stable and the viewport
   doesn't jump as words appear. */
.chat-word-in {
  animation: chatWordIn 0.28s ease both;
}
@keyframes chatWordIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Rendered markdown (chat mode only). Applied once a turn completes. */
.chat-msg.assistant.chat-md { animation: chatChunkFade 0.25s ease both; }
.chat-msg.chat-md > :first-child,
.chat-msg.chat-md .chat-msg-body > :first-child { margin-top: 0; }
.chat-msg.chat-md > :last-child,
.chat-msg.chat-md .chat-msg-body > :last-child { margin-bottom: 0; }
.chat-msg.chat-md p { margin: 0 0 1em; }
.chat-msg.chat-md hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 1em 0;
}
/* Markers are drawn inside the item, not as outside list-style. The facilitator
   bubble (and any chat-md body with overflow) clips `list-style-position:
   outside`, which made wrapped lines sit under the bullet. */
.chat-msg.chat-md ul,
.chat-msg.chat-md ol {
  margin: 0.4em 0 1em;
  padding-left: 0;
  list-style: none;
}
.chat-msg.chat-md ol { counter-reset: chat-md-ol; }
.chat-msg.chat-md li {
  position: relative;
  margin: 0.35em 0;
  padding-left: 1.25em;
}
.chat-msg.chat-md ul > li::before {
  content: "•";
  position: absolute;
  left: 0;
  width: 1em;
  color: var(--text-secondary);
}
.chat-flag {
  display: block;
  margin: 0.85em 0 1em;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: var(--ds-surface-2);
  box-shadow: none;
  --flag-accent: #7eb6e8;
  --flag-accent-soft: #b7d4f2;
}
.chat-flag:not(.is-stale) {
  cursor: pointer;
}
.chat-flag--ambiguity {
  --flag-accent: #e0a14a;
  --flag-accent-soft: #f0c888;
}
.chat-flag--question,
.chat-qa {
  --flag-accent: var(--accent);
  --flag-accent-soft: var(--accent-soft);
}
.chat-flag--ambiguity,
.chat-flag--question {
  border-color: var(--ds-border-hairline-hover);
  background: var(--ds-surface-2);
}
.chat-flag.is-stale {
  opacity: 1;
  filter: none;
  color: var(--text-secondary);
}
.chat-flag.is-stale .chat-flag-id,
.chat-flag.is-stale .chat-flag-kind,
.chat-flag.is-stale .chat-flag-body {
  color: var(--text-secondary);
}
.chat-flag.is-stale .chat-flag-id {
  background: transparent;
  border-color: var(--ds-border-hairline-hover);
}
.chat-flag.is-stale .chat-flag-reply {
  display: none;
}
.chat-flag.is-resolved {
  opacity: 0.78;
}
.chat-flag.is-resolved .chat-flag-kind::after {
  content: " · resolved";
}
.chat-flag.is-stale.chat-flag--question {
  padding: 8px 12px 8px 14px;
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.03);
}
.chat-flag.is-stale.chat-flag--question .chat-flag-top {
  display: none;
}
.chat-flag.is-stale.chat-flag--question .chat-flag-body {
  margin: 0;
}
.chat-flag.is-replying {
  border-color: rgba(255, 255, 255, 0.16);
}
.chat-flag--ambiguity.is-replying,
.chat-flag--question.is-replying {
  border-color: rgba(255, 255, 255, 0.16);
}
.chat-flag-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-flag-id {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--flag-accent) 26%, transparent);
  background: color-mix(in srgb, var(--flag-accent) 10%, transparent);
  color: var(--flag-accent-soft);
  font-family: var(--font-sans);
  font-size: calc(11.5px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0;
}
.chat-flag-kind {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--flag-accent-soft) 55%, var(--text-secondary));
}
.chat-flag-reply {
  appearance: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -2px -2px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chat-flag-reply:hover,
.chat-flag-reply:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  outline: none;
}
.chat-flag-body {
  margin: 8px 0 0;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.45;
  color: var(--text-primary);
}
.chat-flag-compose {
  margin-top: 10px;
}
.chat-flag-compose[hidden] { display: none; }
.chat-flag-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-primary);
  font: inherit;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.4;
  resize: vertical;
  cursor: text;
}
.chat-flag-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
}
.chat-flag--ambiguity .chat-flag-input:focus,
.chat-flag--question .chat-flag-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
}
/* Question deck: a quiet, compact card. Inter regardless of the body typeface
   so the form-like chrome (pager, kbd hints, button) reads as UI, not prose. */
.chat-qa {
  --qa-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  display: block;
  margin: 0.85em 0 1em;
  padding: 14px 16px 12px;
  border-radius: 12px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: var(--ds-surface-2);
  font-family: var(--qa-font);
}
.chat-qa:not(.is-stale) {
  position: relative;
  cursor: pointer;
}
.chat-qa.is-stale {
  margin: 0.85em 0 1em;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}
.chat-qa.is-stale .chat-qa-head,
.chat-qa.is-stale .chat-qa-foot,
.chat-qa.is-stale .chat-qa-actions,
.chat-qa.is-stale .chat-qa-tools,
.chat-qa.is-stale .chat-qa-close,
.chat-qa.is-stale .chat-flag-compose {
  display: none;
}
.chat-qa .chat-flag {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.chat-qa .chat-flag[hidden] { display: none; }
.chat-qa.is-stale:not(.is-answered) .chat-flag,
.chat-qa.is-stale:not(.is-answered) .chat-flag[hidden] {
  display: block;
  margin: 0.55em 0 0;
  padding: 8px 12px 8px 14px;
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.03);
}
.chat-qa.is-stale:not(.is-answered) .chat-flag:first-child {
  margin-top: 0;
}
.chat-qa.is-stale:not(.is-answered) .chat-qa-num,
.chat-qa.is-stale:not(.is-answered) .chat-flag-body {
  font-weight: 500;
  color: var(--text-secondary);
}
.chat-qa.is-answered,
.chat-qa.is-answered.is-stale {
  margin: 0.35em 0 0.75em;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
}
.chat-qa.is-answered .chat-qa-head,
.chat-qa.is-answered .chat-qa-frame,
.chat-qa.is-answered .chat-qa-foot,
.chat-qa.is-answered .chat-qa-close,
.chat-qa.is-answered .chat-flag,
.chat-qa.is-answered .chat-flag[hidden],
.chat-qa.is-answered .chat-flag-compose {
  display: none;
}
.chat-qa-answered {
  margin: 0;
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  color: var(--text-secondary);
}
.chat-qa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  min-height: 22px;
}
.chat-qa-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.chat-qa-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--text-secondary);
}
.chat-qa-icon-svg {
  display: block;
  width: 14px;
  height: 14px;
}
.chat-qa-heading {
  font-family: inherit;
  font-size: calc(12.5px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
}
.chat-qa-pager {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}
.chat-qa-count {
  padding: 0 4px;
  text-align: center;
  font-family: inherit;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.chat-qa-prompt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.chat-msg.chat-md .chat-qa p.chat-flag-body {
  margin: 0;
}
.chat-qa-num,
.chat-qa .chat-flag-body {
  margin: 0;
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
}
.chat-qa-num {
  flex: 0 0 auto;
  min-width: 14px;
  font-variant-numeric: tabular-nums;
}
.chat-qa .chat-flag-body {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-flag-body strong {
  font-weight: 600;
}
.chat-flag-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
/* `**Ask?** — detail`: the ask leads; the detail hangs under it, lighter. */
.chat-flag-detail {
  display: block;
  margin-top: 4px;
  white-space: normal;
  font-weight: 400;
  color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
}
.chat-qa .chat-flag-compose {
  margin-top: 12px;
  padding-left: 22px;
}
.chat-flag--question.is-replying .chat-flag-input {
  min-height: 132px;
}
.chat-qa .chat-flag-input,
.chat-qa .chat-flag.is-replying .chat-flag-input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 400;
  line-height: 1.5;
  resize: none;
  overflow-y: hidden;
}
.chat-qa .chat-flag-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}
.chat-qa-expert-slot:empty {
  display: none;
}
.chat-qa.is-stale .chat-qa-expert-slot,
.chat-qa.is-stale .chat-qa-expert {
  display: none;
}
.chat-qa-expert {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  position: relative;
}
.chat-qa-expert-label,
.chat-qa-expert-add {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  font-size: calc(12.5px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.chat-qa-expert-add {
  cursor: pointer;
  color: var(--text-primary);
  font: inherit;
}
.chat-qa-expert-add:hover,
.chat-qa-expert-add:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
.chat-qa-expert-dismiss {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  cursor: pointer;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1;
  display: grid;
  place-items: center;
}
.chat-qa-expert-dismiss:hover {
  background: rgba(255, 255, 255, 0.22);
}
.chat-qa-expert-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  min-width: min(280px, 100%);
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: var(--ds-surface-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.chat-qa-expert-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: calc(13px * var(--wg-text-scale));
  cursor: pointer;
}
.chat-qa-expert-option:hover,
.chat-qa-expert-option:focus-visible {
  background: rgba(var(--accent-rgb), 0.12);
  outline: none;
}
.chat-qa-expert-empty {
  margin: 0;
  padding: 8px 10px;
  color: var(--text-secondary);
  font-size: calc(12.5px * var(--wg-text-scale));
}
.chat-qa-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.chat-qa-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-left: -4px;
}
.chat-qa-tools:empty {
  min-width: 0;
}
.chat-qa-attach {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
}
.chat-qa-attach svg {
  width: 16px;
  height: 16px;
}
.chat-qa-attach:hover,
.chat-qa-attach:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  outline: none;
}
.chat-qa-tools:has(#chatSharedFilesBtn:not([hidden])) .chat-qa-attach {
  display: none;
}
.chat-qa-tools .chat-shared-files-btn,
.chat-qa-tools .chat-working-doc-btn,
.chat-qa-tools .chat-dictate {
  width: 28px;
  height: 28px;
  min-width: 0;
  border-radius: 6px;
  color: var(--text-secondary);
}
.chat-qa-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: auto;
}
.chat-qa-skip,
.chat-qa-continue {
  appearance: none;
  font-family: inherit;
  font-size: calc(12.5px * var(--wg-text-scale));
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.chat-qa-skip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}
.chat-qa-skip kbd,
.chat-qa-continue .chat-qa-return {
  font-family: inherit;
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 400;
  color: var(--text-secondary);
}
.chat-qa-skip:hover,
.chat-qa-skip:focus-visible {
  color: var(--text-primary);
  outline: none;
}
.chat-qa-continue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #111;
  font-weight: 600;
}
.chat-qa-continue .chat-qa-return {
  color: inherit;
  opacity: 0.7;
}
.chat-qa-continue:hover,
.chat-qa-continue:focus-visible {
  filter: brightness(1.06);
  outline: none;
}
.chat-qa-skip:disabled,
.chat-qa-continue:disabled {
  opacity: 0.4;
  cursor: default;
  filter: none;
}
.chat-qa-back,
.chat-qa-next {
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-width: 0;
  padding: 0;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chat-qa-back svg,
.chat-qa-next svg {
  width: 14px;
  height: 14px;
}
.chat-qa-back:hover:not(:disabled),
.chat-qa-next:hover:not(:disabled),
.chat-qa-back:focus-visible,
.chat-qa-next:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  outline: none;
}
.chat-qa-back:disabled,
.chat-qa-next:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}
/* Docked above the composer: a filled accent plate, opaque so the scrolling log
   passes behind it rather than through it. */
.chat-qa-dock {
  width: 100%;
}
.chat-qa-dock[hidden] { display: none; }
.chat-qa-slot { display: none; }
/* Same glass language as the composer pill it sits on: hairline, blur, top
   highlight, and only a whisper of accent so the teal never becomes a slab. */
.chat-qa-dock .chat-qa {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px 12px;
  border-radius: 12px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: var(--ds-glass-bg);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  box-shadow: var(--ds-inset-top), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.chat-qa-dock .chat-flag-body {
  color: var(--text-primary);
}
/* Answering in the card: hide the composer pill. Attach + dictate live on
   the card; file inputs stay in the form so the paperclip still works. */
.chat-input.is-answering .composer-row {
  display: none;
}

.chat-msg.chat-md ol > li { counter-increment: chat-md-ol; }
.chat-msg.chat-md ol > li::before {
  content: counter(chat-md-ol) ".";
  position: absolute;
  left: 0;
  width: 1.1em;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.chat-msg.chat-md li > ul,
.chat-msg.chat-md li > ol { margin: 0.25em 0 0.15em; }
.chat-msg.chat-md h1,
.chat-msg.chat-md h2,
.chat-msg.chat-md h3,
.chat-msg.chat-md h4 {
  margin: 0.6em 0 0.35em;
  line-height: 1.25;
  font-weight: 600;
}
.chat-msg.chat-md h1 { font-size: 1.18em; }
.chat-msg.chat-md h2 { font-size: 1.1em; }
.chat-msg.chat-md h3,
.chat-msg.chat-md h4 { font-size: 1.02em; }
.chat-msg.chat-md strong { font-weight: 600; }
.chat-msg.chat-md em { font-style: italic; }
.chat-msg.chat-md a {
  color: rgb(var(--accent-rgb));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-msg.chat-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.08em 0.34em;
  border-radius: 4px;
}
.chat-msg.chat-md pre {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.7em 0.8em;
  margin: 0.5em 0;
  overflow-x: auto;
}
.chat-msg.chat-md pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
  line-height: 1.45;
}
.chat-msg.chat-md pre::-webkit-scrollbar { height: 6px; }
.chat-msg.chat-md pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
/* GFM tables: scroll on the wrap so the table stays display:table. */
.chat-msg.chat-md .md-table-wrap {
  margin: 0.5em 0;
  max-width: 100%;
  overflow-x: auto;
}
.chat-msg.chat-md table {
  border-collapse: collapse;
  margin: 0;
  width: max-content;
  max-width: 100%;
  font-size: 0.92em;
}
.chat-msg.chat-md th,
.chat-msg.chat-md td {
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.34em 0.6em;
  text-align: left;
  vertical-align: top;
}
.chat-msg.chat-md th {
  background: rgba(255, 255, 255, 0.07);
  font-weight: 600;
}
.chat-msg.chat-md tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}
.chat-msg.chat-md .md-table-wrap::-webkit-scrollbar { height: 6px; }
.chat-msg.chat-md .md-table-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.chat-msg.chat-md blockquote {
  margin: 0.5em 0 0.75em;
  padding: 0.15em 0 0.15em 0.85em;
  border-left: 2px solid rgba(var(--accent-rgb), 0.45);
  color: rgba(232, 230, 225, 0.72);
}
/* Report figures: centred and capped so a chart stays legible in a narrow pane. */
.chat-msg.chat-md .chat-md-img {
  display: block;
  max-width: min(100%, 560px);
  height: auto;
  margin: 0.7em auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.chat-msg.chat-md .chat-md-img-missing {
  display: inline-block;
  margin: 0.4em 0;
  font-size: 0.92em;
  color: var(--text-secondary);
}

/* Mobile chat typography — iOS body text (~17pt) for comfortable reading.
   Desktop stays at 14px. Composer input stays at 16px (Safari zoom-on-focus floor). */
html.coarse-pointer .chat-msg {
  font-size: calc(17px * var(--wg-text-scale));
}
html.coarse-pointer .chat-msg.chat-md table {
  font-size: 1em;
}
html.coarse-pointer .chat-awareness-text {
  font-size: inherit;
}

/* Inline tool status inside the log (reuses the .tool-indicator visuals). */
.chat-msg.tool {
  align-self: flex-start;
  display: flex;
  /* Override .chat-msg's column layout so the spinner sits to the LEFT of the
     label on one line (otherwise the icon stacks above the text). */
  flex-direction: row;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 4px 4px 6px;
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--wg-text-scale));
  color: var(--text-secondary);
  animation: none;
}
.chat-msg.tool .tool-detail {
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
}

/* Permanent queued activity slot — fixed height, no layout shift while tools cycle. */
.chat-activity {
  align-self: flex-start;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  /* Fixed, unshrinkable height: the slot must never resize as messages cycle. */
  flex: 0 0 auto;
  height: 48px;
  margin: 0 0 8px;
  padding: 4px 4px 6px;
  /* Visible so overflow canvases (pad past the ring) are not clipped. Label
     swaps still clip inside .chat-activity__viewport. */
  overflow: visible;
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--wg-text-scale));
  color: var(--text-secondary);
  animation: none;
}
.chat-activity__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
/* Absolutely centred in the viewport so the label lines up with the logo, and so
   the incoming and outgoing lines can occupy the same spot during a swap. */
.chat-activity__msg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.chat-activity__msg .tool-label { white-space: nowrap; }
.chat-activity__msg .tool-detail {
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
}
.chat-activity__msg--failed .tool-label,
.chat-activity__msg--failed .tool-detail {
  color: var(--danger, #f87171);
}
.chat-activity__msg--leaving {
  animation: chatActivityOut .5s var(--ds-ease-out, ease) forwards;
  pointer-events: none;
}
/* Travels far enough up to clear the top edge of the clipped viewport. */
@keyframes chatActivityOut {
  from { opacity: 1; transform: translateY(-50%); }
  to   { opacity: 0; transform: translateY(-190%); }
}
/* Legacy logo + orbiting dot: the fallback when thinking_spinner.js is absent.
   A mounted spinner marks the well .has-ts and owns the whole glyph instead. */
.chat-activity .chat-tool-logo-wrap:not(.has-ts)::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.chat-activity .chat-tool-logo-wrap:not(.has-ts)::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.95) 0 2px, rgba(255, 255, 255, 0) 3px);
  /* Half the speed of the legacy tool-row orbit — calmer for a permanent slot. */
  animation: wgLogoOrbit 2.8s linear infinite;
  pointer-events: none;
}

/* ---- In-chat tool "thinking" indicator (Director console style) -----------
   An orbiting dot circles the Wholegrain logo while a tool runs; the label
   types in letter-by-letter, then the whole row fades out on success. */
.chat-tool-logo-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.chat-tool-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
  -webkit-user-select: none;
          user-select: none;
}
.chat-msg.tool .tool-label { white-space: nowrap; }
/* Faint orbital track — only while the tool (or Thinking state) is running. */
.chat-msg.tool.tool-running .chat-tool-logo-wrap::before,
.chat-thinking .chat-tool-logo-wrap::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
/* Orbiting brand-teal dot drawn at the top of the ring, rotated around centre. */
.chat-msg.tool.tool-running .chat-tool-logo-wrap::after,
.chat-thinking .chat-tool-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.95) 0 2px, rgba(255, 255, 255, 0) 3px);
  animation: wgLogoOrbit 1.4s linear infinite;
  pointer-events: none;
}
@keyframes wgLogoOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- Thinking spinners ----------------------------------------------------
   Animated glyphs, picked at random per turn by thinking_spinner.js and
   mounted into the 39px logo well. Each variant is authored on a 60x60
   stage and scaled down here, so every length below (and in the JS) is in stage
   units. Reduced motion is handled at the end of the section. */
.chat-tool-logo-wrap.has-ts {
  overflow: visible;
  width: 39px;
  height: 39px;
  z-index: 3;
}
.ts-stage {
  /* 39px well / 60px stage. */
  --ts-scale: 0.65;
  --ts-accent: var(--accent);
  --ts-fg: #d3d6da;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  transform: scale(var(--ts-scale));
  pointer-events: none;
}
.ts-stage[data-ts-scene="1"][data-ts-variant="flask"] { --ts-accent: #c4782a; }
.ts-stage[data-ts-scene="1"][data-ts-variant="flask"] .ts-vapour { fill: #e8dcc8; }
.ts-stage[data-ts-scene="1"][data-ts-variant="ping"] { --ts-accent: #6aa8c8; }
.ts-stage[data-ts-scene="1"][data-ts-variant="sparks"] { --ts-accent: #e8a040; }
.ts-stage[data-ts-scene="1"][data-ts-variant="electrons"] {
  --ts-accent: #5a9ec8;
  --ts-fg: #d4a060;
}
.ts-stage[data-ts-scene="1"][data-ts-variant="superposition"] { --ts-accent: #8a7ab8; }
.ts-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.09);
}
.ts-grain {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
}
.ts-canvas { position: absolute; inset: 0; width: 60px; height: 60px; }
.ts-canvas-overflow {
  inset: calc(-1 * var(--ts-pad, 12px));
  width: calc(60px + 2 * var(--ts-pad, 12px));
  height: calc(60px + 2 * var(--ts-pad, 12px));
}
.ts-stage[data-ts-variant="planet"] .ts-ring { display: none; }
.ts-decay-flake {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #d3d6da;
  pointer-events: none;
  z-index: 12;
  will-change: transform, opacity;
}
.ts-decay-flake--accent { background: var(--accent, #4ec9b0); }
.ts-hummingbird {
  position: fixed;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 14;
  will-change: transform;
}
.ts-reach-seg {
  position: fixed;
  left: 0;
  top: 0;
  height: 1.2px;
  margin: 0;
  padding: 0;
  background: #d3d6da;
  pointer-events: none;
  z-index: 12;
  transform-origin: 0 50%;
  will-change: transform, opacity;
}
.ts-reach-seg--accent { background: var(--accent, #4ec9b0); }
@keyframes ts-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 05 Decode — the grain twitches while the label scrambles (driven in JS). */
@keyframes ts-glitch {
  0%, 90% { transform: translate(0, 0); }
  92% { transform: translate(1px, -1px); }
  94% { transform: translate(-1px, 1px); }
  96% { transform: translate(1px, 1px); }
  98% { transform: translate(0, 0); }
}
.ts-glitch { animation: ts-glitch 2.6s steps(1) infinite; }

/* 06 Synapse sparks — breathing grain that throws off short-lived sparks. */
.ts-pulse {
  animation: ts-breathe 1.8s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.ts-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: var(--ts-accent);
  animation: ts-fly .7s ease-out forwards;
}
@keyframes ts-fly {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* 07 Electron shells — tilted elliptical orbits via offset-path. The orbit line
   is a scaleY-squashed circle; the electron follows a matching ellipse() motion
   path so the dot itself is never distorted. */
.ts-orbit { position: absolute; inset: 0; }
.ts-orbit-path {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  transform: scaleY(.39);
}
.ts-electron {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--ts-accent);
  offset-path: ellipse(23px 9px at 30px 30px);
  offset-rotate: 0deg;
  animation: ts-orbit-run linear infinite;
}
@keyframes ts-orbit-run { to { offset-distance: 100%; } }
.ts-nucleus { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; }

/* 11 Reaction flask. */
.ts-flask { position: absolute; inset: 0; }
.ts-bubble { fill: var(--ts-accent); animation: ts-rise 1.7s linear infinite; }
@keyframes ts-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: translateY(-8px); opacity: 0; }
}
.ts-vapour { fill: rgba(255, 255, 255, .45); animation: ts-vapour 2.4s ease-out infinite; }
@keyframes ts-vapour {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: .7; }
  100% { transform: translateY(-7px); opacity: 0; }
}

/* 12 Superposition — two ghost states collapse into one, then split again. */
.ts-q { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; }
.ts-q1 { animation: ts-qa 3.4s ease-in-out infinite; }
.ts-q2 { animation: ts-qb 3.4s ease-in-out infinite; }
.ts-q3 { animation: ts-qc 3.4s ease-in-out infinite; }
@keyframes ts-qa {
  0%, 100% { transform: none; opacity: .4; }
  38%, 62% { transform: scale(1.05); opacity: 1; }
}
@keyframes ts-qb {
  0%, 100% { transform: translate(-9px, -5px) rotate(-8deg); opacity: .3; }
  38%, 62% { transform: none; opacity: 0; }
}
@keyframes ts-qc {
  0%, 100% { transform: translate(9px, 5px) rotate(8deg); opacity: .3; }
  38%, 62% { transform: none; opacity: 0; }
}
.ts-prob {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--ts-accent) 35%, transparent);
  animation: ts-prob 3.4s ease-in-out infinite;
}
@keyframes ts-prob {
  0%, 100% { transform: scale(1); opacity: .5; }
  38%, 62% { transform: scale(.55); opacity: 0; }
}

/* Small grain used as a fulcrum / wellhead by several canvas variants. */
.ts-fulcrum { width: 12px; height: 12px; }

/* 14 Thought ping — expanding search rings around the grain. */
.ts-ping-rest, .ts-ping {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ts-accent);
}
.ts-ping-rest { opacity: .22; transform: scale(.7); }
.ts-ping { animation: ts-ping 2.4s ease-out infinite; opacity: 0; }
@keyframes ts-ping {
  0% { transform: scale(.35); opacity: .5; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* 16 Seedling — grain sits low so the stem has room to grow. */
.ts-seed {
  width: 14px;
  height: 14px;
  inset: auto 0 8px 0;
  margin: 0 auto;
}

/* 18 Waveform — smaller centre grain so the sine stays readable. */
.ts-wave-core { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .ts-stage *, .ts-stage { animation: none !important; }
}
/* Per-letter fade-in for the tool label. */
.chat-tool-char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  animation: chatToolCharIn .26s var(--ds-ease-out) forwards;
}
@keyframes chatToolCharIn {
  from { opacity: 0; filter: blur(2px); transform: translateY(1px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
/* Success: the whole row (logo + text) fades out before removal. */
.chat-msg.tool.chat-tool--leaving {
  animation: chatToolLeave .36s var(--ds-ease-out) forwards;
  pointer-events: none;
}
@keyframes chatToolLeave {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg.tool.tool-running .chat-tool-logo-wrap::after,
  .chat-thinking .chat-tool-logo-wrap::after,
  .chat-activity .chat-tool-logo-wrap::after { animation: none; }
  .chat-tool-char { animation: none; opacity: 1; }
  .chat-msg.tool.chat-tool--leaving { animation: none; }
  .chat-activity__msg--leaving { animation: none; }
  .chat-thinking-reflection-word { opacity: 1 !important; transition: none !important; }
}

/* ---- Chat-mode thinking (live stream + settled disclosure) --------------
   Typography, not chrome. Same column and family as the answer; quieter ink.
   No box, hairline, italic, or loading dots — those read as a terminal widget
   against the unadorned assistant prose. Live CoT is a short glimpse of the
   latest lines, then the same node folds into the label. */
.chat-thinking-details {
  --think-lh: 1.65;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 0 2px;
}
.chat-turn-block > .chat-thinking-details {
  margin-bottom: 8px;
}
.chat-thinking-details-summary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.015em;
  line-height: 1.4;
  color: rgba(232, 230, 225, 0.46);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms var(--ds-ease-out);
}
.chat-thinking-details-summary:hover,
.chat-thinking-details-summary:focus-visible {
  color: rgba(232, 230, 225, 0.72);
  outline: none;
}
.chat-thinking-details.is-live .chat-thinking-details-summary {
  cursor: default;
}
.chat-thinking-caret {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  opacity: 0.38;
  /* Right-pointing mark, parked pointing down as a trailing fold. */
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transition: transform 240ms var(--ds-ease-out), opacity 180ms ease;
}
.chat-thinking-details-summary:hover .chat-thinking-caret,
.chat-thinking-details-summary:focus-visible .chat-thinking-caret {
  opacity: 0.7;
}
.chat-thinking-details.is-open .chat-thinking-caret,
.chat-thinking-details.is-live .chat-thinking-caret {
  opacity: 0.55;
  transform: rotate(-90deg);
}
.chat-thinking-details-label {
  display: inline;
}
.chat-thinking-details.is-live .chat-thinking-details-label {
  animation: chatThinkingBreathe 2.4s ease-in-out infinite;
}
@keyframes chatThinkingBreathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.chat-thinking-dots {
  display: none;
}
.chat-thinking-details-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ds-ease-out);
}
.chat-thinking-details.is-open .chat-thinking-details-panel,
.chat-thinking-details.is-live .chat-thinking-details-panel {
  grid-template-rows: 1fr;
}
.chat-thinking-details-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 2px 0 0;
  border: 0;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: var(--think-lh);
}
.chat-thinking-details.is-live .chat-thinking-details-inner {
  justify-content: flex-end;
  max-height: calc(var(--think-lh) * 6em);
  padding-bottom: 4px;
  /* Latest line stays fully inked. Overflowing older lines ease out at the top. */
  -webkit-mask-image: none;
          mask-image: none;
}
.chat-thinking-details.is-live .chat-thinking-details-inner.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.7em, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 0.7em, #000 100%);
}
.chat-thinking-details.is-open:not(.is-live) .chat-thinking-details-inner {
  max-height: none;
  padding-top: 6px;
  padding-bottom: 2px;
  -webkit-mask-image: none;
          mask-image: none;
}
.chat-thinking-details:not(.is-open):not(.is-live) .chat-thinking-details-inner {
  padding-top: 0;
  padding-bottom: 0;
}
.chat-thinking-reflection,
.chat-thinking-cot {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: var(--think-lh);
  color: rgba(232, 230, 225, 0.40);
  overflow-wrap: anywhere;
}
.chat-thinking-reflection {
  white-space: normal;
}
.chat-thinking-reflection[hidden] { display: none; }
.chat-thinking-cot {
  white-space: pre-wrap;
}
.chat-thinking-details.is-live .chat-thinking-reflection,
.chat-thinking-details.is-live .chat-thinking-cot {
  color: rgba(232, 230, 225, 0.62);
}
.chat-thinking-details.is-open:not(.is-live) .chat-thinking-reflection,
.chat-thinking-details.is-open:not(.is-live) .chat-thinking-cot {
  color: rgba(232, 230, 225, 0.52);
}
.chat-thinking-cot:empty { display: none; }
/* Live turns can settle a thinking disclosure with no chain-of-thought. */
.chat-thinking-details:not(.is-live):has(.chat-thinking-cot:empty):not(:has(.chat-thinking-reflection:not([hidden]))) {
  display: none;
}
.chat-thinking-reflection-word {
  opacity: 0;
  transition: opacity var(--reflection-word-fade-ms, 480ms) ease;
}
.chat-thinking-reflection-word.is-visible {
  opacity: 1;
}
.chat-thinking-label {
  font-family: var(--font-sans);
  font-size: calc(12.5px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
  max-width: min(520px, 72vw);
}
.chat-thinking-label span {
  transition: opacity 0.18s ease-in-out;
}

/* Composer. */
.chat-input {
  position: absolute;
  left: max(var(--chat-rail-gutter), calc((100% - var(--chat-column-width)) / 2));
  transform: none;
  bottom: calc(env(safe-area-inset-bottom) + 90px);
  width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
  max-width: calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end));
  display: none;
  /* Transparent so the composer's translucent "glass" pill reveals the
     conversation scrolling behind it (the pill's own backdrop-blur frosts it).
     #chat extends down behind the composer with a bottom fade mask. */
  background: transparent;
  padding: 10px 0 2px;
}
/* The old solid bg-to-transparent fade is no longer needed now that the chat
   fades via its own bottom mask and the composer is glass. */
.chat-input::before { display: none; }
.mode-chat .chat-input { display: block; }
/* Desktop: stacked Claude-style box (textarea on top, actions in a row below).
   Mobile (.coarse-pointer): single-row pill — textarea + actions side by side.
   Grid overlay: the text field fills the pill interior; the toolbar sits on top
   with pointer-events disabled so taps on the empty area focus the field. */
.chat-pill {
  --live-orb: #7d9aa3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  gap: 0;
  padding: 16px 14px 10px;
  border-radius: 22px;
  cursor: text;
  /* Director "glass": translucent sheen + backdrop blur + hairline + top highlight. */
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  box-shadow: var(--ds-inset-top), 0 8px 32px rgba(0, 0, 0, 0.4);
}
html.coarse-pointer .chat-pill {
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  gap: 6px;
  padding: 8px 8px 8px 20px;
  border-radius: 26px;
}
/* Auto-growing composer (§G): a contenteditable div grows naturally with its
   content from 1 line up to max-height, then scrolls. Using a div
   (not <textarea>) stops iOS Safari from showing the keyboard accessory bar. */
.chat-textfield {
  display: block;
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  max-height: 75vh;           /* grows with typing up to 3/4 of the page, then scrolls */
  padding: 6px 4px 44px;      /* top inset + bottom inset clears the overlaid toolbar */
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* Desktop 14px; mobile messages are 17px (see html.coarse-pointer .chat-msg).
     Input uses 16px on touch to avoid iOS Safari zoom-on-focus. */
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 20px;
  outline: none;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-y: auto;
  -webkit-user-modify: read-write-plaintext-only;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  position: relative;
}
html.coarse-pointer .chat-textfield {
  grid-column: 1;
  grid-row: 1;
  min-height: 40px;
  max-height: 45vh;          /* capped lower on mobile so the keyboard still has room */
  padding: 10px 4px;
  /* Never below 16px: iOS zooms the page when a focused field is smaller. */
  font-size: max(16px, calc(16px * var(--wg-text-scale)));
  line-height: 1.38;
}
/* Placeholder: shown only while the field is empty (toggled by JS, since a
   contenteditable can hold a stray <br> and defeat :empty). Positioned
   absolutely so the ::before box is taken out of the editable's inline flow —
   otherwise WebKit renders the caret at the END of the placeholder text when the
   empty field is focused, making the blinking cursor appear mid-field. */
.chat-textfield.is-empty::before {
  content: attr(data-placeholder);
  color: var(--text-secondary);
  pointer-events: none;
  position: absolute;
  top: 6px;       /* matches .chat-textfield padding-top (desktop) */
  left: 4px;      /* matches .chat-textfield padding-left */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html.coarse-pointer .chat-textfield.is-empty::before {
  top: 10px;      /* matches coarse-pointer .chat-textfield padding-top */
}
.chat-textfield::-webkit-scrollbar { width: 6px; }
.chat-textfield::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.chat-pill-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  grid-column: 1;
  grid-row: 2;
  min-height: 36px;
  padding-top: 8px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
html.coarse-pointer .chat-pill-toolbar {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding-top: 0;
  align-self: center;
}
html.coarse-pointer .chat-pill-toolbar-spacer { display: none; }
.chat-pill-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  pointer-events: auto;
}
.chat-composer-add {
  appearance: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  pointer-events: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chat-composer-add[hidden] { display: none; }
.chat-composer-add:hover,
.chat-composer-add:focus-visible,
.chat-composer-add[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  outline: none;
}
.chat-composer-add svg {
  width: 16px;
  height: 16px;
}
.chat-goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 4px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  pointer-events: auto;
}
.chat-goal-chip[hidden] { display: none; }
.chat-goal-chip-main {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 4px 0 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1;
  cursor: pointer;
  max-width: 220px;
}
.chat-goal-chip-main svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--text-secondary);
}
.chat-goal-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-goal-chip-x {
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chat-goal-chip-x:hover {
  background: rgba(255, 255, 255, 0.2);
}
.composer-add-menu {
  min-width: 260px;
}
.composer-menu-head {
  margin: 0;
  padding: 6px 12px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.composer-menu-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer-menu-copy em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.composer-add-back {
  margin-bottom: 2px;
}
.composer-add-expertise-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow: auto;
}
.composer-add-empty {
  margin: 0;
  padding: 12px 10px;
  color: var(--text-secondary);
  font-size: calc(13px * var(--wg-text-scale));
}
.chat-shared-files-btn,
.chat-working-doc-btn {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  pointer-events: auto;
  cursor: pointer;
}
.chat-shared-files-btn[hidden],
.chat-working-doc-btn[hidden] { display: none; }
.chat-shared-files-btn[aria-expanded="true"],
.chat-shared-files-btn.has-selected,
.chat-working-doc-btn:hover,
.chat-working-doc-btn:focus-visible {
  color: var(--text-primary);
}
.chat-working-doc-btn:focus-visible {
  outline: none;
}
.chat-shared-files-btn svg,
.chat-working-doc-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 5px auto 0;
}
.chat-shared-files-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent, #7da8c9);
  color: #0b1014;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.chat-shared-files-count[hidden] { display: none; }
/* Class doubled to outrank .composer-menu, which is declared later and would
   otherwise restore the glass background. */
.composer-menu.shared-files-panel {
  min-width: min(440px, 92vw);
  max-width: min(560px, 92vw);
  /* Solid rather than the usual composer glass: this panel opens over the
     attachment chips and review banner, not the chat log, and frosted text
     behind a file list is unreadable. */
  background: #14181d;
}
.shared-files-title {
  margin: 2px 10px 8px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.shared-files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
}
.shared-files-row-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.shared-files-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.shared-files-row:hover { background: rgba(255, 255, 255, 0.08); }
.shared-files-row[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.10);
}
.shared-files-row-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.35;
}
.shared-files-row-meta {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  color: var(--text-secondary);
}
/* Sits outside the selectable row so a tap to remove can never read as a tap
   to select. Sized for a finger on the touch surfaces this panel is used on. */
.shared-files-row-x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: calc(18px * var(--wg-text-scale));
  line-height: 1;
  cursor: pointer;
}
.shared-files-row-x:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}
.shared-files-row-x:disabled { opacity: 0.4; cursor: default; }
.shared-files-empty {
  margin: 4px 10px 10px;
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.shared-files-foot {
  margin: 10px 10px 4px;
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.shared-files-panel .confirm-card-attach-btn {
  margin: 8px 10px 2px;
  align-self: flex-start;
}
.chat-compose-chips.has-review {
  padding: 4px 8px 2px;
}
.agent-review-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: #14181d;
}
.agent-review-banner[hidden] { display: none; }
.agent-review-banner.is-working .agent-review-banner-title {
  color: var(--accent, #4ec9b0);
}
.agent-review-banner-copy { flex: 1 1 auto; min-width: 0; }
.agent-review-banner-files {
  margin: 8px 0 0;
  padding: 0 0 0 1.15em;
  list-style: disc;
}
.agent-review-banner-files[hidden] { display: none; }
.agent-review-banner-files li {
  margin: 0.2em 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-primary);
}
.agent-review-banner-title {
  margin: 0;
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-review-banner-sub {
  margin: 10px 0 0;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.agent-review-banner-files:not([hidden]) + .agent-review-banner-sub {
  margin-top: 14px;
}
.agent-review-banner.is-working .agent-review-banner-sub {
  color: var(--accent, #4ec9b0);
  opacity: 0.8;
}
.agent-review-continue,
.agent-review-dismiss {
  appearance: none;
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
}
.agent-review-continue {
  background: rgba(125, 154, 163, 0.9);
  color: #0d1013;
  font-weight: 600;
}
.agent-review-continue[hidden] { display: none; }
.agent-autonomy-offer {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ds-border-hairline-hover);
  background: #14181d;
}
.agent-autonomy-offer[hidden] { display: none; }
.agent-autonomy-offer-ask {
  margin: 0;
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-primary);
}
.agent-autonomy-offer-note {
  margin: 4px 0 0;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.agent-autonomy-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.agent-autonomy-offer-actions[hidden] { display: none; }
.agent-autonomy-yes,
.agent-autonomy-no {
  appearance: none;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
}
.agent-autonomy-yes {
  background: rgba(125, 154, 163, 0.9);
  color: #0d1013;
  font-weight: 600;
}
.agent-autonomy-no {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.chat-msg.chat-autonomous-turn .chat-msg-body {
  opacity: 0.92;
}
.chat-thinking-level-wrap {
  --tl-n: 0;
  --tl-fill: #7d9aa3;
  --tl-thumb: 12px;
  --tl-pad: 4px;
  --tl-shell: 4px;
  --tl-open-w: 168px;
  position: relative;
  flex: 0 0 auto;
  pointer-events: auto;
  z-index: 2;
  height: 28px;
  width: max-content;
  max-width: var(--tl-open-w);
  overflow: visible;
}
.chat-thinking-level-wrap.is-open {
  width: var(--tl-open-w);
}
.chat-thinking-level-wrap.is-ready {
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-thinking-level-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tl-fill) 50%, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.06);
  color: color-mix(in srgb, var(--tl-fill) 78%, var(--text-secondary));
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 16px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 180ms ease;
}
.chat-thinking-level-btn:hover,
.chat-thinking-level-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: color-mix(in srgb, var(--tl-fill) 88%, var(--text-primary));
  outline: none;
}
.chat-thinking-level-wrap.is-open .chat-thinking-level-btn {
  opacity: 0;
  pointer-events: none;
}
.chat-thinking-slider {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: var(--tl-open-w);
  height: 28px;
  padding: var(--tl-shell);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.chat-thinking-level-wrap.is-ready .chat-thinking-slider {
  transition: opacity 180ms ease;
}
.chat-thinking-level-wrap.is-open .chat-thinking-slider {
  opacity: 1;
  pointer-events: auto;
}
.chat-thinking-track {
  position: relative;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  touch-action: none;
}
.chat-thinking-track:focus-visible {
  outline: 2px solid var(--tl-fill);
  outline-offset: 3px;
}
.chat-thinking-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--tl-pad) + var(--tl-thumb) + (100% - var(--tl-thumb) - var(--tl-pad)) * var(--tl-n));
  border-radius: inherit;
  background: var(--tl-fill);
}
.chat-thinking-ticks {
  position: absolute;
  inset: 0 calc(var(--tl-pad) + var(--tl-thumb) / 2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.chat-thinking-ticks i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.chat-thinking-ticks i.on {
  background: rgba(0, 0, 0, 0.22);
}
.chat-thinking-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--tl-pad) + (var(--tl-thumb) / 2) + (100% - var(--tl-thumb) - 2 * var(--tl-pad)) * var(--tl-n));
  width: var(--tl-thumb);
  height: var(--tl-thumb);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
}
.chat-thinking-level-wrap.is-ready .chat-thinking-fill {
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 280ms ease;
}
.chat-thinking-level-wrap.is-ready .chat-thinking-thumb {
  transition: left 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease;
}
.chat-thinking-sparks {
  position: absolute;
  left: var(--tl-spark-x, 0px);
  top: var(--tl-spark-y, 50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.chat-thinking-level-wrap:not(.is-open) .chat-thinking-sparks {
  display: none;
}
.chat-pill:has(.chat-thinking-level-wrap.is-sparking),
.chat-pill-toolbar:has(.chat-thinking-level-wrap.is-sparking) {
  overflow: visible;
}
.chat-thinking-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  margin: 0;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255, 210, 90, 0.7);
  animation: chatThinkingSpark var(--dur, 360ms) linear forwards;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(0) scale(1);
  opacity: 1;
}
.chat-thinking-spark.is-streak {
  width: 1.5px;
  height: var(--len, 7px);
  border-radius: 1px;
  background: linear-gradient(to bottom, #fff 0%, #ffd36a 45%, #e33b32 100%);
  box-shadow: 0 0 5px rgba(255, 180, 70, 0.55);
}
@keyframes chatThinkingSpark {
  to {
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(-1 * var(--d, 18px))) scale(0.15);
    opacity: 0;
  }
}
.chat-thinking-level-wrap.is-dragging .chat-thinking-fill,
.chat-thinking-level-wrap.is-dragging .chat-thinking-thumb {
  transition: none;
}
html.coarse-pointer .chat-thinking-level-wrap,
html.coarse-pointer .chat-thinking-level-btn,
html.coarse-pointer .chat-thinking-slider {
  --tl-shell: 5px;
  --tl-pad: 4px;
  height: 32px;
}
html.coarse-pointer .chat-thinking-level-btn {
  padding: 0 12px;
  min-height: 32px;
}
html.coarse-pointer .chat-thinking-level-wrap.is-open {
  width: max-content;
}
html.coarse-pointer .chat-thinking-slider {
  left: auto;
  right: 0;
}
html.coarse-pointer .chat-pill,
html.coarse-pointer .chat-pill-toolbar {
  overflow: visible;
}

/* ---- Ultra ---------------------------------------------------------------
   Ultra is a pinned mode on a different axis (OpenAI Responses, its own
   pricing), not a hotter Max — so it gets its own row under the track rather
   than a sixth notch on it, and a cool indigo that is deliberately NOT on the
   teal→red THINKING_TONES ramp. The open control grows taller, never wider. */
.chat-thinking-slider {
  /* Auto height so the Ultra row can sit beneath the track. The track keeps an
     explicit height because it can no longer inherit one from the shell. */
  height: auto;
  overflow: visible;
  border-radius: 16px;
}
.chat-thinking-track {
  height: calc(28px - 2 * var(--tl-shell));
  border-radius: 999px;
}
.chat-thinking-ultra-row {
  display: none;
  margin-top: var(--tl-shell);
  padding-top: var(--tl-shell);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.chat-thinking-level-wrap.is-open .chat-thinking-ultra-row {
  display: flex;
  justify-content: center;
}
.chat-thinking-ultra {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  opacity: 0.72;
}
.chat-thinking-ultra:hover {
  opacity: 1;
}
.chat-thinking-ultra.on {
  opacity: 1;
  color: #fff;
  border-color: color-mix(in srgb, var(--ultra-accent) 62%, transparent);
  background: color-mix(in srgb, var(--ultra-accent) 26%, transparent);
}
.chat-thinking-ultra:focus-visible {
  outline: 2px solid var(--ultra-accent);
  outline-offset: 1px;
}
html.coarse-pointer .chat-thinking-slider {
  height: auto;
}
html.coarse-pointer .chat-thinking-track {
  height: calc(32px - 2 * var(--tl-shell));
}
html.coarse-pointer .chat-thinking-ultra {
  padding: 7px 10px;
}

/* The Message Wholegrain box itself changes in Ultra — the badge alone is too
   quiet for a mode this expensive. */
.chat-pill.is-ultra {
  position: relative; /* anchors the ::after ring below */
  border-color: color-mix(in srgb, var(--ultra-accent) 46%, transparent);
  box-shadow:
    var(--ds-inset-top),
    inset 0 0 24px color-mix(in srgb, var(--ultra-accent) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ultra-accent) 18%, transparent);
}
.chat-thinking-level-wrap.is-ultra .chat-thinking-level-label {
  color: color-mix(in srgb, var(--ultra-accent) 72%, #fff);
}
/* Ultra's own pulse; Max keeps its sparks. */
.chat-pill.is-ultra::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--ultra-accent) 30%, transparent);
  animation: chatUltraBreathe 4.2s ease-in-out infinite;
}
@keyframes chatUltraBreathe {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.7; }
}

/* Mid-turn clarification cards (Ultra ask_principal). Same glass as the
   question deck, indigo hairline so it reads as Ultra's surface. */
.chat-clarify-dock .chat-qa {
  border-color: color-mix(in srgb, var(--ultra-accent) 34%, var(--ds-border-hairline-hover));
}
.chat-qa-lead {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ultra-accent) 60%, var(--text-secondary));
}
.chat-clarify-dock .chat-flag.is-answered {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .chat-pill.is-ultra::after { animation: none; opacity: 0.4; }
  .chat-thinking-level-wrap.is-ready,
  .chat-thinking-level-wrap.is-ready .chat-thinking-slider,
  .chat-thinking-level-wrap.is-ready .chat-thinking-fill,
  .chat-thinking-level-wrap.is-ready .chat-thinking-thumb,
  .chat-thinking-level-btn {
    transition: none;
  }
  .chat-thinking-spark { display: none; }
}
.chat-pill-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-pill-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  cursor: default;
}

/* Row wrapping the composer pill (legacy slot for an unused "+" button). */
.composer-row { display: block; }

/* Composer "+" — retained in the DOM for backwards compatibility but hidden;
   quick actions live in the top-left collapsible rail on all viewports. */
.composer-plus { display: none; }

/* Quick-actions popover, anchored above the composer (ChatGPT-style). */
.composer-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% - 4px);
  z-index: 6;
  min-width: 230px;
  max-width: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 18px;
  /* Director glass popover: frosted surface so the conversation reads behind it. */
  background: var(--ds-overlay-bg);
  border: 1px solid var(--ds-border-hairline-hover);
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  box-shadow:
    var(--ds-inset-top),
    0 18px 44px -16px rgba(0, 0, 0, 0.95);
  transform-origin: bottom left;
  animation: composerMenuIn .16s ease;
}
.composer-menu[hidden] { display: none; }
@keyframes composerMenuIn {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.composer-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(15px * var(--wg-text-scale));
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
/* Author `display: flex` overrides UA [hidden]{display:none}. */
.composer-menu-item[hidden] { display: none !important; }
.composer-menu-item:hover { background: rgba(255, 255, 255, 0.08); }
.composer-menu-item:active { background: rgba(255, 255, 255, 0.12); }
.composer-menu-item svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  pointer-events: none;
}
.composer-menu-item > span { pointer-events: none; }
/* Dictate (speech-to-text into the field): quiet icon button; accent + soft
   pulse while listening. Hidden entirely when the browser can't dictate. */
.chat-dictate {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease-out), color var(--ds-duration-fast) var(--ds-ease-out), transform .12s var(--ds-ease-out);
}
.chat-dictate:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.chat-dictate:active { transform: scale(.92); }
.chat-dictate[hidden] { display: none; }
.chat-dictate[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  animation: dictatePulse 1.6s ease-in-out infinite;
}
@keyframes dictatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}
/* The filled circle at the far right: Use Voice when the field is empty, Send
   (up arrow) once there's text — light fill + dark glyph, per the reference. */
.chat-send,
.chat-voice {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--text-primary);
  color: #0f1114;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s var(--ds-ease-out), opacity var(--ds-duration-normal) var(--ds-ease-out), background var(--ds-duration-fast) var(--ds-ease-out);
}
.chat-send:hover,
.chat-voice:hover { background: #ffffff; }
.chat-send:active,
.chat-voice:active { transform: scale(.92); }
.chat-send:disabled { opacity: .4; cursor: default; }
.chat-send[hidden],
.chat-voice[hidden] { display: none; }
.chat-send svg,
.chat-voice svg { width: 20px; height: 20px; }

/* Stop: the filled circle becomes a stop button while the MD is generating.
   Grey disc + dark square glyph, replacing the white Send/Voice circle so a
   running turn can be aborted. */
.chat-stop {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #8a8f98;
  color: #0f1114;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s var(--ds-ease-out), background var(--ds-duration-fast) var(--ds-ease-out);
}
.chat-stop:hover { background: #757b85; }
.chat-stop:active { transform: scale(.92); }
.chat-stop[hidden] { display: none; }
.chat-stop svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .chat-stop:active { transform: none; }
}

/* Voice-mode waveform: the bars dance as an equalizer on hover/focus. Each line
   scales about its own centre, staggered, for a lively "listening" feel. */
.chat-voice svg line {
  transform-box: fill-box;
  transform-origin: center;
}
.chat-voice:hover svg line,
.chat-voice:focus-visible svg line {
  animation: voiceBars .9s ease-in-out infinite;
}
.chat-voice:hover svg line:nth-child(1),
.chat-voice:focus-visible svg line:nth-child(1) { animation-delay: 0s; }
.chat-voice:hover svg line:nth-child(2),
.chat-voice:focus-visible svg line:nth-child(2) { animation-delay: .15s; }
.chat-voice:hover svg line:nth-child(3),
.chat-voice:focus-visible svg line:nth-child(3) { animation-delay: .3s; }
.chat-voice:hover svg line:nth-child(4),
.chat-voice:focus-visible svg line:nth-child(4) { animation-delay: .45s; }
@keyframes voiceBars {
  0%, 100% { transform: scaleY(.5); }
  50%      { transform: scaleY(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-voice:hover svg line,
  .chat-voice:focus-visible svg line { animation: none; }
}

.chat-pill.is-live-session .chat-dictate,
.live-mode-chip {
  display: none !important;
}
.chat-voice.is-live,
.chat-voice.is-live:hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: transparent;
  background:
    radial-gradient(circle at 50% 46%,
      color-mix(in srgb, var(--live-orb) 16%, #16171b) 0%,
      #0c0d10 72%,
      #09090b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 -4px 7px rgba(0, 0, 0, .35);
}
.chat-voice.is-live > svg { opacity: 0; }
.chat-voice-live-orb {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.chat-voice.is-live .chat-voice-live-orb { display: block; }
.chat-voice.is-live.is-live-busy .chat-voice-live-orb { opacity: .28; }
.chat-voice-stop-glyph {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: 2.5px;
  background: rgba(15, 17, 20, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.chat-voice.is-live.is-live-busy .chat-voice-stop-glyph { display: block; }
.chat-voice-live-close {
  display: none;
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  color: #16181c;
  box-shadow: 0 0 0 1px rgba(15, 17, 20, 0.16), 0 1px 2px rgba(0, 0, 0, 0.28);
  place-items: center;
  pointer-events: none;
}
.chat-voice-live-close svg {
  width: 8px;
  height: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .chat-voice.is-live:hover,
  .chat-voice.is-live:focus-visible {
    overflow: visible;
  }
  .chat-voice.is-live:hover .chat-voice-live-close,
  .chat-voice.is-live:focus-visible .chat-voice-live-close {
    display: grid;
  }
}
.chat-voice.is-live.is-live-busy .chat-voice-live-close { display: none; }
/* Live uses a canvas geodesic; suppress the composer tooltip so hover
   can show the close affordance instead of a floating label. */
.chat-pill-actions .chat-voice.is-live[data-tip]::after,
.chat-pill-actions .chat-voice.is-live[data-tip]:hover::after,
.chat-pill-actions .chat-voice.is-live[data-tip]:focus-visible::after {
  content: none;
}
.chat-voice.live-confirming { outline: 2px solid #d4a017; }
.chat-voice.live-error { background: #8a3030; }
.chat-voice.live-standby { opacity: .72; }
.chat-voice.is-live[disabled] { opacity: .4; cursor: not-allowed; }

.thread-chips,
.live-caption {
  display: none !important;
}
.chat-show-all-bar {
  display: flex;
  justify-content: flex-start;
  padding: 10px 16px 0;
}
.chat-show-all-bar[hidden] { display: none !important; }
html:not(.live-md-threads) .chat-thread-tag,
html:not(.live-md-threads) .chat-show-all-bar {
  display: none !important;
}
.chat-show-all {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #fff);
  font: 600 12px/1.2 inherit;
  cursor: pointer;
}
.chat-show-all:hover,
.chat-show-all:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
.thread-chip {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  font: 500 12px/1.2 inherit;
  background: rgba(255,255,255,.06);
  color: var(--text-secondary, #c8c6c2);
  cursor: pointer;
}
.thread-chip[aria-pressed="true"] { background: rgba(255,255,255,.14); color: var(--text-primary, #fff); }
.thread-chip-running { padding-right: 22px; position: relative; }
.thread-chip-spin {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: threadChipSpin .8s linear infinite;
}
@keyframes threadChipSpin {
  to { transform: rotate(360deg); }
}
.thread-chip-done-unseen { box-shadow: 0 0 0 1px rgba(212,160,23,.7); }
.chat-thread-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0 2px 5px;
  color: var(--text-secondary);
  font: 600 11px/1.3 inherit;
  letter-spacing: 0.01em;
}
.chat-thread-tag-name,
.chat-thread-tag-edit {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}
.chat-thread-tag-name {
  text-align: inherit;
}
.chat-thread-tag-name:hover,
.chat-thread-tag-name:focus-visible,
.chat-thread-tag-edit:hover,
.chat-thread-tag-edit:focus-visible {
  color: var(--text-primary, #fff);
  outline: none;
}
.chat-thread-tag-name:hover,
.chat-thread-tag-name:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chat-thread-tag-edit {
  display: inline-flex;
  align-items: center;
  opacity: .55;
  border-radius: 4px;
}
.chat-thread-tag-edit:hover,
.chat-thread-tag-edit:focus-visible {
  opacity: 1;
}
.chat-thread-tag-input {
  appearance: none;
  min-width: 8ch;
  max-width: 22ch;
  margin: 0;
  padding: 1px 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary, #fff);
  font: inherit;
  letter-spacing: inherit;
}
.chat-msg.user .chat-thread-tag { align-self: flex-end; }
.chat-msg.assistant .chat-thread-tag { align-self: flex-start; }
.chat-heard {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .65;
}
.chat-heard[open] { opacity: .9; }
.live-caption {
  display: none !important;
}
.live-mode-chip,
.live-harness-btn {
  font-size: 11px;
  opacity: .7;
  margin-right: 6px;
}
.live-harness-btn {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.live-harness {
  position: fixed;
  right: 12px;
  bottom: 88px;
  width: min(320px, 92vw);
  max-height: 50vh;
  overflow: auto;
  background: #16181c;
  color: #eee;
  border-radius: 12px;
  padding: 10px;
  z-index: 80;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.live-harness-list { display: flex; flex-wrap: wrap; gap: 6px; }
.live-harness-item {
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  background: #2a2e34;
  color: inherit;
  cursor: pointer;
}
.live-harness-log {
  margin: 8px 0 0;
  font-size: 11px;
  white-space: pre-wrap;
  opacity: .8;
}

/* Lightweight tooltips for the composer action buttons (data-tip). */
.chat-pill-actions button { position: relative; }
.chat-pill-actions button[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(20, 22, 26, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  z-index: 8;
}
.chat-pill-actions button[data-tip]:hover::after,
.chat-pill-actions button[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
  .chat-pill-actions button[data-tip]::after { content: none; }
}

.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.confirm-card.director-intake-card {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  align-self: stretch;
  position: relative;
  z-index: 1;
  background: #14181d;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.director-intake-card[hidden] { display: none; }
.director-intake-card .confirm-card-rows {
  gap: 8px;
  margin-bottom: 14px;
}
.director-intake-card .confirm-card-row {
  align-items: flex-start;
}
.director-intake-card .confirm-card-row .cc-k {
  padding-top: 8px;
}
.director-intake-card .director-intake-files-row .cc-k {
  padding-top: 7px;
}
.director-intake-card .confirm-card-input {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.1);
}
.director-intake-card .confirm-card-input.is-needed {
  border-color: rgba(232, 160, 160, 0.7);
}
.director-intake-use-row {
  position: relative;
}
.director-intake-use {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.director-intake-use-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.director-intake-use-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.28);
}
.director-intake-use-btn[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-soft, var(--accent));
}
.director-intake-use-btn:disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
.director-intake-use-btn:disabled:hover {
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
}
.director-intake-use-value {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.director-intake-files-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  max-height: min(28vh, 168px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.director-intake-files {
  display: contents;
}
.director-intake-files .confirm-card-chip-name {
  max-width: min(280px, 58vw);
}
.director-intake-files .confirm-card-chip.is-uploading {
  opacity: 0.7;
}
.director-intake-files .confirm-card-chip.is-error {
  border-color: rgba(232, 160, 160, 0.45);
  color: #e8a0a0;
}
.director-intake-card .confirm-card-attach-btn {
  flex: 0 0 auto;
}
.director-intake-warn {
  margin: -8px 0 14px 84px;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 18px;
  color: #e8a0a0;
}
.director-intake-warn[hidden] { display: none; }
.chat-compose-chips.has-intake {
  z-index: 12;
  isolation: isolate;
}
/* Centred with auto margins rather than translateX(-50%): a transform here would
   make this the containing block for the inbox strip's fixed reading pane, which
   then resolves its viewport insets against this tiny box and collapses to a line. */
.chat-compose-chips {
  position: absolute;
  left: max(var(--chat-rail-gutter), calc((100% - var(--chat-column-width)) / 2));
  right: auto;
  margin-inline: 0;
  bottom: calc(env(safe-area-inset-bottom) + 142px);
  width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
  max-width: calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end));
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* Above the composer (z-index 4) so chips are never tucked behind its box. */
  z-index: 5;
}
.mode-chat .chat-compose-chips { display: flex; }

/* Floating scroll-to-bottom (Claude-style): centred above the composer. */
.chat-scroll-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
              background 150ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
              color 150ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-scroll-bottom[hidden] { display: none; }
.chat-scroll-bottom:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(-50%) translateY(-1px);
  color: rgba(255, 255, 255, 0.95);
}
.chat-scroll-bottom:active {
  transform: translateX(-50%) translateY(0);
}
.chat-scroll-bottom svg {
  width: 18px;
  height: 18px;
}
.chat-reply-context {
  width: 100%;
}
.chat-reply-context[hidden] { display: none; }
/* Armed reply context. The teal left rail is the same one the armed inbox row
   carries, so the bar reads as that row's continuation down at the composer. */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 7px 8px 7px 11px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-hairline);
  background: var(--ds-surface-2);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  box-shadow: inset 2px 0 0 var(--accent);
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.chat-reply-bar-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-reply-bar-label strong {
  font-weight: 500;
  color: var(--text-primary);
}
.chat-reply-bar-sep { opacity: 0.5; }
.chat-reply-bar-snippet { opacity: 0.85; }
.chat-reply-bar-dismiss {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1;
  display: grid;
  place-items: center;
  transition:
    color var(--ds-duration-fast) var(--ds-ease-out),
    border-color var(--ds-duration-fast) var(--ds-ease-out),
    background var(--ds-duration-fast) var(--ds-ease-out);
}
.chat-reply-bar-dismiss:hover {
  border-color: var(--ds-border-hairline-hover);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

/* Open project's request feed, above the composer. Deliberately NOT built from
   the pill/chip language used by the reply and in-progress rows either side of
   it: a feed of many rows reads as noise once every row carries its own fill,
   border and shadow. It uses the Director design-system primitives instead —
   flat translucent surface, hairline dividers, status carried by a single dot,
   and the teal accent spent only on what still needs the principal. */
.chat-inbox-strip {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-inbox-strip[hidden] { display: none; }
/* Expanded: one opaque panel so chat text does not read through, and a
   brighter border + soft lift so the strip leaves the page plane. */
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) {
  gap: 0;
  border-radius: var(--ds-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(22, 24, 28, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
          backdrop-filter: blur(20px) saturate(1.1);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 2px 0 0 var(--accent);
  overflow: hidden;
}
/* Keep the panel's rail the same colour as the header's while items await, so
   the open panel doesn't read half-red half-teal down its left edge. */
.chat-inbox-strip.has-pending:has(.chat-inbox-list:not([hidden])) {
  border-color: rgba(var(--end-red-rgb), 0.3);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 2px 0 0 var(--end-red);
}
/* Full reading: leave the chip stack and fill the column above the composer
   (and the reply-context bar). The open message body becomes the scrollport. */
.chat-inbox-strip.is-reading-expanded {
  position: fixed;
  left: max(
    var(--chat-rail-gutter),
    calc((100vw - min(var(--chat-column-max), calc(100vw - var(--chat-rail-gutter) - var(--chat-rail-end)))) / 2)
  );
  transform: none;
  top: calc(env(safe-area-inset-top) + 64px);
  bottom: calc(
    var(--chat-kb-offset, 0px) +
    var(--chat-input-height, var(--chat-composer-reserve, 120px)) +
    72px
  );
  width: min(var(--chat-column-max), 92vw);
  z-index: 7;
  max-height: none;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.mode-chat .chat-inbox-strip.is-reading-expanded {
  /* Match the compose column on desktop; mobile inherits the fixed chips width. */
  width: min(var(--chat-column-max), calc(100vw - var(--chat-rail-gutter) - var(--chat-rail-end)));
}
html.coarse-pointer.mode-chat .chat-inbox-strip.is-reading-expanded {
  bottom: calc(
    var(--chat-kb-offset, 0px) +
    var(--chat-mobile-gap, 14px) +
    var(--chat-input-height, var(--chat-composer-reserve-mobile, 120px)) +
    72px
  );
}
html.coarse-pointer.mode-chat.chat-kb-open .chat-inbox-strip.is-reading-expanded {
  bottom: calc(
    var(--chat-kb-offset, 0px) +
    6px +
    var(--chat-input-height, var(--chat-composer-reserve-mobile, 120px)) +
    72px
  );
}
/* Split: sit in the chat pane's column, clear of the icon rail. */
body.md-split-open .chat-inbox-strip.is-reading-expanded {
  left: max(var(--chat-rail-gutter), calc((var(--md-split-chat-w) - var(--chat-column-width)) / 2));
  transform: none;
  width: min(var(--chat-column-max), calc(var(--md-split-chat-w) - var(--chat-rail-gutter) - var(--chat-rail-end)));
}
/* Companion float: stay inside the floating chat window. */
body.md-companion-open:not(.md-split-open) .chat-inbox-strip.is-reading-expanded {
  left: calc(var(--md-float-x) + (var(--md-float-w) * 0.5));
  transform: translateX(-50%);
  width: min(560px, calc(var(--md-float-w) - 40px));
  top: calc(var(--md-float-y) + 48px);
  bottom: calc(
    100dvh - var(--md-float-y) - var(--md-float-h) +
    var(--chat-input-height, 110px) + 64px
  );
}
.chat-inbox-strip.is-reading-expanded .chat-inbox-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-inbox-strip.is-reading-expanded .chat-inbox-item.is-selected {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 10px;
}
.chat-inbox-strip.is-reading-expanded .chat-inbox-item-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  margin-left: 15px;
  margin-right: 4px;
}
.chat-inbox-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-hairline-hover);
  /* Opaque enough to read as its own surface above the conversation, which the
     old translucent fill lost against a busy chat log. */
  background: rgba(26, 29, 34, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  font-size: calc(12.5px * var(--wg-text-scale));
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--ds-duration-fast) var(--ds-ease-out),
    color var(--ds-duration-fast) var(--ds-ease-out),
    background var(--ds-duration-fast) var(--ds-ease-out);
  -webkit-appearance: none;
          appearance: none;
}
.chat-inbox-summary:hover {
  border-color: var(--ds-border-hairline-hover);
  color: var(--text-primary);
}
/* Anything awaiting an answer: red rail + warm tint so the row reads as a
   waiting queue rather than another piece of composer chrome. */
.chat-inbox-strip.has-pending .chat-inbox-summary {
  border-color: rgba(var(--end-red-rgb), 0.42);
  background:
    linear-gradient(90deg, rgba(var(--end-red-rgb), 0.1), rgba(var(--end-red-rgb), 0) 55%),
    rgba(30, 26, 27, 0.95);
  box-shadow:
    inset 3px 0 0 var(--end-red),
    0 4px 16px rgba(0, 0, 0, 0.34);
  color: var(--text-primary);
}
.chat-inbox-strip.has-pending .chat-inbox-summary:hover {
  border-color: rgba(var(--end-red-rgb), 0.6);
}
/* Inside the elevated panel the summary is a header row, not its own card. */
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) .chat-inbox-summary {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  padding: 9px 12px;
}
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) .chat-inbox-summary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.chat-inbox-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  opacity: 0.55;
  transition: transform var(--ds-duration-fast) var(--ds-ease-out);
}
.chat-inbox-chevron svg { width: 12px; height: 12px; }
.chat-inbox-summary[aria-expanded="true"] .chat-inbox-chevron {
  transform: rotate(90deg);
  opacity: 0.9;
  color: var(--accent);
}
.chat-inbox-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
/* Count, not a chip: a red dot does the attention-getting. */
.chat-inbox-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(11.5px * var(--wg-text-scale));
  font-weight: 500;
  color: rgba(245, 190, 192, 0.92);
  font-variant-numeric: tabular-nums;
}
.chat-inbox-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--end-red);
  box-shadow: 0 0 0 3px rgba(var(--end-red-rgb), 0.18);
  animation: chat-inbox-pulse 2.4s var(--ds-ease-out) infinite;
}
@keyframes chat-inbox-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--end-red-rgb), 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--end-red-rgb), 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-inbox-badge::before { animation: none; }
}
.chat-inbox-badge[hidden] { display: none; }
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) .chat-inbox-badge {
  color: rgba(245, 190, 192, 0.86);
}

.chat-inbox-list {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-hairline);
  background: var(--ds-surface-2);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  -webkit-overflow-scrolling: touch;
}
/* An open message needs room — the old 260px list cap was clipping the body
   before its own scroll could engage. */
.chat-inbox-list:has(.is-selected) {
  max-height: min(620px, 68vh);
}
/* List borrows the strip's frame when expanded — no second border or fill. */
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) .chat-inbox-list {
  border: none;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.chat-inbox-list::-webkit-scrollbar { width: 8px; }
.chat-inbox-list::-webkit-scrollbar-track { background: transparent; }
.chat-inbox-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}
.chat-inbox-list[hidden] { display: none; }
.chat-inbox-empty {
  padding: 12px 12px;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
/* Rows are separated by hairlines rather than each being its own filled card. */
.chat-inbox-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 9px 11px;
  border-top: 1px solid var(--ds-border-hairline);
  transition: background var(--ds-duration-fast) var(--ds-ease-out);
}
.chat-inbox-item:first-child { border-top: none; }
.chat-inbox-item:hover { background: rgba(255, 255, 255, 0.022); }
.chat-inbox-item.is-selected { background: rgba(255, 255, 255, 0.04); }
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) .chat-inbox-item {
  border-top-color: rgba(255, 255, 255, 0.08);
  padding: 10px 12px;
}
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) .chat-inbox-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.chat-inbox-strip:has(.chat-inbox-list:not([hidden])) .chat-inbox-item.is-selected {
  background: rgba(255, 255, 255, 0.06);
}
.chat-inbox-item.is-replying {
  background: rgba(var(--accent-rgb), 0.07);
  box-shadow: inset 2px 0 0 var(--accent);
}
.chat-inbox-item-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
}
/* Status, as one dot: teal while it still needs an answer, inert otherwise. */
.chat-inbox-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
/* Red = still awaiting your answer. Teal stays reserved for the row you are
   actively replying to (.is-replying), so the two states never blur together. */
.chat-inbox-item[data-status="pending"] .chat-inbox-dot {
  background: var(--end-red);
  box-shadow: 0 0 0 3px rgba(var(--end-red-rgb), 0.15);
}
.chat-inbox-item[data-status="expired"] .chat-inbox-dot {
  background: rgba(255, 255, 255, 0.12);
}
.chat-inbox-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.chat-inbox-item-main:disabled { cursor: default; }
.chat-inbox-item-subject {
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1.35;
  color: rgba(232, 230, 225, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
/* Unanswered reads as "unread": brighter and heavier than settled traffic. */
.chat-inbox-item[data-status="pending"] .chat-inbox-item-subject {
  color: var(--text-primary);
  font-weight: 500;
}
.chat-inbox-item[data-status="expired"] .chat-inbox-item-subject {
  color: rgba(232, 230, 225, 0.45);
}
.chat-inbox-item-main:not(:disabled):hover .chat-inbox-item-subject {
  color: #fff;
}
.chat-inbox-item-meta {
  font-size: calc(11px * var(--wg-text-scale));
  line-height: 1.35;
  color: var(--text-secondary);
  opacity: 0.8;
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
.chat-inbox-item-expand {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color var(--ds-duration-fast) var(--ds-ease-out),
    border-color var(--ds-duration-fast) var(--ds-ease-out),
    background var(--ds-duration-fast) var(--ds-ease-out);
  -webkit-appearance: none;
          appearance: none;
}
.chat-inbox-item-expand svg { width: 15px; height: 15px; }
.chat-inbox-item-expand:hover {
  border-color: var(--ds-border-hairline-hover);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.chat-inbox-item-expand[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.chat-inbox-item-body {
  margin: 8px 0 2px 15px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--ds-border-hairline);
  background: rgba(255, 255, 255, 0.02);
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1.55;
  color: rgba(232, 230, 225, 0.88);
  white-space: pre-wrap;
  word-break: break-word;
  /* Tall enough for a real reply; the list cap above used to win at 260px. */
  max-height: min(480px, 52vh);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.chat-inbox-item-body::-webkit-scrollbar { width: 8px; }
.chat-inbox-item-body::-webkit-scrollbar-track { background: transparent; }
.chat-inbox-item-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}
/* Rendered markdown: drop pre-wrap so block elements lay out normally. */
.chat-inbox-item-body--md {
  white-space: normal;
}
.chat-inbox-item-body--md > :first-child { margin-top: 0; }
.chat-inbox-item-body--md > :last-child { margin-bottom: 0; }
.chat-inbox-item-body--md p { margin: 0 0 0.7em; }
.chat-inbox-item-body--md ul,
.chat-inbox-item-body--md ol {
  margin: 0.35em 0 0.7em;
  padding-left: 1.3em;
}
.chat-inbox-item-body--md li { margin: 0.15em 0; }
.chat-inbox-item-body--md h1,
.chat-inbox-item-body--md h2,
.chat-inbox-item-body--md h3,
.chat-inbox-item-body--md h4 {
  margin: 0.85em 0 0.4em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.chat-inbox-item-body--md h1 { font-size: 1.15em; }
.chat-inbox-item-body--md h2 { font-size: 1.08em; }
.chat-inbox-item-body--md h3,
.chat-inbox-item-body--md h4 { font-size: 1em; }
.chat-inbox-item-body--md strong,
.chat-inbox-item-body--md b {
  font-weight: 650;
  color: var(--text-primary);
}
.chat-inbox-item-body--md em,
.chat-inbox-item-body--md i { font-style: italic; }
.chat-inbox-item-body--md code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.chat-inbox-item-body--md pre {
  margin: 0.5em 0 0.75em;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
}
.chat-inbox-item-body--md pre code {
  padding: 0;
  background: none;
  font-size: 0.9em;
}
.chat-inbox-item-body--md a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
}
.chat-inbox-item-body--md a:hover { border-bottom-color: var(--accent); }
.chat-inbox-item-body--md blockquote {
  margin: 0.5em 0 0.75em;
  padding: 0.15em 0 0.15em 0.85em;
  border-left: 2px solid rgba(var(--accent-rgb), 0.45);
  color: rgba(232, 230, 225, 0.72);
}
.chat-inbox-item-body--md hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.85em 0;
}
.chat-inbox-item-body--md table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0 0.75em;
  font-size: 0.95em;
  display: block;
  overflow-x: auto;
}
.chat-inbox-item-body--md th,
.chat-inbox-item-body--md td {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
.chat-inbox-item-body--md th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
}

.chat-in-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-in-progress[hidden] { display: none; }
.chat-in-progress-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
}
.chat-in-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 7px 8px 7px 10px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-hairline);
  background: var(--ds-surface-2);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.chat-in-progress-row.is-running .chat-in-progress-spinner {
  animation: tool-spin 1.1s linear infinite;
}
.chat-in-progress-row.is-awaiting-credits {
  border-color: color-mix(in srgb, var(--accent-warn, #c47) 35%, var(--border-subtle, #333));
  flex-wrap: wrap;
}
.chat-in-progress-extends {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.chat-in-progress-budget {
  flex: 0 0 auto;
  font-size: 0.92em;
  opacity: 0.85;
  white-space: nowrap;
}
.chat-in-progress-continue {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.92em;
  padding: 0.15em 0.55em;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: inherit;
  cursor: pointer;
}
.chat-in-progress-continue:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.chat-in-progress-spinner {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
}
.chat-in-progress-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-in-progress-label strong {
  font-weight: 500;
  color: var(--text-primary);
}
.chat-in-progress-detail {
  flex: 0 1 auto;
  max-width: 36%;
  display: block;
  font-size: calc(11px * var(--wg-text-scale));
  opacity: 0.78;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-in-progress-elapsed {
  flex: 0 0 auto;
  font-size: calc(11px * var(--wg-text-scale));
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
  letter-spacing: 0.01em;
}
.chat-in-progress-watch-btn,
.chat-in-progress-cancel {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: calc(11px * var(--wg-text-scale));
  padding: 3px 9px;
  transition:
    color var(--ds-duration-fast) var(--ds-ease-out),
    border-color var(--ds-duration-fast) var(--ds-ease-out),
    background var(--ds-duration-fast) var(--ds-ease-out);
}
.chat-in-progress-row:hover .chat-in-progress-watch-btn,
.chat-in-progress-row:hover .chat-in-progress-cancel {
  border-color: var(--ds-border-hairline-hover);
  color: var(--text-primary);
}
.chat-in-progress-watch-btn:hover,
.chat-in-progress-cancel:hover {
  border-color: var(--ds-border-hairline-hover);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.chat-in-progress-watch-btn.is-open,
.chat-in-progress-watch-btn[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text-primary);
}
.chat-in-progress-watch {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s cubic-bezier(.4, 0, .2, 1);
  margin-top: 0;
}
.chat-in-progress-watch.is-open {
  grid-template-rows: 1fr;
  margin-top: 4px;
}
.chat-in-progress-watch-inner {
  min-height: 0;
  overflow: hidden;
}
.chat-in-progress-watch.is-open .chat-in-progress-watch-inner {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-hairline);
  background: var(--ds-surface-2);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
          backdrop-filter: blur(var(--ds-glass-blur));
}
.chat-in-progress-watch-list {
  max-height: 140px;
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.chat-in-progress-watch.is-open .chat-in-progress-watch-list {
  padding: 8px 12px;
}
.chat-in-progress-watch-step {
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.35;
  color: var(--text-primary);
  opacity: 0.82;
  padding: 2px 0;
  animation: chat-in-progress-step-in .28s ease-out;
}
.chat-in-progress-watch-step.is-empty,
.chat-in-progress-watch-step.is-status {
  opacity: 0.55;
  font-style: italic;
  animation: none;
}
@keyframes chat-in-progress-step-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 0.82; transform: none; }
}

.chat-in-progress-anchor {
  margin: 0 0 6px;
  font-size: calc(12px * var(--wg-text-scale));
  opacity: 0.82;
}
.chat-in-progress-anchor-btn {
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}

.mode-chat .chat-attachments { display: flex; }
.chat-attachments[hidden] { display: none; }
.chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  /* Solid, slightly lighter than the composer pill (#26292e) so the chip reads
     clearly against the chat behind it; a soft shadow lifts it off the page. */
  background: #31363d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
  font-size: calc(12.5px * var(--wg-text-scale));
  color: var(--text-primary);
}
.chat-chip.is-uploading { opacity: 0.7; }
.chat-chip.is-error { border-color: rgba(220, 120, 110, 0.6); color: #e8a0a0; }
.chat-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip-status { font-size: calc(11px * var(--wg-text-scale)); color: var(--text-secondary); }
.chat-chip-x {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  cursor: pointer;
  font-size: calc(13px * var(--wg-text-scale)); line-height: 1;
  display: grid; place-items: center;
}
.chat-chip-x:hover { background: rgba(255, 255, 255, 0.22); }

/* Inline image attachment bubble in the chat log (shared/captured photos). */
.chat-msg.chat-attachment {
  padding: 6px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 20px;
}
.chat-attachment-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-attachment-thumb {
  display: block;
  max-width: 220px;
  max-height: 220px;
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.chat-attachment-name {
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Images embedded in a rendered File Note (object modal / chat markdown). */
.note-attachment {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
  border-radius: 10px;
}

/* Transcription File Note destination picker. */
.file-note-hint {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 20px;
}
.file-note-label {
  display: block;
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: .08em;
  text-transform: uppercase;
}
.file-note-input {
  width: 100%;
  min-height: 44px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  /* Never below 16px: iOS zooms the page when a focused input is smaller. */
  font-size: max(16px, calc(16px * var(--wg-text-scale)));
  line-height: 1.38;
  font-family: var(--font-sans);
  outline: none;
}
.file-note-input:focus { border-color: rgba(var(--accent-rgb), 0.62); }
.file-note-projects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(48vh, 420px);
  overflow-y: auto;
  padding-right: 2px;
}
.file-note-project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.file-note-project:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.file-note-project:disabled { opacity: .55; cursor: default; }
.file-note-project-title { font-size: calc(15px * var(--wg-text-scale)); font-weight: 500; }
.file-note-project-sub {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
}
.file-note-status {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: calc(13px * var(--wg-text-scale));
}

/* ---- Full-stage drag-and-drop overlay (chat + voice) ---- */
.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(6, 18, 16, 0.66);
  backdrop-filter: blur(2px);
  pointer-events: none; /* purely visual; the window drop handler does the work */
}
.drop-overlay[hidden] { display: none; }
.drop-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 44px;
  border-radius: 20px;
  border: 2px dashed rgba(var(--accent-rgb), 0.6);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
.drop-overlay-card svg { width: 36px; height: 36px; color: var(--accent); }
.drop-overlay-text { font-size: calc(15px * var(--wg-text-scale)); }

/* Full-page recovery after the live session dies and re-mint fails. Covers a
   blank stage (common when returning from background) until the user taps. */
.disconnect-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 24px) 28px calc(env(safe-area-inset-bottom) + 24px);
  background:
    radial-gradient(circle at 50% 42%, var(--bg-1) 0%, var(--bg-0) 70%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.disconnect-overlay[hidden] { display: none !important; }
.disconnect-overlay-text {
  margin: 0;
  max-width: 22em;
  text-align: center;
  font-family: var(--font-sans);
  font-size: calc(18px * var(--wg-text-scale));
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

/* Transient "setting up…" overlay (e.g. when the transcription button is tapped).
   Fades in/out; purely informational so it never blocks the underlying UI. */
.prep-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.prep-overlay.show { opacity: 1; }
.prep-overlay.prep-overlay-blocking {
  z-index: 80;
  pointer-events: auto;
}
.prep-overlay[hidden] { display: none; }
.prep-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  color: var(--text-primary);
}
.prep-overlay-text {
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Playful loader: a dot hops between three "holes" (o   o   o). */
.prep-hop {
  --hop-gap: 34px;
  position: relative;
  width: calc(var(--hop-gap) * 2 + 10px);
  height: 26px;
}
.prep-hop-hole {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.45);
}
.prep-hop-hole:nth-child(1) { left: 0; }
.prep-hop-hole:nth-child(2) { left: var(--hop-gap); }
.prep-hop-hole:nth-child(3) { left: calc(var(--hop-gap) * 2); }
.prep-hop-dot {
  position: absolute;
  left: 1px;
  bottom: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
  animation: prep-hop-x 3.6s cubic-bezier(.45, 0, .55, 1) infinite,
             prep-hop-y 0.9s ease-in-out infinite;
}
@keyframes prep-hop-x {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(var(--hop-gap)); }
  50%  { transform: translateX(calc(var(--hop-gap) * 2)); }
  75%  { transform: translateX(var(--hop-gap)); }
  100% { transform: translateX(0); }
}
@keyframes prep-hop-y {
  0%, 100% { bottom: 1px; }
  50%      { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .prep-hop-dot { animation: none; }
}

/* ==========================================================================
   Dynamic object cards (§C2) — scannable, clickable entity cards surfaced from
   tool results. Used both inline in the chat log and in the voice objects panel.
   ========================================================================== */

/* ---- Compact object row (v8 §A/§D) ---- */
/* A collapsed object is one quiet line that reads like an inline note: a small
   icon + title + optional one muted micro-fact + chevron. No border/fill/rail by
   default; a faint hover background is the only chrome. Click the line body to
   expand the indented detail below. The ↗ opens directly (stopPropagation). */
.object-row { position: relative; width: 100%; margin: 0; }

.object-row-line {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 32px;                 /* quiet line, not a 44px block */
  padding: 5px 30px 5px 6px;        /* right pad leaves room for ↗ / chevron */
  border: 0;
  border-radius: 8px;
  background: transparent;          /* NO block fill */
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background .14s ease;
}
.object-row-line:hover { background: rgba(255, 255, 255, 0.05); }   /* faint only */
.object-row-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.or-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  display: inline-grid;
  place-items: center;
}
.or-icon svg { width: 16px; height: 16px; }

.or-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 18px;
  font-weight: 450;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.or-fact, .or-meta-msg {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  line-height: 16px;
  color: var(--text-secondary);
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
}
.or-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--text-secondary);
  opacity: .5;
  display: inline-grid;
  place-items: center;
}
.or-chevron svg { width: 14px; height: 14px; transition: transform .2s ease; }
.object-row.expanded .or-chevron svg { transform: rotate(180deg); }
/* A whole-open line's trailing ↗ glyph never rotates. */
.or-open-glyph svg { transition: none; }

/* Direct-open ↗ — a SIBLING of the toggle button, right-aligned, never nested. */
.or-open {
  position: absolute;
  top: 4px;
  right: 2px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  opacity: .55;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: opacity .14s ease, color .14s ease, background .14s ease;
}
.or-open svg { width: 15px; height: 15px; }
.object-row:hover .or-open, .or-open:hover { opacity: 1; color: var(--accent); }
.or-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* When ↗ present, the chevron shifts left so they don't stack. */
.object-row:has(.or-open) .object-row-line { padding-right: 54px; }

/* Expandable detail — animated via grid-rows (reduced-motion safe below). */
.object-detail {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .22s cubic-bezier(.4, 0, .2, 1);
}
.object-row.expanded .object-detail {
  grid-template-rows: 1fr;
  overflow: visible;
}
.object-detail > .od-inner { min-height: 0; }
.od-inner { padding: 2px 8px 8px 31px; }   /* indent under the icon */
/* The grid `0fr` collapse can't shrink the inner's vertical PADDING, leaving a
   ~10px ghost sliver of the detail under a collapsed row. Zero the top/bottom
   padding while collapsed so it closes fully. */
.object-row:not(.expanded) .od-inner { padding-top: 0; padding-bottom: 0; }
.od-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: calc(11.5px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.od-body {
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 19px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Plain meta row (a <span>) inside .od-meta. */
.oc-meta-row {
  opacity: .8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
/* An openable meta row (e.g. the transcript-count row) — clickable, with its own
   ↗ affordance, opens the modal independent of the row's expand toggle. */
.object-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 1px 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: calc(11.5px * var(--wg-text-scale));
  line-height: 16px;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background .16s ease, border-color .16s ease;
}
.object-meta-link:hover { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.5); }
.object-meta-link:active { transform: scale(.97); }
.object-meta-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-meta-link .oml-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.object-meta-link .oml-arrow { width: 12px; height: 12px; flex: 0 0 auto; }

/* Message rows: the one type that keeps a faint direction rail. */
.object-row--message .object-row-line { border-left: 2px solid transparent; padding-left: 8px; }
.object-row--message[data-dir="in"]  .object-row-line { border-left-color: var(--accent); }
.object-row--message[data-dir="out"] .object-row-line { border-left-color: var(--text-secondary); }
.object-row--message[data-dir="in"]  .or-icon { color: var(--accent); }

/* ---- Per-transcript selectable list (§B) — a tidy menu of openable lines ---- */
.od-transcripts { margin-top: 8px; }
.od-transcripts-head, .od-transcripts-empty, .od-transcripts-loading {
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--wg-text-scale));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: .65;
  margin-bottom: 4px;
}
.od-transcripts-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: none;
  letter-spacing: 0;
}
.transcript-line {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background .14s ease;
}
.transcript-line:hover { background: rgba(var(--accent-rgb), 0.08); }
.transcript-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-email {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(13px * var(--wg-text-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-when {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  opacity: .75;
}
.tl-arrow {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--text-secondary);
  opacity: .6;
}
.transcript-line:hover .tl-arrow { opacity: 1; color: var(--accent); }

/* "+N more" footer chip (non-interactive). */
.object-more {
  align-self: flex-start;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: calc(11.5px * var(--wg-text-scale));
  color: var(--text-secondary);
  opacity: .7;
}

/* ---- Cards inline in the chat log (chat mode) ---- */
.chat-objects {
  align-self: flex-start;
  width: 100%;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 4px;
  animation: chat-in .2s ease;
}
.chat-spec {
  align-self: flex-start;
  width: 100%;
  max-width: min(560px, 92%);
  margin: 4px 0 8px;
  animation: chat-in .2s ease;
}

/* ---- Voice-mode data panel (UI Spec charts/KPIs) ------------------------ */
.data-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 104px);
  width: min(560px, 90vw);
  max-height: min(42vh, 320px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(78, 201, 176, 0.2);
  border-radius: 16px;
  background: rgba(22, 25, 30, 0.82);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
}
.data-panel.show { opacity: 1; }
.data-panel.show ~ .captions { opacity: 0; pointer-events: none; }
.data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 8px 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.data-title {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.data-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.data-nav-label {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: .06em;
  color: var(--text-secondary);
  min-width: 3.2em;
  text-align: center;
}
.data-nav,
.data-copy,
.data-dismiss,
.panel-expand {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.data-nav:hover,
.data-copy:hover,
.data-dismiss:hover,
.panel-expand:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.data-nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.data-nav svg,
.data-copy svg,
.data-dismiss svg,
.panel-expand svg { width: 15px; height: 15px; }
.panel-expand .icon-collapse { display: none; }
.panel-expand[aria-pressed="true"] .icon-expand { display: none; }
.panel-expand[aria-pressed="true"] .icon-collapse { display: block; }
.data-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.data-body::-webkit-scrollbar { width: 6px; }
.data-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.data-slide {
  flex-shrink: 0;
  scroll-margin-top: 8px;
  border-radius: 12px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .2s ease;
}
.data-slide.is-active { outline-color: rgba(78, 201, 176, 0.45); }
.data-slide-label {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(209, 213, 219, 0.45);
  margin-bottom: 8px;
}
.data-slide-mount { min-height: 0; }
.data-panel[hidden] { display: none !important; }

/* Full-screen voice panels (Data + References) */
.data-panel.voice-panel-expanded,
.objects-panel.voice-panel-expanded {
  position: fixed;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  transform: none;
  border-radius: 0;
  z-index: 45;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing: border-box;
}
.data-panel.voice-panel-expanded .data-body,
.objects-panel.voice-panel-expanded .objects-stack {
  flex: 1;
  min-height: 0;
  max-height: none;
}
.data-panel.voice-panel-expanded.show ~ .captions,
.objects-panel.voice-panel-expanded.show ~ .captions {
  opacity: 0;
  pointer-events: none;
}
/* Expanded panel above the other when both are open */
.data-panel.voice-panel-expanded { z-index: 46; }
.objects-panel.voice-panel-expanded { z-index: 46; }

/* ---- Voice-mode objects panel — below the orb / above the controls ---- */
.objects-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Sits between the tool-activity (~55%) and the controls; above the captions
     band. The scrollable stack keeps it from overlapping either. */
  bottom: calc(env(safe-area-inset-bottom) + 104px);
  width: min(440px, 90vw);
  max-height: 34vh;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(22, 25, 30, 0.78);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
}
.objects-panel.show { opacity: 1; }
/* The objects panel and captions share the lower band; when the (opaque) panel
   is up, suppress the captions beneath it so they don't collide. (objects-panel
   precedes .captions in the DOM, so the general-sibling selector reaches it.) */
.objects-panel.show ~ .captions { opacity: 0; pointer-events: none; }
.objects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 8px 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.objects-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.objects-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.objects-title {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.experimental-badge {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-sans, inherit);
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  vertical-align: 1px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-soft);
}
.objects-dismiss,
.objects-toolbar .panel-expand {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.objects-dismiss:hover,
.objects-toolbar .panel-expand:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.objects-dismiss svg,
.objects-toolbar .panel-expand svg { width: 15px; height: 15px; }
.objects-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.objects-stack::-webkit-scrollbar { width: 6px; }
.objects-stack::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

/* A drafted email / event card is taller than the 34vh peek. Grow the panel,
   sit above the left tool rail, and keep Send / Draft / Discard on screen. */
.objects-panel.has-confirm:not(.voice-panel-expanded) {
  max-height: min(64vh, calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 128px));
  z-index: 8;
}
@media (max-width: 520px) {
  html.coarse-pointer .objects-panel:not(.voice-panel-expanded) {
    width: min(440px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 76px));
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    transform: none;
  }
  html.coarse-pointer.mode-chat .objects-panel:not(.voice-panel-expanded) {
    width: min(var(--chat-column-max), calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
.objects-panel:not(.voice-panel-expanded) .confirm-card-body-edit {
  height: 22vh;
  min-height: 88px;
  max-height: 28vh;
}
.objects-panel .confirm-card-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex-wrap: wrap;
  margin: 0 -6px -4px;
  padding: 10px 6px 4px;
  background: linear-gradient(180deg, rgba(18, 21, 26, 0) 0%, rgba(16, 20, 24, 0.96) 38%);
}

/* ---- Voice-mode recent references (subtle chip strip) ------------------- */
/* Openable entities from recent tool calls — vertical rail, upper-right. */
.voice-refs {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10vh);
  right: calc(env(safe-area-inset-right) + 14px);
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  max-width: min(240px, 38vw);
  max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10vh - 128px);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.voice-refs.show {
  opacity: 1;
  pointer-events: auto;
}
.voice-refs[hidden] { display: none !important; }
.voice-refs-track {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 0;
  max-height: inherit;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.voice-refs-track::-webkit-scrollbar { display: none; }
.voice-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: min(220px, 38vw);
  min-height: 30px;
  padding: 4px 11px 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(18, 21, 26, 0.62);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.2;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.voice-ref-chip:hover {
  border-color: rgba(78, 201, 176, 0.35);
  background: rgba(22, 28, 32, 0.78);
  color: var(--text-primary);
}
.voice-ref-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.voice-ref-chip .vrc-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  display: inline-grid;
  place-items: center;
}
.voice-ref-chip .vrc-icon svg { width: 14px; height: 14px; }
.voice-ref-chip .vrc-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 450;
}
.voice-ref-chip .vrc-arrow {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: .45;
  color: var(--text-secondary);
}
.voice-ref-chip .vrc-arrow svg { width: 12px; height: 12px; }
.voice-ref-chip:hover .vrc-arrow { opacity: .9; color: var(--accent); }

/* ---- Recent / Watches toggles (atop the chip rail) -------------------- */
/* Shared pill styling for the voice-mode Recent and Watches entry points. */
.voice-history-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(18, 21, 26, 0.72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.voice-history-toggle[hidden] { display: none !important; }
.voice-history-toggle:hover {
  border-color: rgba(78, 201, 176, 0.4);
  color: var(--text-primary);
}
.voice-history-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voice-history-toggle[aria-expanded="true"] {
  border-color: rgba(78, 201, 176, 0.5);
  color: var(--accent);
}
.voice-history-toggle .vht-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(78, 201, 176, 0.18);
  color: var(--accent);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: 0;
}
.voice-history-toggle .vht-count[hidden] { display: none; }
.voice-schedule-toggle .vht-count--active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}
.voice-schedule-toggle .vht-count--alert {
  background: rgba(255, 120, 90, 0.22);
  color: #ffb4ab;
}
html.coarse-pointer .voice-schedule-toggle .vht-label { display: none; }
html.coarse-pointer .voice-schedule-toggle.has-alert .vht-count--active { display: none !important; }
html.coarse-pointer .voice-schedule-toggle .vht-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---- Recent history panel ----------------------------------------------- */
/* Reuses .objects-panel chrome (positioning, head, show transition, fullscreen).
   Sits above the references panel when both happen to be open. */
.history-panel { z-index: 7; }
/* Chat: lift Recent / Watches above the glass composer (+50px over the voice default). */
.mode-chat .history-panel {
  bottom: calc(env(safe-area-inset-bottom) + 154px);
}
/* Chat-mode detail panels (Schedule, Top of mind, Recent, Watches): match the
   composer column and give the stack a taller reading area than the voice peek. */
.mode-chat .objects-panel:not(.voice-panel-expanded) {
  left: max(var(--chat-rail-gutter), calc((100% - var(--chat-column-width)) / 2));
  transform: none;
  width: var(--chat-column-width);
  max-width: calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end));
  min-height: min(48vh, calc(100svh - env(safe-area-inset-top) - 220px));
  max-height: min(64vh, calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 176px));
}
html.coarse-pointer.mode-chat .history-panel {
  bottom: calc(var(--chat-kb-offset, 0px) + var(--chat-mobile-gap, 14px) + var(--chat-composer-reserve-mobile) + 50px);
}
html.coarse-pointer.mode-chat.chat-kb-open .history-panel {
  bottom: calc(var(--chat-kb-offset, 0px) + 6px + var(--chat-composer-reserve-mobile) + 50px);
}
/* The Recent panel is shared with chat; only the voice-rail toggle is voice-only. */
.mode-chat .voice-history-toggle { display: none !important; }

/* ---- Director Watches panel ------------------------------------------- */
.objects-empty {
  margin: 0;
  padding: 8px 2px;
  color: var(--text-secondary);
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1.45;
}
.watch-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.watch-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.watch-card-title {
  font-weight: 600;
  font-size: calc(13.5px * var(--wg-text-scale));
  letter-spacing: .01em;
}
.watch-stop {
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: calc(11.5px * var(--wg-text-scale));
  font-weight: 600;
  color: #ffb4ab;
  background: rgba(255, 90, 80, 0.14);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.watch-stop:hover { background: rgba(255, 90, 80, 0.24); }
.watch-stop:active { transform: scale(0.96); }
.watch-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.4;
}
.watch-meta dt { color: var(--text-secondary); font-weight: 550; }
.watch-meta dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.watch-activity {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.watch-activity-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  font-size: calc(11.5px * var(--wg-text-scale));
  line-height: 1.4;
}
.watch-activity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.watch-activity-outcome { font-weight: 600; color: var(--text-secondary); }
.watch-activity-at {
  flex-shrink: 0;
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  opacity: 0.85;
  white-space: nowrap;
}
.watch-outcome-answered .watch-activity-outcome { color: #8fdca0; }
.watch-outcome-escalated .watch-activity-outcome { color: #ffd27d; }
.watch-outcome-skipped_out_of_scope .watch-activity-outcome { color: var(--text-secondary); }
.watch-activity-subject { color: var(--text-primary); }
.watch-activity-text { color: var(--text-secondary); }
.watch-activity-empty { color: var(--text-secondary); background: none; padding-left: 0; }

/* ---- Top of mind panel ------------------------------------------------ */
.estimate-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.estimate-card-disabled {
  opacity: 0.92;
}
.chat-estimate-open.is-off,
.voice-history-toggle.is-off {
  opacity: 0.55;
}
.estimate-card-kicker {
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.estimate-card-title {
  font-weight: 600;
  font-size: calc(13.5px * var(--wg-text-scale));
}
.estimate-intent-text {
  margin: 0;
  white-space: pre-wrap;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.45;
}
.estimate-md {
  white-space: normal;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.5;
  color: var(--text-primary);
}
.estimate-md > :first-child { margin-top: 0; }
.estimate-md > :last-child { margin-bottom: 0; }
.estimate-md p { margin: 0 0 0.7em; }
.estimate-md ul,
.estimate-md ol {
  margin: 0.25em 0 0.7em;
  padding-left: 1.25em;
}
.estimate-md li { margin: 0.18em 0; }
.estimate-md h1,
.estimate-md h2,
.estimate-md h3,
.estimate-md h4 {
  margin: 0.55em 0 0.3em;
  line-height: 1.25;
  font-size: 1em;
  font-weight: 650;
}
.estimate-md strong { font-weight: 650; }
.estimate-md em { font-style: italic; }
.estimate-md a {
  color: rgb(var(--accent-rgb));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.estimate-md-secondary {
  color: var(--text-secondary);
  font-size: calc(12px * var(--wg-text-scale));
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.estimate-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: calc(10.5px * var(--wg-text-scale));
  font-weight: 650;
  background: rgba(255, 210, 125, 0.16);
  color: #ffd27d;
}
.estimate-badge.ok {
  background: rgba(143, 220, 160, 0.16);
  color: #8fdca0;
}
.estimate-badge.chase {
  background: rgba(125, 190, 255, 0.16);
  color: #9ecbff;
}
.estimate-badge.escalate {
  background: rgba(255, 140, 125, 0.18);
  color: #ffb0a4;
}
.estimate-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.estimate-line:first-of-type { border-top: none; padding-top: 0; }
.estimate-line-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.estimate-line-title { font-weight: 600; }
.estimate-line-meta {
  color: var(--text-secondary);
  font-size: calc(11.5px * var(--wg-text-scale));
}
.estimate-line-assess {
  color: var(--text-primary);
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1.4;
}
.estimate-line.estimate-arrive,
.estimate-card.estimate-arrive,
.estimate-md.estimate-arrive {
  animation: estimate-arrive 480ms ease-out;
}
.estimate-card.is-sensing {
  animation: estimate-sensing-card 2.2s ease-in-out infinite;
}
.estimate-fade-out {
  animation: estimate-fade-out 180ms ease forwards;
}
.estimate-fade-in {
  animation: estimate-fade-in 420ms ease;
}
.estimate-rank-flash {
  color: var(--accent);
  transition: color 640ms ease;
}
@keyframes estimate-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes estimate-fade-out {
  to {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-3px);
  }
}
@keyframes estimate-fade-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
@keyframes estimate-sensing-card {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(var(--accent-rgb), 0.16),
      0 0 14px rgba(var(--accent-rgb), 0.05);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(var(--accent-rgb), 0.34),
      0 0 22px rgba(var(--accent-rgb), 0.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .estimate-line.estimate-arrive,
  .estimate-card.estimate-arrive,
  .estimate-md.estimate-arrive,
  .estimate-card.is-sensing,
  .estimate-fade-out,
  .estimate-fade-in {
    animation: none;
  }
}
.estimate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.estimate-actions button,
.estimate-grade-btn {
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: calc(11.5px * var(--wg-text-scale));
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.estimate-actions button:hover,
.estimate-grade-btn:hover { background: rgba(255, 255, 255, 0.14); }
.estimate-contract-input,
.estimate-intent-input {
  width: 100%;
  min-height: 64px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
  padding: 8px;
  font: inherit;
  font-size: calc(12.5px * var(--wg-text-scale));
}
.estimate-scorecard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: calc(12px * var(--wg-text-scale));
}
.estimate-scorecard dt { color: var(--text-secondary); }
.estimate-scorecard dd { margin: 0; }
.chat-estimate-brief {
  margin: 8px 12px 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.chat-estimate-brief-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.chat-estimate-brief-head h4,
.chat-estimate-brief h4 {
  margin: 0 0 6px;
  font-size: calc(13px * var(--wg-text-scale));
}
.chat-estimate-brief-head h4 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.chat-estimate-brief-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin: -4px -6px -4px auto;
}
.chat-estimate-brief-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary, rgba(232, 230, 225, 0.72));
  font-family: var(--font-sans);
  font-size: 0;
  line-height: 0;
  text-align: center;
  opacity: 0.7;
  cursor: pointer;
}
.chat-estimate-brief-btn::before,
.chat-estimate-brief-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
}
.chat-estimate-brief-min::before,
.chat-estimate-brief-close::before,
.chat-estimate-brief-close::after {
  width: 10px;
  height: 2px;
}
.chat-estimate-brief-min::after {
  width: 2px;
  height: 10px;
}
.chat-estimate-brief-min::before,
.chat-estimate-brief-min::after {
  transform: translate(-50%, -50%);
}
.chat-estimate-brief:not(.is-minimized) .chat-estimate-brief-min::after {
  display: none;
}
.chat-estimate-brief-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.chat-estimate-brief-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.chat-estimate-brief-btn:hover,
.chat-estimate-brief-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #e8e6e1);
  opacity: 1;
  outline: none;
}
.chat-estimate-brief.is-minimized {
  padding-top: 10px;
  padding-bottom: 10px;
}
.chat-estimate-brief.is-minimized .chat-estimate-brief-head {
  margin-bottom: 0;
}
.chat-estimate-brief.is-minimized .chat-estimate-brief-body {
  display: none;
}
.chat-estimate-brief p { margin: 0 0 8px; line-height: 1.45; }
.chat-estimate-brief .estimate-md { font-size: calc(13px * var(--wg-text-scale)); }

/* ---- Schedule panel --------------------------------------------------- */
.schedule-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.schedule-card.has-unseen {
  box-shadow: 0 0 0 1px rgba(78, 201, 176, 0.45);
}
.schedule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.schedule-card-title {
  font-weight: 600;
  font-size: calc(13.5px * var(--wg-text-scale));
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.schedule-audience-tag {
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
}
.schedule-audience-tag.is-agent { color: #b9c6ff; background: rgba(120, 140, 255, 0.14); }
.schedule-unseen-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #4ec9b0);
  flex-shrink: 0;
}
.schedule-unseen-dot--reported { background: #ff8a73; }
.schedule-meta .is-reported { color: #ffb4ab; font-weight: 600; }
.schedule-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.schedule-act {
  border: none;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: calc(11.5px * var(--wg-text-scale));
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.schedule-act:hover { background: rgba(255, 255, 255, 0.13); }
.schedule-act:active { transform: scale(0.96); }
.schedule-act.danger { color: #ffb4ab; background: rgba(255, 90, 80, 0.14); }
.schedule-act.danger:hover { background: rgba(255, 90, 80, 0.24); }
.schedule-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.4;
}
.schedule-meta dt { color: var(--text-secondary); font-weight: 550; }
.schedule-meta dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.schedule-meta dd.is-unseen { color: var(--accent, #4ec9b0); font-weight: 600; }
.schedule-task {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  font-size: calc(11.5px * var(--wg-text-scale));
  line-height: 1.4;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.schedule-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.schedule-form-row { display: flex; flex-direction: column; gap: 3px; }
.schedule-form-row label {
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-secondary);
}
.schedule-form input, .schedule-form textarea, .schedule-form select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(12.5px * var(--wg-text-scale));
  padding: 7px 9px;
  outline: none;
}
.schedule-form textarea { resize: vertical; min-height: 54px; }
.schedule-form input:focus, .schedule-form textarea:focus, .schedule-form select:focus {
  border-color: var(--accent, #4ec9b0);
}
.schedule-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.schedule-form-actions button {
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.schedule-form-actions button:active { transform: scale(0.97); }
.schedule-form-actions .schedule-cancel { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.schedule-form-actions .schedule-cancel:hover { background: rgba(255, 255, 255, 0.14); }
.schedule-form-actions .schedule-save { background: var(--accent, #4ec9b0); color: #07140f; }
.schedule-form-actions .schedule-save:hover { filter: brightness(1.08); }
.schedule-form-actions .schedule-save:disabled { opacity: 0.5; cursor: default; }
.schedule-form-warn {
  margin: 0;
  font-size: calc(11px * var(--wg-text-scale));
  line-height: 1.4;
  color: #ffd27d;
}
.history-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}
.history-empty {
  margin: 0;
  padding: 6px 2px;
  color: var(--text-secondary);
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1.45;
}
.history-group { display: flex; flex-direction: column; gap: 4px; }
.history-group-head {
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 550;
  letter-spacing: .01em;
  color: var(--text-secondary);
  padding: 2px 2px 0;
}
.history-group-body { display: flex; flex-direction: column; gap: 3px; }
.history-subgroup {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.history-subgroup-head {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: .85;
  padding: 2px 0 0;
}
.history-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .14s ease, background .14s ease;
}
.history-item:hover {
  border-color: rgba(78, 201, 176, 0.3);
  background: rgba(22, 28, 32, 0.85);
}
.history-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.history-item .hi-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--text-secondary);
  display: inline-grid;
  place-items: center;
}
.history-item .hi-icon svg { width: 15px; height: 15px; }
.history-item .hi-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.history-item .hi-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 450;
}
.history-item .hi-context {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  opacity: .8;
}
.history-item .hi-arrow {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  opacity: .4;
  color: var(--text-secondary);
}
.history-item .hi-arrow svg { width: 13px; height: 13px; }
.history-item:hover .hi-arrow { opacity: .9; color: var(--accent); }
.history-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.history-clear {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: .06em;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .14s ease, background .14s ease;
}
.history-clear:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.history-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.history-find {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 0;
}
.history-search-label { display: block; }
.history-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.3;
  padding: 8px 10px;
}
.history-search::placeholder { color: var(--text-secondary); opacity: .75; }
.history-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.history-origin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.history-origin-chip {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.history-origin-chip:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.history-origin-chip.is-active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}
.history-origin-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.history-draft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.history-draft-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-draft-kicker {
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.history-draft-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: calc(13px * var(--wg-text-scale));
}
.history-draft-open {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
  padding: 4px 2px;
}

.history-panel .history-stack:has(.notes-scrub-layout) {
  overflow: hidden;
}
.notes-scrub-layout {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-height: 140px;
  flex: 1 1 auto;
}
.notes-scrub {
  flex: 0 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 0;
  touch-action: none;
  cursor: ns-resize;
}
.notes-dash-gap {
  flex: 0 0 8px;
  width: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin: 2px 0 4px;
}
.notes-dash {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  flex: 0 0 auto;
  transition: width .12s ease, background .12s ease, height .12s ease;
}
.notes-dash.is-pin {
  width: 12px;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.42);
}
.notes-dash.is-active,
.notes-dash:hover,
.notes-dash:focus-visible {
  width: 20px;
  background: #fff;
}
.notes-dash:focus-visible { outline: none; }

.notes-peek {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.notes-peek-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(18, 20, 24, 0.92);
  color: inherit;
  padding: 14px 14px 12px;
  min-height: 132px;
}
.notes-peek-card:hover { border-color: rgba(255, 255, 255, 0.16); }
.notes-peek-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.notes-peek-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notes-peek-title {
  font-family: var(--font-sans);
  font-size: calc(16px * var(--wg-text-scale));
  font-weight: 550;
  color: #fff;
  line-height: 1.25;
}
.notes-peek-body {
  margin: 0;
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notes-peek-meta {
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.notes-peek-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.notes-icon-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.notes-icon-btn svg { width: 15px; height: 15px; }
.notes-icon-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.notes-icon-btn.is-pinned { color: var(--accent); }
.notes-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.notes-list-row.is-pinned .hi-title::before,
.history-item.is-pinned .hi-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.history-item .hi-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.notes-list-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.notes-list-row .history-item {
  width: auto;
  flex: 1 1 auto;
}

/* ==========================================================================
   Object modal (§C2) — full-screen on-brand sheet for opened content.
   ========================================================================== */
.object-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  opacity: 0;
  transition: opacity .2s ease;
}
.object-modal.show { opacity: 1; }
/* CRITICAL: an author `display:` declaration overrides the UA [hidden]{display:none},
   so without this a CLOSED modal/panel stays laid out — invisible (opacity:0) but
   still on top, intercepting every click (it was blocking the Start button). Make
   the [hidden] attribute authoritative again. */
.object-modal[hidden],
.objects-panel[hidden] { display: none !important; }
.object-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.object-modal-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: min(720px, 100%);
  max-width: calc(100vw - 32px);
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.object-modal-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-border-hairline-hover);
  border-radius: 18px;
  /* Director frosted overlay: translucent sheet + heavy backdrop blur. */
  background: var(--ds-overlay-bg);
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95), var(--ds-inset-top);
  overflow: hidden;
  transform: translateY(8px) scale(.99);
  transition: transform .22s var(--ds-ease-out);
}
.object-modal.show .object-modal-sheet { transform: translateY(0) scale(1); }
.object-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  overflow: visible;
}
.object-modal-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* Shown only when this document is covering a project in the docked pane. */
.object-modal-pane-back {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.object-modal-pane-back[hidden] {
  display: none;
}
.object-modal-pane-back svg {
  width: 16px;
  height: 16px;
}
.object-modal-pane-back:hover {
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.95);
}
.object-modal-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: calc(20px * var(--wg-text-scale));
  font-weight: 500;
  line-height: 26px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Document window title — site sans, small-caps, wide tracking. */
.object-modal-headline .object-modal-title {
  font-family: var(--font-site-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.58);
}
.object-modal-copy-wrap,
.object-modal-share-wrap,
.object-modal-meeting-wrap,
.object-modal-zoom {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}
.object-modal-zoom {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.object-modal-zoom-btn,
.object-modal-zoom-label {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.object-modal-zoom-btn {
  width: 30px;
  min-width: 30px;
  height: 40px;
}
.object-modal-zoom-btn svg { width: 14px; height: 14px; }
.object-modal-zoom-label {
  min-width: 40px;
  height: 40px;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  line-height: 14px;
  letter-spacing: 0.01em;
  color: rgba(242, 239, 232, 0.78);
}
.object-modal-zoom-btn:hover,
.object-modal-zoom-label:hover { background: rgba(255, 255, 255, 0.12); }
.object-modal-zoom-btn:active,
.object-modal-zoom-label:active { transform: scale(.92); }
.object-modal-zoom-btn:focus-visible,
.object-modal-zoom-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.object-modal-zoom-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}
.object-modal-zoom[hidden] { display: none !important; }

.object-modal-find {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.object-modal-find[hidden] { display: none !important; }
.object-modal-find-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.object-modal-find-toggle svg { width: 17px; height: 17px; }
.object-modal-find-toggle:hover,
.object-modal-find.is-open .object-modal-find-toggle {
  background: rgba(255, 255, 255, 0.12);
}
.object-modal-find-toggle:active { transform: scale(.92); }
.object-modal-find-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.object-modal-find-chip {
  display: none;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-right: 6px;
}
.object-modal-find.is-open .object-modal-find-chip { display: flex; }
.object-modal-find-input {
  appearance: none;
  -webkit-appearance: none;
  width: 148px;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font: inherit;
  font-size: calc(12px * var(--wg-text-scale));
  padding: 5px 9px;
}
.object-modal-find-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.75;
}
.object-modal-find-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55);
}
.object-modal-find-count {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.object-modal-find.is-empty .object-modal-find-count {
  color: var(--danger, #e0715f);
}
.object-modal-find-step {
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  line-height: 1;
  padding: 4px 5px;
  cursor: pointer;
}
.object-modal-find-step:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.object-modal-find-step:disabled {
  opacity: 0.35;
  cursor: default;
}

::highlight(artifact-find) {
  background-color: rgba(var(--accent-rgb), 0.28);
  color: inherit;
}
::highlight(artifact-find-current) {
  background-color: rgb(var(--accent-rgb));
  color: #0d1013;
}
.object-md mark.af-hit,
.object-text mark.af-hit {
  background: rgba(var(--accent-rgb), 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.object-md mark.af-hit.is-current,
.object-text mark.af-hit.is-current {
  background: rgb(var(--accent-rgb));
  color: #0d1013;
}

.object-modal-find-rail {
  position: absolute;
  top: 10px;
  right: 2px;
  bottom: 10px;
  width: 8px;
  z-index: 4;
  pointer-events: none;
}
.object-modal-find-rail[hidden] { display: none !important; }
.object-modal-find-rail.has-matches { pointer-events: auto; }
.object-modal-find-rail-track {
  position: relative;
  height: 100%;
  width: 100%;
}
.object-modal-find-rail-tick {
  position: absolute;
  left: 1px;
  right: 1px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: rgba(var(--accent-rgb), 0.45);
  cursor: pointer;
  transform: translateY(-50%);
}
.object-modal-find-rail-tick.is-current {
  background: rgb(var(--accent-rgb));
  height: 3px;
}
.object-modal-find-rail-tick:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

.object-modal-copy-wrap {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  overflow: visible;
}
.object-modal-copy-btn,
.object-modal-copy-menu {
  width: auto;
  min-width: 0;
  height: 40px;
  border-radius: 0;
  background: transparent;
}
.object-modal-copy-btn {
  width: 36px;
  min-width: 36px;
  border-radius: 10px 0 0 10px;
}
.object-modal-copy-menu {
  width: 22px;
  min-width: 22px;
  border-radius: 0 10px 10px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.object-modal-copy-menu svg { width: 12px; height: 12px; opacity: 0.85; }
.object-modal-copy-btn:hover,
.object-modal-copy-menu:hover,
.object-modal-copy-wrap.is-open .object-modal-copy-menu {
  background: rgba(255, 255, 255, 0.12);
}
.object-modal-copy-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 24, 28, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.object-modal-copy-dropdown[hidden] { display: none !important; }
.object-modal-copy-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 16px;
  text-align: left;
  cursor: pointer;
}
.object-modal-copy-option:hover,
.object-modal-copy-option:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
.object-modal-copy-wrap[hidden],
.object-modal-share-wrap[hidden],
.object-modal-meeting-wrap[hidden],
.object-modal-zoom[hidden],
.object-modal-find[hidden] { display: none !important; }
.object-modal-copy-btn,
.object-modal-copy-menu,
.object-modal-share,
.object-modal-meeting,
.object-modal-download {
  flex: 0 0 auto;
  border: none;
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.object-modal-share,
.object-modal-meeting,
.object-modal-download {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.object-modal-copy-btn:hover,
.object-modal-share:hover,
.object-modal-meeting:hover,
.object-modal-download:hover { background: rgba(255, 255, 255, 0.16); }
.object-modal-copy-btn:active,
.object-modal-share:active,
.object-modal-meeting:active,
.object-modal-download:active { transform: scale(.92); }
.object-modal-copy-btn:focus-visible,
.object-modal-copy-menu:focus-visible,
.object-modal-share:focus-visible,
.object-modal-meeting:focus-visible,
.object-modal-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-copy-btn svg,
.object-modal-share svg,
.object-modal-meeting svg,
.object-modal-download svg { width: 17px; height: 17px; }
.object-modal-download[hidden] { display: none !important; }
.object-modal-share[aria-expanded="true"],
.object-modal-meeting[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
.object-modal-share-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 3;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 24, 28, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.object-modal-share-popover[hidden] { display: none !important; }
.object-modal-share-lead {
  margin: 0 0 12px;
  font-family: var(--font-site-sans, var(--font-sans));
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 16px;
  color: rgba(242, 239, 232, 0.62);
}
.object-modal-share-form {
  display: grid;
  gap: 8px;
}
.object-modal-share-email,
.object-modal-share-expires,
.object-modal-share-url {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
}
.object-modal-share-submit,
.object-modal-share-copy-url {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--accent);
  color: #0b0c0e;
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  cursor: pointer;
}
.object-modal-share-submit:disabled { opacity: 0.5; cursor: default; }
.object-modal-share-created {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}
.object-modal-share-status {
  margin: 8px 0 0;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 16px;
  color: rgba(242, 239, 232, 0.72);
}
.object-modal-share-status.is-error { color: #d46a7a; }
.object-modal-share-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.object-modal-share-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: calc(12px * var(--wg-text-scale));
}
.object-modal-share-list .empty {
  border-top: 0;
  color: rgba(242, 239, 232, 0.5);
}
.object-modal-share-list .email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.object-modal-share-list button {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
  padding: 0;
}
.object-modal-meeting-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 3;
  width: min(380px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 24, 28, 0.98);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(80vh, 640px);
  overflow: auto;
}
.object-modal-meeting-popover[hidden] { display: none !important; }
.object-modal-meeting-lead {
  margin: 0;
  font-family: var(--font-site-sans, var(--font-sans));
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 650;
  line-height: 18px;
  color: var(--text-primary);
}
.object-modal-meeting-section {
  margin: 4px 0 0;
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.48);
}
.object-modal-meeting-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.object-modal-meeting-option:disabled {
  opacity: 0.55;
  cursor: default;
}
.object-modal-meeting-option-title {
  display: block;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
}
.object-modal-meeting-option-meta {
  display: block;
  margin-top: 2px;
  font-size: calc(11px * var(--wg-text-scale));
  color: rgba(242, 239, 232, 0.55);
}
.object-modal-meeting-option-when {
  flex: 0 0 auto;
  font-size: calc(11px * var(--wg-text-scale));
  color: rgba(242, 239, 232, 0.62);
  white-space: nowrap;
}
.object-modal-meeting-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.object-modal-meeting-confirm[hidden] { display: none !important; }
.object-modal-meeting-paste-label {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.48);
}
.object-modal-meeting-paste {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  resize: vertical;
  text-transform: none;
  letter-spacing: normal;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
}
.object-modal-meeting-action,
.object-modal-meeting-secondary {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  cursor: pointer;
}
.object-modal-meeting-action {
  background: var(--accent);
  color: #0b0c0e;
}
.object-modal-meeting-action:disabled,
.object-modal-meeting-secondary:disabled { opacity: 0.5; cursor: default; }
.object-modal-meeting-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.object-modal-meeting-advanced {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
}
.object-modal-meeting-advanced > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 650;
  color: var(--text-primary);
  list-style: none;
}
.object-modal-meeting-advanced > summary::-webkit-details-marker { display: none; }
.object-modal-meeting-advanced > summary::after {
  margin-left: auto;
  content: "▸";
  color: rgba(242, 239, 232, 0.48);
}
.object-modal-meeting-advanced[open] > summary::after { content: "▾"; }
.object-modal-meeting-advanced-badge {
  display: inline-flex;
  align-items: center;
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.4;
}
.object-modal-meeting-advanced-badge[hidden] { display: none !important; }
.object-modal-meeting-field {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.48);
}
.object-modal-meeting-advanced-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 8px;
  resize: vertical;
}
.object-modal-meeting-advanced-input::placeholder {
  color: rgba(242, 239, 232, 0.38);
  letter-spacing: 0;
  text-transform: none;
}
.object-modal-meeting-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: calc(13px * var(--wg-text-scale));
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}
.object-modal-meeting-connect {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.object-modal-meeting-connect[hidden] { display: none !important; }
.object-modal-meeting-calendar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(242, 239, 232, 0.46);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 400;
}
.object-modal-meeting-calendar-link:hover {
  color: rgba(242, 239, 232, 0.72);
}
.object-modal-meeting-status {
  margin: 0;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 16px;
  color: rgba(242, 239, 232, 0.72);
}
.object-modal-meeting-status.is-error { color: #d46a7a; }
.object-modal-meeting-status[hidden] { display: none !important; }
.object-modal-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}
.object-modal-close:hover { background: rgba(255, 255, 255, 0.16); }
.object-modal-close:active { transform: scale(.92); }
.object-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-close svg { width: 18px; height: 18px; }
.object-modal-popout {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}
.object-modal-popout[hidden] { display: none !important; }
.object-modal-popout:hover { background: rgba(255, 255, 255, 0.16); }
.object-modal-popout:active { transform: scale(.92); }
.object-modal-popout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-popout svg { width: 17px; height: 17px; }
.object-modal-expand {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}
.object-modal-expand[hidden] { display: none !important; }
.object-modal-expand:hover { background: rgba(255, 255, 255, 0.16); }
.object-modal-expand:active { transform: scale(.92); }
.object-modal-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-expand svg { width: 17px; height: 17px; }
.object-modal-expand .icon-collapse { display: none; }
.object-modal-expand[aria-pressed="true"] .icon-expand { display: none; }
.object-modal-expand[aria-pressed="true"] .icon-collapse { display: block; }
/* Narrow screens are already full-bleed — no split to expand out of. */
@media (max-width: 899px) {
  .object-modal-expand { display: none !important; }
}
.object-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px 26px;
  font-size: calc(15px * var(--wg-text-scale));
  line-height: 23px;
  color: var(--text-primary);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.object-modal-body::-webkit-scrollbar { width: 8px; }
.object-modal-body:has(> .object-md) {
  padding: 16px 18px 22px;
}

/* ==========================================================================
   Artifact reading view (§a–§d): version sub-row, full-doc link, comments rail,
   live-update banner, and double-click section editing.
   ========================================================================== */
.object-modal-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.doc-window--agent .object-modal-headline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.object-modal-project-logo {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
}
.object-modal-project-logo[hidden] {
  display: none !important;
}
.object-modal-subhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 16px;
  color: var(--text-secondary);
  position: relative;
}
.object-modal-subhead[hidden] { display: none !important; }
.object-modal-version-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.object-modal-version-nav[hidden] { display: none !important; }
.oc-ver-label {
  border: none;
  background: transparent;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.oc-ver-label:hover { color: var(--text-primary); }
.oc-ver-label.is-current::after {
  content: " · current";
  text-decoration: none;
  opacity: 0.65;
}
.oc-ver-diff,
.oc-ver-restore {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.oc-ver-diff[hidden],
.oc-ver-restore[hidden] { display: none !important; }
.oc-version-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  max-height: min(320px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-width: min(360px, 70vw);
  max-width: min(480px, 92vw);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #15171c;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.oc-version-picker[hidden] { display: none !important; }
.oc-version-picker-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.oc-version-picker-item:last-child { border-bottom: none; }
.oc-version-picker-item:hover,
.oc-version-picker-item.active { background: rgba(255, 255, 255, 0.08); }
.oc-version-picker-item .oc-ver-num {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.oc-version-picker-item .oc-ver-meta {
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  margin-top: 2px;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.object-modal-diff {
  margin-top: 8px;
}
.object-modal-diff-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.object-modal-diff-head .oc-diff-spacer { flex: 1 1 auto; }
.object-modal-diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 12px;
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.object-modal-diff-legend-del::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  background: rgba(244, 67, 54, 0.35);
  vertical-align: -1px;
}
.object-modal-diff-legend-add::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  background: rgba(76, 175, 80, 0.35);
  vertical-align: -1px;
}
.object-modal-diff-section {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin: 14px 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.object-modal-diff-section-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.object-modal-diff-section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: calc(15px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.object-modal-diff-subsection-title {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary);
}
.object-modal-diff-section-body {
  padding: 10px 12px 12px;
}
.object-modal-diff-hunk {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin: 0 0 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
}
.object-modal-diff-hunk:last-child { margin-bottom: 0; }
.object-modal-diff-hunk-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.object-modal-diff-stats {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  opacity: 0.8;
}
.object-modal-diff-hunk-head .oc-diff-spacer { flex: 1 1 auto; }
.object-modal-diff-hunk-body {
  padding: 10px 12px 12px;
}
.object-modal-diff-hunk-body.object-md {
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1.55;
  /* Hunks sit inside the already-measured .object-modal-diff; don't re-cap. */
  max-width: none;
  margin-inline: 0;
}
.diff-chunk {
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 8px;
}
.diff-chunk:last-child { margin-bottom: 0; }
.diff-chunk--del {
  background: rgba(244, 67, 54, 0.1);
  border-left: 3px solid rgba(244, 67, 54, 0.65);
}
.diff-chunk--add {
  background: rgba(76, 175, 80, 0.1);
  border-left: 3px solid rgba(76, 175, 80, 0.65);
}
.diff-chunk--empty {
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
  font-style: italic;
}
.diff-chunk del,
.diff-chunk ins {
  display: block;
  text-decoration: none;
}
.diff-chunk--del del {
  color: rgba(255, 180, 180, 0.95);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 67, 54, 0.75);
}
.diff-chunk--add ins {
  color: rgba(180, 235, 190, 0.98);
}
.diff-chunk del p,
.diff-chunk ins p,
.diff-chunk del li,
.diff-chunk ins li {
  margin: 0.35em 0;
}
.diff-chunk del h1,
.diff-chunk del h2,
.diff-chunk del h3,
.diff-chunk del h4,
.diff-chunk ins h1,
.diff-chunk ins h2,
.diff-chunk ins h3,
.diff-chunk ins h4 {
  text-decoration: inherit;
  margin: 0.4em 0 0.2em;
}
.object-modal-diff-revert {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 6px;
  font-size: calc(11px * var(--wg-text-scale));
  padding: 2px 8px;
  cursor: pointer;
}
.object-modal-diff-revert:hover { background: rgba(255, 255, 255, 0.06); }
.object-modal-diff-revert:disabled { opacity: 0.45; cursor: default; }
.object-modal-diff-info {
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-secondary);
  padding: 12px 0;
}
.object-modal-version {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.object-modal-version[hidden] { display: none !important; }
.object-modal-fulldoc {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.object-modal-fulldoc:hover { opacity: 0.85; }
.object-modal-fulldoc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-fulldoc[hidden] { display: none !important; }
.object-modal-site[aria-pressed="true"] { color: var(--text-primary); }
.object-modal-views {
  display: inline-flex;
  gap: 2px;
  margin-left: 8px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.object-modal-views[hidden] { display: none !important; }
.object-modal-views button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted, #8a8680);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.object-modal-views button.on {
  color: var(--text-primary);
  background: rgba(78, 201, 176, 0.14);
}
.object-modal-edit-hint { opacity: 0.7; }
.object-modal-edit-hint[hidden] { display: none !important; }

/* Full-document markdown editor (Edit document). */
.object-md-markdown-input {
  display: block;
  width: 100%;
  min-height: min(58vh, 520px);
  margin: 0;
  padding: 12px 14px;
  border: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--reading-accent, #4ec9b0);
  background: rgba(78, 201, 176, 0.08);
  color: var(--reading-body, rgba(232, 231, 231, 0.88));
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
  line-height: 1.55;
  letter-spacing: 0.01em;
  resize: vertical;
  tab-size: 2;
  -webkit-text-size-adjust: 100%;
}
.object-md-markdown-input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--reading-accent, #4ec9b0);
  background: rgba(78, 201, 176, 0.12);
}
.object-md-markdown-input:read-only {
  opacity: 0.75;
}
.object-modal.is-markdown-editing .object-modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 14px 16px;
}
.object-modal.is-markdown-editing .object-md-markdown-input {
  flex: 1 1 auto;
  min-height: 240px;
}
.object-modal-edit-toolbar.is-markdown .oc-edit-blocks { display: none; }
.object-modal-edit-toolbar.is-markdown { justify-content: flex-end; }

/* Compact document header.
 *
 * Scoped to .object-modal rather than #objectModal: floating and docked
 * document windows are clones of #docWindowTpl and carry no id, so an
 * id-scoped rule left every one of them on the desktop sizing.
 *
 * Driven by a media query rather than the html.coarse-pointer class so a
 * narrow non-touch window gets it too, and so it re-evaluates on resize. */
@media (pointer: coarse), (max-width: 700px) {
  .object-modal .object-modal-head {
    align-items: flex-start;
    gap: 8px;
    padding: 10px 10px 8px 14px;
  }
  .object-modal .object-modal-headline {
    gap: 2px;
  }
  .object-modal .object-modal-title {
    font-size: calc(17px * var(--wg-text-scale));
    line-height: 22px;
  }
  .object-modal .object-modal-headline .object-modal-title {
    font-size: calc(11px * var(--wg-text-scale));
    line-height: 15px;
  }
  .object-modal .object-modal-subhead {
    gap: 4px 8px;
    font-size: calc(11px * var(--wg-text-scale));
    line-height: 14px;
  }
  .object-modal .object-modal-head-actions {
    gap: 4px;
    margin-top: -2px;
  }
  .object-modal .object-modal-comments-btn,
  .object-modal .object-modal-toc-btn,
  .object-modal .object-modal-mute,
  .object-modal .object-modal-genimg,
  .object-modal .object-modal-share,
  .object-modal .object-modal-download,
  .object-modal .object-modal-close,
  .object-modal .object-modal-popout,
  .object-modal .object-modal-expand {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .object-modal .object-modal-copy-btn,
  .object-modal .object-modal-copy-menu,
  .object-modal .object-modal-zoom-btn,
  .object-modal .object-modal-zoom-label,
  .object-modal .object-modal-find-toggle {
    height: 32px;
  }
  .object-modal .object-modal-find-toggle {
    width: 32px;
    min-width: 32px;
  }
  .object-modal .object-modal-find-input {
    width: 120px;
    font-size: calc(11px * var(--wg-text-scale));
  }
  .object-modal .object-modal-zoom-btn {
    width: 26px;
    min-width: 26px;
  }
  .object-modal .object-modal-zoom-label {
    min-width: 36px;
    font-size: calc(10px * var(--wg-text-scale));
  }
  .object-modal .object-modal-copy-btn {
    width: 30px;
    min-width: 30px;
  }
  .object-modal .object-modal-copy-menu {
    width: 20px;
    min-width: 20px;
  }
  /* The action cluster otherwise takes two thirds of a phone-width header and
     starves the title. Giving the headline the whole first row keeps the title
     readable; the buttons wrap onto their own row, right-aligned. */
  .object-modal .object-modal-head {
    flex-wrap: wrap;
  }
  .object-modal .object-modal-headline {
    flex: 1 1 100%;
  }
  .object-modal .object-modal-head-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }
  /* The gesture hint (double-click / double-tap) has no room beside the
     buttons here. The element carries the other hint texts too (archived,
     finalising), which still apply, so only this one is dropped. */
  .object-modal .object-modal-edit-hint[data-hint="dblclick"] {
    display: none !important;
  }
}

@media (pointer: coarse) {
  .object-modal .object-md-markdown-input {
    min-height: min(52vh, 420px);
    font-size: max(16px, calc(16px * var(--wg-text-scale))); /* avoid iOS zoom on focus */
  }
  /* iOS zooms the whole page when a focused field's font-size is under 16px.
     The modal is `position: fixed; inset: 0`, so that zoom drags its header
     under the notch and pushes the popovers off-screen — which is what made
     the comment box and the share sheet unusable rather than merely small.
     Every text-entry control in here has to clear 16px. */
  .object-modal input,
  .object-modal textarea,
  .object-modal select {
    font-size: max(16px, calc(13px * var(--wg-text-scale)));
  }
  .object-md .artifact-section[data-section-identifier]:active {
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
}

/* Touch: keep the sheet (and therefore the comment composer) above the
   on-screen keyboard. iOS leaves the layout viewport full-height when the
   keyboard opens, so `inset: 0` alone puts the bottom of the sheet behind it.
   --wg-kb-inset is published by syncViewportKeyboardInset. */
@media (pointer: coarse), (max-width: 700px) {
  .object-modal {
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px + var(--wg-kb-inset, 0px));
  }
  /* The share / meeting popovers hang off a small right-aligned wrapper, so a
     320-380px panel anchored to it runs past the left edge of a phone screen.
     Dropping the wrapper's positioning re-anchors them to the header, which
     spans the sheet, and lets them scroll instead of overflowing it. */
  .object-modal-share-wrap,
  .object-modal-meeting-wrap,
  .object-modal-copy-wrap {
    position: static;
  }
  .object-modal-share-popover,
  .object-modal-meeting-popover,
  .object-modal-copy-dropdown {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: max(200px, calc(100svh - var(--wg-kb-inset, 0px) - 190px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Composing a comment on a phone: the 45% cap cannot hold the composer once the
   sheet has shrunk above the keyboard, and the thread list is already down to
   its padding, so the compose row spills out and the sheet clips it. While the
   keyboard is open the rail claims the space instead and the document yields it
   (basis 25%, so a few lines of context survive). The rail scrolls rather than
   spilling if even that is not enough. */
@media (max-width: 720px) {
  .wg-kb-open .object-modal.has-comments .object-modal-body {
    flex: 0 1 25%;
  }
  .wg-kb-open .object-modal.has-comments .object-modal-comments {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  /* The title bar and Open/Archived tabs are ~90px of chrome that nobody needs
     mid-sentence, and on a short phone that is the difference between the
     composer fitting and not. They come back with the keyboard. */
  .wg-kb-open .object-modal.has-comments .oc-comments-head,
  .wg-kb-open .object-modal.has-comments .oc-comments-tabs {
    display: none;
  }
}

.object-modal-comments-btn {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}
.object-modal-comments-btn:hover { background: rgba(255, 255, 255, 0.16); }
.object-modal-comments-btn:active { transform: scale(.92); }
.object-modal-comments-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-comments-btn[aria-pressed="true"] { background: var(--accent); color: #0b0c0e; }
.object-modal-comments-btn svg { width: 18px; height: 18px; }
.object-modal-comments-btn[hidden] { display: none !important; }
.object-modal-comments-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #0b0c0e;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  line-height: 16px;
  text-align: center;
}
.object-modal-comments-count[hidden] { display: none !important; }

.object-modal-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-primary);
}
.object-modal-banner[hidden] { display: none !important; }
.object-modal-banner-btn {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
}
.object-modal-banner-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* Document finalizer overlay (MD artifact viewer — mirrors app_reading). */
.finalization-overlay-host {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 20;
  pointer-events: none;
  max-width: calc(100% - 32px);
}
.finalization-overlay-host[hidden] { display: none !important; }
.finalization-overlay {
  width: 360px;
  max-width: 100%;
  background: #1f2937;
  color: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.38);
  overflow: hidden;
  font-size: calc(13px * var(--wg-text-scale));
}
.finalization-overlay__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #111827;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.finalization-overlay__spinner {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(78, 201, 176, 0.3);
  border-top-color: #4EC9B0;
  border-radius: 50%;
  animation: finalization-spin 1s linear infinite;
}
@keyframes finalization-spin {
  to { transform: rotate(360deg); }
}
.finalization-overlay__title { font-weight: 600; }
.finalization-overlay__sub { opacity: 0.75; font-size: calc(12px * var(--wg-text-scale)); margin-top: 2px; }
.finalization-overlay__bar-wrap {
  height: 4px;
  margin: 0 14px 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.finalization-overlay__bar {
  height: 100%;
  background: #4EC9B0;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.finalization-overlay__bar-label {
  padding: 0 14px 8px;
  font-size: calc(11px * var(--wg-text-scale));
  opacity: 0.65;
}
.finalization-overlay__log {
  max-height: 184px;
  overflow-y: auto;
  padding: 10px 14px;
  line-height: 1.5;
}
.finalization-overlay__line { margin-bottom: 6px; opacity: 0.62; }
.finalization-overlay__line.is-latest { opacity: 1; }

.object-modal.is-finalizing .object-md { pointer-events: none; }
.object-modal.is-finalizing .artifact-section-comment { opacity: 0.35; pointer-events: none; }
.object-modal.is-finalizing .object-modal-editdoc,
.object-modal.is-finalizing .object-modal-genimg { opacity: 0.45; pointer-events: none; }

/* Contents + body sit under the title bar. Overlay TOC is positioned
   against this split so it never covers the head. */
.object-modal-split {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* Body + comments share a horizontal flex row inside the sheet. */
.object-modal-main {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
}
.object-modal-main .object-modal-body { min-width: 0; }
.object-modal.has-comments .object-modal-stage { width: min(1040px, 100%); }
.object-modal.has-comments .object-modal-sheet { width: 100%; }

.object-modal-comments {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.object-modal-comments[hidden] { display: none !important; }

/* Artifact table of contents — pin docks it beside the sheet when there is
   room; unpinned it overlays the document and can be dismissed. */
.object-modal-toc-btn {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}
.object-modal-toc-btn:hover { background: rgba(255, 255, 255, 0.16); }
.object-modal-toc-btn:active { transform: scale(.92); }
.object-modal-toc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-toc-btn[aria-pressed="true"] { background: var(--accent); color: #0b0c0e; }
.object-modal-toc-btn svg { width: 18px; height: 18px; }
.object-modal-toc-btn[hidden] { display: none !important; }

.object-modal-toc {
  flex: 0 0 302px;
  width: 302px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
  border: 1px solid var(--ds-border-hairline-hover);
  border-radius: 18px;
  /* Frosted glass to match the chat composer / modal sheet. */
  background: var(--ds-overlay-bg);
  -webkit-backdrop-filter: blur(var(--ds-overlay-blur));
          backdrop-filter: blur(var(--ds-overlay-blur));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95), var(--ds-inset-top);
  overflow: hidden;
}
.object-modal-toc[hidden] { display: none !important; }
#objectModal.has-toc-dock .object-modal-toc,
#objectModal.has-toc-overlay .object-modal-toc,
.doc-window.has-toc-dock .object-modal-toc,
.doc-window.has-toc-overlay .object-modal-toc {
  display: flex !important;
}
.oc-toc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.oc-toc-title {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.oc-toc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.oc-toc-close,
.oc-toc-pin {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.oc-toc-close:hover,
.oc-toc-pin:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.oc-toc-close svg { width: 14px; height: 14px; }
.oc-toc-pin svg { width: 14px; height: 14px; }
.oc-toc-pin.is-pinned,
.oc-toc-pin[aria-pressed="true"] {
  color: var(--accent, #4ec9b0);
}
.oc-toc-pin.is-pinned svg,
.oc-toc-pin[aria-pressed="true"] svg {
  fill: currentColor;
}
.oc-toc-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 12px;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.oc-toc-list::-webkit-scrollbar { width: 6px; }
.oc-toc-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.oc-toc-item {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.45;
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .14s ease, color .14s ease;
}
.oc-toc-item:hover,
.oc-toc-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  outline: none;
}
.oc-toc-item[data-level="1"] { font-weight: 600; color: var(--text-primary); }
.oc-toc-item[data-level="2"] { padding-left: 18px; }
.oc-toc-item[data-level="3"] { padding-left: 28px; font-size: calc(12.5px * var(--wg-text-scale)); }
.oc-toc-item[data-level="4"],
.oc-toc-item[data-level="5"],
.oc-toc-item[data-level="6"] { padding-left: 38px; font-size: calc(12px * var(--wg-text-scale)); opacity: 0.92; }

.oc-comments-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.oc-comments-title {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.oc-comments-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.oc-comments-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.oc-comments-close svg { width: 14px; height: 14px; }
.oc-comments-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.oc-comments-tab {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.oc-comments-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.oc-comments-tab.active { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.oc-tab-count {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  line-height: 16px;
}
.oc-comments-tab.active .oc-tab-count { background: var(--accent); color: #0b0c0e; }
.oc-comments-compose[hidden] { display: none !important; }
.oc-comment-pending { opacity: 0.85; }
.oc-comment-status .oc-spinner {
  width: 11px;
  height: 11px;
  border-width: 2px;
}
.oc-comments-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.oc-comments-empty {
  color: var(--text-secondary);
  font-size: calc(13px * var(--wg-text-scale));
  padding: 8px 2px;
}
.oc-comment {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.oc-comment:last-child { border-bottom: none; }
.oc-comment-reply {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
}
.oc-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.oc-comment-author { font-size: calc(13px * var(--wg-text-scale)); font-weight: 600; color: var(--text-primary); }
.oc-comment-date { font-size: calc(11px * var(--wg-text-scale)); color: var(--text-secondary); }
.oc-comment-section {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale));
  line-height: 15px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-comment-section:hover { color: var(--accent); }
.oc-comment-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(10px * var(--wg-text-scale));
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
}
.oc-comment-status.editing { background: rgba(255, 196, 0, 0.18); color: #f0c046; }
.oc-comment-status.accepted { background: rgba(80, 200, 120, 0.18); color: #6cd28a; }
.oc-comment-status.rejected { background: rgba(255, 95, 95, 0.16); color: #ff8b8b; }
.oc-comment-status.resolved { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); }
.oc-comment-body {
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 19px;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
}
.oc-comment-actions { display: flex; gap: 8px; margin-top: 8px; }
.oc-comment-accept,
.oc-comment-reject {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: calc(12px * var(--wg-text-scale));
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s ease;
}
.oc-comment-accept:hover { background: rgba(80, 200, 120, 0.2); }
.oc-comment-reject:hover { background: rgba(255, 95, 95, 0.18); }
.oc-comments-compose {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.oc-comments-input {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  max-height: 160px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 18px;
}
.oc-comments-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oc-comments-add {
  align-self: flex-end;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #0b0c0e;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
}
.oc-comments-add:hover { opacity: 0.9; }
.oc-comments-add:disabled { opacity: 0.5; cursor: default; }

/* (d) Double-click / double-tap-to-edit section affordances. */
.object-md .artifact-section {
  position: relative;
  border-radius: 10px;
  padding: 6px 8px;
  margin: 0 -8px 4px;
  transition: background .14s ease, box-shadow .14s ease;
  touch-action: manipulation;
}
.object-md .artifact-section.is-double-arm,
.object-md .artifact-section.is-double-arm * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
.object-md .artifact-section[data-section-identifier]:hover {
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: text;
}
.object-md .artifact-section.editing {
  background: rgba(78, 201, 176, 0.08);
  box-shadow: inset 0 0 0 1px var(--reading-accent, #4ec9b0);
  cursor: auto;
  outline: none;
  padding-bottom: 56px;
}
.object-md .artifact-section.editing.has-table-focus {
  padding-bottom: 96px;
}
.object-md .artifact-section.editing:focus-visible { outline: none; }
.object-md .artifact-section.saving { opacity: 0.6; pointer-events: none; }
.object-md .artifact-section-edit-body {
  outline: none;
  min-height: 1.4em;
}
.object-md .artifact-section-edit-body:focus-visible { outline: none; }
.artifact-table-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.artifact-section.editing.has-table-focus .artifact-table-bar { display: flex; }
.artifact-edit-toolbar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  z-index: 4;
  pointer-events: auto;
}
.artifact-edit-toolbar.busy { opacity: 0.6; pointer-events: none; }
.artifact-edit-actions,
.artifact-edit-commit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.artifact-edit-toolbar button,
.artifact-table-bar button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1.2;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
}
.artifact-table-bar button {
  font-size: calc(11px * var(--wg-text-scale));
  padding: 5px 10px;
}
.artifact-edit-toolbar button:hover,
.artifact-table-bar button:hover { background: rgba(255, 255, 255, 0.2); }
.artifact-edit-toolbar button.artifact-edit-save {
  background: var(--accent);
  color: #0b0c0e;
}
.artifact-edit-toolbar button.artifact-edit-save:hover {
  background: var(--accent);
  opacity: 0.9;
}
.artifact-edit-toolbar button.artifact-edit-delete:hover {
  background: rgba(220, 80, 80, 0.35);
}

/* Hover-to-comment affordance on each section (§ comments). */
.object-md .artifact-section-comment {
  position: absolute;
  top: 4px;
  right: 2px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(22, 25, 30, 0.9);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, color .14s ease, background .14s ease;
  z-index: 2;
}
.object-md .artifact-section:hover .artifact-section-comment { opacity: 1; }
.object-md .artifact-section-comment:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }
.object-md .artifact-section-comment:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.object-md .artifact-section-comment svg { width: 14px; height: 14px; }

/* Section picker in the comment compose box. */
.oc-comments-section {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
}
.oc-comments-section:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* (d) Full-document edit toolbar (heading levels + save/cancel). */
.object-modal-edit-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.object-modal-edit-toolbar[hidden] { display: none !important; }
.object-modal-edit-toolbar.busy { opacity: 0.6; pointer-events: none; }
.oc-edit-blocks { display: inline-flex; gap: 4px; }
.oc-edit-block {
  min-width: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  transition: background .14s ease;
}
.oc-edit-block:hover { background: rgba(255, 255, 255, 0.14); }
.oc-edit-actions { display: inline-flex; gap: 8px; }
.oc-edit-save,
.oc-edit-cancel {
  border: none;
  border-radius: 8px;
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
}
.oc-edit-save { background: var(--accent); color: #0b0c0e; }
.oc-edit-save:hover { opacity: 0.9; }
.oc-edit-cancel { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
.oc-edit-cancel:hover { background: rgba(255, 255, 255, 0.2); }

/* Dedicated title box for the single top-of-document H1 (§ editing). */
.object-md-title-input {
  width: 100%;
  margin: 0 0 0.8em;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid var(--reading-border, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  background: rgba(78, 201, 176, 0.1);
  color: var(--reading-heading, rgba(232, 231, 231, 0.94));
  font-family: var(--font-sans);
  font-size: calc(2.2em * var(--artifact-doc-zoom, 1));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.object-md-title-input:focus-visible {
  outline: 2px solid var(--reading-accent, #4ec9b0);
  outline-offset: -2px;
  background: rgba(78, 201, 176, 0.15);
}

/* The whole-document contenteditable surface. */
.object-md-editing {
  outline: none;
  min-height: 200px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--reading-accent, #4ec9b0);
  background: rgba(78, 201, 176, 0.08);
  padding: 12px 14px;
  line-height: inherit;
}
.object-md-editing:focus {
  box-shadow: inset 0 0 0 2px var(--reading-accent, #4ec9b0);
  background: rgba(78, 201, 176, 0.12);
}

/* ==========================================================================
   Live Pages (co-creation): presence, live-merge flash, in-modal mute,
   generate-image bar + floating selection chip.
   ========================================================================== */

/* Subhead presence chip: "MD is editing …" while the MD works on this page. */
.object-modal-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: calc(11px * var(--wg-text-scale));
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.object-modal-presence::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: live-presence-pulse 1.6s ease-in-out infinite;
}
.object-modal-presence[hidden] { display: none !important; }
.object-modal-meeting-presence {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(78, 201, 176, 0.14);
  color: #7dd3c7;
  font-size: calc(11px * var(--wg-text-scale));
  white-space: nowrap;
}
.object-modal-meeting-presence[hidden] { display: none !important; }
@keyframes live-presence-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* A section the MD is currently rewriting: soft shimmer + corner chip. */
.object-md .artifact-section.md-editing {
  background: rgba(var(--accent-rgb), 0.05);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
  animation: md-editing-shimmer 2.2s ease-in-out infinite;
}
@keyframes md-editing-shimmer {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2); }
  50% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); }
}
.doc-presence-chip {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0c0e;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  letter-spacing: 0.03em;
  z-index: 3;
  pointer-events: none;
}

/* A section another author just updated underneath you (live merge). */
.object-md .artifact-section.remote-flash {
  animation: remote-section-flash 1.8s ease-out 1;
}
@keyframes remote-section-flash {
  0% { background: rgba(var(--accent-rgb), 0.18); }
  100% { background: transparent; }
}

/* In-modal mute + generate-image: round head-action buttons (match comments). */
.object-modal-mute,
.object-modal-genimg {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease;
}
.object-modal-mute:hover,
.object-modal-genimg:hover { background: rgba(255, 255, 255, 0.16); }
.object-modal-mute:active,
.object-modal-genimg:active { transform: scale(.92); }
.object-modal-mute:focus-visible,
.object-modal-genimg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.object-modal-mute svg,
.object-modal-genimg svg { width: 18px; height: 18px; }
.object-modal-mute[hidden],
.object-modal-genimg[hidden] { display: none !important; }
.object-modal-genimg[aria-pressed="true"] { background: var(--accent); color: #0b0c0e; }
.object-modal.has-images .object-modal-stage { width: min(1040px, 100%); }
.object-modal.has-images .object-modal-sheet { width: 100%; }
.object-modal-image-bar { display: none !important; }
.object-modal-images {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.object-modal-images[hidden] { display: none !important; }
.oc-images-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.oc-images-title {
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
}
.oc-images-close {
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.oc-images-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.oc-images-close svg { width: 14px; height: 14px; }
.oc-images-tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
}
.oc-images-tab {
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: calc(12px * var(--wg-text-scale));
  padding: 5px 12px;
  cursor: pointer;
}
.oc-images-tab.on { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
.oc-images-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
  min-height: 0;
  overflow: auto;
}
.oc-images-pane[hidden] { display: none !important; }
.oc-images-prompt,
.oc-images-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
}
.oc-images-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-muted);
}
.oc-images-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.oc-images-settings label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-muted);
}
.oc-images-go {
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #0b0c0e;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
}
.oc-images-go-secondary { background: rgba(255, 255, 255, 0.14); color: var(--text-primary); }
.oc-images-go:disabled { opacity: 0.5; cursor: default; }
.oc-images-actions { display: flex; gap: 8px; }
.oc-images-actions .oc-images-go { flex: 1; }
.oc-images-progress {
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--accent);
}
.oc-images-selected {
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-muted);
}
.oc-images-selected img {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}
.oc-images-list {
  padding: 0 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oc-images-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  padding: 6px;
  cursor: pointer;
  text-align: left;
}
.oc-images-list button.on { border-color: var(--accent); }
.oc-images-list img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.chat-concept {
  margin: 8px 0 12px;
  max-width: min(420px, 92%);
}
.chat-concept img {
  display: block;
  width: 100%;
  border-radius: 12px;
}
.chat-concept-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.chat-concept-actions button {
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: calc(12px * var(--wg-text-scale));
  padding: 5px 10px;
  cursor: pointer;
}
.md-concept-float {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 70;
  width: min(360px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 14px;
  background: rgba(18, 20, 24, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.md-concept-float img { width: 100%; border-radius: 10px; display: block; }
/* Mic icon swap mirrors #btnMute: slash while the page is voice-muted. */
.object-modal-mute .icon-mic-slash { display: none; }
.voice-muted .object-modal-mute .icon-mic { display: none; }
.voice-muted .object-modal-mute .icon-mic-slash { display: block; }
.voice-muted .object-modal-mute { background: rgba(255, 95, 95, 0.18); color: #ff8b8b; }

/* Generate-image prompt bar (under the banner row). */
.object-modal-image-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.object-modal-image-bar[hidden] { display: none !important; }
.oc-imagebar-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--wg-text-scale));
}
.oc-imagebar-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oc-imagebar-section {
  flex: 0 1 200px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
}
.oc-imagebar-go {
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #0b0c0e;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
}
.oc-imagebar-go:hover { opacity: 0.9; }
.oc-imagebar-go:disabled { opacity: 0.5; cursor: default; }
.oc-imagebar-cancel {
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-size: calc(13px * var(--wg-text-scale));
  padding: 7px 12px;
  cursor: pointer;
}
.oc-imagebar-cancel:hover { background: rgba(255, 255, 255, 0.2); }

/* Floating chip over a text selection: seed the image prompt from it. */
.genimg-chip {
  position: fixed;
  z-index: 60; /* above the object modal (50) */
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 999px;
  background: rgba(22, 25, 30, 0.96);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: background .14s ease, transform .12s ease;
}
.genimg-chip:hover { background: rgba(var(--accent-rgb), 0.14); }
.genimg-chip:active { transform: scale(.95); }

/* An image pasted into an editing surface while its upload is in flight. */
.object-md img.edit-pending-img { opacity: 0.55; filter: saturate(0.6); }

/* Generate-image bar live progress (while the backend builds the image). */
.object-modal-image-bar.is-busy .oc-imagebar-input,
.object-modal-image-bar.is-busy .oc-imagebar-section,
.object-modal-image-bar.is-busy .oc-imagebar-cancel { display: none; }
.object-modal-image-bar.is-busy .oc-imagebar-go {
  opacity: 0.5;
  cursor: default;
}
.oc-imagebar-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 100%;
  min-width: 0;
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--accent);
}
.oc-imagebar-progress-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* In-document placeholder card showing where the image will land. */
.genimg-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 18px 20px;
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font-size: calc(13px * var(--wg-text-scale));
  animation: genimg-placeholder-pulse 2s ease-in-out infinite;
}
@keyframes genimg-placeholder-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Artifact / File Note reader — use more horizontal space on desktop. */
@media (min-width: 721px) {
  /* Stage must grow with the sheet; the default 720px cap left wide sheets squeezed
     (especially when the TOC is docked beside the sheet). */
  #objectModal .object-modal-stage { width: min(1040px, calc(100vw - 48px)); }
  #objectModal.has-comments .object-modal-stage { width: min(1280px, calc(100vw - 48px)); }
  #objectModal.has-images .object-modal-stage { width: min(1280px, calc(100vw - 48px)); }
  #objectModal.has-comments.has-images .object-modal-stage { width: min(1600px, calc(100vw - 48px)); }
  #objectModal.has-toc-dock .object-modal-stage { width: min(calc(1040px + 314px), calc(100vw - 48px)); }
  #objectModal.has-toc-dock.has-comments .object-modal-stage { width: min(calc(1280px + 314px), calc(100vw - 48px)); }
  #objectModal.has-toc-dock.has-images .object-modal-stage { width: min(calc(1280px + 314px), calc(100vw - 48px)); }
  #objectModal.has-toc-dock.has-comments.has-images .object-modal-stage { width: min(calc(1600px + 314px), calc(100vw - 48px)); }
  #objectModal .object-modal-sheet { width: min(1040px, calc(100vw - 48px)); flex-shrink: 0; }
  #objectModal.has-comments .object-modal-sheet { width: min(1280px, calc(100vw - 48px)); }
  #objectModal.has-images .object-modal-sheet { width: min(1280px, calc(100vw - 48px)); }
  #objectModal.has-comments.has-images .object-modal-sheet { width: min(1600px, calc(100vw - 48px)); }
  #objectModal.has-toc-dock .object-modal-sheet { width: min(calc(1040px + 314px), calc(100vw - 48px)); }
  #objectModal.has-toc-dock.has-comments .object-modal-sheet { width: min(calc(1280px + 314px), calc(100vw - 48px)); }
  #objectModal.has-toc-dock.has-images .object-modal-sheet { width: min(calc(1280px + 314px), calc(100vw - 48px)); }
  #objectModal.has-toc-dock.has-comments.has-images .object-modal-sheet { width: min(calc(1600px + 314px), calc(100vw - 48px)); }
  #objectModal.has-toc-overlay:not(.has-toc-dock) .object-modal-toc,
  .doc-window.has-toc-overlay .object-modal-toc {
    position: absolute;
    top: 8px;
    left: 8px;
    bottom: 8px;
    z-index: 2;
  }
  .doc-window.has-toc-dock .object-modal-toc,
  #objectModal.has-toc-dock .object-modal-toc {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    z-index: 1;
    flex: 0 0 302px;
    width: 302px;
    align-self: stretch;
    margin: 8px 0 8px 8px;
  }
}

/* On narrow screens the comments rail moves below the document. */
@media (max-width: 720px) {
  .object-modal.has-comments .object-modal-sheet { width: min(720px, 100%); }
  .object-modal.has-images .object-modal-sheet { width: min(720px, 100%); }
  .object-modal-main { flex-direction: column; }
  .object-modal-images {
    flex: 0 0 auto;
    max-height: 45%;
    min-height: min-content;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .object-modal-comments {
    flex: 0 0 auto;
    max-height: 45%;
    /* The thread list bottoms out at its padding, so on a short phone 45% is
       less than the rail's own minimum and the compose row spills out of the
       sheet (which clips it). min-content wins over max-height, so the rail
       gives the composer its space and the document takes what is left. */
    min-height: min-content;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .object-modal-stage {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  #objectModal.has-toc-overlay .object-modal-toc {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 16px);
    left: 16px;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    width: min(364px, calc(100vw - 32px));
    max-height: none;
    z-index: 3;
  }
}

/* ==========================================================================
   Settings cog + Connections panel
   ========================================================================== */
.settings-cog {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 16px);
  z-index: 8; /* above chat-toolbar (7) and voice refs (6) */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ui-glass-icon);
  cursor: pointer;
}
.settings-cog:hover { color: #fff; }
.settings-cog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-cog svg { width: 20px; height: 20px; }

.settings-modal,
.meeting-modal,
.file-note-modal {
  align-items: center;
}
.settings-modal .object-modal-sheet,
.meeting-modal .object-modal-sheet,
.file-note-modal .object-modal-sheet {
  height: auto;
  max-height: 100%;
}

.settings-section-title {
  margin: 28px 0 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.settings-operator-only > .settings-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.settings-modal.participant-only .object-modal-body > .settings-section-title:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.settings-hint {
  margin: 0 0 14px;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 19px;
  color: var(--text-secondary);
}
.conn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.conn-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conn-name { font-size: calc(15px * var(--wg-text-scale)); font-weight: 500; color: var(--text-primary); }
.conn-sub { font-size: calc(12px * var(--wg-text-scale)); color: var(--text-secondary); }
.conn-status { font-size: calc(12px * var(--wg-text-scale)); color: var(--text-secondary); margin-top: 2px; }
.conn-status.is-connected { color: var(--ok-green, #4ade80); }
.conn-note { font-size: calc(12px * var(--wg-text-scale)); line-height: 17px; color: var(--accent, #4ec9b0); margin-top: 4px; }
.conn-note-steps { display: block; color: var(--text-secondary); font-size: calc(11px * var(--wg-text-scale)); line-height: 16px; }
.conn-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.conn-btn {
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease-out), transform .12s var(--ds-ease-out);
}
.conn-btn:hover { background: rgba(var(--accent-rgb), 0.26); }
.conn-btn:active { transform: scale(.96); }
.conn-btn-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
.conn-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
.conn-btn-danger {
  border-color: rgba(255, 90, 80, 0.35);
  background: rgba(220, 70, 70, 0.22);
  color: #ffb4b4;
}
.conn-btn-danger:hover { background: rgba(255, 90, 80, 0.28); color: #ffc9c9; }
.conn-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---- Director image (16:9 meeting tile) ------------------------------ */
.settings-appearance { margin: 0 0 18px; }
.appearance-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}
.appearance-preview-tile {
  position: relative;
  flex: 0 0 168px;
  width: 168px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #090a0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.appearance-preview-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.appearance-preview-orb {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45);
}
.appearance-preview-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.appearance-preview-meta { min-width: 0; }
.appearance-crop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #090a0c;
  touch-action: none;
  margin: 0 0 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.appearance-crop-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.appearance-crop-frame canvas:active { cursor: grabbing; }
.appearance-crop-safezone {
  position: absolute;
  inset: 15%;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  pointer-events: none;
}
.appearance-crop-zoom-label {
  display: block;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
  margin: 4px 0 6px;
}
.appearance-crop-zoom { width: 100%; }
.appearance-crop-actions { margin-top: 16px; }

/* ---- Email signature editor ------------------------------------------ */
.email-sig { margin: 0 0 18px; }
.email-sig-label {
  display: block;
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  color: var(--text-primary);
  margin: 4px 0 6px;
}
.email-sig-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 19px;
}
.email-sig-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.6);
}
.email-sig-advanced { margin: 10px 0 0; }
.email-sig-advanced > summary {
  cursor: pointer;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.email-sig-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.email-sig-status { font-size: calc(12px * var(--wg-text-scale)); color: var(--text-secondary); }

/* ---- Active account selector (Google OR Microsoft) -------------------- */
.active-provider {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
/* An author `display:` overrides the UA [hidden]{display:none}; make the
   `hidden` attribute authoritative so the row/chip truly hide when JS sets it
   (see the same fix for .object-modal above). */
.active-provider[hidden],
.provider-chip[hidden] { display: none !important; }
.active-provider-label { font-size: calc(13px * var(--wg-text-scale)); color: var(--text-secondary); }
.active-provider-options { display: flex; gap: 8px; }
.active-provider-opt {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: calc(13px * var(--wg-text-scale));
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.active-provider-opt:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
.active-provider-opt.is-active {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--text-primary);
}
.active-provider-opt:disabled {
  opacity: 0.45;
  cursor: default;
}

.settings-dnd-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.settings-dnd-row:first-child { border-top: none; padding-top: 0; }
.settings-dnd-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-dnd-label {
  display: block;
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 600;
  color: var(--text-primary);
}
.settings-dnd-label .experimental-badge {
  margin-left: 8px;
}
.settings-dnd-sub {
  display: block;
  margin-top: 0;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
  line-height: 1.45;
}
.settings-dnd-sub + .settings-dnd-sub {
  margin-top: 8px;
}
.settings-dnd-status {
  display: block;
  margin-top: 4px;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--accent-soft);
}
.settings-voice .active-provider-options,
.settings-dnd-row > .active-provider-options {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 560px) {
  .settings-dnd-row {
    flex-direction: column;
    gap: 10px;
  }
  .settings-voice .active-provider-options,
  .settings-dnd-row > .active-provider-options {
    justify-content: flex-start;
  }
}
.settings-dnd-presets {
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.settings-thinking-themes-row {
  flex-direction: column;
  gap: 10px;
}
.settings-thinking-themes-row > .settings-thinking-themes {
  flex: 1 1 auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* ---- Text size (Display) ------------------------------------------------
   The two "A" ticks step the slider (and stay a fixed size so they don't
   grow with --wg-text-scale). */
.text-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.text-size-tick {
  flex: none;
  margin: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  line-height: 1;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.text-size-tick:hover:not(:disabled) {
  color: var(--text-primary);
}
.text-size-tick:disabled {
  opacity: 0.35;
  cursor: default;
}
.text-size-tick--small { font-size: 12px; }
.text-size-tick--large { font-size: 20px; }
@media (max-width: 720px) {
  .settings-text-size .settings-dnd-row {
    flex-direction: column;
    gap: 10px;
  }
  .settings-text-size .settings-dnd-row > .active-provider-options {
    justify-content: flex-start;
  }
}
.text-size-slider {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.text-size-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.text-size-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.text-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.text-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.text-size-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}
.settings-dnd-project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-dnd-project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-dnd-project-name {
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-primary);
}
.settings-dnd-project-meta {
  font-size: calc(11px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.settings-dnd-project-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.settings-dnd-project-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: calc(11px * var(--wg-text-scale));
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
.settings-dnd-project-btn.is-active {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-soft);
}
.chat-awareness-mute-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: calc(12px * var(--wg-text-scale));
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.55);
}
.chat-awareness-mute-btn:hover { color: var(--accent-soft); }

/* ---- Active-account chip on the start screen -------------------------- */
.provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.provider-chip-mark { display: inline-flex; align-items: center; line-height: 0; }

/* ---- Per-user usage visual (settings panel) ---------------------------- */
.md-usage { margin: 0 0 22px; }
.md-usage-cards { display: flex; gap: 10px; margin-bottom: 14px; }
.md-usage-card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.md-usage-card--hero { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.28); }
.md-usage-card-label {
  font-family: var(--font-mono); font-size: calc(10px * var(--wg-text-scale)); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.md-usage-card-big { font-size: calc(24px * var(--wg-text-scale)); font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.md-usage-card-sub { font-size: calc(11px * var(--wg-text-scale)); color: var(--text-secondary); }

.md-usage-daily-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 10px;
}
.md-usage-daily-month { font-size: calc(12px * var(--wg-text-scale)); color: var(--text-secondary); min-width: 130px; text-align: center; }
.md-usage-nav-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  width: 26px; height: 26px; border-radius: 999px;
  cursor: pointer; font-size: calc(15px * var(--wg-text-scale)); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.md-usage-nav-btn:hover { background: rgba(255, 255, 255, 0.12); }
.md-usage-nav-btn:disabled { opacity: 0.35; cursor: default; }
/* display:inline-flex above overrides the UA [hidden] rule, so restore it. */
.md-usage-nav-btn[hidden] { display: none; }

.md-usage-chart-wrap { position: relative; min-height: 120px; }
.md-usage-chart-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.12);
}
/* The explicit display above overrides the UA [hidden] rule, so restore it. */
.md-usage-chart-loading[hidden] { display: none; }
.md-usage-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 120px; padding: 4px 0 16px 26px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Horizontal scale: gridlines + value labels, spanning just the plot area
   (offset by the left gutter so labels sit clear of the bars). */
.md-usage-grid {
  position: absolute; top: 4px; bottom: 16px; left: 26px; right: 0;
  pointer-events: none; z-index: 0;
}
.md-usage-gridline {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.md-usage-gridline-label {
  position: absolute; right: calc(100% + 5px); top: 50%;
  transform: translateY(-50%);
  font-size: calc(8px * var(--wg-text-scale)); line-height: 1; font-family: var(--font-mono);
  color: var(--text-secondary); opacity: 0.55; white-space: nowrap;
}
.md-usage-col {
  flex: 1 1 0; min-width: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; height: 100%;
}
.md-usage-col--clickable { cursor: pointer; }
.md-usage-col--clickable:hover .md-usage-bar { filter: brightness(1.2); }
.md-usage-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.md-usage-bar {
  width: 100%; max-width: 14px; min-height: 0;
  display: flex; flex-direction: column;
  border-radius: 3px 3px 0 0; overflow: hidden;
}
.md-usage-seg { width: 100%; }
.md-usage-day-label {
  position: absolute; bottom: 0;
  font-size: calc(9px * var(--wg-text-scale)); color: var(--text-secondary); line-height: 1;
}

.md-usage-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
.md-usage-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  border-radius: 4px; padding: 2px 4px; margin: -2px -4px;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.md-usage-legend-item:hover { background: rgba(255, 255, 255, 0.06); }
.md-usage-legend-item:focus-visible { outline: 1px solid var(--text-secondary); outline-offset: 1px; }
.md-usage-legend-item--active { background: rgba(255, 255, 255, 0.08); }
.md-usage-legend-item--active .md-usage-legend-label { color: var(--text-primary); }
.md-usage-legend-item--off { opacity: 0.45; }
.md-usage-legend-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.md-usage-legend-label { font-size: calc(11px * var(--wg-text-scale)); color: var(--text-secondary); }
.md-usage-empty { margin: 10px 0 0; font-size: calc(12px * var(--wg-text-scale)); color: var(--text-secondary); text-align: center; }

.md-budget { margin: 0 0 22px; }
.md-budget .settings-dnd-status { margin: 0 0 10px; }
.md-budget-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.md-budget-input {
  width: 7.5rem;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font: inherit;
  font-size: calc(13px * var(--wg-text-scale));
}
.md-budget-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
}
.md-budget-feedback { margin: 8px 0 0; }
.md-budget-feedback.is-error { color: var(--accent-warn, #e8a0a0); }

/* Trust/safety explainer in the Connections panel. */
.settings-explainer {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.05);
}
.settings-explainer-title {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft, var(--text-secondary));
}
.settings-explainer-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 19px;
  color: var(--text-secondary);
}
.settings-explainer-list strong { color: var(--text-primary); font-weight: 600; }
.settings-explainer-list em { font-style: normal; color: var(--text-primary); }

.settings-section-title--danger {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.settings-account-danger {
  margin: 0 0 8px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.settings-account-danger .settings-hint {
  margin: 0;
  line-height: 1.45;
}

/* ==========================================================================
   Confirm-action cards (drafted email / event / file awaiting the user's tap)
   ========================================================================== */
.confirm-card {
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.07);
  padding: 14px 16px;
  margin: 6px 0;
  text-align: left;
}
.confirm-card.director-intake-card {
  background: #14181d;
  border-color: rgba(var(--accent-rgb), 0.35);
}
.confirm-card.is-done { opacity: 0.7; }
.confirm-card-title {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-soft, var(--text-secondary));
  margin-bottom: 10px;
}
.confirm-card-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.confirm-card-row { display: flex; gap: 8px; font-size: calc(14px * var(--wg-text-scale)); line-height: 19px; }
.confirm-card-row .cc-k {
  flex: 0 0 76px;
  color: var(--text-secondary);
  font-size: calc(12px * var(--wg-text-scale));
  padding-top: 1px;
}
.confirm-card-row .cc-v { flex: 1 1 auto; color: var(--text-primary); overflow-wrap: anywhere; }
.confirm-card-body {
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 20px;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.confirm-card-body-edit {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 160px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: inherit;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.18);
}
.confirm-card-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font: inherit;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 19px;
}
.confirm-card-input:focus,
.confirm-card-body-edit:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.45);
}
.confirm-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.confirm-card-btn {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale));
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease, opacity .16s ease;
}
.confirm-card-btn.send { background: var(--accent); color: #0b0d10; }
.confirm-card-btn.send:hover { filter: brightness(1.08); }
.confirm-card-btn.draft {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.confirm-card-btn.draft:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}
.confirm-card-btn.discard { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.confirm-card-btn.discard:hover { background: rgba(255, 255, 255, 0.14); color: var(--text-primary); }
.confirm-card-btn:active { transform: scale(.96); }
.confirm-card-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.confirm-card-attach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
}
.confirm-card-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.confirm-card-attach-chips[hidden] { display: none; }
.confirm-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-primary);
}
.confirm-card-chip-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.confirm-card-chip-x {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: calc(14px * var(--wg-text-scale));
  line-height: 1;
  padding: 0 2px;
}
.confirm-card-chip-x:hover { color: var(--text-primary); }
.confirm-card-attach-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.confirm-card-attach-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  pointer-events: none;
}
.confirm-card-attach-btn > span { pointer-events: none; }
.confirm-card-attach-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}
.confirm-card-attach-btn:disabled,
.confirm-card-attach-btn.is-busy { opacity: 0.5; cursor: default; pointer-events: none; }
.confirm-card-status {
  margin-top: 10px;
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.confirm-card-status-help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-primary);
}
.confirm-card-status-lead {
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 18px;
  color: var(--text-primary);
}
.confirm-card-status-steps {
  margin: 0;
  padding-left: 18px;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 18px;
  color: var(--text-secondary);
}
.confirm-card-status-action {
  margin-top: 2px;
}

/* Loading / error / content states inside the modal. */
.object-modal-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 4px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale));
}
.oc-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--accent-rgb), 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tool-spin .8s linear infinite;
}
.object-modal-error {
  padding: 22px 4px;
  color: var(--error-text);
  font-size: calc(14px * var(--wg-text-scale));
}
.object-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.object-json {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: calc(13px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
  line-height: 19px;
  color: var(--text-secondary);
}

/* Safe-markdown rendering inside the modal — matches templates/agent_reading.html */
.object-md {
  /* Match the chat colour scheme: brand text, dark-glass surface, teal accent
     + teal links (instead of the old lighter #1e1e1e card with blue links). */
  --reading-text: var(--text-primary);
  --reading-heading: rgba(232, 231, 231, 0.96);
  --reading-subheading: #d1d5db;
  --reading-bg: rgba(255, 255, 255, 0.03);
  --reading-border: var(--ds-border-hairline-hover);
  --reading-accent: var(--accent);
  --reading-link: var(--accent);
  --reading-code-bg: rgba(255, 255, 255, 0.06);
  --reading-table-font-size: calc(1em - 2px);

  font-family: var(--font-sans);
  font-size: calc(0.95rem * var(--artifact-doc-zoom, 1));
  line-height: 1.7;
  letter-spacing: 0.015em;
  color: var(--reading-text);
  width: 100%;
  max-width: var(--reading-column-max);
  margin-inline: auto;
  padding: 30px;
  background: var(--reading-bg);
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-inset-top);
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
/* Same measure for the other reading surfaces in this pane: version diff,
   full-document markdown editor, and plain-text artifacts. Agent config and
   artifact sites opt out (iframe / their own 880px cap). */
.object-modal-body > .object-modal-diff,
.object-modal-body > .object-md-title-input,
.object-modal-body > .object-md-markdown-input,
.object-modal-body > .object-text {
  width: 100%;
  max-width: var(--reading-column-max);
  margin-inline: auto;
}
.object-modal-body > .object-text {
  font-size: calc(15px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
}
.object-md h1,
.object-md h2,
.object-md h3,
.object-md h4,
.object-md h5,
.object-md h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2em;
  margin-bottom: 0.8em;
  scroll-margin-top: 12px;
  letter-spacing: -0.01em;
  color: var(--reading-heading);
}
.object-md > :first-child,
.object-md > .artifact-section:first-child > :first-child { margin-top: 0; }
.object-md h1 {
  font-family: var(--font-site-sans);
  font-size: 2.2em;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  border-bottom: 2px solid var(--reading-border);
  padding-bottom: 0.3em;
}
.object-md h2 {
  font-family: var(--font-site-sans);
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -0.025em;
  border-bottom: 1px solid var(--reading-border);
  padding-bottom: 0.3em;
}
.object-md h3 {
  font-family: var(--font-site-sans);
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--reading-subheading);
}
.object-md h4 { font-size: 1.15em; color: var(--reading-subheading); }
.object-md h5 { font-size: 1.05em; color: var(--reading-subheading); }
.object-md h6 {
  font-size: 1em;
  color: var(--reading-subheading);
  font-weight: 600;
}
.object-md p {
  margin: 0 0 1.2em;
  line-height: inherit;
}
.object-md hr {
  height: 1px;
  border: none;
  background-color: var(--reading-border);
  margin: 2em 0;
}
.object-md ul,
.object-md ol {
  margin: 1.2em 0;
  padding-left: 2em;
}
.object-md li { margin: 0 0 0.5em; }
.object-md a {
  color: var(--reading-link);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color .2s ease;
}
.object-md a:hover { border-bottom-color: var(--reading-link); }
.object-md blockquote {
  margin: 1.2em 0;
  padding: 0.1em 1em;
  border-left: 4px solid var(--reading-accent);
  border-radius: 0 4px 4px 0;
  background-color: rgba(255, 255, 255, 0.03);
  color: #a5a5a5;
  line-height: inherit;
}
.object-md code {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 85%;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  background-color: var(--reading-code-bg);
}
.object-md pre {
  margin: 1.2em 0;
  padding: 16px;
  border-radius: 3px;
  background-color: var(--reading-code-bg);
  overflow-x: auto;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 85%;
  line-height: 1.45;
}
.object-md pre code { background: none; padding: 0; font-size: inherit; line-height: inherit; }
.object-md strong,
.object-md b { font-weight: 700; color: inherit; }
.object-md em,
.object-md i { font-style: italic; color: inherit; }
.object-md img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin: 1.5em auto;
  box-sizing: border-box;
  object-fit: contain;
}
.object-md img[src*="/reading/image/"] { cursor: pointer; }
.object-md img.doc-image-selected { outline: 2px solid var(--accent); outline-offset: 3px; }
.object-md .md-table-wrap {
  margin: 1.2em 0;
  max-width: 100%;
  overflow-x: auto;
}
.object-md table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: var(--reading-table-font-size);
}
.object-md th,
.object-md td {
  border: 1px solid var(--reading-border);
  padding: 8px 16px;
  text-align: left;
  vertical-align: top;
}
.object-md th {
  background-color: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}
.object-md tbody tr {
  background-color: var(--reading-bg);
  border-top: 1px solid var(--reading-border);
}
.object-md tbody tr:nth-child(2n) td { background-color: var(--reading-code-bg); }
.object-md .md-table-wrap::-webkit-scrollbar { height: 6px; }
.object-md .md-table-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

/* ==========================================================================
   Reduced motion — freeze decorative loops; keep opacity-only life
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Freeze the start-screen decorative loops (the canvas render loop in app.js
     also checks prefers-reduced-motion and drops rings/particles). */
  .start-glow,
  .start-logo {
    animation: none !important;
  }
  .orb { transition: none; }

  /* §C2 — no slide/scale on cards or the modal; fade only. */
  .chat-objects { animation: none; }
  /* Streamed chunks + rendered markdown appear instantly under reduced-motion. */
  .chat-stream-chunk { animation: none; }
  .chat-word-in { animation: none; transform: none; }
  .chat-msg.assistant.chat-md { animation: none; }
  .chat-thinking-label span { transition: none; opacity: 0.7 !important; }
  .chat-thinking-caret { transition: none; }
  .chat-thinking-details-panel { transition: none; }
  .chat-thinking-details.is-live .chat-thinking-details-label { animation: none; opacity: 0.72; }
  .chat-thinking-details.is-live .chat-thinking-details-inner,
  .chat-thinking-details.is-open:not(.is-live) .chat-thinking-details-inner {
    -webkit-mask-image: none;
            mask-image: none;
    max-height: none;
  }
  .object-modal-sheet {
    transform: none;
    transition: none;
  }
  .object-modal.show .object-modal-sheet { transform: none; }
  .oc-spinner { animation: tool-pulse 1.2s ease-in-out infinite; }

  /* §A/§D — compact rows toggle instantly (no height animation, no chevron
     spin); the detail still reveals via the grid-rows class swap. */
  .object-detail { transition: none; }
  .or-chevron svg { transition: none; }
  .chat-in-progress-watch { transition: none; }
  .chat-in-progress-watch-step { animation: none; }
  .object-row-line:active,
  .or-open:active,
  .transcript-line:active { transform: none; }
}

/* ---- Embedded Director viewer (full-screen) + floating MD chat ---------- */
:root {
  --director-viewer-ease: cubic-bezier(0.32, 0.72, 0, 1); /* Apple-sheet spring */
  --director-viewer-duration: 480ms;
  /* Floating MD window rect — set by app.js, defaults dock bottom-right.
     On open the vars start at full-viewport and animate to the saved rect
     (and back on close), so the chat visibly shrinks into its window. */
  --md-float-x: calc(100vw - 440px);
  --md-float-y: calc(100vh - 660px);
  --md-float-w: 420px;
  --md-float-h: min(70vh, 640px);
  --md-float-r: 16px;
  --md-float-pad: 44px;
}
body.director-viewer-open,
body.document-view-open {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}
.director-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  background: #121212;
  z-index: 400;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.02);
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity var(--director-viewer-duration) ease,
    transform var(--director-viewer-duration) var(--director-viewer-ease),
    filter var(--director-viewer-duration) ease;
}
body.director-viewer-open .director-viewer {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.director-viewer[hidden] {
  display: flex !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}
.director-viewer-resizer {
  display: none;
}

/* Floating MD chat window (desktop only, while a companion surface is open). */
@media (min-width: 900px) {
  body.md-companion-open .stage {
    position: fixed;
    left: var(--md-float-x);
    top: var(--md-float-y);
    width: var(--md-float-w);
    height: var(--md-float-h);
    min-height: 0;
    min-width: 0;
    z-index: 600;
    border-radius: var(--md-float-r);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 2px 12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    /* Room for the drag-handle bar. */
    padding-top: var(--md-float-pad);
    /* The rect vars animate full-screen → float on open (and back on close). */
    transition:
      left var(--director-viewer-duration) var(--director-viewer-ease),
      top var(--director-viewer-duration) var(--director-viewer-ease),
      width var(--director-viewer-duration) var(--director-viewer-ease),
      height var(--director-viewer-duration) var(--director-viewer-ease),
      border-radius var(--director-viewer-duration) ease,
      padding-top var(--director-viewer-duration) ease,
      opacity 220ms ease,
      transform 220ms var(--director-viewer-ease);
  }
  body.md-companion-open.md-float-dragging .stage,
  body.md-companion-open.md-float-resizing .stage {
    transition: none;
  }
  body.md-companion-open .md-float-handle {
    display: flex;
    opacity: 0;
    animation: md-float-handle-in 260ms ease calc(var(--director-viewer-duration) - 120ms) forwards;
  }
  body.md-companion-open .md-float-resize {
    display: block;
  }
  /* Collapsed: the window tucks toward the pill's corner; the pill pops in.
     pointer-events must also clear descendants — it does not inherit, so a
     parent-only `none` leaves #chat / .chat-input (default `auto`) clickable
     over the project surface (stage z-index sits above the viewer). */
  body.md-companion-open.md-float-collapsed .stage,
  body.md-companion-open.md-float-collapsed .stage * {
    pointer-events: none !important;
  }
  body.md-companion-open.md-float-collapsed .stage {
    opacity: 0;
    transform: scale(0.82);
    transform-origin: 100% 100%;
  }
  body.md-companion-open.md-float-collapsed .md-float-pill {
    display: flex;
    animation: md-float-pill-in 300ms var(--director-viewer-ease) 120ms backwards;
  }

  /* Document companion: full-bleed reader under the floating chat (z 600).
     Expand is "take the whole screen", not a centred card on a larger panel. */
  body.document-view-open.md-companion-open #objectModal {
    z-index: 450;
    padding: 0;
    /* Sit under the float; do not block pointer events on the chat window. */
    pointer-events: none;
  }
  body.document-view-open.md-companion-open #objectModal .object-modal-backdrop {
    display: none;
  }
  body.document-view-open.md-companion-open #objectModal .object-modal-stage,
  body.document-view-open.md-companion-open #objectModal .object-modal-sheet,
  body.document-view-open.md-companion-open #objectModal .object-modal-toc,
  body.document-view-open.md-companion-open #objectModal .object-modal-comments,
  body.document-view-open.md-companion-open #objectModal .object-modal-images {
    pointer-events: auto;
  }
  body.document-view-open.md-companion-open #objectModal .object-modal-stage,
  body.document-view-open.md-companion-open #objectModal.has-comments .object-modal-stage,
  body.document-view-open.md-companion-open #objectModal.has-toc-dock .object-modal-stage,
  body.document-view-open.md-companion-open #objectModal.has-toc-dock.has-comments .object-modal-stage {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  body.document-view-open.md-companion-open #objectModal .object-modal-sheet,
  body.document-view-open.md-companion-open #objectModal.has-comments .object-modal-sheet,
  body.document-view-open.md-companion-open #objectModal.has-toc-dock .object-modal-sheet,
  body.document-view-open.md-companion-open #objectModal.has-toc-dock.has-comments .object-modal-sheet {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
}

@keyframes md-float-handle-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fade-to-black scrim masking the floating → normal layout swap on close. */
.mode-fade-scrim {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 950;
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: opacity 240ms ease;
}
.mode-fade-scrim.is-active {
  display: block;
  pointer-events: auto;
}
.mode-fade-scrim.is-dark {
  opacity: 1;
}

/* ---- Projects palette (Cmd+K spotlight) --------------------------------- */
.projects-palette {
  align-items: center;
}
@media (max-width: 768px) {
  .projects-palette {
    /* Pin below the status bar instead of vertically centering a tall sheet. */
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top, 0px) + 28px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
}
.projects-palette .object-modal-sheet.projects-palette-sheet {
  max-width: 600px;
  width: min(600px, calc(100vw - 40px));
  height: auto;
  min-height: max(25vh, 25dvh);
  max-height: var(
    --pp-max-height,
    min(68vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 48px))
  );
  padding: 0;
  margin-top: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(22, 24, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
.projects-palette-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.projects-palette-search svg {
  width: 18px;
  height: 18px;
  opacity: 0.6;
  flex: 0 0 auto;
}
.projects-palette-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  /* ≥16px prevents iOS Safari from zooming when the field is focused. */
  font-size: max(16px, calc(16px * var(--wg-text-scale)));
  line-height: 1.35;
}
.projects-palette-hints {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.projects-palette-hints[hidden] {
  display: none !important;
}
.projects-palette-kbd {
  font-size: calc(11px * var(--wg-text-scale));
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.55;
  font-family: inherit;
}
.projects-palette-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin-left: 2px;
}
.projects-palette-close svg {
  width: 16px;
  height: 16px;
}
.projects-palette-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.projects-palette-tab {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
  font-family: var(--font-sans, inherit);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.projects-palette-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #fff);
}
.projects-palette-tab:focus,
.projects-palette-tab:focus-visible {
  outline: none;
  box-shadow: none;
}
.projects-palette-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}
.projects-palette-tab .pp-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 700;
  line-height: 1;
}
.projects-palette-tab.active .pp-tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-primary, #fff);
}
.projects-palette-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(var(--pp-max-height, 68vh) - var(--pp-chrome-height, 104px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 8px;
}
/* Loading / empty: centre the status line in the tall panel. */
.projects-palette-sheet:has(.projects-palette-list:empty) .projects-palette-list {
  display: none;
}
.projects-palette-sheet:has(.projects-palette-list:empty) .projects-palette-status:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projects-palette-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-radius: 10px;
}
.projects-palette-row.is-active {
  background: rgba(255, 255, 255, 0.08);
}
.projects-palette-row.is-archived {
  opacity: 0.55;
}
.projects-palette-row.is-archived.is-active {
  opacity: 0.7;
}
.projects-palette-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.projects-palette-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.projects-palette-icon img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.projects-palette-initials {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary, #fff);
  text-transform: uppercase;
}
.projects-palette-open .pp-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.projects-palette-open .pp-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(14.5px * var(--wg-text-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.projects-palette-open .pp-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pp-archived-badge {
  flex: 0 0 auto;
  font-size: calc(9px * var(--wg-text-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}
.projects-palette-open .pp-code {
  font-size: calc(12px * var(--wg-text-scale));
  opacity: 0.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.projects-palette-pin {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: none;
  border: none;
  color: inherit;
  opacity: 0;
  cursor: pointer;
  border-radius: 10px;
}
.projects-palette-pin svg {
  width: 15px;
  height: 15px;
}
.projects-palette-row:hover .projects-palette-pin,
.projects-palette-row.is-active .projects-palette-pin,
.projects-palette-pin.is-pinned {
  opacity: 0.55;
}
.projects-palette-pin:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.projects-palette-pin.is-pinned {
  color: var(--accent, #4ec9b0);
  opacity: 1;
}
.projects-palette-pin.is-pinned svg {
  fill: currentColor;
}
.projects-palette-footnote {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 16px 0;
  font-size: calc(12px * var(--wg-text-scale));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
}
.projects-palette-footnote[hidden] {
  display: none !important;
}
.projects-palette-status {
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  margin: 0;
  font-size: calc(13px * var(--wg-text-scale));
  opacity: 0.6;
}

@media (pointer: coarse) {
  .projects-palette-pin {
    opacity: 0.55;
  }
  .projects-palette-pin.is-pinned {
    opacity: 1;
  }
  .projects-palette-open,
  .projects-palette-pin {
    touch-action: manipulation;
  }
}

/* While the window grows back to full-screen on close, dissolve its chrome. */
body.md-float-closing .md-float-handle {
  animation: none;
  opacity: 0 !important;
  transition: opacity 160ms ease;
  pointer-events: none;
}
body.md-float-closing .md-float-resize,
body.md-float-closing .md-float-pill {
  display: none !important;
}
body.md-float-closing .stage {
  border-color: transparent;
  box-shadow: none;
}

@keyframes md-float-pill-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

/* Drag-handle bar pinned to the top of the floating window. */
.md-float-handle {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  z-index: 40;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.md-float-handle:active {
  cursor: grabbing;
}
.md-float-handle-grip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  pointer-events: none;
}
.md-float-handle-grip svg {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.md-float-handle-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-float-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-appearance: none;
          appearance: none;
}
.md-float-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.md-float-btn svg {
  width: 14px;
  height: 14px;
}
.md-float-incognito svg {
  width: 16px;
  height: 16px;
}
.md-float-incognito[aria-pressed="true"] {
  background: var(--accent, #4ec9b0);
  border-color: transparent;
  color: #0f1114;
}
.md-float-incognito[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* Bottom-corner resize grips. */
.md-float-resize {
  display: none;
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 18px;
  z-index: 41;
  touch-action: none;
}
.md-float-resize--bl {
  left: 0;
  cursor: nesw-resize;
}
.md-float-resize--br {
  right: 0;
  cursor: nwse-resize;
}
.md-float-resize--bl::before {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  border-bottom-left-radius: 3px;
}
.md-float-resize--br::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.28);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  border-bottom-right-radius: 3px;
}

/* Floating-mode overrides: MD chrome that is viewport-fixed would otherwise
   escape the floating window and land over the companion content. Hide the bits
   that anchor to viewport corners, and lift full-screen overlays (modals,
   sheets) above the content layer (400–450) and the floating window (600). */
@media (min-width: 900px) {
  body.md-companion-open .settings-cog,
  body.md-companion-open .chat-toolbar,
  body.md-companion-open .chat-scroll-bottom,
  body.md-companion-open .agent-bar-end,
  /* Top-left logo + quick-action stack: the drag handle owns the top edge and
     the window is too narrow for a side column of buttons. */
  body.md-companion-open .chat-logo,
  body.md-companion-open .voice-tools {
    display: none !important;
  }
  /* Size the chat column + composer to the floating window, not the viewport
     (their default widths use vw units, which overflow a 420px window).
     On touch (coarse-pointer) the chat log + composer are normally position:fixed
     to the viewport; inside companion float that leaves them covering the project
     surface (stage z-index 600 sits above the viewer). Re-anchor them to .stage. */
  body.md-companion-open #chat {
    position: absolute !important;
    left: 0;
    right: 0;
    --chat-column-width: calc(100% - 16px);
    top: calc(44px + 10px);
    bottom: calc(env(safe-area-inset-bottom) + 152px);
  }
  body.md-companion-open .chat-input {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    bottom: calc(env(safe-area-inset-bottom) + 14px);
  }
  body.md-companion-open .objects-panel:not(.voice-panel-expanded) {
    width: calc(100% - 24px);
  }
  /* Auto-margin centring (not translateX) so the fixed reading pane stays
     anchored to the viewport — see .chat-compose-chips. */
  body.md-companion-open .chat-compose-chips {
    position: absolute !important;
    left: 0;
    right: 0;
    margin-inline: auto;
    max-width: calc(100% - 24px);
  }
  body.md-companion-open .sources-sheet-panel,
  body.md-companion-open .chat-search-panel,
  body.md-companion-open .agent-connect-panel,
  body.md-companion-open .drop-overlay,
  body.md-companion-open .prep-overlay,
  body.md-companion-open .start-overlay,
  body.md-companion-open .disconnect-overlay,
  body.md-companion-open .genimg-chip,
  body.md-companion-open .toast,
  body.md-companion-open .settings-modal,
  body.md-companion-open .meeting-modal,
  body.md-companion-open .file-note-modal,
  body.md-companion-open .projects-palette {
    z-index: 700;
  }
  /* Float sits at 600 — Resume must stay reachable above a top-docked chat. */
  body.md-companion-open .reclaim-banner,
  body.md-companion-open .voice-blocked-banner {
    z-index: 610;
  }
  /* After Dismiss, Start lives inside the float so the project stays readable. */
  html.paused-for-reclaim body.md-companion-open .start-overlay {
    left: var(--md-float-x);
    top: var(--md-float-y);
    right: auto;
    bottom: auto;
    width: var(--md-float-w);
    height: var(--md-float-h);
    z-index: 610;
    padding: 16px;
    border-radius: var(--md-float-r);
  }
  /* Non-document object modal over Director (transcript/log) — above float.
     Document companion keeps #objectModal under the float (see above). */
  body.director-viewer-open:not(.document-view-open) .object-modal {
    z-index: 700;
  }
}

/* Collapsed pill — a small floating orb that re-expands the chat. */
.md-float-pill {
  display: none;
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #16181c;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 620;
  padding: 0;
}
.md-float-pill:hover {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.3);
}
.md-float-pill img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

/* Minimise the narrow-screen chat sheet back to the pill. Shown only by the
   narrow rules above; it takes the settings cog's slot, since the sheet covers
   the cog while it is open and .chat-toolbar stops short of that corner. */
.md-sheet-min {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 16px);
  z-index: 770;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  place-items: center;
  border: 0.5px solid var(--ui-glass-border);
  background-color: var(--ui-glass-fill);
  -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturate));
          backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturate));
  box-shadow: var(--ui-glass-shadow);
  color: var(--ui-glass-icon);
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
          appearance: none;
}
.md-sheet-min:hover { color: #fff; }
.md-sheet-min:active { transform: scale(0.92); }
.md-sheet-min:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.md-sheet-min svg { width: 20px; height: 20px; }

/* The viewer always hosts the React console now, and the console draws its own
   top bar carrying credits, Deploy and a close button, plus a hero header that
   repeats the project title. Keeping this header would stack two bars and show
   the title twice at every width, so it stays hidden and the console's close
   button is the way out of the pane. The markup and the styles below are kept
   for any embed that has no chrome of its own. */
.director-viewer-head {
  display: none;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 18, 0.96);
  flex-shrink: 0;
}
.director-viewer-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-appearance: none;
          appearance: none;
}
.director-viewer-back svg {
  width: 18px;
  height: 18px;
}
.director-viewer-back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
.director-viewer-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.director-viewer-frame {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background: #121212;
}
@media (max-width: 899px) {
  /* Narrow screens cannot tile or float the chat beside a project or document,
     so it becomes a full-bleed sheet over the surface, launched from the pill
     and sent back by the minimise button. Minimised is the resting state. */
  body.md-companion-open .stage,
  body.md-mobile-companion.md-float-collapsed .stage {
    display: none !important;
  }
  body.md-mobile-companion:not(.md-float-collapsed) .stage {
    position: fixed;
    inset: 0;
    /* Over the Director viewer (400) and the narrow document modal (700). */
    z-index: 760;
    min-height: 0;
    height: 100svh;
  }
  body.md-mobile-companion.md-float-collapsed .md-float-pill {
    display: flex !important;
    z-index: 750;
  }
  /* Sheet is 760 and the document modal is 700 — keep Resume above both. */
  body.md-mobile-companion .reclaim-banner,
  body.document-view-open .reclaim-banner {
    z-index: 770;
  }
  html.paused-for-reclaim body.md-mobile-companion:not(.md-float-collapsed) .start-overlay {
    z-index: 770;
  }
  body.md-mobile-companion:not(.md-float-collapsed) .md-sheet-min {
    display: grid;
  }
  /* Document modal must sit above the Director iframe on narrow screens
     (chat is hidden; modal is the only way to read the doc). */
  body.document-view-open #objectModal {
    z-index: 700;
  }
  /* The iframe document can't see the notch (env() is 0 inside iframes on
     iOS), so push the frame below the status bar from out here. */
  body.director-viewer-open .director-viewer {
    padding-top: max(10px, env(safe-area-inset-top));
  }
  body.director-viewer-open .director-viewer-frame {
    flex: 1 1 auto;
  }
  .director-viewer {
    transform: translateY(20px);
  }
  body.director-viewer-open .director-viewer {
    transform: translateY(0);
  }
  .md-float-handle,
  .md-float-resize,
  .md-float-pill {
    display: none !important;
  }
}

/* ---- Expertise panel (agent-connect overlay shell) ---------------------- */
.expertise-panel .expertise-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.expertise-head .agent-connect-title {
  flex: 1;
  min-width: 0;
}
.expertise-head-back {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.expertise-head-back:hover {
  background: rgba(255, 255, 255, 0.12);
}
.expertise-head-back svg { width: 16px; height: 16px; }
.expertise-head-back[hidden] { display: none !important; }
.expertise-title-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expertise-help-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.expertise-help-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}
.expertise-help-btn svg { width: 18px; height: 18px; }

.expertise-help[hidden] { display: none !important; }
.expertise-help {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
.expertise-help-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.expertise-help-sheet {
  position: relative;
  width: 100%;
  max-height: min(72vh, 420px);
  display: flex;
  flex-direction: column;
  background: rgba(28, 31, 36, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.expertise-help-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.expertise-help-title {
  flex: 1;
  margin: 0;
  font-size: calc(15px * var(--wg-text-scale));
  font-weight: 500;
  color: var(--text-primary);
}
.expertise-help-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.expertise-help-lead {
  margin: 0 0 14px;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.5;
  color: var(--text-secondary);
}
.expertise-help-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.45;
  color: var(--text-primary);
}
.expertise-help-list li { padding-left: 2px; }
.expertise-help-list strong {
  color: var(--text-primary);
  font-weight: 600;
}
.expertise-help-list em {
  color: var(--text-secondary);
  font-style: normal;
}

.expertise-sheet {
  position: relative;
  overflow: hidden;
}

.expertise-gallery-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.expertise-panel--detail .expertise-gallery-wrap {
  display: none;
}

.expertise-search-pill {
  margin-bottom: 0;
}

.expertise-filters {
  margin-top: 12px;
}
.expertise-filter-tabs {
  display: inline-flex;
  gap: 4px;
}
.expertise-filter-tab {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.expertise-filter-tab.is-active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}
.expertise-filter-tab:hover:not(.is-active) { color: var(--text-primary); }

.expertise-panel .agent-connect-label {
  margin-top: 16px;
}
.expertise-list {
  margin-top: 0;
  margin-bottom: 4px;
}
.expertise-empty {
  margin: 8px 0 0;
  padding: 0;
  font-size: calc(13px * var(--wg-text-scale));
  color: var(--text-secondary);
}

/* Agent Skills panel: native file input is the hit target (no showPicker). */
.agent-skills-upload-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: calc(13px * var(--wg-text-scale));
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.agent-skills-upload-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text-primary);
}
.agent-skills-upload-btn:focus-within {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}
.agent-skills-upload-ui {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.agent-skills-upload-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.agent-skills-upload-input,
.agent-skills-file-input,
.native-file-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0.01;
  cursor: pointer;
  font-size: 16px;
}
.agent-skills-upload-input:focus,
.agent-skills-upload-input:focus-visible,
.agent-skills-file-input:focus,
.agent-skills-file-input:focus-visible,
.native-file-hit:focus,
.native-file-hit:focus-visible {
  outline: none;
}
.agent-skill-file-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Agent Skills panel: expanded detail (sharing + delete) */
.agent-skill-detail {
  margin: 2px 0 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-skill-detail-desc {
  margin: 0;
  font-size: calc(12.5px * var(--wg-text-scale));
  line-height: 1.45;
  color: var(--text-secondary);
}
.agent-skill-share-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agent-skill-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: calc(12.5px * var(--wg-text-scale));
  color: var(--text-primary);
}
.agent-skill-share-add {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agent-skill-share-select,
.agent-skill-share-input {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: calc(12.5px * var(--wg-text-scale));
  font-family: inherit;
}
.agent-skill-share-select { flex: 0 0 auto; }
.agent-skill-share-input { flex: 1 1 auto; min-width: 0; }
.agent-skill-share-input::placeholder { color: var(--text-secondary); }
.agent-skill-mini-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: calc(12px * var(--wg-text-scale));
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.agent-skill-mini-btn:hover { background: rgba(255, 255, 255, 0.1); }
.agent-skill-mini-btn--primary {
  border-color: rgba(78, 201, 176, 0.4);
  background: rgba(78, 201, 176, 0.12);
}
.agent-skill-mini-btn--primary:hover { background: rgba(78, 201, 176, 0.2); }
.agent-skill-mini-btn--danger {
  border-color: rgba(255, 99, 99, 0.35);
  background: rgba(255, 99, 99, 0.08);
  color: #ff8a8a;
}
.agent-skill-mini-btn--danger:hover { background: rgba(255, 99, 99, 0.16); }
.agent-skill-pack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
  padding-top: 10px;
}
.agent-skill-delete-row {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
  padding-top: 10px;
}

/* Detail view */
.expertise-detail {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.expertise-detail[hidden] { display: none !important; }
.expertise-panel--detail .expertise-detail {
  display: flex;
}

.expertise-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exp-detail-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.exp-detail-head-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exp-detail-name {
  margin: 0;
  font-size: calc(15px * var(--wg-text-scale));
  line-height: 1.25;
}
.exp-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exp-detail-desc {
  margin: 0;
  font-size: calc(13px * var(--wg-text-scale));
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.exp-detail-meta { margin: 0; }
.exp-detail-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exp-detail-block .history-subgroup-head {
  padding: 0;
}
.exp-usage-list { margin-top: 2px; }
.exp-usage-summary {
  margin: 0 0 8px;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
  line-height: 1.4;
}
.exp-usage-chart-wrap {
  min-height: 96px;
}
.exp-usage-chart {
  height: 110px;
  gap: 3px;
}
.exp-usage-legend {
  margin-top: 8px;
}
.exp-usage-legend-item {
  cursor: default;
  pointer-events: none;
}
.exp-usage-back {
  align-self: flex-start;
  margin: 8px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent-soft);
  font-size: calc(12px * var(--wg-text-scale));
  cursor: pointer;
}
.exp-usage-back:hover { color: var(--accent); }
.exp-usage-day { margin-top: 6px; }
.exp-usage-col--selected .md-usage-bar {
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 1px;
}

.exp-code {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--wg-text-scale));
  opacity: .85;
}
.exp-code-link {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--accent-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.exp-code-link:hover {
  color: var(--accent);
}
.exp-link {
  color: var(--accent-soft);
  text-decoration: none;
}
.exp-link:hover { text-decoration: underline; }

/* ---- Multi-instance floating document windows ---------------------------- */
.doc-windows-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 410;
}
.doc-windows-host > * {
  pointer-events: auto;
}

.doc-window.doc-window--float {
  position: fixed;
  inset: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 2px 12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  background: var(--ds-overlay-bg, rgba(18, 20, 24, 0.96));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 1;
  max-width: none;
  max-height: none;
}
.doc-window.doc-window--float .object-modal-backdrop,
.doc-window.doc-window--docked .object-modal-backdrop,
.doc-window.doc-window--fullscreen .object-modal-backdrop {
  display: none;
}
.doc-window.doc-window--float .object-modal-stage,
.doc-window.doc-window--float .object-modal-sheet,
.doc-window.doc-window--docked .object-modal-stage,
.doc-window.doc-window--docked .object-modal-sheet,
.doc-window.doc-window--fullscreen .object-modal-stage,
.doc-window.doc-window--fullscreen .object-modal-sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.doc-window.doc-window--float .object-modal-stage,
.doc-window.doc-window--docked .object-modal-stage,
.doc-window.doc-window--fullscreen .object-modal-stage {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
  position: relative;
}
.doc-window.doc-window--float .object-modal-sheet,
.doc-window.doc-window--docked .object-modal-sheet,
.doc-window.doc-window--fullscreen .object-modal-sheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.doc-window.doc-window--float .object-modal-split,
.doc-window.doc-window--float .object-modal-main,
.doc-window.doc-window--float .object-modal-body,
.doc-window.doc-window--docked .object-modal-split,
.doc-window.doc-window--docked .object-modal-main,
.doc-window.doc-window--docked .object-modal-body,
.doc-window.doc-window--fullscreen .object-modal-split,
.doc-window.doc-window--fullscreen .object-modal-main,
.doc-window.doc-window--fullscreen .object-modal-body {
  min-height: 0;
  flex: 1 1 auto;
}

/* Expand: the artifact fills the viewport (chat floats over it). */
.doc-window.doc-window--fullscreen {
  position: fixed;
  inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--ds-overlay-bg, #121419);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}
.doc-window.doc-window--fullscreen .doc-window-float-handle,
.doc-window.doc-window--fullscreen .doc-window-float-resize,
.doc-window.doc-window--fullscreen .doc-window-pill {
  display: none !important;
}
.doc-window.doc-window--fullscreen.is-focused {
  box-shadow: none;
}
.doc-window.doc-window--fullscreen .object-modal-head {
  flex: 0 0 auto;
  min-height: 56px;
  padding: 8px 14px 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Agent configuration pane. The Console screen brings its own padding and
   scrolling, so the reader's page margins would only box it in. */
.doc-window.doc-window--agent .object-modal-body {
  padding: 0;
  overflow: hidden;
  display: flex;
}
.doc-window-agent-frame {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  color-scheme: dark;
}

.doc-window.doc-window--transcript .object-modal-head {
  flex-wrap: nowrap;
}
.doc-window.doc-window--transcript .object-modal-headline {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px 12px;
}
.doc-window.doc-window--transcript .object-modal-head-actions {
  flex: 0 1 auto;
  min-width: 0;
}
.doc-window.doc-window--transcript .object-modal-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-0, #090a0c);
  color: var(--text-primary);
  font-size: calc(14px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
  line-height: 1.7;
}
.doc-window.doc-window--transcript .object-modal-body > .object-modal-loading,
.doc-window.doc-window--transcript .object-modal-body > .object-modal-error {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
}
.doc-window.doc-window--transcript [data-role="editDoc"],
.doc-window.doc-window--transcript [data-role="fullDoc"],
.doc-window.doc-window--transcript [data-role="views"],
.doc-window.doc-window--transcript [data-role="editHint"],
.doc-window.doc-window--transcript [data-role="commentsBtn"],
.doc-window.doc-window--transcript [data-role="tocBtn"],
.doc-window.doc-window--transcript [data-role="shareWrap"],
.doc-window.doc-window--transcript [data-role="meetingWrap"],
.doc-window.doc-window--transcript [data-role="copyWrap"],
.doc-window.doc-window--transcript [data-role="download"],
.doc-window.doc-window--transcript [data-role="versionNav"],
.doc-window.doc-window--transcript [data-role="genImg"],
.doc-window.doc-window--transcript [data-role="mute"] {
  display: none !important;
}
.doc-window-transcript-views {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}
.doc-window-transcript-views[hidden] { display: none !important; }
.doc-window-transcript-views button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: calc(12px * var(--wg-text-scale));
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.doc-window-transcript-views button.on {
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), 0.16);
}
.doc-window-transcript-who {
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}
.doc-window-transcript-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-0, #090a0c);
}
.doc-window-transcript-log,
.doc-window-transcript-doc {
  --chat-column-width: min(var(--chat-column-max), calc(100% - 48px));
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px max(24px, calc((100% - var(--chat-column-width)) / 2)) 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 100%);
}
.doc-window-transcript-log .chat-msg {
  animation: none;
}
.doc-window-transcript-log .chat-msg.assistant.chat-md {
  animation: none;
}
.doc-window-transcript-log .chat-msg-meta {
  opacity: 0.85;
}
.doc-window-transcript-log .chat-msg-time {
  opacity: 0.8;
  color: var(--text-secondary);
}
.doc-window-transcript-log .chat-copy {
  border-radius: 6px;
}
.doc-window-transcript-log .chat-copy.is-copied {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
}
.doc-window-transcript-log .chat-msg.user .chat-msg-body {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
.doc-window-transcript-log > .chat-document-chip {
  align-self: flex-start;
  margin: 0 0 4px;
}
.doc-window-transcript-empty {
  margin: 8px 0 0;
  color: var(--text-secondary);
}
.doc-window.doc-window--transcript .chat-msg {
  font-size: calc(14px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
}
.doc-window.doc-window--transcript .chat-msg-time {
  font-size: calc(10px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
}
.doc-window.doc-window--transcript .chat-document-chip {
  font-size: calc(11px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
}
.doc-window-transcript-day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.doc-window-transcript-day::before,
.doc-window-transcript-day::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.doc-window-transcript-log .chat-msg-who {
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale) * var(--artifact-doc-zoom, 1));
  letter-spacing: 0.03em;
}

/* ---- Transcript time rail ------------------------------------------------ */
.doc-window-transcript-shell {
  position: relative;
}
.doc-window-transcript-shell.has-rail .doc-window-transcript-log {
  padding-right: max(30px, calc((100% - var(--chat-column-width)) / 2));
  scrollbar-width: none;
}
.doc-window-transcript-shell.has-rail .doc-window-transcript-log::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tx-rail {
  --tx-rail-w: 7px;
  position: absolute;
  top: 14px;
  right: 5px;
  bottom: 18px;
  width: var(--tx-rail-w);
  z-index: 3;
  cursor: pointer;
  touch-action: none;
  transition: width 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tx-rail[hidden] { display: none !important; }
.tx-rail:hover,
.tx-rail:focus-visible,
.tx-rail.is-dragging,
.tx-rail.has-matches {
  --tx-rail-w: 16px;
}
.tx-rail:focus-visible {
  outline: none;
}
.tx-rail-track {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.tx-rail:focus-visible .tx-rail-track {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55);
}
.tx-rail-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tx-rail-matches {
  pointer-events: auto;
}
.tx-rail-band,
.tx-rail-tick,
.tx-rail-turn,
.tx-rail-match {
  position: absolute;
  display: block;
}
.tx-rail-band {
  left: 0;
  right: 0;
  background: transparent;
}
.tx-rail-band.is-alt {
  background: rgba(255, 255, 255, 0.05);
}
.tx-rail-tick {
  left: 0;
  right: 0;
  height: 1px;
}
.tx-rail-tick.is-day {
  background: rgba(255, 255, 255, 0.34);
}
.tx-rail-tick.is-gap {
  background: rgba(255, 255, 255, 0.14);
  height: 3px;
  left: 35%;
  right: 35%;
  border-radius: 2px;
}
.tx-rail-turn {
  height: 2px;
  border-radius: 1px;
  opacity: 0.55;
}
.tx-rail-turn.is-agent {
  left: 1px;
  width: 45%;
  background: rgba(125, 154, 163, 0.85);
}
.tx-rail-turn.is-user {
  right: 1px;
  width: 45%;
  background: rgba(255, 255, 255, 0.5);
}
.tx-rail-match {
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: rgb(var(--accent-rgb));
  box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.7);
  cursor: pointer;
}
.tx-rail-match.is-current {
  height: 4px;
  background: #fff;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.9);
}
.tx-rail-thumb {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.tx-rail:hover .tx-rail-thumb,
.tx-rail.is-dragging .tx-rail-thumb {
  background: rgba(255, 255, 255, 0.26);
}
.tx-rail-label {
  position: absolute;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(12, 14, 17, 0.94);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-size: calc(11px * var(--wg-text-scale));
  pointer-events: none;
}
.tx-rail-label[hidden] { display: none !important; }
html.coarse-pointer .tx-rail {
  --tx-rail-w: 12px;
  right: 4px;
}
html.coarse-pointer .tx-rail:hover,
html.coarse-pointer .tx-rail.is-dragging,
html.coarse-pointer .tx-rail.has-matches {
  --tx-rail-w: 22px;
}

/* ---- Transcript search --------------------------------------------------- */
.tx-search {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 140px;
  min-width: 0;
  max-width: 280px;
}
.tx-search[hidden] { display: none !important; }
.tx-search-input {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font: inherit;
  font-size: calc(12px * var(--wg-text-scale));
  padding: 5px 9px;
}
.tx-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.75;
}
.tx-search-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55);
}
.tx-search-count {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: calc(11px * var(--wg-text-scale));
  font-variant-numeric: tabular-nums;
}
.tx-search.is-empty .tx-search-count {
  color: var(--danger, #e0715f);
}
.tx-search-step {
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  line-height: 1;
  padding: 4px 5px;
  cursor: pointer;
}
.tx-search-step:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.tx-search-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.doc-window-transcript-log mark.tx-hit {
  background: rgba(var(--accent-rgb), 0.28);
  color: var(--text-primary);
  border-radius: 3px;
  padding: 0 1px;
}
.doc-window-transcript-log .chat-msg.is-search-current mark.tx-hit {
  background: rgb(var(--accent-rgb));
  color: #0d1013;
}
.doc-window-transcript-log .chat-msg.is-search-current .chat-msg-body {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.5);
}
.doc-window-transcript-doc-title {
  margin: 0 auto 8px;
  max-width: var(--reading-column-max);
  width: 100%;
  font-size: 1.15em;
  font-weight: 600;
  color: var(--text-primary);
}
.doc-window-transcript-doc-body {
  max-width: var(--reading-column-max);
}

/* Overlay TOC sits in the split below the title bar, above the document. */
.doc-window.has-toc-overlay .object-modal-toc {
  position: absolute !important;
  top: 8px;
  left: 8px;
  bottom: 8px;
  width: 302px;
  max-height: none;
  z-index: 40;
  display: flex !important;
}
.doc-window.has-toc-dock .object-modal-toc {
  position: relative !important;
  top: auto;
  left: auto;
  bottom: auto;
  z-index: 1;
  flex: 0 0 302px;
  width: 302px;
  max-height: none;
  align-self: stretch;
  margin: 8px 0 8px 8px;
  display: flex !important;
}

.doc-window-float-handle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 12px;
  cursor: grab;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  touch-action: none;
}
.doc-window.doc-window--float .doc-window-float-handle {
  display: flex;
}
.doc-window-float-handle:active {
  cursor: grabbing;
}
.doc-window-float-grip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.72);
}
.doc-window-float-grip svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.7;
}
.doc-window-float-title {
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-window-float-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.doc-window-float-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.doc-window-float-btn svg {
  width: 14px;
  height: 14px;
}
.doc-window-float-resize {
  display: none;
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 18px;
  touch-action: none;
  z-index: 5;
}
.doc-window.doc-window--float .doc-window-float-resize {
  display: block;
}
.doc-window-float-resize--bl {
  left: 0;
  cursor: nesw-resize;
}
.doc-window-float-resize--br {
  right: 0;
  cursor: nwse-resize;
}
.doc-window-float-resize--bl::before {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  border-bottom-left-radius: 3px;
}
.doc-window-float-resize--br::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.35);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  border-bottom-right-radius: 3px;
}

.doc-window.is-float-collapsed,
.doc-window.is-float-collapsed * {
  pointer-events: none !important;
}
.doc-window.is-float-collapsed {
  opacity: 0 !important;
  transform: scale(0.92);
}

.doc-window-pill {
  position: fixed;
  right: 22px;
  bottom: 86px;
  max-width: 220px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #16181c;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(12px * var(--wg-text-scale));
  font-weight: 600;
  cursor: pointer;
  z-index: 620;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.doc-window-pill[hidden] {
  display: none !important;
}
.doc-window-pill:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.doc-window-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stack minimised pills */
.doc-windows-host .doc-window-pill:nth-of-type(1) { bottom: 86px; }
.doc-windows-host .doc-window-pill:nth-of-type(2) { bottom: 132px; }
.doc-windows-host .doc-window-pill:nth-of-type(3) { bottom: 178px; }
.doc-windows-host .doc-window-pill:nth-of-type(4) { bottom: 224px; }

.doc-window.is-focused {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 24px 80px rgba(0, 0, 0, 0.7);
}

/* Narrow overlay mode reuses classic object-modal layout */
.doc-window.doc-window--overlay {
  z-index: 700;
}
.doc-window.doc-window--overlay .doc-window-float-handle,
.doc-window.doc-window--overlay .doc-window-float-resize {
  display: none !important;
}

/* Chat companion also floats when document windows are open (same as director). */
body.md-docs-open {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}
@media (min-width: 900px) {
  body.md-companion-open.md-docs-open .stage {
    z-index: 600;
  }
  /* Floating docs sit under the chat float */
  body.md-companion-open .doc-windows-host {
    z-index: 450;
  }
}

/* ==========================================================================
   Docked split layout — chat on the left, document on the right, tiled to the
   viewport with a draggable divider between them. Distinct from companion
   float (md-companion-open): here neither pane floats, and the chat keeps its
   normal chrome. Widths come from split_layout.js as --md-split-*.
   ========================================================================== */
.md-split-divider {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--md-split-chat-w);
  width: 9px;
  margin-left: -4px;
  z-index: 620;
  /* The plate is full-height so the hairline can run through the header, but
     hits are disabled here — otherwise the 9px grip (z 620, stage is 500)
     swallows the DND / incognito / settings controls that sit on the split. */
  pointer-events: none;
  touch-action: none;
  background: transparent;
}
.md-split-divider[hidden] {
  display: none !important;
}
.md-split-divider::before {
  content: "";
  position: absolute;
  /* Below the 40px toolbar row (14px inset + 40px + 4px slack). */
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: auto;
  cursor: col-resize;
}
.md-split-divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--ds-duration-fast, 140ms) ease;
}
.md-split-divider:hover::after,
.md-split-divider:focus-visible::after,
body.md-split-dragging .md-split-divider::after {
  background: var(--accent, #4ec9b0);
}
.md-split-divider:focus-visible {
  outline: none;
}

@media (min-width: 900px) {
  body.md-split-open {
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    --chat-column-width: min(var(--chat-column-max), calc(var(--md-split-chat-w) - var(--chat-rail-gutter) - var(--chat-rail-end)));
  }
  body.md-split-open .md-split-divider {
    display: block;
  }

  /* Left pane. The chat's own children are absolutely positioned inside
     .stage, so constraining the stage is enough to reflow the conversation. */
  body.md-split-open .stage {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--md-split-chat-w);
    height: 100vh;
    height: 100svh;
    min-width: 0;
    min-height: 0;
    z-index: 500;
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    overflow: hidden;
    transition:
      width var(--director-viewer-duration) var(--director-viewer-ease);
  }
  body.md-split-dragging .stage,
  body.md-split-dragging .doc-window--docked {
    transition: none !important;
  }
  /* The chat column and composer default to vw widths; re-anchor to the pane.
     On touch, html.coarse-pointer.mode-chat pins #chat / .chat-input /
     .chat-compose-chips to the viewport (so the keyboard can lift them).
     overflow:hidden on .stage does not clip position:fixed descendants, so
     those layers paint over the project pane — the iPad split failure.
     Companion float already re-anchors with !important; split must too, or
     html.coarse-pointer.mode-chat #chat (0,3,1) beats this rule (0,2,1).
     Leave `bottom` alone so --chat-kb-offset still applies. */
  body.md-split-open #chat {
    position: absolute !important;
    left: 0;
    right: 0;
    --chat-column-width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
  }
  body.md-split-open .chat-input {
    position: absolute !important;
    left: max(var(--chat-rail-gutter), calc((100% - var(--chat-column-width)) / 2));
    transform: none;
    width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
    max-width: calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end));
  }
  body.md-split-open .objects-panel:not(.voice-panel-expanded) {
    left: max(var(--chat-rail-gutter), calc((100% - var(--chat-column-width)) / 2));
    transform: none;
    width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
    max-width: calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end));
  }
  /* The chips strip (inbox, reply context, attachments) must track the same
     pane-anchored width as the composer, not its default 92vw. */
  body.md-split-open .chat-compose-chips {
    position: absolute !important;
    left: max(var(--chat-rail-gutter), calc((100% - var(--chat-column-width)) / 2));
    right: auto;
    margin-inline: 0;
    width: min(var(--chat-column-max), calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end)));
    max-width: calc(100% - var(--chat-rail-gutter) - var(--chat-rail-end));
  }

  /* Right pane. */
  body.md-split-open .doc-windows-host {
    z-index: 440;
  }
  body.md-split-open .doc-window--docked {
    position: fixed;
    inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) var(--md-split-chat-w);
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--ds-overlay-bg, #121419);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    transition:
      left var(--director-viewer-duration) var(--director-viewer-ease);
  }
  /* No window chrome in a docked pane: no drag bar, resize grips or pill. */
  body.md-split-open .doc-window--docked .doc-window-float-handle,
  body.md-split-open .doc-window--docked .doc-window-float-resize,
  body.md-split-open .doc-window-pill,
  body.md-split-open .md-float-handle,
  body.md-split-open .md-float-resize,
  body.md-split-open .md-float-pill {
    display: none !important;
  }
  body.md-split-open .doc-window--docked.is-focused {
    box-shadow: none;
  }

  /* The document head becomes the pane header from the design: a fixed-height
     bar with the title and actions, separated from the body by a hairline. */
  body.md-split-open .doc-window--docked .object-modal-head {
    flex: 0 0 auto;
    min-height: 56px;
    /* Tighter than the modal's own padding so a document with no subhead lands
       on 56px — the same bar height the project pane uses, since the two swap
       places in this slot. Docs with a subhead still grow past it. */
    padding: 8px 14px 8px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* The project viewer is the pane's other occupant. Same rect as a docked
     document, minus the full-bleed entry animation — inside the pane there is
     nothing for it to scale up from. It sits just below the document host so
     an artifact opened from the timeline covers it without unloading it, and
     closing that artifact reveals the project again instantly.
     `inset` (not only `left`) overrides the base `.director-viewer { inset: 0;
     width: 100% }` so the iframe cannot remain full-bleed under the chat.
     Iframe documents see env(safe-area-inset-*) = 0 on iOS, so the host must
     clear the status bar / home indicator. Desktop insets are 0. */
  body.md-split-open.md-split-project .director-viewer {
    inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) var(--md-split-chat-w);
    width: auto;
    height: auto;
    z-index: 430;
    transform: none;
    filter: none;
    overflow: hidden;
    background: #121212;
    transition:
      left var(--director-viewer-duration) var(--director-viewer-ease),
      opacity var(--director-viewer-duration) ease;
  }
  body.md-split-open.md-split-project .director-viewer-frame {
    min-height: 0;
    height: 100%;
    flex: 1 1 0;
  }
  body.md-split-dragging .director-viewer {
    transition: none !important;
  }
  /* Viewport-fixed chat chrome must stay inside the left pane. Unlike
     companion float, split keeps this chrome visible — it is only re-anchored.
     .settings-cog sits outside .stage, so it also needs to clear the pane's
     stacking context. */
  body.md-split-open .settings-cog {
    right: calc(var(--md-split-doc-w) + env(safe-area-inset-right) + 16px);
    z-index: 610;
  }
  /* Same toolbar slot as coarse-pointer: start after the logo so pills
     scroll instead of painting under it when the pane is a few hundred px.
     overflow-x:auto forces overflow-y to auto as well — the DND menu is
     position:fixed so that clip cannot hide it. mode-chat lives on <html>,
     md-split-open on <body> — do not combine them on one element. */
  body.md-split-open .chat-logo {
    z-index: 9;
  }
  body.md-split-open .chat-toolbar {
    left: calc(env(safe-area-inset-left) + 16px + 40px + 12px);
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.md-split-open .chat-toolbar::-webkit-scrollbar {
    display: none;
  }
  /* Split is a wide window with a narrow pane. Force icons even if
     the toolbar container query has not applied yet (first paint / drag). */
  body.md-split-open .chat-recent-open:has(.cro-icon) .cro-label {
    display: none;
  }
  body.md-split-open .chat-recent-open:has(.cro-icon) .cro-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  body.md-split-open .chat-recent-open:has(.cro-icon) {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  body.md-split-open .chat-recent-open:has(.cro-icon) .cro-count {
    position: absolute;
    top: -2px;
    right: -2px;
  }
  body.md-split-open .chat-scroll-bottom {
    left: calc(var(--md-split-chat-w) / 2);
  }
  body.md-split-open .agent-bar-end {
    left: calc(var(--md-split-chat-w) / 2);
    max-width: min(520px, calc(var(--md-split-chat-w) - 140px));
  }
  body.md-split-open .reclaim-banner,
  body.md-split-open .voice-blocked-banner {
    right: var(--md-split-doc-w);
    z-index: 610;
  }
  /* After Dismiss, Start stays in the chat pane — do not cover the document. */
  html.paused-for-reclaim body.md-split-open .start-overlay {
    right: var(--md-split-doc-w);
    z-index: 610;
  }

  /* Full-screen overlays must clear both panes (the chat pane is a stacking
     context at 500). Listed explicitly so the docked .object-modal pane, which
     shares the base class, is not lifted with them. */
  body.md-split-open .settings-modal,
  body.md-split-open .meeting-modal,
  body.md-split-open .file-note-modal,
  body.md-split-open .projects-palette,
  body.md-split-open .object-modal:not(.doc-window),
  body.md-split-open .drop-overlay,
  body.md-split-open .prep-overlay,
  body.md-split-open .start-overlay,
  body.md-split-open .disconnect-overlay,
  body.md-split-open .agent-connect-panel {
    z-index: 700;
  }

  /* Overlay TOC is anchored to the split below the title bar. */
  body.md-split-open .doc-window--docked.has-toc-overlay .object-modal-toc {
    position: absolute !important;
    top: 8px;
    left: 8px;
    bottom: 8px;
    width: 302px;
    max-height: none;
    z-index: 40;
    display: flex !important;
  }
  body.md-split-open .doc-window--docked.has-toc-dock .object-modal-toc {
    position: relative !important;
    top: auto;
    left: auto;
    bottom: auto;
    z-index: 1;
    margin: 8px 0 8px 8px;
  }
}

/* ---- Feature banners (Cursor-style product cards on the MD rail) -------- */
.feature-banner-host {
  position: relative;
  margin-top: 4px;
}
.feature-banner-chip {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ui-glass-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #14161a;
  position: relative;
}
.feature-banner-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feature-banner-chip-sliver {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.feature-banner-chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent);
}
.feature-banner-panel {
  position: absolute;
  left: 52px;
  bottom: 0;
  width: 320px;
  z-index: 20;
  border-radius: 16px;
  overflow: hidden;
  background: #111316;
  border: 1px solid var(--ui-glass-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.feature-banner-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.feature-banner-hero {
  position: relative;
  height: 168px;
  background: #0b0d10 center/cover no-repeat;
}
.feature-banner-hero--missing {
  background: #5a1c1c;
}
.feature-banner-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.feature-banner-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.feature-banner-dismiss svg { width: 14px; height: 14px; }
.feature-banner-body {
  padding: 18px 18px 8px;
}
.feature-banner-kicker {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.feature-banner-title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  color: #fff;
}
.feature-banner-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.feature-banner-highlight {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}
.feature-banner-highlight-icon {
  width: 22px;
  height: 22px;
  color: #fff;
  margin-top: 1px;
}
.feature-banner-highlight-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.feature-banner-highlight h4 {
  margin: 0 0 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 650;
  color: #fff;
}
.feature-banner-highlight p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.58);
}
.feature-banner-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 18px;
}
.feature-banner-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  text-decoration: none;
}
.feature-banner-learn:hover { color: #fff; }
.feature-banner-learn svg { width: 12px; height: 12px; }
.feature-banner-cta {
  margin-left: auto;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--accent);
  color: #0b0d10;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.feature-banner-cta--wide { width: 100%; margin-left: 0; }
.feature-banner-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.feature-banner-later {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.feature-banner-later:hover { color: rgba(255, 255, 255, 0.8); }

.settings-feature-banners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.settings-feature-banner {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
}
.settings-feature-banner.is-ended {
  opacity: 0.55;
}
.settings-feature-banner-thumb {
  width: 56px;
  height: 56px;
  background: #14161a center/cover no-repeat;
}
.settings-feature-banner-meta {
  padding: 8px 10px 8px 0;
}
.settings-feature-banner-title {
  display: block;
  font-size: calc(14px * var(--wg-text-scale));
  font-weight: 600;
  color: var(--text);
}
.settings-feature-banner-sub {
  display: block;
  margin-top: 2px;
  font-size: calc(12px * var(--wg-text-scale));
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .feature-banner-panel {
    left: 0;
    bottom: 48px;
    width: min(320px, calc(100vw - 32px));
  }
}