.scroll-ad-cancel-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
    }


    /* Floating 3D back FAB — above bottom nav */
    .md-fab-back {
        --fab-size: 52px;
        position: fixed !important;
        right: 16px !important;
        /* Flush footer is 64px; keep a 10px gap. No safe-area (RN WebView already clears it). */
        bottom: 74px !important;
        z-index: 99 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: var(--fab-size);
        height: var(--fab-size);
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        text-decoration: none;
        color: #fff !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        background:
            radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4) 0%, transparent 42%),
            linear-gradient(160deg, #42a5f5 0%, #1976d2 45%, #1565c0 100%);
        box-shadow:
            0 2px 8px rgba(15, 23, 42, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 2px rgba(0, 0, 0, 0.12);
        transform: translate3d(0, 0, 0);
        transition:
            transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
            box-shadow 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .md-fab-back::before {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 55%);
        pointer-events: none;
    }

    .md-fab-back i {
        position: relative;
        z-index: 1;
        font-size: 1.125rem;
        line-height: 1;
        color: #fff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
        transform: translateX(-1px);
    }

    .md-fab-back:hover {
        color: #fff !important;
        transform: translate3d(0, -1px, 0);
        box-shadow:
            0 4px 12px rgba(15, 23, 42, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    }

    .md-fab-back:active,
    .md-fab-back.is-pressed {
        color: #fff !important;
        transform: translate3d(0, 1px, 0);
        box-shadow:
            0 1px 4px rgba(15, 23, 42, 0.16),
            inset 0 2px 4px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .md-fab-back:focus-visible {
        outline: 2px solid #90caf9;
        outline-offset: 3px;
    }

    /* Hide only when a real sheet/drawer is open — not the processing logger */
    html:has(#menu_nav.menu-active) .md-fab-back,
    html:has(.menu-box-modal.menu-active) .md-fab-back,
    html:has(.menu-box-bottom.menu-active) .md-fab-back {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .md-fab-back {
            transition: none;
        }
    }

    /* FAB dock — one split 3D pill: Ask ZAP (teal) over Back (blue); below sheets (z 1200) so open sheets cover it */
    .zap-fab-dock {
        position: fixed;
        right: 10px;
        bottom: 76px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 52px;
        padding: 0;
        border-radius: 26px;
        overflow: hidden;
        isolation: isolate;
        box-shadow:
            0 0 0 3px #fff,
            0 10px 24px rgba(15, 23, 42, 0.22),
            0 2px 6px rgba(15, 23, 42, 0.12);
        transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* One gloss across the whole pill */
    .zap-fab-dock::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
        background:
            radial-gradient(ellipse 70% 22% at 38% 8%, rgba(255, 255, 255, 0.42) 0%, transparent 100%),
            linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, transparent 38%, transparent 70%, rgba(0, 0, 0, 0.1) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            inset 0 -2px 3px rgba(0, 0, 0, 0.16);
        pointer-events: none;
    }

    .zap-fab-dock .md-fab-back,
    .zap-fab-dock .zap-ask-fab {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 52px !important;
        height: 50px !important;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0 !important;
        color: #fff !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        box-shadow: none !important;
        transform: none !important;
        transition: filter 0.12s ease, background-color 0.12s ease;
    }

    .zap-fab-dock {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(241, 245, 251, 0.55) 100%);
        -webkit-backdrop-filter: saturate(160%) blur(12px);
        backdrop-filter: saturate(160%) blur(12px);
        box-shadow:
            0 0 0 1px rgba(15, 23, 42, 0.07),
            0 8px 22px rgba(15, 23, 42, 0.14),
            0 2px 6px rgba(15, 23, 42, 0.08) !important;
    }

    .zap-fab-dock::after {
        background: radial-gradient(ellipse 70% 20% at 40% 6%, rgba(255, 255, 255, 0.6) 0%, transparent 100%) !important;
        box-shadow: inset 0 -1px 2px rgba(15, 23, 42, 0.06) !important;
    }

    .zap-fab-dock .md-fab-back::before {
        display: none;
    }

    .zap-fab-dock .zap-ask-fab,
    .zap-fab-dock .md-fab-back {
        background: transparent !important;
    }

    /* Glowing badge behind the sparkle */
    .zap-fab-dock .zap-ask-fab::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 34px;
        height: 34px;
        margin: -17px 0 0 -17px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.45) 0%, transparent 45%),
            linear-gradient(145deg, #2dd4bf 0%, #1a73e8 100%);
        box-shadow:
            0 0 14px rgba(45, 212, 191, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            inset 0 -1px 2px rgba(0, 0, 0, 0.18);
        transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
        pointer-events: none;
    }

    .zap-fab-dock .zap-ask-fab svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Frosted badge behind the back arrow */
    .zap-fab-dock .md-fab-back i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background:
            radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4) 0%, transparent 45%),
            linear-gradient(160deg, #42a5f5 0%, #1976d2 50%, #1565c0 100%);
        box-shadow:
            0 2px 6px rgba(21, 101, 192, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 2px rgba(0, 0, 0, 0.15);
        color: #fff;
        font-size: 0.9375rem !important;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    }

    .zap-fab-dock .zap-ask-fab:active::before,
    .zap-fab-dock .zap-ask-fab.is-pressed::before {
        transform: scale(0.88);
    }

    /* Hairline divider between the halves */
    .zap-fab-dock .zap-ask-fab::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 1px;
        background: rgba(15, 23, 42, 0.08);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
        pointer-events: none;
    }

    .zap-fab-dock .zap-ask-fab svg {
        position: relative;
        z-index: 1;
        width: 20px;
        height: 20px;
        filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.22));
    }

    .zap-fab-dock .md-fab-back i {
        font-size: 1rem;
        transform: none;
    }

    .zap-fab-dock .zap-ask-fab svg,
    .zap-fab-dock .md-fab-back i {
        transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .zap-fab-dock .zap-ask-fab:active,
    .zap-fab-dock .zap-ask-fab.is-pressed,
    .zap-fab-dock .md-fab-back:active,
    .zap-fab-dock .md-fab-back.is-pressed {
        filter: brightness(0.84);
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.28) !important;
    }

    .zap-fab-dock .zap-ask-fab:active svg,
    .zap-fab-dock .zap-ask-fab.is-pressed svg,
    .zap-fab-dock .md-fab-back:active i,
    .zap-fab-dock .md-fab-back.is-pressed i {
        transform: scale(0.86);
    }

    /* Timeline back-to-top joins the top of the pill; collapses until scrolled */
    .zap-fab-dock .md-fab-top {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 52px !important;
        height: 0 !important;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s ease, visibility 0.2s ease, filter 0.12s ease;
    }

    .zap-fab-dock .md-fab-top.is-visible {
        height: 50px !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .zap-fab-dock .md-fab-top::before {
        display: none;
    }

    .zap-fab-dock .md-fab-top::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 1px;
        background: rgba(15, 23, 42, 0.08);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
        pointer-events: none;
    }

    /* Light badge so it reads apart from the blue Back badge */
    .zap-fab-dock .md-fab-top i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(180deg, #ffffff 0%, #e8f0fe 100%);
        box-shadow:
            0 2px 6px rgba(26, 115, 232, 0.22),
            0 0 0 1px rgba(26, 115, 232, 0.12),
            inset 0 1px 0 #fff;
        color: #1a73e8;
        font-size: 0.9375rem;
        text-shadow: none;
        transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .zap-fab-dock .md-fab-top:active,
    .zap-fab-dock .md-fab-top.is-pressed {
        filter: brightness(0.9);
    }

    .zap-fab-dock .md-fab-top:active i,
    .zap-fab-dock .md-fab-top.is-pressed i {
        transform: scale(0.86);
    }

    .zap-fab-dock .md-fab-top:focus-visible {
        outline: 2px solid #1a73e8;
        outline-offset: -4px;
    }

    /* Back hidden by the page: Ask ZAP alone becomes a round 3D button */
    .zap-fab-dock.zap-fab-dock--solo .zap-ask-fab {
        height: 52px !important;
    }

    .zap-fab-dock.zap-fab-dock--solo .zap-ask-fab::after {
        display: none;
    }

    /* First-visit hint beside the sparkle */
    .zap-ask-hint {
        position: fixed;
        z-index: 99;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 60vw;
        padding: 8px 12px;
        border: none;
        border-radius: 999px;
        background: #0f766e;
        color: #fff;
        font: 600 0.8125rem/1.2 "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        white-space: nowrap;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
        transform: translate(8px, -50%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
        cursor: pointer;
    }

    .zap-ask-hint::after {
        content: "";
        position: absolute;
        right: -5px;
        top: 50%;
        width: 10px;
        height: 10px;
        background: inherit;
        border-radius: 2px;
        transform: translateY(-50%) rotate(45deg);
    }

    .zap-ask-hint.is-visible {
        opacity: 1;
        transform: translate(0, -50%);
        pointer-events: auto;
    }

    html.zap-ask-open .zap-ask-hint {
        display: none;
    }

    /* Ask ZAP working in the background (panel closed): slow ring round the sparkle */
    .zap-fab-dock .zap-ask-fab__ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 42px;
        height: 42px;
        margin: -21px 0 0 -21px;
        border: 2px solid rgba(26, 115, 232, 0.14);
        border-top-color: #1a73e8;
        border-right-color: #2dd4bf;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        box-sizing: border-box;
    }

    .zap-fab-dock .zap-ask-fab.is-thinking .zap-ask-fab__ring {
        opacity: 1;
        animation: zap-ask-spin 1.1s linear infinite;
    }

    @keyframes zap-ask-spin {
        to { transform: rotate(360deg); }
    }

    /* Unread reply: dot on the badge until the panel is opened */
    .zap-fab-dock .zap-ask-fab__dot {
        position: absolute;
        top: 7px;
        right: 8px;
        z-index: 2;
        width: 11px;
        height: 11px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
        transform: scale(0);
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1.4);
        pointer-events: none;
        box-sizing: border-box;
    }

    .zap-fab-dock .zap-ask-fab.has-reply .zap-ask-fab__dot {
        transform: scale(1);
    }

    .zap-fab-dock .zap-ask-fab.has-reply--error .zap-ask-fab__dot {
        background: #f59e0b;
    }

    .zap-ask-hint.zap-ask-reply {
        background: #1a73e8;
    }

    .zap-ask-hint.zap-ask-reply--error {
        background: #b45309;
    }

    .zap-ask-reply__cta {
        font-weight: 500;
        opacity: 0.85;
    }

    .zap-fab-dock .zap-ask-fab:focus-visible,
    .zap-fab-dock .md-fab-back:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }

    html.zap-ask-open .zap-fab-dock,
    html.zap-ask-open .md-fab-back {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html:has(#menu_nav.menu-active) .zap-fab-dock,
    html:has(.menu-box-modal.menu-active) .zap-fab-dock,
    html:has(.menu-box-bottom.menu-active) .zap-fab-dock,
    html:has(#menu_nav.menu-active) .zap-ask-hint,
    html:has(.menu-box-modal.menu-active) .zap-ask-hint,
    html:has(.menu-box-bottom.menu-active) .zap-ask-hint {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .zap-fab-dock,
        .zap-ask-fab {
            transition: none;
        }

        .zap-fab-dock .zap-ask-fab.is-thinking .zap-ask-fab__ring {
            animation-duration: 3s;
        }
    }