/* Estilos propios de la sección «chat» de la maqueta. */
.contenido.de-chat { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: hidden; padding-bottom: 16px; }
.de-chat > * { min-width: 0; }

.chat { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100%; min-height: 360px; background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.chat.con-hilo { grid-template-columns: 250px minmax(0, 1fr) 320px; }

.chat-lista { border-right: 1px solid var(--borde); overflow-y: auto; padding: 10px 8px; display: grid; gap: 2px; align-content: start; background: #fafbfd; }
.chat-lista h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); padding: 4px 8px 6px; }
.chat-canal { display: grid; gap: 1px; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; min-width: 0; }
.chat-canal:hover { background: var(--marca-suave); }
.chat-canal[aria-current="true"] { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
.chat-canal-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-canal-de { font-size: 12.5px; }
.chat-canal-ultimo { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-cabecera { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--borde); }
.chat-cabecera h2 { font-size: 17px; }
.chat-volver { display: none; }
.chat-mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-dia { text-align: center; font-size: 12.5px; }
.chat-msg { display: grid; gap: 4px; max-width: 78%; }
.chat-msg.aiva { align-self: flex-start; justify-items: start; }
.chat-msg.yo { align-self: flex-end; justify-items: end; }
.burbuja { padding: 8px 12px; border-radius: 14px; background: var(--fondo); border: 1px solid var(--borde); }
.chat-msg.yo .burbuja { background: var(--marca); border-color: var(--marca); color: #fff; }
.chat-quien { display: block; font-size: 12px; color: var(--marca); }
.chat-tarjeta { width: min(460px, 100%); justify-self: stretch; }
.chat-meta { font-size: 12px; display: flex; gap: 10px; align-items: center; }
.chat-hilo-boton { border: 0; background: none; padding: 0; font-size: 12px; color: var(--marca); }
.chat-hilo-boton:hover { text-decoration: underline; }
.chat-msg:not(:hover) .chat-hilo-boton:not(:focus-visible) { opacity: .55; }

.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borde); background: var(--caja); }
.chat-form input[type="text"] { flex: 1; min-width: 0; }

.chat-hilo { border-left: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fafbfd; }
.chat-hilo > header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borde); }
.chat-hilo > header h2 { font-size: 15px; }
.chat-hilo-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-hilo .chat-msg { max-width: 92%; }
.chat-hilo-cuenta { font-size: 12.5px; border-top: 1px solid var(--borde); padding-top: 8px; }

@media (max-width: 860px) {
  .contenido.de-chat { overflow: visible; grid-template-rows: auto; padding-bottom: 150px; }
  .chat, .chat.con-hilo { display: block; height: auto; min-height: 0; border-radius: var(--radio); overflow: visible; }
  .chat-lista { border-right: 0; background: var(--caja); border-radius: var(--radio); }
  .chat.en-conversacion .chat-lista { display: none; }
  .chat:not(.en-conversacion) .chat-conv { display: none; }
  .chat-volver { display: inline-block; padding: 4px 10px; }
  .chat-cabecera { position: sticky; top: 51px; background: var(--caja); z-index: 5; flex-wrap: wrap; }
  .chat-mensajes { overflow: visible; padding: 12px; }
  .chat-msg { max-width: 92%; }
  .chat-form { position: sticky; bottom: 78px; z-index: 5; }
  .chat-hilo { position: fixed; inset: 0; z-index: 44; border-left: 0; background: var(--caja); padding-bottom: 82px; }
}