/* ── Variables — personalizar por cliente ──────────────────────────────── */
:root {
  /* Tema principal */
  --chat-primario:        #4F628D;
  --chat-primario-hover:  #445679;
  --chat-primario-claro:  color-mix(in srgb, var(--chat-header-fondo) 80%, #EDF0F8);
  --chat-header-fondo:    #12235A;
  --chat-header-hover:    color-mix(in srgb, var(--chat-header-fondo) 75%, var(--chat-primario));
  --chat-header-texto:    #D7DBEA;
  --chat-usuario-fondo:   var(--chat-primario-claro);
  --chat-usuario-texto:  #ffffff;
  --chat-agente-fondo:   #ffffff;
  --chat-agente-texto:   #050812;
  --chat-fondo:          #03050D;
  --chat-borde:          rgba(255,255,255,.10);
  --chat-aviso-color:    #B94747;
  --chat-radio:          1.125rem;
  --chat-fuente:         "Manrope", sans-serif;

  /* Cabecera — overlays sobre fondo oscuro */
  --chat-header-btn-fondo:    rgba(255,255,255,.10);
  --chat-header-btn-borde:    rgba(255,255,255,.20);
  --chat-header-btn-hover:    rgba(255,255,255,.18);
  --chat-header-login-fondo:  rgba(255,255,255,.08);
  --chat-header-login-texto:  rgba(215,219,234,.85);
  --chat-header-login-borde:  rgba(255,255,255,.18);
  --chat-header-avatar-borde: rgba(255,255,255,.25);

  /* Sombras */
  --chat-sombra-btn:     rgba(0,0,0,.45);
  --chat-sombra-login:   rgba(0,0,0,.40);
  --chat-sombra-usuario: rgba(0,0,0,.50);
  --chat-sombra-agente:  rgba(0,0,0,.35);
  --chat-sombra-input:   rgba(0,0,0,.30);
  --chat-sombra-input-sm: rgba(0,0,0,.20);
  --chat-sombra-submit:  rgba(0,0,0,.45);

  /* Brillo (inset highlights) */
  --chat-brillo-sm:     rgba(255,255,255,.06);
  --chat-brillo-md:     rgba(255,255,255,.10);
  --chat-brillo-agente: rgba(255,255,255,.04);

  /* Código */
  --chat-code-fondo:     rgba(0,0,0,.06);
  --chat-code-pre-fondo: rgba(0,0,0,.04);

  /* Spinner */
  --chat-spinner-borde: rgba(215,219,234,.30);
  --chat-blanco:        #D7DBEA;

  /* Texto */
  --chat-texto-suave:  #8F96B0;
  --chat-placeholder:  #8F96B0;
}

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

body {
  font-family: var(--chat-fuente);
  background: var(--chat-fondo);
  /* T-IOS-05: --app-height la sincroniza el JS con visualViewport (área visible sobre el teclado);
     sin soporte, cae a 100dvh. Evita el "salto" del layout fijo al abrir el teclado en móvil. */
  height: var(--app-height, 100dvh);
  overflow: hidden;
  letter-spacing: .035em;
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.oculto { display: none !important; }

/* ── Contenedor principal ──────────────────────────────────────────────── */
#chat-app {
  display: flex;
  flex-direction: column;
  height: var(--app-height, 100dvh);  /* T-IOS-05: sigue a --app-height (ver body) */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: var(--chat-fondo);
  box-shadow: 0 0 0 1px var(--chat-borde);
}

@media (min-width: 640px) {
  #chat-app { max-width: 100%; }
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.chat-header {
  background: var(--chat-header-fondo);
  color: var(--chat-header-texto);
  /* Bajo viewport-fit=cover el header iría bajo la barra de estado/notch: reservar la inset
     superior preserva el top (que sin cover se veía bien). Solo top; laterales/bottom intactos. */
  padding: max(.5rem, env(safe-area-inset-top)) 1.25rem .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid var(--chat-borde);
  box-shadow: 0 4px 10px rgba(0,0,0,.45), 0 10px 50px rgba(0,0,0,.65), inset 0 -4px 20px rgba(255,255,255,.12);
}

.chat-header-marca {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.chat-avatar {
  height: 3.5rem;
  width: auto;
  max-width: 8rem;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

.chat-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 0 1.1rem;
}

/* ── Acciones del header ───────────────────────────────────────────────── */
.chat-header-acciones {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Botones del header ─────────────────────────────────────────────────── */
/* Cancela el position:fixed y el color K3A hardcodeado que base.html aplica a #btn-instalar-pwa */
#btn-instalar-pwa {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  background: var(--chat-primario-claro) !important;
  color: #ffffff !important;
}
#btn-instalar-pwa:hover {
  background: var(--chat-header-hover) !important;
}

.pwa-instalada,
#btn-instalar-pwa.pwa-instalada { display: none !important; }

.btn-instalar,
.btn-historial,
.btn-login,
.btn-logout,
.btn-nueva-conv-sidebar {
  background: var(--chat-primario-claro);
  color: #ffffff;
  border: none;
  border-radius: .5rem;
  width: 2.5rem;
  height: 2.1rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
}
.btn-instalar:hover, .btn-instalar:focus-visible,
.btn-nueva-conv:hover, .btn-nueva-conv:focus-visible,
.btn-historial:hover, .btn-historial:focus-visible,
.btn-login:hover, .btn-login:focus-visible,
.btn-logout:hover, .btn-logout:focus-visible,
.btn-nueva-conv-sidebar:hover, .btn-nueva-conv-sidebar:focus-visible {
  background: var(--chat-header-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chat-header-fondo) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.20), inset 0 4px 20px rgba(255,255,255,.12);
}

.btn-instalar svg, .btn-historial svg, .btn-logout svg, .btn-nueva-conv-sidebar svg { width: 18px; height: 18px; }

.btn-historial:disabled,
.btn-login:disabled,
.btn-logout:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-login.oculto,
.btn-logout.oculto { display: none !important; }

/* ── Área de mensajes ──────────────────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #EDF0F8;
}

.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 4px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
  min-height: 40px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: #a0a4ae; }

/* ── Burbujas ──────────────────────────────────────────────────────────── */
.mensaje {
  display: flex;
  /* [T-M50] En columna: la hora va DEBAJO de la burbuja, alineada con ella. */
  flex-direction: column;
  max-width: 90%;
}

.mensaje--usuario { align-self: flex-end; }
.mensaje--agente  { align-self: flex-start; }
.mensaje--error   { align-self: flex-start; }

/* [T-M50] Hora de la burbuja: pequeña y discreta, del lado de su burbuja. */
.mensaje__hora {
  margin-top: .3rem;
  padding: 0 .4rem;
  font-size: .72rem;
  line-height: 1;
  color: var(--chat-texto-suave);
  font-variant-numeric: tabular-nums;
}
.mensaje--usuario .mensaje__hora { align-self: flex-end; }
.mensaje--agente  .mensaje__hora { align-self: flex-start; }
/* [T-M52] Marca de un mensaje que el guardián no dejó pasar. */
.mensaje__marca {
  margin-top: .3rem;
  padding: 0 .4rem;
  font-size: .72rem;
  line-height: 1.2;
  color: var(--chat-aviso-color);
}
.mensaje--usuario .mensaje__marca { align-self: flex-end; }
/* Sin esto, en columna la burbuja se estiraría al ancho de la hora cuando el texto es más corto («ok»). */
.mensaje--usuario > .mensaje__texto { align-self: flex-end; }
.mensaje--agente  > .mensaje__texto,
.mensaje--error   > .mensaje__texto { align-self: flex-start; }

.mensaje--error .mensaje__texto {
  background: rgba(185, 71, 71, .08);
  color: var(--chat-aviso-color);
  border-bottom-left-radius: .3rem;
  border: 1px solid rgba(185, 71, 71, .20);
  border-left: 3px solid var(--chat-aviso-color);
  font-style: italic;
}

.mensaje__texto {
  padding: 1rem 1.35rem;
  border-radius: var(--chat-radio);
  font-size: 1rem;
  line-height: 1.65;
  word-break: break-word;
}

.mensaje--usuario .mensaje__texto { white-space: pre-wrap; }
.mensaje--agente  .mensaje__texto { white-space: normal; }

.mensaje--usuario .mensaje__texto {
  background: var(--chat-usuario-fondo);
  color: var(--chat-usuario-texto);
  border-bottom-right-radius: .3rem;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 3px 12px rgba(79,98,141,.21),
    0 1px 3px rgba(0,0,0,.11);
}

.mensaje--agente .mensaje__texto {
  background: var(--chat-agente-fondo);
  color: var(--chat-agente-texto);
  border-bottom-left-radius: .3rem;
  border: 1px solid rgba(0,0,0,.09);
  box-shadow:
    0 6px 20px rgba(79,98,141,.42),
    0 2px 7px rgba(79,98,141,.28),
    0 1px 3px rgba(0,0,0,.18);
}

/* ── Markdown en burbujas del agente ───────────────────────────────────── */
.mensaje--agente .mensaje__texto p        { margin: 0 0 .5em; }
.mensaje--agente .mensaje__texto p:last-child { margin-bottom: 0; }
.mensaje--agente .mensaje__texto ul,
.mensaje--agente .mensaje__texto ol       { margin: .25em 0 .5em 1.25em; padding: 0; }
.mensaje--agente .mensaje__texto li       { margin-bottom: .2em; }
.mensaje--agente .mensaje__texto strong   { font-weight: 600; }
.mensaje--agente .mensaje__texto em       { font-style: italic; }
.mensaje--agente .mensaje__texto h1,
.mensaje--agente .mensaje__texto h2,
.mensaje--agente .mensaje__texto h3       { font-size: 1rem; font-weight: 600; margin: .5em 0 .25em; }
.mensaje--agente .mensaje__texto code     {
  font-family: 'Courier New', monospace;
  font-size: .85em;
  background: var(--chat-code-fondo);
  border-radius: .25rem;
  padding: .1em .35em;
}
.mensaje--agente .mensaje__texto pre      {
  background: var(--chat-code-pre-fondo);
  border-radius: .5rem;
  padding: .65rem .875rem;
  overflow-x: auto;
  margin: .4em 0;
}
.mensaje--agente .mensaje__texto pre code { background: none; padding: 0; }
.mensaje--agente .mensaje__texto blockquote {
  border-left: 3px solid var(--chat-borde);
  margin: .4em 0;
  padding: .2em .75rem;
  color: var(--chat-texto-suave);
}
.mensaje--agente .mensaje__texto a        { color: var(--chat-primario); text-decoration: underline; }
.mensaje--agente .mensaje__texto hr       { border: none; border-top: 1px solid var(--chat-borde); margin: .5em 0; }

/* ── Indicador de escritura ────────────────────────────────────────────── */
.mensaje--agente .mensaje__texto.cargando {
  min-width: 3.5rem;
  min-height: 2.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mensaje--agente .mensaje__texto.cargando::before {
  content: '●●●';
  letter-spacing: 4px;
  font-size: .7rem;
  color: var(--chat-placeholder);
  animation: typing-dots 1.2s ease-in-out infinite;
}

@keyframes typing-dots {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(-3px); }
}

/* ── Pie del chat ──────────────────────────────────────────────────────── */
.chat-footer {
  flex-shrink: 0;
  position: relative;
  border-top: 1px solid var(--chat-borde);
  background: var(--chat-header-fondo);
  /* Reserva la barra de inicio/gestos en PWA instalada (safe-area-inset-bottom): sin esto el
     input queda bajo la franja del sistema y, con body overflow:hidden, sin scroll para verlo. */
  padding: 1.75rem 1rem max(.45rem, env(safe-area-inset-bottom));
  box-shadow: 0 -1px 4px rgba(0,0,0,.07);
}

.chat-ia-label {
  position: absolute;
  bottom: .3rem;
  right: .85rem;
  font-size: .92rem;
  font-weight: 700;
  font-style: italic;
  color: #9ea6b4;
  pointer-events: none;
  user-select: none;
  letter-spacing: .03em;
}

/* ── Formulario ────────────────────────────────────────────────────────── */
.chat-form {
  display: flex;
  gap: .5rem;
  align-items: center;
}

#chat-input {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--chat-borde);
  border-radius: .875rem;
  padding: .625rem .875rem;
  min-height: 5.5rem;
  font-family: var(--chat-fuente);
  font-size: 1.1rem;
  line-height: 1.5;
  background: #ffffff;
  color: #050812;
  color-scheme: light;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 8px var(--chat-sombra-input), inset 0 1px 3px var(--chat-sombra-input-sm);
}

