:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1f232c;
  --border: #2a2f3a;
  --text: #e8eaf0;
  --muted: #8b92a3;
  --accent: #7c5cff;
  --accent-2: #9b82ff;
  --danger: #e5484d;
  --ok: #30a46c;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.2em; margin: 8px 0 0; }
.spacer { flex: 1; }

input[type="text"], input:not([type]), input[type="password"] {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  outline: none;
}
input:focus { border-color: var(--accent); }

button, .file-btn {
  font: inherit;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--text);
  background: var(--panel-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: var(--accent); color: #fff; }
.primary:hover:not(:disabled) { background: var(--accent-2); }
.ghost { background: transparent; border-color: var(--border); }
.ghost:hover { background: var(--panel-2); }
.danger { background: var(--danger); color: #fff; }
.small { padding: 3px 10px; font-size: 13px; }
.icon { background: transparent; padding: 2px 7px; font-size: 16px; }
.icon:hover:not(:disabled) { background: var(--panel-2); }

/* Landing — cozy movie-night backdrop */
.landing {
  height: 100vh; height: 100dvh; overflow: hidden; /* fill the viewport, never scroll */
  display: grid; place-items: center; padding: 16px; position: relative;
  /* cover = the image fills the whole viewport (no black letterbox bars), centered. */
  background: #0b0a0f url('/landing-bg.webp') center center / cover no-repeat;
}
.landing::before { content: ''; position: absolute; inset: 0; background: rgba(6, 5, 10, .35); }
.card {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  background: rgba(18, 20, 27, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px; padding: 22px 28px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.card h1.logo-title { margin: -4px 0 2px; text-align: center; }
.card h1.logo-title img {
  width: 100%; max-width: 224px; height: auto; display: block; margin: 0 auto; /* 30% smaller */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5));
}
.card > .muted:first-of-type { text-align: center; font-size: 12px; white-space: nowrap; }
@media (max-width: 520px) { .card > .muted:first-of-type { white-space: normal; } }
/* Disabled inputs read as clearly inactive */
.card input:disabled { opacity: .5; cursor: not-allowed; }
/* Byline (smaller, clean italic) */
.card .byline {
  margin: 3px 0 0; text-align: center; color: #c9cdd8;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-style: italic;
  font-size: 11.5px; line-height: 1.5; letter-spacing: .2px;
}
.card .byline:first-of-type { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .14); }
.card .inspired {
  margin: 8px 0 0; text-align: center; color: #ffcf8a;
  font-family: 'Caveat', cursive; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cat-emoji {
  height: 24px; width: auto; vertical-align: middle; cursor: pointer;
  transition: transform .15s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.cat-emoji:hover { transform: scale(1.25) rotate(-4deg); }

/* Enlarged cat when clicked */
.cat-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); cursor: zoom-out;
}
.cat-overlay .cat-big {
  width: min(70vw, 420px); height: auto; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .6));
  animation: catPop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes catPop {
  0% { transform: scale(.2) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.cat-overlay.bounce .cat-big { animation: catBounce .5s ease; }
@keyframes catBounce { 0%,100%{transform:scale(1)} 30%{transform:scale(1.15) rotate(-3deg)} 60%{transform:scale(.96)} }
.card label { display: block; margin: 14px 0; color: var(--muted); }
.card label input { margin-top: 6px; }
.card form button { width: 100%; justify-content: center; margin-top: 6px; }
/* Reserve the taller form's height so switching Create/Join doesn't resize the card */
.card .tab-panel { min-height: 185px; }
.tabs { display: flex; gap: 6px; background: var(--panel-2); padding: 4px; border-radius: 9px; }
.tab { flex: 1; justify-content: center; background: transparent; }
.tab.active { background: var(--panel); border-color: var(--border); }

/* Room */
.room { height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel);
  flex-wrap: wrap;
}
.brand { font-weight: 700; }
.room-code strong { letter-spacing: 2px; font-family: ui-monospace, monospace; margin: 0 6px; }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); }
.badge.host { background: rgba(124, 92, 255, .2); color: var(--accent-2); }

.layout { flex: 1; display: flex; min-height: 0; }
.stage { flex: 1; min-width: 0; padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.load-bar { display: flex; gap: 8px; }
.load-bar input { flex: 1; min-width: 0; }

.player-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--radius); overflow: hidden;
}
.player-host { position: relative; overflow: hidden; }
.player-host, .player-host > * { width: 100%; height: 100%; }
.player-host video, .player-host iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.empty-player { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); }
.empty-player div { font-size: 44px; }
.reconnect-splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #0b0a0f; }
.click-shield { position: absolute; inset: 0; cursor: not-allowed; }
/* Transparent catcher over the YouTube iframe: intercepts the mouse so YouTube's own
   title / centre play-button don't pop up during playback; a click play/pauses instead. */
.yt-shield { position: absolute; inset: 0; z-index: 3; cursor: pointer; background: transparent; }
.yt-shield.no-control { cursor: not-allowed; }
/* Our own video title, shown on hover with the control bar (hidden when it hides). */
.yt-title {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none;
  padding: 14px 16px 28px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 600;
  font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  opacity: 1; transition: opacity .3s ease;
}
.video-area.controls-hidden .yt-title { opacity: 0; }
.overlay-msg {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .8); text-align: center; padding: 16px; gap: 4px;
}
.reaction-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.controls .icon.active { color: var(--accent); }
.btn-ico { flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
.call-controls #micBtn, .call-controls #camBtn { display: inline-flex; align-items: center; justify-content: center; }

.controls {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px;
}
/* Thin line + glowing point that tracks progress (seek = accent, volume = red) */
.controls input[type="range"] {
  -webkit-appearance: none; appearance: none; outline: none;
  flex: 1; min-width: 60px; height: 3px; border-radius: 3px; cursor: pointer;
  background: rgba(255, 255, 255, .28);
}
.controls input.volume { flex: 0 0 90px; }
.controls #seekBar {
  background: linear-gradient(to right, var(--accent) var(--seek, 0%), rgba(255, 255, 255, .28) var(--seek, 0%));
}
.controls #volumeBar {
  background: linear-gradient(to right, #ff3b3b var(--vol, 80%), rgba(255, 255, 255, .28) var(--vol, 80%));
}
.controls #seekBar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border: 0;
  border-radius: 50%; background: #fff; box-shadow: 0 0 7px 2px var(--accent), 0 0 2px 1px var(--accent);
}
.controls #seekBar::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 2px var(--accent);
}
.controls #volumeBar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border: 0;
  border-radius: 50%; background: #fff; box-shadow: 0 0 7px 2px rgba(255, 59, 59, .95), 0 0 2px 1px #ff3b3b;
}
.controls #volumeBar::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 2px rgba(255, 59, 59, .95);
}
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; min-width: 38px; text-align: center; }

