/*
 * V1.1 styles — applied when body.v3-chrome is present.
 *
 * Scoped to the briefing surface (the .center element). Wings and chrome
 * stay on V1 styles for now; this file focuses on the new briefing anatomy:
 * editorial header, item cards with bodies, Now Line, section breaks,
 * collapsed snapshot cards, Earlier Today divider, footer actions.
 *
 * Relies on the existing design tokens in styles.css (var(--bg),
 * var(--surface), var(--text-*), var(--accent), var(--module-*)).
 */

body.v3-chrome {
  /*
   * V1.1 palette — overrides styles.css tokens when the flag is on. V1
   * uses a cyan/blue-gray palette; V1.1 uses the prototype's neutral-black
   * surfaces with a single orange accent. These overrides cascade to every
   * descendant so wings, bottom bar, and chrome all shift into V1.1 tone.
   */
  --bg: #000000;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --surface-raised: #212121;

  --border: rgba(255, 255, 255, 0.18);
  /* V1 sets --border-glow as a tinted blue variant — we remap to a neutral
   * rgba white so subpage chrome (top-bar borders, section dividers, etc.)
   * stops reading blue. */
  --border-glow: rgba(255, 255, 255, 0.28);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.45);

  /* Orange — used judiciously. Now Line, CTAs, active toggle. Nothing else. */
  --accent: #f2591d;
  --accent-glow: rgba(242, 89, 29, 0.24);
  --accent-dim: rgba(242, 89, 29, 0.10);

  /* Status colors — V5 palette so success/warning/danger/info read
   * consistently on the new black canvas. */
  --success: #4ade80;
  --warning: #ffcd7d;
  --danger: #ce2a35;
  --info: #a78bfa;

  /* Module colors — calendar blue, todo yellow, notes green (not V1's teal),
     memory purple. Per project memory: green means notes, always. */
  --module-calendar: #38bdf8;
  --module-todo: #fbbf24;
  --module-notes: #4ade80;
  --module-memory: #a78bfa;

  /* V1.1-only tokens the prototype introduced. */
  --v11-border-glow: rgba(255, 255, 255, 0.28);
  --v11-border-soft: rgba(255, 255, 255, 0.09);
  --v11-text-faint: rgba(255, 255, 255, 0.28);
  --v11-accent-coral: #fd8a5a;
  --v11-accent-dim: rgba(242, 89, 29, 0.10);
}

/* Hide V1 chat FAB — V1.1 uses a top-bar toggle. */
body.v3-chrome .chat-fab { display: none; }

/* ── Global neutral-rollover sweep ──
 * V1 scatters orange across hover states (feedback btn, theme toggle,
 * hamburger, chat drawer close, stat chips, calendar nav, custom-selects,
 * action buttons, onboarding paths, module cards on /modules, chat card
 * actions, observation discuss footer, block-menu trigger). Under V1.1
 * those are all navigation/utility affordances — none of them are "Mesh
 * asking for attention." Collapse every orange hover to the neutral white
 * treatment so orange stays reserved for real CTAs.
 */