#chat-input:focus {
  border-color: var(--chat-primario);
}

#chat-input::placeholder { color: #8F96B0; }

#chat-input:disabled { opacity: .6; cursor: not-allowed; }

/* ── Wrapper columna de botones ────────────────────────────────────────── */
.chat-form__botones {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex-shrink: 0;
}

/* ── Botón enviar ──────────────────────────────────────────────────────── */
#chat-submit {
  position: relative;
  flex-shrink: 0;
  background: var(--chat-primario-claro);
  color: #ffffff;
  border: none;
  border-radius: .5rem;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, opacity .15s, box-shadow .15s;
  box-shadow: 0 6px 16px rgba(0,0,0,.50), 0 3px 6px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
}

#chat-submit:hover:not(:disabled) {
  background: var(--chat-header-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chat-header-fondo) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.20), inset 0 4px 20px rgba(255,255,255,.12);
}
#chat-submit:disabled { opacity: .55; cursor: not-allowed; }

#chat-submit[aria-busy="true"] svg { opacity: 0; }

#chat-submit[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--chat-spinner-borde);
  border-top-color: var(--chat-blanco);
  border-radius: 50%;
  animation: girar .65s linear infinite;
}

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

/* ── Aviso ─────────────────────────────────────────────────────────────── */
.chat-aviso {
  margin-top: .4rem;
  min-height: 1.1rem;
  font-size: .82rem;
  color: var(--chat-aviso-color);
  line-height: 1.4;
}