.call-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reactions { display: flex; gap: 2px; flex-wrap: wrap; }
.react { background: transparent; padding: 4px 6px; font-size: 18px; transition: transform .1s; }
.react:hover { background: var(--panel-2); transform: scale(1.15); }
.react:active { transform: scale(1.5) rotate(-8deg); }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tile {
  position: relative; aspect-ratio: 4 / 3; background: var(--panel-2);
  border-radius: var(--radius); overflow: hidden; border: 2px solid transparent;
}
/* Speaking = slow blue glow that swells up and down */
.tile.speaking { border-color: #4f9dff; animation: speakGlow 1.6s ease-in-out infinite; }
@keyframes speakGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(79, 157, 255, .45); border-color: #3f8ae0; }
  50% { box-shadow: 0 0 22px rgba(79, 157, 255, .95), 0 0 40px rgba(79, 157, 255, .5); border-color: #8ec2ff; }
}
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.self video { transform: scaleX(-1); }
.tile .avatar {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 700; color: var(--accent-2); background: var(--panel-2);
}
.tile .label {
  position: absolute; left: 6px; bottom: 6px; font-size: 11px; color: #111;
  background: rgba(232, 232, 236, .88); padding: 1px 7px; border-radius: 6px; text-shadow: none;
}

/* Sidebar */
.sidebar {
  width: 320px; border-left: 1px solid var(--border); background: var(--panel);
  display: flex; flex-direction: column; min-height: 0;
}
.side-tabs { display: flex; border-bottom: 1px solid var(--border); }
.side-tab { flex: 1; justify-content: center; background: transparent; border-radius: 0; padding: 11px; color: var(--muted); }
.side-tab.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.side-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg .who { font-weight: 600; font-size: 12px; color: var(--accent-2); }
.msg.mine .who { color: var(--ok); }
.msg .text { word-wrap: break-word; white-space: pre-wrap; }
.msg.system { color: var(--muted); font-size: 12px; font-style: italic; text-align: center; }
.chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }

.people { list-style: none; margin: 0; padding: 8px; }
.people li { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; }
.people li:hover { background: var(--panel-2); }
.people .name { flex: 1; }
.toggle { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); padding: 10px 16px; border-radius: 8px; z-index: 10;
}

/* Streaming-service (Netflix, Prime…) panel: the show plays in its own tab via the extension. */
.ott-panel {
  width: 100%; height: 100%; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #1b1630, #10131a);
}
.ott-panel p { margin: 0; }
.ott-service { font-size: 20px; font-weight: 700; }
.ott-status { font-size: 15px; }
.ott-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ott-steps { margin: 0; padding-left: 20px; }
.ott-steps li { margin: 3px 0; }
.ott-panel a { color: var(--accent-2); }
.ott-panel a.primary {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px;
  color: #fff; text-decoration: none; font-weight: 600;
}
.ott-panel code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.ott-note { font-size: 12px; }
.room.ott-mode .player-wrap { aspect-ratio: auto; height: auto; min-height: 150px; flex: 0 0 auto; }
.room.ott-mode .player-host { height: auto; }

.chat-toggle, .side-close { display: none; }
.unread {
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 99px; padding: 0 6px; min-width: 18px; text-align: center;
}
.video-grid:empty { display: none; }

/* Compact layout (half screen and smaller): the video gets all spare height,
   call faces become a small strip at the bottom, chat slides over from the right. */
@media (max-width: 1100px) {
  .chat-toggle, .side-close { display: inline-flex; }
  .topbar { padding: 6px 12px; gap: 8px; }
  .brand { display: none; }

  .layout { position: relative; overflow: hidden; }
  .stage { overflow: hidden; padding: 8px 10px; gap: 6px; }
  .player-wrap { flex: 1 1 auto; aspect-ratio: auto; min-height: 180px; }
  .player-host video { object-fit: contain; }
  .controls { padding: 2px 6px; gap: 4px; }
  .call-bar { gap: 6px; }
  .call-bar .small { padding: 4px 8px; font-size: 12px; }
  .react { font-size: 16px; padding: 2px 4px; }

  .video-grid {
    flex: 0 0 auto; display: flex; gap: 6px; height: 96px;
    overflow-x: auto; overflow-y: hidden;
  }
  .video-grid .tile { flex: 0 0 auto; height: 100%; aspect-ratio: 4 / 3; border-radius: 8px; }
  .video-grid .tile .avatar { font-size: 22px; }
  .video-grid .tile .label { font-size: 11px; left: 5px; bottom: 4px; padding: 1px 6px; }

  /* Streaming mode: the show is in the other window, so faces get the room here. */
  .room.ott-mode .ott-panel { padding: 12px 14px; }
  .room.ott-mode .video-grid {
    flex: 1 1 auto; height: auto; min-height: 96px; display: grid; overflow-y: auto;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-content: start;
  }
  .room.ott-mode .video-grid .tile { height: auto; width: 100%; }

  .sidebar {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 5;
    width: min(340px, 100%); box-shadow: -8px 0 24px rgba(0, 0, 0, .45);
    transform: translateX(100%); transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
}

@media (max-width: 600px) {
  .load-bar { flex-wrap: wrap; }
  .controls input.volume, .room-code button { display: none; }
  .video-grid { height: 72px; }
}

/* Inside the streaming-site sidebar (340px next to Netflix / Prime / …). The show is the page
   itself, so the player area is hidden: controls, faces and chat get all the room. */
body.embed .brand,
body.embed #roleBadge,
body.embed #chatToggle,
body.embed #chatClose,
body.embed #loadBar,
body.embed #playerWrap,
body.embed #fullBtn,
body.embed #muteBtn,
body.embed #volumeBar { display: none !important; }
body.embed .card { padding: 20px 16px; border: 0; background: transparent; }
body.embed .landing { place-items: start center; padding-top: 12px; }
body.embed .topbar { padding: 6px 10px; }
body.embed .room-code button { padding: 3px 8px; font-size: 12px; }
body.embed .layout { flex-direction: column; overflow: hidden; }
body.embed .stage { flex: 0 0 auto; overflow: visible; padding: 8px 10px 6px; gap: 6px; }
body.embed .call-bar { gap: 4px; }
body.embed .reactions { width: 100%; justify-content: space-between; }
body.embed .video-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  height: auto; max-height: 42vh; overflow-y: auto;
}
body.embed .video-grid:empty { display: none; }
body.embed .video-grid .tile { height: auto; width: 100%; aspect-ratio: 4 / 3; }
body.embed .sidebar {
  position: static; transform: none; width: 100%; flex: 1 1 auto; min-height: 0;
  box-shadow: none; border-left: 0; border-top: 1px solid var(--border);
}

