:root {
  --bg: #12101a;
  --panel: #1c1928;
  --panel-2: #26223a;
  --text: #f1eefa;
  --muted: #9a94b3;
  --accent: #ff6b9d;
  --ok: #4ade80;
  --bad: #f87171;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.card {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

h1 { margin: 0 0 4px; font-size: 1.5rem; }
p.sub { margin: 0 0 20px; color: var(--muted); }

label { display: block; margin: 14px 0 6px; font-size: 0.85rem; color: var(--muted); }

input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--panel-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 0; }

button {
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #1a0b12;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button.secondary { background: var(--panel-2); color: var(--text); }
button.danger { background: var(--bad); color: #2a0a0a; }
button:disabled { opacity: 0.5; cursor: default; }

.error { margin-top: 12px; color: var(--bad); min-height: 1.5em; }
.hidden { display: none !important; }

.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1; font-family: ui-monospace, Consolas, monospace; }
.field-row button { width: auto; margin: 0; padding: 0 16px; }

.pw { font: 700 1.6rem ui-monospace, Consolas, monospace; letter-spacing: 0.1em; text-align: center; }

.status { display: flex; gap: 16px; margin: 16px 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); margin-right: 6px; }
.dot.on { background: var(--ok); }

.note { color: var(--muted); font-size: 0.85rem; margin-top: 16px; }
.note.warn { color: var(--bad); margin-top: 6px; }
.one-tap { margin: 10px 0 0; white-space: normal; }
.pw.muted { opacity: 0.45; }

/* ---------- Admin page: running rooms ---------- */
.rooms-head { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.rooms-head h2 { margin: 0; font-size: 1.1rem; }
.rooms { list-style: none; margin: 12px 0 0; padding: 0; }
.rooms li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  background: var(--panel-2);
  border-radius: 10px;
}
.rooms .info { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--muted); }
.rooms .info b { color: var(--text); font-family: ui-monospace, Consolas, monospace; font-size: 0.95rem; }
.rooms .people { display: flex; gap: 12px; }
.rooms .people .dot { width: 8px; height: 8px; margin-right: 4px; }
.rooms li button.small { flex: none; }

/* ---------- Room layout ---------- */
/* The room fills exactly the visible area (--vvh, kept up to date by viewport.js) and the page itself never
   scrolls, so opening the phone keyboard shrinks the chat instead of sliding the video away. */
html { height: 100%; }
body.in-room { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; padding: 0; display: block; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: var(--vvh, 100dvh);
  max-width: 1400px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--panel-2);
}
.topbar .status { margin: 0; }
.actions { display: flex; gap: 8px; }

button.small { width: auto; margin: 0; padding: 7px 12px; font-size: 0.85rem; border-radius: 8px; }

.layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.actions { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.actions button.small { height: 32px; padding-top: 0; padding-bottom: 0; }
/* On a big screen the menu is just the buttons laid out inline, and the ⋯ button is not needed. */
.menu { display: contents; }
#menu-btn { display: none; }

/* ---------- Video stage ---------- */
.stage { flex: none; min-width: 0; display: flex; flex-direction: column; background: #000; }

.stage-bar { display: flex; gap: 8px; padding: 8px 10px; background: var(--panel); }
.stage-bar input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; }

.share-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--panel-2);
  font-size: 0.85rem;
}
.share-status #share-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.share-status progress { flex: 1; min-width: 60px; height: 8px; accent-color: var(--accent); }

.quality-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--panel);
  font-size: 0.85rem;
  color: var(--muted);
}
.quality-row select {
  padding: 4px 8px;
  border: 1px solid var(--panel-2);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  max-width: 55%;
}
#quality-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.hold-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: #000;
  color: #fff;
  text-align: center;
}
.hold-overlay progress { width: min(70%, 320px); accent-color: var(--accent); }

.lock { color: var(--muted); font-size: 0.8rem; white-space: nowrap; cursor: default; }
.menu-note { display: none; padding: 2px 4px 6px; color: var(--muted); font-size: 0.8rem; }
.priv { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
.priv input { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--accent); }
.bubble .text.failed { font-style: italic; opacity: 0.75; }