body.v3-chrome .feedback-btn:hover,
body.v3-chrome .theme-toggle:hover,
body.v3-chrome .hamburger-btn:hover,
body.v3-chrome .chat-drawer-close:hover,
body.v3-chrome .cal-nav-today:hover,
body.v3-chrome .custom-select-trigger:hover,
body.v3-chrome .custom-select.open .custom-select-trigger,
body.v3-chrome .action-edit:hover,
body.v3-chrome .onboarding-path:hover,
body.v3-chrome .module-card:hover,
body.v3-chrome .chat-card-action:hover,
body.v3-chrome .stat-chip:hover,
body.v3-chrome .block-menu-trigger:hover,
body.v3-chrome .observation-discuss-footer:hover,
body.v3-chrome [data-theme="dark"] .module-panel:hover {
  color: var(--text-primary);
  border-color: var(--v11-border-glow);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

/* Wing list-item hover already runs under body.v3-chrome .module-panel .wing-list-item;
 * V1's generic .wing-list-item:hover adds an orange-tinted background. Override. */
body.v3-chrome .wing-list-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Utility + navigation buttons: neutral gray with subtle hover lift ──
 * V1 colors these variously — Edit orange, Delete red, Mark Complete green,
 * Back/New/Teach-Mesh all turn orange on hover. Under V1.1's "orange is
 * scarce" discipline we collapse all of them to a neutral gray outline
 * with a rgba-white background lift on hover. The user knows these are
 * action buttons from context; color isn't doing the work.
 */
body.v3-chrome .btn-edit,
body.v3-chrome .btn-delete,
body.v3-chrome .btn-complete,
body.v3-chrome .btn-complete.completed,
body.v3-chrome .back-btn,
body.v3-chrome .list-view-new {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
body.v3-chrome .btn-edit:hover,
body.v3-chrome .btn-delete:hover,
body.v3-chrome .btn-complete:hover,
body.v3-chrome .btn-complete.completed:hover,
body.v3-chrome .back-btn:hover,
body.v3-chrome .list-view-new:hover {
  color: var(--text-primary);
  border-color: var(--v11-border-glow);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Filter tabs (Calendar Day/Week/Month, Memory type filters, etc.) ──
 * V1's active state is orange-on-orange-dim. Replace with a subtle neutral
 * treatment — white text + soft gray fill — so orange stays scarce. */
body.v3-chrome .filter-btn {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
}
body.v3-chrome .filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--v11-border-glow);
  background: rgba(255, 255, 255, 0.05);
}
body.v3-chrome .filter-btn.active {
  color: var(--text-primary);
  background: var(--surface-raised);
  border-color: var(--v11-border-glow);
}

/* ── Sub-page list entries: inset accent line matching V1.1 item cards ──
 * V1's .list-entry uses border-left-color set inline per module. In V1.1
 * we want the same 8px / 3px / 14px inset rail as the briefing cards.
 * v3-chrome.js (harmonizeSubpageAccents) mirrors each entry's inline
 * border-left-color into a --entry-accent custom property so CSS can
 * render an inset ::before line in the correct module color.
 */
body.v3-chrome .list-entry {
  border-left: none;
  /* Rest border matches V1.1 item cards (--border, ~0.18 white) so the
   * hover shift to --v11-border-glow (~0.28 white) is actually visible. */
  border: 1px solid var(--border);
  padding-left: 25px;
}
body.v3-chrome .list-entry::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 1.5px;
  pointer-events: none;
  background: var(--entry-accent, var(--border));
}
body.v3-chrome .list-entry:hover {
  border-color: var(--v11-border-glow);
  box-shadow: none;
}
body.v3-chrome .list-entry.compact {
  padding-left: 25px;
}

/* ── Top-bar chrome buttons: Feedback + Settings (V5 chrome-btn parity) ──
 * V1 renders Feedback at ~24px tall (5px vertical padding, 10px mono caps)
 * and Settings as a fixed 32×32 icon square, so they don't align when sitting
 * side-by-side. V5 treats both as a single chrome-btn family — Feedback is
 * the text variant (30px tall via 6px padding + 11.5px font), Settings is
 * the icon variant (explicit 30×30). Matching that here.
 */
body.v3-chrome .top-bar .feedback-btn {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.2px;
  padding: 6px 12px;
  height: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
}
body.v3-chrome .top-bar .nav-btn {
  width: 30px;
  height: 30px;
  padding: 6px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.v3-chrome .top-bar .nav-btn svg {
  width: 14px;
  height: 14px;
}
/* Drop V1's orange-fill .nav-btn.active treatment — under V1.1 the
 * neutral-rollover system handles hover, and .active on the settings
 * button while on /settings just uses the same brightened border. */
body.v3-chrome .top-bar .nav-btn.active {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--v11-border-glow);
  box-shadow: none;
}

/* Chrome: top/bottom bars sit on --surface so they're visually distinct
 * from the pure-black canvas. V1 uses transparent bars; V5 prototype puts
 * them on --surface with a --border (not --border-glow) hairline. */
body.v3-chrome .top-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
body.v3-chrome .bottom-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Wings widened from V1's 280px to 300px per V1.1 prototype, and spacing
 * pulled from V5's .home-layout (14px from top bar, 18px horizontal gutter
 * and inter-column gap, 18px from bottom bar).
 * The :not(.full-width) guard avoids fighting .hud.full-width on settings
 * / admin / archive / setup pages where the wings are hidden. */
body.v3-chrome .hud:not(.full-width) {
  grid-template-columns: 300px 1fr 300px;
  gap: 18px;
  padding: 14px 18px 18px;
}
body.v3-chrome .wing {
  padding: 6px 0 0;
  gap: 16px;
}

/* ── Briefing header ── */
body.v3-chrome .v11-brief-header {
  padding: 14px 4px 18px;
  margin-bottom: 6px;
}
body.v3-chrome .v11-brief-eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 12px;
}
body.v3-chrome .v11-brief-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--text-primary);
}
body.v3-chrome .v11-brief-prose {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 620px;
}
body.v3-chrome .v11-brief-prose b,
body.v3-chrome .v11-brief-prose strong {
  color: var(--text-primary);
  font-weight: 500;
}
body.v3-chrome .v11-brief-footer-line {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding-top: 4px;
}

