#wma-widget {
    --wma-color: #4f46e5;
    --wma-color2: #4f46e5;
    --wma-width: 370px;
    --wma-height: 520px;
    --wma-launcher: 60px;
    --wma-side: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Botón lanzador ---- */
#wma-launcher {
    position: fixed;
    bottom: 20px;
    right: var(--wma-side);
    width: var(--wma-launcher);
    height: var(--wma-launcher);
    border-radius: 50%;
    background: var(--wma-color);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--wma-launcher) * .45);
    z-index: 99999;
    transition: transform .15s ease, box-shadow .15s ease;
    padding: 0;
}
#wma-launcher:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
#wma-launcher img { width: 62%; height: 62%; object-fit: contain; border-radius: 50%; }

/* Indicador de conversación activa (minimizado) */
#wma-badge {
    display: none;
    position: absolute;
    top: 4px; right: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    box-sizing: border-box;
}
#wma-launcher.wma-has-convo #wma-badge { display: block; }
#wma-launcher.wma-has-convo { animation: wma-pulse 2.2s infinite; }
@keyframes wma-pulse {
    0%   { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(239,68,68,.5); }
    70%  { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 12px rgba(239,68,68,0); }
    100% { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(239,68,68,0); }
}

/* ---- Posiciones ---- */
/* Abajo izquierda */
#wma-widget.wma-pos-left #wma-launcher,
#wma-widget.wma-pos-left #wma-panel { right: auto; left: var(--wma-side); }

/* Medio derecha (centrado vertical, pegado al costado) */
#wma-widget.wma-pos-right-middle #wma-launcher {
    bottom: auto; top: 50%; transform: translateY(-50%);
}
#wma-widget.wma-pos-right-middle #wma-launcher:hover { transform: translateY(-50%) scale(1.06); }
#wma-widget.wma-pos-right-middle #wma-panel {
    bottom: auto; top: 50%; transform: translateY(-50%);
    right: calc(var(--wma-side) + var(--wma-launcher) + 12px);
}

/* Medio izquierda */
#wma-widget.wma-pos-left-middle #wma-launcher {
    right: auto; left: var(--wma-side);
    bottom: auto; top: 50%; transform: translateY(-50%);
}
#wma-widget.wma-pos-left-middle #wma-launcher:hover { transform: translateY(-50%) scale(1.06); }
#wma-widget.wma-pos-left-middle #wma-panel {
    right: auto; left: calc(var(--wma-side) + var(--wma-launcher) + 12px);
    bottom: auto; top: 50%; transform: translateY(-50%);
}

/* El panel centrado no usa la animación de subida (rompería el translateY). */
#wma-widget.wma-pos-right-middle #wma-panel,
#wma-widget.wma-pos-left-middle #wma-panel { animation: wma-fade .18s ease; }
@keyframes wma-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Panel ---- */
#wma-panel {
    position: fixed;
    bottom: calc(20px + var(--wma-launcher) + 12px);
    right: var(--wma-side);
    width: var(--wma-width);
    max-width: calc(100vw - 40px);
    height: var(--wma-height);
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .26);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 99999;
    animation: wma-pop .18s ease;
}
#wma-panel.wma-open { display: flex; }
@keyframes wma-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

#wma-header {
    background: var(--wma-color);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#wma-header .wma-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0; overflow: hidden;
}
#wma-header .wma-avatar img { width: 100%; height: 100%; object-fit: cover; }
#wma-header .wma-title { font-weight: 600; flex: 1; line-height: 1.2; }
#wma-header .wma-sub { font-size: 11px; opacity: .8; font-weight: 400; }
#wma-close, #wma-reset { background: none; border: none; color: #fff; cursor: pointer; line-height: 1; padding: 0 2px; opacity: .9; }
#wma-close { font-size: 22px; }
#wma-reset { font-size: 18px; }
#wma-close:hover, #wma-reset:hover { opacity: 1; }

#wma-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wma-msg {
    max-width: 82%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.wma-msg a { color: inherit; text-decoration: underline; }
