:root {
  font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color: var(--text);
  background: var(--bg);
  --bg: #040507;
  --panel: #0c0d11;
  --panel-soft: #111318;
  --line: #ffffff17;
  --line-strong: #ffffff2b;
  --text: #f2efe8;
  --muted: #9b978c;
  --faint: #6f6c64;
  --accent: #e8c98f;
  --accent-ink: #17130a;
  --live: #7fdc9d;
  --danger: #f0a3a3;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 800px; min-height: 100vh; background: var(--bg); overflow-x: hidden; }
h1, h2, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* Background: a real Cassini photograph that drifts very slowly over two layers
   of stars. Only transform and opacity animate, so the compositor does the work.
   It stops while a room is open, where the video needs the GPU. */
.space { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.planet {
  position: absolute; top: 50%; right: -22vw; width: 92vw; min-width: 1100px;
  transform: translateY(-50%) rotate(-7deg);
  animation: planet-drift 80s ease-in-out infinite alternate;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  user-select: none;
}
.stars {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 37% 72%, #ffe9c4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 31%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 64%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 91%, #fff 50%, transparent 51%);
  background-size: 420px 380px;
  opacity: .55;
  animation: star-twinkle 7s ease-in-out infinite alternate, star-drift 240s linear infinite;
}
.stars-far { background-size: 260px 230px; opacity: .28; animation-duration: 11s, 420s; animation-direction: alternate-reverse, normal; }
@keyframes planet-drift {
  from { transform: translateY(-50%) rotate(-7deg) scale(1); }
  to { transform: translateY(-47%) rotate(-4.5deg) scale(1.06); }
}
@keyframes star-twinkle { from { opacity: .22; } to { opacity: .6; } }
@keyframes star-drift { to { transform: translate3d(-4%, 3%, 0); } }
body.in-session .planet { opacity: .16; animation-play-state: paused; }
body.in-session .stars { animation-play-state: paused; opacity: .2; }
body[data-media-fullscreen] .space { display: none; }
@media (prefers-reduced-motion: reduce) { .planet, .stars { animation: none; } }

.shell { position: relative; z-index: 1; max-width: 1480px; margin: auto; min-height: 100vh; padding: 0 44px; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; object-fit: contain; }
.brand b { font: 600 15px 'Segoe UI Variable Display', 'Segoe UI', sans-serif; letter-spacing: .2px; }
.top-status { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.top-status i, .live-label i, .preview-caption i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
.top-status.connected i, .live-label i, .preview-caption i { background: var(--live); }

/* Landing */
.landing { min-height: calc(100vh - 68px); display: flex; align-items: center; padding: 20px 0 90px; }
.join-card { width: 380px; }
.join-card h1 { font: 600 52px/1.05 'Segoe UI Variable Display', 'Segoe UI', sans-serif; letter-spacing: -1.6px; }
.lead { margin: 18px 0 30px; font-size: 16px; line-height: 1.55; color: #c9c5ba; }
.join-card > label { display: block; margin: 14px 0; font-size: 13px; font-weight: 600; color: #cfcbc0; }
.join-card input, .quality-select select, .number-field input, .chat-form input {
  width: 100%; height: 46px; margin-top: 7px; padding: 0 14px; background: #0a0b0ecc; border: 1px solid var(--line-strong);
  border-radius: 10px; outline: none; font-size: 15px; color: var(--text);
}
#room-code { font-family: 'Cascadia Mono', Consolas, monospace; letter-spacing: 3px; text-transform: uppercase; }
#room-code::placeholder { letter-spacing: 3px; }
input::placeholder { color: var(--faint); }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button-stack { display: grid; gap: 10px; margin-top: 24px; }
.button { height: 46px; padding: 0 18px; border: 0; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover:not(:disabled) { background: #f3d8a4; }
.button-quiet { background: #ffffff0a; border: 1px solid var(--line-strong); color: var(--text); }
.button-quiet:hover:not(:disabled) { background: #ffffff14; }
.button-small { height: 36px; padding: 0 14px; font-size: 13px; }
.button-stop { height: 36px; background: #3a1c1c; border: 1px solid #7a3b3b; color: #ffdada; font-size: 13px; }
.button-stop:hover { background: #4b2323; }
.fine-print { margin-top: 18px; font-size: 12px; color: var(--muted); }
.text-button { background: transparent; border: 0; padding: 0; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; }
.text-button:hover { text-decoration: underline; }

/* Room */
.session { padding: 10px 0 40px; }
.session-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.session-header h1 { font: 600 26px 'Segoe UI Variable Display', 'Segoe UI', sans-serif; letter-spacing: -.5px; }
.session-header p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.session-actions { display: flex; align-items: center; gap: 10px; }
.room-chip { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); padding: 0 12px; height: 36px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: #0a0b0e99; }
.room-chip b { font: 600 14px 'Cascadia Mono', Consolas, monospace; letter-spacing: 2px; color: var(--accent); user-select: all; }
.session-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.stage-card, .people-card { background: #0c0d11e6; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stage-top { height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.live-label { display: flex; align-items: center; gap: 9px; color: #cfcbc0; font-size: 13px; }
.stage-actions { display: flex; align-items: center; gap: 12px; }
.stage-card { --stage-h: clamp(320px, calc(100vh - 312px), 760px); }
.host-stage, .viewer-stage { min-height: var(--stage-h); background: #060709; position: relative; }
.viewer-stage { display: grid; place-items: center; }
.viewer-stage video, .local-preview-wrap video { width: 100%; height: var(--stage-h); object-fit: contain; background: #000; display: block; }
.placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: #060709; text-align: center; padding: 20px; }
.placeholder b { font: 600 18px 'Segoe UI Variable Display', 'Segoe UI', sans-serif; }
.placeholder span { font-size: 13px; color: var(--muted); max-width: 420px; }

.share-picker { padding: 22px; }
.picker-title { margin-bottom: 16px; }
.picker-title h2 { font-size: 17px; font-weight: 600; }
.picker-title p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; min-height: 130px; max-height: calc(var(--stage-h) - 250px); overflow: auto; padding: 2px; }
.source-tile { min-width: 0; text-align: left; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; }
.source-tile:hover { border-color: var(--line-strong); }
.source-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.source-thumb { height: 96px; background: #000; border-radius: 6px; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 12px; }
.source-thumb img { width: 100%; height: 100%; object-fit: cover; }
.source-tile b, .source-tile small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-tile b { font-size: 12px; font-weight: 600; margin: 7px 3px 2px; }
.source-tile small { font-size: 11px; color: var(--muted); margin: 0 3px 3px; }
.empty-sources { color: var(--muted); font-size: 13px; padding: 22px 0; }
.share-options { display: flex; align-items: flex-start; gap: 22px; margin: 18px 0; flex-wrap: wrap; }
.check-row, .toggle-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-row input, .toggle-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box { width: 18px; height: 18px; margin-top: 1px; border: 1px solid #ffffff4d; border-radius: 5px; background: #0a0b0e; flex: none; }
input:checked + .check-box { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px #0a0b0e; }
input:disabled + .check-box { opacity: .35; }
input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-row b, .check-row small { display: block; }
.check-row b { font-size: 13px; font-weight: 600; }
.check-row small { font-size: 12px; color: var(--muted); margin-top: 3px; max-width: 230px; line-height: 1.4; }
.quality-select { margin-left: auto; font-size: 12px; color: var(--muted); min-width: 230px; }
.quality-select select { height: 38px; font-size: 13px; margin-top: 5px; }
.share-picker > .button { width: 100%; }
.local-preview-wrap { position: relative; }
.preview-caption { height: 56px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; color: #cfcbc0; font-size: 13px; }
.preview-caption span { display: flex; align-items: center; gap: 8px; }

.people-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.people-heading { display: flex; align-items: baseline; justify-content: space-between; }
.people-heading h2 { font-size: 17px; font-weight: 600; }
.people-heading > span { font-size: 12px; color: var(--muted); }
.people-list { max-height: 260px; overflow: hidden auto; display: grid; gap: 4px; }
.person { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid transparent; border-radius: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #1b1d24; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #d9d5ca; flex: none; }
.person-name { flex: 1; min-width: 0; }
.person-name b, .person-name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-name b { font-size: 14px; font-weight: 600; }
.person-name small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.person.person-live { border-color: #7fdc9d55; background: #7fdc9d12; }
.person-live .avatar { border-color: var(--live); color: var(--live); }
.live-indicator { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; color: var(--live); font-weight: 700; font-size: 10px; letter-spacing: .8px; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: share-live-pulse 1.6s ease-in-out infinite; }
.live-watch-button { padding: 7px 12px; border: 1px solid #7fdc9d66; border-radius: 8px; background: transparent; color: var(--live); font-size: 12px; }
.live-watch-button:hover { background: #7fdc9d1f; text-decoration: none; }
@keyframes share-live-pulse { 50% { opacity: .4; } }

.chat-panel { border-top: 1px solid var(--line); padding-top: 12px; }
.chat-messages { height: clamp(120px, calc(100vh - 560px), 360px); overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.chat-message { overflow-wrap: anywhere; }
.chat-message-meta { font-size: 11px; color: var(--muted); }
.chat-message p { margin-top: 2px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { margin-top: 0; height: 38px; font-size: 13px; min-width: 0; flex: 1; }
.chat-form button { height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #ffffff0a; font-weight: 600; font-size: 13px; cursor: pointer; }
.chat-form button:hover { background: #ffffff14; }
.toggle-row { align-items: center; font-size: 13px; color: #cfcbc0; border-top: 1px solid var(--line); padding-top: 12px; }
.toggle-row[hidden] { display: none; }

.create-room-dialog { width: min(400px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); color: var(--text); }
.create-room-dialog::backdrop { background: #000000b3; }
.create-room-dialog form { padding: 24px; }
.create-room-dialog h2 { font-size: 20px; font-weight: 600; }
.create-room-dialog p { margin: 6px 0 18px; color: var(--muted); font-size: 14px; }
.create-room-dialog label { display: block; font-size: 13px; font-weight: 600; }
.number-field { display: flex; align-items: center; gap: 12px; }
.number-field input { width: 110px; }
.number-field span { color: var(--muted); font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: min(560px, 90vw); padding: 12px 18px; border: 1px solid var(--line-strong); background: #14161b; border-radius: 10px; font-size: 13px; z-index: 5; }

@media (max-width: 1050px) { .shell { padding: 0 24px; } .session-grid { grid-template-columns: minmax(0, 1fr) 290px; } }
@media (max-width: 850px) {
  body { min-width: 360px; }
  .shell { padding: 0 16px; }
  .join-card { width: 100%; max-width: 440px; }
  .join-card h1 { font-size: 40px; }
  .planet { opacity: .45; right: -60vw; }
  .session-header { flex-direction: column; align-items: flex-start; }
  .session-grid { grid-template-columns: 1fr; }
}

/* Only the focused stage renders a video preview. A hidden local preview remains captured and sent. */
.stage-card[data-focus="picker"] #viewer-stage, .stage-card[data-focus="local"] #viewer-stage, .stage-card[data-focus="remote"] #host-stage, .stage-card[data-focus="empty"] #host-stage, .stage-card[data-focus="empty"] #viewer-stage { display: none !important; }
.stage-card[data-focus="picker"] #host-stage, .stage-card[data-focus="local"] #host-stage, .stage-card[data-focus="remote"] #viewer-stage { display: block !important; }

/* The fullscreen button and element-fullscreen layout live in viewer-controls.css. */
.fullscreen-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.viewer-stage:fullscreen .fullscreen-toggle, .local-preview-wrap:fullscreen .fullscreen-toggle { position: fixed; }

/* Electron desktop fullscreen uses the native BrowserWindow mode and presents only the active media. */
body[data-media-fullscreen] .topbar,
body[data-media-fullscreen] .session-header,
body[data-media-fullscreen] .stage-top,
body[data-media-fullscreen] .people-card,
body[data-media-fullscreen] #viewer-controls { display: none !important; }
body[data-media-fullscreen] .shell { width: 100%; max-width: none; height: 100vh; min-height: 100vh; padding: 0; }
body[data-media-fullscreen] main,
body[data-media-fullscreen] #session,
body[data-media-fullscreen] .session-grid { width: 100%; height: 100vh; min-height: 100vh; margin: 0; padding: 0; display: block; }
body[data-media-fullscreen] .stage-card { position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100vh; min-height: 100vh; border: 0; border-radius: 0; overflow: visible; background: #000; }
body[data-media-fullscreen="remote"] #host-stage { display: none !important; }
body[data-media-fullscreen="local"] #viewer-stage { display: none !important; }
body[data-media-fullscreen="remote"] #viewer-stage,
body[data-media-fullscreen="local"] #local-preview-wrap { position: fixed; inset: 0; z-index: 10001; display: grid !important; width: 100vw; height: 100vh; min-height: 100vh; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; }
body[data-media-fullscreen="remote"] #remote-video,
body[data-media-fullscreen="local"] #local-video { width: 100vw; height: 100vh; max-height: 100vh; object-fit: contain; background: #000; }
body[data-media-fullscreen] .fullscreen-toggle { position: fixed; top: 16px; right: 16px; z-index: 10003; }
body[data-media-fullscreen="local"] .preview-caption { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10002; height: 58px; padding: 0 22px; background: linear-gradient(transparent, #000b); }
.viewer-controls{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:12px 15px;background:#0a0b0e;border-top:1px solid #ffffff17}.viewer-control{min-height:36px;padding:0 13px;border:1px solid #ffffff2b;border-radius:8px;background:#ffffff0a;color:#f2efe8;font:600 13px 'Segoe UI';cursor:pointer}.viewer-control:hover{background:#ffffff14}.viewer-control-stop{color:#ffdada;background:#3a1c1c;border-color:#7a3b3b}.viewer-control-stop:hover{background:#4b2323}.viewer-controls[hidden],.viewer-control[hidden]{display:none!important}

.fullscreen-toggle{position:absolute;z-index:3;top:12px;right:12px;display:grid;width:40px;height:40px;place-items:center;border:1px solid #ffffff30;border-radius:9px;background:#080c16b8;color:#fff;font:24px/1 'Segoe UI',sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.fullscreen-toggle:hover{background:#1b1d24;color:#e8c98f}
#viewer-stage:fullscreen{display:grid;width:100vw;height:100vh;min-height:0;place-items:center;background:#05070d}
#viewer-stage:fullscreen video{width:100vw;height:100vh;max-height:100vh;object-fit:contain}
#local-preview-wrap:fullscreen{display:flex;width:100vw;height:100vh;flex-direction:column;background:#05070d}
#local-preview-wrap:fullscreen video{width:100%;height:auto;min-height:0;flex:1;object-fit:contain}
#local-preview-wrap:fullscreen .preview-caption{flex:none}

.viewer-volume-control{display:flex;align-items:center;gap:7px;color:#9b978c;font:600 13px 'Segoe UI',sans-serif}.viewer-volume-control input{width:100px;accent-color:#e8c98f}.viewer-volume-control span{min-width:32px;color:#e1e6f5;text-align:right}.viewer-volume-control[hidden]{display:none!important}

.viewer-audio-status{margin-right:auto;color:#9b978c;font:13px 'Segoe UI',sans-serif}.viewer-audio-status[hidden]{display:none!important}