/* ── Item cards ── */
body.v3-chrome .v11-item-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* Layout along the left edge:
   *   8px gap → 3px accent line → 14px gap → content
   * Padding-left = 8 + 3 + 14 = 25px. */
  padding: 14px 18px 14px 25px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 180ms ease;
}
body.v3-chrome .v11-item-card:hover { border-color: var(--v11-border-glow); }
body.v3-chrome .v11-item-card::before {
  content: '';
  position: absolute;
  /* Accent line starts 8px from the card's left edge. */
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 1.5px;
  pointer-events: none;
  background: var(--border);
}
body.v3-chrome .v11-item-card[data-module="calendar"]::before { background: var(--module-calendar); }
body.v3-chrome .v11-item-card[data-module="todo"]::before     { background: var(--module-todo); }
body.v3-chrome .v11-item-card[data-module="notes"]::before    { background: var(--module-notes); }
body.v3-chrome .v11-item-card[data-module="memory"]::before   { background: var(--module-memory); }

body.v3-chrome .v11-item-card.is-completed { opacity: 0.5; }
body.v3-chrome .v11-item-card.is-completed .v11-item-title {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}
body.v3-chrome .v11-item-card.is-upcoming { opacity: 0.7; }
body.v3-chrome .v11-item-card.is-upcoming:hover { opacity: 0.85; }

body.v3-chrome .v11-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
body.v3-chrome .v11-item-tag {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}
body.v3-chrome .v11-item-time {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

body.v3-chrome .v11-item-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
body.v3-chrome .v11-item-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  flex: 1;
  color: var(--text-primary);
}
body.v3-chrome .v11-item-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 2px;
}

/* Task checkbox */
body.v3-chrome .v11-todo-check {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--module-todo);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms ease;
  color: #1a0800;
  font-size: 10px;
  font-weight: 700;
}
body.v3-chrome .v11-todo-check:hover { background: rgba(251, 191, 36, 0.15); }
body.v3-chrome .v11-todo-check.checked { background: var(--module-todo); border-color: var(--module-todo); }
body.v3-chrome .v11-todo-check.checked::after { content: '✓'; }

/* Annotation — quiet */
body.v3-chrome .v11-annotation {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--v11-text-faint);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  cursor: pointer;
  transition: background 180ms ease;
}
body.v3-chrome .v11-annotation:hover { background: rgba(255, 255, 255, 0.045); }

/* ── Now Line ── */
body.v3-chrome .v11-now-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 16px;
  position: relative;
}
body.v3-chrome .v11-now-line::before,
body.v3-chrome .v11-now-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.35;
}
body.v3-chrome .v11-now-line-label {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Section label (driven by block.section)
 * Same pattern as the Earlier Today divider — label centered on a hairline. */
body.v3-chrome .v11-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 14px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  border: none;
  padding: 0;
}
body.v3-chrome .v11-section-label::before,
body.v3-chrome .v11-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v11-border-soft);
}

/* ── Brief footer actions ── */
body.v3-chrome .v11-brief-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--v11-border-soft);
}
body.v3-chrome .v11-brief-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v3-chrome .v11-brief-action:hover {
  color: var(--text-primary);
  border-color: var(--v11-border-glow);
}
/* New Briefing (the .accent variant) now matches Discuss in Chat — same
 * neutral outline, same hover lift. Orange in the footer read louder than
 * the moment deserves; the user finds this button by having finished the
 * brief, not by needing attention drawn to it. */
body.v3-chrome .v11-brief-action.accent {
  border-color: var(--border);
  color: var(--text-secondary);
}
body.v3-chrome .v11-brief-action.accent:hover {
  border-color: var(--v11-border-glow);
  color: var(--text-primary);
}

/* ── Earlier Today divider ── */
body.v3-chrome .v11-earlier-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 48px 0 14px;
  color: var(--v11-text-faint);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
}
body.v3-chrome .v11-earlier-divider::before,
body.v3-chrome .v11-earlier-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v11-border-soft);
}

/* ── Collapsed snapshot card ── */
body.v3-chrome .v11-snapshot-wrapper { margin: 0 0 10px; opacity: 0.75; }
body.v3-chrome .v11-snapshot-wrapper:hover { opacity: 1; }
body.v3-chrome .v11-snapshot-card {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--v11-border-soft);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 180ms ease;
  text-align: left;
}
body.v3-chrome .v11-snapshot-card:hover {
  border-color: var(--border);
  border-style: solid;
}
body.v3-chrome .v11-snapshot-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.v3-chrome .v11-snapshot-card-label {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  flex: 1;
}
body.v3-chrome .v11-snapshot-card-chevron {
  color: var(--v11-text-faint);
  font-size: 16px;
  line-height: 1;
  transition: transform 180ms ease;
}
body.v3-chrome .v11-snapshot-wrapper.is-open .v11-snapshot-card-chevron {
  transform: rotate(90deg);
}
body.v3-chrome .v11-snapshot-body { display: none; margin-top: 12px; }
body.v3-chrome .v11-snapshot-wrapper.is-open .v11-snapshot-body { display: block; }
body.v3-chrome .v11-snapshot-body .v11-brief-header { opacity: 0.5; }
body.v3-chrome .v11-snapshot-body .v11-item-card {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Feed container (center column width) ── */
body.v3-chrome .v11-feed-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 8px 60px;
}

