/* ==========================================================================
   Tharseo · Chat Benedicto XVI — "Instrumento sereno"
   Azure limpio (clara) + dark mirror. Minimalismo de precisión: un solo
   objeto con presencia (el composer); todo lo demás cromo de 0.5px.
   AZUL = acción · DORADO = patrimonio (no clicable) · TEAL = bibliotecario.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Azure limpio palette — pure-white page, one rationed azure */
  --bp-cream:        #FFFFFF;
  --bp-cream-deep:   #EEF1F5;
  --bp-cream-soft:   #F7F8FA;
  --bp-surface:      #FFFFFF;
  --bp-rule:         #E7E9ED;
  --bp-rule-soft:    #F0F2F5;

  --bp-ink:          #141925;
  --bp-ink-soft:     #5B6472;
  /* AA on white (≈4.6:1). #9AA1AC (2.6:1, fails AA) kept only for decorative
     separators/carets via --bp-ink-faint. */
  --bp-ink-mute:     #6B7280;
  --bp-ink-faint:    #9AA1AC;

  /* Structural hairlines: 1px on non-retina (0.5px rounds to 0px there and the
     border vanishes), tightened to 0.5px only on ≥2dppx displays (see below). */
  --hairline: 1px;

  /* Azure family — ACTION only (focus, send, esferitas, active rule, links, quota) */
  --bp-navy:         #2358C4;
  --bp-navy-deep:    #1B4596;
  --bp-navy-ink:     #FFFFFF;
  --bp-navy-soft:    rgba(35, 88, 196, 0.10);
  --bp-navy-veil:    rgba(35, 88, 196, 0.06);
  --bp-navy-halo:    rgba(35, 88, 196, 0.12);

  --bp-teal:         #1FA8B4;

  /* Kept under --bp-raspberry name so existing selectors stay valid. */
  --bp-raspberry:      #2358C4;
  --bp-raspberry-soft: rgba(35, 88, 196, 0.10);
  --bp-raspberry-veil: rgba(35, 88, 196, 0.06);

  /* Dorado "patrimonio" — NON-interactive only (axis, kickers, fine rules). */
  --bp-gold:         #A8854A;
  --bp-gold-deep:    #8A6B36;
  --bp-gold-thread:  rgba(138, 107, 54, 0.30);

  --bp-sage:         #6FAE63;
  --bp-sage-soft:    #D5E8CE;
  --bp-clay:         #E07B4A;
  --bp-clay-soft:    #F4CEB8;
  /* Positive-vote glyph: an AA green (NOT gold — gold is patrimonio, never on a
     clickable control). */
  --sage-icon:       #4E8A44;

  /* Shadows — hairline objects, barely-there lift */
  --shadow-soft:   0 1px 2px rgba(20, 25, 37, 0.06);
  --shadow-lift:   0 4px 14px rgba(20, 25, 37, 0.08);
  --shadow-pop:    0 2px 6px rgba(20, 25, 37, 0.06), 0 18px 44px rgba(20, 25, 37, 0.12);
  /* Composer = the hero instrument: a close shadow + a wide ambient halo at whisper
     opacity (the "float" of the best chat apps), never a hard edge. */
  --shadow-composer:      0 1px 2px rgba(20, 25, 37, 0.05), 0 4px 16px rgba(20, 25, 37, 0.05), 0 12px 48px rgba(20, 25, 37, 0.04);
  --shadow-composer-lift: 0 1px 2px rgba(20, 25, 37, 0.06), 0 6px 20px rgba(20, 25, 37, 0.07), 0 16px 56px rgba(20, 25, 37, 0.05);

  /* Liquid glass — para el chrome que FLOTA sobre el contenido (botones de esquina +
     composer + píldoras): relleno translúcido + desenfoque del fondo (frosted), con un
     filo superior claro que simula el canto del cristal. Sobrio: opacidad alta para no
     perder legibilidad. */
  --glass-bg:      rgba(255, 255, 255, 0.62);
  --glass-strong:  rgba(255, 255, 255, 0.72);
  --glass-edge:    rgba(255, 255, 255, 0.80);
  --glass-blur:    blur(20px) saturate(175%);

  /* Semantic */
  --bg:        var(--bp-cream);
  --page:      var(--bp-cream);
  --surface:   var(--bp-surface);
  --text:      var(--bp-ink);
  --muted:     var(--bp-ink-soft);
  --line:      var(--bp-rule);
  --line-soft: var(--bp-rule-soft);
  --link:      var(--bp-raspberry);

  --font-display: "DM Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif:   "Iowan Old Style", "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", Times, serif;

  /* Reader-controlled type sizes. The surrounding app chrome stays fixed so
     navigation remains stable while the conversation becomes easier to read. */
  --chat-answer-font-size: 17px;
  --chat-question-font-size: 14.5px;
  --chat-source-font-size: 12.5px;
  --chat-excerpt-font-size: 13.5px;
  --chat-input-font-size: 15px;
  --chat-ui-font-size: 13px;
  --chat-ui-small-font-size: 12px;
  --chat-ui-micro-font-size: 10px;
  --chat-ui-title-font-size: 14px;
  /* The current-mode label is app chrome, not reading content. Keep it stable
     while the reader enlarges the conversation, so long labels stay in-pill. */
  --chat-mode-control-font-size: 12px;

  --sans:  var(--font-ui);
  --serif: var(--font-serif);
  --mono:  var(--font-mono);

  --gutter: 28px;
  --measure: 680px;
  --sidebar-w: 292px;
  --sidebar-collapsed-w: 64px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-chip: 10px;
  --radius-sm: 8px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark mirror — SAME roles, basalt-flat surfaces; azure rises to AA, gold to A8854A→A8854A. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bp-cream:        #0E1116;   /* canvas */
  --bp-cream-deep:   #202632;
  --bp-cream-soft:   #171B22;
  --bp-surface:      #171B22;
  --bp-rule:         rgba(255, 255, 255, 0.10);
  --bp-rule-soft:    rgba(255, 255, 255, 0.06);

  /* Glass en oscuro: un panel esmerilado CLARAMENTE más claro que el lienzo (#0E1116),
     con filo más brillante, para que el cristal se PERCIBA (sobre fondo oscuro un dark-
     sobre-dark casi no se veía). Así lo hace iOS: el vidrio oscuro es más claro que el
     negro, no más oscuro. */
  --glass-bg:      rgba(42, 49, 63, 0.58);
  --glass-strong:  rgba(42, 49, 63, 0.70);
  --glass-edge:    rgba(255, 255, 255, 0.20);

  --bp-ink:          #E8EBF0;
  --bp-ink-soft:     #8A94A4;
  --bp-ink-mute:     #8A94A4;   /* AA on basalt */
  --bp-ink-faint:    #6B7482;   /* decorative only */

  --bp-navy:         #4E86F0;
  --bp-navy-deep:    #6FA0F5;
  --bp-navy-ink:     #0E1116;
  --bp-navy-soft:    rgba(78, 134, 240, 0.16);
  --bp-navy-veil:    rgba(78, 134, 240, 0.10);
  --bp-navy-halo:    rgba(78, 134, 240, 0.22);

  --bp-raspberry:      #4E86F0;
  --bp-raspberry-soft: rgba(78, 134, 240, 0.16);
  --bp-raspberry-veil: rgba(78, 134, 240, 0.10);

  --bp-teal:         #35BECB;   /* recalibrated for basalt (parity with azure) */

  --bp-gold:         #B8985C;
  --bp-gold-deep:    #B8985C;
  --bp-gold-thread:  rgba(184, 152, 92, 0.42);

  /* Feedback / delete semantics recalibrated for basalt: luminous strokes,
     translucent fills (the light pastels washed out on the dark canvas). */
  --bp-sage:         #7FC673;
  --bp-sage-soft:    rgba(111, 174, 99, 0.18);
  --bp-clay:         #F0966A;
  --bp-clay-soft:    rgba(224, 123, 74, 0.18);
  --sage-icon:       #7FC673;

  --shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift:   0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-pop:    0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.6);
  --shadow-composer:      0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.35), 0 12px 48px rgba(0, 0, 0, 0.30);
  --shadow-composer-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.45), 0 16px 56px rgba(0, 0, 0, 0.35);
}

/* Retina hairlines: on ≥2dppx a physical half-pixel renders crisply, so structural
   borders that use var(--hairline) tighten from 1px → 0.5px. On DPR=1 they stay 1px
   (0.5px would round to 0 and the separation would vanish). */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  :root { --hairline: 0.5px; }
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  /* Kill the native gray tap flash on iOS/Android — touch feedback is ours
     (the :active states below), not the browser's. */
  -webkit-tap-highlight-color: transparent;
}

