/*
  Estilos de ChatAmigos. "Mobile first": las reglas base son para el celular y
  al final hay un @media que ajusta un poco para pantallas grandes.
*/

/* ---------- Colores ----------
   Todos los colores viven en variables. Para el modo oscuro solo cambiamos las
   variables, no hay que repetir cada regla. */
:root {
  color-scheme: light dark; /* los controles nativos (inputs, scroll) también se adaptan */
  --accent: #0f766e;          /* verde azulado (teal) */
  --accent-strong: #115e59;
  --on-accent: #ffffff;
  --bg: #f5f7f7;
  --surface: #ffffff;
  --text: #111b21;
  --muted: #5f6b70;
  --border: #e3e8e8;
  --danger: #c62828;
  --topbar-bg: var(--accent);
  --topbar-text: #ffffff;
  --bubble-mine: #d4f3ee;     /* burbuja de mis mensajes: verde azulado muy claro */
  --online: #22c55e;          /* puntito de "en línea" */
  --read: #1d9bf0;            /* doble check de "leído" */
}

/* El sistema operativo avisa si el usuario usa modo oscuro; nos adaptamos solos. */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --on-accent: #0b1418;
    --bg: #0b1418;
    --surface: #111b21;
    --text: #e9edef;
    --muted: #8a9aa2;
    --border: #22313a;
    --danger: #ef9a9a;
    --topbar-bg: #111b21;
    --topbar-text: #e9edef;
    --bubble-mine: #134e4a;
    --online: #4ade80;
    --read: #53bdeb;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; } /* el ancho incluye padding y borde: más fácil de calcular */

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; /* 16px o más evita que iPhone haga zoom al tocar un input */
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent; /* quita el recuadro azul al tocar en Android */
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* El atributo hidden debe ganar siempre, aunque otra regla ponga display:flex. */
[hidden] { display: none !important; }

.muted { color: var(--muted); }

/* ---------- Estructura de cada pantalla ---------- */
.screen {
  display: flex;
  flex-direction: column;
  /* dvh = alto real visible en el celular (sin contar la barra del navegador). */
  min-height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
}

.topbar {
  position: sticky; /* se queda arriba al hacer scroll */
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  /* env(safe-area-inset-top): espacio para el notch / barra de estado del iPhone. */
  padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px;
  background: var(--topbar-bg);
  color: var(--topbar-text);
}
.topbar:has(> [data-back]) { padding-left: 4px; }

.topbar-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* "Nombre muy lar…" en vez de romper la barra */
}
.topbar-text { flex: 1; min-width: 0; }
.topbar-sub { margin: 0; font-size: 0.85rem; opacity: 0.8; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;  /* 44px: tamaño mínimo cómodo para tocar con el dedo */
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}
.icon-btn:active { background: rgb(255 255 255 / 0.15); }

.content { flex: 1; }

/* ---------- Listas (chats y usuarios) ---------- */
.list { list-style: none; margin: 0; padding: 0; }

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
}
.list-item:active { background: var(--bg); }

.item-main { flex: 1; min-width: 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.item-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { color: var(--muted); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-time { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }
.item-time.unread { color: var(--accent); font-weight: 600; }

.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ---------- Avatar con la inicial ---------- */
.avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.25rem;
  color: #ffffff;
  /* El color de fondo lo pone app.js según el nombre (--hue), así cada amigo
     tiene siempre el mismo color. */
  background: hsl(var(--hue, 175) 45% 42%);
  user-select: none;
}
.avatar.small { width: 38px; height: 38px; font-size: 1rem; }
.avatar.large { width: 112px; height: 112px; font-size: 2.6rem; }
/* La foto de perfil cubre el círculo entero, encima de la inicial. No usamos
   overflow: hidden en .avatar porque recortaría el puntito verde de "en línea". */
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Puntito verde de "en línea". ::after crea un elemento "falso" dentro del
   avatar, así no hay que añadir nada al HTML. position: relative en el avatar
   hace que el puntito se coloque respecto al avatar y no a la página. */
.avatar { position: relative; }
.avatar.online::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--online);
  /* Un borde del color del fondo "separa" el punto del avatar. */
  box-shadow: 0 0 0 2px var(--surface);
}
.avatar.small.online::after { width: 11px; height: 11px; }
.topbar .avatar.online::after { box-shadow: 0 0 0 2px var(--topbar-bg); }

/* ---------- Estados vacíos ---------- */
.empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty p { margin: 4px 0; }

/* ---------- Botón flotante (+) ---------- */
.fab {
  position: fixed;
  /* Se calcula para quedar dentro de la columna central también en pantallas anchas. */
  right: max(20px, calc((100vw - 720px) / 2 + 20px));
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
  text-decoration: none;
}
.fab:active { transform: scale(0.95); }

