/* BHA ADIHEX kiosk — styles.
   Light Apple frosted glass: grey bg, white translucent panels, iOS blue accent,
   Kufam font, Arabic-first RTL. Portrait screens supported at the bottom. */

:root {
  --glass: rgba(243, 246, 250, 0.55);
  --glass-strong: rgba(246, 248, 251, 0.72);
  --stroke: rgba(105, 115, 130, 0.22);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow: 0 12px 40px rgba(50, 60, 75, 0.14);
  --text: #1d1d1f;
  --text-dim: rgba(60, 60, 67, 0.6);
  --blue: #007aff;
  --red: #ff3b30;
  --bg: #e8ebf0;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: "Kufam", "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: var(--text);
  user-select: none;
}
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: flex; }

/* ---------- shared frosted glass ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(42px) saturate(1.9);
  -webkit-backdrop-filter: blur(42px) saturate(1.9);
  border: 1px solid var(--stroke);
  box-shadow: var(--highlight), var(--shadow);
}
.glass-strong {
  background: var(--glass-strong);
  backdrop-filter: blur(46px) saturate(1.9);
  -webkit-backdrop-filter: blur(46px) saturate(1.9);
  border: 1px solid var(--stroke);
  box-shadow: var(--highlight), var(--shadow);
}
.soft-bg {
  background:
    radial-gradient(90% 70% at 15% 5%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(80% 65% at 90% 95%, rgba(148, 163, 184, 0.28), transparent 60%),
    radial-gradient(70% 60% at 80% 10%, rgba(0, 122, 255, 0.06), transparent 55%),
    linear-gradient(180deg, #f1f4f8, #dde2e9);
}

/* ---------- split avatar background (idle screen AND lock screen) ---------- */
.split { position: absolute; inset: 0; display: flex; }
.half { position: relative; flex: 1; overflow: hidden; background: linear-gradient(165deg, #e3e9f0, #c9d1dc); }
.half img, .half video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: blur(5px); transform: scale(1.05); /* soft blur; scale hides the fringed edges */
}
.half .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 20, 30, 0.45) 0%, transparent 30%, transparent 55%, rgba(14, 20, 30, 0.78) 100%),
    rgba(52, 60, 72, 0.34);
}
.half + .half { border-inline-start: 1px solid rgba(255, 255, 255, 0.4); }
.half .h-info { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; color: #fff; padding: 0 20px; }
.half .h-info b { display: block; font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
.lang-pills { display: flex; gap: 14px; justify-content: center; margin-top: 20px; }
.lang-pills button {
  font-family: inherit; font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; color: #1d1d1f;
  background: rgba(255, 255, 255, 0.92); border: none; border-radius: 999px;
  padding: 15px 38px; cursor: pointer; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  display: inline-flex; align-items: center; gap: 9px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: transform 0.15s ease;
}
.lang-pills button:active { transform: scale(0.94); }
.lang-pills svg { flex: 0 0 auto; }

/* ---------- lock: staff unlock over the same avatar background ---------- */
#lock { align-items: center; justify-content: center; text-align: center; padding: 32px; z-index: 50; }
#lock .split .scrim {
  background:
    linear-gradient(180deg, rgba(14, 20, 30, 0.55) 0%, rgba(14, 20, 30, 0.35) 50%, rgba(14, 20, 30, 0.75) 100%),
    rgba(52, 60, 72, 0.4);
}
.lock-card { position: relative; z-index: 2; border-radius: 28px; padding: 34px 34px 28px; width: min(400px, 92vw); }
.lock-card h2 { font-size: 20px; font-weight: 700; }
.lock-card p { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
#lockPass {
  width: 100%; margin-top: 18px; font-family: inherit; font-size: 18px; text-align: center;
  color: var(--text); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--stroke);
  border-radius: 14px; padding: 13px 14px; outline: none; direction: ltr;
}
#lockPass.err { border-color: var(--red); }
#lockBtn {
  width: 100%; margin-top: 12px; font-family: inherit; font-size: 16px; font-weight: 600;
  color: #fff; background: var(--blue); border: none; border-radius: 999px; padding: 14px 0; cursor: pointer;
}
.settings-link {
  position: absolute; bottom: 18px; inset-inline-end: 20px; z-index: 3;
  font-size: 13px; color: rgba(255, 255, 255, 0.75); text-decoration: none;
  padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ---------- idle header: logos + title over the blurred videos ---------- */
#idle .idle-head {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  text-align: center; pointer-events: none;
  padding: 0 24px;
  background: radial-gradient(55% 60% at 50% 50%, rgba(14, 20, 30, 0.42), transparent 72%);
}
#idle .logo-row { display: flex; align-items: center; gap: 24px; }
#idle .logo-row .bha { height: 44px; display: block; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); }
#idle .logo-row .adihex { height: 42px; display: block; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); }
#idle .logo-row .logo-div { display: none; width: 1px; height: 38px; background: rgba(255, 255, 255, 0.4); }
@keyframes titlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
#idle h1 {
  font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; line-height: 1.35;
  color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  animation: titlePulse 4.5s ease-in-out infinite;
}
#idle .h1-en {
  font-size: clamp(14px, 1.7vw, 21px); font-weight: 600; color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.3px; margin-top: -8px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  animation: titlePulse 4.5s ease-in-out infinite;
}