/* ── Regeneration banner ──
 * Sticky at the top of the briefing scroll (brief scrolls under it).
 * Grey outline + 3px orange accent stripe on the left. Rounded all the
 * way around so it reads as a floating card, not a chrome bar.
 */
body.v3-chrome .v11-regen-banner {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 14px;
  margin: 8px 0 16px;
  padding: 12px 16px;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: v11RegenBannerIn 200ms ease-out;
}
body.v3-chrome .v11-regen-banner.visible { display: flex; }
@keyframes v11RegenBannerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.v3-chrome .v11-regen-banner-accent {
  width: 3px;
  align-self: stretch;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
body.v3-chrome .v11-regen-banner-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.v3-chrome .v11-regen-banner-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.1px;
}
body.v3-chrome .v11-regen-banner-reason {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
body.v3-chrome .v11-regen-banner-action {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  letter-spacing: 0.2px;
}
body.v3-chrome .v11-regen-banner-action:hover {
  color: var(--text-primary);
  border-color: var(--v11-border-glow);
  background: rgba(255, 255, 255, 0.05);
}
body.v3-chrome .v11-regen-banner-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: all 180ms ease;
}
body.v3-chrome .v11-regen-banner-dismiss:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* ── V5 notched wing panels ──
 * Applies to the existing V1 .module-panel markup emitted by renderModulePanel
 * in app.js. v3-chrome.js applies the clip-path and injects the SVG outline per
 * module; the CSS below supplies the accent stripe, module-colored header,
 * circular + button in the notch, and row styling.
 */
body.v3-chrome .wing {
  padding-top: 6px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}
/* Each .module-panel gets wrapped by v3-chrome.js in a .wing-module-wrap so the
 * + button can live as a sibling of the panel — outside the clip-path. */
body.v3-chrome .wing-module-wrap {
  position: relative;
}

body.v3-chrome .module-panel {
  /* Shape defined by clip-path (set via v3-chrome.js from the panel's size);
   * we leave out the CSS border because clip-path would clip it anyway.
   * Visual separation comes from the accent stripe + the SVG outline
   * (also injected by v3-chrome.js). */
  position: static;
  background: var(--surface);
  padding: 14px 14px 12px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

/* Accent stripe. Override V1's full-width 2px stripe with V5's
 * stops-short-of-notch styling. */
body.v3-chrome .module-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 52px;
  height: 3px;
  border-radius: 0;
  pointer-events: none;
  background: var(--text-muted);
  z-index: 2;
}
body.v3-chrome .module-panel[data-module="calendar"]::before { background: var(--module-calendar); }
body.v3-chrome .module-panel[data-module="todo"]::before     { background: var(--module-todo); }
body.v3-chrome .module-panel[data-module="notes"]::before    { background: var(--module-notes); }
body.v3-chrome .module-panel[data-module="memory"]::before   { background: var(--module-memory); }

/* SVG outline overlays the panel and traces the notched silhouette so the
 * shape has a visible border. Injected by v3-chrome.js. */
body.v3-chrome .module-panel .wing-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
body.v3-chrome .module-panel .wing-outline path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

