/* Estilos de la parte «chat». Usa las variables de app.css (--cielo, --tinta, --tarjeta…) para que funcionen el tema oscuro y el alto contraste. */

/* ------------------------------------------------------------ cabecera, buscar y zona de mensajes */
.chat { position: relative; }
.chat-cab .chat-cab-nombre { color: var(--tinta); text-decoration: none; }
.chat-cab .chat-cab-nombre:hover { text-decoration: underline; }
.chat-cab .chat-cab-avatar { display: flex; border-radius: 50%; }
.chat-cab .chat-cab-ic { border-radius: 50%; text-decoration: none; }
.chat-cab .titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-tam='muy'] .chat-atras span, :root[data-tam='grande'] .chat-atras span { display: none; }
/* Móvil: «Atrás» solo con la flecha (tiene aria-label) para que quepa el nombre; el subtítulo, en una línea. */
@media (max-width: 480px) {
  .chat-atras span { display: none; }
  .chat-cab { gap: 0.45rem; }
  .chat-cab .crece > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
}
:root[data-tam='muy'] .chat-cab .chat-cab-avatar .avatar, :root[data-tam='muy'] .chat-cab .chat-cab-ic { width: 2.2rem; height: 2.2rem; }

.chat-busca { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; padding: 0.55rem 0.6rem; background: var(--tarjeta); border-bottom: 1px solid var(--linea); }
.chat-busca .buscador { flex: 1 1 12rem; min-width: 0; }
.chat-resultados { max-height: 45%; overflow-y: auto; background: var(--tarjeta); border-bottom: 2px solid var(--linea-fuerte); padding: 0.3rem 0.6rem 0.6rem; }
.chat-resultados .vacio { padding: 1rem; }
.chat-resultados-n { font-weight: 800; padding: 0.4rem 0.2rem; }
.chat-resultado { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; min-height: 2.75rem; text-align: left; background: none; border: none; border-bottom: 1px solid var(--linea); padding: 0.55rem 0.3rem; cursor: pointer; color: var(--tinta); border-radius: 0.5rem; }
.chat-resultado:hover { background: var(--cielo-suave); }
.chat-resultado-txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.chat-resultado mark, .chat-resultados mark { background: var(--canela-suave); color: var(--tinta); font-weight: 800; border-bottom: 2px solid var(--canela); padding: 0 0.05em; }

.chat-zona { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.chat-zona .mensajes { scroll-padding-bottom: 1rem; }
.chat-bajar { position: absolute; right: 0.8rem; bottom: 0.8rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); z-index: 2; }
.chat-mas { align-self: center; }
.chat-mas-caja { display: flex; justify-content: center; }
.chat-nuevos { align-self: stretch; text-align: center; font-weight: 800; font-size: 0.86rem; color: var(--canela-osc); border-top: 2px solid var(--canela); padding-top: 0.25rem; margin-top: 0.3rem; }
.mensajes .vacio { margin: auto; }

