/* =========================================================================
   CHAT CON NAÓN
   Consume solo tokens --kbl-*. Radio 0 también en las burbujas: el sistema
   no redondea, y un globo cuadrado se lee como KBL y no como una copia de
   WhatsApp. Sin el verde de WhatsApp: la marca no tiene acento, y el color
   aparece solo cuando significa un estado (alerta = pasó a una persona).
   ========================================================================= */

@layer componentes {

  .chat {
    display: flex;
    flex-direction: column;
    height: 36rem;
    max-height: calc(100svh - var(--kbl-e-8));
    min-height: 26rem;
    background-color: var(--kbl-superficie);
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
    border-radius: var(--kbl-radio);
    color: var(--kbl-tinta);
  }

  .chat__cabeza {
    display: flex;
    align-items: center;
    gap: var(--kbl-e-3);
    padding: var(--kbl-e-3) var(--kbl-e-4);
    border-block-end: var(--kbl-borde) solid var(--kbl-linea);
  }

  .chat__avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    background-color: var(--kbl-tinta);
    color: var(--kbl-fondo);
    font-weight: var(--kbl-peso-titular);
  }

  .chat__quien { display: flex; flex-direction: column; min-width: 0; }
  .chat__nombre { font-weight: var(--kbl-peso-titular); line-height: var(--kbl-lh-16); }
  .chat__estado {
    color: var(--kbl-texto-2);
    font-size: var(--kbl-t-12);
    line-height: var(--kbl-lh-12);
  }

  .chat__contador {
    margin-inline-start: auto;
    padding: var(--kbl-e-1) var(--kbl-e-2);
    border: var(--kbl-borde) solid var(--kbl-info);
    color: var(--kbl-info);
    font-size: var(--kbl-t-12);
    line-height: var(--kbl-lh-12);
    white-space: nowrap;
  }

  .chat__registro {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--kbl-e-3);
    padding: var(--kbl-e-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
  }

  .chat__registro:focus-visible { outline-offset: -3px; }

  .burbuja {
    max-width: 88%;
    padding: var(--kbl-e-3) var(--kbl-e-4);
    font-size: var(--kbl-t-14);
    line-height: var(--kbl-lh-14);
    white-space: pre-wrap;
    animation: burbuja-entra var(--kbl-dur-paso) var(--kbl-ease-corte) both;
  }

  .burbuja--agente {
    align-self: flex-start;
    background-color: var(--kbl-superficie-2);
  }

  .burbuja--cliente {
    align-self: flex-end;
    background-color: var(--kbl-tinta);
    color: var(--kbl-fondo);
  }

  /* Cuánto costó cada respuesta, al pie: la regla de menos mensajes se ve. */
  .burbuja__meta {
    display: block;
    margin-block-start: var(--kbl-e-2);
    color: var(--kbl-texto-3);
    font-size: var(--kbl-t-12);
    line-height: var(--kbl-lh-12);
    white-space: normal;
  }

  /* Lo que pasa por detrás: el aviso al encargado. Color de alerta porque
     significa exactamente eso: necesita a una persona. */
  .aviso-encargado {
    align-self: stretch;
    padding: var(--kbl-e-3) var(--kbl-e-4);
    border-inline-start: 3px solid var(--kbl-alerta);
    background-color: var(--kbl-fondo);
    font-size: var(--kbl-t-12);
    line-height: var(--kbl-lh-16);
    color: var(--kbl-texto-2);
    animation: burbuja-entra var(--kbl-dur-paso) var(--kbl-ease-corte) both;
  }

  .aviso-encargado strong { display: block; color: var(--kbl-alerta); }

  .aviso-encargado--corte { border-inline-start-color: var(--kbl-error); }
  .aviso-encargado--corte strong { color: var(--kbl-error); }

  .chat__nota {
    align-self: center;
    max-width: 30ch;
    color: var(--kbl-texto-3);
    font-size: var(--kbl-t-12);
    line-height: var(--kbl-lh-16);
    text-align: center;
  }

  .escribiendo {
    align-self: flex-start;
    display: inline-flex;
    gap: 5px;
    padding: var(--kbl-e-3) var(--kbl-e-4);
    background-color: var(--kbl-superficie-2);
  }

  .escribiendo span {
    width: 6px;
    height: 6px;
    background-color: var(--kbl-texto-2);
    animation: punto 1.1s var(--kbl-ease-corte) infinite;
  }
  .escribiendo span:nth-child(2) { animation-delay: 0.15s; }
  .escribiendo span:nth-child(3) { animation-delay: 0.3s; }

  .chat__sugerencias {
    display: flex;
    gap: var(--kbl-e-2);
    padding: var(--kbl-e-3) var(--kbl-e-4);
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chat__chip {
    flex: none;
    min-height: 36px;
    padding: var(--kbl-e-1) var(--kbl-e-3);
    border: var(--kbl-borde) solid var(--kbl-linea-fuerte);
    border-radius: var(--kbl-radio);
    background-color: transparent;
    color: var(--kbl-tinta);
    font-size: var(--kbl-t-14);
    line-height: var(--kbl-lh-14);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--kbl-dur-corte) var(--kbl-ease-corte);
  }

  .chat__chip:hover { background-color: var(--kbl-superficie-2); }

  .chat__redactar {
    display: flex;
    border-block-start: var(--kbl-borde) solid var(--kbl-linea);
  }

  .chat__entrada {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    padding: var(--kbl-e-3) var(--kbl-e-4);
    border: 0;
    background-color: transparent;
    color: var(--kbl-tinta);
    font: inherit;
    font-size: var(--kbl-t-16);
  }

  .chat__entrada::placeholder { color: var(--kbl-texto-3); }
  .chat__entrada:focus-visible { outline-offset: -3px; }

  .chat__enviar {
    display: grid;
    place-items: center;
    width: 52px;
    flex: none;
    border: 0;
    border-radius: var(--kbl-radio);
    background-color: var(--kbl-interactivo);
    color: var(--kbl-fondo);
    cursor: pointer;
  }

  .chat__enviar svg { width: 20px; height: 20px; }
  .chat__enviar:disabled, .chat__entrada:disabled { cursor: default; opacity: 0.55; }

  @keyframes burbuja-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes punto {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
  }
}