/* ═══════════════════════════════════════════════════════════════
   SofIA — chat contra el servicio RAG externo

   Hereda de style.css todo lo que el chat original ya resuelve (.thread, .row,
   .bubble, el markdown dentro de la burbuja, .source-card, la barra de etapas).
   Aquí SOLO van el armazón de la pantalla y las mejoras visuales, siempre
   colgando de `.sofia` para no tocar el chat original: es el banco de pruebas
   de lo que luego se porte allí.

   Nada de color crudo: solo var(--token) (regla de tokens.css).
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── armazón ─────────────────────────
   console.css fija `.adm--page .adm__body { max-width: 1100px }` y va cargado
   DESPUÉS que esta hoja. Añadir `.sofia` al mismo elemento sube la
   especificidad (0,3,0 > 0,2,0) y la vence sin !important — mismo truco que
   documenta servicio.css. */
.adm--page.sofia .adm__body {
  max-width: none;
  padding: 0;
  flex: 1;                  /* sin esto el composer sube a media pantalla con el hilo vacío */
  display: flex;
  flex-direction: column;
  min-height: 0;            /* sin esto el hijo con scroll desborda el flex */
}

.sofia .sof-scroll { flex: 1; min-height: 0; }

.sofia .sof-thread {
  max-width: 900px;
  padding: 28px max(20px, var(--safe-right)) 36px max(20px, var(--safe-left));
  gap: 26px;
}

/* ───────────────────────── burbuja de respuesta ─────────────────────────
   Mejora sobre .bubble--ai: sombra en dos capas (un contacto corto y pegado,
   más una difusa que da altura) y un filete de acento arriba que ancla la
   burbuja a la marca. El original tiene una sola sombra plana. */
.sofia .bubble--ai {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 58, 94, .06), 0 10px 26px -12px rgba(20, 58, 94, .22);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.sofia .bubble--ai::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .75;
}
.sofia .bubble--ai:hover { box-shadow: 0 1px 2px rgba(20, 58, 94, .07), 0 16px 34px -14px rgba(20, 58, 94, .3); }
/* Los avisos del sistema ya llevan su propio filete lateral: no compiten. */
.sofia .bubble--note::before,
.sofia .bubble--progress::before { display: none; }

.sofia .bubble--user { box-shadow: 0 2px 4px rgba(20, 58, 94, .12), 0 10px 22px -10px rgba(20, 58, 94, .34); }

/* Entrada escalonada: el avatar y el nombre llegan un pelo antes que el texto,
   de modo que la fila se arma en vez de aparecer de golpe. */
.sofia .row--ai .ava { animation: sof-pop .34s var(--ease) both; }
.sofia .row--ai .row__meta { animation: sof-rise .38s var(--ease) .05s both; }
.sofia .row--ai .msg-render { animation: sof-rise .42s var(--ease) .1s both; }

@keyframes sof-pop  { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes sof-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cursor de la máquina de escribir: late en el último bloque mientras se revela
   el texto, y desaparece solo cuando el nodo deja de crecer. */
.sofia.is-busy .bubble--ai:not(.bubble--progress):not(.bubble--note) > :last-child::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: sof-caret 1s steps(2, start) infinite;
}
@keyframes sof-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ───────────────────────── composer ─────────────────────────
   Mejora sobre .composer__box: el anillo de foco crece en vez de aparecer, y el
   borde vira al azul de marca. En el original el anillo salta de golpe. */
.sofia .sof-composer {
  background: var(--app);
  border-top: 1px solid var(--border);
  padding: 14px max(20px, var(--safe-right)) calc(18px + var(--safe-bottom)) max(20px, var(--safe-left));
}
.sofia .sof-form { max-width: 900px; margin: 0 auto; }

.sofia .sof-box {
  align-items: flex-end;
  border-radius: 20px;
  transition: border-color .22s var(--ease), box-shadow .3s var(--ease), transform .18s var(--ease);
}
.sofia .sof-box:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 14%, transparent),
              0 8px 22px -12px rgba(31, 111, 199, .5);
  transform: translateY(-1px);
}
.sofia .sof-box textarea { max-height: 180px; }

