/* =========================================================================
   LEVA ANALYTICS ASSISTANT — Executive studio (handover-inspired)
   Mobile-first responsive · the cockpit's navy, red and teal; gold for the mark and the AI badge (Amin 12/10)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

.audit-results { margin: 18px 0; border: 1px solid var(--border-main); border-radius: 14px; overflow: hidden; background: var(--bg-card); }
.audit-heading { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: .8rem; color: var(--text-muted); border-bottom: 1px solid var(--border-main); }
.audit-heading span:first-child { color: var(--text-title); font-weight: 650; }
.audit-check + .audit-check { border-top: 1px solid var(--border-main); }
.audit-check summary { display: grid; grid-template-columns: minmax(0, 1fr) 65px 112px; align-items: center; gap: 14px; cursor: pointer; padding: 14px 18px; list-style: none; }
.audit-check summary::-webkit-details-marker { display: none; }
.audit-check summary:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: -3px; }
.audit-check-name { font-size: .85rem; line-height: 1.45; }
.audit-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.audit-status { font-size: .72rem; border: 1px solid currentColor; border-radius: 20px; padding: 4px 8px; text-align: center; }
.audit-pass .audit-status { color: #82c8a9; }
.audit-signal .audit-status { color: #e2bd72; }
.audit-unavailable .audit-status, .audit-context .audit-status { color: var(--text-muted, #a3b3aa); }
.audit-definition { font-size: .79rem; line-height: 1.65; color: var(--text-muted); padding: 0 18px 16px; max-width: 850px; }
.audit-check[open] summary { background: var(--bg-card-hover); }
:root[data-theme="light"] .audit-pass .audit-status { color: #176847; }
:root[data-theme="light"] .audit-signal .audit-status { color: #85550b; }
@media (max-width: 600px) {
  .audit-check summary { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 13px; }
  .audit-check-name { grid-column: 1 / -1; }
  .audit-count { text-align: left; }
  .audit-status { justify-self: end; }
}

:root[data-theme="dark"], :root {
  color-scheme: dark;
  --bg-canvas: #0A111D;
  --bg-surface: rgba(14, 23, 38, 0.92);
  --bg-surface-solid: #111B2C;
  --bg-card: rgba(17, 27, 44, 0.86);
  --bg-card-hover: rgba(26, 38, 57, 0.95);
  --brand-emerald: #2AA7B8;
  --brand-emerald-light: #2AA7B8;
  --brand-emerald-glow: rgba(42, 167, 184, 0.14);
  --gold-primary: #E35D6F;
  --gold-light: #3A1A22;
  --gold-dark: #F08A98;
  --gold-glow: rgba(227, 93, 111, 0.16);
  --gold-border: rgba(227, 93, 111, 0.2);
  --border-main: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text-title: #EEF2F8;
  --text-body: #C9D2E0;
  --text-muted: #8C9AB0;
  --text-subtle: #5E6B80;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 18px rgba(42, 167, 184, 0.08);
  --font-brand: 'Cinzel', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --header-h: 56px;
  --rail-w: 340px;
  --composer-h: 172px;
  --composer-safe: calc(var(--composer-h) + 32px);
  --brand-gold: #D4AF37;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #ECEFF4;
  --bg-surface: rgba(250, 251, 252, 0.94);
  --bg-surface-solid: #FAFBFC;
  --bg-card: #FAFBFC;
  --bg-card-hover: #F1F4F8;
  --brand-emerald: #0F7B8A;
  --brand-emerald-light: #0F7B8A;
  --brand-emerald-glow: rgba(15, 123, 138, 0.15);
  --gold-primary: #B11E2F;
  --gold-light: #FBEAEC;
  --gold-dark: #7A1420;
  --gold-glow: rgba(177, 30, 47, 0.14);
  --gold-border: #DDE2EA;
  --border-main: #DDE2EA;
  --border-subtle: #E8ECF2;
  --text-title: #0E1726;
  --text-body: #334155;
  --text-muted: #6B7689;
  --text-subtle: #9AA5B5;
  --shadow-card: 0 8px 24px rgba(14, 23, 38, 0.06);
  --shadow-glow: 0 4px 14px rgba(14, 23, 38, 0.08);
  --brand-gold: #B8891A;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.assistant-app {
  font-family: Inter, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg-canvas);
  color: var(--text-body);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-theme="dark"] body.assistant-app {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(42, 167, 184, 0.05) 0%, transparent 58%),
    radial-gradient(circle at 85% 40%, rgba(177, 30, 47, 0.03) 0%, transparent 52%);
}

[data-theme="light"] body.assistant-app {
  background-image:
    none;
}

.hidden { display: none !important; }

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-canvas);
  color: var(--text-body);
}

.boot-splash.hidden { display: none !important; }

.boot-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}

.boot-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-main);
  border-top-color: var(--gold-primary);
  border-radius: 50%;
  animation: bootSpin 0.85s linear infinite;
}

@keyframes bootSpin { to { transform: rotate(360deg); } }

.boot-title {
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold-primary);
  letter-spacing: 0.06em;
}

.boot-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.boot-error {
  max-width: 420px;
  font-size: 0.86rem;
  color: #f87171;
  line-height: 1.45;
}

#app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

#app > .studio-layout {
  flex: 1;
  min-height: 0;
}

/* Login */
#login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 19, 11, 0.88);
  backdrop-filter: blur(16px);
  z-index: 99999;
  padding: 20px;
}

.login-console-box {
  width: 100%;
  max-width: 440px;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-main);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), var(--shadow-glow);
}

.login-console-box h1 {
  font-family: var(--font-brand);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--text-title);
  text-align: center;
  margin-bottom: 6px;
}

.login-console-box .login-tagline {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 28px;
}

.login-console-box label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.login-console-box input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-main);
  border-radius: 10px;
  color: var(--text-title);
  margin-bottom: 16px;
  outline: none;
}

.login-console-box input:focus { border-color: var(--gold-primary); }

.login-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.login-console-box .btn-primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #C8384A 0%, #B11E2F 60%, #8E1625 100%);
  color: #FFFFFF;
  font-weight: 800;
  cursor: pointer;
}

.login-console-box .err {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 12px;
  text-align: center;
}

/* Header */
.app-header {
  height: var(--header-h);
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 100;
  gap: 12px;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-logo-svg {
  width: 24px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
}

.brand-title {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-title);
  line-height: 1;
  white-space: nowrap;
}

.brand-sub {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-gold);
  display: block;
  margin-top: 2px;
}

.tenant-pill {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(15, 123, 138, 0.1);
  border: 1px solid var(--border-main);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold-primary);
}

.tenant-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-emerald-light);
  box-shadow: 0 0 8px var(--brand-emerald-light);
}

.source-switcher-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.source-switcher-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.source-switcher-select {
  appearance: none;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-main);
  border-radius: 999px;
  color: var(--text-body);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 28px 6px 12px;
  max-width: 220px;
  cursor: pointer;
}

.source-switcher-select:focus {
  outline: none;
  border-color: var(--gold-primary);
}

@media (max-width: 899px) {
  .source-switcher-wrap {
    order: 3;
    width: 100%;
    margin: 8px 0 0;
  }
  .source-switcher-select { max-width: 100%; flex: 1; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-icon-action, .text-btn {
  border: 1px solid var(--border-main);
  background: var(--bg-surface-solid);
  color: var(--text-body);
  cursor: pointer;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  transition: all 0.2s;
}

.text-btn {
  border-radius: 999px;
  width: auto;
  padding: 0 12px;
  height: 32px;
  font-weight: 700;
}

.btn-icon-action:hover, .text-btn:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}

/* Studio layout */
.studio-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

.focus-rail {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-main);
  background: var(--bg-card);
  padding: 14px 12px var(--composer-safe);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.focus-rail.collapsed {
  display: none;
}

.focus-rail-toggle.active {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}

.focus-rail-head {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-top: 4px;
}

.focus-rail-head-secondary {
  margin-top: 12px;
}

.focus-rail-hint {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin: 0 0 4px;
  line-height: 1.35;
}

.focus-chip-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.focus-chip {
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-title);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.focus-chip:hover {
  border-color: var(--gold-primary);
}

.focus-chip.active {
  border-color: var(--gold-primary);
  background: rgba(177, 30, 47, 0.1);
  color: var(--gold-primary);
}

.focus-chip-desc {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

@media (max-width: 899px) {
  .focus-rail {
    position: fixed;
    left: 0;
    top: var(--header-h);
    bottom: 0;
    z-index: 120;
    width: min(280px, 88vw);
    box-shadow: var(--shadow-card);
  }
  .focus-rail.collapsed {
    display: none;
  }
}

.analytics-board {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px var(--composer-safe);
  scroll-padding-bottom: var(--composer-safe);
  -webkit-overflow-scrolling: touch;
}

/* Executive banner */
.executive-banner {
  background: var(--bg-card);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.executive-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-primary), var(--brand-emerald));
}

.banner-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-title);
  line-height: 1.35;
  padding-left: 8px;
}

.banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  padding-left: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Chart grid 1–8 dashboard */
.cards-quad-grid {
  display: grid;
  gap: 14px;
  width: 100%;
}

.cards-quad-grid.grid-1 { grid-template-columns: 1fr; }
.cards-quad-grid.grid-2 { grid-template-columns: 1fr; }
.cards-quad-grid.grid-3,
.cards-quad-grid.grid-4,
.cards-quad-grid.grid-6,
.cards-quad-grid.grid-8 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .cards-quad-grid.grid-2,
  .cards-quad-grid.grid-3,
  .cards-quad-grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-quad-grid.grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-quad-grid.grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .cards-quad-grid.grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-quad-grid.grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .tenant-pill { display: flex; }
  .brand-title { font-size: 1.15rem; }
  .app-header { padding: 0 24px; }
  .analytics-board { padding: 20px 24px var(--composer-safe); }
}