body[data-chat-text-size="90"] {
  --chat-answer-font-size: 15.5px;
  --chat-question-font-size: 13px;
  --chat-source-font-size: 11.5px;
  --chat-excerpt-font-size: 12px;
  --chat-input-font-size: 13.5px;
  --chat-ui-font-size: 12px;
  --chat-ui-small-font-size: 11px;
  --chat-ui-micro-font-size: 9.5px;
  --chat-ui-title-font-size: 13px;
}
body[data-chat-text-size="110"] {
  --chat-answer-font-size: 18.5px;
  --chat-question-font-size: 15.5px;
  --chat-source-font-size: 13.5px;
  --chat-excerpt-font-size: 15px;
  --chat-input-font-size: 16.5px;
  --chat-ui-font-size: 14px;
  --chat-ui-small-font-size: 12.75px;
  --chat-ui-micro-font-size: 10.5px;
  --chat-ui-title-font-size: 15px;
}
body[data-chat-text-size="120"] {
  --chat-answer-font-size: 20.5px;
  --chat-question-font-size: 17.5px;
  --chat-source-font-size: 15px;
  --chat-excerpt-font-size: 16px;
  --chat-input-font-size: 18px;
  --chat-ui-font-size: 15px;
  --chat-ui-small-font-size: 13.5px;
  --chat-ui-micro-font-size: 11px;
  --chat-ui-title-font-size: 16px;
}
body[data-chat-text-size="130"] {
  --chat-answer-font-size: 22px;
  --chat-question-font-size: 19px;
  --chat-source-font-size: 16.5px;
  --chat-excerpt-font-size: 17.5px;
  --chat-input-font-size: 19.5px;
  --chat-ui-font-size: 16px;
  --chat-ui-small-font-size: 14.5px;
  --chat-ui-micro-font-size: 11.5px;
  --chat-ui-title-font-size: 17px;
}
body[data-chat-text-size="140"] {
  --chat-answer-font-size: 24px;
  --chat-question-font-size: 20.5px;
  --chat-source-font-size: 17.5px;
  --chat-excerpt-font-size: 19px;
  --chat-input-font-size: 21px;
  --chat-ui-font-size: 17px;
  --chat-ui-small-font-size: 15.25px;
  --chat-ui-micro-font-size: 12px;
  --chat-ui-title-font-size: 18px;
}
body[data-chat-text-size="150"] {
  --chat-answer-font-size: 25.5px;
  --chat-question-font-size: 22px;
  --chat-source-font-size: 19px;
  --chat-excerpt-font-size: 20.5px;
  --chat-input-font-size: 22.5px;
  --chat-ui-font-size: 18px;
  --chat-ui-small-font-size: 16px;
  --chat-ui-micro-font-size: 12.5px;
  --chat-ui-title-font-size: 19px;
}

/* Touch feedback: a quiet, uniform press state for the primary touch targets.
   Replaces the native tap flash suppressed above; also adds tactility on desktop. */
.conversation-starter:active,
.new-session-btn:active,
.session-item:active { background: var(--bp-cream-deep); }
.corner-btn:active,
.send-button:active,
.icon-button:active { transform: scale(0.94); }

body {
  background: var(--bp-cream);
  color: var(--bp-ink);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, p { margin: 0; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bp-navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--bp-navy-soft); color: var(--bp-ink); }

/* ==========================================================================
   Shell
   ========================================================================== */

.app-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bp-cream);
}

/* ==========================================================================
   Floating corner controls (hamburger · reader text size)
   ========================================================================== */

.corner-btn {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--hairline) solid var(--glass-edge);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--bp-ink);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge);
  transition: box-shadow 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease), opacity 220ms var(--ease);
}
/* Desktop: the sidebar is persistent, so the floating menu button is hidden (it
   would otherwise overlap the THARSEO lockup at the sidebar's top-left). It returns
   only on mobile, where it opens/closes the drawer. */
.corner-btn--menu { left: max(16px, env(safe-area-inset-left)); display: none; }
.corner-text-size {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 45;
  height: 40px;
  border-color: var(--glass-edge);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge);
  transform: translateY(0);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms var(--ease);
}
/* Cinturón y tirantes: mientras el flip muestra la biblioteca, el chrome frontal
   fijo (drawer, velo, hamburguesa) NO se pinta — un fixed dentro del contexto 3D
   girado sale reflejado en espejo (visto en producción móvil). */
body[data-behind="true"] .side-panel,
body[data-behind="true"] .sidebar-backdrop,
body[data-behind="true"] .corner-btn--menu,
body[data-behind="true"] .corner-text-size {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* The reading control follows the familiar floating-toolbar pattern on every
   viewport: hide while reading down, return when scrolling up or near the top. */
body[data-corners-hidden="true"] .corner-text-size:not(:focus-within) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

/* On mobile, the menu button follows the same scroll direction. */
@media (max-width: 1023px) {
  body[data-corners-hidden="true"] .corner-btn--menu {
    opacity: 0;
    pointer-events: none;
  }
  body[data-sidebar-open="true"] .corner-text-size {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
/* Con la ficha de evidencia abierta (columna derecha en escritorio), el control de
   esquina se retira para no encimarse con el panel; vuelve al cerrarla. */
@media (min-width: 1024px) {
  body[data-evidence-visible="true"] .corner-text-size {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 44px touch target without growing the visible chrome */
.corner-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-sm) + 2px);
}

.corner-btn:hover,
.corner-btn:focus-visible {
  box-shadow: var(--shadow-lift);
  border-color: var(--bp-navy);
  text-decoration: none;
}
/* iOS Safari no siempre respeta el radio del control en el outline nativo. Usamos
   un anillo por box-shadow para conservar la misma silueta cuadrada redondeada. */
.corner-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lift), 0 0 0 3px var(--bp-navy-halo);
}
.corner-btn:active { transform: scale(0.94); }

/* Hamburger → X */
.hamburger {
  position: relative;
  width: 17px;
  height: 12px;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--bp-ink);
  transition: transform 220ms var(--ease), opacity 160ms var(--ease), top 220ms var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 5.25px; }
.hamburger span:nth-child(3) { top: 10.5px; }
body[data-sidebar-open="true"] .hamburger span:nth-child(1) { top: 5.25px; transform: rotate(45deg); }
body[data-sidebar-open="true"] .hamburger span:nth-child(2) { opacity: 0; }
body[data-sidebar-open="true"] .hamburger span:nth-child(3) { top: 5.25px; transform: rotate(-45deg); }

/* On desktop the drawer→X mutation is driven by the persistent sidebar being open,
   but we keep the same hook: when the sidebar is collapsed the icon stays a hamburger. */

/* ==========================================================================
   "Tras bambalinas / Behind the scenes" — full-screen 180° flip
   ========================================================================== */
.flip-viewport {
  height: 100dvh;
  perspective: 2600px;
  overflow: hidden;
}
.flip-deck {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 760ms var(--ease);
}
body[data-behind="true"] .flip-deck { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-front .app-shell { height: 100%; }
/* El chat (cara frontal) vive SIEMPRE dentro del contexto 3D del flip
   (perspective + preserve-3d del deck), aunque no esté girado. En iOS/algunos
   Chrome, el scroll TÁCTIL dentro de un subárbol preserve-3d se rompe — por eso
   el historial (cajón móvil, position:fixed) y el chat central «no scrolleaban».
   Aplanamos SOLO el contenido de la cara frontal (transform-style:flat): el deck
   sigue en preserve-3d para girar las dos caras, backface-visibility intacta, pero
   los descendientes del chat ya no heredan el 3D → el scroll táctil funciona.
   (La cara trasera/biblioteca ya se aplana con el estado «asentado».) */
.flip-front { transform-style: flat; }
.flip-back { transform: rotateY(180deg); }
/* Una vez que el flip ASIENTA en la biblioteca, salimos del contexto 3D
   (perspective + preserve-3d + rotateY). En iOS, el hit-testing táctil dentro de un
   subárbol 3D queda DESPLAZADO — por eso el toque en la biblioteca embebida (p. ej.
   el embudo de filtros, en la esquina) solo respondía en el borde. Este estado es
   VISUALMENTE idéntico al de reposo girado, pero plano, así que el toque mapea bien.
   Debe ir DESPUÉS de las reglas del flip para ganar por orden de fuente. */
body[data-behind-settled="true"] .flip-viewport { perspective: none; }
body[data-behind-settled="true"] .flip-deck {
  transform: none;
  transform-style: flat;
  transition: none;
}
body[data-behind-settled="true"] .flip-front { display: none; }
body[data-behind-settled="true"] .flip-back { transform: none; }
.behind-frame {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: var(--bp-cream);
}
.behind-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bp-cream);
}

/* ==========================================================================
   Layout — persistent sidebar (desktop) + reading column + slide-in evidence
   ========================================================================== */

.chat-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  background: var(--bp-cream);
  transition: grid-template-columns 200ms var(--ease);
}
body[data-sidebar-collapsed="true"] .chat-layout {
  grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr);
}

.chat-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workspace {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Evidence slides in from the right ONLY when a source is selected. */
body[data-evidence-visible="true"] .workspace {
  grid-template-columns: minmax(0, 1fr) 380px;
}

/* ==========================================================================
   Sidebar (persistent on desktop; drawer on mobile). Keeps .settings-panel
   + .side-panel so inner hooks stay valid.
   ========================================================================== */

.side-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  /* The desktop account popover needs overflow:visible, so the grid itself must
     constrain its implicit column. Otherwise a long history title contributes
     its min-content width and widens every sidebar row beyond --sidebar-w. */
  grid-template-columns: minmax(0, 1fr);
  /* head · bambalinas · fila HISTORIAL · lista (estira) · cuenta */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  border-right: var(--hairline) solid var(--bp-rule);
  /* One tonal step deeper than the chat canvas — the menu recedes and the
     conversation reads as the raised plane (same layering as the mobile drawer;
     ChatGPT/Claude sidebars do the same). */
  background: var(--bp-cream-soft);
  overflow: hidden;
}

/* (1) Brand lockup */
/* Cabecera del menú: lockup (link a inicio) + autor del corpus + nuevo chat. */
.side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.side-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--bp-ink);
}
.side-lockup:hover { text-decoration: none; color: var(--bp-ink); }
/* El autor representado en este corpus — dorado = patrimonio, no interactivo
   (vive FUERA del link del lockup). Empuja el ícono de nuevo chat a la derecha. */
.lockup-author {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--chat-ui-micro-font-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-gold-deep);
}
.lockup-mark {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  color: var(--bp-ink);
}
.lockup-mark .m-main { fill: var(--bp-ink); }
.lockup-mark .m-axis { fill: var(--bp-gold-deep); }
.lockup-word {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--bp-ink);
}

.side-top {
  display: grid;
  gap: 4px;
  padding: 0 12px 8px;
}

/* (2) Nuevo chat: ícono de redactar discreto en la cabecera (estilo ChatGPT) —
   homólogo a los ghost-buttons de la casa, sin pill. */
.new-session-btn {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--bp-ink-soft);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.new-session-btn:hover,
.new-session-btn:focus-visible {
  background: var(--bp-cream-deep);
  color: var(--bp-ink);
}
.new-session-btn svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.new-session-btn > svg {
  padding: 0;
}

