/* ══════════════════════════════════════════════════════════════════════════
   Ally Widget — project overrides
   Loaded after the widget injects its own <style>. Scoped to the widget only.
   ══════════════════════════════════════════════════════════════════════════ */

/* Rule #6 — no accessibility text on the toggle button.
   By default the FAB expands from a circle to a pill on hover/focus, revealing
   an "Accessibility" label (.acc-toggle-content). Hide that label and pin the
   toggle to its icon-only size in every state so no text ever appears. The
   aria-label (screen-reader text) is untouched. */
#allyWidget .acc-toggle-content {
    display: none !important;
}

#allyWidget,
#allyWidget:hover,
#allyWidget:focus,
#allyWidget:focus-visible,
#allyWidget:active {
    width: var(--acc-button-size, 52px) !important;
    min-width: var(--acc-button-size, 52px) !important;
    max-width: var(--acc-button-size, 52px) !important;
    padding: 0 !important;
}

/* Footer overlap — the widget positions the footer (Reset + branding) as
   position:absolute pinned to the panel bottom, while the scrollable content
   only reserves ~36px bottom padding. On short viewports the footer (~110px)
   then overlaps the last content row (the Interaction buttons), which can't be
   scrolled into view. Put the footer back in the flex flow so content always
   scrolls fully above it. */
.acc-footer {
    position: relative !important;
}

/* Header — give the panel's title bar more vertical breathing room than the
   widget's cramped default (~30–38px). It is flex + align-items:center, so the
   icon and title stay vertically centred. */
.acc-menu-header {
    min-height: 64px !important;
}

/* Panel height — the widget anchors the panel at bottom: 88px but caps its
   max-height at ~calc(100vh - 24px), ignoring that bottom offset. On short
   viewports (small laptops, short windows) the panel then overflows the top
   and the header + close button are pushed off-screen. Set the widget's own
   max-height token to account for the bottom anchor (~88px) plus a top margin,
   so the header stays visible and the body scrolls internally. */
:root {
    --acc-menu-max-height: calc(100vh - 120px) !important;
}

/* Responsiveness — on narrow phones the right-anchored panel is a few px wider
   than the viewport, clipping its left edge. Constrain the panel width (via the
   widget's own token) so it sits fully on-screen with a small margin. */
@media (max-width: 480px) {
    :root {
        --acc-menu-max-width: calc(100vw - 40px) !important;
    }
}