.video-msg a { color: var(--accent); white-space: nowrap; }
.video-msg { padding: 0 12px; min-height: 0; color: var(--bad); font-size: 0.85rem; }
.video-msg:not(:empty) { padding: 6px 12px; background: var(--panel); }

.player-box {
  position: relative;
  width: min(100%, calc(var(--base-h, 100dvh) * 0.4 * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #000;
}
.player-box iframe, .player-box video, #yt-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The empty #yt-player placeholder is absolutely positioned over the whole box and comes later in the
   DOM, so without this it sits on top of a file <video> and swallows every click on its controls. */
.player-box video { background: #000; z-index: 1; }

.tap-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.1rem;
}

.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .layout { flex-direction: row; }
  .stage:not(.hidden) { flex: 1; }
  .player-box { width: min(100%, calc((var(--base-h, 100dvh) - 130px) * 16 / 9)); margin: auto; }
  .stage:not(.hidden) + .chat { flex: none; width: 380px; max-width: none; border-left: 1px solid var(--panel-2); }
}

/* ---------- Chat ---------- */
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg { position: relative; display: flex; flex-direction: column; max-width: 82%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }

.bubble {
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--panel-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.mine .bubble { background: var(--accent); color: #1a0b12; border-bottom-right-radius: 4px; }
.msg.theirs .bubble { border-bottom-left-radius: 4px; }
.time { margin-left: 10px; font-size: 0.7rem; opacity: 0.6; white-space: nowrap; }

.react-btn {
  position: absolute;
  top: 2px;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.react-icon { display: block; width: 16px; height: 16px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.msg.mine .react-btn { right: 100%; margin-right: 4px; }
.msg.theirs .react-btn { left: 100%; margin-left: 4px; }
.msg:hover .react-btn, .react-btn:focus-visible { opacity: 1; }
@media (hover: none) { .react-btn { opacity: 0.55; } }

/* Reply: a second button beside the smiley on a laptop (shown on hover); touch screens swipe right or use the bar. */
.reply-btn {
  position: absolute;
  top: 2px;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
}
.msg.mine .reply-btn { right: 100%; margin-right: 34px; }
.msg.theirs .reply-btn { left: 100%; margin-left: 34px; }
.msg:hover .reply-btn, .reply-btn:focus-visible { opacity: 1; }
@media (hover: none) { .reply-btn { display: none; } }
.react-bar .bar-reply { display: flex; align-items: center; margin-left: 2px; padding: 4px 8px; border-left: 1px solid var(--panel-2); border-radius: 0; color: var(--muted); }
.react-bar .bar-reply .react-icon { width: 20px; height: 20px; }

.msg { transition: transform 0.15s; }
.msg.flash .bubble { animation: msg-flash 1.2s ease-out; }
@keyframes msg-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--text); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* The quoted message at the top of a reply */
.quote {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 4px 8px;
  border-left: 3px solid currentColor;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: left;
}
.quote-who { font-weight: 700; opacity: 0.85; }
.quote-text { font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.quote.gone, .quote:disabled { opacity: 1; cursor: default; }
.quote.gone .quote-text { font-style: italic; opacity: 0.65; }
.bubble.has-photo .quote { align-self: stretch; margin: 2px 2px 4px; }

/* Seen: ✓ sent, ✓✓ seen by your partner */
.ticks { margin-left: 4px; letter-spacing: -0.3em; padding-right: 0.3em; font-weight: 700; }
.ticks.seen { color: #0b3a8f; }

/* "Replying to…" above the message box */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 6px;
  padding: 6px 6px 6px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.85rem;
}
.reply-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.reply-info .quote-who { color: var(--accent); }
.reply-info .quote-text { -webkit-line-clamp: 1; color: var(--muted); }
.reply-bar button { width: 32px; height: 32px; margin: 0; padding: 0; flex: none; border-radius: 50%; background: none; color: var(--muted); font-size: 1rem; }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.reactions:empty { display: none; }
.chip {
  width: auto;
  margin: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 400;
}
.chip.mine { outline: 1px solid var(--accent); }

.react-bar {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.react-bar button, .emoji-panel button {
  width: auto;
  margin: 0;
  padding: 4px 6px;
  background: none;
  font-size: 1.25rem;
  line-height: 1.2;
}

.typing { min-height: 1.4em; padding: 0 16px; font-size: 0.8rem; color: var(--muted); }
.autoclear { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 2px; color: var(--muted); font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
.autoclear select { height: 32px; padding: 0 8px; border: 1px solid var(--panel-2); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 0.85rem; }
.autoclear-badge { flex: none; padding: 4px 12px; text-align: center; font-size: 0.78rem; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--panel-2); }
.chat-note { align-self: center; padding: 3px 12px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 0.8rem; }
.photo-status { padding: 0 16px 4px; font-size: 0.8rem; color: var(--accent); }
.photo-status:empty { display: none; }

/* ---------- Chat photos ---------- */
.bubble.has-photo { padding: 4px; display: flex; flex-direction: column; align-items: flex-end; }
.bubble.has-photo .time { margin: 2px 6px 0; }
.photo {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  cursor: zoom-in;
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo.loading { animation: photo-wait 1.2s ease-in-out infinite alternate; }
.photo.loading img { visibility: hidden; }
.photo.failed { cursor: default; padding: 8px; color: inherit; font-size: 0.8rem; font-weight: 400; font-style: italic; opacity: 0.75; }
@keyframes photo-wait { from { opacity: 0.45; } to { opacity: 0.9; } }
.chat.drop .messages { outline: 2px dashed var(--accent); outline-offset: -6px; }

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.92);
}
.photo-viewer img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; border-radius: 6px; }
.viewer-bar { display: flex; gap: 10px; }
.viewer-save {
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #1a0b12;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.emoji-panel {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  margin: 0 10px 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel);
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--panel);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  padding: 10px 14px;
  border: 1px solid var(--panel-2);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.35;
  max-height: 140px;
}
.composer textarea:focus { outline: 2px solid var(--accent); }
.composer button {
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  flex: none;
  border-radius: 50%;
  font-size: 1.15rem;
}
.composer button.icon { background: none; }
body.keyboard .composer { padding-bottom: 8px; }

/* iOS zooms the page when a field with text smaller than 16px gets focus, which also moves everything. */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}

/* ---------- Compact layout (phones, and landscape phones) ----------
   One slim header row; the video controls only show while the 🎬 button has them open. */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .topbar { position: relative; flex-wrap: nowrap; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
  .topbar .status { gap: 12px; font-size: 0.85rem; white-space: nowrap; }
  .actions { flex-wrap: nowrap; gap: 6px; }
  #watch-btn .label { display: none; }
  button.small { padding: 6px 12px; }
  #menu-btn { display: inline-block; font-weight: 700; letter-spacing: 0.05em; }

  .menu {
    display: none;
    position: absolute;
    right: 8px;
    top: calc(100% + 4px);
    z-index: 60;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
    padding: 10px;
    background: var(--panel);
    border: 1px solid var(--panel-2);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
  .menu.open { display: flex; }
  .actions .menu button { width: 100%; height: auto; padding: 10px 12px; font-size: 0.95rem; }
  .menu .autoclear { justify-content: space-between; padding: 2px 4px; font-size: 0.95rem; }
  .menu .autoclear select { height: 38px; }

  .stage-bar { flex-wrap: wrap; }
  .stage-bar input { flex: 1 1 100%; }
  .stage-bar button { flex: 1; }
}

/* Phones and tablets (layout.js sets fold-tools): link box, Load/File/Close and Quality only while opened with 🎬 */
.fold-tools .stage:not(.tools-open) .stage-bar,
.fold-tools .stage:not(.tools-open) .quality-row { display: none; }

/* Video above the chat and the keyboard up for a chat message: the header, video controls and video can fill
   the whole visible area and squeeze the chat to nothing. Hide the controls until the keyboard closes and, if
   the screen is still too short, shrink the video so about 190px stays for the message box and latest messages. */
@media (max-width: 899px) {
  body.chat-typing .stage-bar, body.chat-typing .quality-row { display: none; }
  body.chat-typing .player-box {
    width: min(100%, calc(var(--base-h, 100dvh) * 0.4 * 16 / 9), max(200px, calc((var(--vvh, 100dvh) - 240px) * 16 / 9)));
  }
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .lock #fp { display: none; } /* the fingerprint is in the ⋯ menu on a phone */
  .menu-note { display: block; }
}