/* ============================================================
   CHAT DENTRO DEL PANEL
   ============================================================ */
.ch-marco{display:grid;grid-template-columns:330px 1fr;gap:0;height:calc(100vh - 150px);min-height:460px;
  background:var(--bg2);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
/* En el móvil la barra del navegador aparece y desaparece: «dvh» mide el alto
   que de verdad se ve en cada momento. Si el navegador es antiguo y no lo
   entiende, se queda con el «vh» de la línea de arriba. */
@supports (height:100dvh){ .ch-marco{height:calc(100dvh - 150px)} }
/* Las dos columnas del chat pueden encogerse: sin esto, su contenido las
   estira por dentro y empuja la caja de escribir fuera de la pantalla. */
.ch-marco > *{min-height:0;min-width:0}
.ch-lista{border-right:1px solid var(--linea);display:flex;flex-direction:column;min-width:0;min-height:0}
.ch-filtros{display:flex;gap:6px;padding:12px;flex-wrap:wrap;border-bottom:1px solid var(--linea)}
.ch-fil{background:var(--bg3);border:1px solid var(--linea);border-radius:999px;padding:6px 12px;
  font-size:.8rem;white-space:nowrap;cursor:pointer;color:var(--txt2)}
.ch-fil.on{background:linear-gradient(145deg,#FFE7BE,#F7C578 40%,#D9942F);color:#1A1008;border-color:transparent;font-weight:600}
.ch-fil b{background:rgba(0,0,0,.2);border-radius:999px;padding:0 6px;margin-left:5px;font-size:.72rem}
.ch-filas{flex:1 1 auto;min-height:0;overflow-y:auto}
/* buscador del chat + engranaje de ajustes, en la misma línea */
.ch-barra-busca{flex:0 0 auto;display:flex;gap:8px;align-items:center;margin:0 12px 10px}
.ch-barra-busca input{flex:1 1 auto;min-width:0;margin:0}
.ch-barra-busca .btn{flex:0 0 auto;padding:8px 10px}
.ch-barra-busca .btn svg{width:17px;height:17px}
.ch-fila{display:flex;gap:11px;padding:12px;border-bottom:1px solid #221F2E;cursor:pointer}
.ch-fila:hover{background:#1A1823}
.ch-fila.sel{background:rgba(242,180,95,.09);border-left:2px solid var(--oro)}
.ch-fila.nuevo{background:linear-gradient(90deg,rgba(232,73,110,.10),transparent 70%)}
.ch-av-caja{position:relative;flex:0 0 auto}
.ch-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:.9rem;color:#1A1008;background:linear-gradient(145deg,#FFE7BE,#D9942F)}
/* insignia de no-leídos: esquinita arriba-izquierda de la bolita, no en medio de la fila */
.ch-insignia{position:absolute;top:-3px;left:-3px;min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:#E64852;color:#fff;font-size:.66rem;font-weight:800;border:2px solid var(--bg2);
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.ch-cuerpo{flex:1;min-width:0}
.ch-arriba{display:flex;align-items:baseline;gap:7px}
.ch-arriba b{font-size:.89rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-arriba time{margin-left:auto;font-size:.7rem;color:var(--txt2);flex:0 0 auto}
.ch-cuerpo p{margin:3px 0 5px;font-size:.8rem;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ch-hilo-marco{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.ch-cabecera{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.ch-cabecera b{display:block;font-size:.95rem}
.ch-cabecera span{font-size:.78rem;color:var(--txt2)}
.ch-cabecera select,.ch-cabecera .dsp-btn{max-width:170px;margin-left:auto;padding:7px 12px;font-size:.82rem}
.ch-ficha{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;padding:9px 16px;border-bottom:1px solid var(--linea);background:#191722}
.ch-ficha span{font-size:.74rem;color:var(--txt2);background:var(--bg3);border:1px solid var(--linea);
  border-radius:999px;padding:3px 10px}
/* «min-height:0» es la pieza clave: sin ella, el hilo se estira hasta el
   alto de todos sus mensajes en vez de desplazarse por dentro, y empuja la
   caja de escribir fuera de la pantalla. */
.ch-hilo{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.ch-msg{max-width:74%;padding:9px 13px;border-radius:15px;font-size:.88rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.ch-msg.ellos{background:var(--bg3);border:1px solid var(--linea);align-self:flex-start;border-bottom-left-radius:4px}
.ch-msg.yo{background:linear-gradient(145deg,#4A3818,#33260F);border:1px solid rgba(242,180,95,.26);
  align-self:flex-end;border-bottom-right-radius:4px}
.ch-msg.sistema{align-self:center;background:transparent;border:1px dashed var(--linea);color:var(--txt2);font-size:.78rem}
.ch-msg time{display:block;font-size:.64rem;opacity:.5;margin-top:4px}
.ch-img{max-width:230px;border-radius:10px;display:block}
.ch-audio{width:240px;height:36px}
.ch-doc{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:underline}
.ch-doc svg{width:16px;height:16px}

/* La caja de escribir se queda siempre abajo y nunca se encoge */
.ch-escribir{flex:0 0 auto;border-top:1px solid var(--linea);padding:11px 14px;background:var(--bg2)}
.ch-atajos{display:flex;gap:6px;overflow-x:auto;margin-bottom:9px;scrollbar-width:none}
.ch-atajos::-webkit-scrollbar{display:none}
.ch-atajos button{background:var(--bg3);border:1px solid var(--linea);border-radius:999px;padding:5px 11px;
  font-size:.76rem;white-space:nowrap;cursor:pointer;color:var(--txt2)}
.ch-atajos button:hover{color:var(--oro);border-color:var(--oro)}
.ch-caja{display:flex;gap:8px;align-items:flex-end}
.ch-caja textarea{flex:1;min-height:42px;max-height:120px;border-radius:14px;resize:none;padding:11px 14px}
.ch-caja .btn{height:42px;padding:0 14px}

@media(max-width:980px){
  .ch-marco{grid-template-columns:1fr;height:auto}
  .ch-lista{border-right:0;border-bottom:1px solid var(--linea);max-height:320px}
  /* Con tope de alto: el hilo se desplaza por dentro en vez de estirarse sin
     fin, que era lo que dejaba la caja de escribir fuera de la pantalla. */
  .ch-hilo{min-height:360px;max-height:60vh}
}
@supports (height:100dvh){ @media(max-width:980px){ .ch-hilo{max-height:60dvh} } }



/* chip de idioma: la persona escribe en inglés */
.ch-idioma{display:inline-flex;align-items:center;font-size:.6rem;font-weight:800;
  letter-spacing:.04em;color:#5BA0F6;background:#20243A;
  border:2px solid var(--bg2);border-radius:6px;padding:1px 4px}
.ch-av-caja .ch-idioma{position:absolute;bottom:-3px;right:-5px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.ch-idioma--cab{font-size:.68rem;padding:4px 10px;margin-left:8px;position:static;border:1px solid rgba(59,130,246,.4);
  background:rgba(59,130,246,.12);border-radius:7px}
body.claro .ch-idioma{color:#2563EB;background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.35)}