.zlv-hw{--hw-radius:1.625rem;--hw-gap:1rem;--hw-ink:#222225;position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:32.5rem;height:23.75rem;margin-inline:auto;padding:1.5rem;overflow:hidden;border-radius:var(--hw-radius);background:radial-gradient(circle at 80% 20%,#0190f0 0%,#0044d9 42%,#00206a 95%);box-shadow:0 24px 50px -12px rgba(0,32,106,.45)}
.zlv-hw__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.15),transparent 70%)}
.zlv-hw__stream{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 2.75rem);mask-image:linear-gradient(to bottom,transparent 0,#000 2.75rem)}
.zlv-hw__track{flex-shrink:0;display:flex;flex-direction:column;gap:var(--hw-gap)}
.zlv-hw__bubble{display:flex;align-items:center;max-width:88%;padding:.875rem 1.125rem;border-radius:1.25rem;box-shadow:0 10px 25px rgba(0,0,0,.12);opacity:0;transition:opacity .35s ease .1s}
.zlv-hw__bubble.is-in{opacity:1}
.zlv-hw__bubble--user{align-self:flex-start;gap:.875rem;background:rgba(255,255,255,.96);color:var(--hw-ink)}
.zlv-hw__bubble--ai{align-self:flex-end;background:linear-gradient(135deg,#0a4fcf,#0a2f9a);border:1px solid rgba(255,255,255,.28);color:#fff}
.zlv-hw__avatar{flex-shrink:0;width:2.375rem;height:2.375rem;border-radius:50%;overflow:hidden}
.zlv-hw__avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;max-width:none}
.zlv-hw__text{font-size:.875rem;line-height:1.45;font-weight:500}
.zlv-hw__msg{display:grid}
.zlv-hw__full,.zlv-hw__live{grid-area:1/1}
.zlv-hw__full{visibility:hidden}
.zlv-hw__live.is-typing::after{content:"|";margin-left:1px;font-weight:300;animation:zlv-hw-blink .9s infinite}
.zlv-hw__bar{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.375rem;margin-top:var(--hw-gap);padding:.5rem .625rem .5rem 1.375rem;border-radius:1.25rem;background:rgba(255,255,255,.96);box-shadow:0 10px 25px rgba(0,0,0,.08)}
.zlv-hw__ph{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:500;color:#6b6b73}
.zlv-hw .zlv-hw__icon{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:.4375rem;box-shadow:none;max-width:none}
.zlv-hw__brand{appearance:none;border:0;padding:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:linear-gradient(135deg,#00b4ff,#0044d9);box-shadow:0 4px 12px rgba(0,68,217,.35)}
.zlv-hw__brand:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(0,68,217,.5)}
.zlv-hw__brand:focus-visible{outline:2px solid #0044d9;outline-offset:3px}
.zlv-hw .zlv-hw__face{display:block;box-sizing:border-box;width:100%;height:100%;border:2px solid #fff;border-radius:50%;object-fit:cover;box-shadow:none;max-width:none}
.zlv-hw__mic{position:absolute;bottom:-2px;left:-2px;box-sizing:content-box;width:1.0625rem;height:1.0625rem;padding:3px;border:2px solid #fff;border-radius:50%;background:#00206a;color:#fff}
/* Assistant avatar sits on Zaleeka's replies; the caller gets a neutral person icon. */
.zlv-hw__bubble--ai{gap:.875rem}
.zlv-hw__avatar--caller{display:flex;align-items:center;justify-content:center;background:#dfe6f3;color:#5b6b8c}
.zlv-hw__avatar--caller svg{width:60%;height:60%}
/* Sequenced intro and outro: phone, then chat, then headline. Hidden until the script sets data-stage. */
.zlv-hw__scene{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:1.5rem;text-align:center;color:#fff;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
.zlv-hw[data-stage=phone] .zlv-hw__scene--phone,.zlv-hw[data-stage=cta] .zlv-hw__scene--cta{opacity:1;visibility:visible;transition:opacity .45s ease}
.is-sequenced .zlv-hw__stream,.is-sequenced .zlv-hw__bar{transition:opacity .45s ease}
.zlv-hw[data-stage=phone] .zlv-hw__stream,.zlv-hw[data-stage=phone] .zlv-hw__bar,.zlv-hw[data-stage=cta] .zlv-hw__stream,.zlv-hw[data-stage=cta] .zlv-hw__bar{opacity:0}
.zlv-hw__phone{position:relative;width:10.25rem;height:17.25rem;padding:.4rem;border-radius:2rem;background:linear-gradient(160deg,#2a2f3d,#0b0e17);box-shadow:0 0 0 2px #4a5163,0 22px 40px rgba(0,16,60,.55);animation:zlv-hw-buzz 1.1s ease-in-out infinite}
.zlv-hw__notch{position:absolute;top:.6rem;left:50%;z-index:1;width:3.1rem;height:.85rem;margin-left:-1.55rem;border-radius:1rem;background:#000}
.zlv-hw__screen{display:flex;flex-direction:column;align-items:center;height:100%;box-sizing:border-box;padding:1.9rem .75rem .9rem;border-radius:1.65rem;background:radial-gradient(circle at 50% 0,#27406f 0%,#0c1a3d 60%,#060d22 100%);overflow:hidden}
.zlv-hw__clock{margin:0;font-size:1.5rem;font-weight:300;letter-spacing:.02em;opacity:.9}
.zlv-hw__caller{position:relative;display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-top:.9rem;border-radius:50%;background:#dfe6f3;color:#5b6b8c}
.zlv-hw__caller svg{width:62%;height:62%}
.zlv-hw__caller::before,.zlv-hw__caller::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:zlv-hw-pulse 1.4s ease-out infinite}
.zlv-hw__caller::after{animation-delay:.7s}
.zlv-hw__callee{margin:.15rem 0 0;font-size:.75rem;opacity:.7}
.zlv-hw__actions{display:flex;justify-content:space-between;width:100%;margin-top:auto;padding-inline:.35rem}
.zlv-hw__btn{display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:50%;color:#fff}
.zlv-hw__btn svg{width:1.3rem;height:1.3rem}
.zlv-hw__btn--decline{background:#e5484d}
.zlv-hw__btn--decline svg{transform:rotate(135deg)}
.zlv-hw__btn--accept{background:#12a150;animation:zlv-hw-nudge .7s ease-in-out infinite}
.zlv-hw.is-answered .zlv-hw__phone,.zlv-hw.is-answered .zlv-hw__caller::before,.zlv-hw.is-answered .zlv-hw__caller::after,.zlv-hw.is-answered .zlv-hw__btn--accept{animation:none}
.zlv-hw.is-answered .zlv-hw__btn--decline{opacity:.35}
.zlv-hw__callstate{margin:.7rem 0 0;white-space:nowrap;font-size:.875rem;font-weight:600;letter-spacing:.01em}
.zlv-hw__headline{margin:0;font-size:clamp(2.25rem,7vw,3.5rem);line-height:1.08;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.zlv-hw__word{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.25em)}
.zlv-hw__word--accent{color:#7fe0ff}
.zlv-hw[data-stage=cta] .zlv-hw__word{opacity:1;filter:blur(0);transform:none;transition:opacity .7s ease,filter .7s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(.25s + var(--i) * .3s)}
@keyframes zlv-hw-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes zlv-hw-buzz{0%,100%{transform:translateX(0)}10%,30%,50%{transform:translateX(-3px) rotate(-1deg)}20%,40%,60%{transform:translateX(3px) rotate(1deg)}70%{transform:translateX(0)}}
@keyframes zlv-hw-nudge{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes zlv-hw-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(8deg)}}
@keyframes zlv-hw-blink{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.zlv-hw__live.is-typing::after{animation:none}.zlv-hw__bubble{transition:none}}
