/* El chat con los pacientes.
 *
 * Los tokens (--kctp-*) son del sistema base y no se redefinen aqui: esta hoja
 * solo pone lo suyo. El vino es de la marca y por eso lo llevan LOS MENSAJES DEL
 * PROFESIONAL: en una pantalla clinica conviene que el lado de la casa sea el
 * que va marcado, y el de la paciente el que descansa.
 *
 * DOS PANELES EN ESCRITORIO, UNO EN TELEFONO. Un panel de 300px al lado de un
 * chat, dentro de 380px de pantalla, no es "responsive": son dos cosas
 * ilegibles. En movil se ve la lista, o se ve el hilo.
 */

.cht {
    display: grid;
    grid-template-columns: 300px 1fr;
    /* Se resta lo que hay arriba y abajo para que el chat ocupe el alto
       disponible y sea EL HILO el que hace scroll, no la pagina. Un chat que
       empuja la pagina deja el cuadro de escribir rozando el borde.

       LOS 176px SE MIDIERON, no se estimaron: en el navegador el chat empieza a
       122px del borde y el marco deja 48px de relleno debajo. Con los 132px que
       habia al principio la pagina desbordaba 38px. */
    height: calc(100vh - 176px);
    min-height: 460px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* ------------------------------------------------------------- la lista */
.cht-lista {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;          /* lo mismo: si no, la lista larga estira la pagina */
    border-right: 1px solid var(--kctp-borde, #ebe1e4);
    background: var(--kctp-crema, #f9f4f5);
}

.cht-lista-tapa {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--kctp-borde, #ebe1e4);
}
.cht-lista-tapa h6 { margin: 0; font-size: 15px; color: var(--kctp-tinto, #260514); }
.cht-lista-tapa small { color: var(--kctp-tenue, #7e6a73); font-size: 12.5px; }

.cht-buscar { position: relative; padding: 10px 12px; }
.cht-buscar i {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
    color: var(--kctp-tenue, #7e6a73); font-size: 13px; pointer-events: none;
}
.cht-buscar input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    font-size: 13.5px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 100px;
    background: #fff;
    color: var(--kctp-tinta, #2a1a21);
}
.cht-buscar input:focus-visible {
    outline: 2px solid var(--kctp-acento, #5b0c2f);
    outline-offset: 1px;
}

.cht-filas { flex: 1; min-height: 0; overflow-y: auto; }

.cht-fila {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kctp-borde, #ebe1e4);
    text-decoration: none;
    color: inherit;
}
.cht-fila:hover  { background: #fff; }
.cht-fila.activa { background: #fff; box-shadow: inset 3px 0 0 var(--kctp-acento, #5b0c2f); }

/* La inicial en un circulo. No es adorno: da un punto de anclaje para el ojo
   al recorrer una lista larga de nombres parecidos. */
.cht-ini {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--kctp-panel, #f5edef);
    color: var(--kctp-acento, #5b0c2f);
    font-weight: 600; font-size: 14px;
}
.cht-fila.activa .cht-ini { background: var(--kctp-acento, #5b0c2f); color: #fff; }

.cht-fila-txt { min-width: 0; flex: 1; }
.cht-fila-txt strong {
    display: block;
    font-size: 14px; font-weight: 500;
    color: var(--kctp-tinta, #2a1a21);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cht-fila-txt small {
    display: block;
    font-size: 12.5px;
    color: var(--kctp-tenue, #7e6a73);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cht-nunca { font-style: italic; opacity: .75; }

/* Lo no leido va en negrita ademas del globo: el globo se ve, pero la negrita
   se ve ANTES, recorriendo la lista de un vistazo. */
.cht-fila.nueva .cht-fila-txt strong,
.cht-fila.nueva .cht-fila-txt small { font-weight: 600; color: var(--kctp-tinta, #2a1a21); }

.cht-globo {
    flex: none;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: grid; place-items: center;
    border-radius: 100px;
    background: var(--kctp-acento, #5b0c2f);
    color: #fff;
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- el hilo */
/* `min-height: 0` NO ES DECORATIVO. Un hijo de flex trae `min-height: auto`,
   que le impide encogerse por debajo de su contenido: sin esto la caja de
   mensajes crece hasta donde llegue el hilo y lo que scrollea es la PAGINA, no
   la conversacion. Se midio en el navegador: 1055px de caja dentro de 588px de
   contenedor. */
.cht-hilo { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }

.cht-elige {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    color: var(--kctp-tenue, #7e6a73);
}
.cht-elige i { font-size: 34px; opacity: .4; }
.cht-elige p { margin: 0; font-size: 14.5px; }

.cht-tapa {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--kctp-borde, #ebe1e4);
    background: var(--kctp-crema, #f9f4f5);
}
.cht-tapa > div { flex: 1; min-width: 0; }
.cht-tapa strong {
    display: block;
    font-size: 15px;
    color: var(--kctp-tinto, #260514);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cht-tapa small { font-size: 12.5px; color: var(--kctp-tenue, #7e6a73); }
.cht-tapa small a { color: var(--kctp-acento, #5b0c2f); }

.cht-volver { display: none; color: var(--kctp-tinta, #2a1a21); font-size: 18px; }

.cht-ficha {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 100px;
    background: #fff;
    color: var(--kctp-tinta, #2a1a21);
    font-size: 13px; text-decoration: none;
    white-space: nowrap;
}
.cht-ficha:hover { border-color: var(--kctp-acento, #5b0c2f); color: var(--kctp-acento, #5b0c2f); }

.cht-mensajes {
    flex: 1;
    min-height: 0;          /* ver la nota de .cht-hilo: sin esto no scrollea */
    overflow-y: auto;
    padding: 18px 16px;
    display: flex; flex-direction: column; gap: 8px;
    /* Un fondo apenas distinto del blanco de las burbujas de la paciente: sin
       el, sus mensajes se pierden contra el papel. */
    background: var(--kctp-fondo, #fbf7f5);
}

/* El corte por caso. El hilo se ve seguido -- eso se pidio-- pero cada mensaje
   sigue viviendo en un expediente, y esta linea es lo que hace visible ese
   trato sin partir la conversacion. */
.cht-corte {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0 2px;
    color: var(--kctp-tenue, #7e6a73);
    font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
}
.cht-corte::before, .cht-corte::after {
    content: ""; flex: 1; height: 1px; background: var(--kctp-borde, #ebe1e4);
}

.cht-msj {
    max-width: min(76%, 520px);
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 14.5px; line-height: 1.5;
    word-wrap: break-word; overflow-wrap: anywhere;
}
.cht-msj p { margin: 0; }
.cht-msj time {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    opacity: .72;
}

.cht-msj.suyo {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-bottom-left-radius: 4px;
    color: var(--kctp-tinta, #2a1a21);
}
.cht-msj.mio {
    align-self: flex-end;
    background: var(--kctp-acento, #5b0c2f);
    border-bottom-right-radius: 4px;
    color: #fff;
}
.cht-msj.mio a { color: #fff; }

/* El pedido formal se distingue de la charla: no es lo mismo "que tal vas" que
   "mandame una foto del pomulo derecho", que ademas deja el caso en espera. */
.cht-pedido {
    border: 1px solid var(--kctp-aviso-bd, #f0dcb4);
    background: var(--kctp-aviso-sw, #fdf5e8);
    color: var(--kctp-tinta, #2a1a21);
}
.cht-pedido.mio { background: var(--kctp-aviso-sw, #fdf5e8); color: var(--kctp-tinta, #2a1a21); }
.cht-etiqueta {
    display: inline-flex; align-items: center; gap: 5px;
    margin-bottom: 4px;
    font-size: 11.5px; font-weight: 600;
    color: var(--kctp-aviso, #8a5a00);
    letter-spacing: .03em; text-transform: uppercase;
}

/* --------------------------------------------------------- los adjuntos */
.cht-foto { display: block; margin: -2px -4px 6px; }
.cht-foto img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
}

.cht-audio { display: flex; align-items: center; gap: 8px; }
.cht-audio audio { height: 34px; max-width: 240px; }
.cht-audio span { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }

.cht-doc {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .05);
    text-decoration: none;
    color: inherit;
}
.cht-msj.mio .cht-doc { background: rgba(255, 255, 255, .16); }
.cht-doc i { font-size: 22px; }
.cht-doc strong { display: block; font-size: 13.5px; font-weight: 500; }
.cht-doc small { font-size: 11.5px; opacity: .75; }

/* --------------------------------------------------------- la barra */
.cht-barra {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--kctp-borde, #ebe1e4);
    background: #fff;
}

.cht-icono {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 50%;
    background: #fff;
    color: var(--kctp-tenue, #7e6a73);
    font-size: 16px;
    cursor: pointer;
}
.cht-icono:hover { border-color: var(--kctp-acento, #5b0c2f); color: var(--kctp-acento, #5b0c2f); }
.cht-icono.grabando {
    background: var(--kctp-alerta, #a5231f);
    border-color: var(--kctp-alerta, #a5231f);
    color: #fff;
}

.cht-campo {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 18px;
    background: #fff;
    padding: 4px 6px;
}
.cht-campo:focus-within { border-color: var(--kctp-acento, #5b0c2f); }
.cht-campo textarea {
    width: 100%;
    border: 0;
    resize: none;
    outline: none;
    padding: 5px 8px;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.45;
    max-height: 130px;
    color: var(--kctp-tinta, #2a1a21);
    background: transparent;
}

.cht-previa, .cht-grabando {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 4px 4px;
    padding: 5px 10px;
    border-radius: 10px;
    background: var(--kctp-panel, #f5edef);
    font-size: 12.5px;
    color: var(--kctp-tinta, #2a1a21);
}
.cht-previa span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-previa button, .cht-grabando button {
    border: 0; background: none; cursor: pointer;
    color: var(--kctp-acento, #5b0c2f);
    font-size: 12.5px; font-weight: 600;
    padding: 2px 4px;
}

.cht-grabando { background: var(--kctp-alerta-sw, #fbeceb); }
.cht-grabando #chtCrono { font-variant-numeric: tabular-nums; font-weight: 600; }
.cht-punto {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--kctp-alerta, #a5231f);
    animation: chtLatir 1.1s ease-in-out infinite;
}
@keyframes chtLatir { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
    .cht-punto { animation: none; }
}

.cht-enviar {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--kctp-acento, #5b0c2f);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.cht-enviar:disabled { opacity: .5; cursor: default; }

.cht-bloqueado {
    display: flex; gap: 10px;
    margin: 12px;
    padding: 13px 15px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 10px;
    background: var(--kctp-crema, #f9f4f5);
    color: var(--kctp-tenue, #7e6a73);
    font-size: 13.5px;
}
.cht-bloqueado i { color: var(--kctp-acento, #5b0c2f); font-size: 16px; }
.cht-bloqueado p { margin: 0; }

.cht-vacio {
    margin: auto;
    padding: 24px 16px;
    text-align: center;
    color: var(--kctp-tenue, #7e6a73);
    font-size: 13.5px;
}

/* -------------------------------------------------------- en el telefono */
@media (max-width: 820px) {
    .cht {
        grid-template-columns: 1fr;
        /* En movil la barra del navegador aparece y desaparece, y con 100vh el
           cuadro de escribir queda tapado. `dvh` mide lo que de verdad se ve. */
        height: calc(100dvh - 118px);
        border-radius: 0;
        border-left: 0; border-right: 0;
    }
    /* Se ve la lista, o se ve el hilo. Nunca los dos. */
    .cht .cht-hilo  { display: none; }
    .cht .cht-lista { border-right: 0; }
    .cht-abierto .cht-lista { display: none; }
    .cht-abierto .cht-hilo  { display: flex; }

    .cht-volver { display: block; }
    .cht-ficha span { display: none; }
    .cht-msj { max-width: 86%; }
}

/* ----------------------------------------------------- en el portal
 *
 * La misma hoja sirve a las dos pantallas. En el portal no hay lista de
 * pacientes -- ella tiene UNA conversacion-- y hay una barra de secciones abajo
 * que le come alto: por eso el chat se mide distinto.
 */
.cht-portal {
    grid-template-columns: 1fr;
    /* Se descuentan la cabecera del portal y la barra de abajo. Con 100vh el
       cuadro de escribir queda debajo de la barra, que es justo donde no se ve
       en un telefono. */
    height: calc(100dvh - 176px);
    min-height: 380px;
}
.cht-portal .cht-lista { display: none; }
.cht-portal .cht-hilo  { display: flex; }
.cht-portal .cht-tapa strong { font-size: 15px; }

.cht-nota {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px auto 0;
    max-width: 640px;
    padding: 0 4px;
    font-size: 12.5px; line-height: 1.5;
    color: var(--kctp-tenue, #7e6a73);
}
.cht-nota i { color: var(--kctp-acento, #5b0c2f); margin-top: 2px; }

@media (max-width: 820px) {
    .cht-portal { height: calc(100dvh - 160px); border: 0; border-radius: 0; }
    /* En el portal el hilo se ensena SIEMPRE: no hay lista a la que volver. */
    .cht-portal .cht-hilo { display: flex; }
    .cht-portal .cht-volver { display: none; }
}