:root {
  color-scheme: dark;
  --bg: #07100e;
  --panel: #101b18;
  --panel-2: #15231f;
  --line: rgba(215, 242, 230, .13);
  --text: #edf8f3;
  --muted: #91a79e;
  --mint: #62e5b6;
  --red: #ff4d3d;
  --amber: #ffd166;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% -10%, rgba(59, 161, 126, .18), transparent 34rem),
    radial-gradient(circle at 100% 25%, rgba(45, 92, 77, .14), transparent 35rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
select { font: inherit; }
.connection-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; margin-bottom: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.connection-panel label { font-weight: 600; }
.connection-panel select { max-width: 100%; min-width: 180px; padding: 10px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
#deviceStatus { color: var(--muted); font-size: 12px; }
.no-recipient #visitorCanvas { pointer-events: none; }
button { cursor: pointer; }

.topbar {
  height: 74px;
  padding: 0 clamp(18px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 14, .78);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-weight: 900;
  color: #07100e; background: var(--mint);
  box-shadow: 0 0 32px rgba(98, 229, 182, .22);
}
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); margin-top: 1px; }
.status { color: var(--muted); font-size: 13px; }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(98, 229, 182, .09); margin-right: 8px; }

main { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 54px 0 70px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.eyebrow { color: var(--mint) !important; text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 800; }
.intro h1 { font-size: clamp(30px, 4vw, 58px); line-height: 1.02; letter-spacing: -.04em; margin: 7px 0 14px; max-width: 850px; }
.intro p { color: var(--muted); max-width: 750px; line-height: 1.6; margin: 0; }
.ghost { color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; white-space: nowrap; }
.ghost:hover { border-color: var(--mint); color: var(--mint); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
.connection-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.device { border: 1px solid var(--line); background: linear-gradient(155deg, rgba(22, 37, 32, .92), rgba(11, 20, 17, .96)); border-radius: 22px; overflow: hidden; box-shadow: 0 28px 80px rgba(0, 0, 0, .25); }
.visitor-device { box-shadow: 0 28px 90px rgba(55, 178, 135, .07); }
.device-head { display: flex; justify-content: space-between; align-items: center; padding: 17px 19px; }
.device-head .role { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 4px; }
.device-head strong { font-size: 14px; }
.online, .latency { font-size: 11px; color: var(--mint); background: rgba(98, 229, 182, .08); border: 1px solid rgba(98, 229, 182, .14); padding: 6px 9px; border-radius: 999px; }

.source-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 13px;
  flex-wrap: wrap;
}
.source-button,
.source-window {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 11px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: 11px;
}
.source-button { display: inline-flex; align-items: center; gap: 7px; }
.source-button:hover,
.source-button.active { color: var(--mint); border-color: rgba(98,229,182,.45); background: rgba(98,229,182,.08); }
.source-dot { width: 7px; height: 7px; border-radius: 50%; background: #52615b; }
.source-button.active .source-dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(98,229,182,.1); }
.source-window { margin-left: auto; color: var(--text); }
.source-window:hover { border-color: var(--mint); color: var(--mint); }

#drawingWorkspace:fullscreen {
  width: 100%; height: 100%; border: 0; border-radius: 0;
  display: flex; flex-direction: column; background: #050807;
}
#drawingWorkspace:fullscreen .device-head { padding: 8px 14px; flex-shrink: 0; }
#drawingWorkspace:fullscreen .source-switcher { padding: 0 14px 8px; flex-shrink: 0; }
#drawingWorkspace:fullscreen .toolbar { flex-shrink: 0; }
#drawingWorkspace:fullscreen .video-stage {
  flex: none; min-height: 0; aspect-ratio: 16 / 9;
  width: var(--fullscreen-width, 100%); height: var(--fullscreen-height, auto);
  align-self: center; margin-block: auto; background: #050807;
}

