/* Vistonia class shell: full-screen video (| chat) with a transparent control bar, brand red on a deep stage. */
:root {
  --brand: #E31E24;
  --brand-soft: rgba(227, 30, 36, .16);
  --stage: #120709;
  --panel: #1c0d10;
  --panel-high: #2a1418;
  --line: rgba(255, 255, 255, .08);
  --text: #fff;
  --muted: rgba(255, 255, 255, .62);
  --bar: 72px;
  --chat: min(340px, 42vw);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--stage); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 24px; height: 24px; fill: currentColor; display: block; }
[hidden] { display: none !important; }

/* ---- stage: the video fills the screen; chat opens beside it (the room really narrows, so Zoom redraws) ---- */
.stage { position: absolute; inset: 0; display: flex; }
.room { flex: 1; min-width: 0; position: relative; background: #000; }
.room iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* No width animation: each animated step would resize the video frame and make Zoom redraw it. */
.chat { width: 0; flex: none; overflow: hidden; background: var(--panel); border-left: 1px solid transparent; }
body.chat-open .chat { width: var(--chat); border-left-color: var(--line); }
.chat-inner { width: var(--chat); height: 100%; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.chat-head b { font-size: 15px; display: block; }
.chat-head span { font-size: 12px; color: var(--muted); }
.chat-close {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: var(--panel-high);
  display: grid; place-items: center; transition: transform .15s ease, background .15s ease;
}
.chat-close svg { width: 18px; height: 18px; }
.chat-close:active { transform: scale(.9); background: var(--brand-soft); }
.chat-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { margin: auto; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: 11px; color: var(--muted); margin: 0 6px 3px; }
.msg .bubble { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel-high); font-size: 14px; line-height: 1.35; word-break: break-word; }
.msg.mine .bubble { background: var(--brand); border-radius: 14px 14px 4px 14px; }
.bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
/* Photos and files in chat */
.bubble.photo { padding: 4px; background: var(--panel-high); }
.msg.mine .bubble.photo { background: var(--brand); }
.bubble.photo img { display: block; max-width: 220px; max-height: 240px; width: 100%; border-radius: 11px; object-fit: cover; cursor: zoom-in; background: #000; }
.bubble.file { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 8px 8px 8px 10px; }
.file-ic {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); font-size: 10px; font-weight: 900; letter-spacing: .04em;
}
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta small { font-size: 11px; opacity: .75; }
.file-open { flex: none; border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 12px; background: rgba(255, 255, 255, .18); }
.bubble.file.sending { opacity: .75; }
.chat-form .attach { background: var(--panel-high); }
.chat-form .attach svg { transform: rotate(45deg); }
.chat-form .attach:active { background: var(--brand-soft); }
/* Full-screen photo viewer */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .94); display: flex; align-items: center; justify-content: center; }
.viewer img { max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; }
.viewer-bar { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.viewer-btn { border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 14px; color: #fff; background: rgba(255, 255, 255, .16); text-decoration: none; }
/* Chat turned off by the host: a lock banner replaces the quick replies and message box. */
.chat-off { display: flex; align-items: center; gap: 12px; margin: 8px 10px 10px; padding: 12px 14px; border-radius: 14px; background: var(--panel-high); border: 1px solid var(--line); }
.chat-off svg { width: 22px; height: 22px; flex: none; color: var(--brand); }
.chat-off b { display: block; font-size: 13px; }
.chat-off span { font-size: 12px; color: var(--muted); }
body.chat-locked .chat-quick, body.chat-locked .chat-form { display: none; }
body.chat-locked #ctl-chat .ic { color: var(--muted); }
/* Quick replies scroll sideways; the fading right edge shows there are more. */
.chat-quick {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; border-top: 1px solid var(--line); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent);
}
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button {
  flex: none; border: 1px solid rgba(227, 30, 36, .45); background: var(--brand-soft);
  border-radius: 999px; padding: 6px 11px; font-weight: 600; font-size: 12px; white-space: nowrap;
}
.chat-quick button:active { background: var(--brand); }
.chat-form { display: flex; gap: 8px; align-items: center; padding: 6px 10px 10px; }
.chat-form input {
  flex: 1; min-width: 0; height: 40px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel-high);
  color: var(--text); padding: 0 14px; font-size: 14px; outline: none;
}
.chat-form input:focus { border-color: var(--brand); }
.chat-form button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--brand); display: grid; place-items: center; }
.chat-form button svg { width: 20px; height: 20px; }

