/* The studio's parts on viewers' pages (Nov 3, batch J; studio_tools.py): a poll in the live chat, "With @guest". */
.chat-poll { margin: 8px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, #2e2e35);
  background: var(--surface-2, rgba(127, 127, 127, 0.12)); display: grid; gap: 6px; }
.chat-poll[hidden] { display: none; }
.chat-poll p { margin: 0; }
.chat-poll-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent, #e5262a); }
.chat-poll-q { font-weight: 700; overflow-wrap: anywhere; }
.chat-poll-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chat-poll-pick { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line, #2e2e35);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.chat-poll-pick:hover { border-color: var(--accent, #e5262a); }
.chat-poll-result { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px;
  overflow: hidden; background: rgba(127, 127, 127, 0.12); }
.chat-poll-result::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: rgba(229, 38, 42, 0.22); }
.chat-poll-result.is-mine { font-weight: 700; }
.chat-poll-text, .chat-poll-pct { position: relative; overflow-wrap: anywhere; }
.chat-poll-pct { font-variant-numeric: tabular-nums; }
.chat-poll-meta { font-size: 13px; opacity: 0.75; }
/* Folded up (Nov 5): compact while you vote; a one-line bar once you've answered, once it ended, and for the host */
.chat-poll { gap: 5px; padding: 8px 10px; }
.chat-poll-full { display: grid; gap: 6px; min-width: 0; }
.chat-poll-full[hidden], .chat-poll-bar[hidden], .chat-poll [hidden] { display: none; }
.chat-poll-opts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.chat-poll.is-results .chat-poll-opts { grid-template-columns: 1fr; }
.chat-poll-pick { min-height: 36px; padding: 6px 10px; }
.chat-poll-result { padding: 6px 10px; }
.chat-poll.is-folded { padding: 0; }
.chat-poll.is-open { padding: 0 0 8px; }
.chat-poll.is-open .chat-poll-full { padding: 0 10px; }
.chat-poll-bar {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 40px; padding: 6px 10px;
  border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chat-poll-bar:hover { background: rgba(127, 127, 127, 0.1); }
.chat-poll-bar:focus-visible { outline: 2px solid var(--focus, #6aa8ff); outline-offset: -2px; }
.chat-poll-bar .chat-poll-kicker { flex: none; white-space: nowrap; }
.chat-poll-bar-q { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.chat-poll-bar-lead { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;
  font-variant-numeric: tabular-nums; opacity: 0.8; }
.chat-poll-chev { flex: none; display: inline-flex; transition: transform 0.15s ease; }
.chat-poll-bar[aria-expanded="true"] .chat-poll-chev { transform: rotate(180deg); }
/* opened: the bar keeps the kicker; the whole question is under it */
.chat-poll.is-open .chat-poll-bar-q, .chat-poll.is-open .chat-poll-bar-lead { visibility: hidden; }
.studio-with { margin: 8px 0 0; }
.studio-with-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.studio-with-guest { display: inline-flex; align-items: center; gap: 8px; }
.studio-with-guest .btn-bell { display: none; }

/* The squat counter after the stream (Nov 6, _studio_squats_after.html): one line for a viewer, Top squatters folded up
   for the creator */
.sq-after { display: grid; gap: 6px; margin: 8px 0; font-size: 14px; }
.sq-after-mine { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sq-after-k { font-weight: 700; }
.sq-after-n { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sq-after-sub { color: var(--text-2); }
.sq-after-top summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sq-after-list { margin: 8px 0 0; padding: 0 0 0 22px; display: grid; gap: 4px; max-height: 320px; overflow: auto; font-variant-numeric: tabular-nums; }
.sq-after-list li { display: flex; gap: 8px; align-items: baseline; }
.sq-after-list b { margin-left: auto; padding-right: 8px; }
.sq-after-badge { font-size: 11px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 4px; padding: 0 5px; }