/* 1venue room: pre-join, stage tiles, presentation, side panel, captions, reactions, PiP. */
[data-group="danger"] { --g: #e11d48; }
body.in-room { overflow: hidden; }
body.in-room .main { max-width: none; padding: 0; }
body.in-room .cmdbar { bottom: calc(10px + var(--safe-b)); width: min(1100px, calc(100% - 16px)); }
@media (max-width: 820px) { body.in-room .cmdbar { bottom: calc(6px + var(--safe-b)); } }

/* ---------- pre-join ---------- */
.prejoin { position: relative; min-height: calc(100dvh - var(--cmd-h) - 40px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem); }
.pj-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(30rem 20rem at 20% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(26rem 18rem at 90% 80%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%); }
.pj-preview { position: relative; aspect-ratio: 16/10; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--s3), var(--s1)); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); display: grid; place-items: center; }
[data-theme="dark"] .pj-preview { background: radial-gradient(circle at 50% 40%, #1b2233, #0a0d14); }
.pj-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.pj-video.mirror { transform: scaleX(-1); }
.pj-preview.has-video .pj-video { opacity: 1; }
.pj-preview.has-video .pj-av { opacity: 0; }
.pj-av { transition: opacity .3s; }
.pj-ctl { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 6px; border-radius: 22px; background: rgba(8,12,22,.45); backdrop-filter: blur(14px); }
.pj-btn { --g: var(--g-media); width: 52px; height: 52px; border-radius: 18px; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); cursor: pointer; transition: transform .2s var(--spring), background .2s; }
.pj-btn:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.pj-btn.off { background: #e11d48; }
.pj-meter { position: absolute; left: 18px; right: 18px; bottom: 4px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.12); }
.pj-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #84cc16); transition: width .08s; }
.pj-form { display: flex; flex-direction: column; gap: 1rem; }
.pj-title { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.eyebrow { font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pulse-btn { position: relative; }
.pulse-btn:not([disabled])::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; animation: ringPulse 2.4s infinite; }
@keyframes ringPulse { 0% { opacity: .55; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.06); } }
.btn.loading { pointer-events: none; opacity: .8; }
.btn.loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
  .prejoin { grid-template-columns: 1fr; align-content: start; padding: .8rem .8rem calc(var(--cmd-h) + 28px); gap: 1rem; min-height: auto; }
  .pj-preview { aspect-ratio: 4/3.4; border-radius: var(--r-lg); }
}

/* ---------- waiting ---------- */
.waiting { min-height: 70dvh; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; padding: 2rem; }
.wait-orb { width: 120px; height: 120px; border-radius: 40px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--s1)); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); animation: orb 2.2s infinite; }
@keyframes orb { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: 0 0 0 28px transparent; } }
.dots-loader { display: inline-flex; gap: 6px; }
.dots-loader i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dots 1s infinite ease-in-out; }
.dots-loader.sm i { width: 5px; height: 5px; background: currentColor; }
.dots-loader i:nth-child(2) { animation-delay: .15s; } .dots-loader i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-5px); opacity: 1; } }