/* Waiting to be let in */
.waiting { text-align: center; padding: 8px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.waiting p { margin: 0; }
.waiting button { margin-top: 8px; width: auto !important; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 8px;
  border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Join requests for the host */
.knocks { position: fixed; top: 60px; right: 16px; z-index: 20; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.knock {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.knock .who { flex: 1; min-width: 140px; }
.knock .buttons { display: flex; gap: 6px; }

/* Screen share: the shared screen takes over the player area */
.screen-stage { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; z-index: 2; }
.screen-label {
  position: absolute; left: 10px; top: 10px; z-index: 3; font-size: 12px;
  background: rgba(0, 0, 0, .65); padding: 3px 9px; border-radius: 6px;
  transition: opacity .3s ease;
}
/* Fade the title with the control bar (auto-hide after 5s, back on hover) */
body:not(.embed) .room:not(.ott-mode):not(.screen-mode) .video-area.controls-hidden .screen-label,
.video-area.controls-hidden .screen-label { opacity: 0; }
.room.screen-mode #seekBar,
.room.screen-mode .time,
.room.screen-mode #resyncBtn,
.room.screen-mode #loadBar,
.room.screen-mode #clickShield,
.room.screen-mode #emptyPlayer { display: none !important; }
.room.screen-mode .controls { justify-content: flex-end; }
.room.screen-mode .controls input.volume { flex: 0 0 140px; }
/* The shared screen fills the space left over after the controls + faces. */
.room.screen-mode .stage { overflow: hidden; }
.room.screen-mode .player-wrap,
.room.screen-mode.ott-mode .player-wrap {
  flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 55vh;
}
.room.screen-mode .video-grid { flex: 0 0 auto; }
#shareBtn.active { background: var(--accent); color: #fff; }
body.embed #shareBtn { display: none !important; }
/* A screen share beats the streaming-site card for space */
.room.screen-mode.ott-mode .player-wrap { aspect-ratio: 16 / 9; flex: 0 0 auto; }
@media (max-width: 1100px) {
  .room.screen-mode .player-wrap,
  .room.screen-mode.ott-mode .player-wrap { flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 200px; }
  .room.screen-mode.ott-mode .video-grid { flex: 0 0 auto; display: flex; height: 96px; overflow-x: auto; }
  .room.screen-mode.ott-mode .video-grid .tile { height: 100%; width: auto; }
}

/* Embedded-only / mini-only controls */
.embed-only, .mini-only { display: none !important; }
body.embed .embed-only { display: inline-flex !important; }
body.embed.mini .mini-only { display: inline-flex !important; }

/* Mini = "watch mode" over the website's video, like YouTube / our own fullscreen: the app is a
   transparent layer over the whole page; your face bottom-left, everyone else bottom-right, the
   reactions + a small control pill in the middle. Only those bits take clicks (ott.js passes
   everything else through to the website). */
body.embed.mini .topbar,
body.embed.mini .stage,
body.embed.mini .side-tabs,
body.embed.mini .side-panels,
body.embed.mini #miniBtn,
body.embed.mini #shareBtn,
body.embed.mini #leaveCallBtn { display: none !important; }
html:has(body.embed.mini), body.embed.mini, body.embed.mini .room, body.embed.mini .layout,
body.embed.mini .sidebar, body.embed.mini .call-section, body.embed.mini .video-grid {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  /* no frosted-glass blur on full-screen layers: it would blur the website's video behind */
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important;
}
body.embed.mini { overflow: hidden; }
/* The room's blurred photo backdrop must not be drawn here, or it covers the website's video. */
body.embed.mini .room::before, body.embed.mini .room::after { display: none !important; content: none !important; }
body.embed.mini .call-section { position: fixed; inset: 0; padding: 0; pointer-events: none; }
body.embed.mini .video-grid {
  position: fixed; left: 16px; right: 16px; bottom: 16px; max-height: none; overflow: visible;
  display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none;
  transition: bottom .28s ease;
}
/* The player's controls are showing: faces slide up so its progress bar / buttons have the bottom. */
body.embed.mini.mini-controls .video-grid { bottom: 96px; }
body.embed.mini .video-grid .tile {
  width: 135px; height: auto; aspect-ratio: 4 / 3; flex: 0 0 auto; pointer-events: auto; /* 25% smaller than before (180) */
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .18);
}
body.embed.mini .video-grid .tile { cursor: zoom-in; }
body.embed.mini .video-grid .tile.big { width: 270px; cursor: zoom-out; }
/* You on the far left, everyone else lined up from the right. */
body.embed.mini .video-grid .tile.self { order: 99; margin-right: auto; }
body.embed.mini .call-extra {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 14px); width: max-content; max-width: calc(100vw - 2 * 330px); /* clear of the faces on both sides */
  padding: 6px 10px; border: 0; border-radius: 999px; background: rgba(15, 17, 21, .72);
  backdrop-filter: blur(6px); pointer-events: none; box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
/* All emojis visible, no scrolling / scrollbar (a narrow window wraps them onto a second row) */
body.embed.mini .call-extra .reactions { flex-wrap: wrap; justify-content: center; overflow: visible; scrollbar-width: none; padding-bottom: 0; }
body.embed.mini .call-extra .reactions::-webkit-scrollbar { display: none; }
body.embed.mini .call-controls {
  position: fixed; left: 50%; bottom: 134px; transform: translate(-50%, 14px); width: auto;
  justify-content: center; padding: 4px 6px; border-radius: 999px; background: rgba(15, 17, 21, .72);
  backdrop-filter: blur(6px); pointer-events: none; flex-wrap: nowrap;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
/* Emoji bar + mic / camera / Exit appear (slide up + fade in) together with the player's controls */
body.embed.mini.mini-controls .call-extra,
body.embed.mini.mini-controls .call-controls { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body.embed.mini .landing { padding: 16px 12px 12px; }
/* Watch mode: the way back to the sidebar is labelled, not just an icon */
body.embed.mini #expandBtn::after { content: 'Exit'; margin-left: 2px; font-weight: 600; }
#miniUnread:empty { display: none; }
#miniUnread { background: var(--danger); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; font-weight: 700; }

/* Mic / camera pop-up menu (opens from the Mic or Camera button) */
.media-menu {
  position: fixed; z-index: 30; min-width: 200px; max-width: 300px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); padding: 5px; display: flex; flex-direction: column; gap: 2px;
}
.media-menu-item {
  text-align: left; background: transparent; border: 0; color: var(--text);
  padding: 8px 10px; border-radius: 7px; font: inherit; width: 100%; white-space: normal; cursor: pointer;
}
.media-menu-item:hover { background: var(--panel-2); }
.media-menu-item.active { color: var(--accent-2); }
.media-menu-item.toggle { border-bottom: 1px solid var(--border); border-radius: 7px 7px 0 0; }
.media-menu-head { font-size: 11px; color: var(--muted); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .04em; }
.media-menu-empty { font-size: 13px; color: var(--muted); padding: 8px 10px; }

/* Fullscreen picture-in-picture: your camera bottom-left, others bottom-right, over the video. */
.pip-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.pip {
  /* ~10% of the screen width (min 80px so a face stays visible, max 150px on big screens). */
  position: absolute; bottom: 16px; width: clamp(80px, 10vw, 150px); aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; pointer-events: auto;
  border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
  transition: width .15s ease;
}
.pip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pip.self video { transform: scaleX(-1); }
.pip.pip-left { left: 16px; }
.pip.pip-right { right: 16px; }
.pip.big { width: clamp(150px, 20vw, 300px); border-color: var(--accent); }
.pip-name {
  position: absolute; left: 6px; bottom: 5px; font-size: 11px; color: #111;
  background: rgba(232, 232, 236, .88); padding: 1px 7px; border-radius: 6px; text-shadow: none;
}
/* Fullscreen: keep the control bar visible; lift the face tiles above it while it shows. */
.video-area:fullscreen { background: #000; }
.pip-layer { transition: transform .3s ease; }
.video-area:fullscreen:not(.controls-hidden) .pip-layer { transform: translateY(-56px); }

/* Fullscreen reaction bar: a linear emoji row just above the control bar, shown on hover with it */
.fs-reacts {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%) translateY(8px);
  z-index: 5; display: none; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: rgba(16, 14, 22, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.video-area:fullscreen .fs-reacts { display: flex; }
.video-area:fullscreen:not(.controls-hidden) .fs-reacts {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.fs-react-item {
  width: 34px; height: 34px; padding: 0; font-size: 20px; line-height: 1;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .12s ease;
}
.fs-react-item:hover { background: rgba(255, 255, 255, .16); transform: scale(1.2); }

/* Chat emoji picker */
.chat-form { position: relative; }
.emoji-picker {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 200px; overflow-y: auto; padding: 8px;
  background: var(--panel-2); border-top: 1px solid var(--border);
}
.emoji-opt {
  background: transparent; border: 0; font-size: 20px; padding: 5px; border-radius: 6px; cursor: pointer;
}
.emoji-opt:hover { background: var(--panel); transform: scale(1.25); }


/* ============ Room: cozy 2AM theme (matches the landing) ============ */
.room {
  position: relative;
  background: #0b0a0f;
}
/* Soft, blurred cozy backdrop behind the whole room */
.room::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background: #0b0a0f url('/landing-bg.webp') center center / cover no-repeat;
  filter: blur(22px) brightness(.38) saturate(1.1);
  transform: scale(1.08);
}
.room > * { position: relative; z-index: 1; }

/* Glassy top bar with the logo */
.room .topbar {
  background: rgba(16, 14, 22, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.room .brand { display: flex; align-items: center; }
.room .brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.room .room-code { color: var(--muted); font-size: 14px; }
.room .room-code strong { color: #ffd27a; text-shadow: 0 0 10px rgba(255,190,90,.4); }
.room #roleBadge.badge { background: rgba(255, 210, 122, .14); color: #ffd27a; border: 1px solid rgba(255, 210, 122, .3); }
.room #roleBadge.badge.host { background: rgba(255, 210, 122, .2); color: #ffdf9e; }

/* Glassy panels for controls, chat/faces, sidebar */
.room .controls,
.room .sidebar {
  background: rgba(18, 20, 27, .68);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .08);
}
.room .sidebar { border-top: 0; border-right: 0; border-bottom: 0; border-left: 1px solid rgba(255,255,255,.1); }
.room .load-bar input,
.room .chat-form input {
  background: rgba(10, 11, 16, .6);
  border: 1px solid rgba(255, 255, 255, .12);
}
.room .side-tabs { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.room .side-tab.active { box-shadow: inset 0 -2px 0 #ffd27a; color: #fff; }
.room .msg .who { color: #ffd27a; }
.room .player-wrap { border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.room .tile { border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
/* speaking glow (blue) is defined by .tile.speaking / @keyframes speakGlow above */

/* Warm-tint the primary buttons a touch so they sit in the theme */
.room .primary { box-shadow: 0 4px 14px rgba(124, 92, 255, .35); }

/* Keep the glass look in the compact / embedded layouts too */
@media (max-width: 1100px) {
  .room .sidebar { background: rgba(16, 14, 22, .9); backdrop-filter: blur(16px); }
}

/* ============ Theme toggle button ============ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .35s ease, background .2s ease, box-shadow .2s ease;
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle:hover { transform: rotate(35deg) scale(1.08); background: rgba(255, 255, 255, .12); box-shadow: 0 0 14px rgba(255, 207, 90, .35); }
:root[data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .12); }
:root[data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, .09); box-shadow: 0 0 14px rgba(124, 140, 255, .35); }
.theme-toggle-fixed {
  position: fixed; top: 16px; right: 16px; z-index: 40; width: 42px; height: 42px;
  background: rgba(18, 20, 27, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
:root[data-theme="light"] .theme-toggle-fixed { background: rgba(255, 255, 255, .82); }

/* ============ Light theme ============ */
:root[data-theme="light"] {
  --bg: #f3efe9; --panel: #ffffff; --panel-2: #efecf5; --border: #e2ddea;
  --text: #1c1b24; --muted: #63616f;
}
:root[data-theme="light"] body { background: var(--bg); }

/* Landing (light) — brighter daytime backdrop */
:root[data-theme="light"] .landing {
  background-color: #f3efe9;
  background-image: url('/landing-bg-light.webp');
}
:root[data-theme="light"] .landing::before { background: rgba(255, 255, 255, .12); }
:root[data-theme="light"] .card {
  /* Frosted glass like the dark card: the room photo shows through, blurred, so text stays readable. */
  background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .6); color: var(--text);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 12px 40px rgba(60, 40, 20, .18);
}
:root[data-theme="light"] .card input {
  background: rgba(255, 255, 255, .55); border-color: rgba(0, 0, 0, .12); color: #1c1b24;
}
:root[data-theme="light"] .card input::placeholder { color: #6d6a78; }
:root[data-theme="light"] .card .tabs { background: rgba(255, 255, 255, .35); border-color: rgba(0, 0, 0, .08); }
:root[data-theme="light"] .card .tab:not(.active) { background: transparent; }
:root[data-theme="light"] .card .muted,
:root[data-theme="light"] .card label { color: #43414e; }
:root[data-theme="light"] .card .byline { color: #4a4856; }
:root[data-theme="light"] .card .inspired { color: #a6791b; }
:root[data-theme="light"] .theme-toggle-fixed {
  background: rgba(255, 255, 255, .85); border-color: rgba(0, 0, 0, .12);
}

/* Room (light) */
:root[data-theme="light"] .room { background: var(--bg); }
:root[data-theme="light"] .room::before { filter: blur(22px) brightness(.92) saturate(1.05); }
:root[data-theme="light"] .room .topbar,
:root[data-theme="light"] .room .controls,
:root[data-theme="light"] .room .sidebar {
  background: rgba(255, 255, 255, .82); border-color: rgba(0, 0, 0, .08);
}
:root[data-theme="light"] .room .sidebar { border-left: 1px solid rgba(0, 0, 0, .1); }
:root[data-theme="light"] .room .room-code { color: #5a5867; }
:root[data-theme="light"] .room .room-code strong { color: #a6791b; text-shadow: none; }
:root[data-theme="light"] .room #roleBadge.badge {
  background: rgba(166, 121, 27, .14); color: #8a6413; border-color: rgba(166, 121, 27, .3);
}
:root[data-theme="light"] .room .load-bar input,
:root[data-theme="light"] .room .chat-form input {
  background: #fff; border: 1px solid rgba(0, 0, 0, .15);
}
:root[data-theme="light"] .room .side-tab.active { box-shadow: inset 0 -2px 0 #a6791b; color: #1c1b24; }
:root[data-theme="light"] .room .msg .who { color: #6b4fd0; }
:root[data-theme="light"] .room .msg.system { color: #7a7887; }
:root[data-theme="light"] .room .tile,
:root[data-theme="light"] .room .tile .avatar { background: #e6e2ee; }
:root[data-theme="light"] .knock { background: #fff; border-color: var(--accent); }
:root[data-theme="light"] .media-menu { background: #fff; border-color: rgba(0,0,0,.12); }
:root[data-theme="light"] .media-menu-item { color: #1c1b24; }
:root[data-theme="light"] .media-menu-item:hover { background: #efecf5; }
:root[data-theme="light"] .emoji-picker { background: #efecf5; }
:root[data-theme="light"] .toast { background: #fff; color: #1c1b24; border-color: rgba(0,0,0,.12); }

/* Light mode: separate each room component with a thin grey line/border */
:root[data-theme="light"] .room .topbar { border-bottom: 1px solid rgba(0, 0, 0, .12); box-shadow: none; }
:root[data-theme="light"] .room .sidebar { border-left: 1px solid rgba(0, 0, 0, .12); box-shadow: none; }
:root[data-theme="light"] .room .call-section { border-bottom: 1px solid rgba(0, 0, 0, .12); box-shadow: none; }
:root[data-theme="light"] .room .side-tabs { border-bottom: 1px solid rgba(0, 0, 0, .12); }
:root[data-theme="light"] .room:not(.ott-mode):not(.screen-mode) .video-area .player-wrap {
  border: 1px solid rgba(0, 0, 0, .12); box-shadow: none;
}
:root[data-theme="light"] .room .tile { border: 1px solid rgba(0, 0, 0, .12); box-shadow: none; }
:root[data-theme="light"] .room .load-bar input,
:root[data-theme="light"] .room .chat-form input { border: 1px solid rgba(0, 0, 0, .15); box-shadow: none; }
:root[data-theme="light"] .room .controls { border: 1px solid rgba(0, 0, 0, .12); box-shadow: none; }
/* The control bar sits on a dark strip over the video, so its buttons must be light in light mode too */
:root[data-theme="light"] .room .video-area .controls .icon,
:root[data-theme="light"] .room .video-area .controls .ghost,
:root[data-theme="light"] .room .video-area .controls .time { color: #fff; }
:root[data-theme="light"] .room .video-area .controls .icon:hover:not(:disabled),
:root[data-theme="light"] .room .video-area .controls .ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
:root[data-theme="light"] .room .video-area .controls .icon.active { color: #8fb4ff; }
/* ...but when the bar is NOT over a video (website sidebar, "watch on <site>" card) it's a white
   bar: dark icons there, or they'd be white on white. */
:root[data-theme="light"] body.embed .room .video-area .controls .icon,
:root[data-theme="light"] body.embed .room .video-area .controls .ghost,
:root[data-theme="light"] body.embed .room .video-area .controls .time,
:root[data-theme="light"] .room.ott-mode .video-area .controls .icon,
:root[data-theme="light"] .room.ott-mode .video-area .controls .ghost,
:root[data-theme="light"] .room.ott-mode .video-area .controls .time { color: #1c1b24; }
:root[data-theme="light"] body.embed .room .video-area .controls .icon:hover:not(:disabled),
:root[data-theme="light"] body.embed .room .video-area .controls .ghost:hover:not(:disabled),
:root[data-theme="light"] .room.ott-mode .video-area .controls .icon:hover:not(:disabled),
:root[data-theme="light"] .room.ott-mode .video-area .controls .ghost:hover:not(:disabled) { background: rgba(0, 0, 0, .07); }
:root[data-theme="light"] body.embed .room .video-area .controls .icon.active,
:root[data-theme="light"] .room.ott-mode .video-area .controls .icon.active { color: #5b3fd6; }
/* Clean, borderless control buttons (no outline around the icons) for a professional look */
.room .video-area .controls .icon,
.room .video-area .controls .ghost { border-color: transparent; }

/* ============ Sidebar: video call on top, collapsible chat below ============ */
.call-section {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-bottom: 1px solid var(--border);
}
.call-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar .video-grid {
  grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 42vh; overflow-y: auto;
}
.sidebar .video-grid:empty { display: none; }
.side-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-collapse { margin-left: 4px; }
/* Collapsed: hide chat/people, let the video call section take the room */
.sidebar.chat-collapsed .side-panels { display: none; }
.sidebar.chat-collapsed .call-section { flex: 1 1 auto; min-height: 0; }
.sidebar.chat-collapsed .call-section .video-grid { max-height: none; flex: 1; }
:root[data-theme="light"] .call-section { border-bottom-color: rgba(0,0,0,.1); }

/* ============ Header load bar + room code (moved to top) ============ */
.room .topbar .load-bar { flex: 1 1 240px; max-width: 620px; margin: 0; }
.room .topbar .room-code { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.room .topbar #browseBtn { display: inline-flex; align-items: center; gap: 6px; }
.room .topbar #browseBtn svg { display: block; flex: none; }
.room .topbar #copyLink.icon { display: inline-flex; align-items: center; padding: 5px; color: var(--muted); }
.room .topbar #copyLink.icon:hover { color: #ffd27a; background: var(--panel-2); }

/* Share + reactions row, below the video windows in the sidebar */
.call-extra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.call-extra .reactions { flex: 1; flex-wrap: wrap; justify-content: flex-end; }
:root[data-theme="light"] .call-extra { border-top-color: rgba(0,0,0,.1); }

/* Player fills its window with the video (cover = no black bars inside) */
.room .player-host video { object-fit: cover; }

/* ============ Light room = white backdrop ============ */
:root[data-theme="light"] .room { background: #ffffff; }
:root[data-theme="light"] .room::before { background: #ffffff; filter: none; transform: none; }
/* Player area (and any letterbox around the video) is white in light mode too */
:root[data-theme="light"] .room .player-wrap,
:root[data-theme="light"] .room .player-host video,
:root[data-theme="light"] .room .player-host iframe { background: #ffffff; }
/* "Watch on <site>" / "Get the extension" card: white in light mode (it was the dark gradient). */
:root[data-theme="light"] .ott-panel { background: #ffffff; color: #1c1b24; border: 1px solid rgba(0, 0, 0, .08); }
:root[data-theme="light"] .ott-panel .muted { color: #5a5867; }
:root[data-theme="light"] .ott-panel a:not(.primary) { color: #5b3fd6; }
:root[data-theme="light"] .ott-panel code { background: #efecf5; color: #1c1b24; }

/* ============ Max-video room layout ============ */
/* The video fills the whole stage edge-to-edge: flush to header, left, sidebar and bottom. */
.room .stage { position: relative; padding: 0; gap: 0; display: flex; overflow: hidden; }
.room:not(.ott-mode):not(.screen-mode) .video-area {
  position: relative; flex: 1 1 auto; aspect-ratio: auto;
  width: auto; height: auto; max-height: none; max-width: none; margin: 0;
}
.room:not(.ott-mode):not(.screen-mode) .video-area .player-wrap {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none;
}

/* Auto-hiding control bar overlaid on the video (desktop, normal mode) */
body:not(.embed) .room:not(.ott-mode):not(.screen-mode) .video-area .controls {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  background: rgba(16, 14, 22, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .3s ease, transform .3s ease;
}
body:not(.embed) .room:not(.ott-mode):not(.screen-mode) .video-area.controls-hidden .controls {
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
/* In embed mode the wrapper collapses so the sidebar layout is unchanged. */
body.embed .video-area { display: contents; }

/* Narrower right panel so the video keeps the most room; only the emoji row ever scrolls */
.room .sidebar { width: 232px; overflow-x: hidden; }
body:not(.embed) .room .sidebar { width: 278px; } /* our website: 20% wider (the extension's sidebar keeps its own size) */
.room .call-section, .room .call-controls, .room .call-extra { min-width: 0; }

/* Join call is full-width (like Share screen); once in the call the mic/camera/leave
   buttons share the row evenly. */
.call-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.call-controls #joinCallBtn { flex: 1 1 0; min-width: 0; justify-content: center; }
.call-controls .mix-btn { flex: none; }
.call-controls #micBtn,
.call-controls #camBtn,
.call-controls #leaveCallBtn { flex: 1 1 0; justify-content: center; min-width: 0; }

/* Share = full-width button; reactions = single scrolling row (scroll stays on the row) */
.call-extra { flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.call-extra #shareBtn { width: 100%; justify-content: center; }
.call-extra .reactions {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 2px;
  justify-content: flex-start; padding-bottom: 4px; max-width: 100%;
  /* Firefox */
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.call-extra .reactions .react { flex: 0 0 auto; }
/* Cool gradient scrollbar (WebKit / Chrome / Edge) */
.call-extra .reactions::-webkit-scrollbar { height: 7px; }
.call-extra .reactions::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .06); border-radius: 99px;
}
.call-extra .reactions::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #7c5cff, #4f9dff, #ffd27a);
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, .12);
}
.call-extra .reactions::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #9b82ff, #6fb4ff, #ffe0a0);
}
/* Light mode: softer track, deeper thumb */
:root[data-theme="light"] .call-extra .reactions { scrollbar-color: #7c5cff transparent; }
:root[data-theme="light"] .call-extra .reactions::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .call-extra .reactions::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6b4fd0, #3f8ae0, #d8a63a); border: 1px solid rgba(0, 0, 0, .08);
}

/* Collapsed chat: app.js (fitCallGrid) sets the column count/width for the biggest tiles that
   fit; the block is centred, every tile keeps 4:3, no stretched rows or gaps. */
.sidebar.chat-collapsed .video-grid { grid-template-columns: 1fr; }
.sidebar.chat-collapsed .video-grid.fit {
  min-height: 0; max-height: none; overflow: hidden;
  grid-auto-rows: auto; align-content: center; justify-content: center;
}
.sidebar.chat-collapsed .video-grid.fit .tile { width: 100%; height: auto; aspect-ratio: 4 / 3; }

/* Cleaner, aligned header */
.room .topbar { gap: 10px; padding: 5px 14px; align-items: center; min-height: 50px; }
.room .topbar .brand img { height: 43px; }
.room .topbar .room-code { font-size: 13px; }
.room .topbar .room-code strong { font-size: 14px; }
.room .topbar #roleBadge.badge { font-size: 11px; }

/* Top bar layout: logo centered, search bar on the left, slim load buttons + input */
.room .topbar { position: relative; }
/* Absolute-centre the logo only on wide screens; on small screens it stays in normal flow so it
   never overlaps the wrapping top-bar items. */
@media (min-width: 760px) {
  .room .topbar .brand {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  }
}
.room .topbar .load-bar { flex: 0 1 auto; max-width: 340px; }
.room .topbar .load-bar input { flex: 1 1 auto; padding: 3px 10px; font-size: 13px; }
.room .topbar .load-bar #loadUrlBtn,
.room .topbar .load-bar .file-btn { padding: 3px 10px; font-size: 13px; line-height: 1.4; }

/* ============ Sprite-sheet reaction (6x4 frames, black bg dropped via screen blend) ============ */
.react-sprite {
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite.jpg'); background-repeat: no-repeat;
  background-size: 180px 120px; background-position: 0 0; /* first frame */
  mix-blend-mode: screen;
}
.react-sprite:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji {
  width: 120px; height: 120px; font-size: 0;
  background-image: url('/emoji-sprite.jpg'); background-repeat: no-repeat;
  background-size: 720px 480px; /* 6*120 x 4*120 */
  mix-blend-mode: screen;
  animation: floatUp 0.8s ease-out forwards, spriteX 0.2s steps(6) 4, spriteY 0.8s steps(4) 1;
}
@keyframes spriteX { from { background-position-x: 0; } to { background-position-x: -720px; } }
@keyframes spriteY { from { background-position-y: 0; } to { background-position-y: -480px; } }

/* Second sprite (9x6 = 54 frames, crying buddy) */
.react-sprite2 {
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite2.jpg'); background-repeat: no-repeat;
  background-size: 270px 180px; background-position: 0 0; /* 9*30 x 6*30, first frame */
  mix-blend-mode: screen;
}
.react-sprite2:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji2 {
  width: 120px; height: 120px; font-size: 0;
  background-image: url('/emoji-sprite2.jpg'); background-repeat: no-repeat;
  background-size: 1080px 720px; /* 9*120 x 6*120 */
  mix-blend-mode: screen;
  animation: floatUp 1.8s ease-out forwards, sprite2X 0.3s steps(9) 6, sprite2Y 1.8s steps(6) 1;
}
@keyframes sprite2X { from { background-position-x: 0; } to { background-position-x: -1080px; } }
@keyframes sprite2Y { from { background-position-y: 0; } to { background-position-y: -720px; } }

/* Third sprite (8x6 = 48 frames, flower-crown cat, transparent PNG/webp) */
.react-sprite3 {
  width: 34px; height: 30px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite3.webp'); background-repeat: no-repeat;
  background-size: 272px 120px; background-position: 0 0; /* 8*34 x 4*30, first frame */
}
.react-sprite3:hover { transform: scale(1.2); }

/* Fourth sprite (6x2 = 12 frames, laughing tears, transparent; loops ~3x while floating) */
.react-sprite4 {
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite4.webp'); background-repeat: no-repeat;
  background-size: 180px 60px; background-position: 0 0; /* 6*30 x 2*30, first frame */
}
.react-sprite4:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji4 {
  width: 120px; height: 120px; font-size: 0;
  background-image: url('/emoji-sprite4.webp'); background-repeat: no-repeat;
  background-size: 720px 240px; /* 6*120 x 2*120 */
  animation: floatUp 0.4s ease-out forwards, sprite4X 0.2s steps(6) 2, sprite4Y 0.4s steps(2) 1;
}
@keyframes sprite4X { from { background-position-x: 0; } to { background-position-x: -720px; } }
@keyframes sprite4Y { from { background-position-y: 0; } to { background-position-y: -240px; } }

/* Fifth sprite (9x6 = 54 frames, big yawn, black bg -> screen blend) */
.react-sprite5 {
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite5.jpg'); background-repeat: no-repeat;
  background-size: 270px 180px; background-position: 0 0; mix-blend-mode: screen;
}
.react-sprite5:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji5 {
  width: 120px; height: 120px; font-size: 0;
  background-image: url('/emoji-sprite5.jpg'); background-repeat: no-repeat;
  background-size: 1080px 720px; mix-blend-mode: screen;
  animation: floatUp 1.8s ease-out forwards, sprite5X 0.3s steps(9) 6, sprite5Y 1.8s steps(6) 1;
}
@keyframes sprite5X { from { background-position-x: 0; } to { background-position-x: -1080px; } }
@keyframes sprite5Y { from { background-position-y: 0; } to { background-position-y: -720px; } }

/* Sixth sprite (7x3 = 21 frames of content, sleepy yawn, black bg -> screen blend) */
.react-sprite6 {
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite6.jpg'); background-repeat: no-repeat;
  background-size: 210px 140px; background-position: 0 0; mix-blend-mode: screen;
}
.react-sprite6:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji6 {
  width: 120px; height: 120px; font-size: 0;
  background-image: url('/emoji-sprite6.jpg'); background-repeat: no-repeat;
  background-size: 840px 560px; mix-blend-mode: screen; /* only top 3 rows are animated */
  animation: floatUp 0.7s ease-out forwards, sprite6X 0.2333s steps(7) 3, sprite6Y 0.7s steps(3) 1;
}
@keyframes sprite6X { from { background-position-x: 0; } to { background-position-x: -840px; } }
@keyframes sprite6Y { from { background-position-y: 0; } to { background-position-y: -360px; } }


/* Seventh sprite (8x4 = 32 frames, happy cat, transparent) */
.react-sprite7 {
  width: 34px; height: 30px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite7.webp'); background-repeat: no-repeat;
  background-size: 272px 120px; background-position: 0 0; /* 8*34 x 4*30, first frame */
}
.react-sprite7:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji7 {
  width: 124px; height: 110px; font-size: 0;
  background-image: url('/emoji-sprite7.webp'); background-repeat: no-repeat;
  background-size: 992px 440px; /* 8*124 x 4*110 */
  animation: floatUp 1.0667s ease-out forwards, sprite7X 0.2667s steps(8) 4, sprite7Y 1.0667s steps(4) 1;
}
@keyframes sprite7X { from { background-position-x: 0; } to { background-position-x: -992px; } }
@keyframes sprite7Y { from { background-position-y: 0; } to { background-position-y: -440px; } }

/* Eighth sprite (8x4 = 32 frames, shy/bashful buddy, transparent) */
.react-sprite8 {
  width: 32px; height: 32px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite8.webp'); background-repeat: no-repeat;
  background-size: 256px 128px; background-position: 0 0; /* 8*32 x 4*32, first frame */
}
.react-sprite8:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji8 {
  width: 120px; height: 120px; font-size: 0;
  background-image: url('/emoji-sprite8.webp'); background-repeat: no-repeat;
  background-size: 960px 480px; /* 8*120 x 4*120 */
  animation: floatUp 1.0667s ease-out forwards, sprite8X 0.2667s steps(8) 4, sprite8Y 1.0667s steps(4) 1;
}
@keyframes sprite8X { from { background-position-x: 0; } to { background-position-x: -960px; } }
@keyframes sprite8Y { from { background-position-y: 0; } to { background-position-y: -480px; } }

/* Ninth sprite (8x4 = 32 frames, flower-crown kitten yawning, transparent; with yawn sound) */
.react-sprite9 {
  width: 32px; height: 32px; padding: 0; border-radius: 6px;
  background-image: url('/emoji-sprite9.webp'); background-repeat: no-repeat;
  background-size: 256px 128px; background-position: 0 0; /* 8*32 x 4*32, first frame */
}
.react-sprite9:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji9 {
  width: 120px; height: 120px; font-size: 0;
  background-image: url('/emoji-sprite9.webp'); background-repeat: no-repeat;
  background-size: 960px 480px; /* 8*120 x 4*120 */
  animation: floatUp 1.0667s ease-out forwards, sprite9X 0.2667s steps(8) 4, sprite9Y 1.0667s steps(4) 1;
}
@keyframes sprite9X { from { background-position-x: 0; } to { background-position-x: -960px; } }
@keyframes sprite9Y { from { background-position-y: 0; } to { background-position-y: -480px; } }

/* Static image reaction (single frame, not a sprite sheet): sleepy kitten, with yawn sound */
.react-sprite10 {
  width: 34px; height: 32px; padding: 0; border-radius: 6px;
  background: url('/kitten-yawn.webp') center / contain no-repeat;
}
.react-sprite10:hover { transform: scale(1.2); }
.float-emoji.sprite-emoji10 {
  width: 132px; height: 120px; font-size: 0;
  background: url('/kitten-yawn.webp') center / contain no-repeat;
  animation: floatUp 2.6s ease-out forwards;
}

/* ============ Small screens (phones): compact room top bar ============ */
@media (max-width: 700px) {
  .room .topbar {
    flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; min-height: 0;
  }
  .room .topbar .brand { position: static; transform: none; }
  .room .topbar .brand img { height: 26px; }
  /* Only the Browse button is left in the load bar: keep it on the top row next to the logo */
  .room .topbar .load-bar { flex: 0 0 auto; max-width: none; flex-wrap: nowrap; }
  .room .topbar #browseBtn { padding: 6px 9px; }
  .room .topbar #browseBtn .btn-label { display: none; } /* icon only on phones */
  .room .topbar .load-bar input { flex: 1 1 0; min-width: 0; padding: 5px 10px; font-size: 13px; }
  .room .topbar .load-bar .file-btn { white-space: nowrap; }
  .room .topbar .load-bar .primary.small,
  .room .topbar .load-bar .file-btn { padding: 4px 10px; font-size: 13px; }
  /* Just a copy icon — no "Room CODE" text */
  .room .topbar .rc-text { display: none; }
  .room .topbar .room-code { gap: 0; }
  .room .topbar #copyLink.icon { padding: 6px; }
  /* Host is shown in the People list; drop the badge here to save room */
  .room .topbar #roleBadge.badge { display: none; }
  .room .topbar .chat-toggle,
  .room .topbar .theme-toggle,
  .room .topbar #leaveBtn { padding: 5px 10px; font-size: 13px; }
}

@media (max-width: 380px) {
  .room .topbar .brand img { height: 22px; }
  .room .topbar .chat-toggle { padding: 5px 8px; }
  .room .topbar #leaveBtn { padding: 5px 8px; }
}

/* Website sidebar: show the room code itself (just the code, no "Room" label) next to the copy icon */
body.embed .room .topbar .rc-text { display: inline; font-size: 0; }
body.embed .room .topbar .rc-text strong { font-size: 13px; margin: 0 2px 0 0; letter-spacing: 1.5px; }

/* ============ Browse-for-a-video popup ============ */
.browse-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; }
.browse-modal.hidden { display: none; }
.browse-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.browse-card {
  position: relative; z-index: 1; width: 80vw; height: 80vh; max-width: 1100px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55); padding: 28px; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.browse-close {
  position: absolute; top: 12px; right: 12px; background: transparent; border: 0;
  color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px 10px; line-height: 1; border-radius: 8px;
}
.browse-close:hover { color: var(--text); background: var(--panel-2); }
.browse-title { margin: 6px 0 0; font-size: 22px; }
.browse-sub { margin: 0; color: var(--muted); text-align: center; max-width: 520px; }
.browse-sources { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 22px; }
.browse-source {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 190px; height: 170px; padding: 20px; border-radius: 16px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-size: 16px; font-weight: 600;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.browse-source:hover { transform: translateY(-3px); border-color: #ff3b3b; box-shadow: 0 10px 28px rgba(255, 0, 0, .28); }
/* YouTube search view inside the popup */
.yt-search { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; margin-top: 12px; }
.yt-search.hidden { display: none; }
.yt-search-bar { display: flex; gap: 8px; align-items: center; }
.yt-search-bar input { flex: 1; min-width: 0; }
.yt-results {
  flex: 1; overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 4px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.yt-result { cursor: pointer; border-radius: 10px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); transition: transform .12s ease, border-color .12s ease; }
.yt-result:hover { transform: translateY(-3px); border-color: var(--accent); }
.yt-result .thumb { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt-result .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-result .len { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .82); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 4px; }
.yt-result .meta { padding: 8px 10px; }
.yt-result .rtitle { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-result .rchan { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-empty { color: var(--muted); text-align: center; padding: 30px; grid-column: 1 / -1; }

@media (max-width: 600px) {
  .browse-card { width: 92vw; height: 84vh; padding: 20px 14px; }
  .browse-source { width: 150px; height: 150px; }
  .yt-results { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* In-popup web browser */
.web-view { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; margin-top: 12px; }
.web-view.hidden { display: none; }
.web-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.web-frame { flex: 1; min-height: 200px; width: 100%; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.web-play { display: flex; gap: 8px; }
.web-play input { flex: 1; min-width: 0; }
@media (max-width: 600px) { .web-play { flex-wrap: wrap; } .web-play .primary { flex: 1 1 100%; } }

/* "Video link" view in the Browse popup */
.link-view { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.link-view.hidden { display: none; }

/* Browse popup: the source tiles act as top tabs (Web is the default view) */
.browse-sources { margin-top: 10px; gap: 8px; }
.browse-source {
  flex-direction: row; width: auto; height: auto; padding: 8px 16px; gap: 8px;
  border-radius: 999px; font-size: 14px;
}
.browse-source svg { width: 22px; height: 22px; }
.browse-source.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.browse-source:hover { transform: none; }
#ytBack, #webBack, #linkBack { display: none; }

/* ============ Screen share: fill the whole player area, no info label ============ */
#screenLabel { display: none !important; }              /* no "You are sharing…" banner on top */
.screen-stage { object-fit: cover; }                    /* edge-to-edge, no black bars */
.room.screen-mode:not(.ott-mode) .video-area {
  position: relative; flex: 1 1 auto; aspect-ratio: auto;
  width: auto; height: auto; max-height: none; max-width: none; margin: 0;
}
.room.screen-mode:not(.ott-mode) .video-area .player-wrap {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
/* Same auto-hiding control bar overlay as normal playback */
body:not(.embed) .room.screen-mode:not(.ott-mode) .video-area .controls {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  background: rgba(16, 14, 22, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .3s ease, transform .3s ease;
}
body:not(.embed) .room.screen-mode:not(.ott-mode) .video-area.controls-hidden .controls {
  opacity: 0; transform: translateY(10px); pointer-events: none;
}

/* ============ Room lifetime: "Still watching?" / "This room has closed" ============ */
.expiry-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 5, 10, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: expiryIn .25s ease;
}
.expiry-modal.hidden { display: none; }
.expiry-card {
  width: 100%; max-width: 360px; text-align: center; padding: 22px 22px 18px; border-radius: 16px;
  background: rgba(23, 26, 33, .96); border: 1px solid rgba(255, 255, 255, .12); color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.expiry-icon { font-size: 34px; line-height: 1; }
.expiry-card h3 { margin: 8px 0 6px; font: 700 20px/1.3 'Poppins', system-ui, sans-serif; }
.expiry-card p { margin: 0 0 14px; line-height: 1.45; }
.expiry-card .expiry-left { color: #ffd27a; font-variant-numeric: tabular-nums; }
.expiry-card button { width: 100%; padding: 10px 14px; font-size: 15px; font-weight: 600; border-radius: 10px; }
.expiry-card .expiry-note { margin: 10px 0 0; font-size: 12.5px; }
@keyframes expiryIn { from { opacity: 0; } to { opacity: 1; } }
:root[data-theme="light"] .expiry-card { background: rgba(255, 255, 255, .97); border-color: rgba(0, 0, 0, .1); }
:root[data-theme="light"] .expiry-card .expiry-left { color: #a6791b; }

/* ============ Website sidebar, chat collapsed: narrow call-only sidebar ============ */
.compact-bar { display: none; }
body.embed.compact .compact-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
body.embed.compact .compact-bar .ghost { padding: 4px 10px; font-size: 13px; }
body.embed.compact .compact-bar .icon { font-size: 16px; padding: 4px 8px; }
body.embed.compact .topbar,
body.embed.compact .stage,
body.embed.compact .side-tabs,
body.embed.compact #shareBtn { display: none !important; }
body.embed.compact .call-section { padding: 8px 6px; gap: 6px; }
body.embed.compact .call-controls { justify-content: center; gap: 4px; flex-wrap: wrap; }
body.embed.compact .call-controls .small { padding: 4px 8px; font-size: 13px; }
body.embed.compact .call-extra { padding: 6px 0 0; }
body.embed.compact .reactions { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 2px; }

/* Website sidebar: the call's sound needs one click (Chrome blocked it) */
.call-sound-btn { width: 100%; margin: 2px 0; padding: 8px 10px; font-weight: 600; border-radius: 10px; animation: expiryIn .25s ease; }

/* Home page footer: extension · privacy · contact */
#landing { grid-template-rows: 1fr auto; overflow-y: auto; } /* card centred, footer in its own row below (scrolls only if the window is too short) */
.landing-footer {
  position: relative; z-index: 1; margin-top: 10px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px;
  padding: 0 16px; font-size: 12.5px; color: rgba(255, 255, 255, .72);
}
.landing-footer a { color: inherit; text-decoration: none; }
.landing-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="light"] .landing-footer { color: #3b3946; }
:root[data-theme="light"] .landing-footer a:hover { color: #000; }
body.embed .landing-footer { display: none; } /* not in the website sidebar */

/* Sound mix: film and call volume. Same look as the player's volume: a thin line that fills up and
   a glowing white dot (movie = red like the player, call = green). */
.call-section { position: relative; }
.mix-btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 9px; padding-right: 9px; }
.mix-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
.mix-panel {
  --mix-movie: #ff3b3b; --mix-call: #22d36b; --mix-track: rgba(255, 255, 255, .22);
  position: absolute; top: 46px; left: 8px; z-index: 30; width: min(268px, calc(100% - 16px)); /* under the button, on the left */
  padding: 12px 14px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 12px;
  background: rgba(17, 15, 24, .94); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: mixIn .14s ease-out;
}
@keyframes mixIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mix-panel.hidden { display: none; }
.mix-head { display: flex; align-items: center; justify-content: space-between; }
.mix-reset {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--muted); background: transparent; border: 1px solid rgba(255, 255, 255, .14);
}
.mix-reset:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }
:root[data-theme="light"] .mix-reset { border-color: rgba(0, 0, 0, .14); }
:root[data-theme="light"] .mix-reset:hover { border-color: rgba(0, 0, 0, .3); }
.mix-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mix-row { display: grid; grid-template-columns: 18px 46px 1fr 34px; align-items: center; gap: 8px; margin: 0; font-size: 13px; cursor: default; }
.mix-ico { display: inline-flex; color: var(--mix-color); }
.mix-movie { --mix-color: var(--mix-movie); }
.mix-call { --mix-color: var(--mix-call); }
.mix-name { color: var(--text); }
.mix-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.mix-row input[type="range"] {
  -webkit-appearance: none; appearance: none; outline: none; width: 100%; height: 3px; margin: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(to right, var(--mix-color) var(--fill, 50%), var(--mix-track) var(--fill, 50%));
}
.mix-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 7px 2px var(--mix-color), 0 0 2px 1px var(--mix-color);
}
.mix-row input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 7px 2px var(--mix-color);
}
.mix-row input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--mix-color); outline-offset: 2px; }
:root[data-theme="light"] .mix-panel {
  --mix-track: rgba(0, 0, 0, .16); --mix-call: #12a150;
  background: rgba(255, 255, 255, .97); border-color: rgba(0, 0, 0, .08); box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}
:root[data-theme="light"] .mix-row input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 6px 1px var(--mix-color), 0 0 0 1px rgba(0, 0, 0, .12); }
:root[data-theme="light"] .mix-btn[aria-expanded="true"] { border-color: rgba(0, 0, 0, .25); background: rgba(0, 0, 0, .05); }
body.mini .mix-btn, body.mini .mix-panel { display: none; } /* watch mode: just the faces */

/* "Open in another tab" page (a second tab of the same person) */
.other-tab-page { position: fixed; inset: 0; z-index: 1000; }
.other-tab-card { text-align: center; max-width: 440px; }
.other-tab-icon { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.other-tab-card h2 { margin: 4px 0 10px; font: 700 21px/1.3 'Poppins', system-ui, sans-serif; }
.card.other-tab-card > p { white-space: normal; line-height: 1.55; margin: 0 0 16px; }
.other-tab-code { letter-spacing: .06em; }
.other-tab-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.other-tab-actions .primary { width: 100%; }
.other-tab-actions [hidden] { display: none !important; }
.card.other-tab-card > p.other-tab-note { margin: 14px 0 0; font-size: 12.5px; }
body.embed .other-tab-page { place-items: start center; padding-top: 24px; }

/* "New extension version" + Update (room header, left of the Host badge) */
.ext-update {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 12px; border-radius: 999px;
  background: rgba(124, 92, 255, .16); border: 1px solid rgba(124, 92, 255, .45); font-size: 13px; white-space: nowrap;
}
.ext-update.hidden { display: none; }
.ext-update .primary.small { padding: 4px 12px; border-radius: 999px; }
:root[data-theme="light"] .ext-update { background: rgba(124, 92, 255, .1); }
@media (max-width: 720px) { .ext-update-text { display: none; } } /* small screens: just the button */

/* Sound mix: "Lower the movie while people talk" switch */
.mix-duck {
  display: flex; align-items: center; gap: 9px; margin: 2px 0 0; padding-top: 10px; cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; color: var(--text); user-select: none;
}
.mix-duck input { position: absolute; opacity: 0; pointer-events: none; }
.mix-switch {
  position: relative; flex: none; width: 28px; height: 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); transition: background .15s;
}
.mix-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.mix-duck input:checked + .mix-switch { background: var(--mix-call); box-shadow: 0 0 8px rgba(34, 211, 107, .45); }
.mix-duck input:checked + .mix-switch::after { transform: translateX(12px); }
.mix-duck input:focus-visible + .mix-switch { outline: 2px solid var(--mix-call); outline-offset: 2px; }
:root[data-theme="light"] .mix-duck { border-top-color: rgba(0, 0, 0, .08); }
:root[data-theme="light"] .mix-switch { background: rgba(0, 0, 0, .18); }