/**
 * WhatsApp - Chat flotante | Gesyfar — v1.3
 *
 * ARQUITECTURA DE POSICIONAMIENTO:
 * ─────────────────────────────────────────────────────────────
 * .wachat          → fixed, esquina, tamaño = solo el FAB (fit-content)
 * .wachat__popup   → absolute, anclado encima del FAB (bottom: calc(FAB+gap))
 *                    Está FUERA del flujo → nunca empuja ni bloquea nada
 * .wachat__fab     → el único elemento en flujo, define el área del contenedor
 *
 * Resultado: el contenedor siempre mide exactamente lo que el FAB.
 * El popup flota sobre la página sin ocupar espacio en el layout.
 * Nada de la página queda bloqueado, ni en móvil ni en escritorio.
 */

/* ── Variables ──────────────────────────────────────────────── */
#wachat-root {
    --wachat-clr:      #25D366;
    --wachat-bg-chat:  #ece5dd;
    --wachat-white:    #ffffff;
    --wachat-text:     #111827;
    --wachat-muted:    #6b7280;
    --wachat-r-lg:     16px;
    --wachat-r-sm:     10px;
    --wachat-shadow:   0 6px 20px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.08);
    --wachat-sfab:     0 4px 14px rgba(0,0,0,.25);
    --wachat-fab-size: 56px;
    --wachat-popup-w:  290px;
    --wachat-gap:      10px;   /* espacio entre FAB y popup */
    --wachat-z:        9999;
    --wachat-ease:     cubic-bezier(.34,1.4,.64,1);
    --wachat-dur:      .2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

/* ── Contenedor raíz: exactamente el tamaño del FAB ─────────────
   position:relative permite que el popup absoluto se posicione
   respecto a este contenedor.
   ─────────────────────────────────────────────────────────────── */
.wachat {
    position:   fixed;
    bottom:     20px;
    z-index:    var(--wachat-z);
    /* Tamaño = contenido = FAB. Nunca más grande. */
    width:      fit-content;
    height:     fit-content;
}
.wachat--right { right: 18px; }
.wachat--left  { left:  18px; }

/* ════════════════════════════════════════════════════════════
   POPUP — position:absolute, fuera del flujo del documento
   Se posiciona encima del FAB sin ocupar espacio en el layout.
   ════════════════════════════════════════════════════════════ */
.wachat__popup {
    position:       absolute;
    /* Anclar justo encima del FAB */
    bottom:         calc(var(--wachat-fab-size) + var(--wachat-gap));
    width:          var(--wachat-popup-w);
    background:     var(--wachat-white);
    border-radius:  var(--wachat-r-lg);
    box-shadow:     var(--wachat-shadow);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    max-height:     min(400px, calc(100vh - var(--wachat-fab-size) - 60px));

    /* Estado cerrado: invisible, sin interacción */
    opacity:        0;
    transform:      scale(.92) translateY(8px);
    pointer-events: none;
    visibility:     hidden;   /* extra: no recibe foco ni eventos */

    transition:     opacity var(--wachat-dur) ease,
                    transform var(--wachat-dur) var(--wachat-ease),
                    visibility 0s linear var(--wachat-dur);
}

/* Alineación horizontal según posición */
.wachat--right .wachat__popup { right: 0; transform-origin: bottom right; }
.wachat--left  .wachat__popup { left:  0; transform-origin: bottom left;  }

/* Estado abierto */
.wachat__popup--open {
    opacity:        1;
    transform:      scale(1) translateY(0);
    pointer-events: all;
    visibility:     visible;
    transition:     opacity var(--wachat-dur) ease,
                    transform var(--wachat-dur) var(--wachat-ease),
                    visibility 0s linear 0s;
}

/* ── Cabecera ────────────────────────────────────────────────── */
.wachat__head {
    background:  var(--wachat-clr);
    padding:     11px 13px;
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       var(--wachat-white);
    flex-shrink: 0;
}
.wachat__avatar {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.wachat__agent {
    flex: 1; display: flex; flex-direction: column;
    gap: 1px; min-width: 0; overflow: hidden;
}
.wachat__agent-name {
    font-size: .88rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wachat__agent-title {
    font-size: .70rem; opacity: .85;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wachat__status {
    display: flex; align-items: center; gap: 4px;
    font-size: .62rem; opacity: .9; margin-top: 1px;
}
.wachat__status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #a7f3a0; flex-shrink: 0;
    animation: wachat-pulse 2s ease-in-out infinite;
}
@keyframes wachat-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(167,243,160,.35); }
    50%      { box-shadow: 0 0 0 5px rgba(167,243,160,.0);  }
}

