:root {
    --cs-ema-bg: #090b0e;
    --cs-ema-bg-soft: #11151a;
    --cs-ema-panel: #0d1014;
    --cs-ema-surface: #151a20;
    --cs-ema-surface-2: #1a2027;
    --cs-ema-border: #262d35;
    --cs-ema-text: #f5f7f9;
    --cs-ema-muted: #939aa4;
    --cs-ema-red: #e10600;
    --cs-ema-red-dark: #b90500;
    --cs-ema-green: #24c66b;
    --cs-ema-shadow: 0 26px 76px rgba(0, 0, 0, .42);
}

.csstream-ema-widget {
    position: fixed;
    z-index: 999999;
    bottom: var(--cs-ema-bottom-offset, 96px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.csstream-ema-widget--right { right: var(--cs-ema-side-offset, 24px); }
.csstream-ema-widget--left { left: var(--cs-ema-side-offset, 24px); }

/* Launcher */
.csstream-ema-launcher {
    min-width: 178px;
    height: 60px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    padding: 0 14px 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background:
        radial-gradient(circle at 18% 50%, rgba(225,6,0,.11), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        var(--cs-ema-bg);
    color: #fff;
    box-shadow:
        0 16px 38px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.csstream-ema-launcher:hover {
    transform: translateY(-2px);
    border-color: rgba(225,6,0,.35);
    box-shadow:
        0 20px 48px rgba(0,0,0,.42),
        0 0 0 1px rgba(225,6,0,.08),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.csstream-ema-launcher:active { transform: translateY(0); }

.csstream-ema-launcher-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    background: #15181d;
    border: 1px solid rgba(225,6,0,.72);
    box-shadow: 0 7px 18px rgba(225,6,0,.22);
}

.csstream-ema-launcher-avatar img,
.csstream-ema-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.csstream-ema-launcher-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.csstream-ema-launcher-copy strong {
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.csstream-ema-launcher-copy small {
    margin-top: 3px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
}

.csstream-ema-launcher-status {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--cs-ema-green);
    box-shadow: 0 0 0 4px rgba(36,198,107,.11);
}

/* Panel */
.csstream-ema-panel {
    position: absolute;
    bottom: 74px;
    width: min(
        var(--cs-ema-panel-width, 400px),
        calc(100vw - (var(--cs-ema-side-offset, 24px) * 2) - 16px)
    );
    height: min(
        var(--cs-ema-panel-height, 520px),
        calc(
            100vh
            - var(--cs-ema-bottom-offset, 96px)
            - 74px
            - var(--cs-ema-top-clearance, 230px)
        )
    );
    max-height: var(--cs-ema-panel-height, 520px);
    background: var(--cs-ema-panel);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--cs-ema-shadow);
    display: flex;
    flex-direction: column;
    transform-origin: bottom right;
    animation: csstreamEmaOpen .22s ease-out;
}

.csstream-ema-widget--right .csstream-ema-panel { right: 0; }
.csstream-ema-widget--left .csstream-ema-panel { left: 0; transform-origin: bottom left; }
.csstream-ema-panel[hidden] { display: none !important; }

@keyframes csstreamEmaOpen {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.csstream-ema-header {
    position: relative;
    min-height: 84px;
    padding: 16px 14px 16px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    background:
        radial-gradient(circle at 88% 12%, rgba(225,6,0,.20), transparent 36%),
        linear-gradient(145deg, #171b20, #090b0e);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.csstream-ema-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cs-ema-red), #ff3b36);
}

.csstream-ema-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.csstream-ema-avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    background: #15191e;
    border: 1px solid rgba(225,6,0,.65);
    box-shadow: 0 8px 22px rgba(225,6,0,.20);
}

.csstream-ema-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border: 2px solid #0d1014;
    border-radius: 50%;
    background: var(--cs-ema-green);
}

.csstream-ema-heading {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.csstream-ema-heading strong {
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.csstream-ema-heading span {
    margin-top: 4px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csstream-ema-preview-badge {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.70);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.csstream-ema-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    color: rgba(255,255,255,.75);
    font-size: 24px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}

.csstream-ema-close:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Messages */
.csstream-ema-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 15px 14px;
    background:
        radial-gradient(circle at 20% 10%, rgba(225,6,0,.045), transparent 26%),
        linear-gradient(180deg, #0f1318 0%, #0b0e12 100%);
    scrollbar-width: thin;
    scrollbar-color: #343b44 transparent;
}

.csstream-ema-message {
    display: flex;
    margin: 0 0 12px;
    animation: csstreamEmaMessage .16s ease-out;
}

@keyframes csstreamEmaMessage {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.csstream-ema-message--user { justify-content: flex-end; }
.csstream-ema-message--assistant { justify-content: flex-start; }

.csstream-ema-bubble {
    max-width: 84%;
    padding: 11px 13px;
    border-radius: 15px;
    font-size: 13.5px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.csstream-ema-message--assistant .csstream-ema-bubble {
    background: var(--cs-ema-surface);
    color: #eef1f4;
    border: 1px solid #252c34;
    border-bottom-left-radius: 5px;
    box-shadow: 0 5px 16px rgba(0,0,0,.14);
}

.csstream-ema-message--user .csstream-ema-bubble {
    background: linear-gradient(145deg, #ed130d, #c80904);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    border-bottom-right-radius: 5px;
    box-shadow: 0 7px 18px rgba(225,6,0,.16);
}

.csstream-ema-message--typing .csstream-ema-bubble {
    color: #9aa1aa;
    font-size: 12px;
    font-style: italic;
}

/* Quick actions */
.csstream-ema-section-label {
    padding: 9px 14px 0;
    background: #0d1014;
    color: #6f7782;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.csstream-ema-quick-actions {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 9px 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: #0d1014;
    scrollbar-width: thin;
}

.csstream-ema-quick-actions button {
    flex: 0 0 auto;
    border: 1px solid #2b323a;
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    background: #151a20;
    color: #dfe3e7;
    font-size: 10.5px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
}

.csstream-ema-quick-actions button:hover {
    border-color: rgba(225,6,0,.55);
    background: #1a2027;
    color: #fff;
    transform: translateY(-1px);
}

/* Composer */
.csstream-ema-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    background: #0d1014;
    border-top: 1px solid rgba(255,255,255,.06);
}

.csstream-ema-input {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    resize: none;
    border: 1px solid #2a3139 !important;
    border-radius: 13px !important;
    padding: 11px 12px !important;
    background: #151a20 !important;
    color: #f5f7f9 !important;
    font: inherit !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.csstream-ema-input:focus {
    border-color: rgba(225,6,0,.60) !important;
    box-shadow: 0 0 0 3px rgba(225,6,0,.08) !important;
}

.csstream-ema-input::placeholder { color: #707883; }

.csstream-ema-send {
    height: 44px;
    border: 0;
    border-radius: 13px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    background: linear-gradient(145deg, #ef1812, var(--cs-ema-red));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 9px 20px rgba(225,6,0,.22);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.csstream-ema-send:hover {
    background: linear-gradient(145deg, #ff241d, #c90a05);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(225,6,0,.29);
}

.csstream-ema-send-icon { font-size: 16px; line-height: 1; }

.csstream-ema-send:disabled,
.csstream-ema-input:disabled,
.csstream-ema-quick-actions button:disabled {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
}

/* Footer */
.csstream-ema-footer {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    background: #090b0e;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #747c86;
    font-size: 9.5px;
}

.csstream-ema-reset {
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    color: #a0a7b0;
    font-size: 9.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.csstream-ema-footer-status { display: inline-flex; align-items: center; gap: 5px; }
.csstream-ema-footer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-ema-green); }

/* Mobile */
@media (max-width: 600px) {
    .csstream-ema-widget {
        right: 12px !important;
        left: 12px !important;
        bottom: var(--cs-ema-bottom-offset, 88px);
        --cs-ema-side-offset: 12px;
    }

    .csstream-ema-widget--left,
    .csstream-ema-widget--right {
        right: 12px !important;
        left: 12px !important;
    }

    .csstream-ema-launcher {
        float: right;
        min-width: 164px;
        height: 56px;
        border-radius: 16px;
    }

    .csstream-ema-launcher-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: calc(var(--cs-ema-bottom-offset, 88px) + 66px);
        width: auto;
        height: min(650px, calc(100vh - var(--cs-ema-bottom-offset, 88px) - 88px));
        max-height: none;
        border-radius: 18px;
    }

    .csstream-ema-header { min-height: 78px; padding: 14px 12px 14px 15px; }
    .csstream-ema-avatar { width: 46px; height: 46px; }
    .csstream-ema-preview-badge { display: none; }
    .csstream-ema-heading span { max-width: 210px; }
    .csstream-ema-bubble { max-width: 87%; font-size: 13px; }
    .csstream-ema-quick-actions { padding-bottom: 10px; }
    .csstream-ema-send span:first-child { display: none; }
    .csstream-ema-send { width: 44px; padding: 0; }
    .csstream-ema-footer { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .csstream-ema-panel,
    .csstream-ema-message,
    .csstream-ema-launcher,
    .csstream-ema-send,
    .csstream-ema-quick-actions button {
        animation: none !important;
        transition: none !important;
    }
}

.csstream-ema-preview-badge--public {
    color: #dff9e9;
    border-color: rgba(36,198,107,.20);
    background: rgba(36,198,107,.10);
}

.csstream-ema-privacy {
    padding: 6px 12px 9px;
    background: #ffffff;
    color: #969ca4;
    font-size: 8.5px;
    line-height: 1.35;
    text-align: center;
}

.csstream-ema-privacy a {
    color: #686f78;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 600px) {
    .csstream-ema-privacy {
        font-size: 8px;
        padding-bottom: 8px;
    }
}

/* WhatsApp CTA */
.csstream-ema-message--whatsapp {
    margin-top: 2px;
}

.csstream-ema-whatsapp-card {
    width: min(88%, 330px);
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid #dfe7e2;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(0,0,0,.055);
}

.csstream-ema-whatsapp-card strong {
    color: #171a1f;
    font-size: 12.5px;
}

.csstream-ema-whatsapp-card span {
    color: #6f767e;
    font-size: 10.5px;
    line-height: 1.4;
}

.csstream-ema-whatsapp-button {
    margin-top: 3px;
    min-height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #1f9d55;
    color: #ffffff !important;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(31,157,85,.16);
    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.csstream-ema-whatsapp-button:hover {
    background: #188348;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(31,157,85,.22);
}

@media (max-width: 600px) {
    .csstream-ema-whatsapp-card {
        width: 92%;
    }

    .csstream-ema-whatsapp-button {
        min-height: 42px;
    }
}

/* Enlaces clicables en las respuestas de Ema */
.csstream-ema-bubble .csstream-ema-link {
    color: #ff4a45;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition:
        color .15s ease,
        opacity .15s ease;
}

.csstream-ema-bubble .csstream-ema-link:hover {
    color: #ff706c;
}

.csstream-ema-bubble .csstream-ema-link:focus-visible {
    outline: 2px solid rgba(255, 74, 69, .55);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Escalado a técnico / experto */
.csstream-ema-message--expert {
    margin-top: 4px;
}

.csstream-ema-expert-card {
    width: min(90%, 345px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(225, 6, 0, .30);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(225, 6, 0, .07),
            rgba(255, 255, 255, .015)
        ),
        #11151a;
    box-shadow:
        0 10px 25px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.csstream-ema-expert-badge {
    align-self: flex-start;
    padding: 4px 7px;
    border: 1px solid rgba(225, 6, 0, .22);
    border-radius: 999px;
    background: rgba(225, 6, 0, .09);
    color: #ff5b56;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.csstream-ema-expert-card strong {
    color: #ffffff;
    font-size: 12.5px;
    line-height: 1.35;
}

.csstream-ema-expert-card > span:not(.csstream-ema-expert-badge) {
    color: #aeb5bd;
    font-size: 10.5px;
    line-height: 1.45;
}

.csstream-ema-expert-actions {
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.csstream-ema-expert-button {
    min-height: 39px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #1f9d55;
    color: #ffffff !important;
    font-size: 10.5px;
    font-weight: 750;
    text-decoration: none !important;
    transition:
        transform .15s ease,
        background .15s ease;
}

.csstream-ema-expert-button:hover {
    background: #188348;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.csstream-ema-expert-dismiss {
    min-height: 39px;
    padding: 0 10px;
    border: 1px solid #30363d;
    border-radius: 10px;
    background: transparent;
    color: #b5bbc2;
    cursor: pointer;
    font-size: 10px;
}

.csstream-ema-expert-dismiss:hover {
    border-color: #4a5159;
    color: #ffffff;
}

@media (max-width: 600px) {
    .csstream-ema-expert-card {
        width: 94%;
    }

    .csstream-ema-expert-actions {
        flex-direction: column;
    }

    .csstream-ema-expert-button,
    .csstream-ema-expert-dismiss {
        width: 100%;
    }
}

/* =========================================================
 * MOBILE RESPONSIVE 1.7.1
 * Adaptación real al viewport visual, teclado y orientación
 * ======================================================= */

@media (max-width: 767px) {
    .csstream-ema-widget {
        right: max(10px, env(safe-area-inset-right)) !important;
        left: auto !important;
        bottom: max(
            var(--cs-ema-bottom-offset, 88px),
            calc(env(safe-area-inset-bottom) + 14px)
        );
        width: auto;
    }

    .csstream-ema-widget--left {
        left: max(10px, env(safe-area-inset-left)) !important;
        right: auto !important;
    }

    .csstream-ema-launcher {
        float: none;
        min-width: 154px;
        height: 54px;
        padding: 0 12px 0 8px;
        border-radius: 16px;
        gap: 8px;
        transition:
            opacity .16s ease,
            transform .16s ease,
            box-shadow .18s ease;
    }

    .csstream-ema-launcher-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .csstream-ema-launcher-copy strong {
        font-size: 13px;
    }

    .csstream-ema-launcher-copy small {
        font-size: 9.5px;
    }

    /*
     * Al abrir el panel ocultamos temporalmente el launcher.
     * El cierre sigue disponible en la cabecera del chat.
     */
    .csstream-ema-widget--open .csstream-ema-launcher {
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px) scale(.96);
    }

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        position: fixed;
        top: var(--cs-ema-mobile-panel-top, 12vh);
        bottom: auto;

        left: max(
            8px,
            calc((100vw - 520px) / 2),
            env(safe-area-inset-left)
        ) !important;

        right: max(
            8px,
            calc((100vw - 520px) / 2),
            env(safe-area-inset-right)
        ) !important;

        width: auto;
        height: var(
            --cs-ema-mobile-panel-height,
            min(680px, 82dvh)
        );

        max-height: calc(
            var(--cs-ema-mobile-vh, 100dvh) - 10px
        );

        min-height: 280px;
        border-radius: 20px;
        transform-origin: bottom center;
        overscroll-behavior: contain;
    }

    .csstream-ema-header {
        flex: 0 0 auto;
        min-height: 70px;
        padding: 11px 10px 11px 13px;
        gap: 9px;
    }

    .csstream-ema-avatar {
        width: 42px;
        height: 42px;
    }

    .csstream-ema-online-dot {
        width: 11px;
        height: 11px;
    }

    .csstream-ema-heading strong {
        font-size: 14px;
    }

    .csstream-ema-heading span {
        max-width: 190px;
        margin-top: 2px;
        font-size: 9.5px;
    }

    .csstream-ema-close {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        font-size: 25px;
    }

    .csstream-ema-messages {
        min-height: 0;
        padding: 12px 11px 10px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .csstream-ema-message {
        margin-bottom: 9px;
    }

    .csstream-ema-bubble {
        max-width: 91%;
        padding: 10px 11px;
        font-size: 13px;
        line-height: 1.42;
    }

    .csstream-ema-section-label {
        flex: 0 0 auto;
        padding: 6px 11px 0;
        font-size: 8px;
    }

    .csstream-ema-quick-actions {
        flex: 0 0 auto;
        gap: 6px;
        padding: 7px 10px 9px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .csstream-ema-quick-actions::-webkit-scrollbar {
        display: none;
    }

    .csstream-ema-quick-actions button {
        min-height: 34px;
        padding: 7px 9px;
        scroll-snap-align: start;
        font-size: 10px;
        white-space: nowrap;
    }

    .csstream-ema-form {
        flex: 0 0 auto;
        gap: 7px;
        padding: 9px 9px calc(
            9px + env(safe-area-inset-bottom)
        );
    }

    .csstream-ema-input {
        min-height: 46px;
        max-height: 96px;

        /*
         * 16 px evita el zoom automático de Safari iOS al enfocar.
         */
        font-size: 16px !important;
        line-height: 1.3 !important;
        padding: 11px !important;
    }

    .csstream-ema-send {
        width: 46px;
        min-width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 13px;
    }

    .csstream-ema-send span:first-child {
        display: none;
    }

    .csstream-ema-send-icon {
        font-size: 19px;
    }

    .csstream-ema-footer {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 6px 10px;
        font-size: 8.5px;
    }

    .csstream-ema-privacy {
        flex: 0 0 auto;
        padding: 5px 10px calc(
            6px + env(safe-area-inset-bottom)
        );
        font-size: 7.5px;
        line-height: 1.3;
    }

    .csstream-ema-whatsapp-card,
    .csstream-ema-expert-card {
        width: 96%;
        max-width: none;
    }

    .csstream-ema-expert-actions {
        gap: 6px;
    }

    .csstream-ema-expert-button,
    .csstream-ema-expert-dismiss {
        min-height: 42px;
    }

    /*
     * Cuando aparece el teclado se priorizan mensajes + campo de texto.
     * Se ocultan elementos secundarios que consumen altura.
     */
    .csstream-ema-widget--keyboard-open .csstream-ema-panel {
        border-radius: 14px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-header {
        min-height: 56px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-avatar {
        width: 36px;
        height: 36px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-heading span,
    .csstream-ema-widget--keyboard-open .csstream-ema-preview-badge,
    .csstream-ema-widget--keyboard-open .csstream-ema-section-label,
    .csstream-ema-widget--keyboard-open .csstream-ema-quick-actions,
    .csstream-ema-widget--keyboard-open .csstream-ema-footer,
    .csstream-ema-widget--keyboard-open .csstream-ema-privacy {
        display: none !important;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-messages {
        padding-top: 9px;
        padding-bottom: 7px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-form {
        padding-bottom: max(
            7px,
            env(safe-area-inset-bottom)
        );
    }
}

/* Teléfonos estrechos */
@media (max-width: 380px) {
    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        left: max(5px, env(safe-area-inset-left)) !important;
        right: max(5px, env(safe-area-inset-right)) !important;
        border-radius: 16px;
    }

    .csstream-ema-header {
        padding-left: 9px;
        padding-right: 7px;
    }

    .csstream-ema-heading span {
        max-width: 145px;
    }

    .csstream-ema-bubble {
        max-width: 94%;
        font-size: 12.5px;
    }

    .csstream-ema-footer-status {
        display: none;
    }

    .csstream-ema-launcher {
        min-width: 146px;
    }
}

/* Móvil en horizontal: panel compacto a la derecha */
@media
    (max-width: 900px)
    and (max-height: 580px)
    and (orientation: landscape) {

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        top: var(--cs-ema-mobile-panel-top, 6px);
        left: auto !important;
        right: max(7px, env(safe-area-inset-right)) !important;
        width: min(
            440px,
            calc(
                100vw
                - env(safe-area-inset-left)
                - env(safe-area-inset-right)
                - 14px
            )
        );
        height: var(
            --cs-ema-mobile-panel-height,
            calc(100dvh - 12px)
        );
        min-height: 270px;
        border-radius: 14px;
    }

    .csstream-ema-header {
        min-height: 54px;
        padding: 7px 9px;
    }

    .csstream-ema-avatar {
        width: 36px;
        height: 36px;
    }

    .csstream-ema-heading span,
    .csstream-ema-preview-badge,
    .csstream-ema-section-label,
    .csstream-ema-quick-actions,
    .csstream-ema-footer,
    .csstream-ema-privacy {
        display: none !important;
    }

    .csstream-ema-messages {
        padding: 8px 9px 6px;
    }

    .csstream-ema-form {
        padding: 7px;
    }

    .csstream-ema-input {
        min-height: 42px;
        max-height: 74px;
    }

    .csstream-ema-send {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }
}

/* =========================================================
 * TABLET RESPONSIVE 1.7.2
 * iPad / Android tablets · vertical y horizontal
 * ======================================================= */

@media (min-width: 768px) and (max-width: 1180px) {
    .csstream-ema-widget {
        right: max(
            18px,
            env(safe-area-inset-right)
        ) !important;
        left: auto !important;

        bottom: max(
            var(--cs-ema-bottom-offset, 96px),
            calc(env(safe-area-inset-bottom) + 22px)
        );
    }

    .csstream-ema-widget--left {
        left: max(
            18px,
            env(safe-area-inset-left)
        ) !important;
        right: auto !important;
    }

    .csstream-ema-launcher {
        min-width: 170px;
        height: 58px;
        border-radius: 17px;
    }

    .csstream-ema-launcher-avatar {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .csstream-ema-launcher-copy strong {
        font-size: 14px;
    }

    .csstream-ema-launcher-copy small {
        font-size: 10px;
    }

    /*
     * En tablet ocultamos el launcher mientras el panel está abierto
     * para liberar espacio visual, igual que en móvil.
     */
    .csstream-ema-widget--open .csstream-ema-launcher {
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px) scale(.97);
    }

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        position: fixed;

        top: var(
            --cs-ema-mobile-panel-top,
            max(110px, 13vh)
        );

        bottom: auto;

        left: auto !important;

        right: max(
            18px,
            env(safe-area-inset-right)
        ) !important;

        width: var(
            --cs-ema-tablet-panel-width,
            min(500px, 58vw)
        );

        height: var(
            --cs-ema-mobile-panel-height,
            min(720px, 74dvh)
        );

        max-height: calc(
            var(--cs-ema-mobile-vh, 100dvh) - 24px
        );

        min-width: 420px;
        max-width: 520px;
        min-height: 360px;

        border-radius: 22px;
        transform-origin: bottom right;

        overscroll-behavior: contain;
    }

    .csstream-ema-widget--left .csstream-ema-panel {
        left: max(
            18px,
            env(safe-area-inset-left)
        ) !important;
        right: auto !important;
        transform-origin: bottom left;
    }

    .csstream-ema-header {
        flex: 0 0 auto;
        min-height: 76px;
        padding: 13px 13px 13px 16px;
        gap: 11px;
    }

    .csstream-ema-avatar {
        width: 44px;
        height: 44px;
    }

    .csstream-ema-heading strong {
        font-size: 15px;
    }

    .csstream-ema-heading span {
        max-width: 230px;
        font-size: 10.5px;
    }

    .csstream-ema-preview-badge {
        font-size: 8.5px;
    }

    .csstream-ema-close {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .csstream-ema-messages {
        min-height: 0;
        padding: 15px 13px 12px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .csstream-ema-message {
        margin-bottom: 10px;
    }

    .csstream-ema-bubble {
        max-width: 87%;
        padding: 10px 12px;
        font-size: 13.5px;
        line-height: 1.45;
    }

    .csstream-ema-section-label {
        flex: 0 0 auto;
        padding: 7px 13px 0;
        font-size: 8.5px;
    }

    .csstream-ema-quick-actions {
        flex: 0 0 auto;
        gap: 7px;
        padding: 8px 12px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .csstream-ema-quick-actions::-webkit-scrollbar {
        display: none;
    }

    .csstream-ema-quick-actions button {
        min-height: 35px;
        padding: 7px 10px;
        font-size: 10.5px;
        white-space: nowrap;
    }

    .csstream-ema-form {
        flex: 0 0 auto;
        gap: 8px;
        padding: 10px 11px calc(
            10px + env(safe-area-inset-bottom)
        );
    }

    .csstream-ema-input {
        min-height: 46px;
        max-height: 105px;
        font-size: 16px !important;
        line-height: 1.32 !important;
        padding: 11px 12px !important;
    }

    .csstream-ema-send {
        min-width: 48px;
        height: 46px;
        border-radius: 13px;
    }

    .csstream-ema-footer {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 6px 11px;
        font-size: 9px;
    }

    .csstream-ema-privacy {
        flex: 0 0 auto;
        padding: 5px 11px calc(
            7px + env(safe-area-inset-bottom)
        );
        font-size: 8px;
    }

    .csstream-ema-whatsapp-card,
    .csstream-ema-expert-card {
        width: min(94%, 380px);
    }

    /*
     * Teclado abierto en tablet:
     * quitamos elementos secundarios para no perder área útil.
     */
    .csstream-ema-widget--keyboard-open .csstream-ema-panel {
        top: var(
            --cs-ema-mobile-panel-top,
            8px
        );
        border-radius: 16px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-header {
        min-height: 58px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-avatar {
        width: 38px;
        height: 38px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-heading span,
    .csstream-ema-widget--keyboard-open .csstream-ema-preview-badge,
    .csstream-ema-widget--keyboard-open .csstream-ema-section-label,
    .csstream-ema-widget--keyboard-open .csstream-ema-quick-actions,
    .csstream-ema-widget--keyboard-open .csstream-ema-footer,
    .csstream-ema-widget--keyboard-open .csstream-ema-privacy {
        display: none !important;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-messages {
        padding-top: 10px;
        padding-bottom: 8px;
    }
}

/* Tablet vertical: panel flotante contenido, sin cubrir todo el ancho */
@media
    (min-width: 768px)
    and (max-width: 1180px)
    and (orientation: portrait) {

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        width: var(
            --cs-ema-tablet-panel-width,
            min(500px, 62vw)
        );
        max-width: 520px;
    }
}

/* Tablet horizontal: panel lateral más bajo y compacto */
@media
    (min-width: 768px)
    and (max-width: 1180px)
    and (orientation: landscape) {

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        width: var(
            --cs-ema-tablet-panel-width,
            min(490px, 46vw)
        );

        max-width: 500px;

        height: var(
            --cs-ema-mobile-panel-height,
            min(650px, 78dvh)
        );

        top: var(
            --cs-ema-mobile-panel-top,
            max(70px, 9vh)
        );
    }

    .csstream-ema-heading span {
        max-width: 205px;
    }
}

/* Tablets pequeñas, p.ej. 768 x 1024 */
@media (min-width: 768px) and (max-width: 860px) {
    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        min-width: 390px;
        width: min(
            var(--cs-ema-tablet-panel-width, 460px),
            calc(
                100vw
                - env(safe-area-inset-left)
                - env(safe-area-inset-right)
                - 36px
            )
        );
    }

    .csstream-ema-bubble {
        max-width: 90%;
    }
}

/* =========================================================
 * iPHONE / MOBILE COMPACT 1.7.3
 * Menos invasivo + teclado sin mover la página de fondo
 * ======================================================= */

html.csstream-ema-page-locked,
body.csstream-ema-page-locked {
    overscroll-behavior: none !important;
}

@media (max-width: 767px) {
    .csstream-ema-widget {
        z-index: 2147483000;
    }

    .csstream-ema-launcher {
        min-width: 136px;
        height: 48px;
        padding: 0 10px 0 7px;
        border-radius: 15px;
        gap: 7px;
    }

    .csstream-ema-launcher-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .csstream-ema-launcher-copy strong {
        font-size: 12px;
        line-height: 1.05;
    }

    .csstream-ema-launcher-copy small {
        max-width: 82px;
        font-size: 8.5px;
        line-height: 1.15;
    }

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        left: max(
            10px,
            env(safe-area-inset-left)
        ) !important;

        right: max(
            10px,
            env(safe-area-inset-right)
        ) !important;

        width: auto;
        min-height: 280px;
        border-radius: 18px;

        box-shadow:
            0 18px 55px rgba(0,0,0,.42),
            0 0 0 1px rgba(255,255,255,.035);
    }

    .csstream-ema-header {
        min-height: 60px;
        padding: 8px 8px 8px 11px;
        gap: 8px;
    }

    .csstream-ema-avatar {
        width: 36px;
        height: 36px;
    }

    .csstream-ema-online-dot {
        width: 9px;
        height: 9px;
    }

    .csstream-ema-heading strong {
        font-size: 13px;
    }

    .csstream-ema-heading span {
        max-width: 175px;
        font-size: 9px;
    }

    .csstream-ema-close {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        font-size: 22px;
    }

    .csstream-ema-messages {
        padding: 9px 10px 7px;
    }

    .csstream-ema-bubble {
        max-width: 92%;
        padding: 9px 10px;
        font-size: 12.5px;
        line-height: 1.4;
    }

    .csstream-ema-section-label {
        padding: 4px 10px 0;
        font-size: 7.5px;
    }

    .csstream-ema-quick-actions {
        gap: 5px;
        padding: 6px 9px 7px;
    }

    .csstream-ema-quick-actions button {
        min-height: 30px;
        padding: 5px 8px;
        border-radius: 10px;
        font-size: 9.5px;
    }

    .csstream-ema-form {
        gap: 6px;
        padding:
            7px
            8px
            calc(7px + env(safe-area-inset-bottom));
    }

    .csstream-ema-input {
        min-height: 42px;
        max-height: 80px;
        border-radius: 12px;
        font-size: 16px !important;
        padding: 9px 10px !important;
    }

    .csstream-ema-send {
        width: 42px;
        min-width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .csstream-ema-footer {
        min-height: 28px;
        padding: 4px 9px;
        font-size: 7.8px;
    }

    /*
     * El aviso de privacidad deja de ser una banda blanca
     * grande en móvil y se integra en el tema oscuro.
     */
    .csstream-ema-privacy {
        min-height: 24px;
        padding:
            4px
            9px
            calc(4px + env(safe-area-inset-bottom));
        background: #0d1014 !important;
        color: #8f969e !important;
        border-top: 1px solid rgba(255,255,255,.045);
        font-size: 7px;
        line-height: 1.2;
    }

    .csstream-ema-privacy a {
        color: #b9bec5 !important;
    }

    /*
     * Con teclado: ultra compacto.
     */
    .csstream-ema-widget--keyboard-open .csstream-ema-panel {
        left: max(
            6px,
            env(safe-area-inset-left)
        ) !important;

        right: max(
            6px,
            env(safe-area-inset-right)
        ) !important;

        border-radius: 13px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-header {
        min-height: 48px;
        padding: 5px 7px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-avatar {
        width: 32px;
        height: 32px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-heading strong {
        font-size: 12px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-messages {
        padding: 6px 8px 5px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-bubble {
        padding: 7px 9px;
        font-size: 12px;
        line-height: 1.35;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-form {
        padding:
            5px
            6px
            max(5px, env(safe-area-inset-bottom));
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-input {
        min-height: 40px;
        max-height: 68px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-send {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .csstream-ema-widget--keyboard-open .csstream-ema-heading span,
    .csstream-ema-widget--keyboard-open .csstream-ema-preview-badge,
    .csstream-ema-widget--keyboard-open .csstream-ema-section-label,
    .csstream-ema-widget--keyboard-open .csstream-ema-quick-actions,
    .csstream-ema-widget--keyboard-open .csstream-ema-footer,
    .csstream-ema-widget--keyboard-open .csstream-ema-privacy {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .csstream-ema-launcher {
        min-width: 128px;
        height: 46px;
    }

    .csstream-ema-panel,
    .csstream-ema-widget--right .csstream-ema-panel,
    .csstream-ema-widget--left .csstream-ema-panel {
        left: max(
            6px,
            env(safe-area-inset-left)
        ) !important;
        right: max(
            6px,
            env(safe-area-inset-right)
        ) !important;
        border-radius: 15px;
    }

    .csstream-ema-heading span {
        max-width: 145px;
    }
}

/* =========================================================
 * MOBILE BOTTOM CLEARANCE 1.7.4
 * Reserva zona para teléfono, reCAPTCHA y otros widgets
 * ======================================================= */

@media (max-width: 767px) {
    /*
     * El launcher minimizado también sube para evitar
     * chocar con otros botones flotantes.
     */
    .csstream-ema-widget:not(.csstream-ema-widget--open) {
        bottom: max(
            var(--cs-ema-mobile-bottom-clearance, 108px),
            calc(env(safe-area-inset-bottom) + 82px)
        );
    }

    /*
     * Zona de Nueva conversación con altura táctil real.
     */
    .csstream-ema-footer {
        min-height: 36px;
        padding: 6px 10px;
        position: relative;
        z-index: 4;
    }

    .csstream-ema-footer a,
    .csstream-ema-footer button {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
    }

    .csstream-ema-privacy {
        position: relative;
        z-index: 4;
    }

    .csstream-ema-panel {
        overflow: hidden;
    }

    /*
     * Con teclado no reservamos ese margen inferior especial,
     * porque VisualViewport ya limita el área útil.
     */
    .csstream-ema-widget--keyboard-open .csstream-ema-footer,
    .csstream-ema-widget--keyboard-open .csstream-ema-privacy {
        display: none !important;
    }
}