/* ---------- Buscador ---------- */
.search {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.18);
  color: var(--topbar-text);
  outline: none;
}
.search::placeholder { color: var(--topbar-text); opacity: 0.75; }
@media (prefers-color-scheme: dark) {
  .search { background: var(--bg); }
}

/* ---------- Pantalla de entrada ---------- */
#screen-auth { justify-content: center; background: var(--bg); }

.auth {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}

.brand { text-align: center; margin-bottom: 24px; }
.brand h1 { margin: 12px 0 2px; font-size: 1.6rem; }
.brand p { margin: 0; }
.brand-logo {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--on-accent);
}

.tabs {
  display: flex;
  padding: 4px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--border);
}
.tab {
  flex: 1;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.form label .muted { font-weight: 400; }
.form input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 400;
}
.form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
/* Campo de contraseña con el ojo 👁 dentro, a la derecha. */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; min-width: 0; padding-right: 48px; }
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;  /* tan alto y ancho como el campo: fácil de tocar con el dedo */
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--muted);
}
.password-toggle[aria-pressed="true"] { color: var(--accent); }
.hint { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.form-error { margin: 0; min-height: 1.2em; color: var(--danger); font-size: 0.9rem; }
.form-error:empty { display: none; }
/* Botón con aspecto de enlace ("¿Olvidaste tu contraseña?"). */
.link-btn {
  align-self: center;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.9rem;
}
.reset-help { margin: 0; font-size: 0.9rem; color: var(--muted); }
/* Casilla con su texto al lado (y no debajo, como el resto de campos). */
.form label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.form label.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.check a, .legal-links a { color: var(--accent); }
/* Separada del resto de Mi cuenta para que no se pulse por error. */
.delete-account { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.delete-account h2 { color: var(--danger); }
.chat-deleted-note {
  margin: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
}
.legal-links { margin: 16px 0 0; text-align: center; font-size: 0.85rem; color: var(--muted); }
.form-ok { margin: 0; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
.form-ok:empty { display: none; }

/* Mi cuenta */
.account { padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); max-width: 440px; width: 100%; margin: 0 auto; }
.account-who { margin: 0 0 20px; text-align: center; }
.account-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 8px 0 12px;
}
.account-photo-actions { display: flex; gap: 8px; }

/* Barra de espacio usado. */
.storage { margin: -8px 0 24px; }
.storage-text { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.storage-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
#storage-fill { width: 0; height: 100%; background: var(--accent); transition: width 0.3s; }
#storage-fill.almost-full { background: var(--danger); }
.account h2 { margin: 0; font-size: 1.05rem; }

.btn-primary {
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn-primary:active { background: var(--accent-strong); }
.btn-primary:disabled { opacity: 0.6; }
/* Botón rojo para lo que no se puede deshacer (borrar la cuenta). */
.btn-primary.btn-danger { background: var(--danger); color: var(--on-accent); }
.btn-primary.btn-danger:active { filter: brightness(0.9); }

/* ---------- Conversación ---------- */

/* La pantalla del chat ocupa exactamente el alto visible: la barra arriba, la caja
   de texto abajo y en medio la zona de mensajes, que es la única que hace scroll. */
#screen-chat { height: 100dvh; min-height: 0; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 12px;
  background: var(--bg);
  /* Evita que al llegar al tope el scroll "arrastre" toda la página en el celular. */
  overscroll-behavior: contain;
  /* Al deslizar una burbuja mía hacia la derecha se sale un poco: que no aparezca
     una barra de scroll horizontal. */
  overflow-x: hidden;
}

.message-list { display: flex; flex-direction: column; gap: 2px; }

.btn-older {
  display: block;
  margin: 4px auto 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--accent);
  font-size: 0.85rem;
}

/* Separador de día: "Hoy", "Ayer", "lunes, 28 de septiembre". */
.day {
  align-self: center;
  margin: 10px 0 6px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08);
}

.bubble {
  max-width: 82%;
  padding: 6px 10px 5px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08);
  align-self: flex-start;       /* los del amigo, a la izquierda */
  position: relative;           /* para colocar el botón ↩ al lado */
  /* transform: para que la burbuja vuelva suave a su sitio tras deslizarla. */
  transition: opacity 0.2s, transform 0.2s;
  /* pan-y: el navegador solo se encarga del scroll vertical; los movimientos
     horizontales nos llegan a nosotros (deslizar para responder). */
  touch-action: pan-y;
}
/* Si el mensaje anterior es de otra persona, dejamos un poco más de aire. */
.bubble.first { margin-top: 6px; }

.bubble.mine {
  align-self: flex-end;         /* los míos, a la derecha */
  background: var(--bubble-mine);
}

/* Envío optimista: se ve semitransparente hasta que el servidor confirma. */
.bubble.pending { opacity: 0.55; }
.bubble.failed { outline: 1px solid var(--danger); cursor: pointer; }