.video-stage { position: relative; aspect-ratio: 16 / 9; background: #14221c; overflow: hidden; touch-action: none; cursor: crosshair; }
.webrtc-feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050807; opacity: 0; z-index: 2; }
.video-stage.has-webrtc .webrtc-feed { opacity: 1; }
.video-stage.has-webrtc .live-feed,
.video-stage.has-webrtc .sim-feed { opacity: 0; }
.live-feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050807; opacity: 0; transition: opacity .2s; z-index: 1; }
.video-stage.has-live .live-feed { opacity: 1; }
.video-stage.has-live .sim-feed { opacity: 0; }
.sim-feed { position: absolute; inset: 0; overflow: hidden; background: #3f5446; }
.terrain { position: absolute; inset: -35%; background:
  radial-gradient(ellipse at 10% 30%, #4b654f 0 8%, transparent 8.5%),
  radial-gradient(ellipse at 78% 72%, #263b31 0 9%, transparent 9.5%),
  radial-gradient(ellipse at 65% 10%, #71806a 0 7%, transparent 7.5%),
  repeating-linear-gradient(80deg, rgba(192, 206, 172, .10) 0 2px, transparent 2px 34px),
  repeating-linear-gradient(8deg, rgba(22, 37, 29, .13) 0 2px, transparent 2px 45px),
  linear-gradient(120deg, #65735d, #2d4838 55%, #4f6451);
  animation: drift 18s linear infinite alternate;
  filter: saturate(.72) contrast(1.05);
}
@keyframes drift { to { transform: translate3d(6%, 3%, 0) scale(1.04); } }
.road { position: absolute; background: rgba(216, 202, 172, .58); box-shadow: 0 0 0 2px rgba(69, 67, 57, .24); }
.road-one { width: 120%; height: 18px; left: -10%; top: 57%; transform: rotate(-7deg); }
.road-two { width: 15px; height: 110%; left: 61%; top: -5%; transform: rotate(8deg); }
.target-building { position: absolute; width: 11%; aspect-ratio: 1.5; left: 53%; top: 36%; background: #a99c7e; border: 4px solid #756c59; transform: rotate(7deg); box-shadow: 8px 10px 0 rgba(19, 29, 23, .38); }
.sim-feed::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 42%, rgba(3, 10, 7, .25)); pointer-events: none; }
.telemetry { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; color: rgba(255,255,255,.85); font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 1px 4px #000; pointer-events: none; }
.video-stage.has-webrtc .telemetry,
.video-stage.has-live .telemetry { display: none; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; }
.hint { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); background: rgba(7, 16, 14, .78); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(10px); border-radius: 999px; padding: 9px 13px; font-size: 11px; pointer-events: none; transition: opacity .25s; }
.stream-state { position: absolute; z-index: 7; left: 12px; bottom: 12px; border-radius: 999px; padding: 7px 10px; font-size: 10px; background: rgba(7,16,14,.8); border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.stream-state.live { color: var(--mint); border-color: rgba(98,229,182,.35); }
.stream-state.fallback { color: var(--amber); }
.receiver-badge { position: absolute; z-index: 6; right: 12px; bottom: 12px; font-size: 10px; padding: 7px 10px; background: rgba(7,16,14,.75); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; backdrop-filter: blur(9px); }
.receiver-badge span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-right: 6px; }

.toolbar { min-height: 60px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; flex-wrap: wrap; }
.tool { height: 36px; min-width: 36px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--text); }
.tool:hover, .tool.active { color: var(--mint); border-color: rgba(98,229,182,.45); background: rgba(98,229,182,.08); }
.text-tool { padding: 0 11px; font-size: 11px; }
.tool.danger { color: #ff8c82; }
.color-wrap { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.color-wrap input { width: 50px; height: 50px; border: 0; padding: 0; margin: -7px; background: none; }
.width-control { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.width-control input { accent-color: var(--mint); width: 70px; }
.flow { margin-top: 26px; border: 1px solid var(--line); border-radius: 17px; padding: 17px; display: flex; align-items: center; justify-content: space-around; gap: 10px; background: rgba(12, 22, 18, .62); }
.flow div { display: flex; align-items: center; gap: 10px; }
.flow b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--mint); background: rgba(98,229,182,.08); border: 1px solid rgba(98,229,182,.18); font-size: 11px; }
.flow strong, .flow small { display: block; font-size: 11px; }
.flow small { color: var(--muted); margin-top: 3px; }
.flow i { color: #41544c; font-style: normal; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); padding: 11px 15px; border-radius: 10px; background: #eaf8f1; color: #0b1713; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s; z-index: 40; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .status { display: none; }
  .intro { align-items: start; flex-direction: column; }
  .workspace { grid-template-columns: 1fr; gap: 14px; }
  .flow { overflow-x: auto; justify-content: flex-start; }
  .flow div { min-width: 132px; }
}

@media (max-width: 520px) {
  main { width: min(100% - 20px, 1420px); padding-top: 32px; }
  .topbar { height: 64px; padding: 0 14px; }
  .intro h1 { font-size: 34px; }
  .toolbar { gap: 6px; }
  .width-control { order: 2; width: 100%; }
  .width-control input { flex: 1; }
  .source-window { width: 100%; margin-left: 0; }
}

/* Compact application layout. */
main { padding-top: 20px; padding-bottom: 24px; }
.terrain { animation: none; }
@media (max-width: 520px) { main { padding-top: 12px; } }
.sim-feed { background: #101b18; background-image: linear-gradient(rgba(98,229,182,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(98,229,182,.035) 1px, transparent 1px); background-size: 40px 40px; }

dialog { width: min(460px, calc(100% - 24px)); color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog h2 { margin: 0 0 20px; font-size: 22px; }
dialog label { display: block; margin: 14px 0 8px; font-size: 13px; }
dialog input { width: 100%; background: var(--panel-2); color: var(--text); padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
#peerError { font-size: 13px; color: var(--amber); min-height: 20px; }
button:disabled { opacity: .45; cursor: default; }

#streamVideo { z-index: 2; opacity: 0; pointer-events: none; object-fit: contain; background: #050807; }
.video-stage.has-stream #streamVideo { opacity: 1; }
.video-stage.has-stream .sim-feed, .video-stage.has-stream .telemetry { display: none; }

.source-switcher {flex-wrap:wrap;align-items:center;gap:8px;}
.quality-field {display:flex;align-items:center;gap:6px;font-size:12px;}
.quality-field select {background:#10221c;color:#d9f9ed;border:1px solid #355349;border-radius:8px;padding:7px;}
#qualityStatus {font-size:11px;color:var(--mint);}
.diagnostics {background:#0b1814;border-top:1px solid #294237;padding:10px 14px;font-size:12px;}
.diagnostics summary {cursor:pointer;font-weight:600;}
.diagnostic-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px;}
.diagnostic-grid span {color:#9bb7ac;}.diagnostic-grid strong {display:block;color:#e2f9ee;font:600 14px ui-monospace,monospace;margin-top:4px;}
.diagnostics p {font-size:10px;color:#90a69c;line-height:1.5;margin:10px 0 0;}
#connectionQuality[data-severity=good] {color:#62e5b6;}
#connectionQuality[data-severity=warn] {color:#f6c76a;}
#connectionQuality[data-severity=bad],#diagLastError {color:#ff9687;}
#diagLastError {margin-top:6px;font-size:11px;}
#drawingWorkspace:fullscreen .diagnostics {flex:none;max-height:22vh;overflow:auto;}

.relay-mode #removePeer {display:none;}
[hidden] { display: none !important; }