/* ============================================================================
   Facilu Flow — Chat de Sugerencias, Quejas y Reclamos.
   Lo usan DOS pantallas con el mismo lenguaje: el panel de Home (Main.html, lo
   ve el usuario externo/comercial) y la bandeja completa de #!/Chat (Chat.html,
   la ve el operador). Ambas marcan su raiz con `.fg-chat`.
   ----------------------------------------------------------------------------
   Antes esto era el `direct-chat` de AdminLTE: burbujas grises, avatares en
   <img> (dos por mensaje, las dos descargadas), paginacion numerica y — el
   defecto de fondo — el mensaje MAS RECIENTE arriba, porque el SP ordena
   `Fecha DESC` y la vista pintaba ese orden tal cual. Se lee al reves de como
   se lee cualquier chat.

   == La decision central: flex-direction column-reverse en el hilo ==========
   El hilo invierte visualmente el orden del DOM. Eso resuelve TRES cosas de
   una sola vez y sin una linea de JavaScript:

     1. El servidor sigue devolviendo Fecha DESC (no se toca el SP ni el orden
        del array) y el mensaje mas nuevo aparece ABAJO, como debe ser.
     2. El navegador ancla el scroll en el extremo inicial del eje, que aqui es
        el fondo: al abrir la conversacion ya estas en el ultimo mensaje. Sin
        el clasico scrollTop = scrollHeight dentro de un $timeout, que en
        AngularJS siempre llega tarde o pronto de mas.
     3. Al pedir "ver mensajes anteriores" los mensajes viejos se CONCATENAN al
        final del array (el orden DESC continua) y entran por arriba sin mover
        el scroll: se sigue leyendo donde se estaba.

   Por eso el boton "ver anteriores" y el separador de dia van despues en el
   DOM de lo que visualmente los precede. No es un error de orden del HTML.
   ========================================================================= */

/* == 1. CAJA =============================================================== */

.fg-chat .box { border-top-width: 3px; }

.fg-chat .box-header.with-border { padding: 12px 15px; }

.fg-chat .box-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--fg-ink);
}

.fg-chat .box-title > .fa { color: var(--fg-p); }

/* Especificidad deliberada: Chat.html tambien lleva `fg-listado` en la raiz
   (reutiliza su barra de busqueda y su paginacion) y esa hoja le da padding al
   box-body. Aqui el cuerpo va a ras porque el hilo y la bandeja ponen el suyo. */
.fg-chat .fg-chat-panel .box-body { padding: 0; }

/* Subtitulo de la cabecera: con quien se habla, o el encuadre para el usuario
   externo ("nuestro equipo responde por aqui"). */
.fg-chat .fg-chat-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--fg-muted);
}

/* == 2. HILO DE MENSAJES =================================================== */

.fg-chat .fg-chat-hilo {
    display: flex;
    flex-direction: column-reverse; /* ver cabecera del archivo */
    align-items: stretch;
    gap: 7px;
    height: 420px;
    padding: 14px 16px;
    overflow-y: auto;
    overscroll-behavior: contain; /* no arrastrar el scroll de la pagina */
    background-color: var(--fg-soft);
    border-bottom: 1px solid var(--fg-line);
}

/* Barra de scroll discreta: el hilo es una zona densa y la barra por defecto
   de Windows le roba 17px y atencion. */
.fg-chat .fg-chat-hilo::-webkit-scrollbar { width: 8px; }
.fg-chat .fg-chat-hilo::-webkit-scrollbar-track { background: transparent; }

.fg-chat .fg-chat-hilo::-webkit-scrollbar-thumb {
    background-color: #D6CCF0;
    border-radius: 4px;
}

.fg-chat .fg-chat-hilo::-webkit-scrollbar-thumb:hover { background-color: #BDAEE8; }

/* Envoltorio de UN mensaje: contiene el mensaje y, opcionalmente, el separador
   de dia. Tambien en column-reverse para que el separador (ultimo en el DOM)
   quede por ENCIMA del mensaje que introduce. */
.fg-chat .fg-chat-item {
    display: flex;
    flex-direction: column-reverse;
    gap: 7px;
}

.fg-chat .fg-chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 82%;
}

/* Mensajes del usuario (quien escribe la queja): a la izquierda. */
.fg-chat .fg-chat-msg--ellos { align-self: flex-start; }

