/* Inside Poll - the poll stack in the sidebar.
 *
 * One stack, moved by js/polls.js between the panes that show it, and always
 * pinned: a poll the reader has to go looking for is one they will not answer,
 * and the chat in particular opens at its newest message, a long way below the
 * top of the column.
 *
 * What it pins against is whatever actually scrolls, which is not the same
 * everywhere:
 *
 *   desktop chat     #chatContent scrolls itself, so the stack sits inside it
 *                    and pins to its top, the negative offset below cancelling
 *                    that column's padding. Nothing to measure.
 *
 *   everywhere else  .sidebar is the scroll container, shared with the sticky
 *                    tab bar and the ad band, so the stack has to clear both.
 *                    Their heights move with the breakpoint and with whether
 *                    an ad is showing, so js/polls.js measures them and sets
 *                    `top` - see syncStickyOffset. On a small screen that is
 *                    also why the chat's stack hangs from #chatTab rather than
 *                    from #chatContent: a sticky element pins against its
 *                    nearest scroll container, and inside #chatContent, which
 *                    does not scroll there, it would ride away with the page.
 */

.polls-stack {
    position: sticky;
    top: -24px;                 /* cancels #chatContent's 24px top padding */
    /* Above the channel tiles, which scroll underneath it: their overlay
     * gradient sits at 99 and the add/remove toggle at 999999, so a low value
     * here let them show through the pinned card. Below .rightbar-ad's 1111110
     * and .sidebar-header's 1111111, which pin above it. */
    z-index: 1111109;
    margin: -24px -24px 16px;   /* bleed to the column edges, then breathe */
    padding: 12px 24px 0;
    background-color: #0A0D18;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Inter', sans-serif;
}

/* In the camera pane the stack sits inside #camerasTab's own 24px padding, so
 * it neither bleeds out to the edges nor cancels a padding of its own. The
 * sidebar is the scroll container here, and what is already pinned inside it
 * varies, so js/polls.js measures that and sets `top`. Two classes deep, so it
 * wins over the <=960px rule whichever order the two are read in. */
.polls-stack.polls-stack-cameras {
    top: 0;
    margin: 0 0 16px;
    padding: 8px 0;
}

/* The live and upcoming panes carry no padding of their own - it sits on the
 * list inside them - so the stack supplies its own to line up with the tiles. */
.polls-stack.polls-stack-list {
    top: 0;
    margin: 0 0 16px;
    padding: 8px 24px;
}

/* The column behind a pinned stack scrolls under it, so it needs something
 * opaque under the cards at every width. */
.polls-stack,
.polls-stack.polls-stack-cameras {
    background-color: #0A0D18;
}

/* Every card can render nothing (voted-check still pending, dismissAfterVote)
 * - then the stack must not leave a gap behind. */
.polls-stack:empty {
    display: none;
}

/* ------------------------------------------------------------------- card */

.poll-widget {
    background: #141A2B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    color: #FFFFFF;
}

/* A card whose render() produced nothing must not show its own chrome. */
.poll-widget:empty {
    display: none;
}

.poll-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}

.poll-header-icon {
    font-size: 12px;
    color: #FF5900;
}

.poll-header-title {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poll-collapse-btn {
    background: none;
    border: 0;
    padding: 0 2px;
    color: #C3C4C6;
    font-size: 12px;
    cursor: pointer;
}

/* One icon rotated by CSS, so the flip animates. */
.poll-collapse-btn i {
    transition: transform 0.25s ease;
}

.poll-widget.collapsed .poll-collapse-btn i {
    transform: rotate(180deg);
}

/* The body stays mounted and animates its height rather than unmounting. */
.poll-body-wrap {
    max-height: 1200px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    overflow: hidden;
}

.poll-body-wrap.collapsed {
    max-height: 0;
    opacity: 0;
}

.poll-body {
    padding: 0 12px 12px;
}

.poll-image {
    display: block;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.poll-question {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #FFFFFF;
}

/* ---------------------------------------------------------- answer + vote */

.poll-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-answer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    font-size: 13px;
}

.poll-answer input {
    display: none;
}

.poll-answer-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: transparent;
}

.poll-answer.selected .poll-answer-radio,
.poll-answer-radio.checked {
    border-color: #FF5900;
    background: #FF5900;
    color: #0A0D18;
}

.poll-answer-text {
    flex: 1;
    line-height: 1.25;
}

.poll-vote-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: #FF5900;
    color: #0A0D18;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.poll-vote-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

/* -------------------------------------------------------------- results */

.poll-result-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    font-size: 13px;
}

/* The bar sits behind the row; every sibling is lifted above it. Width
 * transitions so live count updates slide instead of jumping. */
.poll-result-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(255, 89, 0, 0.55), rgba(255, 89, 0, 0.25));
    transition: width 0.6s ease;
}

.poll-result-row > *:not(.poll-result-bar) {
    position: relative;
    z-index: 1;
}

.poll-result-row.mine .poll-result-bar {
    background: linear-gradient(90deg, #FF5900, rgba(255, 89, 0, 0.5));
}

.poll-result-pct {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 12px;
}

.poll-total-votes,
.poll-note,
.poll-countdown {
    margin-top: 10px;
    font-size: 11px;
    color: #C3C4C6;
    text-align: center;
}

/* The vote total and the countdown read as captions on what is above them, so
 * they sit under its left edge. The closed notice stays centred - it is a
 * status for the whole card rather than a note on the rows. */
.poll-total-votes,
.poll-countdown {
    text-align: left;
}

.poll-total-votes b,
.poll-countdown b {
    color: #FFFFFF;
}

.poll-note-closed {
    color: #FF5900;
}

/* ------------------------------------------------------------ small screens
 * Here the sidebar is the scroll container for both panes - #chatContent does
 * not scroll - so the stack hangs from the pane itself (see chatHost in
 * js/polls.js) and pins below the sticky tab bar, with js/polls.js setting
 * `top` to however far down that reaches. It has to stay pinned: the chat
 * opens at its newest message, so a stack that scrolled with the content
 * started off screen and stayed there.
 *
 * The margins line up the card with whatever is under it - the message padding
 * in the chat, the channel tiles on the camera tab. */
@media screen and (max-width: 960px) {
    .polls-stack {
        top: 0;                 /* replaced by js/polls.js */
        /* Full width with the inset as padding, not margin: a pinned stack has
         * the column sliding underneath it, and a margin would leave a gap at
         * each side for the messages to show through. */
        margin: 0 0 12px;
        padding: 8px 16px;
        /* js/polls.js caps the height; this is what makes the cap scrollable
         * rather than a crop. */
        overflow-y: auto;
    }

    /* The stack is a column flex container, so under a cap its cards would
     * shrink to fit instead of overflowing - and a squashed card is exactly
     * what the cap is there to avoid. Let them keep their height and scroll. */
    .polls-stack > .poll-widget {
        flex-shrink: 0;
    }

    .polls-stack.polls-stack-cameras {
        padding: 8px 10px;
    }

    .polls-stack.polls-stack-list {
        padding: 8px 16px;
    }
}

@media screen and (max-width: 960px) and (orientation: landscape) {
    .polls-stack.polls-stack-cameras {
        padding: 8px 16px;
    }
}