/* ============================================================
   voice-picker.css — receptionist voice picker (public/js/voice-picker.js).
   Shared by the onboarding wizard (dashboard.html) and knowledge-form.html.
   Everything is scoped under .vp-root with vp- classes — no global styles.
   Colours come from the HOST page's tokens (dashboard: --accent/--panel/--text…
   in light + dark; knowledge form: --orange/--panel/--text, dark) with fallbacks.
   ============================================================ */
.vp-root{
  --vp-text:var(--text,#EAF2F9); --vp-body:var(--body,#A9BFD3); --vp-muted:var(--muted,#7A9BB5);
  --vp-accent:var(--accent,var(--orange,#F5A623));
  --vp-accent-soft:var(--accent-soft,var(--orange-soft,rgba(245,166,35,.12)));
  --vp-accent-line:var(--accent-line,var(--orange-line,rgba(245,166,35,.3)));
  --vp-accent-ink:var(--accent-ink,#1a1206);
  --vp-card:var(--raised,var(--panel,#0e2236)); --vp-well:var(--panel2,#081120);
  --vp-line:var(--line,rgba(255,255,255,.07));
  --vp-green:var(--green,#5DCAA5); --vp-green-soft:var(--green-soft,rgba(93,202,165,.12));
  --vp-amber:var(--amber,#F5C75D); --vp-red:var(--red,#FF6B5E);
  --vp-display:var(--display,'Sora',system-ui,sans-serif); --vp-font:var(--bodyf,'Inter',system-ui,sans-serif);
  --vp-mono:var(--mono,ui-monospace,monospace); --vp-r:var(--r,13px);
  --vp-avatar:96px;
  font-family:var(--vp-font); color:var(--vp-body); line-height:1.5;
}
.vp-root *,.vp-root *::before,.vp-root *::after{box-sizing:border-box}

/* ---- grid: 5 cards, wraps centred (the odd card never stretches alone) ---- */
.vp-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:13px; margin:0; padding:0; list-style:none}
.vp-card{position:relative; flex:1 1 148px; max-width:178px; min-width:0; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:6px; padding:18px 12px 13px; margin:0;
  border:1px solid var(--vp-line); border-radius:var(--vp-r); background:var(--vp-card);
  cursor:default; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  transition:border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease}
/* the card itself is not a control — only the avatar (play) and Choose react */
.vp-card.vp-is-selected{border-color:var(--vp-accent); box-shadow:0 0 0 1px var(--vp-accent), 0 10px 28px var(--vp-accent-soft)}
.vp-card.vp-is-candidate{border-color:var(--vp-accent); border-style:dashed; box-shadow:0 0 0 1px var(--vp-accent-line)}

/* ---- avatar = the play/pause button ---- */
.vp-avatar{position:relative; flex:none; width:var(--vp-avatar); height:var(--vp-avatar); margin:0; padding:0;
  border:0; border-radius:50%; background:var(--vp-well); color:inherit; font:inherit; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.28); -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.vp-avatar img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 30%;
  pointer-events:none; transition:filter .2s ease}
.vp-avatar:focus-visible{outline:2px solid var(--vp-accent); outline-offset:4px}
.vp-avatar::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--vp-accent);
  opacity:0; pointer-events:none}
.vp-playing .vp-avatar::after{animation:vp-pulse 1.5s ease-out infinite}
@keyframes vp-pulse{0%{transform:scale(.97); opacity:.85} 100%{transform:scale(1.16); opacity:0}}

.vp-play{position:absolute; right:-2px; bottom:-2px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--vp-accent); color:var(--vp-accent-ink);
  border:2px solid var(--vp-card); box-shadow:0 4px 12px rgba(0,0,0,.3); pointer-events:none}
.vp-play svg{width:14px; height:14px; display:block}
.vp-play .vp-i-pause, .vp-active .vp-play .vp-i-play{display:none}
.vp-active .vp-play .vp-i-pause{display:block}
.vp-spin{display:none; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent;
  animation:vp-rot .7s linear infinite}
.vp-loading .vp-play svg{display:none !important}
.vp-loading .vp-spin{display:block}
@keyframes vp-rot{to{transform:rotate(360deg)}}

/* ---- sound-wave bars under the avatar (space reserved → no layout jump) ---- */
.vp-bars{display:flex; align-items:flex-end; justify-content:center; gap:3px; height:16px; margin-top:4px;
  opacity:0; transition:opacity .2s ease}
.vp-bars i{display:block; width:3px; height:100%; border-radius:2px; background:var(--vp-accent);
  transform:scaleY(.25); transform-origin:50% 100%}
.vp-playing .vp-bars{opacity:1}
.vp-playing .vp-bars i{animation:vp-bar .9s ease-in-out infinite}
.vp-playing .vp-bars i:nth-child(2){animation-delay:-.55s}
.vp-playing .vp-bars i:nth-child(3){animation-delay:-.25s}
.vp-playing .vp-bars i:nth-child(4){animation-delay:-.7s}
.vp-playing .vp-bars i:nth-child(5){animation-delay:-.4s}
@keyframes vp-bar{0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)}}

/* ---- text ---- */
.vp-name{margin:2px 0 0; font-family:var(--vp-display); font-size:18px; font-weight:700; line-height:1.2;
  letter-spacing:-.02em; color:var(--vp-text)}
.vp-tag{display:inline-block; padding:2px 8px; border:1px solid var(--vp-line); border-radius:999px;
  font-family:var(--vp-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--vp-muted)}
.vp-blurb{margin:0; font-size:13px; line-height:1.4; color:var(--vp-body); min-height:2.8em}
.vp-choose{margin-top:auto; width:100%; min-height:38px; padding:6px 10px; border:1px solid var(--vp-line);
  border-radius:999px; background:transparent; color:var(--vp-text); font:600 13px/1.2 var(--vp-font);
  cursor:pointer; touch-action:manipulation; transition:background .2s ease, border-color .2s ease, color .2s ease}
.vp-choose:hover{border-color:var(--vp-accent-line)}
.vp-choose:focus-visible{outline:2px solid var(--vp-accent); outline-offset:2px}
.vp-is-selected .vp-choose, .vp-is-candidate .vp-choose{background:var(--vp-accent); border-color:var(--vp-accent); color:var(--vp-accent-ink)}
.vp-choose[disabled]{cursor:default}

/* ---- corner marks: ✓ selected, 🔒 locked, Current / Pending badges ---- */
.vp-check, .vp-lock{position:absolute; top:9px; right:9px; width:22px; height:22px; border-radius:50%;
  display:none; align-items:center; justify-content:center}
.vp-check{background:var(--vp-accent); color:var(--vp-accent-ink)}
.vp-check svg, .vp-lock svg{width:12px; height:12px; display:block}
.vp-is-selected .vp-check{display:flex}
.vp-lock{color:var(--vp-muted); background:var(--vp-well); border:1px solid var(--vp-line)}
.vp-is-locked .vp-lock{display:flex}
.vp-is-candidate .vp-lock{display:none}
/* Badges live in their own centred row ABOVE the avatar (height always reserved, so cards
   never jump) — clear of the avatar and of the ✓ / 🔒 corner marks. */
.vp-badges{display:flex; align-items:center; justify-content:center; gap:5px; height:20px; margin:-9px 0 5px;
  max-width:calc(100% - 52px)}
.vp-badge{padding:2px 8px; border-radius:999px; font-family:var(--vp-mono); white-space:nowrap;
  font-size:9.5px; font-weight:600; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; display:none}
.vp-badge-current{background:var(--vp-green-soft); color:var(--vp-green); border:1px solid var(--vp-green)}
.vp-badge-pending{background:var(--vp-accent-soft); color:var(--vp-amber); border:1px solid var(--vp-accent-line)}
.vp-badge-default{background:transparent; color:var(--vp-muted); border:1px solid var(--vp-line)}
.vp-is-current .vp-badge-current, .vp-is-pending .vp-badge-pending, .vp-is-default .vp-badge-default{display:inline-block}

/* locked cards: dimmed, but the avatar stays tappable to listen */
.vp-is-locked:not(.vp-is-candidate) .vp-name, .vp-is-locked:not(.vp-is-candidate) .vp-tag,
.vp-is-locked:not(.vp-is-candidate) .vp-blurb, .vp-is-locked:not(.vp-is-candidate) .vp-choose{opacity:.62}
.vp-is-locked:not(.vp-is-candidate) .vp-avatar img{filter:saturate(.7)}

/* ---- action / status area ---- */
.vp-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 13px; margin-top:18px; text-align:center}
.vp-actions:empty{display:none}
.vp-msg{margin:0; flex:1 1 100%; font-size:14px; color:var(--vp-body)}
.vp-msg strong{color:var(--vp-text)}
.vp-msg.vp-ok{color:var(--vp-text)}
.vp-msg.vp-err{color:var(--vp-red)}
.vp-btn{min-height:40px; padding:9px 18px; border-radius:999px; border:1px solid var(--vp-accent); background:var(--vp-accent);
  color:var(--vp-accent-ink); font:700 14px/1.2 var(--vp-font); cursor:pointer; touch-action:manipulation}
.vp-btn[disabled]{opacity:.45; cursor:not-allowed}
.vp-btn-ghost{background:transparent; color:var(--vp-text); border-color:var(--vp-line)}
.vp-btn:focus-visible, .vp-link:focus-visible{outline:2px solid var(--vp-accent); outline-offset:2px}
.vp-link{padding:4px 2px; border:0; background:none; color:var(--vp-muted); font:600 13px/1.2 var(--vp-font);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.vp-link:hover{color:var(--vp-text)}
.vp-status{min-height:1.4em; margin:12px 0 0; text-align:center; font-size:13px; color:var(--vp-muted)}
.vp-status.vp-ok{color:var(--vp-green)}
.vp-status.vp-err{color:var(--vp-red)}
.vp-inline-spin{display:inline-block; width:14px; height:14px; margin-right:7px; vertical-align:-2px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:vp-rot .7s linear infinite}
.vp-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---- "choose carefully" warning (nothing saved yet) ---- */
.vp-warn{margin:0 0 14px; padding:9px 13px; border-radius:var(--vp-r); border:1px solid var(--vp-accent-line);
  background:var(--vp-accent-soft); color:var(--vp-text); font-size:13.5px; line-height:1.45; text-align:center}

/* ---- first-save confirmation dialog (appended to <body>, carries .vp-root tokens) ---- */
.vp-dialog-backdrop{position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(3,8,15,.62)}
.vp-dialog{width:100%; max-width:400px; padding:22px 20px 18px; border-radius:16px; border:1px solid var(--vp-line);
  background:var(--vp-card); box-shadow:0 24px 60px rgba(0,0,0,.45); text-align:center}
.vp-dialog-title{margin:0 0 8px; font-family:var(--vp-display); font-size:18px; font-weight:700; line-height:1.3; color:var(--vp-text)}
.vp-dialog-body{margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--vp-body)}
.vp-dialog-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.vp-dialog-actions .vp-btn{flex:1 1 140px}

/* ---- phones: two per row, 80px avatars ---- */
@media (max-width:420px){
  .vp-root{--vp-avatar:80px}
  .vp-grid{gap:10px}
  .vp-card{flex:1 1 calc(50% - 5px); max-width:calc(50% - 5px); padding:15px 8px 11px}
  .vp-name{font-size:16px}
  .vp-blurb{font-size:12.5px}
  .vp-play{width:28px; height:28px}
}

@media (prefers-reduced-motion:reduce){
  .vp-card, .vp-choose, .vp-bars, .vp-avatar img{transition:none}
  .vp-playing .vp-avatar::after{animation:none; opacity:.7; transform:none}
  .vp-playing .vp-bars i{animation:none}
  .vp-playing .vp-bars i:nth-child(1){transform:scaleY(.45)}
  .vp-playing .vp-bars i:nth-child(2){transform:scaleY(.8)}
  .vp-playing .vp-bars i:nth-child(3){transform:scaleY(1)}
  .vp-playing .vp-bars i:nth-child(4){transform:scaleY(.65)}
  .vp-playing .vp-bars i:nth-child(5){transform:scaleY(.4)}
  .vp-spin, .vp-inline-spin{animation-duration:1.6s}
}