/* (3) Redundant "Tras bambalinas" row */
.side-behind-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--bp-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
.side-behind-row:hover,
.side-behind-row:focus-visible {
  background: var(--bp-cream-deep);
  color: var(--bp-ink);
}
.side-behind-glyph {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Reader text size — the compact stepper floats in the top-right corner. */
.text-size-buttons {
  display: inline-flex;
  align-items: center;
  height: 30px;
  flex: none;
  overflow: hidden;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
}
.corner-text-size {
  height: 40px;
  border-color: var(--glass-edge);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-edge);
}
.corner-text-size .text-size-button { width: 38px; height: 38px; }
.corner-text-size .text-size-value { min-width: 46px; line-height: 38px; }
.text-size-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--bp-ink-soft);
  transition: color 130ms var(--ease), background 130ms var(--ease);
}
.text-size-button::before { content: ""; position: absolute; inset: -7px 0; }
.text-size-button:hover:not(:disabled),
.text-size-button:focus-visible { background: var(--bp-cream-deep); color: var(--bp-ink); }
.text-size-button:disabled { color: var(--bp-ink-faint); cursor: default; opacity: 0.55; }
.text-size-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.text-size-value {
  min-width: 42px;
  padding: 0 4px;
  color: var(--bp-ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-inline: var(--hairline) solid var(--bp-rule-soft);
}

/* (4) History */
.session-list {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;   /* drawer scroll must not chain to the chat behind */
  padding: 2px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Fila permanente del historial: HISTORIAL a la izquierda, el ícono de nuevo
   chat a su misma altura pegado a la derecha. Visible desde el primer día,
   haya o no conversaciones. */
.session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 14px 2px;
  padding: 4px 0 4px 6px;
  border-bottom: 0.5px solid var(--bp-gold-thread);
}
.session-list-kicker {
  color: var(--bp-gold-deep);
  font-family: var(--font-mono);
  font-size: var(--chat-ui-micro-font-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.session-list-empty {
  padding: 10px 8px 0;
  color: var(--bp-ink-mute);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  line-height: 1.5;
}

.session-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  padding: 8px 8px 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--bp-ink-soft);
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
.session-item:hover { background: var(--bp-cream-deep); color: var(--bp-ink); }
.session-item[aria-current="true"] {
  background: var(--bp-cream-soft);
  color: var(--bp-ink);
}
/* Active thread gets an azure left rule (action). */
.session-item[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--bp-navy);
}
.session-item-body { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }
.session-item-title {
  font-family: var(--font-ui);
  font-size: var(--chat-ui-title-font-size);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-item[aria-current="true"] .session-item-title { font-weight: 600; }
.session-item-date {
  font-family: var(--font-mono);
  font-size: var(--chat-ui-micro-font-size);
  color: var(--bp-ink-mute);
}
.session-del {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--bp-ink-mute);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease);
}
.session-item:hover .session-del,
.session-del:focus-visible { opacity: 1; }
.session-del:hover { background: rgba(224, 123, 74, 0.14); color: var(--bp-clay); }
.session-del svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* (5) Account footer */
.side-foot {
  position: relative;
  padding: 8px 12px 12px;
  border-top: var(--hairline) solid var(--bp-rule);
}

/* Collapsed (desktop icon-only) — hide labels, center icons. */
body[data-sidebar-collapsed="true"] .side-lockup .lockup-word,
body[data-sidebar-collapsed="true"] .lockup-author,
body[data-sidebar-collapsed="true"] .new-session-btn span,
body[data-sidebar-collapsed="true"] .side-behind-row span:not(.theme-toggle-icons),
body[data-sidebar-collapsed="true"] .session-list,
body[data-sidebar-collapsed="true"] .account-id,
body[data-sidebar-collapsed="true"] .account-caret {
  display: none;
}
body[data-sidebar-collapsed="true"] .side-head { flex-direction: column; gap: 10px; padding-inline: 0; }
body[data-sidebar-collapsed="true"] .side-lockup { justify-content: center; padding-inline: 0; }
body[data-sidebar-collapsed="true"] .new-session-btn,
body[data-sidebar-collapsed="true"] .side-behind-row { justify-content: center; }
/* Colapsado: solo queda el ícono de redactar, centrado y sin la regla dorada. */
body[data-sidebar-collapsed="true"] .session-list-kicker { display: none; }
body[data-sidebar-collapsed="true"] .session-head {
  justify-content: center;
  margin-inline: 0;
  padding-left: 0;
  border-bottom: 0;
}
body[data-sidebar-collapsed="true"] .account-chip { justify-content: center; }
/* Riel colapsado: los contenedores de botones (grid items) no deben desbordar la
   columna de 64px — por defecto traen min-width:auto y se derramaban ~15px a la
   derecha (el panel es overflow:hidden, así que se recortaban y empujaban los íconos
   ~8px fuera de eje). Se fijan a la anchura del riel, sin padding lateral, para que
   justify-content:center centre de verdad sobre el eje del riel. */
body[data-sidebar-collapsed="true"] .side-top,
body[data-sidebar-collapsed="true"] .side-foot,
body[data-sidebar-collapsed="true"] .session-head {
  min-width: 0;
  padding-inline: 0;
}

/* Collapse/expand chevron — desktop only (on mobile the drawer + hamburger rule).
   Pushed to the right edge of the header; the chevron flips when collapsed. */
.sidebar-collapse-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--bp-ink-mute);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.sidebar-collapse-btn:hover { background: var(--bp-cream-deep); color: var(--bp-ink); }
.sidebar-collapse-btn svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--ease);
}
body[data-sidebar-collapsed="true"] .sidebar-collapse-btn { margin-left: 0; }
body[data-sidebar-collapsed="true"] .sidebar-collapse-btn svg { transform: rotate(180deg); }
/* On mobile the persistent rail doesn't exist — the drawer + corner hamburger own it. */
@media (max-width: 1023px) {
  .sidebar-collapse-btn { display: none; }
}
/* Desktop: let the account menu (which pops UP from the foot) escape the panel's
   clip. The session-list is its own scroller, so the panel no longer needs
   overflow:hidden to contain it. (Mobile keeps hidden for the drawer's card corners.) */
@media (min-width: 1024px) {
  .side-panel { overflow: visible; }
}

/* ==========================================================================
   Account chip + menu
   ========================================================================== */
.account-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0.5px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.account-chip:hover,
.account-chip:focus-visible {
  background: var(--bp-cream-deep);
  border-color: var(--bp-rule);
}
.account-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bp-navy-soft);
  color: var(--bp-navy-deep);
}
.account-avatar svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.account-avatar--lg { width: 40px; height: 40px; }
.account-avatar--lg svg { width: 21px; height: 21px; }
.account-id { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.account-name {
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  font-weight: 650;
  color: var(--bp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-plan {
  font-family: var(--font-ui);
  font-size: var(--chat-ui-micro-font-size);
  font-weight: 500;
  color: var(--bp-ink-mute);
}
.account-caret {
  flex: none;
  width: 15px; height: 15px;
  fill: none; stroke: var(--bp-ink-mute); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 180ms var(--ease);
}
body[data-account-open="true"] .account-caret { transform: rotate(180deg); }

.account-menu {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(100% - 4px);
  display: grid;
  /* Every row must be allowed to shrink to the popover. Without minmax(0, 1fr),
     a long email at 120%+ text size establishes a wider implicit grid track;
     the action buttons then inherit that width and are clipped by the drawer. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: var(--bp-surface);
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  /* Nunca más alto que el viewport: en ventanas bajas el menú se desbordaba
     por arriba (top negativo) y quedaba recortado — ahora se acota y scrollea.
     vh primero como fallback; dvh lo refina donde existe. */
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 140ms var(--ease);
  z-index: 30;
}
/* En oscuro, la tarjeta del popover debe DESPEGARSE del sidebar recedido (ambos
   caían en el mismo tono y las filas parecían flotar sueltas): tono elevado. */
html[data-theme="dark"] .account-menu {
  background: var(--bp-cream-deep);
  border-color: rgba(255, 255, 255, 0.14);
}
body[data-account-open="true"] .account-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Con la columna COLAPSADA (riel de 64px), el menú no cabe si se ancla al ancho del
   riel (quedaba a ~40px, aplastado y desbordado). En su lugar FLOTA a la derecha del
   riel con su propio ancho; en escritorio el panel es overflow:visible, así que no se
   recorta. El popover se anima desde la izquierda para acompañar el gesto lateral. */
@media (min-width: 1024px) {
  body[data-sidebar-collapsed="true"] .account-menu {
    left: calc(100% + 8px);
    right: auto;
    bottom: 0;
    width: 264px;
    transform: translateX(-6px);
  }
  body[data-sidebar-collapsed="true"][data-account-open="true"] .account-menu {
    transform: translateX(0);
  }
}
.account-card {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--bp-rule-soft);
}
.account-card-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.account-card-text strong {
  font-family: var(--font-display);
  font-size: var(--chat-ui-title-font-size);
  font-weight: 700;
  color: var(--bp-ink);
  overflow-wrap: anywhere;
}
.account-card-text span {
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  color: var(--bp-ink-soft);
  overflow-wrap: anywhere;
}
/* AI-credits meter — vive dentro del menú de cuenta (movido aquí desde la esquina
   superior derecha). Doble destello dorado + barra de consumo semanal; lo alimenta
   /api/me → credits.pctWeek. */
.account-usage {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-usage[hidden] { display: none; }
.account-usage-icon {
  flex: none;
  display: inline-flex;
  color: var(--bp-gold-deep);
}
.account-usage-icon svg { width: 22px; height: 22px; display: block; }
.account-usage-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 6px;
}
.account-usage-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--bp-cream-deep);
  overflow: hidden;
}
.account-usage-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bp-gold), var(--bp-gold-deep));
  transition: width 420ms var(--ease);
}
.account-usage-label {
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  line-height: 1.35;
  color: var(--bp-ink-soft);
}
/* «Actualizado hace N · ⟳» — recálculo bajo demanda (como el panel de uso de Claude).
   Sutil en reposo; la flecha gira mientras el /api/me fresco está en vuelo. */