/* ---------- live: full-screen video on grey ---------- */
#live { background: var(--bg); }
#avatarVideo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
#netPill {
  position: absolute; top: 76px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 8; display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 11px 24px; border-radius: 999px;
  opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none;
}
#netPill.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#netPill .net-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff9500; }
#buffering {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 9; display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600; color: var(--text);
  padding: 14px 28px; border-radius: 999px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
  pointer-events: none;
}
#buffering.show { opacity: 1; visibility: visible; }
#buffering .spinner { width: 20px; height: 20px; border-width: 2.5px; }
#camDebug {
  display: none; position: absolute; bottom: 20px; inset-inline-start: 20px; z-index: 20;
  border: 3px solid #34c759; border-radius: 12px; overflow: hidden; background: #000; direction: ltr;
}
#camDebug canvas { display: block; }
#camDebugText { font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.75); padding: 4px 8px; text-align: center; }
/* Mic-status pill lives at the TOP centre (under the topbar) — the bottom
   centre belongs to the conversation (transcript + quick pills) and the pill
   was landing on top of the text there. */
#listenPill {
  position: absolute; top: 86px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 6; display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 11px 24px; border-radius: 999px;
  opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none;
}
#listenPill.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#listenPill .mic-off { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
#topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
}
.logo-chip { display: flex; align-items: center; padding: 9px 18px; border-radius: 999px; }
.logo-chip img { height: 26px; display: block; }
.live-pill { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; color: var(--text); }
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.topbar-end { display: flex; align-items: center; gap: 10px; }
#devBtn {
  font-family: inherit; font-size: 17px; line-height: 1; color: var(--text);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--stroke); padding: 0;
}

/* In-call device picker (mic / camera / speaker) */
#deviceModal {
  position: absolute; inset: 0; z-index: 22; display: none;
  align-items: center; justify-content: center;
  background: rgba(232, 235, 240, 0.4); pointer-events: none;
}
#deviceModal.open { display: flex; }

/* Camera calibration modal (staff) — top-level, works pre-call and in-call */
#calModal {
  position: fixed; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center;
  background: rgba(232, 235, 240, 0.4); pointer-events: none;
}
#calModal.open { display: flex; }
.cal-card { width: min(580px, 94vw) !important; }
#calCanvas {
  width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: 16px;
  background: #14181f; margin-top: 10px;
}
#calMsg { font-size: 17px !important; font-weight: 600; min-height: 30px; }
#calPhrase {
  font-size: 25px; font-weight: 700; color: #007aff; text-align: center;
  min-height: 38px; line-height: 1.5;
}
#calPhrase.show { animation: capSwap 0.4s ease, phrasePulse 1.8s ease-in-out 0.4s infinite; }
#calMsg.swap { animation: capSwap 0.45s ease; }
@keyframes capSwap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes phrasePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.cal-meter {
  height: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.08);
  overflow: hidden; margin-top: 12px;
}
#calBar {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--blue, #007aff); transition: width 0.15s linear;
}

/* Pre-call how-to: a simulated call with a step-by-step spotlight */
#tutStage { position: absolute; inset: 0; overflow: hidden; }
#tutAvatar {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: transparent;
}
.tut-el { position: absolute; z-index: 1; transition: box-shadow 0.25s ease; }
.tut-el.spot {
  z-index: 5;
  border-radius: 18px;
  animation: spotPulse 1.6s ease-in-out infinite;
}
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 4px #007aff, 0 0 30px rgba(0, 122, 255, 0.6); }
  50% { box-shadow: 0 0 0 8px #007aff, 0 0 48px rgba(0, 122, 255, 0.9); }
}
/* Mock elements sit EXACTLY where the real call puts them, per language:
   the real #carPanel uses inset-inline-END and #selfView inset-inline-START,
   so with #tutStage's dir set per language both flip correctly (AR: cards
   left + self-view right, EN: mirrored). */
#tutCardWrap { top: 78px; inset-inline-end: 20px; width: 300px; }
#tutCardWrap .car-card { width: 100%; }
/* Mock typing bubble — same look and place as the real one (end of the
   transcript zone, agent side). */
#tutThinking {
  bottom: 148px; inset-inline-start: calc(50% - min(330px, 29vw));
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--blue);
  padding: 11px 20px; border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.88); border: 1.5px solid rgba(0, 122, 255, 0.55);
  animation: typingGlow 1.6s ease-in-out infinite;
}
#tutorial[dir="ltr"] #tutThinking { border-radius: 18px 18px 6px 18px; }
#tutThinking.spot { border-radius: 18px; }
/* Mock status pill — same look and place as the real listenPill (top centre) */
#tutListen {
  top: 86px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 11px 24px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  backdrop-filter: blur(28px) saturate(1.8); white-space: nowrap;
}
#tutListen.spot { border-radius: 999px; }
#tutListen .mic-off { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
#tutThinking .tdots { display: inline-flex; gap: 4px; direction: ltr; }
#tutThinking .tdots span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: tbounce 1.2s ease-in-out infinite; }
#tutThinking .tdots span:nth-child(2) { animation-delay: 0.15s; }
#tutThinking .tdots span:nth-child(3) { animation-delay: 0.3s; }
#tutPills {
  bottom: 148px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; white-space: nowrap;
}
#tutPills.spot { border-radius: 999px; padding: 4px; }
#tutSelf {
  bottom: 92px; inset-inline-start: 24px; width: min(420px, 34vw); aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 18px; transform: scaleX(-1);
  background: #14181f; border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 14px 40px rgba(30, 40, 55, 0.3);
}
#tutScrim { position: absolute; inset: 0; z-index: 3; background: rgba(24, 28, 36, 0.52); }
/* Leader line from the caption card to the spotlighted element */
#tutLine {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 4; pointer-events: none; overflow: visible;
}
#tutLine path {
  fill: none; stroke: #007aff; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 10 9; animation: dashFlow 0.9s linear infinite;
  filter: drop-shadow(0 0 6px rgba(0, 122, 255, 0.55));
}
#tutLine circle { fill: #007aff; animation: dotPulse 1.4s ease-in-out infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -19; } }
@keyframes dotPulse { 0%, 100% { r: 6; opacity: 1; } 50% { r: 10; opacity: 0.6; } }
#tutCoach {
  position: absolute; z-index: 6; left: 40px; top: 40px;
  width: min(440px, 88vw); border-radius: 24px; padding: 22px 26px;
  display: flex; flex-direction: column; gap: 12px; text-align: center;
  transition: left 0.55s cubic-bezier(0.35, 0, 0.2, 1), top 0.55s cubic-bezier(0.35, 0, 0.2, 1);
}
#tutCoach h2 { font-size: 22px; font-weight: 700; color: var(--text); text-wrap: balance; }
#tutCaption { font-size: 16.5px; line-height: 1.7; color: var(--text); min-height: 56px; }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#tutSteps { display: inline-flex; gap: 6px; direction: ltr; }
#tutSteps i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); }
#tutSteps i.on { background: #007aff; width: 22px; border-radius: 999px; }
#tutNext {
  font-family: inherit; font-size: 16.5px; font-weight: 700; color: #fff;
  background: #007aff; border: none; border-radius: 999px;
  padding: 12px 30px; cursor: pointer;
  animation: nextPulse 2.2s ease-in-out infinite;
}
@keyframes nextPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
#tutCaption.swap { animation: capSwap 0.45s ease; }
#tutAuto { display: none; }