/* ---- transparent control bar over the bottom of the video (tap the video to hide / show) ---- */
/* Three columns (live · controls · leave), so items can never run into each other. */
.bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  height: var(--bar); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
  transition: transform .3s ease, opacity .3s ease;
}
body.chat-open .bar { right: var(--chat); }
body.bare .bar { transform: translateY(100%); opacity: 0; pointer-events: none; }
.bar-left { justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow: hidden; }
.live {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--brand); font-weight: 800; font-size: 11px; letter-spacing: .1em;
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse-dot 1.2s ease-in-out infinite; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
@keyframes pulse-dot { 50% { opacity: .3; } }
.controls { display: flex; gap: 6px; }
.ctl {
  position: relative; width: 84px; height: 54px; border: 0; border-radius: 14px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: background .15s;
}
.ctl .ic { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.ctl .lb { font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.ctl:active { background: rgba(255, 255, 255, .12); }
.ctl:disabled { opacity: .45; }
.ctl.off .ic { color: var(--brand); }
.ctl.on { background: rgba(227, 30, 36, .22); }
.ctl.on .ic { color: var(--brand); }
#ctl-hand.on { background: var(--brand); }
#ctl-hand.on .ic { color: #fff; }
.badge {
  position: absolute; top: 3px; right: 18px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--brand); font-weight: 800; font-size: 11px; line-height: 18px; text-align: center;
}
.leave {
  justify-self: end; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 14px; border: 0; border-radius: 999px;
  background: var(--brand); font-weight: 800; font-size: 14px; box-shadow: 0 6px 18px rgba(227, 30, 36, .35);
}
.leave svg { width: 20px; height: 20px; }

/* ---- control animations ---- */
.ctl .ic { transition: transform .18s ease, color .25s ease; }
.ctl:active .ic { transform: scale(.82); }
.ctl.pop .ic { animation: ctl-pop .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ctl-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* Raised hand waves, then keeps a soft glowing ring while it stays up. */
#ctl-hand.on .ic { animation: hand-wave 1.1s ease-in-out 2; transform-origin: 50% 90%; }
#ctl-hand.on::after {
  content: ''; position: absolute; inset: 2px; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(227, 30, 36, .55); animation: hand-ring 1.6s ease-out infinite;
}
@keyframes hand-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(16deg); } 60% { transform: rotate(-12deg); } 80% { transform: rotate(8deg); } }
@keyframes hand-ring { 0% { box-shadow: 0 0 0 0 rgba(227, 30, 36, .55); } 100% { box-shadow: 0 0 0 10px rgba(227, 30, 36, 0); } }
/* Chat icon bounces open; the unread badge pops in. */
#ctl-chat.on .ic { animation: chat-bounce .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes chat-bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-6px) scale(1.1); } 100% { transform: translateY(0); } }
.badge.pop { animation: ctl-pop .4s cubic-bezier(.2, 1.4, .4, 1); }
/* Buttons slide in with the bar (no per-button delay, so taps respond at once). */
.controls .ctl, .leave { transition: transform .25s ease, opacity .2s ease, background .1s; }
body.bare .controls .ctl, body.bare .leave { transform: translateY(14px); opacity: 0; }
/* No double-tap-zoom wait on taps. */
button, .ctl, .leave { touch-action: manipulation; }
.leave:active { transform: scale(.95); }

/* Compact bar: beside the open chat, or on a narrow screen. */
body.chat-open .ctl { width: 58px; }
body.chat-open .ctl .lb { font-size: 10px; }
body.chat-open .badge { right: 8px; }
body.chat-open .timer, body.chat-open .leave span:last-child { display: none; }
body.chat-open .leave { padding: 0 11px; }
@media (max-width: 700px) {
  .ctl { width: 62px; }
  .badge { right: 10px; }
  .timer, .leave span:last-child { display: none; }
  .leave { padding: 0 11px; }
  /* Small phones with chat open: the LIVE badge steps aside so the buttons fit. */
  body.chat-open .bar-left { visibility: hidden; }
  body.chat-open .bar { grid-template-columns: 0 auto minmax(0, 1fr); }
}

/* People count on the footer button: a quiet grey pill (red is for unread chat). */
.badge.count { background: rgba(60, 60, 60, .85); right: 14px; }
#ctl-people.on .badge.count { background: var(--brand); }