.wma-user { align-self: flex-end; background: var(--wma-color); color: #fff; border-bottom-right-radius: 4px; }
.wma-bot  { align-self: flex-start; background: #fff; color: #1f2430; border: 1px solid #e8e8f0; border-bottom-left-radius: 4px; }
.wma-bot a { color: var(--wma-color); }
.wma-typing { color: #999; }
.wma-typing span { display: inline-block; animation: wma-blink 1.2s infinite; }
.wma-typing span:nth-child(2) { animation-delay: .2s; }
.wma-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes wma-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

#wma-inputbar { display: flex; align-items: flex-end; border-top: 1px solid #eee; padding: 10px; gap: 8px; background: #fff; }
#wma-input {
    flex: 1; border: 1px solid #dcdce6; border-radius: 12px; padding: 10px 12px;
    font-size: 14px; resize: none; outline: none; font-family: inherit; max-height: 100px; line-height: 1.4;
}
#wma-input:focus { border-color: var(--wma-color); }
#wma-send {
    background: var(--wma-color); color: #fff; border: none; border-radius: 12px;
    padding: 0 16px; height: 40px; cursor: pointer; font-size: 14px; font-weight: 500; flex-shrink: 0;
}
#wma-send:disabled { opacity: .5; cursor: default; }

#wma-foot { text-align: center; font-size: 10px; color: #aab; padding: 6px; background: #fff; }
#wma-foot a { color: #99a; text-decoration: none; }

/* Campo honeypot (anti-bot) invisible. */
.wma-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }

/* ---- Icono del lanzador (envuelto para animarse aparte) ---- */
#wma-launcher-icon {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; pointer-events: none;
}

/* ---- Degradado (color principal → secundario) ---- */
#wma-widget.wma-grad #wma-launcher,
#wma-widget.wma-grad #wma-header,
#wma-widget.wma-grad #wma-send,
#wma-widget.wma-grad .wma-user {
    background: linear-gradient(135deg, var(--wma-color), var(--wma-color2));
}

/* ---- Efectos del botón ---- */
/* Resplandor: glow constante del color de marca */
#wma-widget.wma-fx-glow #wma-launcher {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22),
                0 0 18px color-mix(in srgb, var(--wma-color) 65%, transparent);
}

/* Latido: el icono palpita suavemente */
#wma-widget.wma-fx-pulse #wma-launcher-icon { animation: wma-fx-pulse 1.9s ease-in-out infinite; }
@keyframes wma-fx-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.16); }
}

/* Rebote: pequeño salto periódico */
#wma-widget.wma-fx-bounce #wma-launcher-icon { animation: wma-fx-bounce 2.8s ease-in-out infinite; }
@keyframes wma-fx-bounce {
    0%, 25%, 55%, 100% { transform: translateY(0); }
    35% { transform: translateY(-7px); }
    45% { transform: translateY(-3px); }
}

/* Anillo: ondas expansivas del color de marca */
#wma-widget.wma-fx-halo #wma-launcher { animation: wma-fx-halo 2.4s ease-out infinite; }
@keyframes wma-fx-halo {
    0%   { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 0 color-mix(in srgb, var(--wma-color) 45%, transparent); }
    70%  { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 16px transparent; }
    100% { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 0 transparent; }
}

/* La marca de conversación activa (punto rojo) prevalece sobre los efectos. */
#wma-widget #wma-launcher.wma-has-convo { animation: wma-pulse 2.2s infinite; }

/* ---- Etiqueta al pasar el cursor ("Asistencia en línea") ---- */
#wma-tip {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: #1f2430; color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1;
    padding: 7px 11px; border-radius: 8px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease .12s;
}
/* Sale hacia el lado interior de la pantalla según la posición. */
#wma-widget.wma-pos-right #wma-tip,
#wma-widget.wma-pos-right-middle #wma-tip { right: calc(100% + 12px); }
#wma-widget.wma-pos-left #wma-tip,
#wma-widget.wma-pos-left-middle #wma-tip { left: calc(100% + 12px); }

#wma-launcher:hover #wma-tip { opacity: 1; }
/* No mostrarla con el chat abierto, mientras se lee (scroll) ni en móvil. */
#wma-widget.wma-open-state #wma-tip,
#wma-widget.wma-scrolling #wma-tip { opacity: 0 !important; }
@media (max-width: 480px) { #wma-tip { display: none; } }

/* ---- Plegado al borde (asoma poco, se despliega al pasar el cursor) ---- */
#wma-widget.wma-collapse #wma-launcher {
    transition: right .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1),
                border-radius .28s ease, opacity .28s ease, box-shadow .15s ease, transform .15s ease;
}
/* Oculta el punto de notificación e icono mientras está plegado (limpio) */
#wma-widget.wma-collapse:not(.wma-open-state) #wma-launcher { opacity: .9; }

