.call-flow{margin-top:64px;padding:32px;border:1px solid #dce5cf;border-radius:24px;background:linear-gradient(135deg,#fff,#f0f5e6);box-shadow:0 18px 45px -30px #23351d40}
.call-flow .flow-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}.call-flow .flow-kicker{margin:0 0 8px;color:var(--green);font-size:12px;letter-spacing:1.5px;font-weight:700}.call-flow h3{font-size:28px;letter-spacing:-1px}.call-flow button{font:inherit;cursor:pointer}.call-flow button:focus-visible{outline:3px solid var(--green);outline-offset:5px}.call-flow .flow-play{flex:none;display:flex;align-items:center;gap:10px;border:0;border-radius:100px;padding:13px 20px;background:var(--deep);color:white;font-size:14px;font-weight:600}.call-flow .flow-play:hover{background:var(--green)}.call-flow .flow-play svg{width:16px;height:16px;fill:currentColor}.call-flow .flow-pause-icon{display:none}.call-flow[data-playing="true"] .flow-play-icon{display:none}.call-flow[data-playing="true"] .flow-pause-icon{display:block}
.call-flow .flow-track{display:grid;grid-template-columns:1fr 36px 1.2fr 36px 1fr;align-items:stretch}.call-flow .flow-card{min-width:0;padding:22px 18px;border:1px solid #e0e7d7;border-radius:18px;background:#ffffffb8;transition:border-color .35s,box-shadow .35s}.call-flow .flow-card.is-active{border-color:#9db971;box-shadow:0 8px 24px -14px #4e692a70;background:white}.call-flow .flow-step{border:0;background:none;padding:0;color:var(--muted);display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;text-align:left;width:100%}.call-flow .flow-step span{display:grid;place-items:center;width:27px;height:27px;flex:none;border-radius:50%;background:#eef3e4;color:var(--green);font-size:12px}.call-flow .flow-step[aria-current="step"]{color:var(--deep)}.call-flow .flow-link{align-self:center;height:1px;background:#d4dfc5;position:relative}.call-flow .flow-link:after{content:'';position:absolute;right:2px;top:-3px;width:6px;height:6px;border-top:1px solid #8ba568;border-right:1px solid #8ba568;transform:rotate(45deg)}.call-flow .flow-link.is-done{background:var(--green)}
.call-flow .flow-caller{text-align:center;padding:30px 0 10px}.call-flow .flow-avatar{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#eaf1db;color:var(--green);margin:0 auto 15px;font-family:Manrope,sans-serif;font-size:23px;font-weight:600;position:relative}.call-flow .flow-avatar:after{content:'';position:absolute;inset:-7px;border:1px solid #cbdcb0;border-radius:50%}.call-flow[data-playing="true"][data-stage="0"] .flow-avatar:after{animation:flow-ring 1.6s ease-out infinite}.call-flow .flow-caller strong{display:block;font-size:18px}.call-flow .flow-caller p{font-size:14px;color:var(--muted);margin:4px 0 20px}.call-flow .flow-call-state{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:14px}.call-flow .flow-call-state svg{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.call-flow .flow-dialogue{display:flex;flex-direction:column;gap:10px;margin-top:22px;height:245px;min-height:245px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd8b8 transparent}.call-flow .flow-dialogue.has-history{mask-image:linear-gradient(to bottom,transparent,#000 16px)}.call-flow .flow-dialogue:focus-visible{outline:2px solid var(--green);outline-offset:4px}.call-flow .flow-bubble{flex:none;border-radius:0 12px 12px;background:#f1f5e9;padding:10px 12px;transition:opacity .3s,transform .3s}.call-flow .flow-bubble small{display:block;color:var(--green);font-size:12px;font-weight:600;margin-bottom:3px}.call-flow .flow-bubble p{overflow-wrap:anywhere;font-size:14px;line-height:1.55;margin:0}.call-flow .flow-bubble.is-customer{margin-left:17px;background:#e2edcd;border-radius:12px 0 12px 12px}.call-flow .flow-bubble.is-pending{display:none}.call-flow .flow-listening{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-top:14px}.call-flow .flow-wave{display:flex;align-items:center;gap:3px;height:18px}.call-flow .flow-wave i{height:6px;width:3px;border-radius:3px;background:#8aa65e}.call-flow .flow-wave i:nth-child(2){height:15px}.call-flow .flow-wave i:nth-child(3){height:10px}.call-flow .flow-wave i:nth-child(4){height:18px}.call-flow[data-playing="true"][data-stage="1"] .flow-wave i{animation:flow-wave .7s ease-in-out infinite alternate}.call-flow .flow-wave i:nth-child(2n){animation-delay:-.3s!important}
.call-flow .flow-phone{margin-top:22px;border:1px solid #d5dfc8;border-radius:22px;background:linear-gradient(160deg,#eaf1dc,#d6e5be);min-height:278px;padding:15px 12px;overflow:hidden}.call-flow .flow-phone-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#4e623b;margin:0 4px 30px}.call-flow .flow-phone-top span:last-child{width:44px;height:10px;border-radius:20px;background:#b4c59e}.call-flow .flow-notification{background:#fffffff2;border:1px solid white;padding:13px;border-radius:14px;box-shadow:0 8px 22px #23351d12;transition:opacity .45s,transform .45s}.call-flow .flow-notification.is-pending{opacity:0;transform:translateY(-25px);visibility:hidden}.call-flow .flow-notification-head{display:flex;align-items:center;gap:7px;color:#46633c;font-size:12px;margin-bottom:10px}.call-flow .flow-whatsapp{display:grid;place-items:center;background:#218744;color:white;width:23px;height:23px;border-radius:7px}.call-flow .flow-whatsapp svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.call-flow .flow-notification-head time{margin-left:auto;color:var(--muted);font-size:12px}.call-flow .flow-notification strong{font-size:14px}.call-flow .flow-notification p{font-size:14px;line-height:1.6;margin:5px 0 12px}.call-flow .flow-order{display:block;border-top:1px solid #e0e8d8;padding-top:10px;color:var(--green);font-size:14px;font-weight:600}.call-flow .flow-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}.call-flow .flow-status{margin:0;color:var(--green);font-size:14px}.call-flow .flow-hint{font-size:12px;color:var(--muted);text-align:right}.call-flow .flow-progress{height:3px;border-radius:4px;background:#e1e8d7;margin-top:19px;overflow:hidden}.call-flow .flow-progress span{display:block;height:100%;background:#7d9651;width:0;transition:width .4s}
@keyframes flow-ring{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.28);opacity:0}}@keyframes flow-wave{to{transform:scaleY(.4)}}
@media(max-width:1000px){.call-flow{padding:24px}.call-flow .flow-track{grid-template-columns:1fr 22px 1.25fr 22px 1fr}.call-flow .flow-card{padding:18px 12px}.call-flow .flow-phone{padding:12px 8px}.call-flow .flow-notification{padding:10px}}
@media(max-width:760px){.call-flow{margin-top:42px;padding:22px 16px;border-radius:18px}.call-flow .flow-top{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:24px}.call-flow h3{font-size:25px}.call-flow .flow-track{grid-template-columns:1fr}.call-flow .flow-card{padding:20px}.call-flow .flow-link{width:1px;height:26px;justify-self:center}.call-flow .flow-link:after{top:auto;bottom:3px;right:-3px;transform:rotate(135deg)}.call-flow .flow-caller{padding:20px 0 0}.call-flow .flow-caller p{margin-bottom:10px}.call-flow .flow-dialogue{min-height:245px}.call-flow .flow-phone{max-width:300px;margin:22px auto 0;min-height:270px;padding:16px}.call-flow .flow-footer{align-items:flex-start;flex-direction:column;gap:8px}.call-flow .flow-hint{text-align:left}.call-flow .flow-bubble p,.call-flow .flow-notification p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.call-flow *,.call-flow *:after{animation:none!important;transition:none!important}}