:root{
  --bg:#0f1113; --panel:#16191c; --line:#2a2f34;
  --ink:#e8e6e1; --dim:#9aa0a6; --brass:#c8a24a; --rec:#e2433b; --warn:#f5c518;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;height:100dvh;overflow:hidden;background:#000;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none}

.app{position:fixed;inset:0;display:flex;flex-direction:column}

/* persistent status bar — turns yellow whenever NOT recording */
.statusbar{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;
  padding:.55rem .8rem;padding-top:calc(.55rem + env(safe-area-inset-top,0px));
  background:#16191c;color:var(--ink);border-bottom:1px solid var(--line);
  transition:background .2s ease,color .2s ease;z-index:20}
.statusbar.alert{background:var(--warn);color:#1a1500;border-bottom-color:transparent}
.recind{font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.recind .led{width:10px;height:10px;border-radius:50%;background:#777;flex:0 0 auto}
.recind .led.on{background:var(--rec);box-shadow:0 0 8px var(--rec);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}
.spacer{flex:1}
.recbtn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  padding:.5rem .9rem;border-radius:9px;font-size:.88rem;white-space:nowrap}
.recbtn:disabled{opacity:.45;cursor:not-allowed}
.recbtn.rec{background:var(--rec);border-color:var(--rec);color:#fff}
.recbtn.active{border-color:var(--brass)}
.statusbar.alert .recbtn{background:#1a1500;color:#fff;border-color:#1a150066}
.statusbar.alert .recbtn.rec{background:var(--rec);border-color:var(--rec)}

/* video stage fills the rest of the screen */
.stage{flex:1 1 auto;position:relative;background:#000;overflow:hidden}
#remoteVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}

/* self-view: portrait, draggable, tap to cycle size (max 1/3 of viewport width) */
.self{position:absolute;right:12px;bottom:12px;aspect-ratio:9/16;max-height:38vh;object-fit:cover;
  border:2px solid rgba(255,255,255,.55);border-radius:12px;background:#111;
  transform:scaleX(-1);touch-action:none;cursor:grab;z-index:10;
  box-shadow:0 6px 18px rgba(0,0,0,.55);transition:width .12s ease,height .12s ease}
.self.size-sm{width:22vw}
.self.size-md{width:28vw}
.self.size-lg{width:33vw}
.self.grab{cursor:grabbing;transition:none}

/* debug log overlay — auto-hides once connected */
#log{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:var(--dim);
  background:rgba(10,12,14,.82);border:1px solid var(--line);border-radius:8px;
  padding:.5rem .6rem;max-height:30%;overflow:auto}
#log.hidden{display:none}

/* landing */
.landing{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1.4rem;max-width:560px;margin:0 auto}
.landing p{color:var(--dim);font-size:.9rem;line-height:1.55;margin:0}
.landing .dim{font-size:.8rem}
.landing a{text-decoration:none}
.landing .recbtn{width:100%;text-align:center;padding:.85rem;font-size:.95rem;background:var(--panel)}
code{color:var(--brass);font-family:ui-monospace,Menlo,monospace}