@media (max-height: 860px) {
  :root {
    --composer-h: 200px;
  }

  .echarts-viewport {
    height: clamp(128px, 18vh, 168px);
    min-height: 128px;
  }

  .cards-quad-grid {
    gap: 10px;
  }

  .bi-chart-card {
    margin-bottom: 0;
  }
}

@media (max-width: 1199px) {
  .floating-composer-dock {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}

.bi-chart-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s, border-color 0.25s;
}

.bi-chart-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.chart-card-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0, 0, 0, 0.06);
}

.chart-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-title);
  line-height: 1.3;
}

.chart-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(15, 123, 138, 0.1);
  color: var(--gold-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.echarts-viewport {
  width: 100%;
  height: 220px;
  min-height: 180px;
  padding: 4px;
}

@media (min-width: 768px) {
  .echarts-viewport { height: 240px; }
}

.chart-insights-footer {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border-main);
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.chart-insights-footer strong { color: var(--gold-primary); }

.view-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 8px;
}

.view-spec-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-body);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.view-spec-chip:hover,
.view-spec-chip:focus-visible {
  border-color: var(--gold-primary);
  color: var(--text-title);
}

.turn-followups .view-spec-chip,
#follow-up-suggestions .view-spec-chip {
  background: var(--bg-card);
}

.refine-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 12px;
}

.ghost-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.ghost-btn:hover, .ghost-btn.active {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}

/* Welcome empty state */
.welcome-studio {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.welcome-studio h2 {
  font-family: var(--font-brand);
  font-size: 1.2rem;
  color: var(--text-title);
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.welcome-studio p { font-size: 0.88rem; line-height: 1.55; max-width: 420px; margin: 0 auto; }

.welcome-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.welcome-suggestions .welcome-chip {
  cursor: pointer;
}

/* Loading overlay on board */
.board-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.typing-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-main);
  border-top-color: var(--gold-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Copilot rail */
.copilot-rail {
  display: none;
  background: var(--bg-surface);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--border-main);
  flex-direction: column;
  padding: 20px 16px;
  position: relative;
  overflow-y: auto;
  width: var(--rail-w);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .copilot-rail { display: flex; }
}

.listening-stage-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  animation: fadeInStage 0.35s ease;
}

.listening-stage-view.hidden { display: none; }

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

.neutron-star-wrapper {
  width: 160px;
  height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .neutron-star-wrapper { width: 180px; height: 180px; }
}

.magnetic-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.22);
  animation: spinMagnetic 16s linear infinite;
}

.magnetic-ring-inner {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px dashed rgba(42, 167, 184, 0.28);
  animation: spinMagneticRev 10s linear infinite;
}

@keyframes spinMagnetic { to { transform: rotate(360deg); } }
@keyframes spinMagneticRev { to { transform: rotate(-360deg); } }

.leva-core-icon {
  width: 72px;
  height: 72px;
  animation: stellarBreathe 3.5s ease-in-out infinite alternate;
}

@keyframes stellarBreathe {
  0% { transform: scale(0.94); filter: drop-shadow(0 0 12px rgba(201, 162, 39, 0.28)); }
  100% { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(201, 162, 39, 0.42)); }
}

.stereoscope-canvas {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 36px;
}

.voice-state-title {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-title);
  margin-top: 16px;
  text-align: center;
}

.voice-transcript-caption {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 260px;
  margin-top: 6px;
  line-height: 1.45;
}

.analysis-insights-view {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-bottom: 70px;
  animation: fadeInStage 0.35s ease;
}

.analysis-insights-view.active { display: flex; }

.insight-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 12px;
  padding: 12px 14px;
}

.insight-header,
.synthesis-tag {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold-primary);
  letter-spacing: 0.2px;
  margin-bottom: 6px;
  line-height: 1.35;
}

.synthesis-tag {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 0;
}

.insight-p {
  font-size: 0.8rem;
  color: var(--text-body);
  line-height: 1.55;
}

.docked-iridescent-sphere {
  position: absolute;
  bottom: 14px;
  right: 14px;
  left: 14px;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-main);
  border-radius: 999px;
  padding: 8px 14px;
  display: none;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  z-index: 10;
}

.docked-iridescent-sphere.visible { display: flex; }

.mini-sphere-core {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E8D9A8 0%, #C9A227 42%, #0F7B8A 78%, #0A111D 100%);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.35);
  animation: miniPulse 2s ease-in-out infinite alternate;
}

@keyframes miniPulse {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.1); }
}

.mini-sphere-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-title);
}

/* Mobile voice FAB */
.mobile-voice-fab {
  display: flex;
  position: fixed;
  bottom: calc(var(--composer-h) + 12px);
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-main);
  background: var(--bg-surface-solid);
  box-shadow: var(--shadow-card), 0 0 16px rgba(212, 175, 55, 0.25);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
}

@media (min-width: 900px) {
  .mobile-voice-fab { display: none; }
}

/* Mobile voice modal */
.mobile-voice-modal {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, var(--bg-surface-solid) 0%, var(--bg-canvas) 100%);
  z-index: 999999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 32px 20px 48px;
}

.mobile-voice-modal.active { display: flex; }

.mobile-subtitles-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  padding: 18px 20px;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

/* Composer dock */
.floating-composer-dock {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  max-height: min(42vh, 280px);
  background: var(--bg-surface);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border-main);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 150;
}

@media (max-width: 899px) {
  .floating-composer-dock {
    max-height: min(46vh, 320px);
  }
}

@media (min-width: 900px) {
  .floating-composer-dock {
    left: 24px;
    right: calc(var(--rail-w) + 32px);
    bottom: 16px;
  }
}

.floating-composer-dock:focus-within,
.floating-composer-dock.voice-ready {
  border-color: var(--gold-primary);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3), var(--shadow-glow);
}

.voice-commit-btn {
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(177, 30, 47, 0.45);
  background: linear-gradient(135deg, rgba(177, 30, 47, 0.14), rgba(15, 123, 138, 0.1));
  color: var(--text-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.voice-commit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.voice-commit-btn.hidden { display: none; }

.voice-commit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.neutron-star-wrapper.voice-listening,
.leva-avatar-container.voice-listening {
  outline: 2px solid rgba(16, 185, 129, 0.55);
  outline-offset: 6px;
  border-radius: 50%;
}

.composer-tools-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.composer-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-main);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.composer-chip.active {
  background: rgba(177, 30, 47, 0.12);
  color: var(--text-title);
  border-color: var(--gold-primary);
}

#composer-filters {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px 0;
}

#composer-filters.open { display: flex; }

#composer-filters input,
#composer-filters select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-main);
  background: var(--bg-surface-solid);
  color: var(--text-body);
  font-size: 0.78rem;
  min-width: 100px;
}

.composer-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px 12px;
}

#question {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-title);
  font-size: 0.92rem;
  font-family: inherit;
  resize: none;
  min-height: 26px;
  max-height: 120px;
  line-height: 1.4;
}

#question::placeholder { color: var(--text-muted); }

.composer-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #C8384A 0%, #B11E2F 60%, #8E1625 100%);
  border: none;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.composer-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#follow-up-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 8px;
}

/* Plan validation */
.plan-validation-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-primary);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-glow);
}

.plan-validation-head {
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 10px;
}

.plan-block-list {
  list-style: none;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.plan-block-list li { padding: 4px 0; }

.plan-validation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #C8384A 0%, #B11E2F 60%, #8E1625 100%);
  color: #FFFFFF;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.82rem;
}

.block-skeleton-bar {
  height: 14px;
  width: 60%;
  background: var(--border-subtle);
  border-radius: 6px;
  margin: 14px;
  animation: pulse 1.2s ease-in-out infinite;
}

.block-skeleton-chart {
  height: 180px;
  margin: 0 14px 14px;
  background: var(--border-subtle);
  border-radius: 10px;
  animation: pulse 1.2s ease-in-out infinite;
}

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

.table-scroll { overflow-x: auto; padding: 8px 14px; }

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.table-scroll th, .table-scroll td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

.table-scroll th { color: var(--gold-primary); font-weight: 700; }

.kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
}

.kpi-tile {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 10px;
  background: rgba(15, 123, 138, 0.06);
  border-radius: 10px;
}

.kpi-val { display: block; font-size: 1.1rem; font-weight: 800; color: var(--text-title); }
.kpi-label { font-size: 0.68rem; color: var(--text-muted); }

.synthesis-block {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 14px;
}

.synthesis-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.synthesis-block ul {
  list-style: none;
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.55;
}

.synthesis-block li::before { content: '✦ '; color: var(--gold-primary); }

.empty-result-card {
  padding: 24px;
  border: 1px solid var(--border-main);
  background: var(--bg-card);
}

.empty-result-card p {
  color: var(--text-body);
  line-height: 1.55;
}

/* ============================================================================
   CONVERSATION THREAD — Assistant 2.0
   One scrolling column. No rails. Each answer is a document: title, prose, and
   the figure sitting inside the reasoning that discusses it, so nothing is
   rendered twice.
   ========================================================================== */

/* body.assistant-app is overflow:hidden and the scroll used to live on
   .analytics-board, which this replaced -- without moving it, the page simply
   stopped scrolling once an answer was taller than the viewport. */
