/* Social extras: watch rooms, audio presence, and the seasonal Halloween skin. */
.sync-watch-backdrop { z-index: 80; }
.sync-watch-modal { width: min(94vw, 720px); max-height: min(88svh, 820px); overflow: auto; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.sync-watch-modal h2 { margin: 0; }
.sync-watch-setup { display: grid; gap: 12px; margin: 18px 0; }
.sync-watch-stage { min-height: 180px; overflow: hidden; border-radius: 18px; background: #09090d; aspect-ratio: 16 / 9; }
.sync-watch-stage iframe, .sync-watch-stage video { display: block; width: 100%; height: 100%; min-height: 180px; border: 0; object-fit: contain; background: #09090d; }
.sync-watch-invalid { display: grid; height: 100%; min-height: 180px; place-items: center; padding: 24px; color: #fff; text-align: center; }
.sync-watch-status { margin: 12px 0 4px; font-weight: 700; }
.sync-watch-chat { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%); }
.sync-watch-chat > strong { font-size: .92rem; }
.sync-watch-chat-list { display: grid; gap: 7px; max-height: 170px; min-height: 44px; overflow: auto; padding: 2px; color: var(--muted); font-size: .82rem; }
.sync-watch-message { display: grid; gap: 2px; max-width: 86%; padding: 8px 10px; border-radius: 12px 12px 12px 4px; color: var(--text); background: color-mix(in srgb, var(--surface-strong) 78%, #fff 22%); }
.sync-watch-message.mine { justify-self: end; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--accent) 28%, var(--surface-strong) 72%); }
.sync-watch-message strong { color: var(--muted); font-size: .68rem; }
.sync-watch-message span { overflow-wrap: anywhere; }
.sync-watch-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sync-watch-chat-form input { min-width: 0; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-strong); }
.sync-watch-chat-form button { min-height: 42px; }
.sync-watch-note { margin: 0; color: var(--muted); font-size: .86rem; }
.chat-watch-btn { flex: 0 0 auto; }
.sync-watch-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.sync-watch-head-actions [data-sync-watch-fullscreen]::before { content: '⛶'; font-size: 18px; line-height: 1; }
.sync-watch-layout { display: grid; gap: 16px; }
.sync-watch-main, .sync-watch-side { min-width: 0; }
.sync-watch-modal:fullscreen { width: 100vw; height: 100vh; max-height: none; max-width: none; padding: 24px; border-radius: 0; overflow: auto; }
.sync-watch-modal:fullscreen .sync-watch-layout,
.sync-watch-modal.is-fullscreen .sync-watch-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; }
.sync-watch-modal:fullscreen .sync-watch-side,
.sync-watch-modal.is-fullscreen .sync-watch-side { position: sticky; top: 0; }
.audio-status-card { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); }
.audio-status-copy { display: grid; gap: 3px; }
.audio-status-copy strong { font-size: .92rem; }
.audio-status-copy span { color: var(--muted); font-size: .8rem; }
.audio-status-player { grid-column: 1 / -1; width: 100%; height: 36px; }
.audio-status-record { min-height: 42px; }
.audio-status-record.is-recording { color: #fff; background: #b8334e; }
body.skin-halloween { --bg: #100b1c; --surface: #1d132b; --surface-strong: #28193a; --text: #fff6eb; --muted: #b9a7c8; --line: rgba(255,145,46,.22); --accent: #ff8a2a; --accent-strong: #ffb347; color-scheme: dark; }
body.skin-halloween .app-shell, body.skin-halloween .content { background: radial-gradient(circle at 70% -10%, rgba(255,112,32,.18), transparent 30%), var(--bg); }
body.skin-halloween .primary-btn { color: #1b0e05; background: linear-gradient(135deg, #ffb347, #f36d21); }
body.skin-halloween .brand-mark { color: #210d04; background: linear-gradient(135deg, #ffb347, #f36d21); }
body.skin-halloween .nav-btn.active, body.skin-halloween .nav-btn:hover { color: #fff; background: rgba(255,138,42,.14); }
body.skin-halloween .bubble { background: #2b1b3b; }
body.skin-halloween .skin-preview.halloween { box-shadow: inset 0 0 0 2px #ff8a2a, 0 0 20px rgba(255,138,42,.3); }
body.skin-halloween .short-video-tools .short-video-duel { color: #ffb347; }
@media (max-width: 600px) { .sync-watch-modal { padding: 16px; border-radius: 20px; } .audio-status-card { grid-template-columns: 1fr; } .audio-status-record { width: 100%; } }