/*
 * fe-dock.css — pływający dok narzędzi, wspólny dla całej strony.
 *
 * Zastępuje trzy osobne pływające widgety (lupa, „Zgłoś błąd", powrót na górę),
 * które kładły się jeden nad drugim w prawym dolnym narożniku. Dok jest jeden,
 * stoi na środku dolnej krawędzi i chowa się przy przewijaniu w dół.
 *
 * Kolory, promienie i cienie z tokenów fe-design-system.css.
 */

.fe-dock {
    position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 4px 6px;
    background: color-mix(in srgb, var(--fe-surface-raised) 72%, transparent);
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-pill);
    box-shadow: var(--fe-shadow-lg);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
    transform: translateX(-50%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

/* Po wejściu na stronę dok nie odciąga uwagi. Pojawia się po przewinięciu
   w dół, a następnie przy pierwszym ruchu z powrotem w górę. */
.fe-dock.is-hidden {
    opacity: 0;
    transform: translate(-50%, 140%);
    pointer-events: none;
    visibility: hidden;
}

.fe-dock__tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--fe-text-strong);
    background: transparent;
    border: 0;
    border-radius: var(--fe-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.fe-dock__tool[hidden] { display: none; }

.fe-dock__tool[aria-expanded="true"],
.fe-dock__tool[aria-pressed="true"] {
    background: var(--fe-dock-active);
    color: var(--fe-dock-hover-text, var(--fe-text-strong));
}

@media (hover: hover) {
    .fe-dock__tool:not(.fe-dock__tool--top):hover {
        background: var(--fe-dock-hover);
        color: var(--fe-dock-hover-text, var(--fe-text-strong));
    }
    .fe-dock__tool--top:hover {
        color: var(--fe-dock-hover-text, var(--fe-text-strong));
    }
    .fe-dock__tool--top:hover .fe-dock__icon {
        transform: translateY(-2px);
    }
}

.fe-dock__tool--top:active {
    background: var(--fe-dock-active);
    color: var(--fe-dock-hover-text, var(--fe-text-strong));
}

.fe-dock__tool:focus-visible {
    outline: var(--fe-focus-ring-width) solid var(--fe-focus-color);
    outline-offset: var(--fe-focus-ring-offset);
}

.fe-dock__icon { display: inline-flex; transition: transform 0.15s ease; }
.fe-dock__icon svg { width: 18px; height: 18px; }
.fe-dock__label { white-space: nowrap; }

.fe-dock__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    font-size: 12px;
    color: var(--fe-dock-badge-text);
    background: var(--fe-dock-badge-bg);
    border-radius: var(--fe-radius-pill, 999px);
}

/* Na wąskich ekranach podpisy nie mieszczą się w pigułce, więc zostają same
   ikony — nazwa narzędzia jest dalej czytana z etykiety dostępności. */
@media (max-width: 700px) {
    .fe-dock__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .fe-dock__tool { justify-content: center; padding: 0 6px; }
}

/* ── Jeden zestaw narzędzi na stronie ────────────────────────────────────────
 *
 * Stare pływające widgety zostają w znaczniku (obsługują je te same skrypty,
 * które dok tylko wyzwala), ale nie pokazujemy ich obok doku.
 * ────────────────────────────────────────────────────────────────────────── */

body.fe-has-dock #fe-search-trigger,
body.fe-has-dock #fe-mobile-fab,
body.fe-has-dock .fe-bug-trigger,
body.fe-has-dock #ast-scroll-top,
body.fe-has-dock .ast-scroll-top-icon,
body.fe-has-dock .fe-mobile-fab {
    display: none !important;
}

/*
 * Czytnik lekcji i stare SPA lekcji mają własny pasek narzędzi na dole ekranu.
 * Dwa paski jeden na drugim to nie zestaw narzędzi, a bałagan — tam dok ustępuje.
 */

/* Treść nie może kończyć się pod dokiem — dotyczy też przycisków akcji na
   dole ekranu, np. „Następne pytanie" w quizie. */
body.fe-has-dock .site-content,
body.fe-has-dock #content { padding-bottom: 76px; }

@media (prefers-reduced-motion: reduce) {
    .fe-dock { transition: none; }
    .fe-dock.is-hidden { display: none; transform: translateX(-50%); }
}

/* Na stronach narzędzi mobilny dok zasłaniał dolną nawigację artykułu.
 * Treść i formularz mają pierwszeństwo przed globalnymi skrótami. */
@media (max-width: 850px) {
    body:has(.fe-ct-shell--tool) .fe-dock,
    body:has(.fe-ct-shell--wide) .fe-dock {
        display: none;
    }

    body:has(.fe-ct-shell--tool) #content,
    body:has(.fe-ct-shell--wide) #content {
        padding-bottom: 24px;
    }
}