/* ==========================================================
           SAFARI WINDOW: metrics taken from the Figma spec:
           frame rgba(255,255,255,.75) + blur(40px), 0.5px border,
           10px radius, 52px toolbar, 12px traffic lights at 20/20
           with 20px pitch, 480x28 centred tab row at top 12px.
           ========================================================== */
        .safari-window {
            position: fixed;
            inset: 0;
            transform: translateY(10px);
            background: #1c1c1e;
            border: none;
            border-radius: 0;
            z-index: 5500;
            display: none;
            flex-direction: column;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .safari-window.active {
            display: flex;
            opacity: 1;
            transform: none;
        }

        /* ---- toolbar ---- */
        .safari-toolbar {
            position: relative;
            z-index: 5;
            flex: 0 0 52px;
            height: 52px;
            background: var(--safari-tint, #FED967);
            user-select: none;
            cursor: default;
        }

        .safari-traffic { position: absolute; left: 19px; top: 18px; width: 16px; height: 16px; }

        .safari-traffic span {
            position: absolute;
            top: 0;
            width: 16px;
            height: 16px;
            box-sizing: border-box;
            border: 0.5px solid rgba(0, 0, 0, 0.12);
            border-radius: 50%;
        }

        .safari-traffic .sf-close { left: 0; background: #EC6A5E; cursor: pointer; }

        /* The close button asks to be pressed. Only transform and opacity
           animate: the halo's blur is baked into a gradient and rasterised
           once, so this costs nothing per frame. Animating a drop-shadow
           radius here would re-run a blur on every frame instead. */
        .safari-traffic .sf-close::after {
            content: '';
            position: absolute;
            inset: -9px;
            border-radius: 50%;
            background: radial-gradient(circle,
                        rgba(255, 92, 78, 0.55) 0%,
                        rgba(255, 64, 50, 0.38) 40%,
                        rgba(255, 48, 36, 0) 72%);
            pointer-events: none;   /* never swallow the click it is advertising */
            animation: sfCloseHalo 1.8s ease-in-out infinite;
        }

        .safari-traffic .sf-close {
            animation: sfClosePulse 1.8s ease-in-out infinite;
        }

        @keyframes sfCloseHalo {
            0%, 100% { opacity: 0.30; }
            50%      { opacity: 1; }
        }

        @keyframes sfClosePulse {
            0%, 100% { transform: scale(1); }
            50%      { transform: scale(1.12); }
        }

        /* Sits in the free band along the bottom of the toolbar, directly under
           the red dot: everything else in the chrome stops at y=40 of 52.
           pointer-events:none so it can never swallow the click it is asking for.
           Only opacity animates, so the blink costs nothing per frame. */
        .sf-closehint {
            position: absolute;
            left: 17px;
            bottom: 3px;
            font-family: 'SF Pro Rounded', ui-rounded, -apple-system, sans-serif;
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            white-space: nowrap;
            color: var(--sf-hint-ink, #262626);
            opacity: 0.16;
            pointer-events: none;
            user-select: none;
            animation: sfHintBlink 2.6s ease-in-out infinite;
        }

        @keyframes sfHintBlink {
            0%, 100% { opacity: 0.16; }
            50%      { opacity: 0.55; }
        }

        @media (prefers-reduced-motion: reduce) {
            .sf-closehint { animation: none; opacity: 0.42; }
            /* the glow stays, the movement goes */
            .safari-traffic .sf-close { animation: none; }
            .safari-traffic .sf-close::after { animation: none; opacity: 0.75; }
        }

        /* On a phone the window has no traffic lights to aim at: the device's
           own back gesture is the way out, and the hint would sit over the
           page. */
        @media (max-width: 768px) {
            .sf-closehint { display: none; }
        }

        .safari-icon { color: #3D3D3D; opacity: 0.7; display: block; }

        .safari-nav {
            position: absolute;
            left: 96px;
            top: 16px;
            height: 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;
        }

        .safari-nav .sf-rule { width: 1px; height: 18px; background: #3D3D3D; opacity: 0.1; }
        .safari-back { position: absolute; left: 159px; top: 16px; }

        .safari-pinned {
            position: absolute;
            left: 188px;
            top: 12px;
            width: 32px;
            height: 28px;
            border-radius: 6px;
            background: rgba(61, 61, 61, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .safari-pinned i {
            width: 12px;
            height: 12px;
            border-radius: 20px;
            background: rgba(61, 61, 61, 0.45);
            display: block;
        }

        .safari-tabrow {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: min(480px, 40%);
            height: 28px;
        }

        .safari-tab {
            position: relative;
            width: 100%;
            height: 28px;
            background: rgba(61, 61, 61, 0.2);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .safari-site { display: flex; flex-direction: row; align-items: center; gap: 9px; }

        .safari-favicon {
            width: 16px;
            height: 16px;
            border-radius: 20px;
            background: var(--safari-favicon, #3D3D3D);
            flex: none;
        }

        .safari-url {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
            font-size: 14px;
            line-height: 17px;
            letter-spacing: 0.015em;
            color: #3D3D3D;
            white-space: nowrap;
        }

        .safari-lock { font-size: 11px; color: #3D3D3D; opacity: 0.7; }

        .safari-ellipsis {
            position: absolute;
            right: 9px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px;
            line-height: 18px;
            color: #3D3D3D;
            opacity: 0.7;
        }

        .safari-actions {
            position: absolute;
            right: 26px;
            top: 16px;
            height: 20px;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 24px;
        }

        /* ---- page viewport ---- */
        /* No backdrop-filter here. The background above is fully opaque, so the
           blur had nothing to show through it, but it still made this element the
           containing block for its own fixed children. Anchored to the scroll
           origin, they scrolled away with the content instead of staying put. */
        .safari-viewport {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            background: #0b0b0d;
        }

        .safari-viewport::-webkit-scrollbar { width: 10px; }
        .safari-viewport::-webkit-scrollbar-track { background: transparent; }
        .safari-viewport::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.16);
            border-radius: 5px;
        }

        @media (max-width: 768px) {
            .safari-nav, .safari-back, .safari-pinned, .safari-actions { display: none; }
            .safari-tabrow { width: 60%; }
        }