/* ============================================================
   VERT TECH — Atendimento premium "Ligação + WhatsApp IA"
   Vanilla, self-contained. Prefixo vtai-  ·  z-index 600+
   ============================================================ */
.vtai *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.vtai{
  --wa:#25d366; --wa-dark:#075e54; --wa-bubble:#dcf8c6;
  --blue:#4285f4; --teal:#12b5a5; --ink:#0a0a0c;
  --ios:-apple-system,"SF Pro Display","SF Pro Text","Figtree",system-ui,sans-serif;
}

/* ---------- FLOATING BUTTON (redondo, preto, com a logo) ---------- */
.vtai-fab{
  position:fixed; right:22px; bottom:22px; z-index:590;
  width:64px; height:64px; padding:0; border:none; cursor:pointer;
  border-radius:50%; background:#0a0a0c;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 34px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.22);
  animation:vtai-breath 3.6s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.vtai-fab::before{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.14); pointer-events:none;}
.vtai-fab img{width:30px; height:30px; object-fit:contain; display:block; position:relative; z-index:2;}
.vtai-fab:hover{transform:translateY(-2px) scale(1.06); box-shadow:0 18px 44px rgba(0,0,0,.4)}
.vtai-fab:active{transform:scale(.93)}
.vtai-fab .vtai-pulse{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 rgba(18,181,165,.5); animation:vtai-ringpulse 2.6s ease-out infinite;}
@keyframes vtai-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes vtai-ringpulse{0%{box-shadow:0 0 0 0 rgba(18,181,165,.45)}70%{box-shadow:0 0 0 15px rgba(18,181,165,0)}100%{box-shadow:0 0 0 0 rgba(18,181,165,0)}}
@media (max-width:600px){.vtai-fab{right:16px;bottom:16px;width:58px;height:58px}.vtai-fab img{width:27px;height:27px}}

/* ---------- CARTÃO DE CONSENTIMENTO (limpo, no nosso design) ---------- */
.vtai-consent{
  position:absolute; z-index:6; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.94); opacity:0; display:none;
  width:min(360px,90vw); background:#fff; border-radius:26px; padding:28px 24px 20px;
  text-align:center; box-shadow:0 34px 90px rgba(0,0,0,.45);
  transition:opacity .3s ease, transform .38s cubic-bezier(.22,1,.36,1);
}
.vtai-root.vtai-consenting .vtai-consent{display:block}
.vtai-root.vtai-consenting.vtai-show .vtai-consent{opacity:1; transform:translate(-50%,-50%) scale(1)}
.vtai-root.vtai-consenting .vtai-device{display:none}
.vtai-consent .cav-wrap{position:relative; width:82px; margin:0 auto 15px}
.vtai-consent .cav{width:82px; height:82px; border-radius:50%; object-fit:cover; object-position:50% 22%; display:block; box-shadow:0 10px 26px rgba(0,0,0,.2)}
.vtai-consent .cav-dot{position:absolute; right:3px; bottom:3px; width:18px; height:18px; border-radius:50%; background:#22c55e; border:3px solid #fff}
.vtai-consent h3{font-size:20px; font-weight:700; color:#0a0a0c; margin-bottom:6px; letter-spacing:-.01em}
.vtai-consent p{font-size:14.5px; line-height:1.5; color:#5f6368; margin:0 4px 20px}
.vtai-consent .cbtn{width:100%; border:none; cursor:pointer; border-radius:16px; padding:15px; font-size:16px; font-weight:600; color:#fff; font-family:var(--ios); background:linear-gradient(135deg,#4285f4,#12b5a5); box-shadow:0 8px 22px rgba(66,133,244,.32); transition:transform .15s}
.vtai-consent .cbtn:active{transform:scale(.98)}
.vtai-consent .clater{margin-top:12px; background:none; border:none; color:#8a8f98; font-size:13.5px; cursor:pointer; font-family:var(--ios)}
.vtai-consent .cnote{margin-top:14px; font-size:11.5px; color:#aab; display:flex; align-items:center; justify-content:center; gap:5px}

/* ---------- ROOT OVERLAY ---------- */
.vtai-root{
  position:fixed; inset:0; z-index:600; display:none;
  align-items:center; justify-content:center; font-family:var(--ios);
}
.vtai-root.vtai-on{display:flex}
.vtai-backdrop{
  position:absolute; inset:0; background:rgba(6,7,10,.55);
  backdrop-filter:blur(14px) saturate(.9); opacity:0; transition:opacity .28s ease;
}
.vtai-root.vtai-show .vtai-backdrop{opacity:1}

/* ---------- DEVICE (phone) ---------- */
.vtai-device{
  position:relative; width:390px; height:min(844px,92vh); aspect-ratio:390/844;
  border-radius:52px; overflow:hidden; opacity:0; transform:scale(.92) translateY(14px);
  transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1);
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 11px #0b0b0d,0 0 0 13px #26262b;
}
.vtai-root.vtai-show .vtai-device{opacity:1;transform:scale(1) translateY(0)}
.vtai-screen{position:absolute;inset:0;overflow:hidden}
.vtai-screen.vtai-hidden{display:none}
/* notch */
.vtai-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:120px;height:30px;background:#000;border-radius:18px;z-index:20}
@media (max-width:600px){
  .vtai-device{width:100vw;height:100dvh;border-radius:0;box-shadow:none}
  .vtai-notch{display:none}
}

/* ============ CALL SCREEN (branco minimalista — design Vert Tech) ============ */
.vtai-call{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  color:#0a0a0c; text-align:center; padding:64px 26px 44px;
  background:radial-gradient(120% 60% at 50% 0%,#ffffff,#f4f6f8 70%);
}
.vtai-call-top{position:relative;z-index:2;margin-top:6px}
.vtai-status{font-size:16px;font-weight:500;color:#5f6368;letter-spacing:.2px}
.vtai-status.ended{color:#12b5a5}
.vtai-brand{font-size:12px;color:#9aa0a6;margin-top:3px;letter-spacing:.7px;text-transform:uppercase}
.vtai-timer{font-size:16px;color:#12b5a5;font-variant-numeric:tabular-nums;margin-top:4px;display:none;font-weight:600}
.vtai-avatar-wrap{position:relative;z-index:2;margin:auto 0}
.vtai-avatar{
  width:168px;height:168px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:4px solid #fff; box-shadow:0 18px 44px rgba(20,30,50,.16);
  animation:vtai-float 4s ease-in-out infinite;
}
.vtai-glow{position:absolute;inset:-22px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(18,181,165,.22),transparent 66%);
  filter:blur(14px);animation:vtai-glowpulse 2.6s ease-in-out infinite}
.vtai-name{font-size:29px;font-weight:700;margin-top:24px;position:relative;z-index:2;color:#0a0a0c;letter-spacing:-.01em}
.vtai-ripple{position:absolute;left:50%;top:50%;width:168px;height:168px;border-radius:50%;
  transform:translate(-50%,-50%);border:1.5px solid rgba(18,181,165,.28);
  animation:vtai-ring 2.4s ease-out infinite}
.vtai-ripple.r2{animation-delay:.8s}.vtai-ripple.r3{animation-delay:1.6s}
@keyframes vtai-ring{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}
  100%{transform:translate(-50%,-50%) scale(2.1);opacity:0}}
@keyframes vtai-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes vtai-glowpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
/* waveform (in-call) */
.vtai-wave{display:none;gap:5px;align-items:center;justify-content:center;height:26px;margin-top:18px;position:relative;z-index:2}
.vtai-wave i{width:4px;height:8px;border-radius:3px;background:#12b5a5;animation:vtai-wv 1s ease-in-out infinite}
.vtai-wave i:nth-child(2){animation-delay:.15s}.vtai-wave i:nth-child(3){animation-delay:.3s}
.vtai-wave i:nth-child(4){animation-delay:.45s}.vtai-wave i:nth-child(5){animation-delay:.2s}
.vtai-wave i:nth-child(6){animation-delay:.35s}.vtai-wave i:nth-child(7){animation-delay:.1s}
@keyframes vtai-wv{0%,100%{height:8px;opacity:.5}50%{height:24px;opacity:1}}
/* caption */
.vtai-caption{min-height:44px;font-size:15px;line-height:1.45;color:#3c4043;
  max-width:300px;margin:14px auto 0;position:relative;z-index:2;font-weight:500}
/* ---- controls: chamada a receber (recusar/atender) ---- */
.vtai-controls{position:relative;z-index:2;display:flex;gap:64px;justify-content:center;margin-top:26px}
.vtai-cbtn{width:68px;height:68px;border-radius:50%;border:none;cursor:pointer;display:flex;
  align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 24px rgba(20,30,50,.22);
  transition:transform .18s}
.vtai-cbtn:active{transform:scale(.9)}
.vtai-cbtn.dec{background:#ff3b30}.vtai-cbtn.acc{background:#34c759;animation:vtai-jiggle 1.6s ease-in-out infinite}
.vtai-cbtn.end{background:#ff3b30}
.vtai-cbtn-lbl{font-size:12px;color:#5f6368;margin-top:8px}
.vtai-ctl{display:flex;flex-direction:column;align-items:center}
@keyframes vtai-jiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
/* ---- em chamada: os 6 ícones de uma chamada normal + desligar ---- */
.vtai-incall{position:relative;z-index:2;display:none;width:100%;max-width:300px;margin:22px auto 0}
.vtai-incall.on{display:block}
.vtai-incall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 8px;margin-bottom:22px}
.vtai-ic{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:#3c4043;font-family:inherit}
.vtai-ic .vtai-ic-b{width:62px;height:62px;border-radius:50%;background:#eef1f4;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.vtai-ic:active .vtai-ic-b{transform:scale(.92)}
.vtai-ic.active .vtai-ic-b{background:#0a0a0c;color:#fff}
.vtai-ic span{font-size:11.5px;color:#5f6368}
.vtai-ic svg{width:24px;height:24px}
.vtai-incall-end{display:flex;justify-content:center}
.vtai-incall-end .vtai-cbtn.end{width:66px;height:66px}

/* ============ WHATSAPP SCREEN ============ */
.vtai-wa{position:absolute;inset:0;display:flex;flex-direction:column;background:#0b141a}
.vtai-wa-head{display:flex;align-items:center;gap:10px;padding:44px 12px 10px;
  background:#1f2c34;color:#fff;position:relative;z-index:3;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.vtai-wa-back{font-size:24px;color:#8fa6b1;background:none;border:none;cursor:pointer;padding:0 2px;line-height:1}
.vtai-wa-av{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.vtai-wa-meta b{font-size:16px;font-weight:600;display:block}
.vtai-wa-meta span{font-size:12px;color:#8fa6b1}
.vtai-wa-ic{margin-left:auto;display:flex;gap:20px;color:#8fa6b1;font-size:19px;padding-right:6px}
.vtai-wa-body{flex:1;overflow-y:auto;padding:16px 12px 8px;display:flex;flex-direction:column;gap:8px;
  background:#0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23142029'/%3E%3C/svg%3E")}
.vtai-msg{max-width:80%;padding:8px 11px 9px;border-radius:12px;font-size:14.5px;line-height:1.42;
  position:relative;animation:vtai-pop .28s cubic-bezier(.22,1,.36,1);word-wrap:break-word}
.vtai-msg .t{font-size:10px;color:rgba(255,255,255,.45);float:right;margin:6px 0 -2px 8px}
.vtai-in{align-self:flex-start;background:#1f2c34;color:#e9edef;border-top-left-radius:3px}
.vtai-out{align-self:flex-end;background:#005c4b;color:#e9edef;border-top-right-radius:3px}
.vtai-typing{align-self:flex-start;background:#1f2c34;border-radius:12px;border-top-left-radius:3px;
  padding:12px 14px;display:none}
.vtai-typing.on{display:inline-flex;gap:4px}
.vtai-typing i{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:vtai-td 1.2s infinite}
.vtai-typing i:nth-child(2){animation-delay:.2s}.vtai-typing i:nth-child(3){animation-delay:.4s}
@keyframes vtai-td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@keyframes vtai-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
/* quick-reply option chips */
.vtai-opts{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-end;justify-content:flex-end;max-width:86%;margin-top:2px}
.vtai-opt{background:#1f2c34;color:#25d366;border:1px solid rgba(37,211,102,.4);border-radius:20px;
  padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s}
.vtai-opt:active{transform:scale(.94)}.vtai-opt:hover{background:#26343d}
/* input */
.vtai-wa-input{display:flex;align-items:center;gap:8px;padding:8px 10px 14px;background:#1f2c34}
.vtai-wa-input input{flex:1;border:none;outline:none;border-radius:22px;padding:11px 15px;font-size:15px;
  background:#2a3942;color:#e9edef;font-family:var(--ios)}
.vtai-wa-input input::placeholder{color:#8696a0}
.vtai-send{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:none;cursor:pointer;
  background:#00a884;color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.vtai-send:active{transform:scale(.9)}
/* success card */
.vtai-done{margin:8px auto;text-align:center;background:#1f2c34;color:#e9edef;border-radius:14px;
  padding:18px;max-width:88%;align-self:center;animation:vtai-pop .4s}
.vtai-done .ck{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#12b5a5);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:28px;color:#fff}
.vtai-done b{font-size:17px;display:block;margin-bottom:6px}
.vtai-done p{font-size:13.5px;color:#8fa6b1;line-height:1.5}
.vtai-done .sum{margin-top:12px;text-align:left;font-size:13px;background:#0b141a;border-radius:10px;padding:12px}
.vtai-done .sum div{display:flex;justify-content:space-between;padding:3px 0;color:#c9d3d9}
.vtai-done .sum span:first-child{color:#8696a0}

/* transition flash */
.vtai-flash{position:absolute;inset:0;background:#0b141a;opacity:0;z-index:40;pointer-events:none;transition:opacity .35s}
.vtai-flash.on{opacity:1}

/* ============ UI DENTRO DA CHAMADA (campos, chips, horários, cartão) ============ */
.vtai-cta{position:relative;z-index:3;width:100%;max-width:330px;margin:16px auto 0}
.vtai-ask{font-size:14px;color:#3c4043;margin-bottom:9px;font-weight:500;text-align:center}
.vtai-field{display:flex;gap:8px;animation:vtai-up .3s cubic-bezier(.22,1,.36,1)}
.vtai-field input{flex:1;min-width:0;border:1.5px solid #e0e3e7;outline:none;border-radius:14px;padding:12px 14px;font-size:16px;background:#fff;color:#0a0a0c;font-family:var(--ios);box-shadow:0 2px 8px rgba(20,30,50,.05)}
.vtai-field input::placeholder{color:#9aa0a6}
.vtai-field input:focus{border-color:var(--teal)}
.vtai-field button{width:48px;flex:0 0 48px;border:none;border-radius:14px;background:var(--teal);color:#fff;font-size:18px;cursor:pointer;transition:transform .15s}
.vtai-field button:active{transform:scale(.92)}
.vtai-chiprow,.vtai-slotrow{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;animation:vtai-up .3s cubic-bezier(.22,1,.36,1)}
.vtai-chip{background:#fff;border:1px solid #e0e3e7;color:#0a0a0c;border-radius:18px;padding:10px 17px;font-size:14px;font-weight:500;cursor:pointer;transition:transform .15s,background .15s;box-shadow:0 2px 8px rgba(20,30,50,.05)}
.vtai-chip:active{transform:scale(.93)}.vtai-chip:hover{background:#f4f6f8;border-color:var(--teal)}
.vtai-slotbtn{background:rgba(18,181,165,.10);border:1.5px solid var(--teal);color:#0a7a70;border-radius:16px;padding:13px 26px;font-size:17px;font-weight:700;cursor:pointer;transition:transform .15s}
.vtai-slotbtn:active{transform:scale(.93)}
.vtai-callcard{background:#fff;border:1px solid #eceef1;border-radius:18px;padding:16px 16px 14px;text-align:center;animation:vtai-up .35s cubic-bezier(.22,1,.36,1);box-shadow:0 14px 40px rgba(20,30,50,.10)}
.vtai-callcard .ck{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#12b5a5);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:26px;color:#fff}
.vtai-callcard b{font-size:16px;display:block;margin-bottom:2px;color:#0a0a0c}
.vtai-callcard .cc-sub{font-size:13px;color:#5f6368;margin-bottom:12px}
.vtai-callcard .cc-sum{text-align:left;font-size:13px;background:#f4f6f8;border-radius:12px;padding:11px 13px}
.vtai-callcard .cc-sum div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.vtai-callcard .cc-sum span:first-child{color:#9aa0a6}
.vtai-callcard .cc-sum span:last-child{color:#0a0a0c;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
@keyframes vtai-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* full-screen no mobile (fundo claro, não se vê o site por trás) */
@media (max-width:600px){
  .vtai-backdrop{background:#f4f6f8;backdrop-filter:none}
}

/* ============ LOCK SCREEN ============ */
.vtai-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  color:#fff;text-align:center;padding:70px 22px 40px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 15%,#1b2735,#0a0f16 70%),linear-gradient(180deg,#0f1620,#05080c)}
.vtai-lock::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 88%,rgba(37,211,102,.10),transparent);pointer-events:none}
.vtai-lock-lockicon{font-size:15px;color:rgba(255,255,255,.5);margin-bottom:8px}
.vtai-lock-time{font-size:78px;font-weight:600;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums}
.vtai-lock-date{font-size:17px;color:rgba(255,255,255,.72);margin-top:8px;font-weight:500}
.vtai-notif{margin-top:34px;width:100%;max-width:340px;cursor:pointer;
  background:rgba(30,34,40,.62);backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:12px 14px;
  display:flex;align-items:flex-start;gap:11px;text-align:left;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-18px) scale(.96);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.vtai-notif.show{opacity:1;transform:none}
.vtai-notif:active{transform:scale(.98)}
.vtai-notif-ic{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:#25d366;
  display:flex;align-items:center;justify-content:center;font-size:22px}
.vtai-notif-tx{flex:1;min-width:0}
.vtai-notif-top{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:1px}
.vtai-notif-top b{font-size:13px;color:#fff;font-weight:600;text-transform:none}
.vtai-notif-title{font-size:14px;font-weight:600;color:#fff}
.vtai-notif-msg{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vtai-lock-hint{margin-top:auto;font-size:13px;color:rgba(255,255,255,.45)}
.vtai-lock-hint .vtai-grip{display:block;width:120px;height:5px;border-radius:3px;background:rgba(255,255,255,.4);margin:14px auto 0}

/* ============ VOICE NOTE (áudio do Charles no WhatsApp) ============ */
.vtai-voice{align-self:flex-start;background:#1f2c34;color:#e9edef;border-radius:12px;border-top-left-radius:3px;
  padding:10px 12px;display:flex;align-items:center;gap:10px;max-width:80%;min-width:230px;animation:vtai-pop .28s}
.vtai-voice-play{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:none;cursor:pointer;
  background:#00a884;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center}
.vtai-voice-mid{flex:1;min-width:0}
.vtai-voice-bars{display:flex;align-items:center;gap:2px;height:26px}
.vtai-voice-bars i{width:2.5px;border-radius:2px;background:#5b6b74;transition:background .1s}
.vtai-voice.playing .vtai-voice-bars i.on{background:#25d366}
.vtai-voice-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.vtai-voice-dur{font-size:11px;color:#8696a0;font-variant-numeric:tabular-nums}
.vtai-voice-av{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 30px}
.vtai-voice-av-wrap{position:relative}
.vtai-voice-av-wrap::after{content:"";position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;
  background:#25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11Z'/%3E%3C/svg%3E") center/9px no-repeat;border:2px solid #1f2c34}