.studio-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

.thread-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: var(--composer-safe);
  padding: 32px 24px 190px;
}
.thread, .welcome-studio, #plan-validation-host { max-width: 860px; margin: 0 auto; }
body[data-surface="board"] .thread { max-width: 1500px; }
body[data-surface="chat"] .thread { max-width: 640px; }

.thread { display: block; }

/* --- the question, with the normalized intent and original wording together --- */
.turn-ask { display: flex; justify-content: flex-end; margin: 0 0 26px; }
.turn-ask-bubble {
  color: var(--text-body);
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  padding: 10px 15px;
  border-radius: 16px 16px 4px 16px;
  max-width: 76%;
}
.turn-ask-text {
  display: block;
  font-size: 0.95rem;
  line-height: 1.5;
}
.turn-ask-original {
  display: block;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border-subtle);
  text-align: start;
}
.turn-ask-original-label {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.turn-ask-original-value {
  display: block;
  color: var(--text-body);
  font-size: 0.86rem;
  line-height: 1.55;
  unicode-bidi: plaintext;
}

/* --- the answer, as an article --- */
.turn-answer { margin: 0 0 42px; scroll-margin-top: 80px; }
.turn-answer .who {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
  font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.turn-answer .who .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-primary);
}
.doc-heading {
  color: var(--text-title);
  font-size: 1.4rem; line-height: 1.25; font-weight: 600;
  letter-spacing: -.01em; text-wrap: balance;
  margin: 0 0 12px;
}
.doc-paragraph { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.65; color: var(--text-body); }
.doc-callout {
  color: var(--text-body);
  display: flex; gap: 11px;
  padding: 13px 15px; margin: 0 0 18px;
  border-radius: 11px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-muted);
  font-size: 0.9rem;
}
.doc-callout .ic { flex: 0 0 auto; opacity: .9; }
.doc-callout.tone-warning { border-left-color: var(--gold-primary); }
.doc-callout.tone-positive { border-left-color: #39c0b3; }

/* --- a figure inside the prose --- */
.doc-figure { margin: 0 0 22px; }
.doc-figure .fig-caption {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px;
  font-size: 0.76rem; letter-spacing: .02em;
  color: var(--text-muted);
}
/* Chart controls belong to the figure and appear on hover, so they cost no
   permanent screen space and only offer forms that suit this data. */
.doc-figure .fig-morph { margin-left: auto; display: flex; gap: 3px; opacity: 0; transition: opacity .16s; }
.doc-figure:hover .fig-morph,
.doc-figure:focus-within .fig-morph { opacity: 1; }
.doc-figure .fig-morph button {
  appearance: none; cursor: pointer;
  width: 28px; height: 24px; border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  color: var(--text-muted);
  font-size: 0.68rem; display: grid; place-items: center;
}
.doc-figure .fig-morph button:hover { color: var(--text-title); }
.doc-figure .fig-morph button[aria-pressed="true"] {
  background: var(--gold-primary); border-color: var(--gold-primary); color: #1a1408;
}

/* --- follow-ups, under the answer rather than in a rail --- */
.turn-followups { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.turn-followups button {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  color: var(--text-muted);
  padding: 8px 14px; border-radius: 999px; transition: .16s;
}
.turn-followups button:hover { color: var(--text-title); border-color: var(--gold-primary); }

/* --- welcome: subjects as chips, gone after the first question --- */
.welcome-studio { padding: 76px 0 0; text-align: left; }
.welcome-studio h2 { color: var(--text-title); font-size: 2rem; margin: 0 0 8px; font-weight: 800; font-family: Inter, system-ui, sans-serif; letter-spacing: -.5px; font-variant: normal; text-transform: none; }
.welcome-studio p { color: var(--text-muted); margin: 0 0 26px; }
.welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.welcome-chips button, .welcome-chips .focus-chip {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.86rem;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  color: var(--text-muted);
  padding: 9px 15px; border-radius: 999px;
}
.welcome-chips button:hover, .welcome-chips .focus-chip:hover {
  color: var(--text-title); border-color: var(--gold-primary);
}

/* --- listening overlay: the mark takes the screen while dictating --- */
.listen-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 28px;
  background: radial-gradient(circle at 50% 38%, rgba(22,27,34,.97) 0%, rgba(13,16,20,.98) 62%);
  backdrop-filter: blur(6px);
}
.listen-overlay.is-listening { display: flex; }
.listen-overlay .listen-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.listen-overlay .voice-state-title {
  font-size: 0.74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-primary);
}
.listen-overlay .voice-transcript-caption { font-size: 0.82rem; color: var(--text-muted); }

/* The sparkle at the heart of the mark is the part that lives. */
.leva-core-icon .leva-spark { transform-origin: 500px 375px; transform-box: fill-box; }
.listen-overlay.is-listening .leva-core-icon .leva-spark { animation: levaBreathe 2.1s ease-in-out infinite; }
@keyframes levaBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) {
  .listen-overlay .leva-core-icon .leva-spark { animation: none !important; }
}

@media (max-width: 720px) {
  .thread-shell { padding: 22px 16px 170px; }
  .doc-heading { font-size: 1.32rem; }
  .doc-figure .fig-morph { opacity: 1; }
}

/* --- surface switch: which half of the answer this device shows ----------- */
.surface-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); }
.surface-switch button {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.7rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
}
.surface-switch button.on { background: var(--gold-primary); color: #1a1408; }

/* Board: the shared screen. Figures and signals, never the conversation. */
body[data-surface="board"] .floating-composer-dock,
body[data-surface="board"] .turn-followups,
body[data-surface="board"] .doc-paragraph { display: none !important; }
body[data-surface="board"] .thread-shell { padding-bottom: 40px; }
body[data-surface="board"] .turn-answer .who { display: none; }
body[data-surface="board"] .doc-heading { font-size: 1.6rem; }
body[data-surface="board"] .doc-callout { font-size: 1.05rem; }
/* Projected in a meeting room: the notes are read from the back of the room. */
body[data-surface="board"] .doc-notes .note { font-size: 1.2rem; line-height: 1.5; }
body[data-surface="board"] { --prose: 980px; }
body[data-surface="board"] .echarts-viewport { height: 380px !important; }
/* only the current answer is on screen in a board meeting */
/* Every answer stays on the screen; the newest is scrolled into view. */
body[data-surface="board"] .turn-answer { margin-bottom: 40px; }
body[data-surface="board"] .welcome-studio { text-align: center; padding-top: 140px; }

/* Chat: the phone. Prose and signals, figures kept small. */

body[data-surface="chat"] .echarts-viewport { height: 190px !important; }

.pair-flag {
  position: fixed; left: 14px; bottom: 14px; z-index: 120;
  display: none; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 0.72rem;
}
body[data-surface="board"] .pair-flag { display: inline-flex; }
/* In hybrid mode the phone also carries the link flag, so the reader knows
   the big screen is following. */
body[data-hybrid="1"] .pair-flag { display: inline-flex; }
.pair-flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-primary);
  animation: pairPulse 1.9s ease-in-out infinite; font-style: normal; }
@keyframes pairPulse { 0%,100%{opacity:.35} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce) { .pair-flag i { animation: none; } }

/* --- dictation lives in the composer, where the question is written ------- */
.composer-mic-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--border-main);
  color: var(--text-muted); transition: .16s;
}
.composer-mic-btn:hover { color: var(--text-title); border-color: var(--gold-primary); }
.composer-mic-btn[aria-pressed="true"] {
  background: var(--gold-primary); border-color: var(--gold-primary); color: #1a1408;
  animation: micLive 1.5s ease-in-out infinite;
}
.composer-mic-btn[disabled] { opacity: .38; cursor: not-allowed; }
@keyframes micLive { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
                     70%     { box-shadow: 0 0 0 9px rgba(212,175,55,0); } }
@media (prefers-reduced-motion: reduce) { .composer-mic-btn[aria-pressed="true"] { animation: none; } }

/* live transcript under the mark while dictating */
.listen-overlay .live-transcript {
  max-width: 32ch; text-align: center; font-size: 1.05rem; line-height: 1.6;
  color: var(--text-title); min-height: 3.2em;
}
.listen-overlay .live-transcript .old { color: var(--text-muted); }
.listen-overlay .listen-actions { display: flex; gap: 10px; }
.listen-overlay .listen-actions button {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem;
  padding: 9px 20px; border-radius: 999px;
  border: 1px solid var(--border-main); background: var(--bg-card); color: var(--text-body);
}
.listen-overlay .listen-actions button.primary {
  background: var(--gold-primary); border-color: var(--gold-primary); color: #1a1408; font-weight: 600;
}
.voice-unavailable {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 200;
  max-width: 82vw; padding: 11px 16px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-main);
  color: var(--text-body); font-size: 0.84rem; box-shadow: var(--shadow-card);
}


/* The checkbox and its text are one control. A stray flex rule broke them
   apart, leaving each box centred above an orphaned caption. */
.login-opts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.login-opts label {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  width: auto; text-align: left; cursor: pointer;
}
.login-opts label input[type="checkbox"] { flex: 0 0 auto; margin: 0; }

/* ============================================================================
   THE LEVA PRESENCE
   The mark is the way you talk to the assistant. A tiny mic in the composer
   asked the reader to aim; the presence is always there and hard to miss.
   ========================================================================== */
