/* Stage 7C — Public Voice AI · Final polished UI
 * Hybrid theme: Light = Soğuk İnci · Dark = Gece Kadifesi
 * No in-page theme switch. Respects system setting + body.brm-panel-dark + html[data-theme="dark"].
 */

.bva-page {
  --bva-photo-size: 168px;
  --bva-bg: radial-gradient(160% 95% at 50% 0%, #ffffff 0%, #f4f7fa 48%, #e7edf4 100%);
  --bva-text: #16233a;
  --bva-text-dim: #6b7686;
  --bva-muted: #8a97a8;
  --bva-card: #ffffff;
  --bva-card-soft: #f9fbfd;
  --bva-stroke: #e6eaf0;
  --bva-stroke-strong: #d6dde8;
  --bva-accent: #234b78;
  --bva-accent-hover: #1d3f68;
  --bva-sec-bg: #ffffff;
  --bva-sec-border: #d6dde8;
  --bva-sec-text: #234b78;
  --bva-shadow: 0 18px 48px rgba(31, 44, 71, 0.10);
  --bva-photo-ring: rgba(35, 75, 120, 0.16);
  --bva-hint: #8e9aad;
  --bva-overlay-bg: rgba(22, 30, 46, 0.42);
  --bva-sheet-bg: #ffffff;
  --bva-cta-from: #234b78;
  --bva-cta-to: #2f5e94;
  --bva-cta-shadow: 0 14px 28px rgba(35, 75, 120, 0.22);
  --bva-success: #18794e;
  --bva-success-soft: #e9f6ef;
  --bva-ring: #234b78;
  --bva-ring-check: #b7791f;
  --bva-ring-speak: #d96a5a;
  --bva-ring-speak-glow: rgba(217, 106, 90, 0.35);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(26px, 5.5vh, 52px);
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 6vh, 56px) 20px clamp(32px, 8vh, 64px);
  background: var(--bva-bg);
  color: var(--bva-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  isolation: isolate;
}

/* Dark theme follows canonical site toggle (body.brm-panel-dark). No prefers-color-scheme. */
body.brm-panel-dark .bva-page,
html[data-theme="dark"] .bva-page,
:root[data-theme="dark"] .bva-page,
body.jnews-dark-mode .bva-page {
  --bva-bg: radial-gradient(150% 85% at 50% 0%, #3b273e 0%, #221724 48%, #121018 100%);
  --bva-text: #fbf7f3;
  --bva-text-dim: #d3a99d;
  --bva-muted: #b9a0ad;
  --bva-card: #20131f;
  --bva-card-soft: #261a26;
  --bva-stroke: rgba(255,255,255,0.08);
  --bva-stroke-strong: rgba(255,255,255,0.13);
  --bva-accent: #89a2ff;
  --bva-accent-hover: #a8bbff;
  --bva-sec-bg: rgba(255,255,255,0.06);
  --bva-sec-border: rgba(255,255,255,0.10);
  --bva-sec-text: #fbf7f3;
  --bva-shadow: 0 18px 48px rgba(0,0,0,0.42);
  --bva-photo-ring: rgba(255,255,255,0.10);
  --bva-hint: rgba(251,247,243,0.56);
  --bva-overlay-bg: rgba(8, 6, 12, 0.62);
  --bva-sheet-bg: #20131f;
  --bva-cta-from: #d87360;
  --bva-cta-to: #e48a72;
  --bva-cta-shadow: 0 14px 28px rgba(216,115,96,0.24);
  --bva-ring: #89a2ff;
  --bva-ring-check: #f2c46d;
  --bva-ring-speak: #e88c74;
  --bva-ring-speak-glow: rgba(232, 140, 116, 0.40);
}

.bva-page *, .bva-page *::before, .bva-page *::after { box-sizing: border-box; }

/* Stage */
.bva-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  margin-top: clamp(6px, 3vh, 28px);
}
.bva-photo {
  position: relative;
  width: var(--bva-photo-size);
  height: var(--bva-photo-size);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #d4e0ef, #ffffff);
  box-shadow: 0 0 0 1px var(--bva-stroke) inset, 0 22px 52px rgba(31,44,71,0.14), 0 0 64px var(--bva-photo-ring);
  flex-shrink: 0;
  z-index: 1;
}
body.brm-panel-dark .bva-photo,
html[data-theme="dark"] .bva-photo {
  background: linear-gradient(145deg, #503650, #271d2b);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07) inset, 0 22px 52px rgba(0,0,0,0.44), 0 0 64px rgba(232,140,120,0.16);
}
.bva-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; position:relative; z-index:2; }
.bva-photo--fallback { display:flex; align-items:center; justify-content:center; }
.bva-photo-initial { font-size: calc(var(--bva-photo-size) * 0.42); font-weight:600; letter-spacing:-0.02em; color: var(--bva-accent); line-height:1; user-select:none; position:relative; z-index:2; }
body.brm-panel-dark .bva-photo-initial { color:#f0c6b8; }
.bva-photo-halo { position:absolute; inset:-8%; border-radius:50%; pointer-events:none; background: radial-gradient(50% 50% at 50% 50%, rgba(35,75,120,0.14) 0%, transparent 70%); z-index:-1; filter:blur(8px); }
body.brm-panel-dark .bva-photo-halo { background: radial-gradient(50% 50% at 50% 50%, rgba(232,140,120,0.16) 0%, transparent 70%); }

.bva-name { margin:6px 0 0; font-size: clamp(22px, 5.4vw, 28px); font-weight:680; letter-spacing:-0.015em; line-height:1.2; color:var(--bva-text); word-break:break-word; max-width:100%; }
.bva-subtitle { margin:0; font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--bva-text-dim); line-height:1.4; }
.bva-lead { margin:6px 0 0; font-size:14px; line-height:1.55; color: var(--bva-text-dim); max-width: 320px; }

/* Action */
.bva-action { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:420px; }
.bva-call-block { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.bva-meta-block { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }

/* Live status: premium orbital halo around the circular profile image.
   Surface is helper-free: the state readout sits naturally beneath the orbit
   and its accent color breathes with the phase so the animation and the label
   read as one object. */
.bva-state {
  margin:0;
  min-height:22px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.01em;
  color: var(--bva-muted);
  text-align:center;
  line-height:1.4;
  max-width:320px;
  transition: color .4s ease;
}
.bva-state:empty{ display:none; min-height:0; margin:0; padding:0; }
.bva-state:not(:empty){ display:block; }
.bva-page.bva-phase--listening .bva-state{ color: var(--bva-ring); }
.bva-page.bva-phase--checking .bva-state{ color: var(--bva-ring-check); }
.bva-page.bva-phase--speaking .bva-state{ color: var(--bva-ring-speak); }

/* Orbit wrapper — same footprint as the photo (no layout shift).
   The circular salon profile stays the visual center. Animation is a bold,
   modern "water ripple" of thick, glowing concentric rings that expand and
   fade outward from the photo edge, with a persistent pulsing accent ring
   hugging the portrait so the active state is unmistakable.
   No waveform / no equalizer bars. */
.bva-orbit {
  position: relative;
  width: var(--bva-photo-size);
  height: var(--bva-photo-size);
  flex-shrink: 0;
}
.bva-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, border-color .5s ease, box-shadow .5s ease,
              background .5s ease, border-width .5s ease;
  will-change: transform, opacity;
}
/* Persistent accent ring hugging the photo + two expanding ripple waves */
.bva-ring--pulse { inset:-3px; border:3px solid var(--bva-ring); box-shadow:0 0 12px var(--bva-ring), 0 0 34px var(--bva-ring); }
.bva-ring--pulse.bva-ring--p2 { inset:-3px; border-width:2px; box-shadow:0 0 10px var(--bva-ring); }
.bva-ring--orbit { inset:-3px; border:2px solid var(--bva-ring); }

/* ── LISTENING — persistent throb + calm ripples ── */
.bva-page.bva-phase--listening .bva-ring--pulse{ opacity:.95; animation: bva-throb 2.6s ease-in-out infinite; }
.bva-page.bva-phase--listening .bva-ring--p2{ opacity:.6; animation: bva-ripple 2.6s cubic-bezier(0.22,0.61,0.36,1) .6s infinite; }
.bva-page.bva-phase--listening .bva-ring--orbit{ opacity:.42; animation: bva-ripple 2.6s cubic-bezier(0.22,0.61,0.36,1) 1.5s infinite; }
.bva-page.bva-phase--listening .bva-photo-halo{ animation: bva-halo-breathe 2.6s ease-in-out infinite; }

/* ── CHECKING — throb + ripples + drifting glowing arc ── */
.bva-page.bva-phase--checking .bva-ring--pulse{
  opacity:.95; animation: bva-throb 1.8s ease-in-out infinite;
}
.bva-page.bva-phase--checking .bva-ring--p2{ opacity:.5; animation: bva-ripple 1.9s cubic-bezier(0.22,0.61,0.36,1) .4s infinite; }
.bva-page.bva-phase--checking .bva-ring--orbit{
  opacity:.95;
  border:0;
  background: conic-gradient(from 0deg,
      var(--bva-ring-check) 0deg,
      transparent 55deg,
      transparent 305deg,
      var(--bva-ring-check) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: bva-arc-spin 1.8s linear infinite;
  filter: drop-shadow(0 0 9px var(--bva-ring-check));
}
.bva-page.bva-phase--checking .bva-photo-halo{ animation: bva-halo-breathe 1.8s ease-in-out infinite; }

/* ── SPEAKING — fast, energetic ripples + glowing throb ── */
.bva-page.bva-phase--speaking .bva-ring--pulse{
  opacity:1; border-color:var(--bva-ring-speak);
  box-shadow:0 0 18px var(--bva-ring-speak-glow), 0 0 42px var(--bva-ring-speak-glow);
  animation: bva-throb-speak 1.15s ease-in-out infinite;
}
.bva-page.bva-phase--speaking .bva-ring--p2{
  opacity:.9; border-color:var(--bva-ring-speak);
  animation: bva-ripple 1.15s cubic-bezier(0.16,0.84,0.44,1) .28s infinite;
}
.bva-page.bva-phase--speaking .bva-ring--orbit{
  opacity:.7; border-color:var(--bva-ring-speak);
  animation: bva-ripple 1.15s cubic-bezier(0.16,0.84,0.44,1) .65s infinite;
}
.bva-page.bva-phase--speaking .bva-photo-halo{ animation: bva-halo-speak 1.15s ease-in-out infinite; }

/* Shared keyframes -- expansion outward = water ripple */
@keyframes bva-ripple{
  0%{ transform:scale(1); opacity:.9; }
  70%{ opacity:.28; }
  100%{ transform:scale(1.7); opacity:0; }
}
@keyframes bva-ripple-mobile{
  0%{ transform:scale(1); opacity:.9; }
  70%{ opacity:.28; }
  100%{ transform:scale(1.12); opacity:0; }
}
@keyframes bva-throb{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}
@keyframes bva-throb-speak{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.1); }
}
@keyframes bva-arc-spin{ to{ transform: rotate(360deg); } }
@keyframes bva-halo-breathe{
  0%,100%{ opacity:.5; transform:scale(.95); }
  50%{ opacity:.95; transform:scale(1.04); }
}
@keyframes bva-halo-speak{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.16); }
}

