/*
   Chat flotante (canales publico y privado). Ver GC/ChatWeb/ y Views/Shared/_ChatFlotante.cshtml.

   Dos cuidados que explican casi todas las decisiones de este archivo:

   1. El widget convive con TRES hojas de estilo distintas: el tema de la landing, AdminLTE +
      Bootstrap 3 adentro del sistema, y flor-dark. Por eso todo esta prefijado con .gc-chat y toda
      propiedad que Bootstrap podria pisar (box-sizing, font, line-height, margin de <p>) se declara
      explicita en lugar de heredarse.
   2. Los modales de Bootstrap 3 viven en z-index 1040/1050. El widget va por encima, pero no en el
      techo del entero: si el dia de manana un modal tiene que taparlo, alcanza con 100000.

   Y una tercera, que llego despues: la burbuja SE PUEDE MOVER (QA: tapaba los botones de confirmar
   de varias pantallas, que tambien viven abajo a la derecha). Eso obligo a separar el panel del
   contenedor: el contenedor lleva la posicion que eligio el usuario y el PANEL se ancla solo, fijo
   a la esquina segura. Si el panel siguiera colgado del contenedor, arrastrar la burbuja al borde
   de arriba abriria un panel de 560px de alto fuera de la pantalla.

   Por eso el contenedor no puede llevar `transform`: un ancestro transformado hace que
   `position: fixed` del panel se resuelva contra el, y volveriamos al problema. La posicion se
   mueve con `right`/`bottom` en linea, que es lo que escribe chatFlotante.js.
*/

.gc-chat,
.gc-chat *,
.gc-chat *::before,
.gc-chat *::after {
    box-sizing: border-box;
}

.gc-chat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99990;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;

    /* Paleta clara. La variante oscura solo redefine estas variables (ver .gc-chat--dark). */
    --gc-chat-acento: #f0a30a;
    --gc-chat-acento-texto: #2b2b2b;
    --gc-chat-fondo: #ffffff;
    --gc-chat-fondo-alt: #f4f6f8;
    --gc-chat-texto: #2b2b2b;
    --gc-chat-texto-suave: #6b7280;
    --gc-chat-borde: #e3e7eb;
    --gc-chat-burbuja-usuario: #2b3a4a;
    --gc-chat-burbuja-usuario-texto: #ffffff;
    --gc-chat-sombra: 0 12px 32px rgba(0, 0, 0, .22);
}

.gc-chat--dark {
    --gc-chat-fondo: #23282d;
    --gc-chat-fondo-alt: #1b1f23;
    --gc-chat-texto: #e8eaed;
    --gc-chat-texto-suave: #9aa3ad;
    --gc-chat-borde: #363c42;
    --gc-chat-burbuja-usuario: #f0a30a;
    --gc-chat-burbuja-usuario-texto: #2b2b2b;
    --gc-chat-sombra: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ---------- Burbuja ---------- */

.gc-chat__burbuja {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gc-chat-acento);
    color: var(--gc-chat-acento-texto);
    box-shadow: var(--gc-chat-sombra);
    /* grab y no pointer: es la unica pista visual de que se puede arrastrar. */
    cursor: grab;
    transition: transform .15s ease;
    /* Sin esto, arrastrar en tactil hace scroll de la pagina en vez de mover la burbuja. */
    touch-action: none;
}

.gc-chat__burbuja:hover,
.gc-chat__burbuja:focus {
    transform: scale(1.06);
    outline: none;
}

/*
   Mientras se arrastra: nada de scale ni de transicion. Con la transicion puesta, la burbuja
   persigue al dedo con un retardo de 150ms y se siente rota.
*/
.gc-chat--moviendo .gc-chat__burbuja,
.gc-chat--moviendo .gc-chat__burbuja:hover {
    cursor: grabbing;
    transform: none;
    transition: none;
}

.gc-chat__burbuja svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* El puntito que invita a abrir. Se apaga por JS en cuanto el usuario abre el chat una vez. */
.gc-chat__pulso {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e04b4b;
    border: 2px solid var(--gc-chat-fondo);
}

.gc-chat--abierto .gc-chat__burbuja,
.gc-chat--usado .gc-chat__pulso {
    display: none;
}

/* ---------- Panel ---------- */

/*
   El panel se ancla SOLO, a la esquina segura, y no sigue a la burbuja: la burbuja se mueve a donde
   el usuario quiera (incluido el borde de arriba) y el panel tiene 560px de alto. Ver el encabezado
   del archivo.
*/
.gc-chat__panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
    flex-direction: column;
    width: 380px;
    height: 560px;
    /*
       dvh y no solo vh: en Safari de iPhone (y en Chrome de celular apaisado) 100vh mide la pantalla
       con la barra del navegador ESCONDIDA, asi que con la barra visible el panel queda mas alto que
       lo que se ve y el encabezado —con la X— se va por arriba. La linea con vh queda de respaldo
       para navegadores que no conocen dvh.
    */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    border: 1px solid var(--gc-chat-borde);
    border-radius: 14px;
    background: var(--gc-chat-fondo);
    color: var(--gc-chat-texto);
    box-shadow: var(--gc-chat-sombra);
}

.gc-chat--abierto .gc-chat__panel {
    display: flex;
}

.gc-chat__encabezado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--gc-chat-acento);
    color: var(--gc-chat-acento-texto);
}

.gc-chat__titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.gc-chat__subtitulo {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.2;
    opacity: .85;
}

.gc-chat__encabezado-textos {
    flex: 1 1 auto;
    min-width: 0;
}