.account-usage-refresh {
  justify-self: start;          /* no estirar en el grid del body */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--chat-ui-micro-font-size);
  line-height: 1.3;
  color: var(--bp-ink-faint);
  transition: color 140ms var(--ease);
}
.account-usage-refresh:hover,
.account-usage-refresh:focus-visible { color: var(--bp-ink-soft); }
.account-usage-refresh-icon { width: 12px; height: 12px; flex: none; }
.account-usage-refresh.is-refreshing { color: var(--bp-gold-deep); cursor: default; }
.account-usage-refresh.is-refreshing .account-usage-refresh-icon {
  animation: usage-spin 0.7s linear infinite;
}
@keyframes usage-spin { to { transform: rotate(360deg); } }

/* Theme toggle (sol/luna) — el botón vive en el riel y reusa .side-behind-row para la
   fila/hover/colapso; aquí solo queda el mecanismo del ícono (swap sol↔luna). */
.theme-toggle-icons { position: relative; width: 17px; height: 17px; flex: none; }
.theme-icon {
  position: absolute; inset: 0;
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
/* Both glyphs neutral (ink-soft): gold is patrimonio and azure is reserved for
   focus/active state, so neither belongs on the theme glyph. */
.theme-icon--sun { opacity: 1; transform: scale(1) rotate(0); color: var(--bp-ink-soft); }
.theme-icon--moon { opacity: 0; transform: scale(0.6) rotate(-40deg); color: var(--bp-ink-soft); }
html[data-theme="dark"] .theme-icon--sun { opacity: 0; transform: scale(0.6) rotate(40deg); }
html[data-theme="dark"] .theme-icon--moon { opacity: 1; transform: scale(1) rotate(0); color: var(--bp-ink-soft); }

.account-actions { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.account-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--bp-ink);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  font-weight: 550;
  cursor: pointer;
  text-align: left;
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
.account-action svg {
  flex: none;
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.account-action span { min-width: 0; overflow-wrap: anywhere; }
.account-action:hover,
.account-action:focus-visible { background: var(--bp-cream-deep); }
.account-action--primary {
  background: var(--bp-navy);
  color: var(--bp-navy-ink);
  font-weight: 650;
  justify-content: center;
  margin-bottom: 3px;
}
.account-action--primary svg { stroke: var(--bp-navy-ink); }
.account-action--primary:hover,
.account-action--primary:focus-visible { background: var(--bp-navy-deep); }
.account-note {
  margin: 0;
  padding: 8px 10px 2px;
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  line-height: 1.45;
  color: var(--bp-ink-soft);
  border-top: 0.5px solid var(--bp-rule-soft);
}

/* ==========================================================================
   Sidebar drawer (mobile <1024px)
   ========================================================================== */
.sidebar-backdrop { display: none; }

@media (max-width: 1023px) {
  .chat-layout,
  body[data-sidebar-collapsed="true"] .chat-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* ── Mobile drawer = LAYERED CARD (ChatGPT finish, Azure-limpio). Opening turns the
     chat into a lifted CARD (opaque --page, rounded revealed left edge, soft left-cast
     shadow, scaled 0.965 toward its retained right edge, lifted ABOVE the menu) that
     slides right while a neutral-gray scrim grays it; the menu — one tonal step DEEPER
     (--bp-cream-soft) — SURGES IN via a content fade + parallax, a beat after the card
     leads. Separation = TONE + SHADOW + RADIUS + SCRIM, never a hard line, both themes.
     We transform only the PARTS (.chat-stage / .corner-btn / .side-panel), NEVER
     .app-shell — its fixed descendants inside the flip's preserve-3d flicker. overflow
     is deliberately NOT clipped on .chat-stage: the evidence sheet (z-58) + popovers are
     descendants and would be cut mid-gesture; they ride ~86vw off-screen with the card. ── */

  /* MENU — the visual protagonist while open: it paints ABOVE the scrim (43 > 42),
     so the veil grays only the receding chat card, never the menu itself. */
  .side-panel {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px);
    z-index: 43;
    background: var(--bp-cream-soft);            /* one tonal step deeper than the --page card */
    border-right: var(--hairline) solid var(--bp-rule);
    transform: translateX(-100%);
    transition: transform 300ms var(--ease);
    box-shadow: 0 0 44px rgba(20, 25, 37, 0.18);
  }
  /* Content surges in (fade + small parallax) a beat after the card leads. */
  .side-panel > * {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);   /* CLOSE: recede, no delay */
  }
  body[data-sidebar-open="true"] .side-panel { transform: translateX(0); }
  body[data-sidebar-open="true"] .side-panel > * {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 260ms var(--ease) 40ms, transform 300ms var(--ease) 40ms;   /* OPEN: a beat after the card */
  }

  /* CHAT — top card layer. */
  .chat-stage {
    background: var(--page);                     /* opaque so the rounded edge clips clean; the raised/brighter plane */
    transform-origin: right center;              /* retained right edge stays flush; corner + shadow open on the LEFT */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none;
    transition: transform 300ms var(--ease),
                border-radius 300ms var(--ease),
                box-shadow 300ms var(--ease),
                background 300ms var(--ease);     /* dark: card lifts to a lighter tone; light: no-op (stays --page) */
  }
  body[data-sidebar-open="true"] .chat-stage {
    position: relative;
    z-index: 41;                                 /* card(41) < scrim(42) < menu(43) < evidence(58) < open hamburger(61) */
    transform: translateX(min(86vw, 320px)) scale(0.965);
    border-top-left-radius: var(--radius-card);  /* 16px, revealed corners only */
    border-bottom-left-radius: var(--radius-card);
    box-shadow: -10px 0 24px rgba(20, 25, 37, 0.10),
                 -2px 0  6px rgba(20, 25, 37, 0.06);
  }

  /* Corner buttons ride WITH the card, never scale/round. */
  .corner-btn { transition: transform 300ms var(--ease), opacity 200ms var(--ease), visibility 200ms var(--ease); }
  body[data-sidebar-open="true"] .corner-btn { transform: translateX(min(86vw, 320px)); }
  .corner-btn--menu { display: inline-flex; }
  /* Abierto el menú, la hamburguesa se retira: no hace falta un tache — tocar la
     zona velada (o Esc) cierra, como en los referentes. visibility la saca también
     del orden de tabulación mientras está abierto. */
  body[data-sidebar-open="true"] .corner-btn--menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* On mobile the collapse hooks must never hide labels (drawer is full width). */
  body[data-sidebar-collapsed="true"] .side-lockup .lockup-word,
  body[data-sidebar-collapsed="true"] .new-session-btn span,
  body[data-sidebar-collapsed="true"] .side-behind-row span,
  body[data-sidebar-collapsed="true"] .session-list,
  body[data-sidebar-collapsed="true"] .account-id,
  body[data-sidebar-collapsed="true"] .account-caret { display: revert; }

  /* SCRIM — grays the CARD as it recedes ("un poco más gris"). Above the card(41),
     below the open hamburger(61), so it grays the card and stays tap-to-close. */
  .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 42;
    background: rgba(91, 100, 114, 0.16);        /* --bp-ink-soft: soft editorial neutral gray */
    opacity: 0; visibility: hidden;
    transition: opacity 260ms var(--ease), visibility 260ms var(--ease);
  }
  body[data-sidebar-open="true"] .sidebar-backdrop { opacity: 1; visibility: visible; }
}

/* ── DARK ("basalt") — flip the tonal roles so the CARD is still the RAISED/brighter
   plane (ChatGPT-faithful): in dark, --page (#0E1116) is the deepest tone, so the menu
   sits on it (recessed) and the OPEN card lifts to --bp-cream-soft (#171B22, lighter).
   The tokens swap roles vs light, but the direction — card brighter than the menu —
   holds in both themes. ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  html[data-theme="dark"] .side-panel {
    background: var(--page);                     /* #0E1116 — the deepest plane, recessed */
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.5);
  }
  html[data-theme="dark"] body[data-sidebar-open="true"] .chat-stage {
    background: var(--bp-cream-soft);            /* #171B22 — the card lifts to a lighter tone */
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.52),
                 -2px 0  8px rgba(0, 0, 0, 0.42);
  }
  html[data-theme="dark"] .sidebar-backdrop { background: rgba(0, 0, 0, 0.32); }
}

/* ==========================================================================
   Conversation — centered reading column (max 680px)
   ========================================================================== */

.conversation {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: transparent;
}

.conversation-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* the end-of-thread bounce must not drag the page */
  scrollbar-width: thin;
  scrollbar-color: var(--bp-rule) transparent;
}
.conversation-column {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* #dialogue keeps its id (JS scrolls it). It no longer owns the scroll — the
   parent .conversation-scroll does — but the JS manual-wheel handler sets
   dialogue.scrollTop; harmless when it can't scroll. */
.dialogue {
  flex: 1 1 auto;
  min-height: 0;
  padding: 76px 0 24px;
}

.message { max-width: 100%; }
.message + .message { margin-top: 30px; }
.message:first-child { margin-top: 0; }

.message-role {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.message-role .role-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink);
}
.message-role .role-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--bp-ink-soft);
}

/* Assistant — the serif reading flows directly on the canvas: no label row,
   no marginal rule (the references let the answer text speak for itself). */
.message--assistant .message-body p {
  font-family: var(--font-serif);
  font-size: var(--chat-answer-font-size);
  line-height: 1.62;
  color: var(--bp-ink);
}
.message--assistant .message-body p + p { margin-top: 14px; }

/* User — right-aligned soft bubble */
.message--user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  max-width: 560px;
}
.message--user .message-role { align-self: flex-end; }
.message--user .message-role .role-name { color: var(--bp-ink-soft); }
.message--user .message-body {
  max-width: 100%;
  padding: 13px 17px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bp-cream-deep);
}
.message--user .message-body p {
  font-family: var(--font-ui);
  font-size: var(--chat-question-font-size);
  line-height: 1.55;
  font-weight: 500;
  color: var(--bp-ink);
  letter-spacing: -0.003em;
}

