.pd{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center;}
@media(max-width:900px){.pd{grid-template-columns:1fr;gap:28px;}}
.pd-tabs{display:flex;gap:8px;margin:18px 0 22px;flex-wrap:wrap;}
.pd-tab{font:inherit;font-size:14px;font-weight:700;border:0;border-radius:999px;padding:10px 20px;background:#EAF0F6;color:#33475B;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.pd-tab[aria-selected="true"]{background:#07121F;color:#fff;}
.pd-tab i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5;}
.pd-tab[aria-selected="true"] i{background:#74D3DE;opacity:1;}
.pd-desc h3{font-size:clamp(20px,2vw,26px);font-weight:900;line-height:1.5;margin-bottom:10px;color:#10233A;}
.pd-desc p{font-size:15px;line-height:1.95;color:#44566A;}
.pd-flow{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.pd-flow li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:#10233A;}
.pd-flow li::before{content:"";width:5px;height:16px;border-radius:1px;background:linear-gradient(180deg,#2b70b7,#4bb3c2);transform:skewX(-21deg);}
.pd-ctrl{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap;}
.pd-play{font:inherit;font-size:14.5px;font-weight:700;border:0;border-radius:10px;padding:12px 22px;background:#1463E0;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 8px 20px rgba(20,99,224,.25);}
.pd-play::before{content:"";width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;}
.pd-play.is-playing::before{width:10px;height:12px;border:0;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%);}
.pd-note{font-size:12px;color:#5B6B7C;line-height:1.8;margin-top:12px;}

.ph{position:relative;width:340px;max-width:100%;margin:0 auto;aspect-ratio:9/18.5;border-radius:46px;background:#0B1624;padding:12px;box-shadow:0 40px 80px rgba(16,35,58,.35),inset 0 0 0 2px rgba(255,255,255,.08);}
.ph::before{content:"";position:absolute;top:22px;left:50%;width:96px;height:26px;margin-left:-48px;border-radius:14px;background:#000;z-index:3;}
.ph-scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
.ph-bar{height:44px;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;font-size:12px;font-weight:700;font-family:'Barlow',sans-serif;}
.ph-view{position:absolute;inset:44px 0 0 0;display:none;flex-direction:column;}
.ph-view.on{display:flex;}

.v-call{background:linear-gradient(180deg,#0E2036,#07121F);color:#fff;}
.v-call .who{text-align:center;padding-top:26px;}
.v-call .av{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-family:'Barlow',sans-serif;font-weight:800;font-size:22px;color:#07121F;background:linear-gradient(180deg,#5A9BE0,#74D3DE);box-shadow:0 0 0 8px rgba(116,211,222,.12);}
.v-call.talking .av{animation:pdPulse 1.4s ease-in-out infinite;}
@keyframes pdPulse{50%{box-shadow:0 0 0 16px rgba(116,211,222,.04);}}
.v-call .nm{font-size:17px;font-weight:900;}
.v-call .st{font-size:12.5px;color:#A9B8C8;margin-top:2px;font-family:'Barlow',sans-serif;letter-spacing:.06em;}
.v-call .wave{display:flex;justify-content:center;align-items:center;gap:3px;height:28px;margin:14px 0 6px;}
.v-call .wave b{width:3px;height:20%;border-radius:2px;background:#74D3DE;opacity:.5;}
.v-call.talking .wave b{animation:pdWave 1s ease-in-out infinite;opacity:1;}
.v-call .wave b:nth-child(2n){animation-delay:-.3s;} .v-call .wave b:nth-child(3n){animation-delay:-.6s;}
@keyframes pdWave{50%{height:95%;}}
.cap{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:10px 16px 16px;}
.cap .ln{font-size:13px;line-height:1.65;padding:9px 12px;border-radius:12px;max-width:88%;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;}
.cap .ln.show{opacity:1;transform:none;}
.cap .ln em{display:block;font-style:normal;font-size:10.5px;font-weight:700;opacity:.7;margin-bottom:2px;}
.cap .ln.ai{background:rgba(116,211,222,.14);border:1px solid rgba(116,211,222,.3);align-self:flex-start;}
.cap .ln.us{background:rgba(255,255,255,.1);align-self:flex-end;}
.cap .ln.cur{border-color:#74D3DE;}

.v-chat{background:#F3F6F9;color:#10233A;}
.v-chat .hd,.v-line .hd{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:14px;font-weight:900;}
.v-chat .hd{background:#fff;border-bottom:1px solid #E3E9EF;}
.v-chat .hd i{width:30px;height:30px;border-radius:9px;background:linear-gradient(180deg,#2b70b7,#4bb3c2);display:grid;place-items:center;font-style:normal;color:#fff;font-family:'Barlow',sans-serif;font-size:11px;font-weight:800;}
.v-chat .hd small,.v-line .hd small{display:block;font-size:10.5px;font-weight:500;color:#5B6B7C;}
.msgs{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px 14px 16px;}
.msg{font-size:13px;line-height:1.65;padding:9px 12px;border-radius:14px;max-width:84%;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;}
.msg.show{opacity:1;transform:none;}
.v-chat .msg.ai{background:#fff;border:1px solid #E3E9EF;align-self:flex-start;border-top-left-radius:4px;}
.v-chat .msg.us{background:#1463E0;color:#fff;align-self:flex-end;border-top-right-radius:4px;}
.typing{align-self:flex-start;display:none;gap:4px;padding:10px 12px;background:#fff;border-radius:14px;border:1px solid #E3E9EF;}
.typing.show{display:flex;}
.typing b{width:6px;height:6px;border-radius:50%;background:#8FA2B6;animation:pdDot 1s infinite;}
.typing b:nth-child(2){animation-delay:.15s;} .typing b:nth-child(3){animation-delay:.3s;}
@keyframes pdDot{50%{transform:translateY(-3px);opacity:.4;}}

.v-line{background:#8CABD8;color:#10233A;}
.v-line .hd{background:#283447;color:#fff;}
.v-line .hd small{color:#B8C6D4;}
.v-line .msg.ai{background:#fff;align-self:flex-start;border-top-left-radius:4px;}
.v-line .msg.us{background:#06C755;color:#fff;align-self:flex-end;border-top-right-radius:4px;}
.v-line .typing{background:#fff;border:0;}

.crm-toast{position:absolute;left:12px;right:12px;bottom:14px;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:#07121F;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.3);
  opacity:0;transform:translateY(16px);transition:opacity .35s,transform .35s;z-index:4;font-size:12.5px;line-height:1.6;}
.crm-toast.show{opacity:1;transform:none;}
.crm-toast::before{content:"✓";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#3ECF8E;color:#07121F;display:grid;place-items:center;font-size:11px;font-weight:900;margin-top:1px;}
.crm-toast b{display:block;font-size:13px;}
.crm-toast span{color:#A9B8C8;font-size:11.5px;}
@media(prefers-reduced-motion:reduce){.v-call .av,.v-call .wave b,.typing b{animation:none!important;}.cap .ln,.msg,.crm-toast{transition:none;}}

.ph-bar{color:#10233A;}
.ph-scr.dark .ph-bar{color:#fff;}
.ph-scr.dark{background:#0E2036;}
.ph-scr.line .ph-bar{background:#283447;color:#fff;}
@media(max-width:900px){.pd .ph{order:-1;width:300px;} .pd-tabs{margin-top:0;}}
.pd-tabs{margin:0 0 28px!important;}
@media(max-width:900px){.pd-tabs{justify-content:center;margin:0 0 18px!important;}}