/* Header: mono caps, module-colored name. */
body.v3-chrome .module-panel .module-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0;
  border: none;
  background: transparent;
}
body.v3-chrome .module-panel .module-panel-name {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
body.v3-chrome .module-panel[data-module="calendar"] .module-panel-name { color: var(--module-calendar); }
body.v3-chrome .module-panel[data-module="todo"] .module-panel-name     { color: var(--module-todo); }
body.v3-chrome .module-panel[data-module="notes"] .module-panel-name    { color: var(--module-notes); }
body.v3-chrome .module-panel[data-module="memory"] .module-panel-name   { color: var(--module-memory); }

/* Circular + button sits in the notch at top-right.
 * Promoted to be a child of .wing-module-wrap (sibling of .module-panel)
 * by v3-chrome.js so the panel's clip-path doesn't erase it. Positioned
 * relative to the wrap.
 * V1's renderModulePanel emits the button with inline style
 * `margin-left:auto;padding:2px 8px;font-size:10px` and "+ New" text.
 * !important on padding + font-size beats the inline rule so the button
 * collapses to a pure circle with the text hidden; the ::before/::after
 * pseudos draw the "+" glyph in module color.
 */
body.v3-chrome .wing-module-wrap > .wing-new-item-btn,
body.v3-chrome .module-panel .wing-new-item-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  min-width: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0 !important;
  line-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  z-index: 3;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease;
}
body.v3-chrome .wing-new-item-btn::before,
body.v3-chrome .wing-new-item-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  text-indent: 0;
}
body.v3-chrome .wing-new-item-btn::before {
  width: 11px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
body.v3-chrome .wing-new-item-btn::after {
  width: 1.5px;
  height: 11px;
  transform: translate(-50%, -50%);
}
body.v3-chrome .wing-module-wrap[data-module="calendar"] .wing-new-item-btn,
body.v3-chrome .module-panel[data-module="calendar"] .wing-new-item-btn { color: var(--module-calendar); border-color: var(--module-calendar); }
body.v3-chrome .wing-module-wrap[data-module="todo"] .wing-new-item-btn,
body.v3-chrome .module-panel[data-module="todo"] .wing-new-item-btn     { color: var(--module-todo);     border-color: var(--module-todo); }
body.v3-chrome .wing-module-wrap[data-module="notes"] .wing-new-item-btn,
body.v3-chrome .module-panel[data-module="notes"] .wing-new-item-btn    { color: var(--module-notes);    border-color: var(--module-notes); }
body.v3-chrome .wing-module-wrap[data-module="memory"] .wing-new-item-btn,
body.v3-chrome .module-panel[data-module="memory"] .wing-new-item-btn   { color: var(--module-memory);   border-color: var(--module-memory); }
body.v3-chrome .wing-module-wrap > .wing-new-item-btn:hover,
body.v3-chrome .module-panel .wing-new-item-btn:hover { transform: scale(1.08); }

/* Rows within a panel. Use V1's wing-list-item markup. */
body.v3-chrome .module-panel .module-panel-body {
  padding: 0;
  border: none;
  background: transparent;
}
body.v3-chrome .module-panel .wing-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid var(--v11-border-soft);
  font-size: 12px;
  cursor: pointer;
  transition: background 180ms ease;
}
body.v3-chrome .module-panel .wing-list-item:last-child {
  border-bottom: none;
}
body.v3-chrome .module-panel .wing-list-item:hover {
  background: rgba(255, 255, 255, 0.03);
  margin: 0 -14px;
  padding: 7px 14px;
}
body.v3-chrome .module-panel .wing-item-title {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
}
body.v3-chrome .module-panel .wing-item-meta {
  color: var(--text-muted);
  font-size: 11px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

/* View-all footer — subtle mono row. */
body.v3-chrome .module-panel .module-panel-footer {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--v11-border-soft);
  cursor: pointer;
  background: transparent;
}
body.v3-chrome .module-panel .module-panel-footer:hover {
  color: var(--text-primary);
}

/* ── Surface toggle (Briefing | Chat) in top bar ── */
body.v3-chrome .v11-surface-toggle {
  display: inline-flex;
  /* Top-bar is now on --surface; bump the toggle container one notch up
   * so it stays visible against the new backdrop. No added border — the
   * active-segment orange outline remains the only stroke. */
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 3px;
  position: relative;
  margin: 0 auto;
}
body.v3-chrome .v11-surface-toggle .seg {
  position: relative;
  z-index: 2;
  padding: 5px 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 200ms ease;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  background: transparent;
  border: none;
  font-family: inherit;
}
/* Neutral active state — white text + white outline instead of orange so
 * the toggle reads as navigation, not a CTA. Orange stays reserved for
 * the Now Line and (future) Proactive Prompts. */
body.v3-chrome .v11-surface-toggle .seg.active { color: var(--text-primary); }
body.v3-chrome .v11-surface-toggle .seg-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  left: 3px;
  background: transparent;
  border: 1px solid var(--v11-border-glow);
  border-radius: 6px;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
  z-index: 1;
}
body.v3-chrome .v11-surface-toggle.is-chat .seg-indicator {
  transform: translateX(calc(100% + 0px));
}

/* ── Chat center-pane surface (Sprint 5) ──
 * V1 renders chat as a right-side sliding drawer. V1.1 renders it as a
 * center-pane surface that swaps with the briefing when the nav toggle is
 * flipped to "Chat." We reuse V1's #chat-drawer element (moved into .hud
 * by ensureChatSurface) and override its drawer positioning here.
 *
 * Styling targets prototype parity: user messages as bubbles (asymmetric
 * radius, right-aligned), Mesh messages as plain text, centered 680px
 * message column, 620px input bar with a 34px orange-outlined send button.
 * The V1 chat header + overlay are hidden — the top-nav toggle is the
 * only affordance in V1.1 per the current prod design.
 */

body.v3-chrome .chat-overlay,
body.v3-chrome .chat-drawer-header {
  display: none !important;
}

body.v3-chrome .chat-drawer {
  position: static;
  width: auto;
  height: auto;
  grid-column: 2;
  grid-row: 1;
  transform: none;
  transition: none;
  border-left: none;
  background: transparent;
  display: none;
  min-height: 0;
  overflow: hidden;
}

