/* Kiosk UI. Colours and font come from the skin (set as CSS variables by app.js). */
:root {
  --bg: #070b16;
  --surface: #111a2e;
  --text: #f4f7ff;
  --muted: #9aa6c4;
  --accent: #22d3ee;
  --accent2: #8b5cf6;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --debug-width: 0px;
  --radius: clamp(14px, 1.6vmin, 24px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.debug { --debug-width: min(420px, 38vw); }

#app {
  position: fixed;
  inset: 0 var(--debug-width) 0 0;
  overflow: hidden;
  cursor: none;
}
body.debug #app { cursor: default; }

/* ---------- animated background ---------- */
.bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.orb {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(9vmax);
  opacity: 0.38;
  will-change: transform;
}
.o1 { background: var(--accent); left: -25vmax; top: -30vmax; animation: drift1 26s ease-in-out infinite alternate; }
.o2 { background: var(--accent2); right: -30vmax; bottom: -35vmax; animation: drift2 32s ease-in-out infinite alternate; }
.o3 { background: var(--accent); right: 10vmax; top: 30vmax; width: 40vmax; height: 40vmax; opacity: 0.18; animation: drift1 40s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(18vmax, 12vmax) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-16vmax, -10vmax) scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* ---------- phases ---------- */
#attract, #stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#stage { opacity: 0; pointer-events: none; transform: scale(0.98); }
#app:not([data-phase="attract"]):not([data-phase="boot"]) #stage { opacity: 1; transform: none; pointer-events: auto; }
#app:not([data-phase="attract"]):not([data-phase="boot"]) #attract { opacity: 0; pointer-events: none; transform: scale(1.02); }
#app[data-phase="boot"] #attract .attract-inner { opacity: 0; }

/* ---------- attract screen ---------- */
#attract {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 4vmin clamp(20px, 4vh, 48px);
}
#attract-video, #attract-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#attract-video:not([hidden]) ~ .attract-inner, #attract-image:not([hidden]) ~ .attract-inner {
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.attract-inner {
  position: relative;
  max-width: min(840px, 92vw);
  padding: 2.2vmin 4vmin 2.5vmin;
  margin-bottom: clamp(10px, 2vh, 28px);
  transition: opacity 0.6s ease;
}
.attract-inner .logo {
  height: clamp(34px, 5.5vmin, 58px);
  width: auto;
  margin-bottom: 1.5vmin;
  display: inline-block;
  object-fit: contain;
}
#attract h1 {
  font-size: clamp(22px, 3.8vmin, 44px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1vmin 0 0.8vmin;
  transition: opacity 0.5s ease;
}
#attract p {
  font-size: clamp(14px, 1.8vmin, 20px);
  color: var(--muted);
  margin: 0;
  transition: opacity 0.5s ease;
}
#attract .hint {
  margin-top: 1.8vmin;
  font-size: clamp(12px, 1.5vmin, 16px);
  color: var(--text);
  opacity: 0.8;
  animation: breathe 3.2s ease-in-out infinite;
}
.fade { opacity: 0 !important; }
@keyframes breathe { 50% { opacity: 0.35; } }

.pulse { position: relative; width: 6vmin; height: 6vmin; margin: 0.8vmin auto; }
.pulse span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.5vmin solid var(--accent);
  animation: ring 3s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  opacity: 0;
}
.pulse span:nth-child(2) { animation-delay: 1s; border-color: var(--accent2); }
.pulse span:nth-child(3) { animation-delay: 2s; }
@keyframes ring { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- stage (live visit) ---------- */
#stage {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 38%);
  gap: 3vmin;
  padding: 3vmin 4vmin;
}
.avatar-area { display: grid; place-items: center; min-height: 0; }
.avatar-frame {
  position: relative;
  height: min(94vh, calc((100vw - var(--debug-width)) * 0.55 * 16 / 9));
  aspect-ratio: 704 / 1280;
  border-radius: calc(var(--radius) * 1.4);
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, var(--surface), var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), 0 3vmin 10vmin color-mix(in srgb, var(--accent) 25%, transparent);
}
#avatar, #avatar-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#avatar { background: transparent; }
#avatar-poster { filter: saturate(0.85); }
.connecting { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: none; gap: 1.2vmin; }
#app[data-phase="connecting"] .connecting { display: flex; }
.connecting span { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; background: var(--text); animation: dots 1.2s ease-in-out infinite; }
.connecting span:nth-child(2) { animation-delay: 0.15s; }
.connecting span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.8vmin); } }

.status {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.9vmin;
  padding: 0.8vmin 1.8vmin;
  border-radius: 999px;
  font-size: clamp(13px, 1.7vmin, 22px);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
}
.status.show { opacity: 1; }
.status .dot { width: 1.1vmin; height: 1.1vmin; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--accent); }
.status[data-mode="listening"] .dot { animation: breathe 1.6s ease-in-out infinite; }
.status[data-mode="speaking"] .dot { background: var(--accent2); }
.status[data-mode="reconnecting"] .dot { background: #f59e0b; animation: breathe 0.8s ease-in-out infinite; }

.panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3vmin;
  min-width: 0;
  min-height: 0;
}
.panel .logo { height: clamp(32px, 6vmin, 72px); align-self: flex-start; }
#cards { display: flex; flex-direction: column; gap: 2vmin; }
.card {
  position: relative;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--radius);
  padding: 2.2vmin 2.6vmin;
  animation: cardIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.card-close {
  position: absolute;
  top: 1.2vmin;
  right: 1.2vmin;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  z-index: 2;
}
.card-close:hover {
  background: var(--surface);
  color: var(--text);
  transform: scale(1.1);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(2vmin); } }
.card h3 { margin: 0 0 1vmin; font-size: clamp(16px, 2.2vmin, 30px); color: var(--muted); font-weight: 600; }
.card .big { font-size: clamp(22px, 3.4vmin, 48px); font-weight: 700; line-height: 1.15; }
.card .sub { font-size: clamp(14px, 2vmin, 26px); color: var(--muted); margin-top: 0.5vmin; }
.slot { display: flex; gap: 2vmin; align-items: center; padding: 1.2vmin 0; }
.slot + .slot { border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.slot .tag {
  flex: none;
  display: grid;
  place-items: center;
  width: 6vmin;
  height: 6vmin;
  border-radius: 1.4vmin;
  font-weight: 800;
  font-size: clamp(18px, 3vmin, 40px);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--bg);
}
.card.ok { border-color: color-mix(in srgb, #22c55e 60%, transparent); }
.card.ok h3 { color: #4ade80; }

.captions {
  min-height: 12vmin;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.2vmin;
  transition: opacity 0.8s ease;
  cursor: pointer;
}
.captions .line {
  font-size: clamp(20px, 3vmin, 42px);
  line-height: 1.3;
  font-weight: 500;
  transition: opacity 0.6s ease;
}
.captions .line.old { opacity: 0.35; }
.captions .line.user { font-size: clamp(16px, 2.2vmin, 30px); color: var(--muted); font-style: italic; }

/* Portrait screens and iPads held upright: full-height avatar, panel over the bottom. */
@media (orientation: portrait) {
  #stage { grid-template-columns: 1fr; padding: 0; }
  .avatar-frame { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .status { bottom: auto; top: 2.5vmin; }
  .panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    padding: 12vh 5vw 4vh;
    background: linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, transparent) 55%, transparent);
  }
  .panel .logo { display: none; }
  .captions { min-height: 0; }
}

/* ---------- overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.overlay[hidden] { display: none; }
.big-button {
  font: inherit;
  font-size: clamp(26px, 5vmin, 64px);
  font-weight: 700;
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 0;
  border-radius: 999px;
  padding: 3vmin 7vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2vmin 6vmin color-mix(in srgb, var(--accent) 35%, transparent);
}
.big-button small { font-size: 0.5em; font-weight: 600; opacity: 0.8; }
.notice { place-items: end center; padding-bottom: 6vmin; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.notice-box {
  pointer-events: auto;
  max-width: min(900px, 90vw);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid #f59e0b;
  border-radius: var(--radius);
  padding: 2.5vmin 3.5vmin;
}
.notice-box h2 { margin: 0 0 1vmin; font-size: clamp(18px, 2.8vmin, 34px); }
.notice-box p { margin: 0; font-size: clamp(14px, 2vmin, 24px); color: var(--muted); white-space: pre-line; }
.mock-badge {
  position: absolute;
  top: 1.5vmin;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f59e0b;
  color: #111;
  font-weight: 700;
}

/* Camera stays "on screen" (Safari stops updating hidden video) but invisible. */
#camera { position: fixed; width: 2px; height: 2px; right: 0; bottom: 0; opacity: 0.01; pointer-events: none; }
body.debug #camera.preview {
  width: calc(var(--debug-width) - 32px);
  height: auto;
  right: 16px;
  bottom: 16px;
  opacity: 1;
  transform: scaleX(-1);
  border-radius: 8px;
  z-index: 30;
}

/* ---------- /debug panel ---------- */
#debug {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--debug-width);
  overflow-y: auto;
  background: #0d1117;
  color: #d7dde8;
  font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 12px 14px 40px;
  border-left: 1px solid #263041;
  z-index: 20;
  -webkit-user-select: text;
  user-select: text;
}
#debug h2 { font: 600 12px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: #7d8aa3; margin: 16px 0 6px; }
#debug h2:first-child { margin-top: 0; }
#debug table { width: 100%; border-collapse: collapse; }
#debug td { padding: 2px 0; vertical-align: top; }
#debug td:first-child { color: #7d8aa3; width: 46%; padding-right: 8px; }
#debug .good { color: #4ade80; }
#debug .warn { color: #fbbf24; }
#debug .bad { color: #f87171; }
#debug .buttons { display: flex; flex-wrap: wrap; gap: 6px; }
#debug button, #debug input {
  font: 600 12px system-ui, sans-serif;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #e2e8f0;
  padding: 6px 9px;
}
#debug button { cursor: pointer; }
#debug button:hover { background: #273449; }
#debug .row { display: flex; gap: 6px; margin-top: 6px; }
#debug .row input { flex: 1; min-width: 0; }
#debug .scroll { max-height: 220px; overflow-y: auto; background: #0a0e14; border: 1px solid #1f2937; border-radius: 6px; padding: 6px 8px; }
#debug .scroll div { padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
#debug .who { color: #7dd3fc; }
#debug .who.agent { color: #c4b5fd; }
#debug .t { color: #64748b; }
#debug pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
#debug .note { color: #94a3b8; font: 12px/1.4 system-ui, sans-serif; margin: 6px 0; }

/* ---------- Option B (private pipeline) face, label and engine switch ---------- */
#avatar-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  z-index: 2;
}
#avatar-live[data-mock] { visibility: hidden; }
.face-mock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4vmin;
  color: var(--text);
  text-align: center;
}
.face-mock .ring {
  width: 28vmin;
  height: 28vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--accent2), var(--surface) 70%);
  box-shadow: 0 0 0 0 var(--accent);
  transition: box-shadow 0.2s ease;
}
.face-mock.speaking .ring { animation: talk 0.5s ease-in-out infinite alternate; }
@keyframes talk { from { box-shadow: 0 0 0 0.6vmin var(--accent); } to { box-shadow: 0 0 0 2.4vmin transparent; } }
.face-mock .who { font-size: clamp(20px, 3.2vmin, 40px); font-weight: 700; }
.face-mock .what { font-size: clamp(12px, 1.6vmin, 18px); color: var(--muted); }

.engine-label {
  position: absolute;
  left: 50%;
  top: clamp(10px, 1.6vmin, 22px);
  transform: translateX(-50%);
  z-index: 4;
  max-width: calc(100% - 24px);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: clamp(11px, 1.35vmin, 15px);
  letter-spacing: 0.01em;
  width: max-content;
  text-align: center;
  line-height: 1.35;
  pointer-events: none;
}
.engine-label[data-engine="private"]::before { content: "🔒 "; }

/* Discreet A/B switch for the presenter (bottom-left corner). */
.engine-switch {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0.28;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
.engine-switch:hover, .engine-switch:focus-within, body.debug .engine-switch { opacity: 1; }
.engine-switch button {
  min-width: 34px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font: 600 13px var(--font);
  cursor: pointer;
}
.engine-switch button[aria-pressed="true"] { background: var(--accent); color: #001018; }
.engine-switch button[data-brain] { padding: 0 10px; font-weight: 500; }
.engine-switch button[hidden], .engine-switch .sep[hidden] { display: none; }
.engine-switch .sep { width: 1px; margin: 4px 4px; background: rgba(255, 255, 255, 0.3); }
.avatar-frame .status, .avatar-frame .connecting { z-index: 3; }
/* Elements with their own display rule must still disappear when hidden. */
.face-mock[hidden], .engine-label[hidden], #avatar-live[hidden] { display: none; }