.leva-orb {
  position: fixed; left: 22px; bottom: 26px; z-index: 140;
  width: 62px; height: 62px; padding: 11px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-main);
  box-shadow: var(--shadow-card); transition: transform .18s, border-color .18s;
}
.leva-orb:hover { transform: scale(1.06); border-color: var(--gold-primary); }
.leva-orb svg { width: 100%; height: 100%; position: relative; z-index: 2; overflow: visible; }
.leva-orb .orb-halo {
  position: absolute; inset: -34%; border-radius: 50%; z-index: 0; opacity: 0;
  background: radial-gradient(circle, rgba(212,175,55,.38) 0%, rgba(212,175,55,.10) 44%, transparent 70%);
  transition: opacity .45s;
}
.leva-orb .orb-ring {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  margin: -50% 0 0 -50%; border-radius: 50%; z-index: 1; opacity: 0;
  border: 1.4px solid rgba(212,175,55,.55);
}
/* listening: halo up, rings travelling outward, the sparkle breathing */
.leva-orb[aria-pressed="true"] { border-color: var(--gold-primary); }
.leva-orb[aria-pressed="true"] .orb-halo { opacity: 1; animation: orbGlow 2.1s ease-in-out infinite; }
.leva-orb[aria-pressed="true"] .orb-ring { animation: orbRipple 2.6s ease-out infinite; }
.leva-orb[aria-pressed="true"] .orb-ring:nth-of-type(3) { animation-delay: 1.3s; }
.leva-orb[aria-pressed="true"] .leva-spark { animation: levaBreathe 2.1s ease-in-out infinite; }
@keyframes orbRipple { 0% { transform: scale(.62); opacity: .5 } 70% { opacity: .1 } 100% { transform: scale(1.85); opacity: 0 } }
@keyframes orbGlow { 0%,100% { opacity: .6 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .leva-orb * { animation: none !important; } }

/* while listening the mark is centre stage and is also the send button */
.listen-overlay .neutron-star-wrapper { cursor: pointer; }
.listen-overlay .listen-actions { display: none; }
body[data-surface="board"] .leva-orb { display: none; }

@media (max-width: 720px) {
  .leva-orb { left: 16px; bottom: 88px; width: 56px; height: 56px; }
}

/* The shell only scrolls if something above it is actually bounded. body had
   min-height alone, so it grew to the content (834px in a 720px viewport) and
   every flex child grew with it -- overflow:auto had nothing to overflow. */
body.assistant-app { height: 100vh; height: 100dvh; max-height: 100dvh; }

/* The composer dock spans the full width at z-index 150, so the orb sat
   underneath it and was unclickable. It belongs above the dock, both in
   stacking order and on screen. */
.leva-orb { z-index: 160; bottom: calc(var(--composer-safe, 120px) + 12px); }
@media (max-width: 720px) {
  .leva-orb { bottom: calc(var(--composer-safe, 120px) + 10px); }
}

/* --- notes: one tight block, not a column of full-width bubbles ----------- */
.doc-notes {
  margin: 0 0 22px; padding: 14px 16px;
  border: 1px solid var(--border-subtle); border-radius: 12px;
  background: var(--bg-card);
}
.doc-notes .notes-label {
  font-size: 0.66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-primary); font-weight: 700; margin: 0 0 9px;
}
.doc-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-notes .note {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 1rem; line-height: 1.55; color: var(--text-body);
}
.doc-notes .note .ic { flex: 0 0 auto; opacity: .55; font-size: 0.7rem; margin-top: .28em; }
.doc-notes .note.tone-warning .ic { color: var(--gold-primary); opacity: 1; }
.doc-notes .note.tone-positive .ic { color: #39c0b3; opacity: 1; }
/* the old one-card-per-note treatment is gone */
.doc-callout { display: none; }

/* --- the answer is being written, not frozen ----------------------------- */
.turn-thinking { margin: 0 0 40px; }
.turn-thinking .who {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.turn-thinking .who .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-primary); }
.think-line { display: flex; align-items: center; gap: 11px; color: var(--text-muted); font-size: 0.92rem; margin: 0 0 14px; }
.think-dots { display: inline-flex; gap: 4px; }
.think-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-primary); opacity: .3; animation: thinkPulse 1.25s ease-in-out infinite; }
.think-dots i:nth-child(2) { animation-delay: .16s; }
.think-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes thinkPulse { 0%,100% { opacity: .25; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }
.skeleton-figure {
  height: 210px; border-radius: 14px;
  border: 1px solid var(--border-subtle); background: var(--bg-card);
  position: relative; overflow: hidden;
}
.skeleton-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.10), transparent);
  transform: translateX(-100%); animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce) {
  .think-dots i, .skeleton-figure::after { animation: none; }
}

/* --- the presence is the control, so make it a target ------------------- */
.listen-overlay .neutron-star-wrapper {
  width: 230px !important; height: 230px !important;
  cursor: pointer; transition: transform .18s;
}
.listen-overlay .neutron-star-wrapper:hover { transform: scale(1.04); }
.listen-overlay .voice-state-title { font-size: 0.8rem; letter-spacing: .14em; }
.listen-overlay .live-transcript { font-size: 1.25rem; max-width: 34ch; }
@media (max-width: 720px) {
  .listen-overlay .neutron-star-wrapper { width: 180px !important; height: 180px !important; }
  .listen-overlay .live-transcript { font-size: 1.05rem; }
}

/* --- the composer must sit on the same column as the answer -------------- */
.floating-composer-dock {
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 24px));
  max-width: 860px;
}
body[data-surface="board"] .floating-composer-dock { display: none; }
body[data-surface="chat"] .floating-composer-dock { width: min(640px, calc(100vw - 24px)); }
/* the thread must never end underneath the dock */
.thread-shell { padding-bottom: calc(var(--composer-safe, 120px) + 90px); }

/* ==========================================================================
   The presence lives in the dock  (mock: input-and-presence-v3)
   --------------------------------------------------------------------------
   It used to float over the page, which on a phone meant it sat on top of the
   chart. In the approved spec the mark is the left half of the input: the
   thing you talk to and the thing you type into are one object, and the dock
   itself becomes the listening surface -- no full-screen overlay.
   ========================================================================== */
.leva-orb {
  position: static; left: auto; bottom: auto; margin: 0;
  width: 40px; height: 40px; padding: 7px; flex: 0 0 auto;
  align-self: flex-end;
  background: var(--bg-surface-solid);
  transition: width .22s ease, height .22s ease, transform .18s, border-color .18s;
}
@media (max-width: 720px) { .leva-orb { width: 38px; height: 38px; bottom: auto; } }

.composer-input-row { align-items: flex-end; gap: 8px; }
.dock-transcript, .dock-hint { display: none; }

/* --- listening: the dock is the stage ------------------------------------ */
.floating-composer-dock.listening {
  border-color: var(--gold-primary);
  box-shadow: 0 16px 50px rgba(0,0,0,.32), var(--shadow-glow);
}
.floating-composer-dock.listening .composer-tools-bar,
.floating-composer-dock.listening #composer-filters,
.floating-composer-dock.listening #follow-up-suggestions,
.floating-composer-dock.listening .composer-send-btn { display: none; }
.floating-composer-dock.listening .composer-input-row {
  flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 20px;
}
.floating-composer-dock.listening .leva-orb {
  width: 104px; height: 104px; padding: 12px; align-self: center;
}
.floating-composer-dock.listening #question {
  text-align: center; font-size: 1.05rem; color: var(--text-title);
  max-height: 84px; width: 100%;
}
.floating-composer-dock.listening .dock-transcript {
  display: block; text-align: center; font-size: 1.05rem; line-height: 1.45;
  color: var(--text-title); min-height: 1.45em; padding: 0 6px;
}
.floating-composer-dock.listening .dock-transcript:empty::before {
  content: "J'écoute…"; color: var(--text-muted);
}
.floating-composer-dock.listening .dock-hint {
  display: block; text-align: center; font-size: 0.72rem; letter-spacing: .06em;
  color: var(--text-muted); padding-bottom: 4px;
}

/* --- the arrow only lights when there is something to send ---------------- */
.composer-send-btn { opacity: .38; transition: opacity .18s, transform .18s; }
.composer-send-btn.armed { opacity: 1; }
.composer-send-btn.armed:hover { transform: translateY(-1px); }