/* ── Responsive móvil ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mensaje { max-width: 96%; }
  .chat-header  { padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem; }
  .chat-header-marca { flex: 1; min-width: 0; }
  .chat-header-acciones { flex-shrink: 0; }
  .chat-title   { font-size: .875rem; padding: 0 .5rem 0 0; word-break: break-word; }
  .chat-messages { padding: 1rem .75rem; }
  .chat-footer  { padding: .75rem .75rem max(1rem, env(safe-area-inset-bottom)); }
  .chat-ia-label { font-size: .78rem; }
  /* font-size >=16px (1rem): evita el auto-zoom de iOS Safari al enfocar el campo */
  #chat-input   { font-size: 1rem; min-height: 5.5rem; }
  #chat-submit  { width: 2.6rem; height: 2.6rem; }
  #chat-submit svg { width: 20px; height: 20px; }
  .chat-aviso   { min-height: .35rem; margin-top: .4rem; }
}

/* ── Sidebar de conversaciones (T-M17) ─────────────────────────────────── */
.sidebar-conv {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 320px;
  max-width: 92vw;
  background: var(--chat-header-fondo);
  border-left: 1px solid var(--chat-borde);
  display: flex;
  flex-direction: column;
  z-index: 300;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
  box-shadow: none;
  will-change: transform;
}

