/* S28b — CSS scoped para marcadores tipados v4. Solo aplica en .chat-screen,
   NO contamina admin (admin.html no carga este archivo). NO toca style.css. */

.chat-screen .chat-block {
  padding: 10px 14px;
  margin: 0 0 8px 0;
  border-radius: 6px;
  border-left: 3px solid transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

.chat-screen .chat-block:last-child {
  margin-bottom: 0;
}

/* Plain: fallback v3 — sin styling especial, hereda del .msg-body. */
.chat-screen .chat-block-plain {
  padding: 0;
  border-left: 0;
  background: transparent;
}

/* Respuesta: protagonista. Fondo Aduax suave + border-left accent. */
.chat-screen .chat-block-respuesta {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 500;
}

/* Fundamento: discreto, neutro. Para citations + análisis. */
.chat-screen .chat-block-fundamento {
  background: var(--bg-soft);
  border-left-color: var(--ink-faint);
  color: var(--ink-soft);
  font-size: 0.95em;
}

/* Advertencia: warn token existente + glyph inline. */
.chat-screen .chat-block-advertencia {
  background: var(--warn-bg);
  border-left-color: var(--warn);
  color: var(--ink);
}

.chat-screen .chat-block-advertencia::before {
  content: '⚠ ';
  font-weight: 600;
  color: var(--warn);
}

/* Recomendación operativa: verde moderado (literal — no hay token success). */
.chat-screen .chat-block-recomendacion_operativa {
  background: #EAF6EE;
  border-left-color: #2D8659;
  color: var(--ink);
}

:root[data-theme="dark"] .chat-screen .chat-block-recomendacion_operativa {
  background: #142318;
  border-left-color: #4ADE80;
  color: var(--ink);
}

/* Clarification: bloque distintivo. Azul moderado (literal — no hay token info).
   Itálica para marcar tono inquisitivo. */
.chat-screen .chat-block-clarification_request {
  background: #EDF4FB;
  border-left-color: #3B82F6;
  color: var(--ink);
  font-style: italic;
}

.chat-screen .chat-block-clarification_request::before {
  content: '? ';
  font-style: normal;
  font-weight: 600;
  color: #3B82F6;
}

:root[data-theme="dark"] .chat-screen .chat-block-clarification_request {
  background: #0E1A28;
  border-left-color: #60A5FA;
  color: var(--ink);
}

:root[data-theme="dark"] .chat-screen .chat-block-clarification_request::before {
  color: #60A5FA;
}

/* Responsive: mobile mantiene legibilidad sin layout horizontal. */
@media (max-width: 600px) {
  .chat-screen .chat-block {
    padding: 8px 12px;
    margin-bottom: 6px;
  }
}

/* ----- S29 Bloque 9: Badges de vigencia en citations ----- */
/* Scoped a .chat-screen (no toca admin). Fallback hex si vars no definidas. */
.chat-screen .livia-citation-vigencia {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 600;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 8px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.chat-screen .livia-citation-vigencia--activa {
  background: #E6F4EA;
  color: #1E7E34;
}

.chat-screen .livia-citation-vigencia--transicion {
  background: #FFF3CD;
  color: #856404;
}

.chat-screen .livia-citation-vigencia--abrogada {
  background: #E9ECEF;
  color: #6C757D;
  text-decoration: line-through;
}

:root[data-theme="dark"] .chat-screen .livia-citation-vigencia--activa {
  background: #14321B;
  color: #4ADE80;
}

:root[data-theme="dark"] .chat-screen .livia-citation-vigencia--transicion {
  background: #3D2F0F;
  color: #FACC15;
}

:root[data-theme="dark"] .chat-screen .livia-citation-vigencia--abrogada {
  background: #2A2D31;
  color: #9CA3AF;
}

/* =================================================================
   S30 — Dirección X editorial: re-style de bloques tipados con kickers
   serif uppercase. Scoped a .chat-screen, vence specificity de reglas
   anteriores en este mismo archivo gracias a el orden de declaración.
   ================================================================= */

.chat-screen .chat-block {
  background: transparent;
  border: 0;
  border-left: 0;
  padding: 0;
  margin: 0 0 22px 0;
  border-radius: 0;
}
.chat-screen .chat-block:last-child {
  margin-bottom: 0;
}

/* Kicker común — implementado con ::before. */
.chat-screen .chat-block-respuesta::before,
.chat-screen .chat-block-fundamento::before,
.chat-screen .chat-block-recomendacion_operativa::before,
.chat-screen .chat-block-contexto_historico::before,
.chat-screen .chat-block-advertencia::before,
.chat-screen .chat-block-clarification_request::before {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.chat-screen .chat-block-respuesta::before {
  content: 'Respuesta';
  color: var(--accent);
}
.chat-screen .chat-block-respuesta {
  background: transparent;
  color: var(--text-primary);
  font-weight: 400;
}

.chat-screen .chat-block-fundamento::before {
  content: 'Fundamento';
  color: var(--text-tertiary);
}
.chat-screen .chat-block-fundamento {
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.chat-screen .chat-block-recomendacion_operativa::before {
  content: 'Recomendación operativa';
  color: var(--accent);
}
.chat-screen .chat-block-recomendacion_operativa {
  background: transparent;
  color: var(--text-primary);
}

/* Contexto histórico — wrapper amber con border-left. */
.chat-screen .chat-block-contexto_historico {
  background: var(--amber-bg);
  border-left: 2px solid var(--amber-border);
  border-radius: 0 var(--radius-md-x) var(--radius-md-x) 0;
  padding: 12px 16px;
  color: var(--amber-text-body);
}
.chat-screen .chat-block-contexto_historico::before {
  content: 'Contexto histórico';
  color: var(--amber-text-strong);
}

/* Advertencia y clarification — heredan kicker pero mantienen su color
   y glyph propio para preservar semántica visual existente. */
.chat-screen .chat-block-advertencia {
  background: var(--status-warn-bg);
  border-left: 2px solid var(--status-warn-fg);
  border-radius: 0 var(--radius-md-x) var(--radius-md-x) 0;
  padding: 12px 16px;
  color: var(--status-warn-fg);
}
.chat-screen .chat-block-advertencia::before {
  content: 'Advertencia';
  color: var(--status-warn-fg);
}

.chat-screen .chat-block-clarification_request {
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-md-x) var(--radius-md-x) 0;
  padding: 12px 16px;
  color: var(--text-primary);
  font-style: italic;
}
.chat-screen .chat-block-clarification_request::before {
  content: 'Aclaración pendiente';
  color: var(--accent);
  font-style: normal;
}

/* Override de badges vigencia con tokens nuevos (mantiene clases JS). */
.chat-screen .livia-citation-vigencia {
  font-family: var(--font-body-x);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-sm-x);
  text-transform: uppercase;
}
.chat-screen .livia-citation-vigencia--activa {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}
.chat-screen .livia-citation-vigencia--transicion {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}
.chat-screen .livia-citation-vigencia--abrogada {
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
  text-decoration: line-through;
}