.bubble-text {
  /* pre-wrap respeta los saltos de línea que escribió la persona;
     overflow-wrap parte palabras o enlaces larguísimos para que no se salgan. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble-meta {
  display: block;
  text-align: right;
  margin-top: 1px;
  font-size: 0.7rem;
  color: var(--muted);
}
.bubble.failed .bubble-meta { color: var(--danger); }

/* ✓ gris = enviado, ✓✓ azul = leído. El SVG usa "currentColor", o sea, el
   color de texto de este span; por eso basta con cambiar "color". */
.ticks {
  display: inline-block;
  margin-left: 4px;
  vertical-align: -1px;
  color: var(--muted);
}
.ticks.read { color: var(--read); }

/* ---------- Fotos en el chat ---------- */
.bubble.has-image { padding: 4px 4px 5px; }
.bubble.has-image .bubble-meta { padding-right: 6px; }

.bubble-image {
  display: block;
  /* Ocupa como máximo el ancho de la burbuja y 320px de alto, manteniendo la
     proporción. "cover": si la foto es muy estrecha y tiene que llegar al tamaño
     mínimo, se recorta un poco en vez de deformarse. */
  max-width: 100%;
  max-height: 320px;
  min-width: 120px;
  min-height: 80px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--border); /* se ve un recuadro gris mientras carga */
  cursor: zoom-in;
}
.bubble.pending .bubble-image,
.bubble.failed .bubble-image { cursor: default; }
.bubble.has-image .bubble-text { padding: 4px 6px 0; }

.photo-btn { color: var(--muted); flex-shrink: 0; }

/* ---------- Videos en el chat ---------- */
/* position: relative para poder colocar el ▶ y el porcentaje ENCIMA de la miniatura. */
.bubble-video { position: relative; cursor: pointer; }
.bubble-video .bubble-image { pointer-events: none; } /* el clic lo recibe la caja entera */

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centrado exacto, mida lo que mida la miniatura */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 4px; /* el triángulo "pesa" a la izquierda: lo compensamos */
  background: rgb(0 0 0 / 0.5);
  color: #ffffff;
  font-size: 1.3rem;
}

.video-progress {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgb(0 0 0 / 0.6);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------- Mensajes de voz ---------- */

/* Reproductor en la burbuja: [▶] ━━━━━━━ 0:12 */
.bubble.has-audio { width: 260px; max-width: 82%; }
.bubble-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.audio-play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
}
/* La barra es una caja alta (fácil de tocar con el dedo) con una línea fina
   dibujada en medio (::before); .audio-fill es la parte ya escuchada. */
.audio-track {
  position: relative;
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.audio-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: rgb(127 127 127 / 0.35);
}
.audio-fill {
  position: relative; /* por encima de la línea gris */
  width: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.audio-time {
  min-width: 34px;
  text-align: right;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums; /* todos los números igual de anchos: el texto no "baila" */
}

/* Barra de grabación (sustituye a la caja de texto mientras grabas). */
.recorder {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
}
#rec-cancel { color: var(--danger); }
.rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }
.rec-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-hint { flex: 1; color: var(--muted); font-size: 0.9rem; }

/* ---------- Responder a un mensaje ---------- */

