:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c1f24;
  --muted: #707683;
  --border: #e6e8ec;
  --accent: #2f6feb;
  --accent-weak: #eaf1ff;
  --beige: #f7efdc;
  --beige-border: #e8d9b5;
  --beige-text: #9a6b15;
  --danger: #d8453b;
  --ok: #1f9d6b;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(20, 24, 31, 0.06), 0 6px 24px rgba(20, 24, 31, 0.05);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }

button {
  font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 12px 16px;
  background: var(--accent); color: #fff; font-weight: 600; transition: filter .15s ease;
}
@media (hover: hover) { button:hover { filter: brightness(1.05); } }
button:active { filter: brightness(.95); }
button:disabled { opacity: .5; cursor: default; }
button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
button.ghost { background: transparent; color: var(--muted); padding: 8px 10px; }
button.danger { background: var(--danger); }
button.block { width: 100%; }

input, textarea {
  font: inherit; width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.error { color: var(--danger); font-size: 14px; min-height: 18px; margin-top: 10px; }
.hidden { display: none !important; }
/* attention pulse for the nickname spots (super-admin "flash nickname") */
@keyframes flashAttention { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,.6); } 50% { transform: scale(1.07); box-shadow: 0 0 0 8px rgba(37,99,235,0); background: var(--accent-weak); } }
.flash-attention { animation: flashAttention .9s ease-out infinite; border-color: var(--accent) !important; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 380px; padding: 28px 24px; }
.auth-card h1 { font-size: 22px; margin: 0 0 4px; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.auth-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: #eef1f5; }
.auth-hero img, .auth-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.prize-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-weak); color: var(--text); font-size: 13px; line-height: 1.45; }
/* compact GDPR consent row on the registration form */
.consent-row { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.consent-row input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; }
.consent-row span { flex: 1 1 auto; min-width: 0; }
.consent-row a { color: var(--accent); }
/* legal pages (offer / privacy) */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 18px 64px; line-height: 1.6; }
.legal h1 { font-size: 23px; margin: 0 0 4px; }
.legal h2 { font-size: 17px; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 14px; color: var(--text); }
.legal ul { margin: 4px 0; padding-left: 20px; }
.legal a { color: var(--accent); }
.legal-back { display: inline-block; margin-bottom: 12px; font-size: 14px; }
.legal-upd { color: var(--muted); font-size: 13px; }
.legal-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; }
.note-required { font-size: 13px; color: var(--muted); margin: 16px 0 0; font-weight: 600; }
.nick-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nick-opt { flex: 1 1 36%; min-width: 78px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 6px; font-weight: 700; font-size: 14px; text-align: center; }
.nick-opt:hover { filter: none; border-color: var(--accent); }
.nick-opt.selected { border-color: var(--accent); background: var(--accent-weak); box-shadow: 0 0 0 2px var(--accent-weak); }
.nick-refresh-icon { flex: 0 0 auto; width: 44px; padding: 9px 0; font-size: 17px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.nick-refresh-icon:hover { filter: none; border-color: var(--accent); }
.phone-row { display: flex; align-items: stretch; }
.phone-prefix { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-right: 0; border-radius: 10px 0 0 10px; background: #eef1f5; color: var(--text); font-weight: 700; }
.phone-row input { border-radius: 0 10px 10px 0; }

/* ---------- Top bar ---------- */
.topbar { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 10px 4px; }
.topbar .space-hidden { display: none !important; }   /* progressively hidden when the bar is cramped */
.topbar-right { position: relative; margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }   /* chips group — kept within the chat column so they never sit over the video */
.topbar-more { flex: 0 0 auto; width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 18px; line-height: 1; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; }
.topbar-more:hover { border-color: var(--accent); filter: none; }
/* the ONE menu: overflow chips flow here in a row (wrapping to more rows if needed) */
.topbar-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px; max-width: min(260px, 80vw); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.topbar-menu .pill, .topbar-menu .alpaca-pill { flex: 0 0 auto; }
.topbar-menu .ghost { flex: 0 0 auto; justify-content: center; }
.topbar .brand { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar img.brand { height: 16px; width: auto; flex: 0 0 auto; display: block; }   /* compact ALPI logo, vertically centered in the bar */
.topbar-nick { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-nick::after { content: '📋'; font-size: 11px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .15s ease, opacity .15s ease; }   /* collapsed so the chip hugs the nickname */
.topbar-nick:hover { border-color: var(--accent); filter: none; }
.topbar-nick:hover::after { opacity: .65; max-width: 1.4em; margin-left: 5px; }
.topbar .spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 6px 10px; border-radius: 999px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }

/* logout is an icon button; its "Вийти" label shows only inside the ☰ dropdown menu */
#logoutBtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#logoutBtn svg { display: block; }
.logout-label { display: none; }

/* ================= LIVE (participant) ================= */
body.live-page { height: 100dvh; overflow: hidden; }
.live-app { height: 100dvh; display: flex; flex-direction: column; }
.live-app .topbar { padding: 8px 14px; }
.live-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 0 12px 10px; }
.video-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.col-right { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* "scroll to latest" button — appears above the composer when scrolled up */
.scroll-bottom { position: absolute; right: 14px; bottom: 64px; z-index: 6; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 22px; line-height: 1; box-shadow: 0 3px 12px rgba(0,0,0,.28); }
.live-app.video-max .scroll-bottom { display: none !important; }

/* video */
.video-area { min-width: 0; }
/* broadcast ended: the player is hidden and replaced by this notice; chat + buttons remain */
.live-app.ended .video-area { display: none; }
.ended-notice { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 18px; }
.ended-emoji { font-size: 40px; line-height: 1; }
.ended-title { font-size: 20px; font-weight: 800; }
.ended-sub { font-size: 14px; color: var(--muted); max-width: 340px; line-height: 1.45; }
.video-frame { position: relative; width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin: 0 auto; }
.video-frame iframe, .video-frame #ytplayer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-empty { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; color: #9aa3af; font-size: 14px; text-align: center; padding: 20px; }
.video-block { position: absolute; inset: 0; z-index: 2; background: transparent; }
.unmute-overlay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.42); color: #fff; font-size: 16px; font-weight: 700; border: 0; border-radius: 0; }
.unmute-overlay span { font-size: 22px; }
.sound-ctl { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,.5); border-radius: 999px; padding: 6px 8px; backdrop-filter: blur(4px); }
.sound-ctl button { background: transparent; padding: 2px 4px; font-size: 18px; line-height: 1; color: #fff; }
.sound-ctl button:hover { filter: none; }
.vol-wrap { width: 0; overflow: hidden; transition: width .2s ease; display: flex; align-items: center; }
/* the volume slider is OPTIONAL (super-admin toggle .show-vol); the mute button is always there */
.live-app.show-vol .sound-ctl:hover .vol-wrap { width: 104px; }                 /* desktop: expand on hover */
@media (hover: none) { .live-app.show-vol .vol-wrap { width: 104px; } }         /* touch: keep it open & draggable */
.vol-bar { position: relative; width: 92px; height: 6px; margin: 0 6px; border-radius: 3px; background: rgba(255,255,255,.35); cursor: pointer; touch-action: none; }
.vol-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #fff; }
.vol-knob { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* admin-configurable buttons */
.buttons-bar { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.buttons-bar a { flex: 1 1 auto; white-space: nowrap; text-align: center; background: var(--accent); color: #fff; padding: 11px 14px; border-radius: 10px; font-weight: 700; }   /* side by side; wrap to the next row only when a label can't fit */
.buttons-bar a.alt { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
/* PHONE landscape only: NO logo bar; ONE row at the top of the chat column —
   CTA buttons on the LEFT, single ☰ (full height) on the RIGHT. (iPad/desktop/portrait keep the logo bar.) */
.live-app.landscape-bar > .topbar { display: none; }
/* no logo bar here, so add a little breathing room at the top (the bottom already has padding) */
.live-app.landscape-bar .live-body { padding-top: 8px; }
.cta-row { position: relative; z-index: 21; display: flex; flex-flow: row nowrap; align-items: stretch; gap: 8px; margin-bottom: 8px; flex-shrink: 0; }   /* above the alpaca overlay so buttons/menu stay usable during the game */
/* CTA buttons fill the LEFT: side by side when labels fit, stack to two rows when they don't;
   a single over-long label wraps inside its button instead of overflowing the row */
.cta-row > .buttons-bar { flex: 1 1 auto; margin: 0; min-width: 0; }
.cta-row .buttons-bar a { min-height: 36px; padding: 7px 12px; white-space: normal; min-width: min(100%, max-content); }
/* chips + ☰ on the RIGHT */
.cta-row > .topbar-right { flex: 0 1 auto; min-width: 0; margin-left: 0; gap: 6px; align-items: center; }
.cta-row > .topbar-right > * { align-self: center; }                            /* chips keep their natural height… */
.cta-row > .topbar-right > .topbar-more { align-self: stretch; height: auto; margin-left: auto; }   /* …the ☰ fills the row height & sits on the far right */
/* buttons present → the ☰ block is a fixed full-height button on the right (buttons-bar fills the rest) */
.live-app.cta-has-buttons .cta-row > .topbar-right { flex: 0 0 auto; }
/* no buttons → chips sit inline at content width (buttons-bar is hidden); overflow tucks into the ☰ */

/* quiz */
.quiz-panel { display: none; flex-direction: column; min-height: 0; }
/* codeword chip lives UNDER the video — a prominent reminder of the Kahoot nickname during the quiz. */
.codeword-banner { display: none; flex-direction: column; align-items: flex-start; gap: 1px; background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 10px; padding: 7px 12px; margin-top: 10px; flex-shrink: 0; }
/* Kahoot-nickname reminder shows ONLY in phone landscape during the quiz (there the topbar/nickname is
   hidden). On iPad / desktop / portrait the nickname is already in the topbar, so it would be redundant.
   Here it's a compact CHIP (blinks on flash, tap to copy) in the same spot — not a big badge. */
.live-app.mode-quiz.landscape-bar .codeword-banner { display: inline-flex; align-self: flex-start; flex-direction: row; align-items: center; gap: 0; background: transparent; border: none; padding: 0; margin-top: 8px; }
.live-app.mode-quiz.landscape-bar .codeword-banner .label { display: none; }
.live-app.mode-quiz.landscape-bar .codeword-banner .value { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; letter-spacing: 0; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-weak); color: var(--text); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-app.mode-quiz.landscape-bar .codeword-banner .value::after { content: '📋'; font-size: 11px; opacity: .6; }
.codeword-banner .label { font-size: 12px; color: var(--muted); }
.codeword-banner .value { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.codeword-copy { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; padding: 2px 0 0; margin: 0; color: inherit; cursor: pointer; font-family: inherit; line-height: 1.2; text-align: left; }
.codeword-copy::after { content: '📋'; font-size: 14px; opacity: .45; transition: opacity .15s ease; }
.codeword-copy:hover::after { opacity: 1; }
.codeword-copy.copied { color: var(--accent); }
.kahoot-frame { width: 100%; height: min(72vh, 640px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.kahoot-frame iframe { width: 100%; height: 100%; border: 0; }

/* chat */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 6px 2px; }
.msg { position: relative; max-width: 85%; padding: 8px 12px 6px; border-radius: 16px; font-size: 15px; }
.msg .name { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.msg .text { word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 16px; line-height: 1.4; }
/* compact: reactions + time share one row (time pushed to the right) instead of separate lines */
.msg .meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.msg .meta .reactions { flex: 1 1 auto; margin-top: 0; }
.msg .time { font-size: 11px; opacity: .6; flex-shrink: 0; }
.msg.left { align-self: flex-start; border-bottom-left-radius: 5px; }
.msg.right { align-self: flex-end; border-bottom-right-radius: 5px; }
.msg.surface { background: var(--surface); border: 1px solid var(--border); }
.msg.accent { background: var(--accent); color: #fff; }
.msg.accent .time { color: #fff; opacity: .8; }
.msg.beige { background: var(--beige); border: 1px solid var(--beige-border); }
.msg.beige .name { color: var(--beige-text); }
.msg .text a { color: var(--accent); text-decoration: underline; font-weight: 600; }
.live-app.video-max .msg .text a { color: #9ecbff; }
/* admin delete: a clear red overlay button on hover (always visible on touch) */
.msg-del { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 1; background: var(--danger); color: #fff; border-radius: 50%; opacity: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: opacity .12s ease; }
.msg:hover .msg-del { opacity: 1; }
.msg-del:hover { filter: brightness(1.08); }
@media (hover: none) { .msg-del { opacity: .92; } }
/* admin: pin/unpin button on admin (beige) messages — sits left of the delete button */
.msg-pin { position: absolute; top: 4px; right: 30px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; font-size: 11px; line-height: 1; background: var(--beige-border); color: var(--beige-text); border-radius: 50%; opacity: 0; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: opacity .12s ease; }
.msg:hover .msg-pin { opacity: 1; }
.msg.is-pinned .msg-pin { opacity: 1; background: var(--beige-text); color: #fff; }
@media (hover: none) { .msg-pin { opacity: .9; } }

/* ---- pinned messages bar: sticky, always-visible strip atop the chat ---- */
.pinned-bar { flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; background: color-mix(in srgb, var(--beige) 55%, var(--surface)); border-bottom: 1px solid var(--beige-border); max-height: 30vh; overflow-y: auto; }
.pinned-item { position: relative; display: flex; align-items: flex-start; gap: 7px; background: var(--beige); border: 1px solid var(--beige-border); border-radius: 10px; padding: 6px 10px; }
.pinned-bar.has-unpin .pinned-item { padding-right: 30px; }
.pin-ico { flex-shrink: 0; font-size: 13px; line-height: 1.45; }
.pinned-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.pinned-text a { color: var(--accent); }
.pinned-unpin { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; background: var(--beige-border); color: var(--beige-text); border-radius: 50%; }
.pinned-unpin:hover { filter: none; background: var(--danger); color: #fff; }

/* reactions — by default only PLACED reactions show as chips; a subtle neutral button reveals the
   full picker (desktop: hover the comment; mobile: tap the button) so the row never clutters. */
.reactions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.react-btn { display: none; align-items: center; gap: 3px; font-size: 13px; line-height: 1.5; background: rgba(0,0,0,.06); border: 1px solid transparent; border-radius: 999px; padding: 2px 9px; cursor: pointer; color: inherit; }
.react-btn b { font-weight: 700; font-size: 12px; }
.react-btn.has { display: inline-flex; }                       /* placed reactions: always visible */
.react-btn.mine { border-color: var(--accent); background: var(--accent-weak); color: var(--text); }
.react-btn.admin-react { border-color: var(--beige-text); background: var(--beige); color: var(--beige-text); font-weight: 700; }
.react-btn:hover { transform: scale(1.06); }
.msg.picking .react-btn { display: inline-flex; }                          /* mobile: tap reveals picker */
@media (hover: hover) { .msg:hover .react-btn { display: inline-flex; } }   /* desktop: hover reveals */
/* neutral, low-key "add reaction" trigger (grey, not an emoji) */
.react-add { display: inline-flex; align-items: center; justify-content: center; height: 23px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: rgba(0,0,0,.03); color: var(--muted); cursor: pointer; opacity: .6; transition: opacity .12s ease; }
.react-add svg { width: 15px; height: 15px; display: block; }
.react-add:hover { opacity: 1; color: var(--text); }
.msg.picking .react-add { display: none; }
@media (hover: hover) { .msg:hover .react-add { display: none; } }
/* your own (blue) messages: reactions others left are shown read-only — legible on the accent bubble, not clickable */
.msg.own .react-btn { background: rgba(255,255,255,.2); color: #fff; cursor: default; }
.msg.own .react-btn:hover { transform: none; }
.msg.own .react-btn.admin-react { background: var(--beige); color: var(--beige-text); }
/* "load earlier" pill */
.load-earlier { align-self: center; flex-shrink: 0; font-size: 13px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 14px; margin: 2px auto 6px; }

/* composer + states */
.composer { display: flex; gap: 8px; flex-shrink: 0; padding-top: 8px; }
.composer input { flex: 1; min-width: 0; }
.composer button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.composer button .send-icon { display: none; }
/* narrow row → collapse «Надіслати» to a paper-plane icon to save width (toggled by fitComposer) */
.composer.tight button[type="submit"] { width: 46px; padding: 0; }
.composer.tight button .send-label { display: none; }
.composer.tight button .send-icon { display: block; }
.empty-note { color: var(--muted); font-size: 14px; text-align: center; padding: 24px 10px; margin: auto; }
.banned-note { flex-shrink: 0; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: #fdeceb; color: var(--danger); font-weight: 600; font-size: 14px; text-align: center; }

/* quiz mode: show Kahoot, hide chat (both mobile & desktop) */
.live-app.mode-quiz .quiz-panel { display: flex; flex: 1 1 0; }
.live-app.mode-quiz .quiz-panel .kahoot-frame { flex: 1; min-height: 0; height: auto; }
.live-app.mode-quiz .col-right { display: none; }

/* ---------- Side-by-side layout (video + chat + buttons): any LANDSCAPE screen ≥640px.
   Portrait (incl. wide tablets) always stays stacked = video on top, chat below. ---------- */
@media (orientation: landscape) and (min-width: 640px) {
  /* full screen: video LEFT, chat (or Kahoot in quiz mode) RIGHT */
  .live-body { flex-direction: row; align-items: stretch; gap: 12px; padding: 0 12px 12px; }
  /* chat mode: video width is super-admin-configurable (--video-pct, default 60); the video area flexes
     so the frame stays height-capped (buttons always visible, no vertical scroll, adapts to window size) */
  .video-col { flex-grow: var(--video-pct, 60); flex-shrink: 1; flex-basis: 0; min-width: 0; min-height: 0; justify-content: flex-start; }
  .col-right { flex-grow: calc(100 - var(--video-pct, 60)); flex-shrink: 1; flex-basis: 0; min-width: 0; }
  .video-area { flex: 0 1 auto; min-height: 0; min-width: 0; }   /* sit buttons under the video; shrink only if the window is too short */
  /* quiz mode: video and Kahoot share the screen 50/50 */
  .live-app.mode-quiz .video-col { flex: 35 1 0; }   /* quiz: video/camera 35% */
  .live-app.mode-quiz .quiz-panel { flex: 65 1 0; }  /* quiz: Kahoot 65% */
  .kahoot-frame { height: 100%; flex: 1; min-height: 0; }
}

/* ---------- Tablet in PORTRAIT during the quiz: keep video on TOP but make it narrower &
   centered, so it's shorter and Kahoot below gets more height. (Phones <700px keep full-width video.) ---------- */
@media (orientation: portrait) and (min-width: 700px) {
  .live-app.mode-quiz .video-col { align-self: center; width: 60%; }
}

/* ---------- Fullscreen video + TikTok-style chat overlay (viewer) ---------- */
.video-max-btn { display: none; position: absolute; top: 8px; right: 8px; z-index: 6; width: 34px; height: 34px; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; border-radius: 8px; font-size: 16px; line-height: 1; backdrop-filter: blur(4px); }
.video-max-btn:hover { filter: none; background: rgba(0,0,0,.72); }
.live-app.has-video .video-max-btn { display: inline-flex; }
.live-app.mode-quiz .video-max-btn { display: none; }            /* no fullscreen during the quiz */
/* touch devices / narrow screens: no fullscreen-overlay button — to enlarge the video the user rotates
   to landscape and gets the side-by-side split instead. Desktop (mouse, wide) keeps the overlay.
   (:not(.video-max) keeps the ✕ if a wide window that already entered max is then narrowed.) */
@media (hover: none), (max-width: 899px) { .live-app:not(.video-max) .video-max-btn { display: none !important; } }

.live-app.video-max .topbar { display: none; }
.live-app.video-max .live-body { padding: 0; gap: 0; }
.live-app.video-max .video-col { position: fixed; inset: 0; z-index: 50; background: #000; }
.live-app.video-max .video-area { height: 100%; min-height: 0; }
.live-app.video-max .video-frame { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; margin: 0; }
.live-app.video-max .buttons-bar { display: none; }
.live-app.video-max .video-max-btn { position: fixed; top: 12px; right: 12px; z-index: 53; }
.live-app.video-max .sound-ctl { left: auto; right: 12px; bottom: 12px; z-index: 53; }

/* chat floats over the video, bottom-left, fading out at the top (TikTok feel) */
.live-app.video-max .col-right { position: fixed; left: 12px; right: auto; bottom: 12px; z-index: 52; width: min(420px, 92vw); max-height: 58vh; background: none; pointer-events: none; }
.live-app.video-max .chat { overflow: hidden; pointer-events: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
.live-app.video-max .msg { background: rgba(0,0,0,.5) !important; color: #fff !important; border: 0 !important; max-width: 100%; box-shadow: 0 1px 6px rgba(0,0,0,.35); backdrop-filter: blur(3px); animation: msgSlideIn .25s ease; }
.live-app.video-max .msg .name { color: #fff; opacity: .85; }
.live-app.video-max .msg .time { color: #fff; opacity: .7; }
.live-app.video-max .msg .react-btn { background: rgba(255,255,255,.22); color: #fff; }
.live-app.video-max .composer { pointer-events: auto; padding-top: 8px; }
.live-app.video-max .composer input { background: rgba(0,0,0,.55); color: #fff; border-color: rgba(255,255,255,.25); }
.live-app.video-max .composer input::placeholder { color: rgba(255,255,255,.6); }
.live-app.video-max .empty-note { color: #fff; opacity: .85; }
.live-app.video-max .load-earlier { display: none; }
@keyframes msgSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================= ADMIN ================= */
.admin-app { max-width: none; margin: 0; padding: 0 18px; height: 100dvh; display: flex; flex-direction: column; }
.admin-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 1fr) 1fr; gap: 18px; padding-bottom: 16px; }
.admin-left { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
.admin-video { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 52vh; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.admin-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.admin-video .video-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9aa3af; font-size: 14px; }
.admin-controls { overflow-y: auto; display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; padding-right: 4px; flex: 1 1 auto; min-height: 0; }
.admin-controls .full { grid-column: 1 / -1; }
/* top quick-controls share ONE row: online small, mode & buttons equal & wider; wrap if too tight */
.top-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.top-row > .card { margin: 0; }
.top-row > .online-card { flex: 1 1 150px; }
.top-row > .mode-card, .top-row > .buttons-card { flex: 2 1 230px; }
/* накрутка sits right under the online counter, separated by a hairline */
.bonus-inline { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.bonus-inline label { font-size: 12px; }
/* two equal cards in one row (video size + YouTube stream); wrap when too tight */
.two-col { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.two-col > .card { margin: 0; flex: 1 1 280px; min-width: 0; }
/* inside a full-width card, lay the sub-controls out side by side so the width is used */
.size-grid, .btn-configs { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.size-grid > *, .btn-configs > * { flex: 1 1 240px; min-width: 0; }
.admin-card { padding: 16px; }
.admin-card h2 { font-size: 15px; margin: 0 0 12px; }
.admin-card h3 { font-size: 13px; margin: 14px 0 8px; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row > input { flex: 1; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status-line { font-size: 13px; margin-top: 10px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge.comments { background: #eef2f6; color: #51606f; }
.badge.quiz { background: #fff0e6; color: #c2570f; }
.mode-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.online-nums { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.online-nums .big-num { font-size: 24px; font-weight: 800; }
.online-nums .sub { font-size: 12px; color: var(--muted); }
.people { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.person-row { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
.person-row .pname { font-weight: 600; }
.person-row .pip { color: var(--muted); font-size: 12px; }
.person-row .ptime { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.person-row .spacer { flex: 1; }
.person-row button { padding: 5px 10px; font-size: 13px; }
.tag-banned { font-size: 12px; color: var(--danger); font-weight: 700; }
.empty-mini { color: var(--muted); font-size: 13px; padding: 6px 0; }
.btn-config { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.btn-config .row { margin-bottom: 6px; }
.color-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.color-label { font-size: 13px; color: var(--muted); }
.color-input { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; flex-shrink: 0; }
.swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.18); cursor: pointer; padding: 0; transition: transform .1s ease; }
.swatch:hover { transform: scale(1.15); }
/* live preview of the under-video button (updates as you pick colour/text) */
.btn-demo { display: block; text-align: center; padding: 10px 14px; margin: 8px 0; border-radius: 10px; font-weight: 700; background: var(--accent); color: #fff; cursor: default; pointer-events: none; }
.toggle-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.toggle-line input { width: auto; }

.admin-chat { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-chat-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; }
.admin-chat .chat { flex: 1; min-height: 0; padding: 12px 14px; }
.admin-chat .composer { padding: 10px 14px; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .admin-app { height: auto; padding: 0 12px 24px; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-controls { grid-template-columns: 1fr; }
  .admin-chat { height: 70vh; }
}

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20,24,31,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 400px; width: 100%; padding: 22px; }
.modal-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.modal-text { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; }
.modal-actions button { width: 100%; }

/* ---------- Mode segmented toggle + role visibility ---------- */
.seg { display: flex; gap: 6px; }
.seg-btn { flex: 1; background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 700; }
.seg-btn:hover { filter: none; border-color: var(--accent); }
.seg-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* quick show/hide toggles for the under-video buttons — state is obvious by colour */
.btn-toggles { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.btn-toggle { width: 100%; justify-content: flex-start; text-align: left; font-weight: 700; background: var(--surface); color: var(--muted); border: 1px dashed var(--border); }
.btn-toggle:hover { filter: none; border-color: var(--accent); }
.btn-toggle.on { border-style: solid; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.role-moderator .super-only { display: none !important; }
.role-super .mod-only { display: none !important; }
/* Moderator sees few controls — lay the ones they have (online, buttons, video size) in ONE wrapping
   row; flatten the super-admin's top-row/two-col wrappers so all cards become equal flex items.
   Заблоковані spans full width and drops to the bottom. */
.role-moderator .admin-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.role-moderator .top-row, .role-moderator .two-col { display: contents; }
.role-moderator .admin-controls .card { flex: 1 1 200px; min-width: 0; margin: 0; }
.role-moderator .admin-controls .banned-card { flex-basis: 100%; order: 10; }

/* ================= Voting / polls ================= */
/* participant voting box (replaces the composer while a poll is active) */
/* ===== AI "visualize your dream" ===== */
/* the square image thumbnail in chat (small; tap to enlarge) */
.aigen-msg { max-width: 230px; }
.aigen-card { width: 190px; max-width: 100%; }
.aigen-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: var(--surface); cursor: zoom-in; }
.aigen-cap { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.3; }
/* lightbox */
.aigen-modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.aigen-modal.hidden { display: none; }
.aigen-modal-inner { position: relative; max-width: min(92vw, 560px); display: flex; flex-direction: column; gap: 10px; }
.aigen-modal-img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.aigen-modal-cap { color: #fff; text-align: center; font-size: 15px; line-height: 1.35; }
.aigen-modal-name { font-weight: 800; }
.aigen-modal-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; line-height: 1; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.aigen-modal-close:hover { background: rgba(0,0,0,.75); }
/* gallery broadcast mode */
.gallery-panel { display: none; flex-direction: column; min-height: 0; gap: 8px; }
.live-app.gallery-mode .col-right, .live-app.gallery-mode .quiz-panel { display: none !important; }
.live-app.gallery-mode .gallery-panel { display: flex; }
.gallery-head { font-weight: 800; font-size: 16px; flex-shrink: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; overflow-y: auto; min-height: 0; align-content: start; padding-bottom: 6px; }
.aigen-tile { position: relative; cursor: zoom-in; }
.aigen-tile .aigen-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
.aigen-tile-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; border-radius: 0 0 10px 10px; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.aigen-tile:hover .aigen-tile-info { opacity: 1; }
.aigen-tile-info .name { display: block; font-weight: 800; font-size: 12px; }
.aigen-tile-info .aigen-cap { display: block; color: rgba(255,255,255,.92); font-size: 11px; margin-top: 1px; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
@media (orientation: landscape) and (min-width: 640px) {
  .live-app.gallery-mode .video-col { flex: 30 1 0; }
  .live-app.gallery-mode .gallery-panel { flex: 70 1 0; }
}
/* the viewer form (poll-box pattern) */
.ai-box { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.ai-title { font-weight: 800; font-size: 16px; line-height: 1.25; }
.ai-hint { font-size: 12px; color: var(--muted); margin-top: -3px; }
.ai-box input { width: 100%; }
/* equal-size square tiles: a grid (auto-fit) so every tile is the same size — a lone last tile no longer stretches */
.ai-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ai-styles.disabled { pointer-events: none; opacity: .6; }
.ai-style.sel { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
/* two-level picker: header row (напрям label / back) spans the full grid width above the tiles */
.ai-pick-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ai-pick-cat { font-weight: 800; color: var(--text); font-size: 14px; }
.ai-back { flex: 0 0 auto; background: var(--surface); color: var(--text); border: 2px solid var(--border); font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 999px; cursor: pointer; line-height: 1; }
.ai-back:hover { border-color: var(--accent); color: var(--accent); }
/* square photo tiles (both levels) — image + name caption below */
.ai-tile { display: flex; flex-direction: column; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; }
.ai-tile-img { aspect-ratio: 1 / 1; width: 100%; border-radius: 12px; background-color: var(--surface); background-size: cover; background-position: center; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.ai-tile-img.ph { background-image: linear-gradient(135deg, var(--surface), var(--border)); color: var(--muted); }
.ai-tile.sel .ai-tile-img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ai-tile-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.15; color: var(--text); }
.ai-confirm.block { width: 100%; }
.ai-status { font-size: 13px; font-weight: 700; text-align: center; padding: 4px 0; }
.ai-status.ok { color: var(--ok); }
.ai-status.busy { color: var(--accent); }
.ai-status.err { color: var(--danger); }
/* AI focus mode: while the dream form is up, hide the chat so people focus on their own dream (not others' messages) */
.col-right.ai-focus #chat,
.col-right.ai-focus #pinnedBar,
.col-right.ai-focus #scrollBottomBtn { display: none !important; }
.col-right.ai-focus .ai-box { flex: 1 1 auto; overflow-y: auto; }
/* the user's own generated image, shown inline (they don't see the chat) — tap to enlarge, save button */
.ai-result { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ai-result.hidden { display: none; }
.ai-result-img { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; cursor: zoom-in; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ai-save.block { width: 100%; max-width: 360px; text-align: center; text-decoration: none; background: var(--surface); color: var(--text); border: 2px solid var(--border); font-weight: 800; padding: 11px; border-radius: 12px; }
.ai-save.block:hover { border-color: var(--accent); color: var(--accent); }

.poll-box { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.poll-title { font-weight: 800; font-size: 16px; line-height: 1.25; }
.poll-hint { font-size: 12px; color: var(--muted); margin-top: -3px; }
.poll-options { display: flex; flex-direction: column; gap: 8px; }
.poll-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; justify-content: flex-start; background: var(--surface); color: var(--text); border: 2px solid var(--border); font-weight: 600; padding: 11px 13px; border-radius: 12px; }
.poll-opt:hover { border-color: var(--accent); filter: none; }
.poll-num { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--border); color: var(--text); font-weight: 800; font-size: 13px; }
.poll-opt-text { flex: 1; min-width: 0; }
.poll-opt.chosen { border-color: var(--accent); background: var(--accent-weak); }
.poll-opt.chosen .poll-num { background: var(--accent); color: #fff; }
.poll-box.voted .poll-opt { opacity: .7; cursor: default; pointer-events: none; }
.poll-done { text-align: center; font-weight: 700; color: var(--ok); padding: 6px; }

/* super-admin fullscreen poll manager */
.poll-admin { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.5); display: flex; padding: 20px; }
.poll-admin.hidden { display: none; }
.poll-admin-inner { margin: auto; width: 100%; max-width: 1100px; max-height: 92vh; background: var(--bg); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.poll-admin-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.poll-admin-head h2 { margin: 0; font-size: 19px; }
.poll-admin-close { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.poll-admin-body { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; padding: 18px; overflow-y: auto; }
.poll-editor h3, .poll-list-wrap h3 { margin: 0 0 8px; font-size: 16px; }
.poll-editor label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.poll-editor input[type=text], .poll-editor input[type=number] { width: 100%; }
.poll-opt-row { display: flex; gap: 6px; margin-bottom: 6px; }
.poll-opt-row input { flex: 1; min-width: 0; }
.poll-opt-del { flex: 0 0 auto; background: var(--surface); color: var(--muted); border: 1px solid var(--border); width: 38px; }
.poll-list { display: flex; flex-direction: column; gap: 10px; }
.poll-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); }
.poll-card.status-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.poll-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.poll-badge { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.poll-card-opts { display: flex; flex-direction: column; gap: 5px; }
.poll-card-opt { display: grid; grid-template-columns: 1fr 90px 34px; align-items: center; gap: 8px; font-size: 13px; }
.poll-card-opt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-card-opt-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.poll-card-opt-bar > span { display: block; height: 100%; background: var(--accent); }
.poll-card-opt-n { text-align: right; font-weight: 700; }
.poll-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.poll-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.poll-card-actions button { padding: 6px 12px; }
@media (max-width: 720px) { .poll-admin-body { grid-template-columns: 1fr; } }

/* poll RESULT message in chat — percentages + bars (counts stay admin-only) */
.msg.poll-msg { max-width: 92%; }
.poll-result { min-width: 210px; }
.poll-result-head { font-size: 12px; font-weight: 700; color: var(--beige-text); }
.poll-result-title { font-size: 16px; font-weight: 800; margin: 2px 0 9px; line-height: 1.25; }
.poll-result-item { margin-bottom: 9px; }
.poll-result-item:last-child { margin-bottom: 2px; }
.poll-result-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 4px; }
.poll-result-opt { min-width: 0; overflow-wrap: anywhere; }
.poll-result-pct { font-weight: 800; flex-shrink: 0; }
.poll-result-bar { height: 9px; background: rgba(0,0,0,.1); border-radius: 5px; overflow: hidden; }
.poll-result-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; min-width: 2px; }

/* --- poll system additions (scale type, bigger manager, reorder, consent note) --- */
.poll-admin-inner { max-width: min(1500px, 94vw); max-height: 94vh; }   /* use more of a big screen */
.poll-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.poll-list-head h3 { margin: 0; }
.poll-list-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.poll-card-actions button:disabled { opacity: .4; cursor: default; }
.poll-type-btn { font-size: 14px; }
/* AI styles editor (nested: напрям → стилі), single column */
.style-admin-body { display: block; max-width: 820px; margin: 0 auto; }
.style-cat { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 14px; background: var(--surface); }
.style-cat-head { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.style-cat-head .style-cat-name { flex: 1; min-width: 120px; font-weight: 800; font-size: 15px; }
.style-cat-head button { padding: 6px 10px; flex: 0 0 auto; }
.style-cat-toggle { background: none !important; border: none !important; font-size: 15px; cursor: pointer; width: 24px; color: var(--text); padding: 0 !important; }
.style-cat-count { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.style-cat.collapsed .style-vars, .style-cat.collapsed .style-add-var { display: none; }
.style-vars { display: flex; flex-direction: column; gap: 10px; padding-left: 12px; border-left: 3px solid var(--border); }
.style-var { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "img name actions" "img prompt actions"; gap: 6px 8px; align-items: start; }
.style-var-name { grid-area: name; min-width: 0; font-weight: 600; }
.style-var-prompt { grid-area: prompt; width: 100%; resize: vertical; min-height: 56px; font-family: inherit; font-size: 13px; }
.style-var-actions { grid-area: actions; display: flex; flex-direction: column; gap: 4px; }
.style-var-actions button { padding: 4px 9px; }
.style-var .style-img { grid-area: img; }
.style-add-var { margin-top: 10px; }
/* square photo cell (admin): preview button + clear ✕ */
.style-img { position: relative; flex: 0 0 auto; }
.style-img-pick { width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--border); background-color: var(--bg); background-size: cover; background-position: center; font-size: 18px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.style-img-pick:hover { border-color: var(--accent); }
.style-img-clear { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; border: 2px solid var(--bg); font-size: 10px; line-height: 1; cursor: pointer; padding: 0; }
/* participant scale (slider) */
.poll-scale { display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.poll-scale-value { text-align: center; font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.poll-scale input[type=range] { width: 100%; accent-color: var(--accent); }
.poll-scale-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
/* result card: scale average line */
.poll-result-avg { font-size: 14px; margin: 0 0 8px; }
/* GDPR notice under the submit button (no checkbox) */
.consent-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; line-height: 1.4; }
.consent-note a { color: var(--accent); }

/* compact horizontal histogram for SCALE poll results (instead of many stacked bars) */
.poll-chart { display: flex; align-items: flex-end; gap: 3px; height: 74px; margin-top: 8px; }
.poll-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.poll-col-track { width: 100%; flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.poll-col-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.poll-col-lbl { font-size: 10px; color: var(--muted); line-height: 1; }
.poll-result-scale .poll-result-title { margin-bottom: 4px; }
.poll-result-item { margin-bottom: 7px; }

/* ===== Alpaca tap game ===== */
.alpaca-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 3px 9px 3px 4px; border-radius: 999px; flex-shrink: 0; cursor: pointer; }
.alpaca-pill img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
/* tap-to-explain tooltip for the alpaca counter */
.alpaca-tip { position: fixed; z-index: 60; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); font-size: 13px; color: var(--text); }
.alpaca-tip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 3px 0; }
.alpaca-tip-row span { color: var(--muted); }
.alpaca-tip-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.alpaca-tip-row + .alpaca-tip-row { border-top: 1px solid var(--border); }
.alpaca-game { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; background: rgba(255,255,255,.86); backdrop-filter: blur(2px); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.alpaca-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
/* the alpaca always fits its area by HEIGHT (no overflow at any chat size); transparent PNG — no box, no shadow */
.alpaca-img { max-height: 100%; max-width: 90%; width: auto; height: auto; object-fit: contain; cursor: pointer; -webkit-tap-highlight-color: transparent; transform-origin: 50% 86%; }
.alpaca-img.pop { animation: alpacaPop .14s ease; }
@keyframes alpacaPop { 0% { transform: scale(1); } 40% { transform: scale(.92) rotate(-2deg); } 100% { transform: scale(1); } }
/* personal tap count sits on the alpaca's belly */
.alpaca-count { position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%); font-size: clamp(22px, 7vh, 40px); font-weight: 800; color: var(--accent); text-shadow: 0 1px 5px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.95); pointer-events: none; }
.alpaca-game-hint { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--beige-text); }
.alpaca-float { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 22px; color: var(--accent); pointer-events: none; animation: alpacaFloat .72s ease-out forwards; text-shadow: 0 1px 4px rgba(255,255,255,.9); }
.alpaca-float.p3 { color: #f59e0b; font-size: 27px; }   /* +3 — orange */
.alpaca-float.p5 { color: #65a30d; font-size: 32px; }   /* +5 — lime */
@keyframes alpacaFloat { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.8); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1.3); } }
.alpaca-board { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.alpaca-row { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.alpaca-rank { flex: 0 0 24px; font-weight: 800; color: var(--muted); text-align: center; }
.alpaca-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alpaca-taps { font-weight: 800; color: var(--accent); }

/* admin chat: nickname shown after the name */
.nick-tag { font-weight: 600; font-size: 11px; color: var(--muted); }
/* admin: block starting alpaca / polls while a Kahoot quiz is on */
.quiz-hint { display: none; }
.quiz-blocked .quiz-hint { display: block; }
.quiz-blocked #alpacaStartBtn, .quiz-blocked .poll-start { opacity: .45; pointer-events: none; }
/* scale poll as tappable number buttons (preferred over the slider when the range is small) */
.poll-scale-btns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.poll-scale-btn { flex: 1 1 0; min-width: 0; padding: 9px 2px; background: var(--surface); color: var(--text); border: 2px solid var(--border); border-radius: 10px; font-weight: 800; font-size: 15px; text-align: center; }
.poll-scale-btn:hover { border-color: var(--accent); filter: none; }
.poll-scale-btn.chosen { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.poll-box.voted .poll-scale-btn { opacity: .7; cursor: default; pointer-events: none; }
.poll-box.voted .poll-scale-btn:not(.chosen) { opacity: .5; }

/* alpaca top-players card in chat (kind='alpaca') */
.alpaca-res-head { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.alpaca-res-ico { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.alpaca-res-row { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; }
.alpaca-res-rank { flex: 0 0 20px; font-weight: 800; color: var(--muted); text-align: center; }
.alpaca-res-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alpaca-res-taps { font-weight: 800; color: var(--accent); }