body.v3-chrome .chat-drawer.open { display: flex; }

/* When chat is open on home, hide the briefing in the center column. Wings
 * stay. Scoped to :not(.full-width) so the rule can't nuke admin / settings /
 * subpage content if the chat somehow opens there. */
body.v3-chrome .hud:not(.full-width):has(> .chat-drawer.open) > #center { display: none; }

body.v3-chrome .chat-drawer-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 24px 40px;
  gap: 14px;
  background: transparent;
}

/* Messages — reset V1 drawer styling, then apply prototype bubble/plain split. */
body.v3-chrome .chat-drawer .chat-msg {
  max-width: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

body.v3-chrome .chat-drawer .chat-msg.user {
  align-self: flex-end;
  max-width: 78%;
  background: var(--surface-2);
  border: 1px solid var(--v11-border-soft);
  color: var(--text-primary);
  padding: 9px 14px;
  border-radius: 16px 16px 4px 16px;
  line-height: 1.55;
}

body.v3-chrome .chat-drawer .chat-msg.assistant {
  align-self: flex-start;
  max-width: 86%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 0;
}

/* Input area — prototype: 14px-radius container, 620px centered, 34px
 * outlined send button (no fill). */
body.v3-chrome .chat-drawer .chat-input-area {
  border-top: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0 auto 14px;
  width: calc(100% - 48px);
  max-width: 620px;
  gap: 10px;
  align-items: flex-end;
}

body.v3-chrome .chat-drawer .chat-input {
  background: transparent;
  border: none;
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  max-height: 140px;
}

body.v3-chrome .chat-drawer .chat-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  min-height: auto;
  flex-shrink: 0;
}

body.v3-chrome .chat-drawer .chat-send-btn:hover {
  background: var(--accent-dim);
  color: var(--v11-accent-coral);
  border-color: var(--v11-accent-coral);
  opacity: 1;
}

body.v3-chrome .chat-drawer .chat-send-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* ── Responsive: collapse to a single column ──
 * Below 1100px the two 300px wings can no longer share the row with the
 * briefing without crushing the center column, so both wings hide and the
 * grid drops to one column. The briefing keeps `.view`'s 640px cap and
 * `.center`'s `align-items: center`, so it simply re-centers on its own.
 *
 * These rules must live here, after the `.hud` (line ~249) and `.wing`
 * (line ~687) definitions above: `body.v3-chrome .hud:not(.full-width)`
 * and `body.v3-chrome .wing` outspecify the base responsive media queries
 * in styles.css, so the collapse only takes effect from a v3-chrome-scoped
 * rule of matching specificity placed later in source order.
 *
 * The chat surface normally sits at `grid-column: 2` (the center column);
 * once the grid is single-column it has to move to column 1 to stay visible.
 */
@media (max-width: 1100px) {
  body.v3-chrome .hud:not(.full-width) {
    grid-template-columns: 1fr;
  }
  body.v3-chrome .wing {
    display: none;
  }
  body.v3-chrome .chat-drawer {
    grid-column: 1;
  }
}

/* ── Modal primary buttons + focused fields ──
 * V1's .btn-primary wears the full orange treatment (accent-dim fill,
 * accent text, accent border) and focused fields get an orange border.
 * Under V1.1, orange is reserved for the Now Line and proactive prompts,
 * so Save becomes a solid white-on-black commit button and focused
 * fields get a neutral white outline.
 */
body.v3-chrome .btn-primary {
  background: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
}
body.v3-chrome .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow: none;
}

body.v3-chrome .edit-input:focus,
body.v3-chrome .edit-textarea:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

/* ── Button normalization ──
 * V1 ships buttons in mono with several classes forcing UPPERCASE via CSS
 * (.btn-delete, .chat-card-action, .settings-nav-item). V1.1's own
 * buttons (.v11-brief-action, the feedback-btn override above) already
 * use Rethink Sans + sentence case via `font-family: inherit` +
 * `text-transform: none`. This block brings every remaining .btn* variant
 * in line so buttons read as one family across the app.
 *
 * Not touched: .nav-btn (icon-only), .hamburger-btn (icon-only), the
 * V1.1 surface toggle (already sans).
 */
body.v3-chrome .btn,
body.v3-chrome .btn-delete,
body.v3-chrome .btn-edit,
body.v3-chrome .btn-complete,
body.v3-chrome .chat-card-action,
body.v3-chrome .settings-nav-item {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}

/* .btn-edit / .btn-complete ship at 10px with 6px padding — bump to the
 * same 13px + 8px 16px baseline the rest of the normalized buttons use
 * so the detail-page action row reads as one family. */
body.v3-chrome .btn-edit,
body.v3-chrome .btn-complete {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
}