/* Costado DERECHO: se pliega hacia la derecha, plano ese lado */
#wma-widget.wma-collapse.wma-pos-right:not(.wma-open-state) #wma-launcher,
#wma-widget.wma-collapse.wma-pos-right-middle:not(.wma-open-state) #wma-launcher {
    right: calc(var(--wma-side) - var(--wma-launcher) * 0.55);
    border-radius: 50% 6px 6px 50%;
}
#wma-widget.wma-collapse.wma-pos-right:not(.wma-open-state) #wma-launcher:hover,
#wma-widget.wma-collapse.wma-pos-right-middle:not(.wma-open-state) #wma-launcher:hover {
    right: var(--wma-side); border-radius: 50%; opacity: 1;
}

/* Costado IZQUIERDO */
#wma-widget.wma-collapse.wma-pos-left:not(.wma-open-state) #wma-launcher,
#wma-widget.wma-collapse.wma-pos-left-middle:not(.wma-open-state) #wma-launcher {
    left: calc(var(--wma-side) - var(--wma-launcher) * 0.55);
    border-radius: 6px 50% 50% 6px;
}
#wma-widget.wma-collapse.wma-pos-left:not(.wma-open-state) #wma-launcher:hover,
#wma-widget.wma-collapse.wma-pos-left-middle:not(.wma-open-state) #wma-launcher:hover {
    left: var(--wma-side); border-radius: 50%; opacity: 1;
}

/* Puente de hover invisible: cubre la franja entre el botón y la orilla para
   que al desplegarse el cursor SIGA dentro del botón (evita el parpadeo
   plegado/desplegado cuando el mouse queda en esa zona). */
#wma-widget.wma-collapse.wma-pos-right #wma-launcher::after,
#wma-widget.wma-collapse.wma-pos-right-middle #wma-launcher::after {
    content: ''; position: absolute; top: -8px; bottom: -8px; left: 100%;
    width: calc(var(--wma-side) + var(--wma-launcher) * 0.6);
}
#wma-widget.wma-collapse.wma-pos-left #wma-launcher::after,
#wma-widget.wma-collapse.wma-pos-left-middle #wma-launcher::after {
    content: ''; position: absolute; top: -8px; bottom: -8px; right: 100%;
    width: calc(var(--wma-side) + var(--wma-launcher) * 0.6);
}

/* Mientras se hace SCROLL (lectura): se esconde casi por completo */
#wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-right #wma-launcher,
#wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-right-middle #wma-launcher {
    right: calc(var(--wma-side) - var(--wma-launcher) * 0.92);
    opacity: .35;
}
#wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-left #wma-launcher,
#wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-left-middle #wma-launcher {
    left: calc(var(--wma-side) - var(--wma-launcher) * 0.92);
    opacity: .35;
}

/* ---- Móvil: pantalla casi completa ---- */
@media (max-width: 480px) {
    #wma-panel,
    #wma-widget.wma-pos-left #wma-panel,
    #wma-widget.wma-pos-right-middle #wma-panel,
    #wma-widget.wma-pos-left-middle #wma-panel {
        width: 100vw; max-width: 100vw; height: 82vh; max-height: 82vh;
        right: 0; left: 0; bottom: 0; top: auto; transform: none;
        border-radius: 16px 16px 0 0; animation: wma-pop .18s ease;
    }
    /* En móvil no hay hover: en reposo asoma solo un tercio, discreto. */
    #wma-widget.wma-collapse.wma-pos-right:not(.wma-open-state) #wma-launcher,
    #wma-widget.wma-collapse.wma-pos-right-middle:not(.wma-open-state) #wma-launcher {
        right: calc(var(--wma-side) - var(--wma-launcher) * 0.68);
        opacity: .8;
    }
    #wma-widget.wma-collapse.wma-pos-left:not(.wma-open-state) #wma-launcher,
    #wma-widget.wma-collapse.wma-pos-left-middle:not(.wma-open-state) #wma-launcher {
        left: calc(var(--wma-side) - var(--wma-launcher) * 0.68);
        opacity: .8;
    }
    /* Y mientras lee (scroll), desaparece casi por completo. */
    #wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-right #wma-launcher,
    #wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-right-middle #wma-launcher {
        right: calc(var(--wma-side) - var(--wma-launcher) * 0.97);
        opacity: .25;
    }
    #wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-left #wma-launcher,
    #wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state).wma-pos-left-middle #wma-launcher {
        left: calc(var(--wma-side) - var(--wma-launcher) * 0.97);
        opacity: .25;
    }
    /* El punto rojo no debe "flotar" solo cuando el botón está oculto. */
    #wma-widget.wma-collapse.wma-scrolling:not(.wma-open-state) #wma-badge { display: none; }
}