.sidebar-conv--abierta {
  transform: translateX(0);
  box-shadow: -6px 0 32px rgba(0,0,0,.6);
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.sidebar-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Cabecera del sidebar ────────────────────────────────────────────────── */
.sidebar-conv__header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .875rem;
  border-bottom: 1px solid var(--chat-borde);
  flex-shrink: 0;
  min-height: 3rem;
}

.sidebar-conv__titulo {
  flex: 1;
  font-size: .75rem;
  font-weight: 700;
  color: var(--chat-texto-suave);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.btn-cerrar-sidebar {
  background: transparent;
  color: var(--chat-texto-suave);
  border: none;
  border-radius: .375rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}

.btn-cerrar-sidebar:hover {
  color: var(--chat-blanco);
  background: rgba(255,255,255,.1);
}

/* ── Lista de conversaciones ─────────────────────────────────────────────── */
.sidebar-conv__lista {
  flex: 1;
  overflow-y: auto;
  padding: .375rem 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--chat-borde) transparent;
}

.sidebar-conv__lista::-webkit-scrollbar { width: 4px; }
.sidebar-conv__lista::-webkit-scrollbar-track { background: transparent; }
.sidebar-conv__lista::-webkit-scrollbar-thumb { background: var(--chat-borde); border-radius: 4px; }