/* Botón cerrar — 28px fijo */
.wachat__close {
    flex-shrink: 0;
    background: transparent; border: none;
    color: var(--wachat-white); cursor: pointer;
    width: 28px; height: 28px; min-width: 28px; min-height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: .85; padding: 0;
    transition: opacity .15s, background .15s;
}
.wachat__close:hover, .wachat__close:focus-visible {
    opacity: 1; background: rgba(255,255,255,.2);
    outline: 2px solid rgba(255,255,255,.4); outline-offset: 1px;
}
.wachat__close svg {
    width: 14px !important; height: 14px !important;
    display: block; flex-shrink: 0;
}

/* ── Cuerpo burbuja ──────────────────────────────────────────── */
.wachat__body {
    background: var(--wachat-bg-chat);
    padding: 12px 11px 10px;
    flex: 1; overflow-y: auto; min-height: 0;
    background-image:
        repeating-linear-gradient(45deg,  rgba(0,0,0,.015) 0, rgba(0,0,0,.015) 1px, transparent 1px, transparent 12px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,.015) 0, rgba(0,0,0,.015) 1px, transparent 1px, transparent 12px);
}
.wachat__bubble {
    background: var(--wachat-white);
    border-radius: 0 var(--wachat-r-sm) var(--wachat-r-sm) var(--wachat-r-sm);
    padding: 9px 12px 7px;
    max-width: 90%;
    box-shadow: 0 1px 3px rgba(0,0,0,.09);
    position: relative;
}
.wachat__bubble::before {
    content: ''; position: absolute; top: 0; left: -8px;
    border-style: solid; border-width: 0 8px 8px 0;
    border-color: transparent var(--wachat-white) transparent transparent;
}
.wachat__bubble-text {
    margin: 0 0 3px; font-size: .85rem;
    color: var(--wachat-text); line-height: 1.45;
}
.wachat__bubble-time {
    display: block; text-align: right;
    font-size: .64rem; color: var(--wachat-muted);
}

/* ── Pie ─────────────────────────────────────────────────────── */
.wachat__foot {
    background: var(--wachat-white);
    padding: 9px 11px 13px; flex-shrink: 0;
}
.wachat__cta {
    display: flex; align-items: center; justify-content: center;
    gap: 7px; width: 100%; padding: 10px 14px;
    background: var(--wachat-clr); color: var(--wachat-white);
    border: none; border-radius: var(--wachat-r-sm);
    font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: filter .15s, transform .1s;
}
.wachat__cta:hover, .wachat__cta:focus-visible {
    filter: brightness(1.07);
    outline: 3px solid var(--wachat-clr); outline-offset: 2px;
}
.wachat__cta:active { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════
   FAB circular
   ════════════════════════════════════════════════════════════ */
.wachat__fab {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         var(--wachat-fab-size);
    height:        var(--wachat-fab-size);
    border-radius: 50%;
    background:    var(--wachat-clr);
    border:        none;
    cursor:        pointer;
    box-shadow:    var(--wachat-sfab);
    position:      relative;   /* contexto para los iconos absolutos */
    flex-shrink:   0;
    outline:       3px solid rgba(255,255,255,.2);
    outline-offset: 2px;
    transition:    transform var(--wachat-dur), box-shadow var(--wachat-dur);
}
.wachat__fab:hover, .wachat__fab:focus-visible {
    transform: scale(1.07);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    outline: 3px solid var(--wachat-white);
}

/* Iconos dentro del FAB: absolute respecto al FAB */
.wachat__fab-icon {
    position:   absolute;
    top: 50%; left: 50%;
    transform-origin: center center;
    transition: opacity var(--wachat-dur) ease,
                transform var(--wachat-dur) var(--wachat-ease);
}
.wachat__fab-icon--wa {
    filter:     brightness(0) invert(1);
    object-fit: contain;
    width:      calc(var(--wachat-fab-size) * 0.58);
    height:     calc(var(--wachat-fab-size) * 0.58);
    /* centrar con translate */
    transform:  translate(-50%, -50%) rotate(0) scale(1);
    opacity:    1;
}
.wachat__fab-icon--close {
    width:     22px;
    height:    22px;
    transform: translate(-50%, -50%) rotate(-90deg) scale(.7);
    opacity:   0;
}
.wachat__fab[aria-expanded="true"] .wachat__fab-icon--wa {
    transform: translate(-50%, -50%) rotate(90deg) scale(.7);
    opacity:   0;
}
.wachat__fab[aria-expanded="true"] .wachat__fab-icon--close {
    transform: translate(-50%, -50%) rotate(0) scale(1);
    opacity:   1;
}

/* Badge */
.wachat__badge {
    position: absolute; top: -3px; right: -3px;
    background: #ef4444; color: var(--wachat-white);
    font-size: .60rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px;
    padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--wachat-white);
    animation: wachat-badge-in .35s var(--wachat-ease) both;
}
.wachat__badge--hidden { animation: wachat-badge-out .2s ease forwards; }
@keyframes wachat-badge-in  { from { transform:scale(0);opacity:0; } to { transform:scale(1);opacity:1; } }
@keyframes wachat-badge-out { from { transform:scale(1);opacity:1; } to { transform:scale(0);opacity:0; } }

