/* Design notes:
   - System font stack only, no external fonts/icon libraries/CDNs —
     everything here is self-hosted so it works the same from
     mainland China as anywhere else.
   - Icons are hand-drawn inline SVG.
   - Dark, minimal, "watching something together" aesthetic: the video
     is the focus, the chrome around it stays quiet.
*/

:root {
  --bg: #0A0B0D;
  --surface: #14161A;
  --surface-raised: #1B1E23;
  --surface-raised-2: #242830;
  --border: #272B32;
  --text: #ECEEF0;
  --text-muted: #8B929C;
  --text-faint: #5B6168;
  --accent: #E3A838;
  --accent-strong: #F0B84C;
  --accent-ink: #1C1402;
  --danger: #E6584C;
  --good: #4CAE78;
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The native `hidden` attribute is only reliable if nothing else sets
   `display` on the same element — several elements below do, via
   `display: flex`. Author CSS always wins over the browser's built-in
   `[hidden] { display: none }` default regardless of specificity, so
   without this !important override, hidden elements could stay
   visible — e.g. guest-only controls showing up on the host's screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}

body { min-height: 100vh; }
button { font-family: var(--sans); }
a { color: inherit; }

/* ============================================================
   Landing page
   ============================================================ */

.wrap { max-width: 680px; margin: 0 auto; padding: 48px 20px 60px; }

.masthead { text-align: center; margin-bottom: 32px; }

.masthead .dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 16px;
  box-shadow: 0 0 14px 2px rgba(227, 168, 56, 0.5);
}

.masthead h1 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.masthead .sub {
  color: var(--text-muted);
  font-size: 14.5px;
  max-width: 40ch;
  margin: 0 auto;
  line-height: 1.5;
}

.cards { display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }

.card .hint {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.field { display: block; margin-bottom: 12px; }

.field > span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  /* 16px is deliberate, not a style choice — anything smaller makes
     mobile Safari/Chrome auto-zoom the whole page on focus, which is
     the annoying jump-in effect this avoids. */
  font-size: 16px;
  font-family: var(--sans);
}

.field input::placeholder { color: var(--text-faint); }

.field input:focus,
.field select:focus,
button:focus-visible,
a:focus-visible,
.ctl-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 560;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { border-color: #3a3f48; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-strong); }
.btn.wide { width: 100%; margin-top: 4px; }
.btn.small { padding: 6px 10px; font-size: 12.5px; flex-shrink: 0; }

.result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.result-row { margin-bottom: 12px; }

.result-label {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.result code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }

#roomIdOut { font-size: 17px; letter-spacing: 0.06em; color: var(--accent); }

.link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.link-row code { flex: 1; overflow-x: auto; white-space: nowrap; }

.details-card { padding: 14px 22px; }

.details-card summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-muted);
  list-style: none;
}

.details-card summary::-webkit-details-marker { display: none; }
.details-card summary::before { content: "+ "; color: var(--accent); font-weight: 650; }
.details-card[open] summary::before { content: "− "; }
.details-card[open] summary { margin-bottom: 12px; color: var(--text); }
.details-card .hint { margin-top: 0; }

.foot { text-align: center; margin-top: 24px; min-height: 18px; }
.foot p { color: var(--text-muted); font-size: 12.5px; }

/* ============================================================
   Player page — app shell
   ============================================================ */

.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 14px 20px;
}

.browser-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #3A2E0E;
  border: 1px solid #5c4718;
  color: #F0D898;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}

.browser-banner button {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 2px;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 14.5px;
  text-decoration: none;
}

.brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(227, 168, 56, 0.5);
}

.app-bar-meta { display: flex; align-items: center; gap: 8px; }