/* ---------- room shell ---------- */
.room { position: relative; height: 100dvh; display: flex; flex-direction: column; gap: 8px; padding: calc(var(--safe-t) + 8px) max(10px, var(--safe-r)) calc(var(--cmd-h) + 22px + var(--safe-b)) max(10px, var(--safe-l)); gap: 8px; isolation: isolate; }
.room-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; background: radial-gradient(40rem 22rem at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), radial-gradient(36rem 22rem at 100% 100%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 70%); }
.room-head { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: 4px 6px; }
.rh-logo { color: var(--accent); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--s1); border: 1px solid var(--line); flex: none; }
.rh-title { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rh-title b { max-width: 38vw; }
.rh-timer { font-variant-numeric: tabular-nums; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-weight: 650; font-size: inherit; }
.pill.rec { background: #e11d48; color: #fff; gap: .35rem; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; animation: pulse 1.2s infinite; }
.pill.rh-people { cursor: pointer; border: 1px solid var(--line-2); background: var(--s1); gap: .35rem; color: var(--g); font-weight: 700; }
.icon-btn.danger { --g: #e11d48; background: #e11d48; color: #fff; }
.icon-btn.danger:hover { background: #be123c; color: #fff; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-btn.glass, .btn.glass { background: rgba(8,12,22,.5); color: #fff; backdrop-filter: blur(10px); border-color: rgba(255,255,255,.12); }
.seg-b { --g: var(--g-media); border: 0; background: none; width: 36px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.seg-b.on { background: var(--s1); color: var(--g); box-shadow: var(--shadow-1); }
.net-banner { display: flex; align-items: center; gap: .5rem; justify-content: center; padding: .45rem .8rem; border-radius: 12px; font-size: .85rem; font-weight: 600; background: color-mix(in srgb, #f59e0b 16%, var(--s1)); color: color-mix(in srgb, #b45309 80%, var(--text)); border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent); }
.net-banner[hidden] { display: none; }
.room-main { position: relative; flex: 1 1 0; min-height: 0; display: flex; gap: 10px; }
.room-head .pill { position: static; flex: none; }
.room-head, .net-banner { flex: none; }
.room[data-breakout]:not([data-breakout=""])::after { content: "Breakout · " attr(data-breakout); position: absolute; top: calc(var(--safe-t) + 60px); left: 50%; transform: translateX(-50%); padding: .3rem .8rem; border-radius: 999px; background: var(--g-people); color: #fff; font-size: .75rem; font-weight: 700; }
@media (max-width: 640px) { .hide-sm { display: none !important; } .rh-title b { max-width: 42vw; } }
@media (max-width: 420px) { .hide-xs { display: none !important; } }

/* ---------- stage & tiles ---------- */
.stage { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.tiles { flex: 1; min-height: 0; display: grid; gap: 10px; align-content: center; --cols: 1;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.tiles[data-count="1"] { --cols: 1; } .tiles[data-count="2"] { --cols: 2; } .tiles[data-count="3"], .tiles[data-count="4"] { --cols: 2; }
.tiles[data-count="5"], .tiles[data-count="6"] { --cols: 3; } .tiles[data-count="7"], .tiles[data-count="8"], .tiles[data-count="9"] { --cols: 3; } .tiles[data-count="many"] { --cols: 5; }
.stage[data-layout="spotlight"] .tiles, .stage[data-layout="speaker"] .tiles { display: flex; flex-direction: column; }
.stage.presenting .tiles { flex: 0 0 auto; display: block; }
.tile-main { flex: 1; min-height: 0; display: flex; }
.tile-main .tile { flex: 1; }
.filmstrip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: none; padding-bottom: 2px; }
.filmstrip .tile { flex: 0 0 auto; width: 168px; aspect-ratio: 16/10; }
.filmstrip.hidden-strip { display: none; }
.tile { --g: var(--g-media); position: relative; min-height: 0; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--s3), var(--s2)); border: 1px solid var(--line); box-shadow: var(--shadow-1); display: grid; place-items: center; transition: box-shadow .25s, transform .25s var(--ease); animation: tileIn .35s var(--spring) both; }
[data-theme="dark"] .tile { background: radial-gradient(circle at 50% 35%, #1a2131, #0d1119); }
@keyframes tileIn { from { opacity: 0; transform: scale(.94); } }
.tiles > .tile { aspect-ratio: auto; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .3s; }
.tile video[src], .tile video:not([srcObject=""]) { opacity: 1; }
.tile.screen video { object-fit: contain; }
.tile.mirror video { transform: scaleX(-1); }
.tile-av { position: relative; z-index: 0; }
.tile-av .av.xl { width: clamp(56px, 22%, 120px); height: auto; aspect-ratio: 1; font-size: clamp(1.2rem, 3vw, 2.4rem); }
.tile.speaking { box-shadow: 0 0 0 3px #22c55e, 0 0 24px -4px #22c55e; }
.tile.pinned { box-shadow: 0 0 0 2px var(--accent); }
.tile-meta { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: .35rem; padding: .25rem .55rem .25rem .35rem; border-radius: 10px; background: rgba(8,12,22,.55); color: #fff; font-size: .78rem; backdrop-filter: blur(8px); z-index: 2; }
.tile-mic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; }
.tile-mic.off { background: #e11d48; }
.tile-q[data-q="poor"], .tile-q[data-q="lost"] { color: #f87171; } .tile-q[data-q="good"] { color: #fbbf24; }
.tile-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 2; }
.tb { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 8px; background: rgba(8,12,22,.55); color: #fff; font-size: .72rem; font-weight: 700; backdrop-filter: blur(8px); }
.tb[data-role="host"] { background: #b7791f; } .tb[data-role="cohost"] { background: #7c3aed; } .tb[data-role="speaker"] { background: #db2777; } .tb.hand { background: #f59e0b; }
.tile-pin { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .2s; z-index: 2; }
.tile:hover .tile-pin, .tile.pinned .tile-pin { opacity: 1; }
.tile.more { border: 1px dashed var(--line-2); cursor: pointer; color: var(--muted); display: grid; place-content: center; text-align: center; }
.tile.more b { font-size: 1.4rem; color: var(--text); }
.stage-empty { grid-column: 1 / -1; }
.audience { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 6px 10px; margin-top: 6px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); cursor: pointer; width: max-content; max-width: 100%; }
.audience .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--s1); } .audience .av:first-child { margin-left: 0; }
.av.xs { width: 22px; height: 22px; font-size: .6rem; }

/* ---------- presentation area (gets most of the space) ---------- */
.present { position: relative; flex: 1; min-height: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--s1); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); display: flex; flex-direction: column; animation: tileIn .35s var(--spring) both; }
.present[hidden] { display: none; }
.present > .tile.big { flex: 1; border-radius: 0; border: 0; aspect-ratio: auto; width: auto; }
.present[data-kind="screen"] { background: #05070c; }
.present-head { --g: var(--g-content); display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--g) 6%, var(--s1)); }
.present-head .i { color: var(--g); display: flex; }
.present-body, .present-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--s2); }
.present-body.board-wrap { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.present-video, .present-img { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.present-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.present-close { margin-left: auto; }
.scripture-card { flex: 1; overflow: auto; padding: clamp(1rem, 3vw, 2.4rem); background: linear-gradient(160deg, color-mix(in srgb, var(--g-faith) 10%, var(--s1)), var(--s1) 60%); }
.scripture-card .verse-wrap { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(1.1rem, 2.2vw, 1.7rem); line-height: 1.6; }
.scripture-ref { font-weight: 800; color: var(--g-faith); letter-spacing: .02em; }
.present .board-wrap, .present .wb { flex: 1; min-height: 0; position: relative; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tl-item { margin: 0; border-radius: 12px; overflow: hidden; border: 2px solid transparent; cursor: pointer; position: relative; }
.tl-item.on { border-color: var(--g-content); }
.tl-item img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.tl-item figcaption { font-size: .7rem; padding: 3px 6px; background: var(--s2); }
.stage.presenting .tiles .filmstrip .tile { width: 132px; }
@media (max-width: 820px) { .filmstrip .tile, .stage.presenting .tiles .filmstrip .tile { width: 112px; } }

/* ---------- captions + reactions ---------- */
.cap-overlay { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(820px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 4px; z-index: 5; pointer-events: none; }
.cap-line { align-self: center; max-width: 100%; padding: .35rem .75rem; border-radius: 10px; background: rgba(6,9,16,.78); color: #fff; font-size: clamp(.9rem, 1.6vw, 1.1rem); line-height: 1.4; animation: capIn .25s var(--ease) both; }
.cap-line b { color: #93c5fd; }
.cap-line.interim { opacity: .7; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } }
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.fx { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; animation: floatUp 3.1s cubic-bezier(.2,.7,.3,1) forwards; }
.fx .e { font-size: 2.4rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.fx small { font-size: .7rem; padding: 1px 6px; border-radius: 6px; background: rgba(8,12,22,.6); color: #fff; }
@keyframes floatUp { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translate(0, -40px) scale(1.1); } 100% { transform: translate(var(--dx), -70vh) scale(1); opacity: 0; } }
.react-pop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.react-b { font-size: 2rem; height: 64px; border-radius: 16px; border: 1px solid var(--line); background: var(--s2); cursor: pointer; transition: transform .2s var(--spring); }
.react-b:hover { transform: scale(1.12) rotate(-4deg); background: color-mix(in srgb, var(--g-engage) 12%, var(--s2)); }
.react-b:active { transform: scale(.9); }

/* ---------- side panel ---------- */
.rpanel { flex: 0 0 0; width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--s1); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); overflow: hidden; opacity: 0; transition: flex-basis .3s var(--ease), opacity .25s; }
.rpanel.open { flex-basis: 380px; width: 380px; opacity: 1; }
.rp-grab { display: none; }
.rp-head { display: flex; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); }
.rp-tabs { flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.rp-tabs button { --g: var(--g-nav); position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; height: 38px; padding: 0 .55rem; border: 0; border-radius: 12px; background: none; color: var(--muted); font-weight: 650; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.rp-tabs button:hover { color: var(--g); background: color-mix(in srgb, var(--g) 8%, transparent); }
.rp-tabs button.on { color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent); }
.rp-tabs .badge { position: static; margin-left: 2px; }
.rp-body { flex: 1; min-height: 0; overflow-y: auto; padding: .8rem; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .7rem; }
@media (max-width: 820px) {
  .rpanel { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; width: auto; height: min(78dvh, 720px); border-radius: 24px 24px 0 0; transform: translateY(105%); opacity: 1; transition: transform .32s var(--ease); flex: none; padding-bottom: calc(var(--cmd-h) + 16px + var(--safe-b)); }
  .rpanel.open { transform: none; width: auto; }
  .rp-grab { display: block; padding: 8px 0 2px; cursor: grab; touch-action: none; }
  .rp-grab i { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto; }
  .rp-tabs button span { display: none; }
  .rp-tabs button.on span { display: inline; }
}

/* chat */
.chat-view { display: flex; flex-direction: column; gap: .6rem; min-height: 100%; }
.msgs { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.msg { display: flex; gap: .5rem; align-items: flex-end; animation: capIn .2s var(--ease) both; }
.msg.mine { flex-direction: row-reverse; }
.bubble { max-width: 82%; padding: .5rem .75rem; border-radius: 16px 16px 16px 6px; background: var(--s2); position: relative; word-wrap: break-word; }
.msg.mine .bubble { border-radius: 16px 16px 6px 16px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-2))); color: #fff; }
.msg.mine .bubble a { color: #fff; text-decoration: underline; }
.bubble .who { display: block; font-size: .74rem; color: var(--g-social); margin-bottom: 1px; }
.bubble time { display: block; font-size: .65rem; opacity: .65; text-align: right; margin-top: 2px; }
.bubble .txt a { color: var(--accent); text-decoration: underline; }
.mention { color: var(--g-social); }
.msg.mine .mention { color: #fde68a; }
.msg-img { max-width: 220px; border-radius: 12px; margin-top: 4px; cursor: zoom-in; }
.msg-voice { max-width: 230px; margin-top: 4px; }
.msg-file { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-radius: 10px; background: color-mix(in srgb, currentColor 10%, transparent); margin-top: 4px; }
.msg-file small { opacity: .7; }
.compose-card, .composer, .chat-view > .wa { position: sticky; bottom: -0.8rem; display: flex; flex-direction: column; gap: .4rem; padding: .55rem; margin: 0 -.2rem -.2rem; border-radius: 18px; background: var(--s1); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.composer textarea, .compose-card textarea { resize: none; border: 0; outline: 0; background: transparent; min-height: 40px; max-height: 140px; padding: .3rem .4rem; }
.send-btn { --g: var(--g-social); background: var(--g); color: #fff; }
.send-btn:hover { background: color-mix(in srgb, var(--g) 85%, #000); color: #fff; }
.att-prev { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border-radius: 10px; background: var(--s2); font-size: .8rem; }
.att-prev img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }

/* people */
.people-view { display: flex; flex-direction: column; gap: .7rem; }
.person { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 14px; transition: background .15s; }
.person:hover { background: var(--s2); }
.person.speaking .av { box-shadow: 0 0 0 2px #22c55e; }
.person .icon-btn { width: 34px; height: 34px; }
.role-tag { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 6px; font-size: .66rem; font-weight: 750; background: var(--s3); color: var(--muted); }
.role-tag[data-role="host"] { background: color-mix(in srgb, #b7791f 18%, transparent); color: #b7791f; }
.role-tag[data-role="cohost"] { background: color-mix(in srgb, #7c3aed 16%, transparent); color: #7c3aed; }
.role-tag[data-role="speaker"] { background: color-mix(in srgb, #db2777 15%, transparent); color: #db2777; }
.mic-ico { color: #e11d48; display: grid; place-items: center; } .mic-ico.on { color: #16a34a; }
.hand-ico { font-size: 1.1rem; animation: wave 1.4s infinite; transform-origin: 70% 90%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-8deg); } }
.qnum { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: #f59e0b; color: #fff; flex: none; }
.shade { --g: var(--accent); padding: .75rem; border-radius: 16px; background: color-mix(in srgb, var(--g) 6%, var(--s1)); border: 1px solid color-mix(in srgb, var(--g) 18%, transparent); display: flex; flex-direction: column; gap: .5rem; }
.sec-h { display: flex; align-items: center; gap: .45rem; } .sec-h .i { color: var(--g); display: flex; }
.sec-sub { font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }

/* Compact waiting-room strip in People panel */
.shade.wait-box { padding: .45rem .55rem; border-radius: 12px; gap: .2rem; }
.wait-box .wait-head { gap: .35rem; flex-wrap: wrap; }
.wait-box .wait-head b { font-size: .82rem; font-weight: 700; }
.wait-box .wait-head .btn.xs { padding: .2rem .45rem; font-size: .72rem; border-radius: 8px; gap: .25rem; }
.wait-box .wait-head .btn.xs .ic { width: 13px; height: 13px; }
.wait-box .wait-row { padding: .2rem .25rem; gap: .4rem; border-radius: 8px; min-height: 0; }
.wait-box .wait-row .icon-btn,
.wait-box .wait-row .icon-btn.sm { width: 26px; height: 26px; border-radius: 8px; }
.wait-box .wait-row .icon-btn .ic { width: 14px; height: 14px; }
.wait-box .wait-row b { font-size: .84rem; font-weight: 650; }
.seats { display: flex; flex-wrap: wrap; gap: 6px; }
.seat { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--g) 45%, transparent); color: var(--g); }
.seat.taken { border-style: solid; background: color-mix(in srgb, var(--g) 12%, transparent); }
.person.req { background: color-mix(in srgb, var(--g-engage) 6%, transparent); }
.mod-row { gap: 6px; }
.search-line { display: flex; align-items: center; gap: .5rem; padding: 0 .7rem; border-radius: 14px; background: var(--s2); border: 1px solid var(--line); }
.search-line input { flex: 1; border: 0; outline: 0; background: none; height: 44px; }

/* engage */
.engage-view { display: flex; flex-direction: column; gap: .7rem; }
.seg.block { display: flex; width: 100%; } .seg.block button { flex: 1; }
.poll { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; border-color: color-mix(in srgb, var(--g-engage) 22%, transparent); }
.poll .i { color: var(--g-engage); display: flex; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); cursor: pointer; overflow: hidden; text-align: left; isolation: isolate; transition: border-color .2s; }
.poll-opt::before { content: ""; position: absolute; inset: 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--g-engage) 14%, transparent); z-index: -1; transition: width .6s var(--ease); }
.poll-opt:hover:not([disabled]) { border-color: var(--g-engage); }
.poll-opt.mine, .poll-opt.picked { border-color: var(--g-engage); box-shadow: inset 0 0 0 1px var(--g-engage); }
.poll-opt[disabled] { cursor: default; }
.qa { padding: .7rem; border-radius: 14px; background: var(--s2); display: flex; gap: .6rem; }
.qa .q { flex: 1; }
.qa.answered { opacity: .7; } .qa.pinned { box-shadow: inset 3px 0 0 var(--g-engage); }
.comment { display: flex; gap: .55rem; padding: .4rem 0; }
.comment .act, .act { border: 0; background: none; display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); font-size: .78rem; font-weight: 600; cursor: pointer; padding: .2rem .3rem; border-radius: 8px; }
.act:hover { color: var(--g-social); background: color-mix(in srgb, var(--g-social) 8%, transparent); }
.act.on { color: #e11d48; }
.reply-box { margin-left: 2.2rem; border-left: 2px solid var(--line-2); padding-left: .6rem; }
.reply-box[hidden] { display: none; }

/* tools */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tool-card { --g: var(--g-content); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .75rem; border-radius: 16px; border: 1px solid var(--line); background: var(--s1); cursor: pointer; text-align: left; transition: transform .2s var(--spring), border-color .2s, background .2s; }
.tool-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--g) 40%, transparent); background: color-mix(in srgb, var(--g) 5%, var(--s1)); }
.tool-card b { font-size: .86rem; } .tool-card small { font-size: .7rem; color: var(--muted); line-height: 1.3; }
.ico-tile { --g: var(--accent); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--g); background: color-mix(in srgb, var(--g) 13%, transparent); flex: none; }
.ico-tile.sm { width: 30px; height: 30px; border-radius: 10px; } .ico-tile.lg { width: 64px; height: 64px; border-radius: 20px; }
.dot-live { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent); }
.tool-view { display: flex; flex-direction: column; gap: .7rem; }
.sub-head { display: flex; align-items: center; gap: .4rem; }
.tool-hero { --g: var(--g-content); padding: .8rem; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--g) 12%, var(--s1)), var(--s1)); border: 1px solid color-mix(in srgb, var(--g) 20%, transparent); display: flex; flex-direction: column; gap: .4rem; }
.scripture-preview { max-height: 260px; overflow: auto; padding: .7rem; border-radius: 14px; background: color-mix(in srgb, var(--g-faith) 6%, var(--s1)); border: 1px solid color-mix(in srgb, var(--g-faith) 18%, transparent); }
.transcript { display: flex; flex-direction: column; gap: .35rem; max-height: 360px; overflow: auto; }
.tline { display: flex; gap: .55rem; font-size: .88rem; line-height: 1.45; }
.tline .ts { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; font-size: .74rem; padding-top: 2px; width: 3.4rem; }
.ai-out { padding: .75rem; border-radius: 14px; background: color-mix(in srgb, var(--g-ai) 6%, var(--s1)); border: 1px solid color-mix(in srgb, var(--g-ai) 18%, transparent); font-size: .9rem; }
.act-row { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; padding: .3rem 0; }
.act-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: none; }
.diag .k { color: var(--muted); font-size: .78rem; } .diag .v { font-weight: 700; }
.invite-link { display: flex; gap: .5rem; } .invite-link .input { flex: 1; }
.switch-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; }

/* overlays */
.peeks { position: absolute; right: 14px; bottom: calc(var(--cmd-h) + 30px + var(--safe-b)); display: flex; flex-direction: column; gap: 6px; z-index: 30; width: min(320px, calc(100% - 28px)); }
.peek { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: .55rem .8rem; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); cursor: pointer; text-align: left; animation: peekIn .3s var(--spring) both; max-width: 100%; }
.peek b { font-size: .8rem; color: var(--g-social); } .peek span { font-size: .86rem; max-width: 100%; }
.peek.out { animation: toastOut .25s ease-in both; }
@keyframes peekIn { from { opacity: 0; transform: translateX(20px) scale(.95); } }
.ring-overlay { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4,8,18,.5); backdrop-filter: blur(6px); animation: fade .2s both; }
.ring-card { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.6rem 2rem; border-radius: 28px; background: var(--s1); box-shadow: var(--shadow-3); }
.ring-ico { color: var(--g-people); animation: wave .8s infinite; }
.audio-unlock { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); z-index: 40; box-shadow: var(--shadow-3); }

/* document PiP window */
.pip-body { margin: 0; background: #05070c; color: #fff; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.pip-body .stage { flex: 1; padding: 6px; }
.pip-body .stage .audience, .pip-body .stage .filmstrip { display: none; }
.pip-body .pip-dock { display: flex; justify-content: center; gap: 6px; padding: 6px; background: rgba(255,255,255,.05); }
.pip-body .pip-dock .icon-btn { color: #fff; background: rgba(255,255,255,.1); }
.pip-body .pip-dock .icon-btn.off { background: #e11d48; }
.pip-placeholder { flex: 1; display: grid; place-content: center; justify-items: center; gap: .6rem; color: var(--muted); border-radius: var(--r-xl); border: 1px dashed var(--line-2); }

[hidden] { display: none !important; }
/* ---- scripture dock (compact by default, collapsible, expandable) ---- */
.scr-dock { position: absolute; z-index: 7; left: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); max-height: min(46%, 360px); display: flex; flex-direction: column; border-radius: 18px; background: color-mix(in srgb, var(--s1) 92%, transparent); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); overflow: hidden; animation: scrIn .28s var(--spring, ease) both; }
.scr-dock[hidden] { display: none; }
@keyframes scrIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.scr-dock[data-mode="min"] { width: auto; max-height: none; border-radius: 999px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; overflow: visible; }
.scr-pill { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .8rem 0 .7rem; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--s1) 90%, transparent); backdrop-filter: blur(16px); box-shadow: var(--shadow-1, var(--shadow-2)); color: var(--text); font: inherit; font-size: .86rem; cursor: pointer; }
.scr-pill > span:first-child { color: var(--g-faith); display: inline-grid; }
.scr-pill .chev { transform: rotate(180deg); opacity: .6; display: inline-grid; }
.scr-head { display: flex; align-items: center; gap: .35rem; padding: .45rem .5rem .45rem .7rem; border-bottom: 1px solid var(--line); }
.scr-head b { font-size: .9rem; font-weight: 650; }
.scr-head .scr-ic { color: var(--g-faith); display: inline-grid; }
.scr-head select.input.sm { width: auto; max-width: 92px; height: 30px; padding: 0 1.4rem 0 .5rem; font-size: .78rem; }
.scr-body { overflow: auto; padding: .6rem .85rem .7rem; overscroll-behavior: contain; }
.scr-body .scripture-ref { font-size: .78rem; display: flex; gap: .5rem; align-items: baseline; }
.scr-body .scripture-ref small { font-weight: 500; color: var(--muted); letter-spacing: 0; }
.scr-body .verse-wrap { margin-top: .3rem; font-size: 1.02rem; line-height: 1.6; }
.scr-body .verse, .scripture-card .verse { cursor: pointer; font-size: inherit; line-height: inherit; transition: background .15s; }
.scr-hint { margin: .4rem 0 0; }
.scr-sel { display: flex; align-items: center; gap: .35rem; padding: .45rem .5rem .45rem .8rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--g-faith) 7%, var(--s1)); }
.scr-sel[hidden] { display: none; }
.scr-sel b { font-size: .84rem; min-width: 0; }
.present > .scr-sel { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); border-radius: 14px; border: 1px solid var(--line-2); box-shadow: var(--shadow-2); width: min(520px, calc(100% - 28px)); }
.present { position: relative; }
@media (max-width: 720px) {
  .scr-dock:not([data-mode="min"]) { left: 6px; right: 6px; bottom: 6px; width: auto; max-height: 52%; border-radius: 18px 18px 14px 14px; }
  .scr-dock:not([data-mode="min"])::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 6px auto 0; }
  .scr-dock[data-mode="min"] { left: 8px; bottom: 8px; }
}
.msg .bubble .passage-card, .msg.mine .bubble .passage-card { color: var(--text); }
.msg.mine .bubble .passage-card a.pc-ref { color: var(--text); text-decoration: none; }
@media (max-width: 720px) {
  .scr-dock:not([data-mode="min"]) { max-height: 40%; }
  .scr-body .verse-wrap { font-size: .98rem; line-height: 1.55; }
}
@media (max-width: 720px) { .scr-sel .btn:not(.primary) span { display: none; } .scr-sel .btn:not(.primary) { padding: 0 .55rem; } }
.present-head .pill, .rp-head .pill { position: static; flex: none; }