.device-card { width: min(540px, 92vw); max-height: 82vh; overflow-y: auto; }
.dev-group { margin-top: 14px; }
.dev-group .dev-label { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; }
.dev-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--text);
  background: rgba(255, 255, 255, 0.6); border: 1.5px solid var(--stroke);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 7px; cursor: pointer;
}
.dev-opt .tick { visibility: hidden; color: var(--blue); font-weight: 700; }
.dev-opt.sel { border-color: var(--blue); background: rgba(0, 122, 255, 0.08); }
.dev-opt.sel .tick { visibility: visible; }
.dev-empty { font-size: 13px; color: var(--text-dim); padding: 4px 2px; }

/* Caller self-view: reuses the presence-gate camera stream (no extra
   permission). Mirrored like a phone selfie cam. */
#selfView {
  position: absolute; bottom: 92px; inset-inline-start: 24px; z-index: 6;
  width: 320px; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--stroke);
  box-shadow: var(--shadow); background: #000;
  transform: scaleX(-1);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
#selfView.show { opacity: 1; visibility: visible; }

/* Live transcript: last few utterances, newest at the bottom. Doubles as the
   ambient-noise debug view — whatever the STT heard shows up verbatim. */
#transcript {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  z-index: 5; width: min(680px, 60vw);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
#transcript .t-line {
  font-size: 15.5px; font-weight: 500; line-height: 1.55; color: var(--text);
  padding: 10px 18px; max-width: 86%; width: max-content;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 20px rgba(50, 60, 75, 0.1);
  backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  opacity: 0.68; transition: opacity 0.3s ease;
  animation: tIn 0.32s ease;
}
#transcript .t-line:last-child { opacity: 1; }
/* Chat-style: agent bubbles hug the start edge, the visitor's answers hug the
   end edge in blue — who said what reads at a glance. */
#transcript .t-line.t-agent {
  align-self: flex-start; text-align: start;
  border-radius: 18px 18px 18px 6px;
}
#transcript .t-line.t-user {
  align-self: flex-end; text-align: end;
  color: #fff; font-weight: 600;
  background: rgba(0, 122, 255, 0.82); border-color: rgba(0, 122, 255, 0.4);
  border-radius: 18px 18px 6px 18px;
}
[dir="ltr"] #transcript .t-line.t-agent { border-radius: 18px 18px 6px 18px; }
[dir="ltr"] #transcript .t-line.t-user { border-radius: 18px 18px 18px 6px; }
@keyframes tIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { transform: none; } }
/* "…is replying" typing bubble — the newest line of the conversation,
   pronounced: blue ring + glow + bouncing dots. */
#transcript .t-line.t-typing {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--blue);
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid rgba(0, 122, 255, 0.55);
  animation: tIn 0.3s ease, typingGlow 1.6s ease-in-out 0.3s infinite;
}
#transcript .t-typing .tdots { display: inline-flex; gap: 4px; direction: ltr; }
#transcript .t-typing .tdots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  animation: tbounce 1.2s ease-in-out infinite;
}
#transcript .t-typing .tdots span:nth-child(2) { animation-delay: 0.15s; }
#transcript .t-typing .tdots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingGlow {
  0%, 100% { box-shadow: 0 6px 22px rgba(0, 122, 255, 0.18); }
  50% { box-shadow: 0 6px 32px rgba(0, 122, 255, 0.45); }
}