/* Pending / streaming */
.message--pending .message-body {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bp-ink-soft);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
}
.typing-indicator span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bp-navy);
  opacity: 0.3;
  /* Onda respirante con destello dorado de la marca: cada punto crece y se enciende
     en oro al llegar a su cresta, y el desfase de 210ms hace viajar la luz de uno a
     otro — más vivo y contemplativo que el rebote plano. */
  animation: thinkingBreathe 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform, opacity;
}
.typing-indicator span:nth-child(2) { animation-delay: 210ms; }
.typing-indicator span:nth-child(3) { animation-delay: 420ms; }
.typing-indicator em {
  font-style: normal;
  background: linear-gradient(90deg, var(--bp-ink-soft) 30%, var(--bp-navy) 50%, var(--bp-ink-soft) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 1.8s linear infinite;
}
@keyframes thinkingBreathe {
  0%, 100% { transform: scale(0.55); opacity: 0.25; background: var(--bp-navy); box-shadow: none; }
  35%      { transform: scale(1.2);  opacity: 1;    background: var(--bp-gold); box-shadow: 0 0 6px rgba(168, 133, 74, 0.45); }
  70%      { transform: scale(0.82); opacity: 0.5;  background: var(--bp-navy); box-shadow: none; }
}
@keyframes shimmer { to { background-position: -200% 0; } }

.stream-cursor {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 1px;
  background: var(--bp-navy);
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ==========================================================================
   Empty-state HERO
   ========================================================================== */
.chat-hero {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Flex-centered in the scroller (robust to the mobile virtual keyboard / dynamic
     browser bars) with a floor that clears the fixed corner buttons (z-45). */
  min-height: 100%;
  padding-top: max(76px, 8vh);
  padding-bottom: 24px;
}
body[data-has-conversation="false"] .chat-hero { display: flex; }
body[data-has-conversation="false"] .dialogue { display: none; }

.hero-mark {
  width: 108px; height: 108px;
  display: block;
  opacity: 0;
  animation: heroRise 320ms var(--ease) forwards;
}
.hero-mark .m-main { fill: var(--bp-ink); }
.hero-mark .m-axis { fill: var(--bp-gold-deep); }
/* Sheen sweep once up the gold axis. */
.hero-mark-sheen {
  fill: #FFFFFF;
  opacity: 0;
  mix-blend-mode: overlay;
  animation: heroSheen 1200ms var(--ease) 320ms 1;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes heroSheen {
  0% { opacity: 0; transform: translateY(60%) scaleY(0.2); }
  40% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-60%) scaleY(0.2); }
}

/* La firma del autor se escribe sola (ink-reveal del landing de lanzamiento):
   un clip-path que avanza con el ritmo desigual de una pluma. Identifica DE QUIÉN
   es este chat sin decirlo. */
.hero-signature {
  margin: 26px 0 0;
  opacity: 0;
  animation: heroRise 320ms var(--ease) 60ms forwards;
}
.hero-sign-img {
  display: block;
  width: min(400px, 78vw);
  height: auto;
  margin: 0 auto;
  opacity: 0.92;
  /* El PNG viene con una leve caída hacia la derecha; un giro contrarreloj
     lo asienta en una línea bien horizontal. */
  transform: rotate(-2deg);
  clip-path: inset(0 100% 0 0);
  animation: signWrite 3.2s ease-in-out 480ms forwards;
}
@keyframes signWrite {
  0%   { clip-path: inset(0 100% 0 0); }
  40%  { clip-path: inset(0 48% 0 0); }
  68%  { clip-path: inset(0 28% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
/* Tinta clara sobre basalto: el PNG es tinta oscura, se invierte en oscuro. */
html[data-theme="dark"] .hero-sign-img { filter: invert(1) brightness(1.05); opacity: 0.95; }
/* Karol: tinta estrictamente monocroma para mantener la firma facsimilar legible
   tanto sobre el fondo claro como sobre el espejo oscuro. */
html[data-corpus="karol"] .hero-sign-img { filter: brightness(0); }
html[data-theme="dark"][data-corpus="karol"] .hero-sign-img { filter: brightness(0) invert(1); opacity: 0.96; }
/* León XIV: su firma es más ancha y de trazo más apretado que la de Benedicto, así
   que a igual margen se percibía amontonada. Un poco más de aire arriba (logo↔firma)
   y abajo (firma↔slogan) le devuelve el mismo ritmo óptico. Valores afinados a ojo. */
html[data-corpus="leo-xiv"] .hero-signature { margin-top: 30px; }
html[data-corpus="leo-xiv"] .hero-kicker { margin-top: 26px; }
body[data-corpus="karol"] .evidence-panel,
body[data-corpus="karol"] #side-behind,
body[data-corpus="karol"] #mode-control { display: none !important; }
/* San Josemaría conserva la marca común de Tharseo sin añadir debajo un
   monograma, una firma reconstruida ni otro lockup de autor. */
html[data-corpus="san-josemaria"] .hero-signature { display: none; }
/* El slogan entra cuando la pluma va terminando. */
.hero-kicker {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--bp-gold-deep);
  text-transform: none;
  opacity: 0;
  animation: heroRise 420ms var(--ease) 2.4s forwards;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero fades up when the first message is sent. */
body[data-has-conversation="true"] .chat-hero { display: none; }

/* ==========================================================================
   Citation calls (esferitas)
   ========================================================================== */
.citation-cluster { display: inline; border-radius: 4px; }
.cited-claim { border-radius: 3px; padding: 0 2px; transition: background 140ms var(--ease); }
.citation-cluster:has(.cite:hover) .cited-claim,
.citation-cluster:has(.cite:focus-visible) .cited-claim,
.citation-cluster.is-selected .cited-claim {
  background: var(--bp-navy-soft);
}
.cite-wrap { position: relative; display: inline-flex; vertical-align: 2px; }
.cite {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bp-navy);
  color: var(--bp-navy-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transform: scale(0.6);
  animation: citePop 180ms var(--ease) forwards;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
/* 44px touch target without growing the visible disc. */
.cite::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
}
/* Circular focus ring (the global 8px-radius rectangle looks wrong on a disc). */
.cite:focus-visible {
  outline: 2px solid var(--bp-navy);
  outline-offset: 2px;
  border-radius: 50%;
}
@keyframes citePop {
  from { transform: scale(0.6); opacity: 0.4; }
  to   { transform: scale(1); opacity: 1; }
}
.cite:hover,
.cite:focus-visible,
.cite-wrap.is-open .cite {
  background: var(--bp-navy-deep);
  color: var(--bp-navy-ink);
  transform: scale(1) translateY(-1px);
}

.reference-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: min(320px, calc(100vw - 40px));
  padding: 14px 16px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-surface);
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%) translateY(3px);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.reference-popover strong,
.reference-popover span,
.reference-popover a { display: block; }
.reference-popover strong {
  color: var(--bp-ink);
  font-family: var(--font-display);
  font-size: var(--chat-source-font-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.reference-popover span {
  margin-top: 7px;
  color: var(--bp-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--chat-source-font-size);
  line-height: 1.5;
  font-weight: 400;
}
.reference-popover .source-citation--biography {
  margin-top: 0;
  color: var(--bp-ink);
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.45;
}
.source-citation--biography cite { font-style: italic; }
.reference-popover a {
  margin-top: 11px;
  color: var(--bp-navy);
  font-family: var(--font-display);
  font-size: var(--chat-source-font-size);
  font-weight: 600;
}
.cite-wrap:hover .reference-popover,
.cite-wrap:focus-within .reference-popover,
.cite-wrap.is-open .reference-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Near the top of the viewport there is no room above: JS marks the wrap with
   data-pop="down" and the popover opens BELOW the sphere instead of clipping.
   Desktop-only: on ≤600px the popover is position:fixed at top:120px (see the
   mobile block) and these higher-specificity rules would shove it off-screen. */
@media (min-width: 601px) {
  .cite-wrap[data-pop="down"] .reference-popover {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-3px);
  }
  .cite-wrap[data-pop="down"]:hover .reference-popover,
  .cite-wrap[data-pop="down"]:focus-within .reference-popover,
  .cite-wrap[data-pop="down"].is-open .reference-popover {
    transform: translateX(-50%) translateY(0);
  }
}

/* ==========================================================================
   Cited sources / bibliography under the answer
   ========================================================================== */
.message-sources {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 0.5px solid var(--bp-rule-soft);
}
.message-bibliography { margin-top: 12px; border-top-style: dashed; }
.message-bibliography .message-sources-title { color: var(--bp-ink-soft); }
.message-sources-title {
  margin-bottom: 9px;
  color: var(--bp-gold-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.message-sources ol,
.message-sources ul {
  display: grid;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.message-sources li {
  /* auto (not 20px): a work cited several times now carries ALL its citation
     spheres on one row (1 · 2 · 3), so the number column grows to content. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.message-readings li { grid-template-columns: minmax(0, 1fr); }
.source-numbers {
  display: inline-flex;
  gap: 3px;
  min-width: 20px;   /* single-sphere rows keep the old 20px column alignment */
}
.source-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--bp-ink-soft);   /* white-on-ink-soft = 5.98:1, AA */
  color: var(--bp-surface);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.source-entry {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--bp-ink);
  font-family: var(--font-ui);
  font-size: var(--chat-source-font-size);
  font-weight: 500;
  line-height: 1.4;
}
.source-entry a,
.source-entry .source-open,
.source-entry strong {
  color: var(--bp-navy);
  font-family: var(--font-ui);
  font-size: var(--chat-source-font-size);
  font-weight: 650;
  line-height: 1.4;
}
/* El título abre la ficha en el panel derecho (botón, no navegación externa). */
.source-entry .source-open {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.source-entry .source-open:hover { text-decoration: underline; text-underline-offset: 2px; }
.source-entry span {
  color: var(--bp-ink-soft);
  font-size: 11.5px;
  font-weight: 500;
}
.source-entry .source-citation--biography {
  color: var(--bp-ink);
  font-family: var(--font-ui);
  font-size: var(--chat-source-font-size);
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   Conversation starters (welcome block, kept for compat) + voice-offer
   ========================================================================== */
.conversation-starters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.conversation-starter {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 84px;
  padding: 18px 42px 18px 18px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
  color: var(--bp-ink);
  text-align: left;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease);
}
.conversation-starter::after {
  content: "→";
  position: absolute;
  right: 17px; top: 50%;
  transform: translateY(-50%);
  color: var(--bp-ink-mute);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: color 140ms var(--ease), transform 140ms var(--ease);
}
.conversation-starter:hover,
.conversation-starter:focus-visible {
  border-color: var(--bp-navy);
  background: var(--bp-surface);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
.conversation-starter:hover::after,
.conversation-starter:focus-visible::after {
  color: var(--bp-navy);
  transform: translate(2px, -50%);
}
.conversation-starter:disabled { cursor: wait; opacity: 0.62; transform: none; }
.conversation-starter-question {
  overflow-wrap: anywhere;
  color: var(--bp-ink);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.voice-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 7px 8px 7px 14px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
  color: var(--bp-ink-soft);
  font-family: var(--font-display);
  font-size: 12.5px;
}
.voice-offer[hidden] { display: none; }
.voice-offer-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.voice-offer button {
  min-height: 26px;
  padding: 3px 12px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--bp-ink-soft);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.voice-offer button:hover { color: var(--bp-ink); }
.voice-offer-accept {
  background: var(--bp-navy);
  color: var(--bp-navy-ink);
  border-color: var(--bp-navy);
}
.voice-offer-accept:hover { background: var(--bp-navy-deep); color: var(--bp-navy-ink); }

/* ==========================================================================
   Per-answer feedback (👍/👎 + optional "why")
   ========================================================================== */
.message-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 0.5px solid var(--bp-rule-soft);
}
.message-feedback-prompt {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--bp-ink-mute);
  letter-spacing: -0.003em;
}
.message-feedback-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
  color: var(--bp-ink-soft);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
/* 44px touch target without growing the visible 30px control. */
.message-feedback-btn::before { content: ""; position: absolute; inset: -7px; border-radius: calc(var(--radius-sm) + 7px); }
.message-feedback-btn:hover { border-color: var(--bp-ink-mute); color: var(--bp-ink); }
.message-feedback-btn.is-active.is-up {
  background: var(--bp-sage-soft);
  border-color: var(--bp-sage);
  color: var(--sage-icon);   /* AA green — dorado is patrimonio, never on a control */
}
.message-feedback-btn.is-active.is-down {
  background: var(--bp-clay-soft);
  border-color: var(--bp-clay);
  color: var(--bp-clay);
}
.message-feedback-expand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
  margin-top: 6px;
}
.message-feedback-expand[hidden] { display: none; }
.message-feedback-text {
  flex: 1 1 240px;
  min-height: 38px;
  padding: 8px 12px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream);
  color: var(--bp-ink);
  font-family: var(--font-ui);
  /* 16px es el umbral por debajo del cual iOS hace auto-zoom al enfocar el input
     (Safari amplía la página y empuja el botón «Enviar» fuera de vista). A 16px no
     hace zoom y el flujo de calificar queda fluido. */
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}
.message-feedback-text:focus { outline: none; border-color: var(--bp-navy); }
.message-feedback-send {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bp-navy);
  color: var(--bp-navy-ink);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.message-feedback-send:hover { background: var(--bp-navy-deep); }
.message-feedback-thanks {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--bp-sage);
  font-weight: 500;
}

/* ==========================================================================
   "Sobre qué se apoya" — on-demand grounding (free mode)
   ========================================================================== */
.answer-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 0.5px solid var(--bp-rule-soft);
}
/* La modalidad de esta respuesta + su línea de qué consiste. Etiqueta dorada
   mono (mismo lenguaje que «FUENTES CITADAS») para que se lea como sección
   deliberada, no como una línea suelta al pie. */