/* --- phone: the header is a single line, the chips scroll ----------------- */
@media (max-width: 720px) {
  .app-header { padding: 8px 10px; gap: 8px; }
  .app-header .brand-section { min-width: 0; gap: 8px; }
  .app-header .brand-sub,
  .app-header .source-switcher-wrap,
  .app-header .tenant-pill { display: none; }
  .app-header .brand-title { font-size: 0.86rem; letter-spacing: .04em; }
  .app-header .brand-logo-svg { width: 26px; height: 26px; }
  .surface-switch { flex: 0 0 auto; }
  .surface-switch button { padding: 5px 9px; font-size: 0.68rem; }
  .composer-tools-bar { scrollbar-width: none; }
  .composer-tools-bar::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Two measures  (mock: answer-layout-v2)
   --------------------------------------------------------------------------
   Prose is read, figures are looked at, and they do not want the same width.
   One 860px column made the paragraphs too wide to read comfortably and the
   charts too narrow to compare. Prose 760, page 1180: text stays inside the
   page and figures use all of it.
   ========================================================================== */
:root { --prose: 760px; --page: 1180px; }

.thread, .welcome-studio, #plan-validation-host { max-width: var(--page); }
.turn-answer > * { max-width: var(--prose); margin-left: auto; margin-right: auto; }
.turn-answer > .doc-figure,
.turn-answer > .doc-fig-pair,
.turn-answer > .doc-kpis,
.turn-answer > .doc-notes { max-width: var(--prose); }
body[data-surface="chat"] .thread { max-width: 640px; }
body[data-surface="chat"] .turn-answer > * { max-width: none; }

/* the composer sits on the page measure, not on the prose measure */
.floating-composer-dock { width: min(var(--page), calc(100vw - 32px)); max-width: var(--page); }

/* --- the verdict: the one number the answer is about --------------------- */
.doc-verdict {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 auto 24px; padding: 16px 18px;
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--gold-primary);
  border-radius: 12px; background: var(--bg-card);
}
.doc-verdict .k {
  font-size: 1.9rem; line-height: 1; color: var(--gold-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.doc-verdict .k .u { font-size: 0.86rem; margin-left: 5px; color: var(--text-muted); }
.doc-verdict .t { font-size: 0.95rem; line-height: 1.5; color: var(--text-body); }
.doc-verdict .t small {
  display: block; margin-top: 4px; font-size: 0.82rem; color: var(--text-muted);
}

/* --- the KPI band: supporting figures, read at a glance ------------------ */
.doc-kpis { display: grid; gap: 12px; margin: 0 auto 22px; grid-template-columns: repeat(4, 1fr); }
.doc-kpis[data-n="1"] { grid-template-columns: minmax(0, 320px); }
.doc-kpis[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.doc-kpis[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.doc-kpi {
  border: 1px solid var(--border-subtle); border-radius: 12px;
  padding: 13px 15px; background: var(--bg-card);
}
.doc-kpi .v {
  font-size: 1.35rem; letter-spacing: -.02em; color: var(--text-title);
  font-variant-numeric: tabular-nums;
}
.doc-kpi .v small { font-size: 0.72rem; color: var(--text-muted); margin-left: 4px; }
.doc-kpi .l { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.doc-kpi.warn .v { color: var(--gold-primary); }

/* --- two figures that answer the same question, side by side ------------- */
.doc-fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 auto 22px; }
.doc-fig-pair .doc-figure { margin: 0; }
.doc-fig-pair .echarts-viewport { height: 236px; }

/* the lead paragraph carries the answer; the rest support it */
.doc-paragraph.lead { font-size: 1.04rem; color: var(--text-title); }

/* the morph controls belong to the figure, on hover, not under it */
.doc-figure .refine-row { opacity: 0; transition: opacity .16s; }
.doc-figure:hover .refine-row,
.doc-figure:focus-within .refine-row { opacity: 1; }

@media (max-width: 1000px) {
  .doc-fig-pair { grid-template-columns: 1fr; }
  .doc-kpis, .doc-kpis[data-n="3"], .doc-kpis[data-n="4"] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .turn-answer > * { max-width: none; }
  .doc-verdict .k { font-size: 1.55rem; }
  .doc-figure .refine-row { opacity: 1; }
  .doc-kpis { gap: 8px; }
}

@media (max-width: 720px) {
  .floating-composer-dock { bottom: 8px; width: calc(100vw - 16px); max-width: none; }
}

/* --- listening: the mark first, then the words it heard ------------------ */
.floating-composer-dock.listening { padding: 6px 0 4px; }
.floating-composer-dock.listening .composer-input-row { order: 1; padding: 14px 16px 6px; }
.floating-composer-dock.listening .dock-transcript { order: 2; }
.floating-composer-dock.listening .dock-hint { order: 3; padding: 8px 0 6px; }
/* the placeholder sat under the mark, offering typing while it listened */
.floating-composer-dock.listening #question { display: none; }
/* the rings must travel inside the dock, not across the transcript */
.floating-composer-dock.listening .leva-orb .orb-ring { animation-name: orbRippleTight; }
@keyframes orbRippleTight {
  0% { transform: scale(.7); opacity: .45 }
  70% { opacity: .08 }
  100% { transform: scale(1.28); opacity: 0 }
}

/* ==========================================================================
   The turn talks first
   --------------------------------------------------------------------------
   One sentence saying what was understood, on screen in about a second. The
   reader is never watching a blank tunnel, and a misreading shows before the
   query rather than after it.
   ========================================================================== */
.turn-ack { max-width: var(--prose); margin: 0 auto 8px; }
.turn-ack .who {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.turn-ack .who .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-primary);
}
.turn-ack p {
  margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-body);
}
.turn-interrupted {
  max-width: var(--prose); margin: 0 auto 28px;
  font-size: 0.84rem; color: var(--text-muted);
  padding: 8px 12px; border-left: 2px solid var(--border-main);
}

/* --- the arrow becomes a stop square while a turn runs -------------------- */
.composer-send-btn.is-stop { opacity: 1; }
.composer-send-btn.is-stop svg { display: none; }
.composer-send-btn.is-stop::after {
  content: ""; width: 12px; height: 12px; border-radius: 3px;
  background: currentColor; display: block;
}

/* --- a figure that did not earn its place, one tap away ------------------- */
.figure-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: var(--prose); margin: 0 auto 22px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.86rem;
  background: var(--bg-card); border: 1px solid var(--border-main);
  color: var(--text-muted);
}
.figure-chip:hover { color: var(--text-title); border-color: var(--gold-primary); }
.figure-chip .ic { color: var(--gold-primary); }
.turn-answer > .figure-chip { display: flex; width: fit-content; }
.thread-action {
  color: var(--gold-primary); text-decoration: none; font-weight: 600;
}
.thread-action:hover { text-decoration: underline; }
button.thread-action { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.thread-action:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* the acknowledgement and the answer are one message: no gap, no second byline */
.turn-ack { margin-bottom: 18px; }
.turn-ack + .turn-answer { margin-top: 0; }
.turn-thinking { max-width: var(--prose); margin-left: auto; margin-right: auto; }

/* `margin: 0 0 14px` cancelled the auto side margins, so the byline sat on the
   page edge while the prose under it was centred. */
.turn-answer .who { margin: 0 auto 14px; }
.doc-note-empty {
  max-width: var(--prose); margin: 0 auto 20px;
  font-size: 0.84rem; color: var(--text-muted);
  padding-left: 12px; border-left: 2px solid var(--border-main);
}

/* the seam between what you said before and what you say now */
.thread-resume {
  max-width: var(--prose); margin: 6px auto 30px;
  display: flex; align-items: center; gap: 12px;
  font-size: 0.7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.thread-resume::before, .thread-resume::after {
  content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}


/* Tables show every row; the reader scrolls, and the count is said. */
.table-scroll { max-height: 420px; overflow: auto; }
.table-count { padding: 6px 12px 10px; font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.thread[hidden] { display: none !important; }

/* The display keeps the reader's question above its answer, larger. */
body[data-surface="board"] .turn-ask { opacity: 0.8; }
body[data-surface="board"] .turn-ask-text { font-size: 1.15rem; }

/* Phone header: the mark sat on « Complet » and the theme label wrapped over
   the pills. One row of what matters, the wordmark and tenant pill gone, the
   theme button an icon. */
@media (max-width: 720px) {
  .app-header { flex-wrap: wrap; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .app-header .brand-title, .app-header .brand-sub, .app-header .tenant-pill,
  .app-header .source-switcher-select { display: none; }
  .app-header .header-actions { gap: 6px; margin-left: auto; }
  #theme-toggle-btn { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
  #theme-toggle-btn [data-theme-toggle-label] { display: none; }
  #theme-toggle-btn::before { content: "◐"; font-size: 1.05rem; line-height: 1; }
  #logout-btn { font-size: 0.7rem; padding: 5px 8px; }
}

/* While listening on a phone, one mark is enough: the one beside « Écoute en
   cours ». The dock keeps the words and the hint. */
@media (max-width: 720px) {
  .floating-composer-dock.listening .leva-orb { display: none; }
  .floating-composer-dock.listening .composer-input-row { padding: 6px 16px 0; }
}

/* Login options: the checkbox inherited the full-width input rule and the
   label the uppercase heading rule, so each box floated above three lines of
   capitals. One row each, plain text. */
.login-opts label {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.86rem;
  margin: 0; color: var(--text-body);
}
.login-opts label input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--gold-primary);
}

/* Touch: no grey tap rectangle over the mark, no text selection on hold. */
#leva-orb, #voice-trigger, #mobile-voice-trigger, .neutron-star-wrapper, .composer-chip,
.surface-switch button, .composer-send-btn, .figure-chip {
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;
}
/* The send button is lit when there is something to send. */
.composer-send-btn.has-text { background: var(--gold-primary); color: #1a1408; opacity: 1; }
.composer-send-btn:not(.has-text):not(.is-stop) { opacity: 0.55; }

/* Conversation drawer. */
.conv-toggle { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-main);
  background: var(--bg-surface); display: inline-grid; place-items: center; gap: 3px; cursor: pointer; margin-right: 10px;
  -webkit-tap-highlight-color: transparent; }
.conv-toggle span { display: block; width: 16px; height: 2px; background: var(--text-muted); border-radius: 2px; }
.conv-toggle[aria-expanded="true"] span { background: var(--gold-primary); }
.conv-drawer { position: fixed; top: var(--header-h); left: 0; bottom: 0; width: min(320px, 86vw); z-index: 60;
  background: var(--bg-surface-solid); border-right: 1px solid var(--border-main); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden; }
.conv-drawer[hidden] { display: none; }
.conv-scrim { position: fixed; inset: var(--header-h) 0 0 0; z-index: 55; background: rgba(0,0,0,0.35); }
.conv-scrim[hidden] { display: none; }
.conv-drawer-head { padding: 12px; border-bottom: 1px solid var(--border-subtle); }
.conv-new { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--gold-border);
  background: transparent; color: var(--text-title); font-weight: 600; cursor: pointer; text-align: left; }
.conv-new:hover { background: var(--bg-card-hover); }
.conv-cockpit { width: 100%; margin-bottom: 8px; padding: 10px 12px; border-radius: 10px; border: 0; cursor: pointer; text-align: left;
  background: #0E1726; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(14,23,38,.18); }
.conv-cockpit[hidden] { display: none; }
.conv-cockpit:hover { background: #16263F; }
.conv-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.conv-item { position: relative; display: flex; align-items: stretch; border-radius: 10px; }
.conv-item:hover, .conv-item.current { background: var(--bg-card-hover); }
.conv-item.current .conv-title { color: var(--gold-primary); }
.conv-open-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 10px;
  background: transparent; border: 0; color: var(--text-body); text-align: left; cursor: pointer; }
.conv-title { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-title); }
.conv-meta { font-size: 0.72rem; color: var(--text-muted); }
.conv-more { width: 34px; border: 0; background: transparent; color: var(--text-muted); font-size: 1.1rem; cursor: pointer;
  opacity: 0; border-radius: 8px; }
.conv-item:hover .conv-more, .conv-item.current .conv-more, .conv-more:focus { opacity: 1; }
@media (pointer: coarse) { .conv-more { opacity: 1; } }
.conv-menu { position: absolute; right: 8px; top: 40px; z-index: 2; background: var(--bg-surface-solid);
  border: 1px solid var(--border-main); border-radius: 10px; box-shadow: var(--shadow-card); padding: 4px; min-width: 150px; }
.conv-menu[hidden] { display: none; }
.conv-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent;
  color: var(--text-body); border-radius: 7px; cursor: pointer; font-size: 0.86rem; }
.conv-menu button:hover { background: var(--bg-card-hover); }
.conv-menu button.danger { color: #d9534f; }
.conv-empty { padding: 14px 10px; color: var(--text-muted); font-size: 0.85rem; }
@media (min-width: 1100px) {
  body.conv-open .thread-shell { margin-left: 320px; width: calc(100% - 320px); }
  body.conv-open .conv-scrim { display: none; }
}
@media (max-width: 720px) {
  .conv-toggle { margin-right: 6px; width: 32px; height: 32px; }
}

/* Lists inside an answer. */
.doc-list { max-width: 760px; margin: 6px auto 14px; padding-left: 22px; color: var(--text-body); line-height: 1.55; }
.doc-list li { margin: 4px 0; }
.doc-paragraph strong, .doc-list strong { color: var(--text-title); font-weight: 700; }

/* The menu under the mark. */
.brand-menu { position: absolute; top: calc(var(--header-h) - 4px); left: 12px; z-index: 120;
  background: var(--bg-surface-solid); border: 1px solid var(--border-main); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 6px; min-width: 210px; }
.brand-menu[hidden] { display: none; }
.brand-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0;
  background: transparent; color: var(--text-body); border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.brand-menu button:hover { background: var(--bg-card-hover); }
.brand-menu button.danger { color: #d9534f; }

/* Light theme: the surface pills carry the same deep green as the chips
   below, not the orange the gold token resolves to on light. */
:root[data-theme="light"] .surface-switch button.on { background: var(--text-title); color: var(--bg-card); }
:root[data-theme="light"] .surface-switch { background: transparent; border: 1px solid var(--border-main); }

/* Phone header: one crisp row, nothing hovering over the text. */
@media (max-width: 720px) {
  .app-header { flex-wrap: nowrap; height: var(--header-h); padding: 0 10px; gap: 6px; overflow: visible; }
  .app-header .header-actions { gap: 0; margin-left: auto; }
  .app-header #theme-toggle-btn, .app-header #logout-btn { display: none; }
  .conv-toggle { width: 28px; height: 28px; margin-right: 4px; gap: 2px; border-color: transparent; background: transparent; }
  .conv-toggle span { width: 14px; height: 1.5px; }
  .surface-switch { background: transparent; border: 0; padding: 0; gap: 0; }
  .surface-switch button { padding: 6px 8px; font-size: 0.72rem; border-radius: 999px; }
  .app-header .brand-logo-svg { width: 24px; height: 24px; }
  .thread-shell { padding-top: 6px; }
}

/* iPhone: keep the dock and the header clear of the notch and the home bar. */
.floating-composer-dock { padding-bottom: calc(env(safe-area-inset-bottom, 0px)); }
.app-header { padding-top: env(safe-area-inset-top, 0px); }

/* On a touch screen there is no hover: the view buttons are always there. */
@media (pointer: coarse) { .doc-figure .refine-row { opacity: 1; } }
.refine-row .ghost-btn.active { border-color: var(--gold-primary); color: var(--text-title); }
#follow-up-suggestions:empty { display: none; }

/* Preset dashboard ("tableau de bord"). */
.turn-answer > .db-board { max-width: var(--page); }
.db-board { display: grid; gap: 22px; margin: 0 auto 26px; }
.db-section { background: var(--bg-surface-solid); border: 1px solid var(--border-main); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-card); }
.db-title { margin: 0 0 12px; font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-primary); font-weight: 700; }
.db-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.db-table th, .db-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.db-table thead th { color: var(--text-muted); font-size: 0.74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.db-table thead tr.groups th { text-align: center; color: var(--text-title); font-size: 0.8rem; border-bottom: 2px solid var(--gold-primary); }
.db-table thead tr.groups th:empty { border-bottom-color: transparent; }
.db-table tbody th { text-align: left; font-weight: 600; color: var(--text-title); }
.db-table td.unit { color: var(--text-muted); font-size: 0.85rem; text-align: left; }
.db-table tbody td { font-variant-numeric: tabular-nums; color: var(--text-body); }
.db-var { font-weight: 700; }
.db-var.up { color: #b45309; }
.db-var.down { color: #1f7a5c; }
.db-var.flat, .db-var.na { color: var(--text-muted); font-weight: 500; }
.db-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.db-kpi { padding: 14px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); }
.db-kpi .k { font-size: 1.7rem; font-weight: 700; color: var(--text-title); font-variant-numeric: tabular-nums; }
.db-kpi .l { font-size: 0.86rem; color: var(--text-muted); margin-top: 4px; }
.db-shares { display: grid; gap: 10px; }
.db-share { display: grid; grid-template-columns: 110px 1fr 150px; align-items: center; gap: 12px; }
.db-share .l { color: var(--text-title); font-weight: 600; }
.db-share .bar { height: 10px; border-radius: 999px; background: var(--bg-card); overflow: hidden; }
.db-share .bar i { display: block; height: 100%; background: var(--gold-primary); border-radius: 999px; }
.db-share .k { text-align: right; font-weight: 700; color: var(--text-title); font-variant-numeric: tabular-nums; }
.db-share .k small { color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.dashboard-menu { position: absolute; bottom: 44px; left: 12px; z-index: 30; background: var(--bg-surface-solid); border: 1px solid var(--border-main); border-radius: 12px; box-shadow: var(--shadow-card); padding: 6px; min-width: 240px; }
.dashboard-menu[hidden] { display: none; }
.dashboard-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: transparent; color: var(--text-body); border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.dashboard-menu button:hover { background: var(--bg-card-hover); }
body[data-surface="board"] .db-table { font-size: 1.15rem; }
body[data-surface="board"] .db-kpi .k { font-size: 2.2rem; }
@media (max-width: 720px) {
  .db-table { font-size: 0.86rem; }
  .db-table th, .db-table td { padding: 8px 8px; }
  .db-share { grid-template-columns: 80px 1fr 110px; }
}

/* Header: theme and sign-out live under the mark on every screen. */
.app-header #theme-toggle-btn, .app-header #logout-btn { display: none !important; }
/* The client's mark. Clear plate on the dark theme, nothing on the light one. */
.client-logo { height: 26px; width: auto; margin-left: 8px; background: #fff; padding: 3px 7px; border-radius: 7px; flex-shrink: 0; }
:root[data-theme="light"] .client-logo { background: transparent; padding: 0; }
/* The drawer toggle: three short lines close together, not spread across a box. */
.conv-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 34px; height: 34px; }
.conv-toggle span { width: 16px; height: 2px; }
/* Welcome: the line under Bonjour stays on one line; the quick questions are a labelled tier. */
#welcome-line { max-width: none; }
.welcome-row-label { display: block; width: 100%; font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 6px 0 2px; }
#welcome-suggestions .welcome-chip { font-size: 0.82rem; }
@media (max-width: 720px) {
  .client-logo { height: 20px; margin-left: 4px; padding: 2px 5px; }
  .conv-toggle { width: 30px; height: 30px; gap: 3px; }
  .conv-toggle span { width: 14px; height: 1.5px; }
}

/* Magic link on the sign-in screen. */
.magic-block { margin-top: 14px; }
.magic-block[hidden] { display: none; }
.magic-sep { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.78rem; margin: 6px 0 12px; }
.magic-sep::before, .magic-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-main); }
.btn-secondary { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--gold-border, var(--border-main));
  background: transparent; color: var(--text-title); font-weight: 600; cursor: pointer; font: inherit; }
.btn-secondary:hover { background: var(--bg-card-hover); }
.btn-secondary:disabled { opacity: 0.6; cursor: wait; }
.magic-hint { margin: 10px 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }

/* Tool chips (modes) and suggested questions are two different things. */
.composer-chip.tool { text-transform: uppercase; letter-spacing: .06em; font-size: 0.68rem; border-radius: 8px;
  background: transparent; border: 1px solid var(--border-main); color: var(--text-muted); }
.composer-chip.tool.active { background: var(--text-title, #0E1726); color: #fff; border-color: transparent; }
:root:not([data-theme="light"]) .composer-chip.tool.active { background: var(--gold-primary); color: #1a1408; }
#follow-up-suggestions .composer-chip { background: var(--bg-card); border-color: var(--border-subtle); color: var(--text-body);
  font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.8rem; border-radius: 999px; }
#follow-up-suggestions .composer-chip:hover { border-color: var(--gold-primary); color: var(--text-title); }
#follow-up-suggestions { padding-top: 6px; }
@media (max-width: 720px) {
  .composer-tools-bar { padding: 8px 10px 0; gap: 6px; }
  #follow-up-suggestions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 10px 6px; }
  #follow-up-suggestions::-webkit-scrollbar { display: none; }
  #follow-up-suggestions .composer-chip { white-space: nowrap; flex-shrink: 0; }
}

/* Phone header, third pass: the mark keeps its room, the pills shrink, the
   client's mark is small, and nothing overlaps. */
@media (max-width: 720px) {
  .app-header { gap: 4px; padding: 0 8px; }
  .app-header .brand-section { flex: 0 0 auto; gap: 0; margin-right: 6px; }
  .app-header .brand-section .brand-text, .app-header .brand-title, .app-header .brand-sub { display: none; }
  .app-header .source-switcher-wrap { display: none; }
  .app-header .header-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 4px; }
  .surface-switch { flex: 0 1 auto; min-width: 0; }
  .surface-switch button { padding: 5px 7px; font-size: 0.68rem; letter-spacing: 0; }
  .client-logo { height: 16px; padding: 2px 4px; margin-left: 2px; }
}
@media (max-width: 380px) {
  .surface-switch button { padding: 5px 5px; font-size: 0.64rem; }
  .client-logo { display: none; }
}

/* Dashboard, second pass: tinted groups, coloured variations, one month at a time. */
.db-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 4px; }
.db-nav-btn { appearance: none; font: inherit; font-size: 0.82rem; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-main); background: var(--bg-surface-solid); color: var(--text-body); cursor: pointer; }
.db-nav-btn:hover:not(:disabled) { border-color: var(--gold-primary); color: var(--text-title); }
.db-nav-btn:disabled { opacity: 0.35; cursor: default; }
.db-period { text-align: center; }
.db-period-main { display: block; font-size: 1.05rem; font-weight: 700; color: var(--text-title); }
.db-period-base { display: block; font-size: 0.74rem; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.db-table { font-size: 1.02rem; }
.db-table th, .db-table td { padding: 11px 14px; }
.db-table thead tr.groups th { border-bottom: 0; padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 0.78rem; letter-spacing: .08em; }
.db-table thead tr.subs th { border-bottom: 2px solid var(--border-main); font-size: 0.7rem; }
.db-table thead tr.groups th.g-real, .db-table thead tr.subs th.g-real, .db-table tbody td.g-real { background: rgba(31, 122, 92, 0.08); }
.db-table thead tr.groups th.g-base, .db-table thead tr.subs th.g-base, .db-table tbody td.g-base { background: rgba(120, 120, 120, 0.07); }
.db-table thead tr.groups th.g-var, .db-table thead tr.subs th.g-var, .db-table tbody td.g-var { background: rgba(15, 123, 138, 0.07); }
.db-table thead tr.groups th.g-real { color: #1f7a5c; }
.db-table thead tr.groups th.g-var { color: var(--gold-primary); }
.db-table tbody td.g-real { font-weight: 700; color: var(--text-title); }
.db-table tbody td.g-base { color: var(--text-muted); }
.db-table tbody tr:hover td, .db-table tbody tr:hover th { background-color: var(--bg-card-hover); }
.db-var { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; }
.db-var i { font-style: normal; font-size: 0.7em; }
.db-var.good { color: #1f7a5c; background: rgba(31, 122, 92, 0.14); }
.db-var.bad { color: #b3261e; background: rgba(179, 38, 30, 0.12); }
.db-var.neutral { color: #b45309; background: rgba(180, 83, 9, 0.12); }
.db-var.flat, .db-var.na { color: var(--text-muted); background: var(--bg-card); font-weight: 500; }
:root:not([data-theme="light"]) .db-var.good { color: #5fd3a8; }
:root:not([data-theme="light"]) .db-var.bad { color: #ff8a80; }
:root:not([data-theme="light"]) .db-var.neutral { color: #f4c25b; }
.db-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.db-kpi { padding: 18px 20px; border-left: 4px solid var(--gold-primary); }
.db-kpi .k { font-size: 2.3rem; line-height: 1.05; letter-spacing: -.01em; }
.db-kpi .k small { font-size: 0.8rem; margin-left: 6px; color: var(--text-muted); font-weight: 600; }
.db-kpi .l { font-size: 0.88rem; margin-top: 8px; }
.db-share .bar { height: 14px; }
.db-share.tone-0 .bar i { background: linear-gradient(90deg, #1f7a5c, #35b28a); }
.db-share.tone-1 .bar i { background: linear-gradient(90deg, #b45309, #e5a53a); }
.db-share.tone-2 .bar i { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.db-share.tone-3 .bar i { background: linear-gradient(90deg, #6d28d9, #a78bfa); }
.db-share .k { font-size: 1.15rem; }
body[data-surface="board"] .db-table { font-size: 1.25rem; }
body[data-surface="board"] .db-kpi .k { font-size: 3rem; }
body[data-surface="board"] .db-nav { display: none; }
@media (max-width: 720px) {
  .db-nav-btn { padding: 7px 10px; font-size: 0.74rem; }
  .db-table { font-size: 0.86rem; }
  .db-table th, .db-table td { padding: 8px 8px; }
  .db-kpi .k { font-size: 1.8rem; }
}

/* One width on every surface: the conversation used to shrink to 640px and
   the page felt like a different app when switching. */
body[data-surface="chat"] .thread { max-width: var(--page); }
body[data-surface="chat"] .turn-answer > * { max-width: var(--prose); margin-left: auto; margin-right: auto; }
body[data-surface="chat"] .turn-answer > .doc-figure,
body[data-surface="chat"] .turn-answer > .doc-fig-pair,
body[data-surface="chat"] .turn-answer > .doc-kpis,
body[data-surface="chat"] .turn-answer > .db-board { max-width: var(--page); }
body[data-surface="chat"] .floating-composer-dock { width: min(var(--page), calc(100vw - 32px)); }

/* Board on a phone held upright: cards, not an eight-column table. */
.db-cards { display: none; }
@media (max-width: 720px) {
  .db-table-wrap { display: none; }
  .db-cards { display: grid; gap: 10px; }
  .db-card { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 12px 10px; background: var(--bg-card); }
  .db-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
  .db-card-head .l { font-weight: 700; color: var(--text-title); font-size: 0.98rem; }
  .db-card-head .u { font-size: 0.74rem; color: var(--text-muted); }
  .db-card-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .db-card-col { border-left: 3px solid rgba(31, 122, 92, 0.35); padding-left: 10px; }
  .db-card-col:last-child { border-left-color: rgba(15, 123, 138, 0.5); }
  .db-card-col .cap { font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
  .db-card-col .v { font-size: 1.35rem; font-weight: 700; color: var(--text-title); font-variant-numeric: tabular-nums; line-height: 1.15; margin: 2px 0; }
  .db-card-col .b { font-size: 0.74rem; color: var(--text-muted); margin-bottom: 6px; }
  .db-card-col .db-var { font-size: 0.82rem; padding: 2px 8px; }
  .db-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .db-kpi { padding: 12px 12px; }
  .db-kpi .k { font-size: 1.55rem; }
  .db-kpi .l { font-size: 0.78rem; }
  .db-section { padding: 12px 12px; border-radius: 12px; }
  .db-share { grid-template-columns: 72px 1fr 100px; gap: 8px; }
  .db-share .k { font-size: 0.95rem; }
  .db-nav { gap: 8px; }
  .db-nav-btn { padding: 7px 10px; font-size: 0.72rem; }
}

/* The orb's halo overflowed across the text field with a pointer cursor:
   hovering the field flipped the cursor between the two without end. The
   halo is decoration; the pointer passes through it. */
.orb-halo { pointer-events: none !important; }
.leva-orb { overflow: visible; }

/* The listening stage is dark on both themes: its words are light. */
#listening-stage-view .live-transcript, .listen-overlay .live-transcript { color: #f4efe3; }
#listening-stage-view .live-transcript .old, .listen-overlay .live-transcript .old { color: rgba(244, 239, 227, 0.55); }
#listening-stage-view .voice-transcript-caption, .listen-overlay .voice-transcript-caption { color: rgba(244, 239, 227, 0.6); }
/* A list of questions inside an answer: chips that ask them. */
.doc-asklist { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--prose); margin: 4px auto 16px; }
.doc-ask { appearance: none; cursor: pointer; font: inherit; font-size: 0.9rem; text-align: left;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-main); background: var(--bg-card); color: var(--text-title); }
.doc-ask:hover { border-color: var(--gold-primary); background: var(--bg-card-hover); }
.turn-followups { max-width: var(--prose); margin-left: auto; margin-right: auto; }

/* A menu item announced, not yet built. */
.conv-menu button.soon { opacity: 0.55; cursor: default; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.conv-menu button.soon .soon-tag { font-size: 0.64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-primary); border: 1px solid var(--gold-border, var(--border-main)); border-radius: 999px; padding: 1px 6px; }

/* Account menu at the right of the header. */
.account-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-main); background: var(--bg-card);
  color: var(--text-title); font-weight: 700; font-size: 0.85rem; cursor: pointer; margin-left: 8px; display: inline-grid; place-items: center; flex-shrink: 0; }
.account-btn:hover { border-color: var(--gold-primary); }
.account-menu { position: absolute; top: calc(var(--header-h) - 4px); right: 12px; z-index: 120;
  background: var(--bg-surface-solid); border: 1px solid var(--border-main); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 6px; min-width: 230px; }
.account-menu[hidden] { display: none; }
.account-menu .account-email { padding: 8px 12px 10px; font-size: 0.78rem; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0;
  background: transparent; color: var(--text-body); border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.account-menu button:hover { background: var(--bg-card-hover); }
.account-menu button.danger { color: #d9534f; }
.brand-section { cursor: default; }
/* The pane as part of the layout on a wide screen: content and composer move together. */
@media (min-width: 1100px) {
  body.conv-open .floating-composer-dock { left: calc(50% + 160px) !important; width: min(1180px, calc(100vw - 356px)); }
  body.conv-open .pair-flag { left: 334px; }
  .conv-drawer { box-shadow: none; }
}
@media (max-width: 720px) {
  .account-btn { width: 28px; height: 28px; font-size: 0.78rem; margin-left: 4px; }
}

/* Data map. */
.client-logo[hidden] { display: none !important; }
.turn-answer > .dm-board { max-width: var(--page); }
.dm-board { position: relative; margin: 0 auto 20px; }
.dm-groups { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 14px; align-items: start; }
.dm-group { background: var(--bg-surface-solid); border: 1px solid var(--border-main); border-radius: 14px; padding: 12px; }
.dm-group.ref { grid-column: 4; grid-row: 1 / span 3; }
.dm-group-title { margin: 0 0 10px; font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-primary); font-weight: 700; }
.dm-cards { display: grid; gap: 8px; }
.dm-card { appearance: none; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--border-subtle); background: var(--bg-card);
  border-radius: 10px; padding: 9px 11px; display: grid; gap: 3px; color: var(--text-body); }
.dm-card:hover { border-color: var(--gold-primary); background: var(--bg-card-hover); }
.dm-card-label { font-weight: 700; color: var(--text-title); font-size: 0.92rem; }
.dm-card-meta { font-size: 0.72rem; color: var(--text-muted); }
.dm-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.dm-card-tags i { font-style: normal; font-size: 0.66rem; padding: 1px 6px; border-radius: 999px; background: rgba(31, 122, 92, 0.12); color: var(--text-body); }
.dm-group.ref .dm-card { padding: 6px 9px; }
.dm-group.ref .dm-card-tags { display: none; }
.dm-legend { margin: 12px 0 0; font-size: 0.8rem; color: var(--text-muted); }
body[data-surface="board"] .dm-card-label { font-size: 1.05rem; }
@media (max-width: 900px) {
  .dm-groups { grid-template-columns: 1fr; }
  .dm-group.ref { grid-column: auto; grid-row: auto; }
}

#advanced-menu { left: auto; right: 12px; }

/* Advanced tools are for a wide screen; nothing of them on a phone. */
@media (max-width: 720px) { #chip-advanced, #advanced-menu { display: none !important; } }

/* Relations on demand: the pointed card and its kin stand out, the rest steps back. */
.dm-card { transition: opacity .15s, border-color .15s, box-shadow .15s; }
.dm-card.is-dim { opacity: .38; }
.dm-card.is-focus { border-color: var(--gold-primary); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25); }
.dm-card.is-linked { border-color: #1f7a5c; box-shadow: 0 0 0 2px rgba(31, 122, 92, 0.18); }
.dm-relations { margin: 12px 0 0; font-size: 0.84rem; color: var(--text-body); min-height: 1.4em; }

.dataset-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 18px auto 24px; max-width: 760px; font-size: .8rem; color: var(--text-muted); }
.dataset-summary[hidden] { display: none; }
.dataset-badge { color: var(--text-body); border: 1px solid var(--border-main); border-radius: 999px; padding: 1px 9px; }
.calculation-card { margin: 20px 0; padding: 22px 24px; border: 1px solid var(--border-main); border-radius: 16px; background: var(--bg-surface-solid); font-variant-numeric: tabular-nums; }
.calculation-periods { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; color: var(--text-title); }
.calculation-periods > div { display: grid; gap: 5px; }
.calculation-periods > div:last-child { text-align: right; }
.calculation-periods strong { font-size: clamp(1rem, 2vw, 1.4rem); }
.calculation-periods small, .calculation-unit { font-size: .78rem; color: var(--text-muted); }
.calculation-unit { margin: 9px 0 18px; }
.calculation-effect, .calculation-total { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-subtle); align-items: center; font-size: .92rem; }
.calculation-effect small { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 3px; }
.calculation-effect strong, .calculation-total strong { white-space: nowrap; color: var(--text-title); }
.calculation-total { font-weight: 700; border-color: var(--border-main); }
.calculation-method { font-size: .8rem; line-height: 1.6; color: var(--text-muted); padding-top: 12px; }
.calculation-method summary { cursor: pointer; color: var(--text-body); padding: 4px 0; }
.calculation-method p { margin: 10px 0 0; }
.figure-chip:focus-visible, .calculation-method summary:focus-visible, .welcome-chip:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 3px; }
@media (max-width: 600px) {
  .calculation-card { padding: 16px; }
  .calculation-effect { font-size: .84rem; gap: 10px; }
  .calculation-periods { gap: 10px; }
  .calculation-periods strong { font-size: .96rem; }
}

.doc-notice, .doc-method { margin: 12px 0; color: var(--muted, #516761); font-size: 12px; line-height: 1.55; }
.doc-notice { border-left: 2px solid #c3d0ca; padding: 6px 12px; }
.doc-notice p, .doc-method p { margin: 4px 0; }
.doc-notice small { font-size: 11px; }
.doc-method summary, .doc-notice summary { cursor: pointer; }

.budget-nav { color: #087052; background: #e8f2e9; border: 1px solid #c9ddce; border-radius: 8px; padding: 8px 11px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media(max-width:700px) { .budget-nav { font-size: 10px; padding: 6px; } }

.doc-budget { padding:20px; border:1px solid #c9ddce; border-radius:12px; background:#edf5ed; margin:16px 0; } .doc-budget small { display:block; font-size:11px; color:#5f7868; margin-top:5px; } .doc-budget a { color:#087052; font-weight:600; }
/* Advanced belongs to one anchored header menu, not a detached composer popup. */
.advanced-tools{position:relative;flex-shrink:0}.advanced-tools>summary{cursor:pointer;list-style:none;padding:9px 13px;border:1px solid var(--border-main);border-radius:9px;background:var(--bg-card);color:var(--text-title);font-size:12px}.advanced-tools>summary::after{content:' ▾';color:var(--text-muted)}.advanced-tools>nav{position:absolute;z-index:150;top:calc(100% + 8px);right:0;width:250px;max-width:85vw;padding:7px;background:var(--bg-card);border:1px solid var(--border-main);border-radius:11px;box-shadow:0 8px 28px #0003}.advanced-tools>nav>a,.advanced-tools>nav>button{display:block;text-align:left;width:100%;font:inherit;font-size:13px;text-decoration:none;color:var(--text-title);background:transparent;border:0;border-radius:6px;padding:12px;cursor:pointer}.advanced-tools>nav>a:hover,.advanced-tools>nav>button:hover{background:var(--bg-card-hover)}.advanced-tools :focus-visible{outline:2px solid var(--gold-primary);outline-offset:2px}
/* On a phone the menu button sits near the left edge: the menu opens rightwards, on screen. */
@media(max-width:700px){.advanced-tools>nav{right:auto;left:0}}
#alma-input-review {
  display: grid;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 12px 0;
  max-height: min(240px, 38dvh);
  overflow: auto;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}
#alma-input-review:empty { display: none; }
#alma-input-review p { margin: 0; }
#alma-input-review .input-feedback-heading,
#alma-input-review .input-feedback-title { color: var(--text-title); font-weight: 700; }
#alma-input-review .input-feedback-hint { color: var(--text-muted); }
#alma-input-review button {
  min-height: 36px;
  padding: 6px 12px;
  margin: 2px 0 0;
  border: 1px solid var(--border, #dce5df);
  border-radius: 8px;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
}
#alma-input-review button:hover { border-color: var(--gold-primary); color: var(--text-title); }
#alma-input-review button:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 2px; }
#alma-input-review meter { display: block; width: 100%; height: 10px; margin: 1px 0; accent-color: var(--gold-primary); }
#alma-input-review .input-feedback-wave { display: block; width: 100%; height: 32px; margin: 2px 0; }
#alma-input-review .input-feedback-original { display: grid; gap: 2px; padding: 6px 8px; border-left: 2px solid var(--gold-primary); background: var(--bg-card-hover); }
#alma-input-review .input-feedback-original-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
#alma-input-review .input-feedback-original-text { color: var(--text-body); line-height: 1.5; unicode-bidi: plaintext; }
.audio-capture-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.floating-composer-dock.input-busy { border-color: var(--gold-primary); box-shadow: 0 16px 50px rgba(0,0,0,.32), var(--shadow-glow); }
.composer-send-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.floating-composer-dock.audio-capture .leva-orb { outline: 2px solid var(--gold-primary); outline-offset: 2px; }