#endBtn {
  position: absolute; bottom: 26px; inset-inline-start: 24px; z-index: 6;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--red);
  padding: 13px 26px; border-radius: 999px; cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  box-shadow: var(--highlight), var(--shadow);
  backdrop-filter: blur(42px) saturate(1.9); -webkit-backdrop-filter: blur(42px) saturate(1.9);
}

#toast {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%) translateY(-12px);
  z-index: 8; font-size: 15px; font-weight: 500; color: var(--text);
  padding: 12px 26px; border-radius: 999px;
  opacity: 0; transition: all 0.35s ease; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast b { color: var(--blue); }

/* ---------- "responding" indicator ---------- */
#thinking {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 6; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--text);
  padding: 11px 22px; border-radius: 999px;
  opacity: 0; transition: all 0.3s ease; pointer-events: none;
}
#thinking.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#thinking .tdots { display: inline-flex; gap: 4px; direction: ltr; }
#thinking .tdots span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: tbounce 1.2s ease-in-out infinite; }
#thinking .tdots span:nth-child(2) { animation-delay: 0.15s; }
#thinking .tdots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tbounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- car panel: side drawer (keeps the avatar's face clear) ---------- */
#carPanel {
  position: absolute; top: 78px; bottom: 24px; inset-inline-end: 20px; z-index: 7;
  width: min(330px, 76vw);
  display: flex; flex-direction: column;
  --hide: 140%;
  transform: translateX(var(--hide));
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
#live[dir="rtl"] #carPanel { --hide: -140%; }
#carPanel.open { transform: translateX(0); }
#carPanel .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; }
#carPanel .panel-head span {
  font-size: 15px; font-weight: 600; color: var(--text); padding: 8px 18px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--stroke); box-shadow: var(--highlight), var(--shadow);
  backdrop-filter: blur(42px) saturate(1.9); -webkit-backdrop-filter: blur(42px) saturate(1.9);
}
#closePanel {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-dim);
  background: var(--glass-strong); border: 1px solid var(--stroke); box-shadow: var(--highlight), var(--shadow);
  border-radius: 999px; padding: 8px 20px; cursor: pointer;
  backdrop-filter: blur(42px) saturate(1.9); -webkit-backdrop-filter: blur(42px) saturate(1.9);
}
#carTrack { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; padding: 2px 2px 6px; flex: 1; }
#carTrack::-webkit-scrollbar { display: none; }
.car-card {
  flex: 0 0 auto; width: 100%; border-radius: 24px; overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 24px rgba(50, 60, 75, 0.1),
    0 22px 60px rgba(50, 60, 75, 0.14);
  backdrop-filter: blur(34px) saturate(1.8); -webkit-backdrop-filter: blur(34px) saturate(1.8);
  animation: cardIn 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.car-card .photo {
  height: 158px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #dfe4ea, #c4ccd6);
  display: flex; align-items: center; justify-content: center;
}
/* soft fade at the photo's lower edge into the glass info area */
.car-card .photo::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 34px; z-index: 1;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.35));
  pointer-events: none;
}
.car-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s ease; }
/* gallery position dots */
.car-card .dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 5px;
}
.car-card .dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
}
.car-card .dots i.on { background: #fff; width: 16px; border-radius: 999px; }
/* Website catalog shots (white studio background) get cropped badly by cover —
   contain them on a white base. Local booth photos keep the full-bleed cover. */
.car-card .photo img.contain { object-fit: contain; background: #fff; }
.car-card .photo .brand-fallback { font-size: 32px; font-weight: 700; color: rgba(29, 29, 31, 0.14); letter-spacing: 4px; }
.car-card .offer-badge {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
  background: linear-gradient(135deg, #0a84ff, #0060df); color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 106, 255, 0.4);
}
.car-card .info { padding: 14px 16px 16px; }
.car-card .name-ar { font-size: 16px; font-weight: 700; color: var(--text); }
.car-card .name-en { font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.4px; margin-top: 2px; }
.car-card .photo-note { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; font-style: italic; }
.car-card .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.car-card .chips span {
  font-size: 11px; font-weight: 600; color: rgba(29, 29, 31, 0.72); padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(105, 115, 130, 0.18);
}
/* tap-to-ask affordance in the card corner */
.car-card.tappable .info { position: relative; }
.car-card.tappable .info::after {
  content: "💬"; position: absolute; top: 12px; inset-inline-end: 13px;
  font-size: 13px; opacity: 0.45;
}
.offer-card .info .name-ar { color: var(--blue); }
.offer-card .big { font-size: 22px; font-weight: 700; margin-top: 8px; color: var(--text); }
.offer-card .desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.7; }

/* ---------- contact form + virtual keyboard ---------- */
#contactModal, #askModal {
  position: absolute; inset: 0; z-index: 20; display: none;
  align-items: center; justify-content: flex-end;
  padding: 0 4vw; background: transparent; pointer-events: none;
}
#contactModal.open, #askModal.open { display: flex; }

/* FAQ quick-question pills (from /settings admin) — tap to ask the agent. */
#faqPills {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 6; display: none; gap: 9px; max-width: min(760px, 62vw);
  overflow-x: auto; padding: 6px; scrollbar-width: none;
  /* soft fade at the edges hints there's more to scroll */
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
#faqPills.show { display: flex; }
#faqPills::-webkit-scrollbar { display: none; }
/* While the agent is composing, the thinking pill takes this spot — the
   quick pills fade aside instead of colliding with it. */
#faqPills { transition: opacity 0.25s ease, transform 0.25s ease; }
#live.agent-thinking #faqPills { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }
.faq-pill {
  flex: 0 0 auto; font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--text); background: var(--glass-strong); border: 1px solid var(--stroke);
  border-radius: 999px; padding: 12px 22px; cursor: pointer;
  backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: var(--highlight), var(--shadow);
  animation: pillIn 0.4s cubic-bezier(0.3, 0.9, 0.4, 1.2) both;
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
}
.faq-pill:active { transform: scale(0.94); }
.faq-pill.sent { background: var(--blue, #007aff); color: #fff; border-color: transparent; }
.faq-pill:disabled { opacity: 0.45; }
.faq-pill.sent:disabled { opacity: 0.9; }
@keyframes pillIn { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: none; } }

/* Single-car photo gallery strip (thumbnails under the card) */
.gallery-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px; }
.gallery-strip img {
  width: 74px; height: 56px; object-fit: cover; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer; opacity: 0.82;
}
.gallery-strip img.sel { border-color: var(--blue); opacity: 1; }

