/**
 * Semioticom floating controls refresh
 *
 * Keeps the chat iframe and scroll-to-top button anchored to the visible
 * mobile viewport. These controls are injected/positioned separately from the
 * main header and can otherwise sit at the far edge of an oversized layout or
 * an old visual viewport state on mobile browsers.
 *
 * v11 note:
 * The FrontChat iframe needs more frame space than the visible round button.
 * Forcing the iframe down to the same size as the scroll-to-top pill clips the
 * chat icon inside the iframe. The scroll button and the chat iframe now use
 * separate size variables.
 */

@media (max-width: 1200px) {
    :root {
        --sem-floating-right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px));
        --sem-floating-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px));
        --sem-floating-scroll-size: 58px;
        --sem-floating-chat-frame-size: 88px;
        --sem-floating-gap: 10px;
    }

    html,
    body {
        overflow-x: clip;
        overscroll-behavior-x: none;
    }

    .scroll-to-top {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: var(--sem-floating-right) !important;
        bottom: calc(var(--sem-floating-bottom) + var(--sem-floating-chat-frame-size) + var(--sem-floating-gap)) !important;
        width: var(--sem-floating-scroll-size) !important;
        height: var(--sem-floating-scroll-size) !important;
        min-width: var(--sem-floating-scroll-size) !important;
        min-height: var(--sem-floating-scroll-size) !important;
        max-width: var(--sem-floating-scroll-size) !important;
        max-height: var(--sem-floating-scroll-size) !important;
        padding: 0 !important;
        transform: none !important;
        translate: none !important;
        margin: 0 !important;
        border-radius: 999px !important;
        z-index: 10010 !important;
        contain: layout paint;
        touch-action: manipulation;
    }

    iframe#front-chat-iframe,
    iframe[id^="front-chat"] {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: calc(var(--sem-floating-right) - 15px) !important;
        bottom: calc(var(--sem-floating-bottom) - 15px) !important;
        width: var(--sem-floating-chat-frame-size) !important;
        height: var(--sem-floating-chat-frame-size) !important;
        min-width: var(--sem-floating-chat-frame-size) !important;
        min-height: var(--sem-floating-chat-frame-size) !important;
        max-width: calc(100vw - (2 * var(--sem-floating-right))) !important;
        max-height: calc(100dvh - 120px) !important;
        transform: none !important;
        translate: none !important;
        margin: 0 !important;
        z-index: 10020 !important;
        contain: layout paint;
    }

    /* Some chat widgets inject a surrounding container instead of only an iframe.
       Keep that wrapper tied to the same mobile viewport edge if present, but do
       not clip the iframe content. */
    [id^="front-chat"]:not(iframe),
    [class*="front-chat"]:not(iframe) {
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
        overflow: visible !important;
    }
}

@media (max-width: 480px) {
    :root {
        --sem-floating-right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px));
        --sem-floating-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
        --sem-floating-scroll-size: 56px;
        --sem-floating-chat-frame-size: 86px;
        --sem-floating-gap: 8px;
    }
}