/* ------------------------------------------------------------ mensajes */
.msg-col { display: flex; flex-direction: column; min-width: 0; }
.msg.mio .msg-col { align-items: flex-end; }
.msg-avatar { display: flex; border-radius: 50%; flex-shrink: 0; }
.msg-opc {
  flex-shrink: 0; align-self: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: none; background: transparent;
  color: var(--tinta-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.msg-opc:hover { background: var(--gris-suave); color: var(--tinta); }
.msg-opc svg { width: 1.3rem; height: 1.3rem; }
.msg .burbuja { cursor: pointer; }
.msg .burbuja a { cursor: pointer; }
.msg img.foto-msg { height: auto; width: auto; background: var(--gris-suave); }
.msg.resaltado .burbuja { outline: 3px solid var(--canela); outline-offset: 3px; }
.msg-estado { font-weight: 700; display: inline-flex; align-items: center; gap: 0.15rem; }
.msg-estado svg { width: 1em; height: 1em; }
.msg .texto a { overflow-wrap: anywhere; }
.msg.mio .texto a { color: inherit; text-decoration: underline; }
.msg.tipo-audio .burbuja, .msg.tipo-ubicacion .burbuja, .msg.tipo-publicacion .burbuja { padding: 0.55rem; }
.msg.tipo-audio .hora, .msg.tipo-ubicacion .hora, .msg.tipo-publicacion .hora { padding: 0 0.3rem; }
.msg.tipo-publicacion .texto, .msg.tipo-ubicacion .texto { padding: 0.35rem 0.3rem 0; }

/* Cita del mensaje al que se responde. */
.chat-cita {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; width: 100%; min-height: 2.75rem; margin: 0.1rem 0 0.4rem;
  padding: 0.35rem 0.65rem; border: none; border-left: 4px solid var(--cielo); border-radius: 0.6rem; background: var(--tarjeta-2);
  color: var(--tinta); text-align: left; cursor: pointer; font-size: 0.9rem; line-height: 1.3;
}
.chat-cita b { color: var(--cielo-osc); font-size: 0.86rem; }
.chat-cita span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg.mio .chat-cita { background: color-mix(in srgb, var(--sobre-cielo) 18%, transparent); border-left-color: var(--sobre-cielo); color: inherit; }
.msg.mio .chat-cita b { color: inherit; }

/* Nota de voz: botón grande «Escuchar» y la duración bien visible. */
.chat-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; min-width: min(15rem, 60vw); }
.chat-audio-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 3rem; padding: 0 1rem 0 0.8rem;
  border-radius: 999px; border: 2px solid transparent; background: var(--cielo); color: var(--sobre-cielo); font-weight: 800; font-size: 1rem; cursor: pointer;
}
.chat-audio-btn svg { width: 1.4rem; height: 1.4rem; }
.chat-audio-btn:hover { background: var(--cielo-osc); }
.chat-audio-info { flex: 1 1 6rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.chat-audio-barra { display: block; height: 0.5rem; border-radius: 999px; background: var(--linea); overflow: hidden; }
.chat-audio-barra i { display: block; height: 100%; width: 0; background: var(--cielo); border-radius: 999px; }
.chat-audio-tiempo { font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.msg.mio .chat-audio-btn { background: var(--sobre-cielo); color: var(--cielo-osc); }
.msg.mio .chat-audio-btn:hover { opacity: 0.9; }
.msg.mio .chat-audio-barra { background: color-mix(in srgb, var(--sobre-cielo) 35%, transparent); }
.msg.mio .chat-audio-barra i { background: var(--sobre-cielo); }
:root[data-contraste='alto'] .chat-audio-btn { border-color: #fff; }

/* Publicación compartida. */
.chat-post { display: block; width: min(16rem, 62vw); border: 1px solid var(--linea); border-radius: 0.9rem; overflow: hidden; background: var(--tarjeta); color: var(--tinta); text-decoration: none; }
.chat-post:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.chat-post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gris-suave); }
.chat-post-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.55rem 0.7rem 0.6rem; }
.chat-post-autor { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; }
.chat-post-extracto { font-size: 0.9rem; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-post-ver { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 800; color: var(--cielo); font-size: 0.9rem; }
.chat-post-ver svg { width: 1.1rem; height: 1.1rem; }
.chat-post.no { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem; color: var(--tinta-2); font-size: 0.9rem; cursor: default; }
.chat-post.no svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }

/* Ubicación con «Cómo llegar». */
.chat-ubicacion { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.2rem 0; min-width: min(14rem, 58vw); }
.chat-ubicacion .crece { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.chat-ubicacion-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chat-ubicacion-btns .btn { flex: 1 1 auto; }
.msg.mio .chat-ubicacion .icono-caja { background: var(--sobre-cielo); color: var(--cielo-osc); }
.msg.mio .chat-ubicacion-btns .btn { background: var(--sobre-cielo); color: var(--cielo-osc); border-color: var(--sobre-cielo); }
.msg.mio .chat-ubicacion-btns .btn.sec { background: transparent; color: inherit; border-color: var(--sobre-cielo); }

/* Reacciones bajo la burbuja. */
.chat-reacciones { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: -0.3rem; padding: 0 0.4rem; position: relative; }
.chat-reac {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.6rem; justify-content: center;
  border-radius: 999px; border: 2px solid var(--linea); background: var(--tarjeta); color: var(--tinta); font-size: 1.05rem; cursor: pointer; line-height: 1;
}
.chat-reac b { font-size: 0.86rem; }
.chat-reac[aria-pressed='true'] { border-color: var(--cielo); background: var(--cielo-suave); }
.chat-reac:hover { border-color: var(--linea-fuerte); }

/* Diálogo de opciones de un mensaje. */
.chat-op-resumen { background: var(--tarjeta-2); border: 1px solid var(--linea); border-radius: 0.8rem; padding: 0.6rem 0.8rem; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.chat-reac-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: 0.4rem; }
.chat-reac-elegir button {
  min-height: 3.2rem; border-radius: var(--r-btn); border: 2px solid var(--linea); background: var(--tarjeta); font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.chat-reac-elegir button:hover { border-color: var(--linea-fuerte); }
.chat-reac-elegir button[aria-pressed='true'] { border-color: var(--cielo); background: var(--cielo-suave); box-shadow: inset 0 0 0 1px var(--cielo); }

/* ------------------------------------------------------------ pie: escribir, responder y grabar */
.chat-pie-caja { border-top: 1px solid var(--linea); background: var(--tarjeta); }
.chat-pie-caja .chat-pie { border-top: none; }
.chat-pie .btn-icono span { font-size: 0.82rem; }
.chat-pie .chat-grabar, .chat-pie .chat-enviar { flex-direction: column; gap: 0.05rem; min-width: 4.4rem; padding: 0.25rem 0.75rem; font-size: 0.86rem; }
.chat-pie .chat-grabar svg, .chat-pie .chat-enviar svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 640px) {
  .chat-pie .chat-grabar, .chat-pie .chat-enviar { flex-direction: row; gap: 0.4rem; font-size: 0.95rem; padding: 0.45rem 1.05rem; }
}
p.chat-pie { align-items: center; gap: 0.5rem; padding: 0.9rem 0.8rem calc(0.9rem + env(safe-area-inset-bottom)); }
p.chat-pie svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }

.chat-escribiendo { padding: 0.35rem 0.9rem 0; font-size: 0.86rem; color: var(--tinta-2); font-style: italic; font-weight: 700; }
.chat-escribiendo:empty { display: none; }

.chat-respuesta { display: flex; align-items: center; gap: 0.55rem; margin: 0.5rem 0.5rem 0; padding: 0.45rem 0.5rem 0.45rem 0.7rem; background: var(--cielo-suave); border-left: 4px solid var(--cielo); border-radius: 0.7rem; }
.chat-respuesta > svg { width: 1.3rem; height: 1.3rem; color: var(--cielo); flex-shrink: 0; }
.chat-respuesta .crece { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.chat-respuesta b { font-size: 0.9rem; }
.chat-respuesta-txt { font-size: 0.9rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grabando una nota de voz: grande y claro. */
.chat-grabando { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.8rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom)); background: var(--alerta-suave); border-top: 3px solid var(--alerta); }
.chat-grabando-info { display: flex; align-items: center; gap: 0.75rem; }
.chat-grabando-info .crece { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.chat-grabando-info b { font-size: 1.08rem; }
.chat-grabando-punto { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--alerta); flex-shrink: 0; animation: chat-latido 1.2s ease-in-out infinite; }
.chat-grabando[data-modo='enviando'] .chat-grabando-punto { background: var(--cielo); animation: none; }
.chat-grabando[data-modo='fallo'] .chat-grabando-punto { animation: none; }
.chat-grabando[data-modo='enviando'], .chat-grabando[data-modo='fallo'] { background: var(--tarjeta-2); border-top-color: var(--linea-fuerte); }
.chat-grabando-tiempo { font-family: var(--titulos); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.chat-nivel { display: block; height: 0.55rem; border-radius: 999px; background: var(--gris-suave); overflow: hidden; }
.chat-nivel i { display: block; height: 100%; width: 0; background: var(--hoja); border-radius: 999px; transition: width 0.08s linear; }
.chat-grabando[data-modo='enviando'] .chat-nivel, .chat-grabando[data-modo='fallo'] .chat-nivel { display: none; }
.chat-grabando .fila-btn > .btn.grande { flex: 2 1 10rem; }
@keyframes chat-latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.55; } }
:root[data-contraste='alto'] .chat-grabando { border-top-color: #fff; }

/* ------------------------------------------------------------ lista de conversaciones */
.chat-lista-acciones { flex: 0 1 auto; }
.chat-lista-ic { width: 3rem; height: 3rem; border-radius: 50%; }
.conv .chat-lista-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.conv .titulo { min-width: 0; }
.chat-lista-tipo { display: block; font-size: 0.82rem; font-weight: 700; color: var(--tinta-2); line-height: 1.2; }
.chat-lista-mudo { flex-shrink: 0; }
.chat-lista-mudo svg { width: 0.95rem; height: 0.95rem; }
.chat-lista-escribe { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--hoja); font-style: italic; font-weight: 800; }
.chat-lista-escribe svg { width: 1rem; height: 1rem; }
.conv .ultimo { display: block; }

/* ------------------------------------------------------------ diálogos: elegir personas y «Enviar a…» */
.chat-elegidas { font-weight: 800; }
.chat-fallo { color: var(--alerta); font-weight: 800; }
.chat-fallo:empty { display: none; }
.chat-personas, .chat-destinos { max-height: min(22rem, 45dvh); overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--r-btn); padding: 0 0.6rem; }
.chat-personas .vacio, .chat-destinos .vacio, .chat-personas .cargando, .chat-destinos .cargando { padding: 1.2rem 0.5rem; }
.chat-persona { display: flex; align-items: center; gap: 0.7rem; min-height: 3.2rem; padding: 0.45rem 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.chat-persona:last-child, .chat-destino:last-child { border-bottom: none; }
.chat-persona input { width: 1.6rem; height: 1.6rem; flex-shrink: 0; accent-color: var(--cielo); margin: 0; }
.chat-persona .crece, .chat-destino .crece { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.chat-persona b, .chat-destino b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-destino { display: flex; align-items: center; gap: 0.6rem; min-height: 3.4rem; padding: 0.45rem 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.chat-destino .chat-lista-ic, .chat-destino .icono-caja { width: 2.2rem; height: 2.2rem; }
.chat-destino .btn { flex-shrink: 0; }
.chat-enviado { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 800; color: var(--hoja-osc); font-size: 0.9rem; }
.chat-enviado svg { width: 1.1rem; height: 1.1rem; }
.chat-envio-post { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border-radius: var(--r-btn); background: var(--tarjeta-2); border: 1px solid var(--linea); }
.chat-envio-post img { width: 3.6rem; height: 3.6rem; border-radius: 0.6rem; object-fit: cover; flex-shrink: 0; }
.chat-envio-post .crece { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.chat-envio-post .suave { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }