:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #f2f2f2;
  --muted: #9a9a9a;
  --accent: #3b82f6;
  --ok: #34c759;
  --warn: #ffcc00;
  --error: #ff453a;
  --glass: rgba(20, 20, 20, 0.6);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.4 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

#preview {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
#preview.mirrored { transform: scaleX(-1); }

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: #000;
}
.overlay h1 { margin: 0; font-size: 34px; letter-spacing: 0.5px; }
.overlay p { margin: 0; color: var(--muted); max-width: 320px; }
.error { color: var(--error) !important; }
.overlay .hint { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); font-size: 13px; opacity: 0.7; }

button {
  font: inherit;
  color: var(--fg);
  border: 0;
  cursor: pointer;
}
button.primary {
  margin-top: 12px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--accent);
  font-weight: 600;
}
button:disabled { opacity: 0.5; }

#hud {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  pointer-events: none;
}
#hud > * { pointer-events: auto; }

.top { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill.action { background: var(--accent); font-weight: 600; }
.pill.action::before { content: none; }
.pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 14px;
}
.pill::before { content: "● "; color: var(--muted); }
.pill.ok::before { color: var(--ok); }
.pill.warn::before { color: var(--warn); }
.pill.error::before { color: var(--error); }

.bottom { display: flex; flex-direction: column; gap: 16px; align-items: center; }

.zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 360px);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.zoom input { flex: 1; accent-color: var(--warn); }
#zoom-value { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.buttons { display: flex; align-items: center; gap: 36px; }
.round {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.round.small { width: 48px; height: 48px; font-size: 20px; }

/* Micro : barré quand coupé ; en marche, un halo suit le niveau sonore (--level de 0 à 1). */
#mic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#mic svg rect { fill: currentColor; stroke: none; }
#mic .slash { stroke: var(--error); stroke-width: 2.5; }
#mic.on { background: var(--fg); color: #000; box-shadow: 0 0 0 calc(var(--level, 0) * 12px) rgba(52, 199, 89, 0.55); }
#mic.on .slash { display: none; }

#black {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 40px;
}
#black p { color: #333; font-size: 13px; }