.gc-chat__cerrar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.gc-chat__cerrar:hover {
    background: rgba(0, 0, 0, .16);
}

/* ---------- Mensajes ---------- */

.gc-chat__mensajes {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Al llegar al tope de la conversacion, el gesto no sigue scrolleando la pagina de atras. */
    overscroll-behavior: contain;
    padding: 14px;
    background: var(--gc-chat-fondo-alt);
}

.gc-chat__mensaje {
    display: block;
    max-width: 85%;
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 12px;
    /* pre-line: el modelo contesta con saltos de linea y el texto se pinta con textContent. */
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.gc-chat__mensaje--bot {
    background: var(--gc-chat-fondo);
    border: 1px solid var(--gc-chat-borde);
    color: var(--gc-chat-texto);
}

.gc-chat__mensaje--usuario {
    margin-left: auto;
    background: var(--gc-chat-burbuja-usuario);
    color: var(--gc-chat-burbuja-usuario-texto);
    border: 0;
}

.gc-chat__mensaje--error {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #8a1c13;
}

.gc-chat__cta {
    display: inline-block;
    margin: 2px 0 12px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--gc-chat-acento);
    color: var(--gc-chat-acento-texto);
    font-weight: 700;
    text-decoration: none;
}

.gc-chat__cta:hover,
.gc-chat__cta:focus {
    color: var(--gc-chat-acento-texto);
    text-decoration: none;
    filter: brightness(1.06);
}

/* Tres puntitos mientras el asistente piensa. */
.gc-chat__tipeando {
    display: none;
    gap: 4px;
    align-items: center;
    padding: 0 14px 10px;
}

.gc-chat--esperando .gc-chat__tipeando {
    display: flex;
}

.gc-chat__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gc-chat-texto-suave);
    animation: gc-chat-latido 1.1s infinite ease-in-out;
}

.gc-chat__punto:nth-child(2) {
    animation-delay: .16s;
}

.gc-chat__punto:nth-child(3) {
    animation-delay: .32s;
}

@keyframes gc-chat-latido {
    0%, 60%, 100% { opacity: .28; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- Entrada ---------- */

.gc-chat__entrada {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--gc-chat-borde);
    background: var(--gc-chat-fondo);
}

.gc-chat__texto {
    flex: 1 1 auto;
    max-height: 96px;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid var(--gc-chat-borde);
    border-radius: 10px;
    background: var(--gc-chat-fondo);
    color: var(--gc-chat-texto);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
}

.gc-chat__texto:focus {
    outline: none;
    border-color: var(--gc-chat-acento);
}

.gc-chat__enviar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--gc-chat-acento);
    color: var(--gc-chat-acento-texto);
    cursor: pointer;
}

.gc-chat__enviar[disabled] {
    opacity: .5;
    cursor: default;
}

.gc-chat__enviar svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.gc-chat__pie {
    margin: 0;
    padding: 0 12px 10px;
    background: var(--gc-chat-fondo);
    color: var(--gc-chat-texto-suave);
    font-size: 11px;
    text-align: center;
}

/* ---------- Celular ---------- */

/*
   En celular la burbuja NO se mueve (lo corta chatFlotante.js) y el panel ocupa la pantalla, asi que
   se anclan los cuatro lados: con `left` puesto, `width` sale del ancho disponible, y con `top`
   puesto, `height` sale del alto VISIBLE. El !important es contra la posicion en linea que pudo
   haber quedado guardada de una sesion de escritorio en el mismo navegador.

   El alto NO se calcula con 100vh: en Safari de iPhone 100vh es la pantalla con la barra del
   navegador escondida (~80px mas que lo que se ve), y el panel anclado abajo empujaba el encabezado
   —con la X de cerrar— fuera de la pantalla. Con el chat abriendose solo, el visitante quedaba
   atrapado sin poder entrar al sitio. Anclar top y bottom deja que el navegador lo resuelva contra
   lo que de verdad esta visible.

   El contenedor NO lleva `left`: con el chat cerrado seria una franja invisible de 58px a lo ancho
   de toda la pantalla que se come los toques a la pagina. Solo tiene que medir lo que la burbuja.
*/
@media (max-width: 480px) {
    .gc-chat {
        right: 12px !important;
        bottom: 12px !important;
    }

    .gc-chat__panel {
        top: 12px;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        height: auto;
        max-height: none;
    }
}

/*
   16px es el minimo con el que Safari de iOS NO hace zoom a la pagina al tocar el campo. Va por
   pantalla tactil y no por ancho: un iPhone apaisado o un iPad pasan los 480px y hacen zoom igual.
   El !important es contra el tema de la landing (Enfold), que estiliza `#top textarea`: un selector
   con ID le gana a cualquier clase del widget.
*/
@media (pointer: coarse) {
    .gc-chat__texto {
        font-size: 16px !important;
    }
}

/* ---------- reCAPTCHA ---------- */

/*
   El badge de reCAPTCHA v3 lo posiciona Google fijo en la esquina inferior derecha —la misma que
   ocupa la burbuja— y termina tapado. Lo corremos a la IZQUIERDA de la burbuja: 58px de burbuja +
   20px de margen + 8px de aire. Se usa translate y no `right` para no pisar la transicion con la
   que Google despliega el badge al pasar el mouse.

   Esta regla vive aca a proposito: la hoja se carga unicamente cuando el widget se renderiza (ver
   _ChatFlotante.cshtml), asi que el badge se mueve solo en las paginas donde hay chat que lo tape.
*/
.grecaptcha-badge {
    transform: translateX(-86px);
}