/* Estado vacío / cargando */
.conv-estado {
  padding: 1.5rem 1rem;
  font-size: .8rem;
  color: var(--chat-texto-suave);
  text-align: center;
}

/* ── Item de conversación ────────────────────────────────────────────────── */
.conv-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: .55rem .875rem;
  cursor: pointer;
  transition: background .1s;
  border-left: 2.5px solid transparent;
  gap: .4rem;
  user-select: none;
}

.conv-item:hover {
  background: rgba(255,255,255,.055);
}

.conv-item--activa {
  background: rgba(255,255,255,.08);
  border-left-color: var(--chat-primario);
}

.conv-item__texto {
  flex: 1;
  min-width: 0;
}

.conv-item__titulo {
  font-size: .9rem;
  font-weight: 500;
  color: var(--chat-blanco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.4;
}

.conv-item__fecha {
  font-size: .78rem;
  color: var(--chat-texto-suave);
  display: block;
  line-height: 1.4;
  margin-top: .05rem;
}

/* Inline rename */
.conv-rename-input {
  width: 100%;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--chat-primario);
  border-radius: .25rem;
  color: var(--chat-blanco);
  font-size: 1rem;  /* >=16px: evita el auto-zoom de iOS al enfocar */
  font-family: var(--chat-fuente);
  padding: .1rem .4rem;
  outline: none;
}

/* Pin indicator */
.conv-item__pin {
  flex-shrink: 0;
  color: var(--chat-primario);
  opacity: .9;
  display: flex;
  align-items: center;
}

/* Three-dots menu button */
.conv-item__menu-btn {
  background: none;
  border: none;
  color: var(--chat-texto-suave);
  cursor: pointer;
  padding: .3rem .35rem;
  border-radius: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .12s, color .1s, background .1s;
}

.conv-item:hover .conv-item__menu-btn,
.conv-item--activa .conv-item__menu-btn {
  opacity: 1;
}

.conv-item__menu-btn:hover {
  color: var(--chat-blanco);
  background: rgba(255,255,255,.1);
}

.conv-item__pin svg {
  width: 13px;
  height: 13px;
}

/* Dropdown menu */
.conv-dropdown {
  position: fixed;
  z-index: 400;
  background: var(--chat-header-fondo);
  border: 1px solid var(--chat-borde);
  border-radius: .5rem;
  padding: .3rem 0;
  min-width: 148px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transform: scale(.95);
  transform-origin: top right;
  transition: opacity .1s, transform .1s;
}

.conv-dropdown--visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.conv-dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--chat-blanco);
  font-size: .9rem;
  font-family: var(--chat-fuente);
  padding: .55rem 1rem;
  cursor: pointer;
  transition: background .1s;
}

.conv-dropdown__item:hover {
  background: rgba(255,255,255,.08);
}

.conv-dropdown__item--peligro {
  color: #f87171;
}

.conv-dropdown__item--peligro:hover {
  background: rgba(248,113,113,.08);
}

/* Mobile: always show menu button */
@media (max-width: 640px) {
  .conv-item__menu-btn {
    opacity: 1;
  }
}

/* ── Footer: identidad del usuario autenticado ──────────────────────────── */
.footer-usuario-nombre {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .25rem .7rem;
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1;
}

.footer-usuario-nombre svg { flex-shrink: 0; opacity: .75; }

#footer-usuario-texto {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* ── Login modal ─────────────────────────────────────────────────────────── */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

