:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel2: #1f2430;
  --accent: #3b82f6;
  --danger: #ef4444;
  --ok: #22c55e;
  --fg: #e5e7eb;
  --muted: #9ca3af;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}
header { display: flex; align-items: center; gap: 0.75rem; }
h1 { font-size: 1.2rem; margin: 0; }
h3 { font-size: 0.85rem; margin: 0 0 0.4rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; }
.badge.idle { background: #2a2f3a; color: var(--muted); }
.badge.connecting { background: #4d3a17; color: #fbbf24; }
.badge.live { background: #12331f; color: var(--ok); }
.badge.error { background: #3a1212; color: var(--danger); }

.panel { background: var(--panel); border: 1px solid #2a2f3a; border-radius: 8px; padding: 0.85rem; }
#host-panel { border-color: #1f3a5f; }
#host-panel .host-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
#host-panel input[readonly] {
  width: 9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em; color: var(--ok);
}
button.ghost { background: var(--panel2); border: 1px solid #2a2f3a; color: var(--fg); }
button.ghost:hover { filter: brightness(1.15); }
#hostStatus { margin-top: 0.4rem; }
#connect-panel { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--muted); }
input[type=text], input:not([type]) {
  background: var(--panel2); border: 1px solid #2a2f3a; color: var(--fg);
  padding: 0.5rem 0.6rem; border-radius: 6px; width: 13rem; font-size: 0.95rem;
}
button {
  background: var(--accent); color: #fff; border: 0; padding: 0.55rem 0.9rem;
  border-radius: 6px; cursor: pointer; font-size: 0.9rem;
}
button:hover { filter: brightness(1.1); }
button.danger { background: var(--danger); }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.8rem; }

#session { display: flex; flex-direction: column; gap: 0.5rem; }
.stage {
  position: relative; background: #000; border-radius: 8px; overflow: hidden;
  display: flex; justify-content: center; align-items: center; min-height: 200px;
  border: 1px solid #2a2f3a;
}
#video {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  display: block;
  cursor: none;
  background: #000;
  object-fit: contain;
}
/* Browser cursor is always hidden over the video so only the smooth overlay
   cursor is visible. Outside the video (buttons, URL field, etc.) the normal
   cursor shows. */
#video.grabbing { cursor: none; }

/* Host advisory banner. Anchored to the top of the stage so it is legible over
   a black picture, which is exactly when it matters. */
#notice {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(46rem, calc(100% - 1.2rem));
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: #4a2b12;
  border: 1px solid #b5651d;
  color: #ffdcb0;
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 2px 10px rgb(0 0 0 / 45%);
  z-index: 3;
  /* The banner overlaps the video, whose pointer handlers drive remote input.
     Letting it swallow events would make that strip of the remote screen
     unclickable, so only the close button is interactive. */
  pointer-events: none;
}
#noticeClose {
  pointer-events: auto;
  flex: none;
  padding: 0 0.25rem;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* Live session: shrink page chrome so the stage can use almost the whole
   window. Encode/input lag paths are unchanged — this is CSS only. */
body.session-live {
  padding: 0.35rem 0.5rem;
  gap: 0.35rem;
  height: 100%;
  overflow: hidden;
}
body.session-live header { gap: 0.5rem; }
body.session-live header h1 { font-size: 1rem; }
body.session-live #connect-panel { padding: 0.45rem 0.65rem; }
body.session-live #chat-panel,
body.session-live #log-panel { display: none; }
body.session-live #session {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.35rem;
}
body.session-live .stage {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 4px;
}
body.session-live #video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* True browser fullscreen on the stage: edge-to-edge, no page padding. */
.stage:fullscreen,
.stage:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: #000;
  border-radius: 0;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stage:fullscreen #video,
.stage:-webkit-full-screen #video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#cursor {
  position: fixed; left: 0; top: 0;
  pointer-events: none; z-index: 5;
  will-change: transform; display: none;
}
#cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.toolbar { display: flex; gap: 0.5rem; align-items: center; }
/* Override the stacked label layout for the inline toolbar. */
.toolbar label { flex-direction: row; align-items: center; gap: 0.4rem; }
.toolbar select {
  background: var(--panel2); border: 1px solid #2a2f3a; color: var(--fg);
  padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer;
}
#fileName { font-size: 0.82rem; }
#sendBtn { min-width: 5rem; }
#sendBtn:disabled { opacity: 0.5; cursor: default; }
#filestatus { font-size: 0.82rem; }
#filestatus.status-busy { color: #fbbf24; }
#filestatus.status-ok { color: var(--ok); font-weight: 600; }
#filestatus.status-err { color: var(--danger); }

#chat-panel { display: flex; flex-direction: column; gap: 0.4rem; }
#chatLog {
  height: 120px; overflow: auto; background: #0b0d12; border-radius: 6px;
  padding: 0.5rem; font-size: 0.82rem; line-height: 1.4;
}
.chat-msg { padding: 2px 0; white-space: pre-wrap; word-break: break-word; }
.chat-msg.me { color: var(--accent); }
.chat-msg.them { color: var(--fg); }
.chat-row { display: flex; gap: 0.5rem; }
#chatInput { flex: 1; width: auto; }
.filebtn {
  display: inline-flex; align-items: center; background: var(--panel2);
  border: 1px solid #2a2f3a; padding: 0.45rem 0.8rem; border-radius: 6px;
  cursor: pointer; color: var(--fg); font-size: 0.85rem;
}

#log {
  height: 140px; overflow: auto; background: #0b0d12; border-radius: 6px;
  padding: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; line-height: 1.35;
}
#log div { border-bottom: 1px solid #161a22; padding: 1px 0; white-space: pre-wrap; word-break: break-all; }
#log .err { color: var(--danger); }
#log .ok { color: var(--ok); }