.sofia .sof-send { transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s; }
.sofia .sof-send.is-ready:hover { transform: translateY(-2px) scale(1.05); }
.sofia .sof-send:disabled { opacity: .45; cursor: default; transform: none; }

.sofia .sof-hint {
  max-width: 900px;
  margin: 8px auto 0;
  text-align: center;
  font: 500 11.5px/1.4 var(--ui);
  color: var(--text-faint);
}

/* ───────────────────────── chips de bienvenida ───────────────────────── */
.sofia .welcome-suggest { margin-top: 14px; gap: 8px; }
.sofia .ws-chip {
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), border-color .2s, background .2s;
}
.sofia .ws-chip:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 6px 16px -8px rgba(31, 111, 199, .55);
}
.sofia .ws-chip:active { transform: translateY(0) scale(.98); }

/* ───────────────────────── fuentes ─────────────────────────
   Sin miniatura: el índice de este servicio son documentos de texto, no páginas
   escaneadas, así que la tarjeta es solo tipografía y le sobra el ancho del
   original. */
.sofia .sof-sources { animation: sof-rise .4s var(--ease) both; }
.sofia .sof-sources .source-cards { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }

.sofia .sof-source {
  padding: 12px 13px;
  border-radius: var(--r-md);
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.sofia .sof-source:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 12px 26px -14px rgba(20, 58, 94, .45);
}
.sofia .sof-source .source-file { word-break: break-word; }
/* El fragmento llega en markdown y el parser lo devuelve en bloques; aquí se
   quiere un adelanto de tres líneas, no un documento. */
.sofia .sof-source .source-snippet { -webkit-line-clamp: 3; font-style: normal; }
.sofia .sof-source .source-snippet > * { margin: 0; font: inherit; color: inherit; }
.sofia .sof-source .source-snippet h3,
.sofia .sof-source .source-snippet h4,
.sofia .sof-source .source-snippet h5 { font: 700 11px/1.45 var(--ui); }
.sofia .sof-source .source-snippet h3::before,
.sofia .sof-source .source-snippet h4::before,
.sofia .sof-source .source-snippet h5::before { display: none; }
.sofia .sof-source .source-snippet .table-chip { display: none; }

/* La barra se llena al aparecer: dice de un vistazo cuál de las fuentes pesa más.
   El gradiente se deja quieto —el del chat original— porque seis barras animándose
   a la vez se leen como una franja marrón y tapan justo lo que vienen a decir. */
.sofia .sof-source .source-score-bar span { animation: sof-fill .7s var(--ease) both; }
@keyframes sof-fill { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }

/* ───────────────────────── móvil ───────────────────────── */
@media (max-width: 720px) {
  .sofia .sof-thread { padding: 20px max(14px, var(--safe-left)) 28px; gap: 20px; }
  .sofia .sof-composer { padding: 10px max(12px, var(--safe-right)) calc(12px + var(--safe-bottom)) max(12px, var(--safe-left)); }
  .sofia .sof-sources .source-cards { grid-template-columns: 1fr; }
}

/* ───────────────────────── movimiento reducido ─────────────────────────
   style.css ya lo anula globalmente; se repite aquí para que las reglas de esta
   hoja se lean completas sin tener que ir a buscarlo. */
@media (prefers-reduced-motion: reduce) {
  .sofia .row--ai .ava,
  .sofia .row--ai .row__meta,
  .sofia .row--ai .msg-render,
  .sofia .sof-sources,
  .sofia .sof-source .source-score-bar span { animation: none; }
  .sofia.is-busy .bubble--ai:not(.bubble--progress):not(.bubble--note) > :last-child::after { animation: none; opacity: 1; }
  .sofia .sof-box:focus-within,
  .sofia .sof-source:hover,
  .sofia .ws-chip:hover,
  .sofia .sof-send.is-ready:hover { transform: none; }
}