/* Deliberately plain. This is an app chrome, not a document, so it does not use
   the DocTemplate system — but it keeps that system's monochrome rule, because
   any colour here would be competing with the shared screen for attention. */

:root {
  --bg: #16150f;
  --ink: #ece8dd;
  --ink-soft: #a9a291;
  --line: #35322a;
  --raised: #211f18;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* dvh, not vh: on mobile browsers vh includes the retracting toolbar, so a
     full-height layout sits permanently a toolbar's worth off the bottom. */
  min-height: 100dvh;
}

main { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }

.view { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 0.85rem; align-items: stretch; }
.view[hidden] { display: none; }

h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.sub { margin: 0 0 0.5rem; color: var(--ink-soft); }
.label { margin: 0; color: var(--ink-soft); font-size: 0.85rem; }
.msg { margin: 0; color: var(--ink-soft); font-size: 0.85rem; min-height: 1.2em; }
.msg:empty { min-height: 0; }

button {
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  /* 44px is the usual minimum comfortable touch target; this app is used from
     a phone at least as often as a laptop (sharing your own screen from one,
     watching a friend's from the other), so every button meets it rather than
     only the ones on the "phone" side. */
  min-height: 44px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--ink-soft); }
button:disabled { opacity: 0.5; cursor: default; }

.big { padding: 1.1rem; font-size: 1.05rem; font-weight: 600; }

.opt { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); font-size: 0.9rem; cursor: pointer; }

.divider { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-soft); font-size: 0.8rem; margin: 0.15rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

#join-code { text-transform: uppercase; }

.linkrow { display: flex; gap: 0.5rem; }
.linkrow input {
  flex: 1; min-width: 0;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.row { display: flex; gap: 0.5rem; }
.row button { flex: 1; }

#preview-wrap:fullscreen, #preview-wrap:-webkit-full-screen { display: flex; align-items: center; background: #000; }
#preview { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #000; aspect-ratio: 16 / 9; object-fit: contain; }
#preview-wrap:fullscreen #preview, #preview-wrap:-webkit-full-screen #preview { border: none; border-radius: 0; height: 100%; }

/* The viewer is the only full-bleed screen: the shared image is the entire
   point, so nothing else is allowed to take space from it. */
.watch { max-width: none; height: 100dvh; position: relative; gap: 0; }
#video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.centered { position: absolute; inset: auto 0 50% 0; text-align: center; padding: 0 1.5rem; }
.unmute { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); }

/* Sits over the video, not below it — this view has no room to spare, and
   these two controls are exactly the ones a phone viewer reaches for
   (sound, and filling the screen), so they stay reachable without hunting
   for a browser chrome button. A translucent backing keeps them legible
   against whatever is actually being shared, light or dark. */
.watch-controls {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
}
.watch-controls button {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(236, 232, 221, 0.25);
  backdrop-filter: blur(4px);
}
.watch-controls[hidden] { display: none; }