/* Staging voice proof — reuses the Orb visual direction (gold radial, ring).
   Not the production widget; not final animation polish. */
:root {
  --bg: #121212; --panel: #1a1a1a; --panel-2: #1e1a0e; --bd: #2a2a2a; --bd-warm: #3a2e0a;
  --gold: #d8b44a; --gold-lt: #e2c97e; --gold-deep: #8a6820; --ink: #151004;
  --text: #f5f1e6; --muted: #8a8880;
  --good: #34d399; --info: #60a5fa; --warn: #e0a52a; --crit: #e05c2a;
  --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
h1, .num { font-family: var(--serif); }
:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; border-radius: 6px; }

.stagingbar {
  position: sticky; top: 0; z-index: 80; text-align: center; padding: 6px 10px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-lt);
  background: repeating-linear-gradient(45deg, #3a2e0a, #3a2e0a 12px, #332800 12px, #332800 24px);
  border-bottom: 1px solid var(--gold);
}
.stagingbar b { color: #fff; }

main { max-width: 720px; margin: 0 auto; padding: 40px 20px 120px; }
h1 { font-size: 22px; }
.sub { color: var(--muted); margin-top: 6px; font-size: 14px; max-width: 60ch; }

.controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  font: inherit; font-size: 15px; font-weight: 600; border-radius: 10px; padding: 12px 20px; cursor: pointer;
  border: 1px solid var(--bd); background: #141414; color: var(--text);
}
.btn.primary { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--ink); border: none; }
.btn.ghost { color: var(--gold-lt); border-color: var(--bd-warm); }
.btn[aria-pressed="true"] { background: var(--panel-2); border-color: var(--gold); color: var(--gold-lt); }

.status { margin-top: 18px; font-size: 14px; color: var(--muted); }
.status b { color: var(--gold-lt); }

/* page dim while a session is active */
#dim {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
#dim.on { opacity: 1; }

/* fallback */
.fallback { margin-top: 26px; background: var(--panel); border: 1px solid var(--bd-warm); border-radius: 12px; padding: 16px; }
.fallback h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); }
.fallback p { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.fb-row { display: flex; gap: 8px; margin-top: 12px; }
.fb-row input { flex: 1; background: #111; border: 1px solid var(--bd); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; }
#fallbackLog { margin-top: 12px; font-size: 13px; display: grid; gap: 6px; }
.fb-you { color: var(--text); }
.fb-sys { color: var(--muted); font-style: italic; }

/* ---- Orb ---- */
#orb {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-lt), var(--gold-deep) 72%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
  transition: width .45s ease, height .45s ease, right .45s ease, bottom .45s ease,
              left .45s ease, top .45s ease, transform .45s ease;
}
#orb .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(216, 180, 74, .5); }

/* active: move toward centre + enlarge (functional staging behaviour, not final polish) */
#orb.active {
  right: auto; bottom: auto; left: 50%; top: 44%; width: 160px; height: 160px;
  transform: translate(-50%, -50%);
}

/* phase visuals — distinguishable without colour alone (ring style + label) */
#orb[data-phase="listening"] .ring { border-style: solid; animation: pulse 1.4s ease-out infinite; }
#orb[data-phase="thinking"] .ring { border-style: dashed; animation: spin 1.6s linear infinite; }
#orb[data-phase="speaking"] .ring { border-style: double; animation: pulse .7s ease-out infinite; }
#orb[data-phase="connecting"] .ring,
#orb[data-phase="requesting_mic"] .ring,
#orb[data-phase="reconnecting"] .ring { border-style: dotted; animation: spin 2s linear infinite; }
#orb[data-phase="closing"] .ring { border-style: solid; animation: pulse 2.4s ease-out infinite; opacity: .85; }
#orb[data-phase="muted"] { filter: grayscale(.6) brightness(.8); }
#orb[data-phase="muted"] .ring { border-style: dashed; animation: none; }
#orb[data-phase="failed"] .ring, #orb[data-phase="mic_denied"] .ring { border-color: var(--crit); animation: none; }

@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
html[data-reduced="on"] * { animation: none !important; transition: none !important; }

/* ── Version 1 additions ─────────────────────────────────────────────── */
/* Page-awareness line (P2) */
.pagectx { margin-top: 14px; font-size: 13px; color: var(--muted); }
.pagectx b { color: var(--gold-lt); }

/* Consultative contact capture (P4) */
.contact {
  margin-top: 26px; padding: 18px; border: 1px solid var(--bd-warm); border-radius: 12px;
  background: var(--panel-2);
}
.contact-prompt { font-size: 15px; color: var(--text); }
.contact-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.contact .fb-row { margin-top: 12px; }

/* Staging demo note */
.devnote { margin-top: 26px; font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.devnote span { max-width: 52ch; }
.btn.tiny { font-size: 12px; padding: 7px 12px; border-radius: 8px; }