/*
 * Unified draggable accessibility toolbar.
 *
 * Wraps the font-size, voice-reader and translate controls into ONE
 * floating bar instead of three separate stacked pills. Collapsed to a
 * small round button by default (so it never covers page content) --
 * click/tap it to expand and reveal the controls, click again (or the ×,
 * or click outside) to collapse. The same button doubles as a drag
 * handle: dragging it moves the whole toolbar (collapsed or expanded);
 * a plain tap (no movement) toggles open/closed instead. Position is
 * remembered in localStorage (see static/assets/js/a11y-toolbar.js).
 *
 * Loaded once from templates/base.html, after the three individual
 * control stylesheets, which style only their own buttons/select and no
 * longer position themselves.
 */

.evito-a11y-toolbar {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    padding: 6px 14px 6px 6px;
    font-family: Arial, Helvetica, sans-serif;
    transition: padding 0.15s ease-out;
}

/* Collapsed (default) state: hide every control group, shrink the bar down
   to just the round toggle button so it never covers page content. */
.evito-a11y-toolbar:not(.evito-a11y-expanded) {
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

.evito-a11y-toolbar:not(.evito-a11y-expanded) .evito-font-ctrl,
.evito-a11y-toolbar:not(.evito-a11y-expanded) .evito-voice-reader,
.evito-a11y-toolbar:not(.evito-a11y-expanded) .evito-translate-widget,
.evito-a11y-toolbar:not(.evito-a11y-expanded) .evito-a11y-divider,
.evito-a11y-toolbar:not(.evito-a11y-expanded) .evito-a11y-close {
    display: none;
}

/* Drag handle + open/close toggle, in one control: mouse/touch drag moves
   the toolbar; a plain click/tap (no movement) expands or collapses it.
   Also focusable and keyboard-operable -- arrow keys nudge position, Enter
   toggles open/closed (see a11y-toolbar.js). */
.evito-a11y-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #9a9a9a;
    font-size: 18px;
    line-height: 1;
    cursor: grab;
    border-radius: 50%;
    touch-action: none;
    /* required so pointer drag gestures aren't hijacked by touch-scroll */
    user-select: none;
    -webkit-user-select: none;
}

.evito-a11y-toolbar.evito-a11y-expanded .evito-a11y-handle {
    width: 32px;
    height: 40px;
    border-radius: 999px;
}

.evito-a11y-handle:hover {
    background: #f2f2f2;
    color: #555;
}

.evito-a11y-handle:active {
    cursor: grabbing;
}

.evito-a11y-handle:focus-visible {
    outline: 3px solid #37C2CC;
    outline-offset: 2px;
}

/* Explicit close button, shown only while expanded -- an alternative to
   tapping the handle again or clicking outside. */
.evito-a11y-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #9a9a9a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.evito-a11y-close:hover {
    background: #f2f2f2;
    color: #555;
}

.evito-a11y-close:focus-visible {
    outline: 3px solid #37C2CC;
    outline-offset: 2px;
}

.evito-a11y-divider {
    width: 1px;
    height: 24px;
    background: #e5e5e5;
    flex-shrink: 0;
}

/* While actively being dragged: no transition lag, and force the grab
   cursor everywhere underneath the pointer. */
.evito-a11y-toolbar.evito-a11y-dragging {
    cursor: grabbing;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.evito-a11y-toolbar.evito-a11y-dragging * {
    cursor: grabbing !important;
}

@media (max-width: 576px) {
    .evito-a11y-toolbar.evito-a11y-expanded {
        left: 12px;
        bottom: 12px;
        /* Stack each control group into its own row instead of wrapping
           them wide -- a wide wrapped bar was spanning almost the full
           screen width and covering page content underneath it. A narrow,
           compact vertical column hugs the corner instead. */
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        max-width: 168px;
        width: max-content;
        border-radius: 16px;
        padding: 4px;
    }

    /* Small caption above each control group so what it does is obvious
       at a glance, not just an icon to decode. Kept tiny so it costs
       almost no extra height. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-font-ctrl,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-voice-reader,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-translate-widget {
        position: relative;
        padding-top: 13px;
    }

    .evito-a11y-toolbar.evito-a11y-expanded .evito-font-ctrl::before,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-voice-reader::before,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-translate-widget::before {
        position: absolute;
        top: 0;
        left: 2px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #9a9a9a;
        text-transform: uppercase;
    }

    .evito-a11y-toolbar.evito-a11y-expanded .evito-font-ctrl::before {
        content: "Text size";
    }

    .evito-a11y-toolbar.evito-a11y-expanded .evito-voice-reader::before {
        content: "Read aloud";
    }

    .evito-a11y-toolbar.evito-a11y-expanded .evito-translate-widget::before {
        content: "Translate";
    }

    /* Each group becomes a full-width row within the narrow column,
       left-aligned instead of centered, so buttons don't get squeezed. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-font-ctrl,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-voice-reader,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-translate-widget {
        width: 100%;
        justify-content: flex-start;
    }

    /* Smaller buttons throughout this compact layout -- still comfortably
       tappable, just less visually heavy than the full-size desktop
       versions. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-font-ctrl button,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-vr-btn,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-a11y-handle,
    .evito-a11y-toolbar.evito-a11y-expanded .evito-a11y-close {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        padding: 0;
        font-size: 13px;
    }

    /* The Listen button gets a visible text label again here (hidden on
       mobile in the old wide-wrapped layout to save horizontal space) --
       each control now has its own full row, so there's room to spell out
       what the button does instead of showing only an icon. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-vr-toggle {
        width: auto;
        padding: 0 10px;
        gap: 5px;
    }

    .evito-a11y-toolbar.evito-a11y-expanded .evito-vr-text {
        font-size: 12px !important;
        /* overrides the font-size:0 mobile hiding rule in voice-reader.css */
    }

    /* Pin the close button to the top-right corner (paired with the drag
       handle at top-left) instead of leaving it as its own row at the
       bottom of the stack -- reads like a normal panel header instead of
       a trailing, disconnected control. Taken out of the column flow so
       it doesn't leave an empty row behind. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-a11y-close {
        position: absolute;
        top: 4px;
        right: 4px;
    }

    /* The handle/toggle no longer needs to sit flush against the group
       rows -- give it a bit of breathing room as its own row at the top
       of the stack, paired against the close button opposite it. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-a11y-handle {
        align-self: flex-start;
    }

    /* Dividers become full-width horizontal separators between rows
       instead of the vertical bars used in the horizontal desktop
       layout. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-a11y-divider {
        display: block;
        width: 100%;
        height: 1px;
        margin: 1px 0;
    }

    /* The translate <select> now has a full row to itself rather than
       competing for horizontal space with the other two groups, so let it
       use that space instead of staying capped at a fraction of the
       viewport width. */
    .evito-a11y-toolbar.evito-a11y-expanded .evito-tr-select {
        max-width: none;
        flex: 1;
        font-size: 12px;
        padding: 6px 8px 6px 8px;
        background-position: right 8px center;
        min-height: 32px;
    }

    .evito-a11y-toolbar.evito-a11y-expanded .evito-tr-badge {
        flex-basis: auto;
        margin-top: 0;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evito-a11y-toolbar {
        transition: none;
    }
}