/* ── AI SPEAKING: fluid audio-reactive liquid ring ──
   A canvas paints a thin annulus (≈15–25px) just OUTSIDE the circular
   profile. The photo sits in front and masks/cuts out the centre, so only
   the outer ring is visible. Its outer edge deforms organically in real
   time with the AI audio amplitude + frequency. Silence = calm thin ring. */
.bva-ripple{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:var(--bva-photo-size,192px);
  height:var(--bva-photo-size,192px);
  pointer-events:none;
  opacity:0;
  transition: opacity .25s ease;
  z-index:0;
}
.bva-ripple--on{ opacity:1; }
/* Hide the CSS ripple rings while SPEAKING so the live liquid ring is the focus */
.bva-page.bva-phase--speaking .bva-ring{ opacity:0 !important; }

.bva-timer { width:100%; text-align:center; font-variant-numeric: tabular-nums; font-size:13px; color: var(--bva-muted); letter-spacing:0.04em; }
.bva-timer[hidden] { display:none !important; }
.bva-hint { margin:0; font-size:11px; color: var(--bva-hint); text-align:center; line-height:1.4; }

.bva-cta {
  -webkit-tap-highlight-color:transparent; appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  width:100%; min-height:58px; padding:0 24px; border-radius:999px;
  background: linear-gradient(135deg, var(--bva-cta-from) 0%, var(--bva-cta-to) 100%);
  color:#fff; font:inherit; font-size:15px; font-weight:700; letter-spacing:0.01em; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-shadow: var(--bva-cta-shadow), 0 2px 0 rgba(255,255,255,0.10) inset;
  transition: transform 120ms ease, filter 200ms ease; user-select:none;
}
.bva-cta:hover { transform:translateY(-1px); filter:brightness(1.04); }
.bva-cta:active { transform:translateY(0); filter:brightness(0.98); }
.bva-cta:disabled { cursor:not-allowed; opacity:0.55; box-shadow:none; }
.bva-cta-dot { width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.20); flex-shrink:0; }