/* Admin / settings sidebar — V1 paints hover + active in orange
 * (accent-dim fill, accent text). Under V1.1, orange is reserved for
 * real CTAs (Now Line, proactive prompts) — a nav item is navigation,
 * not an attention call. Collapse to a neutral white-fill treatment. */
body.v3-chrome .settings-nav-item:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
body.v3-chrome .settings-nav-item.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* ── /settings + /admin form chrome + section titles ──
 * Aligns the settings and admin pages with the V1.1 design system
 * (/admin/design-system). V1 rendered inputs, selects, dropdowns, module
 * status labels, and section titles in mono; V1.1 reserves mono for true
 * labels and timestamps, so form primitives move to Rethink Sans. Section
 * titles and status eyebrows pick up the 2.5px letter-spacing + 0.7 opacity
 * used by .ds-section-title so the hierarchy reads the same across the app.
 * Dropdown option hover/selected states collapse from orange to the same
 * neutral white treatment applied everywhere else under V1.1.
 */
body.v3-chrome .settings-section-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  opacity: 0.7;
  margin-bottom: 12px;
}

body.v3-chrome .settings-nav-item {
  font-size: 12px;
}

body.v3-chrome .setting-module-status {
  letter-spacing: 2.5px;
  font-weight: 500;
}

body.v3-chrome .setting-input {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: normal;
  border-radius: 6px;
  color: var(--text-primary);
}

/* Native <select> elements on /settings (MESH Knows filter, default
 * calendar, working-hours, briefing archive date). Base styles.css ships
 * them as mono chrome with V1 dimensions — visually inconsistent with the
 * .custom-select-trigger dropdowns used for AI Provider, Data Mode, etc.
 * Match the custom-select geometry + palette exactly so dropdowns read as
 * one component everywhere. */
body.v3-chrome .setting-select {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.45)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 180ms ease;
}
body.v3-chrome .setting-select:hover {
  border-color: var(--v11-border-glow);
}
body.v3-chrome .setting-select:focus {
  outline: none;
  border-color: var(--v11-border-glow);
}

body.v3-chrome .custom-select-trigger {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
}

body.v3-chrome .custom-select-option {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: normal;
}

body.v3-chrome .custom-select-option:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}
body.v3-chrome .custom-select-option.selected {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Status labels. V1's .setting-badge + variants all render as pills, which
 * read as buttons — wrong for non-interactive status. Under V1.1 every
 * variant strips the chrome and renders as a mono eyebrow (same language
 * as .setting-module-status / .ds-section-title), each colored by its own
 * semantic token so the signal survives without the button shape. Base =
 * muted (Free plan); OK = success; Warn = warning; Pro = accent. */
body.v3-chrome .setting-badge {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
body.v3-chrome .setting-badge.setting-badge-ok {
  color: var(--success);
}
body.v3-chrome .setting-badge.setting-badge-warn {
  color: var(--warning);
}
body.v3-chrome .setting-badge.setting-badge-pro {
  color: var(--accent);
}

/* Generic disabled-button styling. No .btn:disabled existed before — inert
 * Save / Submit buttons looked identical to live ones. Fade + not-allowed
 * cursor so state is legible. */
body.v3-chrome .btn:disabled,
body.v3-chrome .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Toggle switch (.setting-toggle). V1 rendered boolean preferences as
 * ghost buttons with "Enabled" / "Disabled" text — which made them look
 * like labels, not controls. V1.1 uses a proper switch: 36×20 track, thumb
 * slides left→right on click. Off = transparent track + gray thumb; on =
 * white-filled track + black thumb. Visible state carries the value;
 * aria-label on the element carries meaning for screen readers. */
body.v3-chrome .setting-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 180ms ease, border-color 180ms ease;
}
body.v3-chrome .setting-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: left 180ms ease, background 180ms ease;
}
body.v3-chrome .setting-toggle:hover {
  border-color: var(--v11-border-glow);
}
body.v3-chrome .setting-toggle[aria-pressed="true"] {
  background: #ffffff;
  border-color: #ffffff;
}
body.v3-chrome .setting-toggle[aria-pressed="true"]::after {
  left: calc(100% - 16px);
  background: #000000;
}
body.v3-chrome .setting-toggle.is-pending {
  opacity: 0.5;
  cursor: wait;
}

/* Segmented toggle (.setting-seg-toggle). Dual-labeled control for binary
 * mode-selection on /settings (Theme, V1.1 briefing). Same visual language
 * as the design-system .v11-surface-toggle (Briefing | Chat in the top
 * nav) — surface-raised track, sliding outline indicator, white active
 * text, muted inactive. data-active="0" → left seg; data-active="1" →
 * right seg. */