.room-chip { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.room-chip strong { color: var(--text); letter-spacing: 0.04em; }

.role-chip {
  font-size: 11px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.role-chip.host { color: var(--accent); border-color: #5c4718; }
.role-chip.guest { color: #7FB3E8; border-color: #294158; }

/* ============================================================
   Player page — video stage
   ============================================================ */

/* Stacked by default (mobile): video, then chat below. Side-by-side
   on wider screens — see the breakpoint further down. */
.layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stage-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.stage {
  position: relative;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  aspect-ratio: 16 / 9;
}

.stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Real (native) fullscreen on the STAGE CONTAINER — not on the video
   element itself. This is safe: requesting fullscreen on a plain
   container just renders that container (our own controls included)
   at full viewport size, with the browser correctly hiding its own
   chrome too. The problem case is specifically
   video.webkitEnterFullscreen() (iOS's video-only native fullscreen,
   which hands over to Apple's own play/pause/scrub UI) — that is
   never used anywhere in this file. */
.stage:fullscreen,
.stage:-webkit-full-screen {
  aspect-ratio: unset;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border: none;
}

/* Fallback ONLY for the rare browser where container-level
   requestFullscreen() genuinely isn't available. Hoisted to a direct
   child of <body> in JS when activated, specifically to avoid any
   ancestor element accidentally becoming its containing block (which
   would make `position: fixed` resolve relative to that ancestor
   instead of the true viewport — a real, easy-to-hit CSS pitfall).
   This mode can't make the browser hide its own address bar — that's
   a genuine limitation of not using the native API — but it still
   guarantees our own controls are the only controls shown. */
.stage.pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  aspect-ratio: unset;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border: none;
}

body.has-pseudo-fullscreen {
  overflow: hidden;
}

.fs-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 40;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fs-close-btn .i { width: 18px; height: 18px; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
}

.overlay-loading { background: #000; pointer-events: auto; z-index: 50; }

.spinner {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

.spinner-sm { width: 22px; height: 22px; border-width: 2.5px; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

@keyframes spin { to { transform: rotate(360deg); } }

.center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(16, 17, 20, 0.68);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
  z-index: 25;
}

.center-btn:hover { background: rgba(26, 28, 33, 0.82); }
.center-btn:active { transform: translate(-50%, -50%) scale(0.95); }

.center-icon { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }

/* ============================================================
   Player page — control bar
   ============================================================ */

.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 65%, transparent 100%);
  z-index: 15;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.stage.controls-hidden .controls {
  opacity: 0;
  pointer-events: none;
}

.stage.controls-hidden {
  cursor: none;
}

.seek-track {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 2px;
}

.seek-bg,
.seek-buffered,
.seek-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}

.seek-bg { width: 100%; background: rgba(255, 255, 255, 0.18); }
.seek-buffered { width: 0%; background: rgba(255, 255, 255, 0.32); }
.seek-fill { width: 0%; background: var(--accent); }

.seek-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(227, 168, 56, 0.18);
  pointer-events: none;
}

.seek-input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ctl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ctl-btn:hover { background: rgba(255, 255, 255, 0.1); }
.ctl-btn .i { width: 19px; height: 19px; fill: currentColor; }

.volume-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  display: none; /* shown on wider screens, see breakpoint below */
}

.time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.spacer { flex: 1 1 auto; min-width: 2px; }

.menu-wrap { position: relative; }

.popup-menu {
  position: absolute;
  right: 0;
  background: var(--surface-raised-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 5px;
  min-width: 128px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 30;
}

.popup-up { bottom: calc(100% + 10px); }

.popup-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.popup-item:hover { background: rgba(255, 255, 255, 0.08); }
.popup-item.active { color: var(--accent); font-weight: 600; }

/* ============================================================
   Player page — status row
   ============================================================ */

.status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-left: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.status-dot.ok { background: var(--good); }
.status-dot.warn { background: var(--accent); }
.status-dot.err { background: var(--danger); }

/* ============================================================
   Chat panel
   ============================================================ */

.chat-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 260px; /* mobile: a modest fixed-height panel below the video */
}

.chat-header {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 90%;
}

.chat-msg.mine { align-self: flex-end; align-items: flex-end; }

.chat-msg-role {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chat-msg-text {
  font-size: 13.5px;
  line-height: 1.4;
  background: var(--surface-raised);
  padding: 6px 10px;
  border-radius: 12px;
  word-break: break-word;
}

.chat-msg.mine .chat-msg-text {
  background: var(--accent);
  color: var(--accent-ink);
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 16px; /* see the note on .field input above — same reason */
  font-family: var(--sans);
}

.chat-input-row input::placeholder { color: var(--text-faint); }

.chat-send-btn { color: var(--accent); }

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 640px) {
  .volume-slider { display: block; }
}

@media (min-width: 860px) {
  .layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .chat-panel {
    flex: 0 0 300px;
    height: auto;
    align-self: stretch;
  }
}

@media (max-width: 520px) {
  .wrap { padding: 32px 16px 48px; }
  .card { padding: 18px; }
  .masthead h1 { font-size: 23px; }
  .app { padding: 10px 10px 16px; }
  .time { font-size: 11px; padding: 0 2px; }
  .controls { padding: 6px 8px 8px; }
  .ctl-btn { width: 36px; height: 36px; }
  .center-btn { width: 58px; height: 58px; }
  .center-icon { width: 26px; height: 26px; }
  .popup-menu { min-width: 112px; }
}