.login-modal__panel {
  background: var(--chat-header-fondo);
  border: 1px solid var(--chat-borde);
  border-radius: .875rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

.login-modal__header {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

.login-modal__titulo {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--chat-blanco);
  margin: 0;
}

.btn-cerrar-login {
  background: none;
  border: none;
  color: var(--chat-texto-suave);
  cursor: pointer;
  padding: .25rem;
  display: flex;
  align-items: center;
  border-radius: .3rem;
  transition: color .1s;
}

.btn-cerrar-login:hover { color: var(--chat-blanco); }

.login-modal__error {
  background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: .5rem;
  color: #fca5a5;
  font-size: .85rem;
  padding: .6rem .875rem;
  margin-bottom: 1rem;
}

.login-modal__form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.login-modal__label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--chat-texto-suave);
  letter-spacing: .03em;
  margin-bottom: -.25rem;
}

.login-modal__input {
  background: #ffffff;
  border: 1.5px solid #d1d5db;
  border-radius: .625rem;
  color: #050812;
  font-family: var(--chat-fuente);
  font-size: 1rem;  /* >=16px: evita el auto-zoom de iOS al enfocar */
  padding: .6rem .875rem;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
  color-scheme: light;
}

.login-modal__input::placeholder { color: #8F96B0; }
.login-modal__input:focus { border-color: var(--chat-primario); }

.login-modal__input--otp {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-align: center;
}

.login-modal__btn-primary {
  position: relative;
  background: var(--chat-primario-claro);
  color: #fff;
  border: none;
  border-radius: .625rem;
  font-family: var(--chat-fuente);
  font-size: .95rem;
  font-weight: 600;
  padding: .7rem 1rem;
  cursor: pointer;
  transition: background .15s;
  margin-top: .125rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  overflow: hidden;
}

.login-modal__btn-primary:hover { background: var(--chat-header-hover); }
.login-modal__btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.login-modal__btn-primary[aria-busy="true"] { color: transparent; pointer-events: none; }
.login-modal__btn-primary[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--chat-spinner-borde);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .65s linear infinite;
}

.login-modal__btn-link {
  background: none;
  border: none;
  color: var(--chat-texto-suave);
  font-family: var(--chat-fuente);
  font-size: .82rem;
  cursor: pointer;
  padding: 0;
  text-align: center;
  text-decoration: underline;
  transition: color .1s;
}

.login-modal__btn-link:hover { color: var(--chat-blanco); }

.login-modal__otp-info {
  font-size: .85rem;
  color: var(--chat-texto-suave);
  text-align: center;
  margin: 0;
}

.login-modal__otp-info strong { color: var(--chat-blanco); }

/* ── Botón micrófono (T-A14) ─────────────────────────────────────────────── */
.btn-mic {
  flex-shrink: 0;
  background: var(--chat-primario-claro);
  color: #ffffff;
  border: none;
  border-radius: .5rem;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
}
.btn-mic:hover {
  background: var(--chat-header-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chat-header-fondo) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.20), inset 0 4px 20px rgba(255,255,255,.12);
}
.btn-mic:disabled { opacity: .55; cursor: not-allowed; }

/* ── Barra de grabación de audio (T-A14) ─────────────────────────────────── */
.audio-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
}

.audio-bar__centro {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .625rem;
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--chat-borde);
  border-radius: .875rem;
  padding: .5rem .875rem;
  min-height: 2.75rem;
}

.audio-bar__ondas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 1.5rem;
}

.audio-bar__onda {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: var(--chat-primario);
  animation: onda-grabar 1.1s ease-in-out infinite;
  transform-origin: center;
}

.audio-bar__onda:nth-child(1) { height: 6px;  animation-delay: 0s;   }
.audio-bar__onda:nth-child(2) { height: 10px; animation-delay: .12s; }
.audio-bar__onda:nth-child(3) { height: 18px; animation-delay: .24s; }
.audio-bar__onda:nth-child(4) { height: 14px; animation-delay: .36s; }
.audio-bar__onda:nth-child(5) { height: 22px; animation-delay: .06s; }
.audio-bar__onda:nth-child(6) { height: 16px; animation-delay: .18s; }
.audio-bar__onda:nth-child(7) { height: 20px; animation-delay: .30s; }
.audio-bar__onda:nth-child(8) { height: 12px; animation-delay: .42s; }
.audio-bar__onda:nth-child(9) { height: 8px;  animation-delay: .54s; }

.audio-bar--pausada .audio-bar__onda {
  animation-play-state: paused;
  opacity: .40;
}

