: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; }
.float-emoji { position: absolute; bottom: 10px; font-size: 34px; animation: floatUp 2.6s ease-out forwards; will-change: transform, opacity; }
@keyframes floatUp {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-20px) scale(1.1); }
  100% { transform: translateY(-320px) scale(1); opacity: 1; }
}
/* Per-emoji animations */
.float-emoji.react-spin { animation: floatSpin 2.8s ease-out forwards; }
@keyframes floatSpin {
  0% { transform: translateY(0) rotate(0) scale(.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-330px) rotate(540deg) scale(1.1); opacity: 1; }
}
.float-emoji.react-pulse { animation: floatPulse 2.8s ease-out forwards; }
@keyframes floatPulse {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  15% { opacity: 1; transform: translateY(-24px) scale(1.5); }
  35% { transform: translateY(-90px) scale(.9); }
  50% { transform: translateY(-150px) scale(1.35); }
  70% { transform: translateY(-220px) scale(1); }
  100% { transform: translateY(-330px) scale(1.1); opacity: 1; }
}
.float-emoji.react-pop { animation: floatPop 2.6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes floatPop {
  0% { transform: scale(.2); opacity: 0; }
  18% { transform: scale(1.6); opacity: 1; }
  32% { transform: scale(1); }
  100% { transform: translateY(-310px) scale(1); opacity: 1; }
}
.float-emoji.react-yawn { animation: yawnFloat 3.2s ease-in-out forwards; transform-origin: center; }
@keyframes yawnFloat {
  0% { transform: translateY(0) scale(.5) rotate(0); opacity: 0; }
  18% { opacity: 1; transform: translateY(-26px) scale(1.6) rotate(-10deg); }
  45% { transform: translateY(-110px) scale(1.75) rotate(10deg); }
  70% { transform: translateY(-200px) scale(1.5) rotate(-6deg); }
  100% { transform: translateY(-320px) scale(.9) rotate(0); opacity: 1; }
}

.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 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 #playBtn,
.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: a small floating window showing only the call section (faces + call buttons). */
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 #leaveCallBtn { display: none !important; }
body.embed.mini, body.embed.mini .room { height: auto; min-height: 0; background: #0f1115; }
body.embed.mini .layout { overflow: visible; }
body.embed.mini .sidebar { position: static; width: 100%; flex: none; border: 0; background: #0f1115; }
body.embed.mini .call-section { border: 0; padding: 10px 8px; }
body.embed.mini .call-controls { justify-content: center; }
body.embed.mini .video-grid { max-height: none; overflow: visible; grid-template-columns: 1fr 1fr; }
body.embed.mini .video-grid .tile:only-child { grid-column: span 2; }
body.embed.mini .landing { padding: 16px 12px 12px; }
#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); }

/* Animated SVG reactions (moving eyes / hands / tears) */
.float-emoji.ae-wrap { font-size: 0; }
.ae { width: 60px; height: 66px; overflow: visible; }
.ae-shake { animation: aeShake .35s ease-in-out infinite; transform-origin: 36px 38px; }
@keyframes aeShake { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }
.ae-yawn-mouth { animation: aeYawn 1.6s ease-in-out infinite; transform-origin: 36px 50px; }
@keyframes aeYawn { 0%,100%{transform:scaleY(.35)} 45%{transform:scaleY(1.15)} }
.ae-hand { animation: aeHand 1.6s ease-in-out infinite; transform-origin: 56px 64px; }
@keyframes aeHand { 0%,100%{transform:translateY(4px) rotate(4deg)} 45%{transform:translateY(-10px) rotate(-6deg)} }
.ae-brow { animation: aeBrow 1.6s ease-in-out infinite; }
@keyframes aeBrow { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-3px)} }
.ae-tear { animation: aeTear 1.4s ease-in infinite; transform-origin: 24px 40px; }
@keyframes aeTear { 0%{transform:translateY(0);opacity:0} 20%{opacity:1} 100%{transform:translateY(26px);opacity:0} }
.ae-tear-l { animation: aeSquirtL 1s ease-out infinite; }
.ae-tear-r { animation: aeSquirtR 1s ease-out infinite; }
@keyframes aeSquirtL { 0%{opacity:0;transform:translate(4px,2px) scale(.6)} 30%{opacity:1} 100%{opacity:0;transform:translate(-6px,10px) scale(1)} }
@keyframes aeSquirtR { 0%{opacity:0;transform:translate(-4px,2px) scale(.6)} 30%{opacity:1} 100%{opacity:0;transform:translate(6px,10px) scale(1)} }
.ae-brow-raise { animation: aeBrowRaise .5s ease-in-out infinite alternate; }
@keyframes aeBrowRaise { from{transform:translateY(0)} to{transform:translateY(-4px)} }
.ae-o-mouth { animation: aeO .6s ease-in-out infinite alternate; transform-origin: 36px 52px; }
@keyframes aeO { from{transform:scale(.7)} to{transform:scale(1.15)} }
.ae-beat { animation: aeBeat .5s ease-in-out infinite; transform-origin: center; }
@keyframes aeBeat { 0%,100%{transform:scale(1)} 30%{transform:scale(1.25)} 60%{transform:scale(.95)} }
.ae-explode { animation: aeExplode .7s ease-out infinite; transform-origin: 36px 12px; }
@keyframes aeExplode { 0%{transform:translateY(6px) scale(.5);opacity:.4} 40%{opacity:1} 100%{transform:translateY(-8px) scale(1.2);opacity:.7} }
.ae-thumb { animation: aeThumb .6s ease-in-out infinite; transform-origin: 36px 60px; }
@keyframes aeThumb { 0%,100%{transform:translateY(3px) rotate(-4deg)} 50%{transform:translateY(-4px) rotate(4deg)} }
.ae-clap-l { animation: aeClapL .3s ease-in-out infinite; transform-origin: 36px 40px; }
.ae-clap-r { animation: aeClapR .3s ease-in-out infinite; transform-origin: 36px 40px; }
@keyframes aeClapL { 0%,100%{transform:translateX(-8px)} 50%{transform:translateX(2px)} }
@keyframes aeClapR { 0%,100%{transform:translateX(8px)} 50%{transform:translateX(-2px)} }
.ae-flame { animation: aeFlame .4s ease-in-out infinite alternate; transform-origin: 36px 60px; }
@keyframes aeFlame { from{transform:scaleY(.9) scaleX(1.05)} to{transform:scaleY(1.1) scaleX(.95)} }
.ae-confetti { animation: aeConfetti 1s ease-out infinite; transform-origin: 30px 40px; }
@keyframes aeConfetti { 0%{transform:scale(.2);opacity:0} 30%{opacity:1} 100%{transform:scale(1.3) translateY(-8px);opacity:0} }

/* ============ 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 {
  background: rgba(255, 255, 255, .9); border-color: rgba(0, 0, 0, .08); color: var(--text);
}
:root[data-theme="light"] .card .muted,
:root[data-theme="light"] .card label { color: #5a5867; }
: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; }
/* 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; }
.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 #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; }

/* ============ 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; }
.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 100%; justify-content: center; }
.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: stack the callers vertically, each full width */
.sidebar.chat-collapsed .video-grid { grid-template-columns: 1fr; }

/* 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); }
.float-emoji.sprite-emoji3 {
  width: 124px; height: 110px; font-size: 0;
  background-image: url('/emoji-sprite3.webp'); background-repeat: no-repeat;
  background-size: 992px 440px; /* 8*124 x 4*110 */
  animation: floatUp 1.0667s ease-out forwards, sprite3X 0.2667s steps(8) 4, sprite3Y 1.0667s steps(4) 1;
}
@keyframes sprite3X { from { background-position-x: 0; } to { background-position-x: -992px; } }
@keyframes sprite3Y { from { background-position-y: 0; } to { background-position-y: -440px; } }

/* 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; }
  /* Load bar drops to its own full-width row; input + Load + Local file stay on ONE line */
  .room .topbar .load-bar { order: 2; flex: 1 1 100%; max-width: 100%; flex-wrap: nowrap; }
  .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; }
}