/* ---- side panel tabs: Chat | People ---- */
.side-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel-high); }
.side-tab { border: 0; background: transparent; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.side-tab.on { background: var(--brand); color: #fff; }
.chat-head .side-count { font-size: 11px; color: inherit; background: rgba(255, 255, 255, .16); padding: 1px 6px; border-radius: 8px; }
.people { display: none; flex: 1; min-height: 0; flex-direction: column; }
body.side-people .people { display: flex; }
body.side-people .chat-list, body.side-people .chat-off, body.side-people .chat-quick, body.side-people .chat-form { display: none !important; }
.people-total { margin: 10px 14px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.people-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
.person + .person { border-top: 1px solid var(--line); }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--panel-high); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.avatar.teacher { background: var(--brand); }
.person-name { flex: 1; min-width: 0; }
.person-name b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-name small { font-size: 11px; color: var(--muted); }
.person-state { display: flex; gap: 6px; color: var(--muted); }
.person-state .st svg { width: 16px; height: 16px; }
.person-state .st.live { color: #fff; }
.person-state .st.hand { color: var(--brand); }

/* ---- video page arrows (instead of swiping) ---- */
.pager {
  position: absolute; top: 50%; z-index: 30; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .62); display: grid; place-items: center; color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); transition: opacity .2s ease, transform .15s ease;
}
.pager svg { width: 28px; height: 28px; }
.pager:active { transform: scale(.9); background: var(--brand); }
.pager.prev { left: max(10px, env(safe-area-inset-left)); }
.pager.next { right: 10px; }
.pager-tip {
  position: absolute; right: 52px; white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--brand);
  font-size: 12px; font-weight: 700; opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.pager.tip .pager-tip { opacity: 1; transform: none; }
.pager.tip { animation: pager-nudge 1.2s ease-in-out 3; }
@keyframes pager-nudge { 50% { transform: translateX(4px); } }
.pager-dots { position: absolute; left: 50%; bottom: calc(var(--bar) + 6px); transform: translateX(-50%); z-index: 30; display: flex; gap: 6px; pointer-events: none; }
.pager-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.pager-dots i.on { background: #fff; width: 18px; border-radius: 4px; }
body.bare .pager, body.bare .pager-dots { opacity: 0; pointer-events: none; }
body.vis-pip .pager, body.vis-pip .pager-dots { display: none; }

/* ---- who is speaking (top-left pill with moving sound bars) ---- */
.speaker {
  position: fixed; top: 12px; left: max(12px, env(safe-area-inset-left)); z-index: 40; max-width: 46vw;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); font-size: 13px; font-weight: 700;
  animation: speaker-in .2s ease;
}
.speaker #speaker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speaker-tail { color: var(--muted); font-weight: 500; white-space: nowrap; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; border-radius: 2px; background: #3ddc84; animation: eq .8s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s; }
.eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@keyframes speaker-in { from { opacity: 0; transform: translateY(-6px); } }
body.chat-open .speaker { max-width: calc(100vw - var(--chat) - 24px); }

/* ---- picture-in-picture (app minimised): video only ---- */
body.vis-pip .bar, body.vis-pip .chat, body.vis-pip .toasts, body.vis-pip .sheet, body.vis-pip .speaker { display: none !important; }

/* ---- toasts, leave sheet, joining gate ---- */
.toasts { position: fixed; top: 12px; right: 12px; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(300px, 60vw); }
.toast {
  padding: 9px 13px; border-radius: 12px; background: rgba(28, 13, 16, .96); border-left: 3px solid var(--brand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); font-size: 13px; line-height: 1.35; display: flex; flex-direction: column; gap: 2px;
  animation: toast-in .25s ease;
}
.toast b { font-size: 11px; color: var(--muted); }
body.chat-open .toasts { right: calc(var(--chat) + 12px); }
.toast.out { opacity: 0; transform: translateX(20px); transition: all .35s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }

.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.sheet-card { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.sheet-card b { font-size: 17px; }
.sheet-card p { color: var(--muted); font-size: 14px; margin: 8px 0 18px; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; }
.sheet-actions button { border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 700; background: var(--panel-high); }
.sheet-actions .danger { background: var(--brand); }

#gate {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--stage); text-align: center; padding: 24px;
}
#gate .badge-ring {
  width: 84px; height: 84px; border-radius: 50%; background: var(--brand); display: grid; place-items: center;
  animation: pulse 1.1s ease-in-out infinite alternate; box-shadow: 0 0 40px rgba(227, 30, 36, .45);
}
#gate .badge-ring svg { width: 40px; height: 40px; }
#gate h1 { font-size: 18px; margin: 6px 0 0; }
#gate p { margin: 0; opacity: .7; font-size: 14px; max-width: 420px; }
#gate button { margin-top: 8px; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 14px; background: rgba(255, 255, 255, .16); }
#gate.error .badge-ring { animation: none; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }