@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

/* ──────────────────────────────────────────────────────────────────────────
   Design tokens
────────────────────────────────────────────────────────────────────────── */
:root {
  /* backgrounds */
  --bg:       #050a1c;
  --bg2:      #0b0728;
  --bg3:      #08102a;

  /* glass panels */
  --glass:        rgba(255,255,255,.055);
  --glass-md:     rgba(255,255,255,.08);
  --glass-strong: rgba(255,255,255,.11);
  --border:       rgba(255,255,255,.09);
  --border-md:    rgba(255,255,255,.14);
  --border-s:     rgba(255,255,255,.2);

  /* brand colours */
  --teal:   #2dd4bf;
  --violet: #8b5cf6;
  --blue:   #3b82f6;
  --amber:  #f59e0b;
  --red:    #ef4444;

  /* text */
  --text:    #f0f4ff;
  --muted:   #9aa4c8;
  --muted-2: #6c748a;

  /* gradients */
  --grad-brand: linear-gradient(125deg, var(--teal) 0%, var(--violet) 100%);
  --grad-user:  linear-gradient(140deg, #21c9b8 0%, #6c5ce7 100%);

  /* shadows */
  --shadow-card: 0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-glow: 0 0 50px -5px rgba(45,212,191,.38);

  /* radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* nav height (used in calc for camera positioning) */
  --nav-h: 52px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Base reset
────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Kiosk-specific: lock to viewport, no page scroll */
body.kiosk-page {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Visible keyboard-focus indicator for all interactive kiosk controls.
   The kiosk may be driven by keyboard / switch-access, and several controls
   (icon buttons, glass pills) otherwise have no focus affordance at all. */
.kiosk-page :is(a, button, textarea, input, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.kiosk-page .composer:focus-within :is(textarea):focus-visible { outline: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Aurora background — four slow-drifting blurred blobs
────────────────────────────────────────────────────────────────────────── */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 30% 10%, var(--bg2), var(--bg) 65%);
}
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px);
  animation: aurora-drift 28s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) {
  width: 55vw; height: 55vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(45,212,191,.35), transparent 70%);
  top: -20%; left: -15%; animation-duration: 32s;
}
.aurora span:nth-child(2) {
  width: 50vw; height: 50vw; max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(139,92,246,.3), transparent 70%);
  bottom: -18%; right: -12%; animation-duration: 38s; animation-delay: -8s;
}
.aurora span:nth-child(3) {
  width: 35vw; height: 35vw; max-width: 380px; max-height: 380px;
  background: radial-gradient(circle, rgba(59,130,246,.22), transparent 70%);
  top: 35%; left: 55%; animation-duration: 26s; animation-delay: -14s;
}
.aurora span:nth-child(4) {
  width: 25vw; height: 25vw; max-width: 260px; max-height: 260px;
  background: radial-gradient(circle, rgba(124,58,237,.2), transparent 70%);
  top: 5%; right: 30%; animation-duration: 22s; animation-delay: -4s;
}
@keyframes aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, -40px) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }

/* Honour reduced-motion for the kiosk's continuous decorative animations.
   One-shot entrance animations are left intact; only looping motion is stopped. */
@media (prefers-reduced-motion: reduce) {
  .kiosk-page .glow-orbit,
  .kiosk-page .avatar-ring,
  .kiosk-page .orb,
  .kiosk-page .orb.speaking,
  .kiosk-page .orb.thinking,
  .kiosk-page .state::before,
  .kiosk-page .mic.listening,
  .kiosk-page .cam-live-dot {
    animation: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Top navigation bar
────────────────────────────────────────────────────────────────────────── */
.kiosk-nav {
  position: relative; z-index: 100; flex-shrink: 0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  background: rgba(5,10,28,.75);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

.kiosk-brand {
  display: flex; align-items: center; gap: .5rem;
}
.kiosk-brand-mark {
  font-size: 1.1rem;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.kiosk-brand-name {
  font-size: .88rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.kiosk-nav-actions {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

.kiosk-user-chip {
  font-size: .72rem; color: var(--muted);
  border: 1px solid var(--border-md); border-radius: var(--r-pill);
  padding: .2rem .7rem; white-space: nowrap;
}

.nav-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; line-height: 1;
  color: var(--muted); background: var(--glass); border: 1px solid var(--border);
  cursor: pointer; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
  backdrop-filter: blur(8px);
}
.nav-pill:hover { color: var(--text); border-color: var(--border-s); background: var(--glass-md); }
.nav-pill-reset { color: rgba(45,212,191,.7); }
.nav-pill-reset:hover { color: var(--teal); border-color: rgba(45,212,191,.4); }

/* Connection status — same pill shape, a live/dead dot instead of a click target */
.conn-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600; color: var(--muted);
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); transition: background .25s; flex: none; }
.conn-pill.online .conn-dot { background: var(--teal); box-shadow: 0 0 6px var(--teal); animation: conn-pulse 2.4s ease-in-out infinite; }
.conn-pill.offline .conn-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
.conn-pill.offline { color: var(--red); border-color: rgba(239,68,68,.35); }
@keyframes conn-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .conn-pill.online .conn-dot { animation: none; } }

/* ──────────────────────────────────────────────────────────────────────────
   Consent banner
────────────────────────────────────────────────────────────────────────── */
.consent-bar {
  position: relative; z-index: 90; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: .65rem 1.25rem;
  background: rgba(45,212,191,.06);
  border-bottom: 1px solid rgba(45,212,191,.15);
  font-size: .82rem; color: var(--muted);
  animation: slide-down .3s ease;
}
.consent-bar[hidden] { display: none; }
@keyframes slide-down { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform: none; } }

.consent-text { flex: 1; min-width: 180px; }

.consent-actions { display: flex; gap: .5rem; }
.consent-btn {
  min-height: 40px; padding: .5rem 1.1rem; border-radius: var(--r-pill); border: none;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #042e28;
  transition: opacity .15s, transform .15s;
}
.consent-btn:hover { transform: translateY(-1px); opacity: .9; }
.consent-btn.ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-md);
}
.consent-btn.ghost:hover { color: var(--text); }

/* ──────────────────────────────────────────────────────────────────────────
   Escalation banner
────────────────────────────────────────────────────────────────────────── */
.escalation {
  display: none;
  position: relative; z-index: 90; flex-shrink: 0;
  padding: .7rem 1.5rem; text-align: center; font-size: .85rem; font-weight: 600;
  background: linear-gradient(120deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
  color: #ffe4a8; border-bottom: 1px solid rgba(245,158,11,.3);
  animation: slide-down .35s ease;
}
.escalation.show { display: block; }

/* TTS failure notice — shown when backend audio stops working mid-session */
.tts-warn {
  position: relative; z-index: 90; flex-shrink: 0;
  padding: .5rem 1.5rem; text-align: center; font-size: .82rem; font-weight: 500;
  background: linear-gradient(120deg, rgba(239,68,68,.12), rgba(239,68,68,.05));
  color: #fca5a5; border-bottom: 1px solid rgba(239,68,68,.22);
  animation: slide-down .3s ease;
}
/* [hidden] sets display:none via browser UA — no extra rule needed */

/* ──────────────────────────────────────────────────────────────────────────
   Main layout — two-column grid on desktop, stacked on mobile
────────────────────────────────────────────────────────────────────────── */
.kiosk-main {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: clamp(280px, 38%, 440px) 1fr;
  gap: 1rem;
  padding: 1rem 1.25rem 1rem;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
   Left column: Avatar zone
────────────────────────────────────────────────────────────────────────── */
.avatar-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 1.5rem 1rem;
  overflow: hidden;
  position: relative;
}

/* Ambient glow orbits (decorative rings behind avatar) */
.glow-orbit {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(45,212,191,.12);
  animation: orbit-pulse 6s ease-in-out infinite alternate;
}
.orbit-1 {
  width: min(360px, 90%); height: min(360px, 90%);
  box-shadow: 0 0 60px rgba(45,212,191,.06) inset;
}
.orbit-2 {
  width: min(260px, 70%); height: min(260px, 70%);
  border-color: rgba(139,92,246,.12);
  animation-delay: -3s; animation-duration: 8s;
  box-shadow: 0 0 40px rgba(139,92,246,.06) inset;
}
@keyframes orbit-pulse {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(1.05); opacity: 1; }
}

/* Avatar stage: the glowing circle housing orb or 3D model */
.avatar-stage {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.avatar-ring {
  position: relative;
  width: clamp(140px, 30vw, 240px);
  height: clamp(140px, 30vw, 240px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* layered glow */
  box-shadow:
    0 0 0 1px rgba(45,212,191,.2),
    0 0 30px rgba(45,212,191,.15),
    0 0 70px rgba(45,212,191,.08),
    0 0 140px rgba(139,92,246,.08);
  background: radial-gradient(circle at 40% 30%, rgba(45,212,191,.08), rgba(139,92,246,.06) 60%, transparent);
  border: 1px solid rgba(45,212,191,.18);
  animation: ring-breathe 5s ease-in-out infinite;
}
@keyframes ring-breathe {
  0%,100% { box-shadow: 0 0 0 1px rgba(45,212,191,.2), 0 0 30px rgba(45,212,191,.15), 0 0 70px rgba(45,212,191,.08); }
  50%      { box-shadow: 0 0 0 1px rgba(45,212,191,.35), 0 0 50px rgba(45,212,191,.28), 0 0 100px rgba(45,212,191,.14); }
}

/* CSS orb: gradient ball shown when 3D avatar is unavailable */
.orb {
  position: relative;
  width: 58%; height: 58%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #8ff4e8, var(--teal) 55%, #146b62 100%);
  box-shadow: 0 0 50px rgba(45,212,191,.5), inset 0 0 28px rgba(255,255,255,.15);
  transition: transform .2s ease, opacity .3s ease;
}
.orb::before {
  content: ""; position: absolute; inset: -13px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--teal), var(--violet), var(--teal));
  animation: orb-spin 9s linear infinite; opacity: .8;
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
.orb.speaking { animation: orb-speak 1s ease-in-out infinite; }
.orb.thinking { animation: orb-think 1.6s ease-in-out infinite; }
.orb.hidden   { display: none; }
@keyframes orb-speak {
  0%,100% { transform: scale(1);    box-shadow: 0 0 50px rgba(45,212,191,.5),  inset 0 0 28px rgba(255,255,255,.15); }
  50%     { transform: scale(1.08); box-shadow: 0 0 80px rgba(45,212,191,.75), inset 0 0 28px rgba(255,255,255,.2); }
}
@keyframes orb-think {
  0%,100% { transform: scale(1);    box-shadow: 0 0 40px rgba(139,92,246,.45), inset 0 0 20px rgba(255,255,255,.12); }
  50%     { transform: scale(1.05); box-shadow: 0 0 65px rgba(139,92,246,.65), inset 0 0 20px rgba(255,255,255,.18); }
}
@media (prefers-reduced-motion: reduce) { .orb::before { animation: none; } }

/* 3D avatar container (used by TalkingHead.js) */
.avatar3d {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  opacity: 0; display: none;
  transition: box-shadow .3s ease, opacity .4s ease;
}
.avatar3d.mounting { display: block; }
.avatar3d.ready    { opacity: 1; }
.avatar3d.speaking { box-shadow: var(--shadow-glow), inset 0 0 0 1px rgba(45,212,191,.35); }
.avatar3d.thinking { box-shadow: 0 0 40px rgba(139,92,246,.5), inset 0 0 0 1px rgba(139,92,246,.35); }

/* Avatar name + state text */
.avatar-meta {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center;
}

.avatar-name {
  font-size: 1.1rem; font-weight: 800; letter-spacing: .02em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.avatar-name[hidden] { display: none; }

.state {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--muted); font-size: .8rem; font-weight: 500;
  background: var(--glass-md); border: 1px solid var(--border-md);
  border-radius: var(--r-pill); padding: .35rem 1rem;
}
.state::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal); box-shadow: 0 0 8px var(--teal);
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Latency badge */
.latency-badge {
  font-size: .72rem; color: var(--muted-2); font-family: ui-monospace, "SF Mono", Consolas, monospace;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: .25rem .85rem; letter-spacing: .02em;
}
.latency-badge[hidden] { display: none; }
.latency-badge .slow { color: var(--amber); font-weight: 600; }

/* Wake word toggle */
.wake-word-btn {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: .4rem 1rem; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.wake-word-btn:hover { color: var(--text); border-color: var(--border-md); }
.wake-word-btn.armed {
  color: var(--teal); border-color: rgba(45,212,191,.35);
  background: rgba(45,212,191,.07);
}

/* ──────────────────────────────────────────────────────────────────────────
   Right column: Chat zone
────────────────────────────────────────────────────────────────────────── */
.chat-zone {
  display: flex; flex-direction: column; gap: .65rem;
  overflow: hidden; min-height: 0;
}

/* Captions / transcript — gets all remaining height */
.captions {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.1rem 1.25rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.06);
  scroll-behavior: smooth;
}
.captions::-webkit-scrollbar { width: 5px; }
.captions::-webkit-scrollbar-track { background: transparent; }
.captions::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: var(--r-pill); }

/* Placeholder (shown when no messages) */
.captions-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; flex: 1; text-align: center;
  color: var(--muted-2); font-size: .85rem; pointer-events: none;
}
.captions-empty-icon { font-size: 2rem; opacity: .4; }
/* Hide placeholder once real bubbles are present */
.captions:has(.bubble) .captions-empty { display: none; }

/* Chat bubbles */
.bubble {
  padding: .85rem 1.1rem; border-radius: var(--r-md);
  max-width: 88%; line-height: 1.6; font-size: .95rem; white-space: pre-wrap;
  overflow-wrap: anywhere; word-break: break-word;
  animation: bubble-in .28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.bubble.user {
  align-self: flex-end;
  background: var(--grad-user); color: #eafff9;
  border-radius: var(--r-md) var(--r-md) 5px var(--r-md);
  box-shadow: 0 6px 22px -8px rgba(108,92,231,.55);
}
.bubble.bot {
  align-self: flex-start;
  background: var(--glass-md); border: 1px solid var(--border);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 5px;
}
.bubble .sources {
  margin-top: .55rem; padding-top: .5rem; font-size: .76rem; color: var(--muted-2);
  border-top: 1px solid var(--border);
}

/* Enroll button (appears after face recognition) */
.enroll-btn {
  align-self: flex-start; flex-shrink: 0;
  font-size: .82rem; font-weight: 600;
  color: var(--text); background: var(--glass-md); border: 1px solid var(--border-md);
  border-radius: var(--r-pill); padding: .45rem 1rem; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.enroll-btn:hover { border-color: var(--teal); transform: translateY(-1px); }
.enroll-btn[hidden] { display: none; }
/* Camera off is a "stop" action, not a primary one — tint it away from teal. */
.cam-off-btn { color: rgba(255,255,255,.7); }
.cam-off-btn:hover { border-color: rgba(232,136,136,.55); color: #f0a5a5; }

/* Tap-to-interrupt: while the avatar speaks, the stage + transcript are tap
   targets that skip the rest of the reply; hint via cursor + a floating chip. */
body.is-speaking .avatar-stage, body.is-speaking .captions { cursor: pointer; }
body.is-speaking .avatar-stage { position: relative; }
body.is-speaking .avatar-stage::after {
  content: "tap to skip";
  position: absolute; bottom: -1.1rem; left: 50%; transform: translateX(-50%);
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); opacity: .75; pointer-events: none; white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   Quick action chips — large, finger-friendly glass buttons
────────────────────────────────────────────────────────────────────────── */
.quick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  flex-shrink: 0;
}

.quick-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: .9rem .5rem;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-lg); cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  backdrop-filter: blur(12px);
  animation: fade-up .4s ease both;
}
.quick-chip:nth-child(1) { animation-delay: .04s; }
.quick-chip:nth-child(2) { animation-delay: .1s; }
.quick-chip:nth-child(3) { animation-delay: .16s; }
@keyframes fade-up { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }
.quick-chip:hover {
  border-color: rgba(45,212,191,.4); background: var(--glass-md);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(45,212,191,.2);
}
.quick-chip:active { transform: translateY(0); }

.chip-icon  { font-size: 1.3rem; }
.chip-label { font-size: .8rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; }
.quick-chip:hover .chip-label { color: var(--text); }

/* Compact variant — follow-up ("next probable") questions: small inline pills
   that wrap, instead of the big 3-up starter grid. Unobtrusive after a reply. */
.quick.compact { display: flex; flex-wrap: wrap; gap: .4rem; }
.quick.compact .quick-chip {
  flex-direction: row; width: auto; gap: 0;
  padding: .35rem .7rem; border-radius: var(--r-pill);
  animation: none;
}
.quick.compact .quick-chip:hover { transform: none; box-shadow: none; }
.quick.compact .chip-label { font-size: .74rem; font-weight: 500; text-align: left; line-height: 1.2; }

/* ──────────────────────────────────────────────────────────────────────────
   Composer — wide omni-bar input
────────────────────────────────────────────────────────────────────────── */
.composer {
  display: flex; align-items: flex-end; gap: .55rem;
  flex-shrink: 0;
  padding: .5rem;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-lg); backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s;
}
.composer:focus-within {
  border-color: rgba(45,212,191,.4);
  box-shadow: var(--shadow-card), 0 0 0 3px rgba(45,212,191,.1);
}

#input {
  flex: 1; resize: none; overflow-y: auto;
  min-height: 44px; max-height: 140px;
  padding: .7rem .5rem .7rem .65rem;
  border: none; outline: none; background: transparent;
  color: var(--text); font-family: inherit; font-size: .95rem; line-height: 1.5;
}
#input::placeholder { color: var(--muted-2); }

.composer button { border: none; cursor: pointer; flex-shrink: 0; transition: all .15s; }

/* Mic button */
.mic {
  --mic-level: 0;
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--glass-md) !important; border: 1px solid var(--border-md) !important;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
}
.mic:hover { border-color: rgba(45,212,191,.45) !important; }
.mic.listening {
  background: linear-gradient(135deg, #e6535f, #c2364a) !important;
  border-color: transparent !important;
  animation: mic-pulse 1.1s ease-in-out infinite;
}
/* Live mic-level ring: scales and brightens with the visitor's voice volume
   (set as --mic-level by the VAD analyser) so they can SEE it's hearing them. */
.mic.listening::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255,210,214,.9);
  transform: scale(calc(1 + var(--mic-level, 0) * 0.7));
  opacity: calc(.2 + var(--mic-level, 0) * .8);
  pointer-events: none;
  transition: transform .07s linear, opacity .07s linear;
}
.mic.hidden { display: none; }
@keyframes mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(226,83,95,.55); }
  50%      { box-shadow: 0 0 0 12px rgba(226,83,95,0); }
}

/* Response controls (Stop / Repeat) under the avatar */
.turn-controls { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }
.turn-controls[hidden] { display: none; }
.turn-ctrl {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .85rem; border-radius: var(--r-pill); cursor: pointer;
  font-size: .82rem; color: var(--text-d, #cfd3e6);
  background: var(--glass-md); border: 1px solid var(--border-md);
  transition: all .15s;
}
.turn-ctrl[hidden] { display: none; }
.turn-ctrl:hover { color: var(--text); border-color: var(--border-s); background: rgba(255,255,255,.07); }

/* Interim (live, not-yet-final) speech transcript — a faded user bubble */
.bubble.user.interim { opacity: .55; font-style: italic; box-shadow: none; }

/* Per-answer thumbs up/down rating */
.rating-row { display: flex; gap: .4rem; margin-top: .55rem; }
.rating-btn {
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill);
  cursor: pointer; font-size: .9rem; line-height: 1; padding: .2rem .55rem;
  opacity: .7; transition: opacity .15s, border-color .15s, background .15s;
}
.rating-btn:hover { opacity: 1; border-color: rgba(45,212,191,.5); }
.rating-btn.selected { opacity: 1; border-color: var(--teal); background: rgba(45,212,191,.16); }
.rating-row.rated .rating-btn:not(.selected) { opacity: .3; pointer-events: none; }

/* Attract prompt — gentle idle invitation to walk-ups */
.attract {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .9rem; padding: .6rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--glass-md); border: 1px solid rgba(45,212,191,.35);
  color: var(--text); font-size: .9rem; max-width: 90%;
  box-shadow: 0 8px 28px -10px rgba(45,212,191,.35);
  animation: attract-bob 2.4s ease-in-out infinite;
}
.attract[hidden] { display: none; }
.attract-wave { font-size: 1.15rem; animation: attract-wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes attract-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes attract-wave {
  0%,100% { transform: rotate(0deg); }
  20%      { transform: rotate(16deg); }
  40%      { transform: rotate(-8deg); }
  60%      { transform: rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .attract, .attract-wave { animation: none !important; }
}

/* Send button */
.send-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-brand); color: #042e28;
  display: flex; align-items: center; justify-content: center;
}
.send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(45,212,191,.5); }
.send-btn:active { transform: translateY(0); }

/* ──────────────────────────────────────────────────────────────────────────
   Visitor self-view — a small circular camera paired with the avatar.
   Sits inside the avatar column, deliberately smaller than the avatar so the
   assistant always reads as the primary presence and the visitor's own feed
   never covers the conversation/reply area (which the old floating panel did).
────────────────────────────────────────────────────────────────────────── */
.stage-pair {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(.6rem, 2vw, 1.2rem);
  flex-shrink: 0;
}

.visitor-cam {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  animation: fade-up .35s ease both;
}
.visitor-cam[hidden] { display: none; }

/* The circular self-view. ~45% of the avatar ring's max size, so the avatar
   is always visibly the larger of the two. */
.visitor-cam-ring {
  position: relative;
  width: clamp(80px, 13vw, 108px);
  height: clamp(80px, 13vw, 108px);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-md);
  background: rgba(0,0,0,.3);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: box-shadow .25s, border-color .25s;
}
/* Amber glow while the visitor is speaking (mirrors the avatar's teal glow) */
.visitor-cam.listening .visitor-cam-ring {
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5), 0 0 24px rgba(245,158,11,.35);
}

.camera-view {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); /* mirror, so it reads like a mirror/selfie, not reversed */
}

/* "No camera" placeholder — shown until the stream is actually live (see
   camera.js's loadedmetadata/emptied -> .live toggle on #visitorStage), same
   pattern as the dashboard's camera panel so both surfaces read consistently. */
.visitor-cam-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--muted-2); font-size: .6rem; text-align: center;
}
.visitor-cam-empty-icon { font-size: 1.1rem; opacity: .5; }
.visitor-cam.live .visitor-cam-empty { display: none; }

.cam-live-dot {
  position: absolute; top: 6px; right: 8px;
  color: #f87171; font-size: .6rem;
  text-shadow: 0 0 6px rgba(0,0,0,.8);
  animation: live-blink 1.5s ease-in-out infinite;
}
.cam-live-dot[hidden] { display: none; }
@keyframes live-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Generic caption ("You"); hidden once a recognized name is shown instead. */
.visitor-cam-caption {
  font-size: .72rem; font-weight: 600; color: var(--muted-2); letter-spacing: .03em;
}
.visitor-cam:has(.visitor-label:not([hidden])) .visitor-cam-caption { display: none; }

.visitor-label {
  font-size: .74rem; font-weight: 700; text-align: center;
  color: var(--teal); letter-spacing: .01em;
  max-width: clamp(80px, 13vw, 120px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visitor-label[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Responsive — tablet
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kiosk-main { grid-template-columns: clamp(200px, 34%, 320px) 1fr; gap: .75rem; padding: .75rem; }
  .avatar-ring { width: clamp(120px, 26vw, 180px); height: clamp(120px, 26vw, 180px); }
  .quick-chip { padding: .7rem .4rem; }
  .chip-icon  { font-size: 1.1rem; }
  .chip-label { font-size: .72rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Responsive — mobile (portrait, stacked layout)
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --nav-h: 46px; }

  .kiosk-brand-name { display: none; } /* just the mark on mobile */

  /* Keep Kiosk/Dashboard/Panel reachable on phones, but collapse the pill
     labels to icons so the whole nav fits one row (previously the links were
     display:none, leaving no way to navigate between pages on mobile). */
  .kiosk-nav-actions .pill-txt { display: none; }
  .conn-pill #connLabel { display: none; }        /* dot only on phone */
  .conn-pill { padding: .28rem .45rem; }

  .kiosk-nav-actions { gap: .3rem; flex-wrap: nowrap; overflow-x: auto; }
  .nav-pill { padding: .3rem .55rem; font-size: .78rem; }

  .kiosk-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: .6rem;
    gap: .6rem;
  }

  .avatar-zone {
    padding: .9rem .75rem .75rem;
    flex-direction: row; align-items: center; justify-content: flex-start;
    gap: .85rem;
  }
  .glow-orbit { display: none; }
  .avatar-ring {
    width: clamp(80px, 22vw, 110px);
    height: clamp(80px, 22vw, 110px);
    flex-shrink: 0; animation: none;
    box-shadow: 0 0 0 1px rgba(45,212,191,.2), 0 0 20px rgba(45,212,191,.15);
  }
  .avatar-meta { align-items: flex-start; flex: 1; gap: .3rem; }
  .avatar-name { font-size: .9rem; }
  .state { font-size: .72rem; padding: .25rem .75rem; }
  .latency-badge { font-size: .68rem; }
  .wake-word-btn { display: none; } /* hidden on mobile — voice UX already prominent */

  /* Keep the self-view a usable size on phones (the old corner overlay shrank
     it to near-invisible) while staying clearly smaller than the avatar. */
  .stage-pair { gap: .5rem; align-items: center; flex-shrink: 0; }
  .visitor-cam-ring { width: clamp(58px, 16vw, 84px); height: clamp(58px, 16vw, 84px); }
  .visitor-cam { gap: .25rem; }
  .visitor-cam-caption, .visitor-label { font-size: .64rem; max-width: 84px; }

  .chat-zone { gap: .5rem; }

  .captions { padding: .75rem .85rem; }
  .bubble { font-size: .88rem; padding: .7rem .9rem; }

  .quick { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .quick-chip { padding: .65rem .3rem; gap: .25rem; }
  .chip-icon  { font-size: 1rem; }
  .chip-label { font-size: .68rem; }

  #input { font-size: .88rem; min-height: 40px; }
  .mic, .send-btn { width: 40px; height: 40px; }

  .visitor-panel {
    width: clamp(100px, 28vw, 150px);
    right: .6rem;
    top: calc(var(--nav-h) + .5rem);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Very short screens (landscape phone, small kiosk)
────────────────────────────────────────────────────────────────────────── */
@media (max-height: 500px) {
  .kiosk-main { padding: .4rem; gap: .4rem; }
  .avatar-zone { padding: .5rem; }
  .avatar-ring {
    width: clamp(70px, 14vh, 100px);
    height: clamp(70px, 14vh, 100px);
  }
  .visitor-cam-ring { width: clamp(50px, 10vh, 72px); height: clamp(50px, 10vh, 72px); }
  .quick-chip { padding: .5rem .3rem; }
  .captions { padding: .6rem .75rem; }
}