/* ── IA ATMA: el haz (23-sep-2026) ───────────────────────────────────────
   Pedro pidió llevar el estilo del Inicio (columnas de luz) al chat y, de
   cuatro opciones, eligió la A: un solo haz de luz lila baja desde arriba y
   se posa sobre la caja de escribir. Fuera el vórtice de estrellas de la
   bienvenida: ahora solo sale en el modo voz, que es donde tiene un papel.
   Las conversaciones pasan a una columna fina a la derecha.

   Carga después de todo; quitar su <link> devuelve el chat de antes (el
   orbe, eso sí, solo se enciende al entrar en modo voz — ver vistaChat). */

body[data-vista="chat"]{ --ambiente:rgba(143,107,255,.10) }

.chat{ grid-template-columns:minmax(0, 1fr) 240px }

/* ── Tus conversaciones, a la derecha ───────────────────────────────── */
.chat-lado{
  order:2; padding:28px 16px !important; gap:10px !important;
  border-right:none !important; border-left:1px solid rgba(238,237,245,.06) !important;
  background:transparent !important;
}
.chat-lado .nueva-conv{
  align-self:flex-start; padding:10px 16px !important; border-radius:99px !important;
  font-size:9.5px !important; letter-spacing:.18em !important; text-transform:uppercase; white-space:nowrap;
  background:transparent !important; border:1px solid rgba(var(--c-lila),.35) !important; box-shadow:none !important; color:var(--tinta) !important;
}
.chat-lado .nueva-conv:hover{ border-color:rgba(var(--c-lila),.7) !important; background:rgba(var(--c-lila),.06) !important }
.chat-lado .ia-rotulo{ margin:22px 12px 6px; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-tenue) }
.chat-item{ padding:10px 28px 10px 12px; border-radius:12px }
.chat-item:hover{ background:rgba(238,237,245,.035) }
.chat-item.aqui{ background:rgba(238,237,245,.05) }
.chat-titulo{ font-size:12.5px }
.chat-cuando{ margin-top:3px; font-size:9.5px; letter-spacing:.12em }

/* ── El haz ───────────────────────────────────────────────────────────── */
.chat-caja{ background:transparent }
.ia-haz{
  position:absolute; z-index:0; pointer-events:none; top:0; left:50%; width:1px; height:calc(50% - 175px);
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgb(var(--c-lila)) 72%, rgba(var(--c-lila),.25));
  box-shadow:0 0 24px 3px rgba(var(--c-lila),.45);
  animation:ia-late 5s ease-in-out infinite;
  transition:left .9s var(--curva-lx), height .9s var(--curva-lx), opacity .9s;
}
.ia-halo{
  position:absolute; z-index:0; pointer-events:none; top:calc(50% - 260px); left:50%; width:620px; height:340px;
  transform:translateX(-50%); background:radial-gradient(ellipse at 50% 60%, rgba(var(--c-lila),.16), transparent 65%);
  transition:opacity .9s;
}
@keyframes ia-late{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }

/* Con conversación, el haz se corre a la izquierda y acompaña de lejos. */
.chat-caja:not(.sin-charla) .ia-haz{ left:max(28px, calc((100% - var(--columna-chat)) / 2 - 36px)); height:100%; opacity:.28; animation:none }
.chat-caja:not(.sin-charla) .ia-halo{ opacity:0 }
.chat-caja.en-voz .ia-haz, .chat-caja.en-voz .ia-halo{ opacity:0 }

/* El vórtice solo en modo voz. */
.chat-caja:not(.en-voz) > .orbe-escena{ display:none }

/* ── Contexto activo: una línea, abajo ───────────────────────────────────
   Pedro (23-sep): arriba se veía saturado, cruzado por el haz. Va al pie,
   junto al aviso de que ATMA no calibra, con el orden de flex (la pone
   sigma.js al principio de la caja). */
.lx-contexto{
  order:1; align-self:center; margin:14px 20px 0; padding:0; border:0 !important; background:transparent !important;
  backdrop-filter:none; -webkit-backdrop-filter:none; font-size:10.5px; color:var(--tinta-tenue); gap:8px; text-align:center;
}
.chat-caja > .chat-pie{ order:2 }
.chat-caja > .voz-escena{ order:3 }
.lx-contexto b{ color:var(--tinta-media) }
.lx-contexto .lx-punto-vivo{ width:4px; height:4px; flex-basis:4px }
.chat-caja:not(.sin-charla) .lx-contexto{ margin-top:12px }
.chat-caja.en-voz .lx-contexto{ display:none }