body.v3-chrome .setting-seg-toggle {
  display: inline-flex;
  position: relative;
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
body.v3-chrome .setting-seg-toggle .seg {
  position: relative;
  z-index: 2;
  padding: 5px 18px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 200ms ease;
  min-width: 52px;
}
body.v3-chrome .setting-seg-toggle .seg:hover {
  color: var(--text-primary);
}
body.v3-chrome .setting-seg-toggle .seg.is-active {
  color: var(--text-primary);
}
body.v3-chrome .setting-seg-toggle .seg-indicator {
  position: absolute;
  z-index: 1;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  left: 3px;
  background: transparent;
  border: 1px solid var(--v11-border-glow);
  border-radius: 6px;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
body.v3-chrome .setting-seg-toggle[data-active="1"] .seg-indicator {
  transform: translateX(100%);
}

/* MESH Knows row. Former layout crammed the memory text and two tiny
 * 10px-chrome action buttons (Edit / Del) into a single .setting-row —
 * text wrapped cramped and buttons read as noise. V1.1 stacks the actions
 * on their own row beneath the content, right-aligned, at the normalized
 * .btn-ghost size so they're actually legible tap targets. */
body.v3-chrome .mk-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--v11-border-soft);
}
body.v3-chrome .mk-row:last-child {
  border-bottom: none;
}
body.v3-chrome .mk-row-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  word-break: break-word;
}
body.v3-chrome .mk-row-meta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
body.v3-chrome .mk-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Inline .btn-delete — detail-page footer, edit-modal footer. The
 * destructive intent is already carried by the word "Delete" and the
 * confirmation it triggers; the button itself reads as a ghost, peer to
 * Cancel. Shouting red at every editable item is attention inflation.
 * The confirmation modal (below) is where destructive styling earns its
 * keep, because that's the "are you sure?" moment. */
body.v3-chrome .btn-delete {
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
}
body.v3-chrome .btn-delete:hover {
  color: var(--text-primary);
  background: transparent;
  border-color: var(--v11-border-glow);
}

/* Confirmation modal — this IS the destructive moment, so red comes back. */
body.v3-chrome .btn-delete.confirm-delete {
  color: var(--danger);
  border-color: var(--danger);
}
body.v3-chrome .btn-delete.confirm-delete:hover {
  color: var(--bg);
  background: var(--danger);
  border-color: var(--danger);
}

/* ── Chat pager (date header + prev/next arrows) ──
 * Sits above the message column, inside .chat-drawer. Arrows are disabled
 * stubs for now — per-day history navigation is future work. Injected once
 * by ensureChatPager() and kept current via updateChatPagerDate().
 */
body.v3-chrome .chat-drawer .v11-chat-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 24px 18px;
  margin: 0 auto;
  width: 100%;
  max-width: 680px;
  border-bottom: 1px solid var(--v11-border-soft);
  flex-shrink: 0;
  box-sizing: border-box;
}
body.v3-chrome .v11-chat-pager-arrow {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms ease;
  padding: 0;
}
body.v3-chrome .v11-chat-pager-arrow:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--accent);
}
/* Arrows are disabled stubs for now — hide entirely until per-day history
 * navigation is wired up. Remove this rule when enabling the arrows. */
body.v3-chrome .v11-chat-pager-arrow:disabled {
  display: none;
}
body.v3-chrome .v11-chat-pager-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  min-width: 220px;
  text-align: center;
}

/* ── Per-turn timestamp dividers (prototype .chat-timestamp) ──
 * Emitted by renderDrawerMessage before each user message under V1.1.
 */
body.v3-chrome .chat-drawer .chat-timestamp {
  align-self: center;
  text-align: center;
  color: var(--v11-text-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 4px 0 0;
}

/* ── Tool-call summary lines ──
 * V1 shows a cog/check icon followed by a short label; V1.1 collapses that
 * to a plain italic line in the muted text color, matching the prototype's
 * .chat-action-label. The transient indicator (shown while a tool runs)
 * uses the same treatment minus the chevron.
 */
body.v3-chrome .chat-drawer .chat-tool-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  max-width: 86%;
  align-self: flex-start;
}
body.v3-chrome .chat-drawer .chat-tool-icon { display: none; }

body.v3-chrome .chat-drawer .v11-chat-action-label {
  align-self: flex-start;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  max-width: 86%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 180ms ease;
}
body.v3-chrome .chat-drawer .v11-chat-action-label::after {
  content: '›';
  font-style: normal;
  font-size: 14px;
  opacity: 0.55;
}
body.v3-chrome .chat-drawer .v11-chat-action-label:hover {
  color: var(--text-secondary);
}
body.v3-chrome .chat-drawer .v11-chat-action-label.is-terminal {
  cursor: default;
}
body.v3-chrome .chat-drawer .v11-chat-action-label.is-terminal::after {
  display: none;
}
body.v3-chrome .chat-drawer .v11-chat-action-label.is-terminal:hover {
  color: var(--text-muted);
}