/* content sharing: YouTube watch-together, slides, image */
.present-body:has(> .present-img) { display: flex; background: #000; }
.present-body.yt-wrap { position: relative; background: #000; display: flex; }
.present-body.yt-wrap > div, .present-body.yt-wrap > iframe { flex: 1; width: 100%; height: 100%; min-height: 0; border: 0; }
.yt-tap { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; }
.present[data-kind="content"] .present-tools { top: auto; bottom: 12px; right: auto; left: 50%; transform: translateX(-50%); align-items: center; padding: 3px; border-radius: 999px; background: color-mix(in srgb, #000 45%, transparent); backdrop-filter: blur(8px); }
.present[data-kind="content"] .present-tools .slide-count { color: #fff; opacity: .95; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.present-head .col-tight { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.empty-card { margin: auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem; text-align: center; color: var(--t2, inherit); max-width: 340px; }
.empty-card .i { color: var(--g-content); }

/* captions & transcript: compact header, settings collapse to the top so the transcript gets the room */
.cap-view { gap: .5rem; }
.cap-head { position: sticky; top: -1px; z-index: 2; background: var(--s1); margin: 0 -2px; padding: 2px 2px .4rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .35rem; }
.cap-bar { display: flex; align-items: center; gap: .35rem; min-height: 32px; }
.cap-bar .chip.sm { padding: .3rem .6rem; font-size: .78rem; gap: .3rem; display: inline-flex; align-items: center; white-space: nowrap; }
.cap-bar .pill { position: static; flex: none; padding: .15rem .45rem; font-size: .65rem; }
.cap-bar .grow { flex: 1; min-width: 0; }
.cap-settings { display: flex; flex-direction: column; gap: 2px; animation: fade .18s ease; }
.cap-settings .set-row { padding: .45rem .2rem; }
.cap-view .transcript { max-height: none; min-height: 240px; height: calc(100dvh - 250px); }
@media (max-width: 640px) { .cap-view .transcript { height: calc(70dvh - 150px); } }
.cap-bar { flex-wrap: nowrap; }
.cap-bar > .icon-btn { flex: none; width: 32px; min-width: 32px; margin: 0; }
.cap-bar > .chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cap-bar > .pill { flex: none; }
@media (max-width: 560px) {
  .cap-bar { gap: .25rem; }
  .cap-bar > .icon-btn { width: 28px; min-width: 28px; }
  .cap-bar .chip.sm { padding: .3rem .5rem; }
  .cap-bar .pill.live { font-size: 0; gap: 0; padding: 4px; }
}
.cap-view { container-type: inline-size; }
@container (max-width: 360px) {
  .cap-bar { gap: .2rem; }
  .cap-bar > .chip span { display: none; }
  .cap-bar > .chip { padding: .35rem .45rem; flex: none; }
  .cap-bar > .icon-btn { width: 28px; min-width: 28px; }
  .cap-bar .pill.live { font-size: 0; gap: 0; padding: 4px; }
}

/* Screen-share switcher: each viewer picks which share (or cameras) fills the spotlight */
.share-switch { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; flex: none; }
.share-switch[hidden] { display: none; }
.sw-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--s1); color: inherit; font: inherit; font-size: .78rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sw-chip:hover { background: var(--s2); }
.sw-chip.on { background: color-mix(in srgb, var(--g-media, #2563eb) 16%, var(--s1)); border-color: color-mix(in srgb, var(--g-media, #2563eb) 45%, transparent); }
.tb.sharing { border: 0; cursor: pointer; background: #2563eb; font: inherit; font-size: .72rem; font-weight: 700; }
.present[data-kind="screen"] > .tile.big { background: #05070c; }
.present[data-kind="screen"] > .tile.big video { object-fit: contain; background: #05070c; }

/* ===================== 2026-11 UX pack ===================== */
/* F — fullscreen keeps the soft site background + full chrome (1v rail → search bar), with breathing room. */
html { --site-grad: linear-gradient(180deg, #dbe8ff 0%, #eef4ff 40%, #ffffff 100%); }
html.room-fs, html.room-fs body, html:fullscreen, html:fullscreen body { background: var(--site-grad) fixed !important; min-height: 100vh; }
html.room-fs .room, html:fullscreen .room, html.room-fs .stage, html:fullscreen .stage { background: transparent !important; }
:fullscreen, ::backdrop, html.room-fs ::backdrop { background: var(--site-grad) !important; }
.present:fullscreen, .present:fullscreen .present-body { background: var(--site-grad) !important; }
html.room-fs .room { padding: calc(var(--safe-t) + 18px) max(28px, var(--safe-r)) calc(var(--cmd-h) + 40px + var(--safe-b)) max(28px, var(--safe-l)); gap: 14px; }
html.room-fs .room-head { padding: 6px 10px; }
html.room-fs .room-main { gap: 14px; }
html.room-fs .cmdbar { bottom: calc(18px + var(--safe-b)); }

/* S — confirm before ending a screenshare */
.share-confirm { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter: blur(6px) saturate(1.05); -webkit-backdrop-filter: blur(6px); animation: scIn .18s ease both; }
.share-confirm-card { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 1.3rem 1.2rem 1.1rem; border-radius: 20px; background: var(--s1); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); }
.share-confirm-card .sc-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--g-media, var(--accent)); background: color-mix(in srgb, var(--g-media, var(--accent)) 12%, transparent); }
.share-confirm-card b { font-weight: 600; font-size: 1rem; } .share-confirm-card p { margin: 0 0 .5rem; }
@keyframes scIn { from { opacity: 0; } }

/* Head rail camera toggle (replaces the "Your screen / Cameras" chip row) */
.rh-cams.on { color: var(--g-media, var(--accent)); background: color-mix(in srgb, var(--g-media, var(--accent)) 12%, transparent); }
.share-switch { display: none !important; }

/* Small participant cards: blurred-avatar square, round avatar, mute badge top-left, ⋯ — on the site background. */
.filmstrip { padding: 4px 2px; background: transparent; }
.filmstrip .tile { aspect-ratio: 1 / 1; width: 112px; border-radius: 16px; background: var(--s2); border: 1px solid var(--line); cursor: pointer; }
.stage.presenting .tiles .filmstrip .tile { width: 104px; }
.filmstrip .tile::before { content: ""; position: absolute; inset: -12px; background: var(--av-url, none) center / cover, radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, var(--s2)), var(--s2)); filter: blur(16px) saturate(1.1); opacity: .85; z-index: 0; }
.filmstrip .tile .tile-av .av.xl { width: 58%; font-size: 1.3rem; box-shadow: 0 0 0 2px color-mix(in srgb, var(--s1) 70%, transparent); }
.filmstrip .tile .tile-meta { left: 6px; right: 6px; bottom: 6px; padding: 0; background: none; backdrop-filter: none; color: var(--text); text-shadow: 0 1px 2px color-mix(in srgb, var(--s1) 80%, transparent); font-size: .72rem; }
.filmstrip .tile.has-video .tile-meta { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.filmstrip .tile:has(.tile-mic.off)::after { content: ""; position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; z-index: 3; background: color-mix(in srgb, var(--s1) 70%, transparent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e11d48" stroke-width="2" stroke-linecap="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>') center / 14px no-repeat; backdrop-filter: blur(6px); }
.filmstrip .tile .tile-mic { display: none; }
.filmstrip .tile .tile-badges { top: auto; bottom: 26px; left: 6px; }
.filmstrip .tile-pin { display: none; }
.tile-more { position: absolute; top: 6px; right: 6px; z-index: 4; width: 22px; height: 22px; border-radius: 50%; border: 0; display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--text); background: color-mix(in srgb, var(--s1) 72%, transparent); backdrop-filter: blur(6px); opacity: .0; transition: opacity .15s; }
.tile:hover .tile-more, .tile:focus-within .tile-more, .cam-side-tile .tile-more { opacity: 1; }
@media (hover: none) { .tile-more { opacity: .9; } }
.tiles > .tile .tile-more { top: 8px; right: 44px; }
.tile.sharing .tb.sharing { background: var(--g-media, var(--accent)); color: #fff; padding: 3px 5px; border-radius: 8px; border: 0; cursor: pointer; }
.tile.on-stage { box-shadow: 0 0 0 2px var(--g-media, var(--accent)); }

/* Pinned cameras in the sidebar: responsive grid */
.cam-side { flex: 0 0 clamp(200px, 22vw, 320px); min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--s1) 85%, transparent); border: 1px solid var(--line); overflow: auto; }
.cam-side-head { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); } .cam-side-head b { font-weight: 600; color: var(--text); }
.cam-side-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.cam-side[data-n="1"] .cam-side-grid { grid-template-columns: 1fr; }
.cam-side-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--s2); }
.cam-side-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-side-tile.mirror video { transform: scaleX(-1); }
.cst-name { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 8px; background: rgba(8,12,22,.5); color: #fff; font-size: .72rem; }
@media (max-width: 820px) { .cam-side { position: absolute; right: 8px; top: 8px; width: 46vw; max-height: 50%; z-index: 8; } }

/* Scripture sidebar: one control line, roomy reader */
.scr-tool { display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.scr-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.scr-line .scr-ib { flex: 0 0 auto; }
.scr-line .scr-ib span { display: none; }
.scr-sub { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.scr-sub select.input.sm { height: 28px; width: 86px; font-size: .75rem; padding: 0 1.2rem 0 .45rem; }
.scr-line .input.sm { height: 34px; min-width: 0; font-size: .86rem; }
.scr-line select.input.sm { flex: 0 1 86px; width: 86px; padding: 0 1.2rem 0 .45rem; font-size: .78rem; }
.scr-ib { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--g-faith, var(--accent)); background: color-mix(in srgb, var(--g-faith, var(--accent)) 10%, var(--s1)); transition: background .15s; }
.scr-ib:hover { background: color-mix(in srgb, var(--g-faith, var(--accent)) 18%, var(--s1)); }
.scr-ib.pri { color: #fff; background: var(--g-faith, var(--accent)); }
.scr-ib.x { color: var(--muted); background: var(--s2); }
.scr-nav { display: flex; align-items: center; gap: 4px; }
.scr-read .verse-wrap { font-size: 1.02rem; margin-top: .3rem; }
.scr-read .scripture-ref { font-size: .95rem; font-weight: 600; }
.scr-live { display: inline-grid; place-items: center; width: 22px; height: 22px; cursor: help; }
.scr-live .rec-dot { background: var(--g-faith, #e11d48); }

/* ---------- 2026-11 typography (room) ---------- */
.pj-title { font-size: 1.35rem; font-weight: 600; }
.waiting h2 { font-size: 1.1rem; font-weight: 600; }
.room h2, .room h3, .panel h2, .panel h3 { font-size: .98rem; font-weight: 600; }
.room strong, .room b { font-weight: 600; }
.tile-name, .rh-title { font-weight: 500; }

/* screenshare indicator: icon only, beside the mute badge (top-left) */
.tile-share { position: absolute; top: 8px; left: 34px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: var(--g-media, var(--accent)); font-size: 0; }
.filmstrip .tile .tile-share { top: 6px; left: 36px; }
.tile:not(:has(.tile-mic.off)) .tile-share { left: 8px; }
.filmstrip .tile:not(:has(.tile-mic.off)) .tile-share { left: 6px; }

/* v6: scripture header controls */
.sub-head-extras { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.tool-view .scr-sub { display: none; }

/* v6: small tiles — same white name on dark bar whether cam on, off, or screen only */
.filmstrip .tile .tile-meta, .filmstrip .tile.has-video .tile-meta { left: 6px; right: auto; bottom: 6px; max-width: calc(100% - 12px); padding: .18rem .45rem; border-radius: 8px; background: rgba(8,12,22,.6); backdrop-filter: blur(6px); color: #fff; text-shadow: none; }
.filmstrip .tile .tile-name { color: #fff; }

/* Polls & Q&A status tags */
.poll-head, .qa-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.poll-title, .qa-title { min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.status-tag { font-size: 0.65rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; margin-left: auto; padding-top: 0.15rem; }
.status-tag.live { color: var(--g-engage); }

.qa-votes { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 36px; }
.vote-btn { border: 0; background: none; display: flex; flex-direction: column; align-items: center; color: var(--muted); font-size: .7rem; padding: 2px; cursor: pointer; }
.vote-btn:hover { color: var(--g-engage); }
.qa-actions { display: flex; align-items: center; gap: 4px; margin-top: .4rem; font-size: .8rem; }
.icon-sep { cursor: pointer; color: var(--muted); padding: 2px; }
.icon-sep:hover { color: var(--text); }
.sep { color: var(--line-2); }
.host-answer { background: color-mix(in srgb, var(--g-engage) 8%, transparent); padding: .5rem; border-radius: 8px; margin: .4rem 0; }

.qa-thread { margin: .5rem 0 0 1.2rem; border-left: 2px solid color-mix(in srgb, var(--g-engage) 35%, transparent); padding-left: .7rem; display: flex; flex-direction: column; gap: .45rem; }
.qa-reply { background: color-mix(in srgb, var(--s1) 70%, transparent); border-radius: 8px; padding: .45rem .6rem; }
.qa-reply p { margin: .2rem 0 0; }
.qa-reply-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.qa { padding: .7rem; border-radius: 14px; background: var(--s2); display: flex; gap: .6rem; }

.screen-switch { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: .92rem; font-weight: 650; backdrop-filter: blur(8px); }
.screen-switch-link { background: none; border: 0; color: #fff; font: inherit; font-weight: 800; cursor: pointer; padding: 0 .15rem; text-decoration: underline; text-underline-offset: 2px; }
.screen-switch-link:hover { color: #a5f3fc; }
.screen-switch-sep { opacity: .55; font-weight: 500; }

/* hover-only stage tools */
.present .hover-tools { opacity: 0; pointer-events: none; transition: opacity .18s; }
.present:hover .hover-tools { opacity: 1; pointer-events: auto; }
.screen-switch { position: absolute; left: 8px; bottom: 46px; z-index: 4; display: flex; align-items: center; gap: .35rem; padding: .25rem .55rem .25rem .35rem; border-radius: 10px; background: rgba(8,12,22,.55); color: #fff; font-size: .78rem; font-weight: 500; backdrop-filter: blur(8px); }
.screen-switch-link { background: none; border: 0; color: #fff; font: inherit; font-weight: 650; cursor: pointer; padding: 0 .15rem; text-decoration: underline; text-underline-offset: 2px; }
.screen-switch-link:hover { color: #a5f3fc; }
.screen-switch-sep { opacity: .55; font-weight: 500; }

/* soft circle share button */
.icon-btn.sm { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--s3) 70%, transparent); display: inline-grid; place-items: center; }
.icon-btn.sm:hover { background: color-mix(in srgb, var(--accent) 18%, var(--s3)); }

.tile-meta { display: flex; align-items: center; gap: .5rem; }
.screen-switch-inline { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; padding-left: .6rem; border-left: 1px solid rgba(255,255,255,.25); font-size: inherit; font-weight: 500; }
.screen-switch-inline .screen-switch-link { font-weight: 650; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0 .1rem; }
.screen-switch-inline .screen-switch-link:hover { color: #a5f3fc; }
.tile.big .hover-tools { opacity: 0; pointer-events: none; transition: opacity .18s; }
.tile.big:hover .hover-tools, .present:hover .hover-tools { opacity: 1; pointer-events: auto; }

/* hide the whole name chip on the big screen until hover */
.tile.big .tile-meta { opacity: 0; pointer-events: none; transition: opacity .18s; }
.tile.big:hover .tile-meta, .present:hover .tile.big .tile-meta { opacity: 1; pointer-events: auto; }

.seg-b { width: 42px; height: 36px; }
.rh-bell { position: relative; }
.rh-bell-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--danger, #ef4444); color: #fff; font-size: .65rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.icon-btn.sm.danger { color: var(--danger, #ef4444); }
.present .shade { margin-bottom: .6rem; }

.rh-bell-badge { display: none; }
.rh-bell-badge.on { display: grid; }

.present-tools .icon-btn.glass { width: 40px; height: 40px; }
.present-tools .slide-count { font-size: .95rem; font-weight: 650; min-width: 3.5em; text-align: center; }
.slide-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .4rem; max-height: 220px; overflow: auto; }
.slide-thumb { border: 2px solid transparent; border-radius: 8px; padding: 0; background: var(--s2); cursor: pointer; overflow: hidden; }
.slide-thumb.on { border-color: var(--accent); }
.slide-thumb img { width: 100%; height: 54px; object-fit: cover; display: block; }
.slide-thumb .tiny { display: block; text-align: center; padding: .15rem 0; }

/* Feature-specific room styles now live in src/features/<id>/client/*.css and load right after
   this file as /features/features.css (same cascade order as before). */