.bva-secondary { display:flex; gap:10px; width:100%; margin-top:2px; }
.bva-sec {
  flex:1; appearance:none; -webkit-appearance:none; cursor:pointer;
  height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--bva-sec-border);
  background: var(--bva-sec-bg); color: var(--bva-sec-text); font:inherit; font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.bva-sec:hover { border-color: var(--bva-stroke-strong); transform:translateY(-1px); }
.bva-sec:active { transform:translateY(0); }

/* Mic */
.bva-mic {
  -webkit-tap-highlight-color:transparent; appearance:none; -webkit-appearance:none;
  border:1px solid var(--bva-stroke); background: var(--bva-card); color:var(--bva-text); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  font:inherit; font-size:13px; font-weight:600; line-height:1; transition: all 160ms ease;
}
.bva-mic[hidden]{display:none !important;}
.bva-mic:hover{ border-color:var(--bva-stroke-strong); }
.bva-mic:active{ transform:scale(0.97); }
.bva-mic-icon{
  width:22px; height:22px; flex-shrink:0; display:block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Z'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0h2a5 5 0 0 0 10 0h2Z'/%3E%3Crect x='11' y='18' width='2' height='3' rx='1'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Z'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0h2a5 5 0 0 0 10 0h2Z'/%3E%3Crect x='11' y='18' width='2' height='3' rx='1'/%3E%3C/svg%3E") center/22px 22px no-repeat;
}
.bva-mic.bva-mic--muted .bva-mic-icon{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9a3 3 0 0 1 3 3a3 3 0 0 0 3 3a3 3 0 0 1-3 3'/%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v3'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9a3 3 0 0 1 3 3a3 3 0 0 0 3 3a3 3 0 0 1-3 3'/%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v3'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.bva-mic.bva-mic--muted{ background:#fef2f2; border-color:#fca5a5; color:#dc2626; }
body.brm-panel-dark .bva-mic.bva-mic--muted{ background:rgba(220,80,80,0.14); border-color:rgba(220,80,80,0.42); color:#ffb3b3; }

/* Result modal — centered over the live call UI */
.bva-result-layer{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  box-sizing:border-box;
  pointer-events:auto;
}
.bva-result-layer[hidden]{ display:none !important; }
.bva-result-backdrop{
  position:absolute;
  inset:0;
  background: var(--bva-overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bva-page.bva-result-open{ overflow:hidden; }
.bva-result {
  position:relative;
  z-index:1;
  width:min(100%, 400px);
  max-height: min(86dvh, 640px);
  overflow:auto;
  padding:22px 20px 18px;
  border-radius:20px;
  background: var(--bva-card);
  border:1px solid var(--bva-stroke);
  box-shadow: 0 24px 64px rgba(22, 35, 58, 0.22);
  text-align:left;
  -webkit-overflow-scrolling:touch;
  animation: bva-result-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bva-result[hidden]{display:none !important;}
.bva-result-head { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:16px; text-align:center; }
.bva-result-icon {
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--bva-success-soft); color: var(--bva-success);
  font-weight:900; font-size:26px; line-height:1; flex-shrink:0;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bva-success-soft) 70%, transparent);
}
.bva-result-title { margin:0; font-size:18px; font-weight:730; letter-spacing:-0.02em; color: var(--bva-text); line-height:1.25; }
.bva-result-list { display:flex; flex-direction:column; gap:0; margin:0 0 16px; padding:0; list-style:none; border:1px solid var(--bva-stroke); border-radius:14px; overflow:hidden; background: var(--bva-card-soft); }
.bva-result-row { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; line-height:1.4; padding:11px 14px; border-bottom:1px solid var(--bva-stroke); }
.bva-result-row:last-child{ border-bottom:0; }
.bva-result-k { color: var(--bva-muted); font-weight:500; }
.bva-result-v { color: var(--bva-text); font-weight:600; text-align:right; word-break:break-word; }
.bva-result > .bva-cta{ margin-top:2px; min-height:50px; font-size:15px; text-decoration:none; }

.bva-result--fallback{ text-align:center; padding:24px 20px 18px; }
.bva-fallback-title{ margin:0; font-size:17px; font-weight:730; letter-spacing:-0.02em; color:var(--bva-text); line-height:1.35; }
.bva-fallback-lead{ margin:10px 0 0; font-size:14px; line-height:1.55; color:var(--bva-text-dim); }
.bva-fallback-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  margin-top:20px;
  width:100%;
}
.bva-fallback-actions .bva-cta,
.bva-fallback-actions .bva-sec{
  flex:1 1 0;
  width:auto;
  min-width:0;
  min-height:50px;
  height:50px;
  padding:0 14px;
  border-radius:999px;
  box-sizing:border-box;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14.5px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bva-fallback-actions .bva-cta{
  box-shadow: var(--bva-cta-shadow), 0 2px 0 rgba(255,255,255,0.10) inset;
}
.bva-fallback-actions .bva-sec{
  border:1px solid var(--bva-accent);
  background: var(--bva-sec-bg);
  color: var(--bva-sec-text);
}
.bva-persistent-fallback{ grid-column:1 / -1; margin:16px auto 0; padding:14px 16px 16px; border:1px solid var(--bva-stroke); border-radius:14px; background:var(--bva-card-soft); box-sizing:border-box; width:100%; text-align:center; }
.bva-persistent-fallback .bva-fallback-lead{ margin:0; }
.bva-fallback-phone{ display:flex; flex-direction:column; gap:3px; margin:12px 0 0; font-size:13px; line-height:1.4; color:var(--bva-muted); }
.bva-fallback-phone strong{ color:var(--bva-text); font-size:15px; font-weight:700; letter-spacing:.01em; }
@media (min-width: 480px){
  .bva-fallback-actions{ gap:12px; }
  .bva-fallback-actions .bva-cta,
  .bva-fallback-actions .bva-sec{ padding:0 16px; }
  .bva-result{ padding:26px 24px 20px; }
}
@media (max-width: 359px){
  .bva-fallback-actions{ flex-direction:column; }
  .bva-fallback-actions .bva-cta,
  .bva-fallback-actions .bva-sec{ width:100%; flex:1 1 auto; }
}
@keyframes bva-result-in{
  from{ opacity:0; transform:translateY(10px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .bva-result{ animation:none; }
}
.bva-page.bva-has-fallback .bva-action{ max-width:420px; }
.bva-result--fallback{ grid-area: fallback; }

/* Locked */
.bva-page--locked .bva-photo{ filter:grayscale(0.1) brightness(0.96); }
.bva-locked{ margin:8px 0 0; font-size:14px; color:var(--bva-muted); line-height:1.5; text-align:center; max-width:360px; }

/* Overlay + sheet */
.bva-overlay{ position:fixed; inset:0; background: var(--bva-overlay-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index:40; opacity:1; transition: opacity 180ms ease; }
.bva-overlay[hidden]{ display:none !important; }
.bva-sheet{
  position:fixed; z-index:41; background: var(--bva-sheet-bg); color: var(--bva-text);
  box-shadow: 0 -12px 48px rgba(0,0,0,0.18); display:flex; flex-direction:column; max-height: min(78dvh, 640px);
}
.bva-sheet[hidden]{ display:none !important; }
.bva-sheet-handle{ width:32px; height:3px; border-radius:3px; background: var(--bva-stroke-strong); margin:10px auto 0; }
.bva-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--bva-stroke); }
.bva-sheet-head h2{ margin:0; font-size:17px; font-weight:730; letter-spacing:-0.015em; color: var(--bva-text); line-height:1.2; }
.bva-sheet-close{ appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--bva-text); cursor:pointer; width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid transparent; line-height:0; font-size:0; }
.bva-sheet-close > span{ display:block; font-size:22px; line-height:1; font-weight:400; transform:translateY(-0.06em); }
.bva-sheet-close:hover{ background: var(--bva-card-soft); border-color: var(--bva-stroke); color: var(--bva-text); }
.bva-sheet-close:focus-visible{ outline:2px solid var(--bva-accent); outline-offset:2px; }
.bva-sheet-body{
  overflow:auto; padding:14px 18px 22px; display:flex; flex-direction:column; gap:10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bva-sheet-body::-webkit-scrollbar{ display:none; width:0; height:0; }

/* Mobile bottom sheet */
@media (max-width: 767px){
  .bva-sheet{ left:0; right:0; bottom:0; border-radius:20px 20px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); transform: translateY(0); transition: transform 220ms cubic-bezier(0.32,0.72,0,1); }
  .bva-sheet[hidden]{ transform: translateY(100%); display:flex !important; visibility:hidden; pointer-events:none; }
}
/* Desktop centered dialog — polished */
@media (min-width: 768px){
  .bva-sheet{
    left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%);
    width:min(560px, calc(100vw - 40px)); border-radius:18px; max-height: min(74vh, 620px);
    border:1px solid var(--bva-stroke); box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  }
  .bva-sheet[hidden]{ display:none !important; }
  .bva-sheet-handle{ display:none; }
  .bva-sheet-head{ padding:18px 20px 14px; }
  .bva-sheet-head h2{ font-size:19px; }
  .bva-sheet-body{ padding:16px 20px 24px; }
}

.bva-service-row, .bva-provider-row{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background: var(--bva-card-soft); border:1px solid var(--bva-stroke); }
.bva-service-info, .bva-provider-info{ flex:1; min-width:0; }
.bva-service-name, .bva-provider-name{ font-size:14px; font-weight:600; color:var(--bva-text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bva-service-meta, .bva-provider-role{ font-size:12.5px; color:var(--bva-muted); line-height:1.3; }
.bva-service-price{ font-size:13px; font-weight:700; color: var(--bva-text); flex-shrink:0; }
.bva-provider-avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-weight:700; font-size:13px; background: var(--bva-card-soft); border:1px solid var(--bva-stroke); color: var(--bva-accent); overflow:hidden; }
.bva-provider-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.bva-empty{ font-size:13.5px; color: var(--bva-muted); text-align:center; padding:18px 0; }

/* Extensibility hooks hidden in 7C unless used */
.bva-panel, .bva-sheet-legacy{ display:none !important; }

/* Active-call photo treatment (rings live in .bva-orbit above) */
.bva-page.bva-phase--ending .bva-photo{ filter:grayscale(0.3) brightness(0.95); }
.bva-page.bva-phase--ending .bva-ring{ opacity:0 !important; animation:none !important; }

/* Active call: keep the idle page composition. Only pair hangup + mute in the start-CTA slot. */
.bva-page.bva-phase--active .bva-call-block,
.bva-page.bva-phase--listening .bva-call-block,
.bva-page.bva-phase--checking .bva-call-block,
.bva-page.bva-phase--speaking .bva-call-block,
.bva-page.bva-phase--ending .bva-call-block{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  width:100%;
  gap:10px;
}
.bva-page.bva-phase--active .bva-call-block > .bva-state,
.bva-page.bva-phase--listening .bva-call-block > .bva-state,
.bva-page.bva-phase--checking .bva-call-block > .bva-state,
.bva-page.bva-phase--speaking .bva-call-block > .bva-state,
.bva-page.bva-phase--ending .bva-call-block > .bva-state,
.bva-page.bva-phase--active .bva-call-block > .bva-timer,
.bva-page.bva-phase--listening .bva-call-block > .bva-timer,
.bva-page.bva-phase--checking .bva-call-block > .bva-timer,
.bva-page.bva-phase--speaking .bva-call-block > .bva-timer,
.bva-page.bva-phase--ending .bva-call-block > .bva-timer{
  flex:1 1 100%;
}
.bva-page.bva-phase--active .bva-call-block > .bva-mic,
.bva-page.bva-phase--listening .bva-call-block > .bva-mic,
.bva-page.bva-phase--checking .bva-call-block > .bva-mic,
.bva-page.bva-phase--speaking .bva-call-block > .bva-mic,
.bva-page.bva-phase--ending .bva-call-block > .bva-mic,
.bva-page.bva-phase--active .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--listening .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--checking .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--speaking .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--ending .bva-call-block > [data-bva="start"]{
  flex:1 1 calc(50% - 6px);
  width:auto;
  min-width:0;
  min-height:58px;
  height:58px;
  border-radius:999px;
  justify-content:center;
}
.bva-page.bva-phase--active .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--listening .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--checking .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--speaking .bva-call-block > [data-bva="start"],
.bva-page.bva-phase--ending .bva-call-block > [data-bva="start"]{
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 10px 28px rgba(220,38,38,0.28);
}
.bva-page.bva-phase--idle .bva-secondary,
.bva-page.bva-phase--active .bva-secondary,
.bva-page.bva-phase--listening .bva-secondary,
.bva-page.bva-phase--checking .bva-secondary,
.bva-page.bva-phase--speaking .bva-secondary,
.bva-page.bva-phase--ending .bva-secondary{ display:flex; }
.bva-page.bva-phase--idle .bva-hint,
.bva-page.bva-phase--active .bva-hint,
.bva-page.bva-phase--listening .bva-hint,
.bva-page.bva-phase--checking .bva-hint,
.bva-page.bva-phase--speaking .bva-hint,
.bva-page.bva-phase--ending .bva-hint{ display:block; }
.bva-page.bva-phase--idle .bva-lead,
.bva-page.bva-phase--active .bva-lead,
.bva-page.bva-phase--listening .bva-lead,
.bva-page.bva-phase--checking .bva-lead,
.bva-page.bva-phase--speaking .bva-lead,
.bva-page.bva-phase--ending .bva-lead{ display:block; }

/* Responsive */
@media (min-width: 768px){
  .bva-page{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    --bva-photo-size: 148px;
    width:100%;
    max-width:none;
    margin:0;
    gap:12px;
    padding:18px 40px 20px;
  }
  .bva-stage{
    margin-top:0;
    max-width:560px;
    gap:8px;
  }
  .bva-lead{ max-width:480px; }
  .bva-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100%;
    max-width:560px;
  }
  .bva-page.bva-has-fallback .bva-action{ max-width:560px; }
  .bva-meta-block{ display:contents; }
  .bva-call-block{ order:0; width:100%; }
  .bva-page.bva-phase--idle .bva-secondary,
  .bva-page.bva-phase--active .bva-secondary,
  .bva-page.bva-phase--listening .bva-secondary,
  .bva-page.bva-phase--checking .bva-secondary,
  .bva-page.bva-phase--speaking .bva-secondary,
  .bva-page.bva-phase--ending .bva-secondary{
    order:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:100%;
    margin-top:0;
  }
  .bva-secondary .bva-sec{ height:52px; width:100%; }
  .bva-persistent-fallback{
    order:2;
    width:100%;
    max-width:none;
    margin-top:0;
  }
  .bva-persistent-fallback .bva-fallback-actions{
    flex-direction:row;
    align-items:stretch;
    gap:12px;
    margin-top:14px;
  }
  .bva-persistent-fallback .bva-fallback-actions > .bva-cta,
  .bva-persistent-fallback .bva-fallback-actions > .bva-sec{
    flex:1 1 0;
    width:auto;
    min-width:0;
    min-height:52px;
    height:52px;
    border-radius:999px;
    padding:0 16px;
    font-size:14.5px;
    font-weight:700;
    white-space:nowrap;
  }
  .bva-hint{
    order:3;
    text-align:center;
    max-width:560px;
    font-size:12.5px;
    line-height:1.45;
  }
}
@media (max-width: 767px){
  .bva-page.bva-phase--active .bva-state,
  .bva-page.bva-phase--listening .bva-state,
  .bva-page.bva-phase--checking .bva-state,
  .bva-page.bva-phase--speaking .bva-state{ min-height:22px; }
}
@media (min-width: 1024px){ .bva-page{ --bva-photo-size: 156px; } }
@media (min-width: 1366px){ .bva-page{ --bva-photo-size: 164px; } }
@media (min-width: 1920px){ .bva-page{ --bva-photo-size: 172px; } }

@media (prefers-reduced-motion: reduce){
  .bva-cta, .bva-sec, .bva-mic{ transition:none; }
  .bva-photo{ animation:none !important; }
  .bva-photo-halo{ animation:none !important; opacity:.4 !important; }
  .bva-ring{ animation:none !important; opacity:.35 !important; }
}

@supports (padding: max(0px)){
  .bva-page{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-top: max(clamp(28px, 6vh, 56px), env(safe-area-inset-top));
    padding-bottom: max(clamp(32px, 8vh, 64px), env(safe-area-inset-bottom));
  }
}
@media (min-width: 768px){
  .bva-page{
    padding-top:18px;
    padding-bottom:20px;
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }
}

@media (max-width:767px){
  .bva-page{ gap:10px; padding-top:max(clamp(12px, 2vh, 20px), env(safe-area-inset-top)); }
  .bva-stage{ margin-top:0; }
  .bva-subtitle{ display:none; }
  .bva-page.bva-phase--listening .bva-ring--p2,
  .bva-page.bva-phase--listening .bva-ring--orbit,
  .bva-page.bva-phase--checking .bva-ring--p2{
    animation: bva-ripple-mobile 2.6s cubic-bezier(0.22,0.61,0.36,1) infinite;
  }
  .bva-page.bva-phase--listening .bva-ring--pulse,
  .bva-page.bva-phase--listening .bva-ring--pulse.bva-ring--p2{
    box-shadow: 0 0 8px var(--bva-ring);
  }
  .bva-page.bva-phase--listening .bva-photo-halo,
  .bva-page.bva-phase--checking .bva-photo-halo,
  .bva-page.bva-phase--speaking .bva-photo-halo{
    animation:none;
    filter:none;
    opacity:.35;
  }
}