/* Vista Chats: lista a la izquierda, conversacion a la derecha (en celular se alternan) */
.chats { min-height: 0; }
.lista-col { width: 350px; min-width: 350px; display: flex; flex-direction: column; border-right: 1px solid var(--borde); background: var(--panel); min-height: 0; }
.lista-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--suave); gap: 10px; }
.lista-head h2 { font-size: 17px; }
.filtros { display: flex; border-bottom: 1px solid var(--suave); }
.filtros button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 2px; color: var(--gris); font-size: 12px; font-weight: 600; }
.filtros button:hover { color: var(--texto); }
.filtros button.activo { color: var(--cian); border-bottom-color: var(--cian); }
.filtros em { font-style: normal; font-size: 10px; background: var(--suave); border-radius: 8px; padding: 1px 6px; margin-left: 3px; }
.buscador { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--suave); }
.buscador svg { position: absolute; left: 22px; top: 20px; width: 16px; height: 16px; color: var(--gris); }
.buscador input { width: 100%; background: rgba(10, 4, 28, .55); border: 1px solid var(--borde); border-radius: 9px; padding: 9px 12px 9px 34px; }
.buscador input:focus { border-color: var(--cian); outline: 0; }
.lista { flex: 1; overflow-y: auto; min-height: 0; }
.item { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--suave); cursor: pointer; align-items: center; }
.item:hover { background: var(--suave); }
.item.activo { background: rgba(93, 212, 208, .12); }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--violeta-2); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; text-transform: uppercase; }
.item-cuerpo { flex: 1; min-width: 0; }
.item-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.item-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-hora { font-size: 11px; color: var(--gris); flex-shrink: 0; }
.item-previa { color: var(--gris); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.item-meta { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.punto { min-width: 18px; height: 18px; border-radius: 9px; background: var(--cian); color: var(--ink); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.reloj { color: var(--pendiente); display: flex; }

.conv-col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.conv-vacia { margin: auto; color: var(--gris); text-align: center; padding: 20px; }
.conv-vacia svg { width: 46px; height: 46px; opacity: .5; margin-bottom: 10px; }
.conv-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--suave); background: var(--panel); flex-wrap: wrap; }
.conv-volver { display: none; background: none; border: 0; }
.conv-id { flex: 1; min-width: 150px; }
.conv-id strong { display: block; font-size: 15px; }
.conv-id span { font-size: 12px; color: var(--gris); }
.conv-acc { display: flex; gap: 7px; flex-wrap: wrap; }
.msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.burbuja { max-width: min(78%, 520px); padding: 9px 13px; border-radius: 14px; line-height: 1.42; word-break: break-word; white-space: pre-wrap; }
.burbuja small { display: block; font-size: 10.5px; opacity: .72; margin-bottom: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.burbuja time { display: block; font-size: 10px; opacity: .6; margin-top: 4px; text-align: right; }
.burbuja.cliente { align-self: flex-start; background: #2b1861; border-top-left-radius: 4px; }
.burbuja.bot { align-self: flex-end; background: rgba(93, 212, 208, .16); border: 1px solid var(--borde); border-top-right-radius: 4px; }
.burbuja.romina { align-self: flex-end; background: var(--cian); color: var(--ink); border-top-right-radius: 4px; }
.redactar { display: flex; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--suave); background: var(--panel); align-items: flex-end; }
.redactar textarea { flex: 1; resize: none; max-height: 120px; background: rgba(10, 4, 28, .6); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
.redactar textarea:focus { border-color: var(--cian); outline: 0; }
.cerrada { flex: 1; color: var(--gris); font-size: 12.5px; padding: 6px 2px; }

@media (max-width: 820px) {
  .lista-col { width: 100%; min-width: 0; border-right: 0; }
  .conv-col { display: none; }
  .chats.en-conv .lista-col { display: none; }
  .chats.en-conv .conv-col { display: flex; }
  .conv-volver { display: flex; }
  .burbuja { max-width: 88%; }
}