/* ── La bienvenida ────────────────────────────────────────────────────── */
.chat-vacio{ max-width:720px; padding-bottom:10px }
.chat-vacio p{ margin:0; font-family:var(--display); font-weight:200; font-size:15px; color:var(--tinta-media); text-shadow:none }
.chat-vacio h3{
  margin:4px 0 0; font-family:var(--display); font-weight:200 !important; font-size:clamp(28px, 3.2vw, 36px) !important;
  letter-spacing:-.03em !important; line-height:1.1; color:var(--tinta); text-shadow:none;
}

/* ── La caja de escribir ──────────────────────────────────────────────── */
.compositor{
  border-radius:22px !important; background:rgba(238,237,245,.03) !important; border:1px solid rgba(238,237,245,.09) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important;
  transition:border-color .4s, box-shadow .4s;
}
.compositor:focus-within{ border-color:rgba(var(--c-lila),.45) !important; box-shadow:0 0 0 6px rgba(var(--c-lila),.06), 0 0 40px rgba(var(--c-lila),.12) !important }
.compositor textarea{ font-family:var(--display) !important; font-weight:300; font-size:15px !important }
.mando{ width:38px !important; height:38px !important; background:transparent !important; border:1px solid rgba(238,237,245,.12) !important; box-shadow:none !important }
.mando svg{ width:16px; height:16px }
.mando-enviar{ background:rgb(var(--c-lila)) !important; color:#120b2b !important; border-color:transparent !important; box-shadow:0 0 22px rgba(var(--c-lila),.45) !important }
.mando-enviar:hover:not(:disabled){ background:#d6cbff !important; color:#120b2b !important }

/* ── Sugerencias: hilos finos ─────────────────────────────────────────── */
.chat-sugerencias{ justify-content:center; gap:8px; padding-top:16px }
.idea{
  padding:9px 15px !important; border-radius:99px !important; background:transparent !important;
  border:1px solid rgba(238,237,245,.09) !important; box-shadow:none !important;
  font-size:12px !important; letter-spacing:normal !important; text-transform:none !important; color:var(--tinta-media) !important;
  transition:border-color .3s, color .3s;
}
.idea:hover{ border-color:rgba(var(--c-lila),.45) !important; color:var(--tinta) !important; transform:none !important }
.chat-pie{ font-size:10.5px; color:var(--tinta-tenue); text-align:center }

/* ── Las respuestas: una línea de luz al costado, sin burbuja ─────────── */
.burbuja.atma .burbuja-texto{
  position:relative; padding:0 0 0 22px; border:0 !important; border-radius:0 !important; background:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important;
  font-size:14.5px; line-height:1.7; color:var(--tinta-media);
}
.burbuja.atma .burbuja-texto::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px;
  background:linear-gradient(180deg, rgb(var(--c-lila)), transparent); box-shadow:0 0 12px rgba(var(--c-lila),.6);
}
.burbuja.atma .burbuja-quien{ padding-left:22px; font-size:9.5px; letter-spacing:.3em; color:rgba(var(--c-lila),.9) }
.burbuja.atma .lx-acc{ padding-left:22px }
.burbuja.alumno .burbuja-quien{ display:none }
.burbuja.alumno .burbuja-texto{
  padding:12px 18px; border-radius:18px 18px 4px 18px !important; font-size:14px;
  background:rgba(238,237,245,.05) !important; border:1px solid rgba(238,237,245,.07) !important; box-shadow:none !important; color:var(--tinta);
}
.burbuja.fallo .burbuja-texto{ color:#ffb8b2 }

@media (max-width:820px){
  .chat{ grid-template-columns:1fr }
  .chat-lado{ order:0; border-left:none !important; border-bottom:1px solid rgba(238,237,245,.06) !important; padding:16px 18px !important }
  .chat-lado .ia-rotulo{ margin:12px 4px 4px }
  .ia-halo{ width:100%; }
  .ia-haz{ height:120px }
  .lx-contexto .lx-punto-vivo{ display:none }
}
@media (prefers-reduced-motion:reduce){ .ia-haz{ animation:none } }