/* ════════════════════════════════════════════════════════════
   MODO LABEL — pastilla icono + texto
   ════════════════════════════════════════════════════════════ */
.wachat__label-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           9px;
    padding:       0 18px 0 6px;
    height:        var(--wachat-fab-size);
    width:         fit-content;
    max-width:     calc(100vw - 36px);
    background:    var(--wachat-clr);
    color:         var(--wachat-white);
    border:        none;
    border-radius: calc(var(--wachat-fab-size) / 2);
    box-shadow:    var(--wachat-sfab);
    cursor:        pointer;
    white-space:   nowrap;
    overflow:      hidden;
    flex-shrink:   0;
    outline:       3px solid rgba(255,255,255,.2);
    outline-offset: 2px;
    transition:    transform var(--wachat-dur), box-shadow var(--wachat-dur);
}
.wachat__label-btn:hover, .wachat__label-btn:focus-visible {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    outline: 3px solid var(--wachat-white);
}
.wachat__label-btn:active { transform: scale(.97); }

.wachat__label-icon {
    width:         calc(var(--wachat-fab-size) - 12px);
    height:        calc(var(--wachat-fab-size) - 12px);
    min-width:     calc(var(--wachat-fab-size) - 12px);
    border-radius: 50%;
    background:    rgba(255,255,255,.2);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.wachat__label-icon img {
    width:      calc(var(--wachat-fab-size) * 0.44);
    height:     calc(var(--wachat-fab-size) * 0.44);
    object-fit: contain;
    display:    block;
    filter:     brightness(0) invert(1);
}
.wachat__label-text {
    font-size: .88rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; letter-spacing: .01em;
}

/* ── RESPONSIVE MÓVIL ────────────────────────────────────────── */
@media (max-width: 520px) {
    #wachat-root {
        --wachat-fab-size: 50px;
        --wachat-popup-w:  calc(100vw - 40px);
    }
    .wachat { bottom: 14px; }
    .wachat--right { right: 16px; }
    .wachat--left  { left:  16px; }
    /* Popup: altura acotada para no tapar toda la pantalla */
    .wachat__popup { max-height: min(360px, 62vh); }
    .wachat__head  { padding: 10px 12px; }
    .wachat__body  { max-height: 130px; }
    .wachat__foot  { padding: 8px 10px 12px; }
    .wachat__cta   { padding: 9px 12px; font-size: .84rem; }
    .wachat__label-text { font-size: .82rem; }
    .wachat__label-btn  { padding: 0 14px 0 5px; gap: 7px; }
}
@media (max-width: 360px) {
    #wachat-root { --wachat-fab-size: 46px; --wachat-popup-w: calc(100vw - 32px); }
    .wachat--right { right: 12px; }
    .wachat--left  { left:  12px; }
    .wachat__popup { max-height: min(320px, 58vh); }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .wachat__popup, .wachat__fab, .wachat__fab-icon,
    .wachat__status-dot, .wachat__badge, .wachat__label-btn {
        animation: none !important; transition: none !important;
    }
}