/* Chatbox amplio. Paleta declarada en :root y redefinida para tema oscuro. */
:root {
  color-scheme: light dark;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-alt: #f0f1f4;
  --border: #dcdfe5;
  --text: #16181d;
  --text-muted: #5f6672;
  --accent: #2f5bd7;
  --accent-contrast: #ffffff;
  --inbound: #eef1f7;
  --outbound: #2f5bd7;
  --outbound-text: #ffffff;
  --ok: #1f9254;
  --warn: #b7791f;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(16 18 24 / 6%), 0 8px 24px rgb(16 18 24 / 6%);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #171a20;
    --surface-alt: #1e222a;
    --border: #2b303a;
    --text: #e8eaee;
    --text-muted: #99a1af;
    --accent: #6f95f5;
    --accent-contrast: #0f1115;
    --inbound: #222732;
    --outbound: #3b62d9;
    --outbound-text: #ffffff;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 35%);
  }
}

* {
  box-sizing: border-box;
}

/* El atributo `hidden` solo implica `display: none` por hoja de estilo del
   navegador, de modo que cualquier `display` explícito lo anula. Sin esta regla,
   los contenedores con `display: flex` o `grid` —el acceso, el panel de
   supervisión, el indicador de escritura— seguirían visibles al ocultarlos. */
[hidden] {
  display: none !important;
}

/* La página nunca necesita scroll propio: ocupa exactamente la pantalla y el
   desbordamiento se resuelve dentro de cada contenedor (el hilo, la lista de
   conversaciones, los paneles). Lo único que se despliega más allá de ese
   marco fijo son los elementos de borde —desplegables, el cajón «Equipo», los
   paneles de administración y supervisión—, que ya usan `position: fixed`.
   `100dvh` en vez de `100%`: en el celular, al abrirse el teclado para
   escribir, `100%`/`100vh` no se achican con él en la mayoría de los
   navegadores, y el redactor —anclado abajo de esa caja— queda tapado justo
   cuando hace falta. La altura dinámica sí sigue al teclado; el navegador que
   no la reconozca descarta la línea entera y se queda con el `100%` de más
   arriba. */
html,
body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --- Acceso: registro y login obligatorios antes de chatear --- */
.gate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 24px;
  overflow-y: auto;
}

.gate__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.gate__card h1 {
  margin: 0;
  font-size: 20px;
}

.gate__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.gate__card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.gate__card input {
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.gate__error {
  margin: 0;
  padding: 9px 12px;
  font-size: 13px;
  color: #fff;
  background: #c0392b;
  border-radius: 10px;
}

.gate__switch {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.gate__separator {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

#sso-button {
  display: block;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  text-align: center;
  line-height: 38px;
  text-decoration: none;
}

.link-button {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.gate__card input:focus-visible,
.link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --- Contenedor: tres anchos, de acotado a pantalla completa --- */
.shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--surface);
  transition: max-width 0.25s ease;
}

.shell[data-width="comfortable"] {
  max-width: 900px;
  border-inline: 1px solid var(--border);
}

.shell[data-width="wide"] {
  max-width: 1400px;
  border-inline: 1px solid var(--border);
}

.shell[data-width="full"] {
  max-width: none;
}

/* --- Cabecera --- */
.shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.identity__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--warn);
}

.identity__dot[data-state="online"] {
  background: var(--ok);
}

.identity__dot[data-state="offline"] {
  background: #c0392b;
}

.identity__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.identity__state {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.header-actions {
  display: flex;
  gap: 8px;
}

.ghost-button {
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.ghost-button:hover {
  color: var(--text);
  background: var(--surface-alt);
}

.attach-button {
  flex: none;
  height: 44px;
  padding: 0 14px;
  font-size: 17px;
}

.attach-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Hilo de mensajes --- */
.thread {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bubble {
  max-width: min(72ch, 82%);
  padding: 10px 14px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow);
}

.bubble--inbound {
  align-self: flex-end;
  background: var(--outbound);
  color: var(--outbound-text);
  border-bottom-right-radius: 4px;
}

.bubble--outbound {
  align-self: flex-start;
  background: var(--inbound);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.bubble--system {
  align-self: center;
  max-width: 60ch;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.bubble__meta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.72;
}

.bubble img {
  display: block;
  max-width: 240px;
  max-height: 240px;
  margin-top: 6px;
  border-radius: 10px;
}

/* --- Estado inicial --- */
.empty-state {
  margin: auto;
  max-width: 56ch;
  text-align: center;
  color: var(--text-muted);
}

.empty-state h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--text);
}

.empty-state p {
  margin: 0 0 18px;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.suggestions button,
.quick-replies button {
  padding: 8px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--accent);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.suggestions button:hover,
.quick-replies button:hover {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}

.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 10px;
}

/* --- Indicador de escritura --- */
.typing {
  display: flex;
  gap: 5px;
  padding: 0 26px 10px;
}

.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: bounce 1.2s infinite ease-in-out;
}

.typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typing span {
    animation: none;
  }
  .shell {
    transition: none;
  }
}

/* --- Redactor: crece con el contenido --- */
.composer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.composer__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.composer__input {
  flex: 1;
  /* Crece hasta diez líneas y a partir de ahí desplaza. */
  min-height: 44px;
  max-height: 240px;
  padding: 11px 14px;
  font: inherit;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: none;
  overflow-y: auto;
}

.composer__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.send-button {
  flex: none;
  height: 44px;
  padding: 0 20px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-contrast);
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.send-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.composer__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 2px 0;
  font-size: 11.5px;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .composer__hint,
  .header-actions .ghost-button:first-child {
    display: none;
  }

  .bubble {
    max-width: 90%;
  }
}