@keyframes onda-grabar {
  0%, 100% { transform: scaleY(.3); }
  50%       { transform: scaleY(1); }
}

.audio-bar__timer {
  flex-shrink: 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--chat-blanco);
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
  letter-spacing: .01em;
}

.audio-bar__btn {
  flex-shrink: 0;
  border: none;
  border-radius: .5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}

.audio-bar__btn--eliminar {
  background: rgba(185, 71, 71, .20);
  color: var(--chat-aviso-color);
}
.audio-bar__btn--eliminar:hover { background: rgba(185, 71, 71, .40); }

.audio-bar__btn--pausa {
  background: var(--chat-primario-claro);
  color: #ffffff;
}
.audio-bar__btn--pausa:hover { background: var(--chat-header-hover); }

.audio-bar__btn--enviar {
  background: var(--chat-primario);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.audio-bar__btn--enviar:hover {
  background: var(--chat-primario-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chat-primario) 65%, transparent);
}

@media (max-width: 480px) {
  .btn-mic               { width: 2.6rem; height: 2.6rem; }
  .audio-bar__btn        { width: 2.5rem; height: 2.5rem; }
  .audio-bar__centro     { padding: .4rem .625rem; }
}

/* ── Player de audio en burbuja del agente (T-A17) ─────────────────────── */
.audio-player {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  padding: .45rem .6rem;
  background: rgba(0,0,0,.07);
  border-radius: .5rem;
}

.audio-player__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}

.audio-player__btn--play {
  background: var(--chat-primario);
  color: #fff;
}
.audio-player__btn--play:hover { background: var(--chat-primario-hover); }

.audio-player__btn--reinicio {
  background: transparent;
  color: var(--chat-agente-texto);
  opacity: .55;
}
.audio-player__btn--reinicio:hover { opacity: 1; background: rgba(0,0,0,.08); }

.audio-player__progreso-wrap {
  flex: 1;
  min-width: 2rem;
  height: 4px;
  background: rgba(0,0,0,.15);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.audio-player__progreso-barra {
  height: 100%;
  background: var(--chat-primario);
  border-radius: 2px;
  width: 0%;
  transition: width .1s linear;
}

/* Animación indeterminada para grabaciones webm (duration=Infinity) */
@keyframes _audio-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.audio-player__progreso-barra--scan {
  width: 25% !important;
  animation: _audio-scan 1.4s ease-in-out infinite;
  transition: none;
}

.audio-player__tiempo {
  flex-shrink: 0;
  font-size: .7rem;
  opacity: .65;
  min-width: 7.5ch;
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.audio-player__btn--vel {
  flex-shrink: 0;
  min-width: 3.5ch;
  height: auto;
  padding: .15rem .3rem;
  border-radius: .3rem;
  background: transparent;
  color: var(--chat-agente-texto);
  font-size: .7rem;
  font-weight: 700;
  opacity: .6;
  width: auto;
}
.audio-player__btn--vel:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* Player en burbuja del usuario — ajustes para fondo oscuro */
.mensaje--usuario .audio-player {
  background: rgba(255,255,255,.12);
}
.mensaje--usuario .audio-player__progreso-wrap {
  background: rgba(255,255,255,.22);
}
.mensaje--usuario .audio-player__progreso-barra {
  background: rgba(255,255,255,.80);
}
.mensaje--usuario .audio-player__btn--play {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.mensaje--usuario .audio-player__btn--play:hover {
  background: rgba(255,255,255,.36);
}
.mensaje--usuario .audio-player__btn--reinicio {
  color: rgba(255,255,255,.75);
}
.mensaje--usuario .audio-player__btn--reinicio:hover {
  background: rgba(255,255,255,.14);
  opacity: 1;
}
.mensaje--usuario .audio-player__btn--vel {
  color: #fff;
}
.mensaje--usuario .audio-player__btn--vel:hover { background: rgba(255,255,255,.14); }

/* ── Botón llamar en header (T-A07) ─────────────────────────────────────── */
.btn-llamar {
  background: var(--chat-primario-claro);
  color: #ffffff;
  border: none;
  border-radius: .5rem;
  width: 2.5rem;
  height: 2.1rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
}
.btn-llamar:hover, .btn-llamar:focus-visible {
  background: var(--chat-header-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chat-header-fondo) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.20), inset 0 4px 20px rgba(255,255,255,.12);
}
.btn-llamar:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ── Overlay de llamada activa (T-A07) ───────────────────────────────────── */
.llamada-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 8, 18, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.llamada-overlay__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
  width: 100%;
  max-width: 360px;
  padding: 2.5rem 2rem;
}

/* ── Zona superior ───────────────────────────────────────────────────────── */
.llamada-zona-superior {
  text-align: center;
}

.llamada-nombre-agente {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--chat-blanco);
  margin: 0;
}