/* Mensajes de Facilu Flow / el operador: a la derecha, en color de marca. */
.fg-chat .fg-chat-msg--nosotros {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* == 3. AVATAR =============================================================
   Circulo dibujado con CSS. Antes habia DOS <img> por mensaje con ng-show:
   ng-show solo oculta, asi que el navegador descargaba las dos en cada
   mensaje del hilo. Aqui no se pide ni un byte. */

.fg-chat .fg-chat-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

.fg-chat .fg-chat-msg--ellos .fg-chat-avatar {
    background-color: #fff;
    color: var(--fg-pd);
    border: 1px solid var(--fg-line);
}

.fg-chat .fg-chat-msg--nosotros .fg-chat-avatar {
    background: linear-gradient(135deg, var(--fg-p), var(--fg-pl));
    color: #fff;
}

.fg-chat .fg-chat-msg--nosotros .fg-chat-avatar .fa { font-size: 13px; }

/* == 4. BURBUJA ============================================================ */

.fg-chat .fg-chat-burbuja {
    min-width: 0; /* deja que el texto largo encoja en vez de desbordar el flex */
    padding: 8px 12px 7px;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26, 8, 69, 0.06);
}

.fg-chat .fg-chat-msg--ellos .fg-chat-burbuja {
    background-color: #fff;
    border: 1px solid var(--fg-line);
    border-bottom-left-radius: 4px;
}

.fg-chat .fg-chat-msg--nosotros .fg-chat-burbuja {
    background: linear-gradient(135deg, var(--fg-p), #7C4DF0);
    border-bottom-right-radius: 4px;
}

.fg-chat .fg-chat-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 1.3;
}

.fg-chat .fg-chat-msg--nosotros .fg-chat-meta { justify-content: flex-end; }

.fg-chat .fg-chat-autor {
    font-weight: 700;
    color: var(--fg-pd);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}

.fg-chat .fg-chat-hora { color: var(--fg-muted); }

.fg-chat .fg-chat-msg--nosotros .fg-chat-autor { color: rgba(255, 255, 255, 0.95); }
.fg-chat .fg-chat-msg--nosotros .fg-chat-hora { color: rgba(255, 255, 255, 0.72); }

.fg-chat .fg-chat-texto {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-ink);
    /* Los mensajes vienen de un textarea: se respetan los saltos de linea, y
       una palabra larguisima (una URL pegada) parte en vez de estirar la
       burbuja fuera del hilo. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

.fg-chat .fg-chat-msg--nosotros .fg-chat-texto { color: #fff; }

/* == 5. SEPARADOR DE DIA =================================================== */

.fg-chat .fg-chat-dia {
    align-self: center;
    padding: 2px 11px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
    background-color: #fff;
    border: 1px solid var(--fg-line);
    border-radius: 999px;
}

/* == 6. VER ANTERIORES / VACIO ============================================= */

.fg-chat .fg-chat-anteriores {
    align-self: center;
    padding-bottom: 2px;
}

.fg-chat .fg-chat-anteriores .btn {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-pd);
    background-color: #fff;
    border: 1px solid var(--fg-line);
    border-radius: 999px;
    padding: 4px 14px;
}

.fg-chat .fg-chat-anteriores .btn:hover:not([disabled]) {
    background-color: #fff;
    border-color: var(--fg-pl);
}

.fg-chat .fg-chat-vacio {
    margin: auto;
    padding: 12px;
    text-align: center;
    color: var(--fg-muted);
}

.fg-chat .fg-chat-vacio .fa {
    display: block;
    margin-bottom: 10px;
    font-size: 34px;
    color: #CBD5E1;
}

.fg-chat .fg-chat-vacio b {
    display: block;
    font-size: 13.5px;
    color: var(--fg-ink);
}

.fg-chat .fg-chat-vacio span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

/* == 7. REDACTOR =========================================================== */

.fg-chat .fg-chat-redactor {
    padding: 11px 14px 12px;
    background-color: #fff;
}

.fg-chat .fg-chat-redactor textarea.form-control {
    resize: none;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 10px;
    border-color: var(--fg-line);
    box-shadow: none;
}

.fg-chat .fg-chat-redactor textarea.form-control:focus {
    border-color: var(--fg-pl);
    box-shadow: 0 0 0 3px var(--fg-ring);
}