.answer-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  margin: 20px 0 12px;
  padding-top: 14px;
  border-top: 0.5px solid var(--bp-rule-soft);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
}
/* Dentro del pie (modo libre) el answer-footer ya trae su regla superior. */
.answer-footer .answer-mode { margin-top: 0; padding-top: 0; border-top: 0; }
/* En modo citado, answer-mode precede a la lista: evita la doble regla. */
.answer-mode + .message-sources { margin-top: 12px; padding-top: 0; border-top: 0; }
.answer-mode-tag {
  color: var(--bp-gold-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.answer-mode-body { color: var(--bp-ink-soft); }
.answer-mode-body strong { color: var(--bp-ink); font-weight: 600; }
.support-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: default;
}
.support-badge-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.support-badge--directo .support-badge-dot { background: var(--bp-navy); }
.support-badge--directo .support-badge-label { color: var(--bp-navy-deep); }
.support-badge--extiende .support-badge-dot { background: var(--bp-gold); }
.support-badge--extiende .support-badge-label { color: var(--bp-gold-deep); }
.support-badge + .grounding { margin-top: 14px; }

.grounding { margin-top: 0; padding-top: 0; border-top: none; }
.grounding-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 9px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
  color: var(--bp-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.grounding-summary::-webkit-details-marker,
.grounding-summary::marker { display: none; content: ""; }
.grounding-summary:hover {
  background: var(--bp-cream-deep);
  border-color: var(--bp-ink-mute);
  color: var(--bp-ink);
}
.grounding-summary:focus-visible { outline: 2px solid var(--bp-navy); outline-offset: 2px; }
.grounding-caret {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}
.grounding[open] .grounding-caret { transform: rotate(180deg); }
.grounding-label { letter-spacing: 0.01em; }
.grounding-count { color: var(--bp-ink-mute); font-weight: 500; font-variant-numeric: tabular-nums; }
.grounding-body { margin-top: 15px; animation: grounding-reveal 0.22s var(--ease); }
@keyframes grounding-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Sobrio: sin itálicas de relleno ni barras doradas — separadores de pelo entre
   obras y el pasaje en serif recto. */
.grounding-note {
  margin: 0 0 13px;
  color: var(--bp-ink-mute);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  line-height: 1.5;
}
.grounding-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.grounding-item {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 0.5px solid var(--bp-rule-soft);
}
.grounding-item:first-child { border-top: 0; padding-top: 2px; }
.grounding-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
/* Los puntos de color del menú de modos no codificaban nada legible
   (azur=auto, teal=bibliotecario, gris=el resto): fuera del menú; el ✓ marca
   el activo y el pill conserva su punto. */
.mode-menu-dot { display: none; }
.grounding-item-head a,
.grounding-item-head strong {
  color: var(--bp-navy);
  font-family: var(--font-ui);
  font-size: var(--chat-source-font-size);
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}
.grounding-item-head a:hover { text-decoration: underline; }
.grounding-item-meta {
  color: var(--bp-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-micro-font-size);
  font-weight: 500;
}
.grounding-passage {
  margin: 0;
  color: var(--bp-ink-soft);
  font-family: var(--font-serif);
  font-size: var(--chat-excerpt-font-size);
  line-height: 1.62;
}

/* ==========================================================================
   Composer — the hero object
   ========================================================================== */
.composer-area {
  flex: 0 0 auto;
  padding: 10px clamp(20px, 4vw, 40px) max(16px, env(safe-area-inset-bottom));
  background: transparent;
}
.composer-column {
  max-width: var(--measure);
  margin: 0 auto;
}
.composer {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--hairline) solid var(--glass-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-composer), inset 0 1px 0 var(--glass-edge);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
/* Quiet focus: the border deepens to ink and the halo lifts — no azure ring.
   Azure stays rationed for the ACTION (the send button lights up with text);
   references (ChatGPT/Claude) keep their composers chromeless too. The ink
   border (#5B6472 vs #E7E9ED at rest) is a ≥3:1 indicator change for 2.4.7. */
.composer:focus-within {
  border-color: var(--bp-ink-soft);
  box-shadow: var(--shadow-composer-lift);
}
#composer-input {
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 16px 20px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bp-ink);
  font: 500 var(--chat-input-font-size) var(--font-ui);
  letter-spacing: -0.003em;
  outline: none;
}
#composer-input:focus { border: 0; box-shadow: none; }
#composer-input::placeholder { color: var(--bp-ink-mute); font-weight: 400; }

.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 10px 0 12px;
}
.composer-grow { flex: 1 1 auto; }

.mode-control { position: relative; display: inline-flex; min-width: 0; }
.mode-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 0; max-width: 100%;
  height: 30px; padding: 0 8px 0 10px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
  color: var(--bp-ink);
  font: 600 var(--chat-mode-control-font-size)/1 var(--font-display);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
#mode-pill-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 44px vertical touch target (the pill is already ≥44px wide). */
.mode-pill::before { content: ""; position: absolute; inset: -7px 0; }
.mode-pill:hover { border-color: var(--bp-ink-mute); }
.mode-pill[aria-expanded="true"] { border-color: var(--bp-ink-mute); background: var(--bp-surface); }
/* El punto de color junto al modo se retiró: el nombre del modo basta, y el punto
   (azul en Auto) competía con el dorado del patrimonio. Se oculta en vez de borrar
   el nodo para no tocar el JS que le fijaba color. */