.llamada-timer {
  font-size: .95rem;
  font-weight: 500;
  color: var(--chat-texto-suave);
  margin: .375rem 0 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ── Zona central: avatar + ondas ────────────────────────────────────────── */
.llamada-zona-central {
  display: flex;
  align-items: center;
  justify-content: center;
}

.llamada-avatar-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.llamada-onda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--chat-primario);
  opacity: 0;
  pointer-events: none;
}

.llamada-avatar-circulo {
  position: relative;
  z-index: 1;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(255,255,255,.25);
  background: var(--chat-header-fondo);
  flex-shrink: 0;
}

.llamada-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

/* ── Animación de ondas ──────────────────────────────────────────────────── */
@keyframes wave-expand {
  0%   { transform: scale(1);   opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Escuchando: lenta y atenuada */
.ondas--escuchando .llamada-onda {
  animation: wave-expand 2.6s ease-out infinite;
  filter: opacity(.35);
}
.ondas--escuchando .llamada-onda--2 { animation-delay: .87s; }
.ondas--escuchando .llamada-onda--3 { animation-delay: 1.74s; }

/* Hablando: rápida y visible */
.ondas--hablando .llamada-onda {
  animation: wave-expand 1.2s ease-out infinite;
  border-color: var(--chat-primario);
  filter: opacity(1);
}
.ondas--hablando .llamada-onda--2 { animation-delay: .4s; }
.ondas--hablando .llamada-onda--3 { animation-delay: .8s; }

/* ── Estado "Conectando…" (T-VOICE-20b) ──────────────────────────────────────
   Desde que se pulsa "llamar" hasta el primer audio del servidor. La clase
   .llamada-overlay--conectando en la raíz del overlay dirige todo: muestra el
   texto y el spinner, oculta el timer y apaga las ondas (evita el pulso
   "escuchando" engañoso mientras aún no hay audio). */
.llamada-estado {
  display: none;
  font-size: .95rem;
  font-weight: 500;
  color: var(--chat-primario);
  margin: .375rem 0 0;
  letter-spacing: .04em;
}
/* Aviso del interruptor de silencio — solo se muestra en iOS (T-IOS-02) */
.llamada-hint {
  font-size: .8rem;
  color: var(--chat-texto-suave);
  margin: .5rem auto 0;   /* auto en los laterales: centra la caja de max-width en el overlay */
  opacity: .75;
  max-width: 260px;
}

.llamada-overlay--conectando .llamada-estado { display: block; }
.llamada-overlay--conectando .llamada-timer  { display: none; }
.llamada-overlay--conectando .llamada-onda   { display: none; }

/* Spinner: anillo girando alrededor del avatar (reutiliza @keyframes girar) */
.llamada-overlay--conectando .llamada-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--chat-primario);
  animation: girar .9s linear infinite;
  z-index: 2;
}

/* ── Zona inferior: botones de acción ────────────────────────────────────── */
.llamada-zona-inferior {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.btn-llamada-accion {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.btn-llamada-accion:hover { background: rgba(255,255,255,.22); }

.btn-llamada-accion--muted {
  background: rgba(255,255,255,.06);
  color: var(--chat-texto-suave);
}
.btn-llamada-accion--muted:hover { background: rgba(255,255,255,.12); }

.btn-llamada-colgar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: #dc2626;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 4px 18px rgba(220,38,38,.55), 0 2px 6px rgba(0,0,0,.4);
}
.btn-llamada-colgar:hover { background: #b91c1c; }