/* ============================================================
   VANDERBOT — phone.css · hero WhatsApp demo (Agent B)
   Generic dark messenger (neutral slate chat / twilight outgoing /
   slate incoming) sitting inside the page's frame.
   Every height derives from --phone-vh, a custom property set
   from window.innerHeight in phone.js — NEVER raw vh, so the
   mobile URL-bar resize can't judder the device frame.
   ============================================================ */

#phone{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}

/* visually hidden (a11y summary + per-bubble speaker prefixes) */
#phone .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------------- device frame ---------------- */
.phone-frame{
  position:relative;
  height:min(600px, calc(var(--phone-vh, 760px) * .70));
  aspect-ratio:9 / 19.5;
  max-width:100%;
  background:#080a0e;
  border-radius:46px;
  border:1px solid rgba(205,163,73,.30);            /* gold hairline ring — ties to the page */
  box-shadow:
    0 0 0 1px rgba(8,10,14,.92),
    0 30px 80px rgba(0,0,0,.55),
    0 4px 18px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(244,240,230,.045);
}
.phone-notch{position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:86px;height:8px;border-radius:5px;background:#05070a;z-index:3;
  box-shadow:inset 0 0 2px rgba(255,255,255,.07)}

/* ---------------- WhatsApp shell ---------------- */
.wa{position:absolute;inset:9px;display:flex;flex-direction:column;
  background:#141A21;border-radius:38px;overflow:hidden}

.wa-head{display:flex;align-items:center;gap:10px;flex:none;
  padding:34px 13px 11px;background:#1F2832;
  border-bottom:1px solid rgba(255,255,255,.045)}
.wa-glyph{display:inline-flex;width:21px;height:21px;color:#aebac1;opacity:.78;flex:none}
.wa-glyph svg{width:100%;height:100%}
.wa-back{margin-right:-3px}
.wa-avatar{width:37px;height:37px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif,Georgia,serif);font-size:19px;line-height:1;color:#141A21;
  background:radial-gradient(120% 120% at 30% 25%, var(--goldb,#E7C879), var(--gold,#CDA349) 55%, var(--golddeep,#8A6E37));
  box-shadow:0 0 0 2px rgba(205,163,73,.55), 0 0 14px rgba(205,163,73,.22)}
.wa-id{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.wa-name{font-family:var(--sans,system-ui,sans-serif);font-weight:600;font-size:15.5px;
  color:#e9edef;letter-spacing:.01em}
.wa-status{font-family:var(--sans,system-ui,sans-serif);font-size:12px;color:#8696a0}
.wa-acts{display:flex;gap:15px;margin-left:auto;padding-right:2px}

/* ---------------- chat ---------------- */
.wa-chat{position:relative;flex:1;overflow:hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(205,163,73,.05), transparent 42%),
    radial-gradient(circle at 84% 82%, rgba(205,163,73,.04), transparent 40%),
    radial-gradient(rgba(244,240,230,.025) 1px, transparent 1.5px) 0 0/22px 22px,
    #141A21}
.wa-thread{position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:7px;padding:14px 11px;
  transition:transform .55s var(--ease,cubic-bezier(.22,.61,.2,1))}

/* day + encryption chips */
.wa-chip{align-self:center;font-family:var(--sans,system-ui,sans-serif);font-size:10.5px;
  color:#8696a0;background:#1B232C;border-radius:8px;padding:5px 10px;
  letter-spacing:.04em;box-shadow:0 1px 1px rgba(0,0,0,.3);
  opacity:0;transition:opacity .4s ease;max-width:88%;text-align:center}
.wa-chip.show{opacity:1}
.wa-day{text-transform:uppercase}
.wa-e2e{color:#d6b36a}

/* ---------------- bubbles ---------------- */
.wa-msg{display:flex;max-width:86%;
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .38s var(--ease,ease), transform .38s var(--ease,ease)}
.wa-msg.show{opacity:1;transform:none}
.wa-msg.in{align-self:flex-start}
.wa-msg.out{align-self:flex-end;justify-content:flex-end}

.wa-bubble{position:relative;border-radius:9px;padding:7px 9px 8px;
  font-family:var(--sans,system-ui,sans-serif);font-size:13.5px;line-height:1.45;
  color:#e9edef;box-shadow:0 1px 1px rgba(0,0,0,.28)}
.wa-msg.in  .wa-bubble{background:#1F2832;border-top-left-radius:2px}
.wa-msg.out .wa-bubble{background:#17517A;border-top-right-radius:2px}
.wa-msg.in  .wa-bubble::before{content:"";position:absolute;top:0;left:-6px;
  border-top:7px solid #1F2832;border-left:7px solid transparent}
.wa-msg.out .wa-bubble::before{content:"";position:absolute;top:0;right:-6px;
  border-top:7px solid #17517A;border-right:7px solid transparent}

.wa-text strong{font-weight:600}
.wa-msg.in  .wa-text strong{color:var(--goldb,#E7C879)}   /* the bot's emphasis carries the gold */
.wa-msg.out .wa-text strong{color:#fff}

/* timestamp + read ticks (bottom-right, WhatsApp style) */
.wa-meta{float:right;display:inline-flex;align-items:center;gap:3px;
  margin:10px -2px -4px 10px;font-family:var(--sans,system-ui,sans-serif);
  font-size:10.5px;color:#8696a0;white-space:nowrap;transform:translateY(3px)}
.wa-msg.out .wa-meta{color:rgba(233,237,239,.55)}
.wa-ticks{width:15px;height:10px;color:#9FB6C6}            /* read = WhatsApp blue */

/* ---------------- typing indicator ---------------- */
.wa-typing{display:none}
.wa-typing.on{display:flex;opacity:1;transform:none}
.wa-typing .wa-bubble{display:flex;gap:4px;align-items:center;padding:12px 13px;min-width:48px}
.wa-typing i{width:7px;height:7px;border-radius:50%;background:#8696a0;opacity:.4;
  animation:wa-tp 1.2s ease-in-out infinite}
.wa-typing i:nth-child(2){animation-delay:.15s}
.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes wa-tp{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}

/* ---------------- voice-note pill (decorative) ---------------- */
.wa-voice{display:flex;align-items:center;gap:8px;margin-top:8px;
  padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.05)}
.wa-voice>svg{width:14px;height:14px;color:#6FB7C9;flex:none}
.wa-wave{display:flex;align-items:center;gap:2px;height:16px}
.wa-wave i{width:2.5px;border-radius:2px;background:#8696a0}
.wa-wave i:nth-child(-n+9){background:#6FB7C9}             /* "played" head of the waveform */
.wa-dur{font-family:var(--mono,monospace);font-size:10px;color:#8696a0;letter-spacing:.04em}

/* ---------------- caption under the phone ---------------- */
.phone-caption{margin-top:18px;font-family:var(--mono,monospace);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#8C939C);
  text-align:center;max-width:360px;line-height:1.9}

/* ---------------- small screens ---------------- */
@media (max-width:760px){
  .phone-frame{height:min(470px, calc(var(--phone-vh, 700px) * .56));border-radius:36px}
  .wa{border-radius:29px}
  .phone-notch{top:14px;width:66px;height:7px}
  .wa-head{padding:26px 11px 9px}
  .wa-avatar{width:32px;height:32px;font-size:16px}
  .wa-bubble{font-size:12.5px}
  .phone-caption{margin-top:12px;font-size:10px;letter-spacing:.12em}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .wa-thread{transition:none}
  .wa-msg{transition:none;opacity:1;transform:none}      /* full exchange, immediately */
  .wa-chip{transition:none;opacity:1}
  .wa-typing{display:none!important}
}