.mode-pill-dot { display: none; }
.mode-pill-caret { width: 14px; height: 14px; fill: none; stroke: var(--bp-ink-mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Idioma del chat — pill segmentado ES|EN junto al selector de modo (mismos roles
   de color que el mode-pill; el activo usa el azur suave del ítem activo del menú).
   Determina la frontera estricta: ES = corpus español, EN = corpus inglés. */
.lang-switch {
  display: inline-flex;
  height: 30px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
  overflow: hidden;
  flex: none;
}
.lang-switch-btn {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--bp-ink-mute);
  font-family: var(--font-mono);
  font-size: var(--chat-ui-micro-font-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.lang-switch-btn + .lang-switch-btn { border-left: var(--hairline) solid var(--bp-rule-soft); }
.lang-switch-btn:hover { color: var(--bp-ink); }
.lang-switch-btn.is-active {
  background: var(--bp-navy-soft);
  color: var(--bp-navy);
}
/* 44px de blanco vertical táctil, como el mode-pill. */
.lang-switch-btn::before { content: ""; position: absolute; inset: -7px 0; }

.mode-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 290px;
  padding: 6px;
  background: var(--bp-surface);
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  z-index: 40;
}
.mode-menu[hidden] { display: none; }
.mode-menu-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 9px 11px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; text-align: left; cursor: pointer;
  transition: background 120ms var(--ease);
}
.mode-menu-item:hover { background: var(--bp-cream-soft); }
.mode-menu-item.is-active { background: var(--bp-navy-soft); }
/* «Voz» pending confirmation (personification not yet accepted): a dashed-outline
   affordance + subdued name, replacing the previous state's signal. */
.mode-menu-item.is-pending {
  box-shadow: inset 0 0 0 1px var(--bp-rule);
}
.mode-menu-item.is-pending .mode-menu-name { color: var(--bp-ink-soft); }
.mode-menu-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
.mode-menu-text { flex: 1 1 auto; min-width: 0; }
.mode-menu-name { display: block; font: 600 var(--chat-ui-title-font-size) var(--font-display); color: var(--bp-ink); letter-spacing: -0.005em; }
.mode-menu-desc { display: block; margin-top: 1px; font-size: var(--chat-ui-small-font-size); line-height: 1.38; color: var(--bp-ink-mute); }
.mode-menu-check { margin-left: 6px; color: var(--bp-navy); flex: none; }
.mode-menu-check svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mode-menu-item:not(.is-active) .mode-menu-check { visibility: hidden; }
/* Locked premium mode (free user): dimmed name + a lock; the «Disponible en Plus»
   sits in the desc slot. Still clickable — the click opens the plans menu. */
.mode-menu-item.is-locked .mode-menu-name { color: var(--bp-ink-soft); }
.mode-menu-item.is-locked .mode-menu-desc { color: var(--bp-gold-deep); font-family: var(--font-mono); font-size: var(--chat-ui-micro-font-size); letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Selector de autor (multi-corpus) ──────────────────────────────────────
   Botón cuadrado con el retrato de la voz activa (a la izquierda del modo), y su
   menú desplegable para alternar las bibliotecas autorizadas. */
.author-control { position: relative; display: inline-flex; }
.author-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: var(--radius-sm); flex: none;
  border: var(--hairline) solid var(--bp-rule-soft); background: var(--bp-surface);
  cursor: pointer; overflow: hidden; position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.author-pill::before { content: ""; position: absolute; inset: -7px; }
.author-pill:hover { border-color: var(--bp-ink-mute); }
.author-pill-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  border-radius: 6px; display: block; transform-origin: 50% 18%;
}
/* Los cuatro marcos conservan exactamente el mismo tamaño. Estos dos acercamientos
   compensan el aire de los originales para igualar el tamaño óptico de los rostros. */
html[data-corpus="karol"] .author-pill-img { transform: translateY(2px) scale(1.36); }
html[data-corpus="san-josemaria"] .author-pill-img { transform: scale(1.12); }

.author-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 40;
  width: 320px; max-width: calc(100vw - 32px); padding: 6px; border-radius: var(--radius-sm);
  background: var(--bp-surface); border: var(--hairline) solid var(--bp-rule-soft);
  box-shadow: 0 12px 32px rgba(31, 26, 21, 0.16), 0 2px 8px rgba(31, 26, 21, 0.08);
}
.author-menu[hidden] { display: none; }
.author-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  cursor: pointer; text-align: left;
}
.author-menu-item:hover { background: var(--bp-cream-soft); }
.author-menu-item.is-active { background: var(--bp-navy-soft); }
.author-menu-avatar {
  width: 34px; height: 34px; border-radius: 6px; flex: none;
  overflow: hidden;
}
.author-menu-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  border: 0; display: block; transform-origin: 50% 18%;
}
.author-menu-item[data-corpus="karol"] .author-menu-img { transform: translateY(2px) scale(1.36); }
.author-menu-item[data-corpus="san-josemaria"] .author-menu-img { transform: scale(1.12); }
.author-menu-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--chat-ui-title-font-size) var(--font-display); color: var(--bp-ink); letter-spacing: -0.005em; }
.author-menu-check { margin-left: 6px; color: var(--bp-navy); flex: none; }
.author-menu-check svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.author-menu-item:not(.is-active) .author-menu-check { visibility: hidden; }
/* Candado visible para cualquier corpus que requiera un tier superior. */
.author-menu-item.is-locked { opacity: 0.6; }
.author-menu-lock { margin-left: 6px; color: var(--bp-ink-mute); flex: none; }
.author-menu-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-menu-lock { margin-left: 6px; color: var(--bp-ink-mute); flex: none; }
.mode-menu-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Honest downgrade note under the MODALIDAD label (served ≠ requested premium mode). */
.answer-mode-note { flex-basis: 100%; margin-top: 3px; color: var(--bp-gold-deep); font-family: var(--font-ui); font-size: var(--chat-ui-small-font-size); line-height: 1.4; }

/* Center status micro-label (human language) */
.composer-status {
  margin: 0;
  min-height: 14px;
  color: var(--bp-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--chat-ui-micro-font-size);
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-status[hidden] { display: none; }
.composer-status.is-live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bp-navy);
  font-weight: 600;
}
.status-dots { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.status-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bp-navy);
  opacity: 0.35;
  animation: typingPulse 1s ease-in-out infinite;
}
.status-dots span:nth-child(2) { animation-delay: 0.15s; }
.status-dots span:nth-child(3) { animation-delay: 0.3s; }

/* Send button — azure when there's text, grey when empty; morphs to a spinner. */
.send-button {
  position: relative;
  width: 32px; height: 32px;
  flex: none;
  border: 0; border-radius: var(--radius-sm);
  background: var(--bp-cream-deep);
  color: var(--bp-ink-mute);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), transform 140ms var(--ease);
}
/* 44px touch target without growing the 32px disc. */
.send-button::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius-sm) + 6px);
}
body[data-composer-has-text="true"] .send-button {
  background: var(--bp-navy);
  color: #fff;
}
body[data-composer-has-text="true"] .send-button:hover { background: var(--bp-navy-deep); transform: translateY(-1px); }
.send-button:disabled { cursor: wait; transform: none; }
.send-button svg { position: absolute; }
.send-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.send-spinner {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 40 60;
  opacity: 0;
}
/* While answering: hide the arrow, spin the ring. */
body[data-answering="true"] .send-button { background: var(--bp-navy); color: #fff; }
body[data-answering="true"] .send-arrow { opacity: 0; }
body[data-answering="true"] .send-spinner { opacity: 1; animation: sendSpin 0.8s linear infinite; }
@keyframes sendSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Evidence panel — slides in from the right (desktop); sheet on mobile
   ========================================================================== */
.evidence-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;   /* head (solo la X) + ficha; el question-meta se retiró */
  background: var(--bp-surface);
  border-left: var(--hairline) solid var(--bp-rule);
  overflow: hidden;
  overscroll-behavior: contain;   /* the sheet's scroll must not chain to the chat behind */
}
body[data-evidence-visible="false"] .evidence-panel { display: none; }

.evidence-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 16px;
}
/* Ficha sin aparato: la cabecera queda reducida a la X, alineada a la derecha,
   con menos aire para que el «Pasaje aludido» suba. */