/* Tappable car cards */
.car-card.tappable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.car-card.tappable:active, .car-card.tapped {
  transform: scale(0.97);
  box-shadow: 0 0 0 2.5px var(--blue);
}

/* Mask fallback pill: shown when a face is close but no lip movement is seen —
   tap to type the question instead. */
#askPill {
  position: absolute; top: 138px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 7; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--blue);
  padding: 12px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--stroke);
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
#askPill.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.contact-card {
  width: min(640px, 60vw); border-radius: 28px; padding: 22px 24px 18px;
  pointer-events: auto;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  box-shadow: var(--highlight), 0 28px 80px rgba(50, 60, 75, 0.28);
  backdrop-filter: blur(48px) saturate(1.9); -webkit-backdrop-filter: blur(48px) saturate(1.9);
}
@media (max-width: 820px) {
  #contactModal { justify-content: center; background: rgba(232, 235, 240, 0.4); }
  .contact-card { width: min(560px, 94vw); }
}
.contact-card h3 { font-size: 18px; font-weight: 700; text-align: center; color: var(--text); }
.contact-card .hint { font-size: 12.5px; color: var(--text-dim); text-align: center; margin-top: 4px; }
.fields { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.field { display: flex; align-items: center; gap: 10px; }
.field label { flex: 0 0 88px; font-size: 13px; color: var(--text-dim); }
.field input {
  flex: 1; font-family: inherit; font-size: 17px; color: var(--text);
  background: rgba(255, 255, 255, 0.78); border: 1px solid var(--stroke);
  border-radius: 12px; padding: 12px 14px; outline: none; caret-color: var(--blue);
}
.field input.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18); }
.field input.invalid { border-color: rgba(255, 59, 48, 0.55); }
.field .opt { font-size: 10.5px; color: var(--text-dim); }
#vkb { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; direction: ltr; }
.vkb-row { display: flex; gap: 7px; justify-content: center; }
/* Keys stretch to fill the row evenly — big kiosk-friendly touch targets. */
.vkb-row button {
  font-family: inherit; font-size: 19px; font-weight: 500; color: var(--text);
  background: rgba(255, 255, 255, 0.88); border: 1px solid var(--stroke);
  border-radius: 12px; flex: 1 1 0; min-width: 0; height: 58px; padding: 0 4px; cursor: pointer;
  box-shadow: 0 1px 1px rgba(50, 60, 75, 0.12);
  transition: transform 0.08s ease;
}
.vkb-row button:active { background: #cfd6df; transform: scale(0.94); }
.vkb-row button.wide { flex: 2.4 1 0; font-size: 14.5px; }
.vkb-row button.space { flex: 3 1 0; font-size: 15px; color: var(--text-dim); }
#vkb.numpad .vkb-row button { height: 64px; font-size: 23px; }
.contact-actions { display: flex; gap: 10px; margin-top: 16px; }
.contact-actions button {
  flex: 1; font-family: inherit; font-size: 16px; font-weight: 600;
  border-radius: 999px; padding: 14px 0; cursor: pointer; border: none;
}
#confirmLead { background: var(--blue); color: #fff; }
#confirmLead:disabled { opacity: 0.35; cursor: default; }
#cancelLead { background: rgba(118, 118, 128, 0.16); color: var(--text); border: 1px solid var(--stroke); }

/* ---------- connecting / ended ---------- */
#connecting, #ended { flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 32px; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.08); border-top-color: var(--blue); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#connecting p, #ended h2 { font-size: 22px; font-weight: 600; color: var(--text); }
#ended p { color: var(--text-dim); font-size: 15px; }
#ended { cursor: pointer; }

/* ---------- portrait / vertical screens ---------- */
@media (orientation: portrait) {
  /* idle + lock: stack the two avatars top / bottom */
  .split { flex-direction: column; }
  .half + .half { border-inline-start: none; border-top: 1px solid rgba(255, 255, 255, 0.4); }
  .half .h-info { bottom: 3vh; }
  .half .h-info b { font-size: clamp(22px, 5.5vw, 34px); }
  .lang-pills { margin-top: 14px; }
  .lang-pills button { padding: 12px 28px; font-size: clamp(14px, 3.4vw, 17px); }
  /* dead-center would sit exactly on the seam between the two stacked videos —
     keep the header at the top on portrait screens */
  #idle .idle-head { justify-content: flex-start; padding: 4vh 16px 0; gap: 14px; }
  #idle .logo-row { gap: 16px; }
  #idle .logo-row .bha { height: 32px; }
  #idle .logo-row .adihex { height: 30px; }
  #idle .logo-row .logo-div { display: block; height: 28px; }
  #idle h1 { font-size: clamp(20px, 5vw, 32px); }
  #idle .h1-en { font-size: clamp(12px, 3vw, 16px); }

  /* live: cards go back to a bottom sheet (a side drawer is too wide here) */
  #carPanel {
    top: auto; bottom: 0; left: 0; right: 0; inset-inline-end: 0;
    width: auto; max-height: 44vh;
    padding: 0 14px 14px;
    transform: translateY(115%);
  }
  #live[dir="rtl"] #carPanel { transform: translateY(115%); }
  #carPanel.open, #live[dir="rtl"] #carPanel.open { transform: translateY(0); }
  #carTrack { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 4px 2px 6px; }
  .car-card { flex: 0 0 280px; width: 280px; scroll-snap-align: start; }
  #endBtn { bottom: 18px; }
  #listenPill { top: 80px; }
  #selfView { bottom: 80px; width: 230px; }
  #transcript { bottom: 78px; max-width: 88vw; }
  #faqPills { bottom: 18px; max-width: 70vw; }
  #thinking { bottom: 22px; }
}