/*
 * Floating site-wide poll — edge-tab layout
 * (resources/views/partials/poll-float.blade.php)
 *
 * A vertical tab pinned to the screen's inline-start edge with the panel
 * beside it. Open is the default once revealed; the × collapses to the tab,
 * and the tab opens it again.
 *
 * A real stylesheet rather than an inline block for the same reason as
 * poll-widget.css — see gotcha 48.
 */

.poll-float {
    position: fixed;
    z-index: 900;
    inset-inline-start: 0;
    top: 50%;
    display: flex;
    align-items: stretch;

    /* translateY carries the vertical centering, so the reveal animates scale
       and opacity only — no direction-dependent translateX to get wrong in RTL. */
    transform: translateY(-50%) scale(.96);
    opacity: 0;
    visibility: hidden;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility .3s;
}

.poll-float--in {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    visibility: visible;
}

/* Standing aside while the reader is looking at the in-page poll section.
   Scale rather than a slide, for the same RTL reason as the reveal. */
.poll-float--in.poll-float--yield {
    transform: translateY(-50%) scale(.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── the tab ──────────────────────────────────────────────────── */
.poll-float__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;

    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #fff;
    background: var(--pw-accent);
    border: 0;
    cursor: pointer;

    padding: 16px 11px;
    writing-mode: vertical-rl;

    /* Square. The tab is the hard edge the card is docked against; rounding it
       on the side that meets the card left a bulge against a straight edge. */
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transition: filter .15s;
}

.poll-float__tab:hover { filter: brightness(1.08); }
.poll-float__tab:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 3px; }

.poll-float__tab-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pollFloatPulse 1.8s ease-in-out infinite;
}

@keyframes pollFloatPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ── the panel ────────────────────────────────────────────────── */
.poll-float__panel {
    flex: 0 0 auto;
    /* Height comes from the card inside it, not from the flex line: a stretched
       panel would draw its shadow around a box taller than the card whenever the
       tab is the taller of the two (a very short poll). */
    align-self: center;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;

    /* Rounded to the same radius as the card it clips. `overflow: hidden` is
       what makes the width animation reveal the card instead of reflowing it,
       but a SQUARE clip box painted the inner card's drop shadow right up into
       the four corners the card itself rounds away — a sharp-cornered grey
       layer peeking out from behind a rounded card. The clip has to follow the
       card's shape, and the lift has to live on this element: a shadow on the
       inner card is clipped by this box, a shadow on this box is not. */
    border-radius: var(--pw-float-radius, 12px);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .18);
}

.poll-float--open .poll-float__panel {
    width: min(320px, calc(100vw - 60px));
    opacity: 1;
}

/* The inner card keeps a fixed width so the panel's width animation reveals
   it rather than reflowing the text on every frame. */
.poll-float__inner {
    position: relative;
    width: min(320px, calc(100vw - 60px));
    margin: 0;

    /* Rounded on all four, and it keeps its full border — the card reads as a
       card floating next to the tab, not as a panel sliced off it. Inherits
       the 12px from .poll-widget; stated here so the pairing with the square
       tab above is one decision in one place. The shadow lives on the panel,
       not here — see the note there. */
    border-radius: var(--pw-float-radius, 12px);
    max-height: min(76vh, 560px);
    overflow-y: auto;
    padding: 16px 18px 14px;
}

.poll-float__inner .poll-widget__question {
    font-size: 15.5px;
    padding-inline-end: 26px;   /* room for the × */
}

.poll-float__close {
    position: absolute;
    z-index: 1;
    top: 10px;
    inset-inline-end: 10px;

    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .12);
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s, color .15s, opacity .15s, border-color .15s;
}

.poll-float__close:hover {
    background: var(--pw-accent);
    border-color: var(--pw-accent);
    color: #fff;
    opacity: 1;
}
.poll-float__close:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }

.poll-float__inner .poll-widget__total { margin-top: 10px; }
.poll-float__inner .poll-widget__submit { align-self: stretch; text-align: center; margin-top: 4px; }

/* ── narrow and short viewports ───────────────────────────────── */
@media (max-width: 560px) {
    .poll-float--open .poll-float__panel,
    .poll-float__inner { width: calc(100vw - 54px); }
    .poll-float__inner { max-height: 70vh; padding: 14px 15px 12px; }
}

@media (max-height: 620px) {
    .poll-float__inner { max-height: 84vh; padding: 13px 15px 11px; }
    .poll-float__inner .poll-widget__question { font-size: 14.5px; }
    .poll-float__tab { padding: 13px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .poll-float {
        transform: translateY(-50%);
        transition: opacity .2s ease, visibility .2s;
    }
    .poll-float--in,
    .poll-float--in.poll-float--yield { transform: translateY(-50%); }
    .poll-float__panel { transition: opacity .2s ease; }
    .poll-float__tab-dot { animation: none; }
    .poll-widget__track-fill { transition: none; }
}