.evidence-head--bare {
  justify-content: flex-end;
  padding: 14px 14px 0;
}
.evidence-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-size: var(--chat-excerpt-font-size);
  line-height: 1.62;
  color: var(--bp-ink);
}
.evidence-workmeta {
  margin: 4px 0 10px;
  color: var(--bp-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
}
.evidence-workmeta .evidence-aas { margin-left: 10px; font-family: var(--font-mono); font-size: var(--chat-ui-micro-font-size); }
.icon-button {
  position: relative;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-sm);
  background: var(--bp-cream-soft);
  color: var(--bp-ink-soft);
  transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease);
}
/* 44px touch target (the sheet's close X on mobile). */
.icon-button::before { content: ""; position: absolute; inset: -5px; border-radius: calc(var(--radius-sm) + 5px); }
.icon-button:hover { color: var(--bp-ink); border-color: var(--bp-ink-mute); background: var(--bp-cream-deep); }
.icon-button svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.evidence-list {
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
}
.evidence-placeholder {
  padding: 28px 26px;
  color: var(--bp-ink-soft);
  font-size: var(--chat-ui-title-font-size);
  line-height: 1.5;
}
.evidence-item {
  padding: 16px 22px 16px 26px;
  border: 0;
  border-bottom: 0.5px solid var(--bp-rule-soft);
  position: relative;
  transition: background 140ms var(--ease);
}
.evidence-item:last-child { border-bottom: 0; }
.evidence-item::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  background: var(--bp-rule);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  transition: background 140ms var(--ease);
}
.evidence-item:hover { background: var(--bp-navy-veil); }
.evidence-item:hover::before,
.evidence-item.is-active::before { background: var(--bp-navy); }
.evidence-item:hover h4,
.evidence-item.is-active h4 { color: var(--bp-navy); }
.evidence-item.is-active { background: var(--bp-navy-veil); }
.evidence-item h4 {
  font-family: var(--font-ui);
  font-size: var(--chat-ui-title-font-size);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--bp-ink);
}
.evidence-detail:empty { display: none; }
.evidence-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--bp-rule-soft);
}
.evidence-section-title {
  font-family: var(--font-mono);
  font-size: var(--chat-ui-micro-font-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-gold-deep);
  margin-bottom: 6px;
}
.evidence-lede { font-weight: 600; color: var(--bp-ink); margin: 0 0 6px; }
.evidence-abstract { color: var(--bp-ink-soft); margin: 0; }
.evidence-theme-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 4px 0;
}
.evidence-theme-tier { flex: 0 0 auto; min-width: 84px; font-size: var(--chat-ui-micro-font-size); color: var(--bp-ink-soft); }
.evidence-theme-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.evidence-theme-chip {
  font-size: var(--chat-ui-small-font-size);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bp-navy-soft);
  color: var(--bp-navy);
}
.evidence-item p {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: var(--chat-excerpt-font-size);
  line-height: 1.55;
  color: var(--bp-ink);
}
.evidence-biography-reference .source-citation--biography {
  display: block;
  color: var(--bp-ink);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-title-font-size);
  font-weight: 500;
  line-height: 1.55;
}
.evidence-biography-fact p {
  margin: 0;
  font-style: normal;
}
.evidence-link {
  display: inline-flex;
  margin-top: 2px;
  color: var(--bp-navy);
  font-family: var(--font-display);
  font-size: var(--chat-ui-small-font-size);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.evidence-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.evidence-empty {
  margin: 18px 22px;
  padding: 18px 20px;
  border: var(--hairline) solid var(--bp-rule);
  border-left: 2px solid var(--bp-navy);
  border-radius: var(--radius-card);
  background: var(--bp-cream-soft);
}
.evidence-empty strong {
  display: block;
  color: var(--bp-ink);
  font-family: var(--font-display);
  font-size: var(--chat-ui-font-size);
  font-weight: 700;
}
.evidence-empty p {
  margin-top: 8px;
  color: var(--bp-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--chat-ui-small-font-size);
  line-height: 1.5;
}

/* ==========================================================================
   Personification warning
   ========================================================================== */
/* Aviso de personificación = MODAL centrado: vela y desenfoca todo lo demás.
   La decisión merece foco total, no una franja que se pierde arriba. */
.personification-warning {
  position: fixed;
  inset: 0;
  z-index: 80;               /* sobre drawer(43), evidencia(58) y hamburguesa(61) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 25, 37, 0.34);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.personification-warning[hidden] { display: none; }
.warning-card {
  width: min(520px, 100%);
  display: grid;
  gap: 12px;
  padding: 26px 28px 22px;
  background: var(--bp-surface);
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
}
.warning-label {
  color: var(--bp-navy);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.warning-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--bp-ink);
}
.personification-warning p {
  color: var(--bp-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
}
.warning-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.ghost-button,
.primary-button {
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease);
}
.ghost-button {
  border: var(--hairline) solid var(--bp-rule);
  background: var(--bp-cream-soft);
  color: var(--bp-ink);
}
.ghost-button:hover { background: var(--bp-cream-deep); border-color: var(--bp-ink-mute); }
.primary-button {
  border: 1px solid var(--bp-navy);
  background: var(--bp-navy);
  color: var(--bp-navy-ink);
}
.primary-button:hover { background: var(--bp-navy-deep); border-color: var(--bp-navy-deep); }

/* ==========================================================================
   Coordinate tooltip (kept — used by data-tip hovers if present)
   ========================================================================== */
.coord-tip {
  position: fixed;
  z-index: 120;
  max-width: 232px;
  padding: 8px 11px;
  background: var(--bp-ink);
  color: var(--bp-cream);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
}
.coord-tip.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Loading
   ========================================================================== */
.loading-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bp-cream);
  z-index: 50;
}
body[data-loading="false"] .loading-screen { display: none; }
.loading-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 32px;
  border: var(--hairline) solid var(--bp-rule);
  border-radius: var(--radius-card);
  background: var(--bp-surface);
}
.loading-card .brand-mark { width: 34px; height: 34px; }
.loading-card p {
  color: var(--bp-ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.error {
  margin: 80px auto;
  max-width: 480px;
  padding: 18px 22px;
  border: 0.5px solid var(--bp-navy);
  border-left: 2px solid var(--bp-navy);
  border-radius: var(--radius-card);
  background: var(--bp-surface);
  color: var(--bp-navy);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */
.conversation-scroll,
.dialogue,
.evidence-list,
.session-list {
  scrollbar-width: thin;
  scrollbar-color: var(--bp-rule) transparent;
}
.conversation-scroll::-webkit-scrollbar,
.evidence-list::-webkit-scrollbar,
.session-list::-webkit-scrollbar { width: 8px; height: 8px; }
.conversation-scroll::-webkit-scrollbar-thumb,
.evidence-list::-webkit-scrollbar-thumb,
.session-list::-webkit-scrollbar-thumb {
  background: var(--bp-rule);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Responsive — evidence sheet + tighter gutters on mobile
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --gutter: 20px; }

  /* 16px prevents iOS Safari auto-zoom on focus (desktop keeps 15px). */
  #composer-input { font-size: max(16px, var(--chat-input-font-size)); }

  /* Evidence rises as a bottom sheet instead of a right column, over a tappable
     backdrop that closes it. */
  body[data-evidence-visible="true"] .workspace { grid-template-columns: minmax(0, 1fr); }
  .evidence-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 58;
    max-height: 82dvh;
    border: var(--hairline) solid var(--bp-rule);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 44px rgba(20, 25, 37, 0.24);
    /* head + list (the old 3-row form was left over from the retired question-meta;
       with only 2 children the list fell into an auto row and clipped instead of
       scrolling). Match the desktop panel: head auto, list flexible. */
    grid-template-rows: auto minmax(0, 1fr);
    animation: sheetUp 260ms var(--ease);
  }
  /* Drag handle affordance at the top of the sheet. */
  .evidence-panel::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    width: 36px; height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--bp-rule);
  }
  .evidence-head { padding-top: 22px; }
  @keyframes sheetUp {
    from { transform: translateY(24px); opacity: 0.4; }
    to   { transform: translateY(0); opacity: 1; }
  }
  body[data-evidence-visible="true"] .evidence-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 57;
    background: rgba(20, 25, 37, 0.34);
  }
  .conversation-column { padding: 0 clamp(16px, 5vw, 28px); }
  .composer-area { padding-inline: clamp(16px, 5vw, 28px); }
}

/* Evidence backdrop only exists visually on mobile (bottom-sheet); hidden on desktop
   where the panel is a side column. */
.evidence-backdrop { display: none; }

@media (max-width: 600px) {
  .hero-mark { width: 88px; height: 88px; }
  .hero-sign-img { width: min(320px, 82vw); }
  .personification-warning { padding: 16px; }
  .warning-card { padding: 22px 20px 18px; }
  .warning-actions { flex-wrap: wrap; }
  .reference-popover {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: auto;
    top: 120px;
    width: auto;
    max-height: calc(100dvh - 190px);
    overflow: auto;
    transform: translateY(3px);
  }
  .cite-wrap:hover .reference-popover,
  .cite-wrap:focus-within .reference-popover,
  .cite-wrap.is-open .reference-popover { transform: translateY(0); }
}

/* ==========================================================================
   Reduced motion — flip becomes a cross-fade; no pop/sheen/scroll animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .chat-stage, .corner-btn, .side-panel,
  .side-panel > *, .sidebar-backdrop { transition: none !important; }  /* mobile layered drawer: no slide/fade */
  .flip-deck { transition: opacity 200ms ease; }
  body[data-behind="true"] .flip-deck { transform: none; }
  /* When flipped, cross-fade: hide the front face, show the back. */
  body[data-behind="true"] .flip-front { opacity: 0; pointer-events: none; }
  .flip-back { transform: none; opacity: 0; pointer-events: none; }
  body[data-behind="true"] .flip-back { opacity: 1; pointer-events: auto; }
  .hero-mark, .hero-signature, .hero-kicker {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* La firma aparece completa, sin escribirse. */
  .hero-sign-img { animation: none !important; clip-path: none !important; }
  .hero-mark-sheen { display: none; }
  .cite { animation: none; transform: scale(1); opacity: 1; }
  .send-spinner { animation: none; }
  /* Kill every looping animation (the ones most likely to bother vestibular users). */
  .typing-indicator span,
  .status-dots span,
  .typing-indicator em { animation: none !important; }
  /* Keep the caret visible, just stop it blinking. */
  .stream-cursor { animation: none !important; opacity: 1; }
  /* Neutralise entrance animations. */
  .evidence-panel,
  .grounding-body { animation: none !important; }
  /* No lift on the starter cards. */
  .conversation-starter,
  .conversation-starter:hover,
  .conversation-starter:focus-visible { transform: none !important; }
}

/* Reduced motion + mobile: no animation, but the OPEN drawer still SNAPS to the
   layered-card look (offset + scaled + rounded + shadow, menu content shown, scrim on)
   — not stuck dim, not a flat push. Pairs with the merged transition:none above. */
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .side-panel > * { opacity: 1 !important; transform: none !important; }
  body[data-sidebar-open="true"] .chat-stage {
    position: relative; z-index: 41;
    transform: translateX(min(86vw, 320px)) scale(0.965);
    border-top-left-radius: var(--radius-card);
    border-bottom-left-radius: var(--radius-card);
    box-shadow: -10px 0 24px rgba(20, 25, 37, 0.10),
                 -2px 0  6px rgba(20, 25, 37, 0.06);
  }
}

/* ── Prod auth gate (deployed shell only): keep the chat hidden and the loading
   screen up until the Firebase <script> in index.html resolves the session. Dev
   has no auth, so this block lives only in landing. Matches .loading-screen's
   display:grid. See chat-landing-publish-and-flip-auth. ── */
body[data-auth-checking="true"] .flip-viewport { visibility: hidden; }
body[data-auth-checking="true"] .loading-screen { display: grid; }
html[data-fast-entry="true"] body[data-loading="false"][data-auth-checking="true"] .flip-viewport { visibility: visible; }
html[data-fast-entry="true"] body[data-loading="false"][data-auth-checking="true"] .loading-screen { display: none; }