/* Cita: dentro de una burbuja (respuesta) o en la barra "Respondiendo a…". */
.quote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 5px 8px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: rgb(0 0 0 / 0.05);
  cursor: pointer;
}
.quote-mine { border-left-color: var(--read); }
.quote-body {
  flex: 1;
  min-width: 0; /* sin esto, un texto largo no se recorta y ensancha la cita */
  display: flex;
  flex-direction: column;
}
.quote-name { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.quote-mine .quote-name { color: var(--read); }
.quote-text {
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
  /* Como mucho 2 líneas; si hay más, termina en "…". */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.quote-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
}
.bubble.has-image .quote { margin: 0 0 4px; }

@media (prefers-color-scheme: dark) {
  .quote { background: rgb(255 255 255 / 0.06); }
}

/* Botón ↩ al lado de la burbuja: a la derecha de las de tu amigo y a la
   izquierda de las tuyas. Invisible hasta pasar el ratón por encima. */
/* Botones ↩ y ⋮ al lado de la burbuja: a la derecha de las de tu amigo y a la
   izquierda de las tuyas. Invisibles hasta pasar el ratón por encima. */
.bubble-actions {
  position: absolute;
  top: 50%;
  left: 100%; /* justo después del borde de la burbuja: sin hueco, así el ratón no "se cae" */
  transform: translateY(-50%);
  display: flex;
  opacity: 0;
  transition: opacity 0.15s;
}
.bubble.mine .bubble-actions { left: auto; right: 100%; flex-direction: row-reverse; }
.bubble:hover .bubble-actions,
.bubble-actions:focus-within { opacity: 1; }
.reply-btn,
.more-btn {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.2rem;
}
/* En pantallas táctiles no hay "pasar el ratón": se responde deslizando y el
   menú se abre manteniendo pulsado. Además, que mantener pulsado no seleccione
   el texto ni saque el menú del sistema (para copiar está "Copiar texto"). */
@media (hover: none) {
  .bubble-actions { display: none; }
  .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* Mensaje eliminado. */
.bubble.deleted .bubble-text { font-style: italic; color: var(--muted); }

/* Menú que sale desde abajo ("hoja"), con fondo oscuro detrás. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 9; /* por encima del chat, por debajo del visor */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(0 0 0 / 0.4);
}
.sheet-panel {
  width: 100%;
  max-width: 480px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
/* Las opciones de un menú (no los botones de un formulario dentro de una hoja). */
.sheet-panel [role="menuitem"] {
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-size: 1rem;
  text-align: left;
  padding: 0 16px;
}
.sheet-panel [role="menuitem"]:hover { background: var(--bg); }
.sheet-panel [role="menuitem"].danger { color: var(--danger); }
.sheet-panel [data-action="cancel"] { color: var(--muted); }
/* Hoja con un formulario (reportar): más aire, y la caja de texto como los demás campos. */
.sheet-panel.form { padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); }
.sheet-title { margin: 0; font-size: 1.1rem; }
.form textarea {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 400;
  resize: vertical;
}
.form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
/* Nota en lugar de la caja de texto, con el botón "Desbloquear" al lado. */
.chat-deleted-note .link-btn { padding: 4px 8px; font-size: 0.9rem; font-weight: 600; }

/* Mientras arrastras la burbuja, sigue al dedo sin transición (si no, va "con retraso"). */
.bubble.swiping { transition: none; }
/* Flecha que aparece a la izquierda al deslizar; se marca al llegar a la distancia. */
.bubble.swiping::before {
  content: '↩';
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.2rem;
  opacity: 0.4;
}
.bubble.swipe-ready::before { opacity: 1; color: var(--accent); }

/* Al saltar al mensaje original desde una cita, se resalta un momento. */
.bubble.highlight { animation: highlight 1.6s ease-out; }
@keyframes highlight {
  from { box-shadow: 0 0 0 3px var(--accent); }
  to { box-shadow: 0 1px 1px rgb(0 0 0 / 0.08); }
}

/* Barra "Respondiendo a…" encima de la caja de texto. */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 0 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.reply-preview { flex: 1; min-width: 0; }
.reply-preview .quote { margin: 0; background: var(--surface); cursor: default; }
.reply-bar .icon-btn { color: var(--muted); flex-shrink: 0; }
/* Con la barra visible, la caja de texto no necesita su propia línea de arriba. */
.reply-bar:not([hidden]) + .composer { border-top: 0; }

/* ---------- Visor a pantalla completa ---------- */
.viewer {
  position: fixed;
  inset: 0; /* = top/right/bottom/left: 0 → cubre toda la pantalla */
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.94);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.viewer img,
.viewer video {
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
}
.viewer-close {
  position: absolute;
  z-index: 1; /* por encima del video, que va después en el HTML y lo taparía */
  top: calc(8px + env(safe-area-inset-top));
  right: 8px;
  color: #ffffff;
  background: rgb(0 0 0 / 0.4);
}

/* "escribiendo…" en el encabezado, resaltado. */
.topbar-sub.typing { font-style: italic; opacity: 1; }

/* ---------- Caja para escribir ---------- */
.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.composer textarea {
  flex: 1;
  resize: none;          /* el tamaño lo controla app.js, no el usuario */
  max-height: 140px;     /* unas 6 líneas; a partir de ahí hace scroll por dentro */
  padding: 11px 16px;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  line-height: 1.35;
  outline: none;
}

.send-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
}
.send-btn:disabled { opacity: 0.5; }

/* ---------- Banner de notificaciones ---------- */
.banner {
  margin: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bubble-mine);
  font-size: 0.92rem;
}
.banner p { margin: 0 0 10px; }
.banner-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-small {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.88rem;
}
.btn-small.secondary { background: transparent; color: var(--accent); }

/* ---------- Sin conexión ---------- */
#screen-offline { justify-content: center; background: var(--bg); }
.offline h1 { margin: 16px 0 4px; font-size: 1.4rem; color: var(--text); }
.offline p { margin-bottom: 24px; }
.offline .btn-primary { padding: 0 32px; }

/* ---------- Pantallas grandes (PC) ---------- */
@media (min-width: 720px) {
  body { background: var(--border); }
  .screen { box-shadow: 0 0 0 1px var(--border); }
  .list-item:hover { background: var(--bg); }
}