.fg-chat .fg-chat-redactor textarea[disabled] { background-color: var(--fg-soft); }

.fg-chat .fg-chat-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
}

.fg-chat .fg-chat-pista {
    font-size: 11px;
    color: var(--fg-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-chat .fg-chat-pista kbd {
    font-size: 10px;
    padding: 1px 4px;
    background-color: #EEE9FB;
    color: var(--fg-pd);
    border-radius: 3px;
    box-shadow: none;
}

.fg-chat .fg-chat-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Contador de caracteres. Tres estados, porque el limite real es doble: el
   minimo que exige el controlador (10) y el maximo de la columna en base de
   datos (tx_chat.Mensaje es varchar(200), y antes el texto se truncaba sin
   avisar: el aviso decia "Max 200" pero nada lo impedia). */
.fg-chat .fg-chat-contador {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
    white-space: nowrap;
}

.fg-chat .fg-chat-contador.is-corto { color: var(--fg-warning); }
.fg-chat .fg-chat-contador.is-tope { color: var(--fg-danger); font-weight: 700; }

.fg-chat .fg-chat-enviar {
    min-width: 104px;
    font-weight: 600;
    border-radius: 999px;
}

/* == 8. BANDEJA DE CONVERSACIONES (solo #!/Chat) ===========================
   Antes era una tabla con columnas "No Leidos" / "Leidos" y un boton "Ver" por
   fila. Una bandeja de chat se lee como una lista de conversaciones, no como
   un reporte: cada fila es el destino completo y se pulsa entera. */

/* La barra de busqueda de la bandeja se apoya en `.fg-listado .fg-barra`; solo
   necesita respirar un poco dentro del cuerpo a ras. */
.fg-chat .fg-chat-panel .fg-barra { padding: 12px 14px 10px; }
.fg-chat .fg-chat-panel .fg-pie { padding: 10px 14px; }

.fg-chat .fg-chat-bandeja {
    height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--fg-line);
}

.fg-chat .fg-chat-bandeja::-webkit-scrollbar { width: 8px; }
.fg-chat .fg-chat-bandeja::-webkit-scrollbar-track { background: transparent; }

.fg-chat .fg-chat-bandeja::-webkit-scrollbar-thumb {
    background-color: #D6CCF0;
    border-radius: 4px;
}

.fg-chat .fg-chat-conv {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid #F1EDFB;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.fg-chat .fg-chat-conv:hover { background-color: var(--fg-soft); }

.fg-chat .fg-chat-conv:focus-visible {
    outline: 2px solid var(--fg-p);
    outline-offset: -2px;
}

.fg-chat .fg-chat-conv.is-activa {
    background-color: #F2ECFE;
    border-left-color: var(--fg-p);
}

.fg-chat .fg-chat-conv-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fg-pd);
    background-color: #EEE9FB;
}

.fg-chat .fg-chat-conv.is-activa .fg-chat-conv-avatar {
    background: linear-gradient(135deg, var(--fg-p), var(--fg-pl));
    color: #fff;
}

.fg-chat .fg-chat-conv-cuerpo { flex: 1 1 auto; min-width: 0; }

.fg-chat .fg-chat-conv-nombre {
    display: block;   /* son <span>: sin esto el nombre y el conteo salen en la misma linea */
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-chat .fg-chat-conv-dato {
    display: block;
    font-size: 11px;
    color: var(--fg-muted);
}

/* Conversacion con mensajes sin leer: el nombre pesa mas, como en cualquier
   bandeja de correo. */
.fg-chat .fg-chat-conv.tiene-nuevos .fg-chat-conv-nombre {
    font-weight: 700;
    color: var(--fg-pd);
}

.fg-chat .fg-chat-conv-badge {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background-color: var(--fg-danger-btn);
    border-radius: 999px;
}

/* == 9. RESPONSIVE ========================================================= */

@media (max-width: 991px) {
    .fg-chat .fg-chat-hilo { height: 340px; }
    .fg-chat .fg-chat-bandeja { height: 260px; }
    .fg-chat .fg-chat-msg { max-width: 92%; }
}

@media (max-width: 480px) {
    .fg-chat .fg-chat-pista { display: none; }
    .fg-chat .fg-chat-enviar { min-width: 88px; }
}