/* Reference-matched UI scenes; proportional units keep Persian text crisp. */
.contact-center-motion { position:relative; overflow:hidden; }
.contact-center-card:focus-visible { outline:2px solid #4264ff; outline-offset:-3px; }
.ccm-scene { position:absolute; inset:0; container-type:inline-size; direction:ltr; color:#172344; --ccm-font:2.1cqw; pointer-events:none; }
.contact-center-card:nth-child(n+3) .ccm-scene { --ccm-font:3cqw; }
.ccm-scene * { box-sizing:border-box; }
.ccm-scene h4,.ccm-scene p { margin:0; padding:0; color:inherit; }
.ccm-scene h4 { font-size:calc(var(--ccm-font)*1.05); font-weight:500; line-height:1.7; display:flex; align-items:center; gap:1.5cqw; }
.ccm-panel { position:absolute; border-radius:5.5cqw; background:white; padding:3.5cqw; font-size:var(--ccm-font); line-height:1.75; text-align:start; direction:rtl; }
.ccm-pill { border-radius:3cqw; padding:1.2cqw 2.2cqw; background:white; display:flex; align-items:center; justify-content:center; gap:1cqw; font-size:calc(var(--ccm-font)*.86); white-space:nowrap; line-height:1.5; direction:rtl; }
.ccm-pill img { width:2.4cqw; height:3cqw; object-fit:contain; }
.ccm-cursor { position:absolute; font:4cqw/1 system-ui!important; color:#00132f; opacity:0; filter:drop-shadow(0 1px 1px white); z-index:4; }
.ccm-connectors { position:absolute; inset:0; width:100%; height:100%; stroke:#cbd5fe; stroke-width:1.3; }
.ccm-connectors circle { fill:#4264ff; stroke:white; }
.ccm-outgoing { opacity:0; transition:opacity .4s .5s; }
.is-animating .ccm-outgoing { opacity:1; }
.ccm-begin { position:absolute; left:7%; top:40%; width:16%; }
.ccm-welcome { left:29%; top:38%; width:45%; border-radius:5cqw; padding:3cqw; transition:transform .65s cubic-bezier(.22,.61,.36,1); }
.ccm-outline-icon { font-size:2.4cqw; }
.ccm-note { padding:2cqw; margin:2cqw 0; background:#f5f5fa; border-radius:1.2cqw; font-size:calc(var(--ccm-font)*.88); }
.ccm-note p { margin-top:2cqw; line-height:1.8; }
.ccm-transition { display:flex; align-items:center; justify-content:space-between; font-size:calc(var(--ccm-font)*.8); margin:1.3cqw 1cqw; color:#677590; }
.ccm-condition { background:#f5f5fa; border-radius:1.2cqw; padding:.7cqw 1.5cqw; margin-top:1cqw; font-size:calc(var(--ccm-font)*.8); }
.ccm-branch { position:absolute; left:79.5%; top:51.5%; width:20%; display:grid; gap:1.5cqw; opacity:0; transform:translateX(-3cqw); transition:opacity .4s .5s,transform .6s .5s; }
.ccm-branch .ccm-pill { font-size:calc(var(--ccm-font)*.75); padding:1.2cqw 1cqw; }
.is-animating .ccm-welcome { transform:translate(-3cqw,-1.5cqw); }
.is-animating .ccm-branch { opacity:1; transform:translateX(0); }
.ccm-handoff-cursor { left:60%; top:58%; }
.is-animating .ccm-handoff-cursor { animation:ccm-handoff-cursor 1.7s both; }
@keyframes ccm-handoff-cursor { 0%{opacity:0;transform:translate(4cqw,8cqw)} 20%,60%{opacity:1;transform:translate(0,0)} 75%{opacity:1;transform:translate(0,0) scale(.82)} 100%{opacity:0;transform:translate(9cqw,0)} }
.ccm-campaign-stack { position:absolute; width:63%; left:50%; top:50%; transform:translate(-50%,-50%); }
.ccm-campaign-stack .ccm-panel { position:relative; width:100%; border-radius:5cqw; padding:3cqw; }
.ccm-small-heading { display:flex; gap:1cqw; align-items:center; font-size:calc(var(--ccm-font)*.88); margin:0 1cqw 2cqw; color:#52617a; }
.ccm-small-heading b { font-weight:500; color:#172344; }
.ccm-attempt { background:white; border:.2cqw solid #e6e9f5; border-radius:2cqw; overflow:hidden; font-size:calc(var(--ccm-font)*.82); }
.ccm-attempt>div { background:#f5f5fa; display:flex; justify-content:space-between; padding:1cqw 1.5cqw; border-bottom:.2cqw solid #e6e9f5; }
.ccm-attempt p { display:flex; align-items:center; gap:1.5cqw; padding:1.5cqw; white-space:nowrap; }
.ccm-attempt p b { background:#eef1f7; padding:.3cqw .8cqw; border-radius:1cqw; font-weight:400; }
.ccm-attempt-added { max-height:0; margin-top:0; border-width:0; opacity:0; transform:translateY(2cqw); transition:max-height .55s .45s,margin .55s .45s,opacity .5s .45s,transform .55s .45s,border-width .1s .45s; }
.is-animating .ccm-attempt-added { max-height:16cqw; margin-top:1.5cqw; border-width:.2cqw; opacity:1; transform:none; }
.ccm-add-attempt,.ccm-add-conversation { background:#f5f5fa; text-align:center; margin-top:1.7cqw; padding:.7cqw; border:.2cqw solid #e6e9f5; border-radius:2cqw; font-size:calc(var(--ccm-font)*.8); }
.ccm-add-attempt { max-height:7cqw; transition:opacity .2s .4s,max-height .3s .7s,padding .3s .7s,margin .3s .7s; }
.is-animating .ccm-add-attempt { max-height:0; padding:0; margin:0; border:0; opacity:0; }
.ccm-add-conversation { max-height:0; margin:0; opacity:0; padding:0; border:0; }
.is-animating .ccm-add-conversation { animation:ccm-add-conversation 1.8s both; }
@keyframes ccm-add-conversation { 0%,35%{opacity:0;max-height:0} 55%,75%{opacity:1;max-height:7cqw;padding:.7cqw;margin-top:1.7cqw;border:.2cqw solid #e6e9f5} 100%{opacity:0;max-height:0;padding:0;margin:0;border:0} }
.ccm-campaign-stack .ccm-sms-plan { padding:0 3cqw; max-height:0; margin-top:0; opacity:0; transform:translateY(3cqw); overflow:hidden; transition:max-height .55s 1.3s,padding .55s 1.3s,opacity .55s 1.3s,transform .55s 1.3s,margin .55s 1.3s; }
.is-animating .ccm-campaign-stack .ccm-sms-plan { max-height:32cqw; padding:3cqw; opacity:1; margin-top:2.5cqw; transform:none; }
.ccm-sms-text { display:block; padding:0 1.5cqw 1.5cqw; color:#8a94aa; white-space:nowrap; overflow:hidden; }
.ccm-campaign-cursor { left:48%; top:55%; }
.is-animating .ccm-campaign-cursor { animation:ccm-campaign-cursor 2s both; }
@keyframes ccm-campaign-cursor { 0%{opacity:0;transform:translate(10cqw,10cqw)} 15%,25%{opacity:1;transform:translate(0,0)} 35%{opacity:1;transform:scale(.8)} 55%,70%{opacity:1;transform:translateY(10cqw)} 80%{opacity:1;transform:translateY(10cqw) scale(.8)} 100%{opacity:0;transform:translate(7cqw,12cqw)} }
.ccm-ivr { overflow:hidden; }
.ccm-ivr::after { position:absolute; content:""; inset:70% 0 0; pointer-events:none; background:linear-gradient(transparent,var(--contact-card-fade,#f5f5fa) 92%); z-index:3; }
.ccm-ivr-phone { left:50%; top:52%; transform:translateX(-50%); width:74%; height:91cqw; text-align:center; padding:12cqw 5cqw 5cqw; border-radius:7cqw; transition:transform .8s .6s cubic-bezier(.22,.61,.36,1); }
.ccm-call-time { display:block; direction:ltr; font-size:3cqw; }
.ccm-time-active { display:none; }
.ccm-scene .ccm-ivr-phone h4 { display:block; font-size:6.5cqw; font-weight:400; margin:1cqw 0 12cqw; white-space:nowrap; }
.ccm-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:3cqw; direction:ltr; opacity:0; transition:opacity .5s .7s; }
.ccm-keypad>span { width:15cqw; height:15cqw; border-radius:50%; background:#f5f5fa; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#9095ad; }
.ccm-keypad b { font-size:6.5cqw; font-weight:400; line-height:1; }
.ccm-keypad small { font-size:1.6cqw; letter-spacing:1px; line-height:1.5; }
.ccm-end-call { display:grid; place-items:center; width:14cqw; height:14cqw; border-radius:50%; background:#ea6a73; color:white; font-size:7cqw; margin:5cqw auto; }
.ccm-ivr-prompt { position:absolute; top:22%; left:50%; width:84%; min-height:10cqw; transform:translate(-50%,3cqw); padding:2cqw; opacity:0; transition:opacity .3s,transform .5s; }
.ccm-ivr-quote { font-size:2.8cqw; }
.ccm-ivr-detected { display:flex; gap:2cqw; align-items:center; position:absolute; opacity:0; font-size:2.8cqw; }
.ccm-ivr-detected img { width:3cqw; height:4cqw; }
.is-animating .ccm-ivr-phone { transform:translate(-50%,-27cqw); }
.is-animating .ccm-keypad { opacity:1; }
.is-animating .ccm-ivr-prompt { opacity:1; transform:translate(-50%,0); }
.is-animating .ccm-ivr-quote { animation:ccm-quote 1s forwards; }
.is-animating .ccm-ivr-detected { animation:ccm-detected .4s .8s forwards; }
.is-animating .ccm-key-one { animation:ccm-key-press .6s 1.15s both; }
.is-animating .ccm-time-idle { display:none; }
.is-animating .ccm-time-active { display:inline; }
@keyframes ccm-quote { 0%,65%{opacity:1} 100%{opacity:0} }
@keyframes ccm-detected { to{opacity:1} }
@keyframes ccm-key-press { 30%,65%{background:#e3e7fb;color:#4264ff;transform:scale(.9)} 100%{background:#e9ecfb;color:#4264ff} }
.ccm-monitor-panel { left:50%; top:50%; transform:translate(-50%,-50%); width:80%; height:49cqw; padding:4.5cqw; border-radius:7cqw; transition:height .6s .4s; }
.ccm-monitor-panel>h4 { margin-bottom:3cqw; font-size:3cqw; }
.ccm-live-overview { transition:opacity .25s .3s,transform .4s .3s; }
.ccm-live-call { padding:3cqw; border-radius:4cqw; background:#f5f5fa; }
.ccm-live-call-heading { display:flex; gap:2cqw; align-items:center; text-align:start; }
.ccm-phone-symbol { display:grid; place-items:center; width:6cqw; height:6cqw; border-radius:1.5cqw; background:white; font-size:0; }
.ccm-phone-symbol:after,.ccm-end-call:after { content:""; display:block; width:3.8cqw; height:3.8cqw; background:currentColor; mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 3 3-1 3 5-2 2c1 3 3 5 6 6l2-2 5 3-1 3c-.3 1-1.3 2-3 2C10 21 3 14 3 6c0-1.7 1-2.7 2-3Z'/%3E%3C/svg%3E"); }
.ccm-end-call { font-size:0; }
.ccm-end-call:after { width:6cqw; height:6cqw; transform:rotate(135deg); }
.ccm-live-call-heading>div { flex:1; min-width:0; }
.ccm-live-call-heading b { display:block; font-size:2.7cqw; font-weight:500; white-space:nowrap; }
.ccm-live-call-heading small { display:block; font-size:2.3cqw; color:#7b879d; }
.ccm-recording { color:#4264ff; font-size:1.7cqw; white-space:nowrap; align-self:flex-start; }
.ccm-wave { display:flex; align-items:center; justify-content:space-between; gap:.5cqw; height:6cqw; margin-top:2cqw; direction:ltr; }
.ccm-wave i { width:.3cqw; min-width:.2cqw; height:var(--bar-height); background:#9ca3bb; border-radius:1px; }
.ccm-live-buttons { display:grid; grid-template-columns:1fr 1fr; gap:1.5cqw; margin-top:2.5cqw; }
.ccm-live-buttons>span { display:grid; place-items:center; padding:1.5cqw; border:.3cqw solid #eceef6; border-radius:2.5cqw; font-size:2.5cqw; line-height:1.5; background:white; }
.ccm-live-buttons>span:last-child { background:#00132f; color:white; border-color:#00132f; }
.ccm-transcript { position:absolute; inset:12cqw 4.5cqw 4cqw; opacity:0; visibility:hidden; transition:opacity .4s .55s,visibility 0s .55s; }
.ccm-tabs { display:flex; gap:5cqw; border-bottom:.3cqw solid #e8eaf2; font-size:2.4cqw; margin:0 -4.5cqw 4cqw; padding:0 4.5cqw 2.5cqw; white-space:nowrap; }
.ccm-tabs>span:first-child { color:#00132f; position:relative; }
.ccm-tabs>span:first-child:after { content:""; position:absolute; height:.4cqw; bottom:-2.8cqw; left:0; right:0; background:#00132f; }
.ccm-chat { border-radius:4cqw; padding:3cqw; background:#f5f5fa; font-size:3cqw; line-height:1.8; width:88%; }
.ccm-chat-agent { margin-inline-start:auto; }
.ccm-chat-customer { margin-top:3cqw; opacity:0; transform:translateY(3cqw); transition:opacity .5s 1.3s,transform .5s 1.3s; }
.ccm-typing { display:flex; gap:1cqw; padding:2cqw; margin-top:2cqw; width:12cqw; background:#f5f5fa; border-radius:4cqw; }
.ccm-typing i { width:1cqw; height:1cqw; background:#a4aac1; border-radius:50%; }
.ccm-listening { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:2.8cqw; color:#4264ff; }
.is-animating .ccm-monitor-panel { height:75cqw; }
.is-animating .ccm-live-overview { opacity:0; transform:translateY(-2cqw); }
.is-animating .ccm-transcript { opacity:1; visibility:visible; }
.is-animating .ccm-chat-customer { opacity:1; transform:none; }
.is-animating .ccm-typing i { animation:ccm-typing .8s infinite alternate; }
.is-animating .ccm-typing i:nth-child(2) { animation-delay:.2s; }
.is-animating .ccm-typing i:nth-child(3) { animation-delay:.4s; }
.is-animating .ccm-wave i { animation:ccm-wave .4s var(--bar-delay) infinite alternate; }
@keyframes ccm-typing { to{opacity:.35;transform:translateY(-.7cqw)} }
@keyframes ccm-wave { to{transform:scaleY(.35)} }
.ccm-monitor-cursor { left:68%; top:57%; }
.is-animating .ccm-monitor-cursor { animation:ccm-monitor-cursor 1.1s both; }
@keyframes ccm-monitor-cursor { 0%{opacity:0;transform:translate(8cqw,8cqw)} 20%,40%{opacity:1;transform:none} 60%{opacity:1;transform:scale(.8)} 100%{opacity:0;transform:translate(0,-3cqw)} }
.ccm-crm-integrations,.ccm-crm-fields { left:50%; top:50%; width:79%; transform:translate(-50%,-50%); padding:4.5cqw; border-radius:7cqw; }
.ccm-crm-integrations { transition:opacity .3s .5s,transform .5s .5s; }
.ccm-crm-integrations h4,.ccm-crm-fields h4 { font-size:3.1cqw; margin-bottom:3cqw; }
.ccm-crm-row { display:flex; gap:3cqw; align-items:center; padding:2cqw 0; }
.ccm-crm-row>img { width:8cqw; height:8cqw; object-fit:contain; background:#f5f5fa; border-radius:1.5cqw; padding:1cqw; }
.ccm-scene img[src$="salesforce.avif"] { filter:invert(46%) sepia(97%) saturate(1748%) hue-rotate(158deg) brightness(94%) contrast(101%); }
.ccm-scene img[src$="hubspot.avif"] { filter:invert(52%) sepia(92%) saturate(1641%) hue-rotate(338deg) brightness(105%) contrast(102%); }
.ccm-crm-row>div { flex:1; }
.ccm-crm-row b,.ccm-crm-row small { display:block; font-size:3cqw; font-weight:400; line-height:1.7; }
.ccm-crm-row small { color:#8d97ae; font-size:2.5cqw; }
.ccm-switch { width:5.5cqw; height:3.4cqw; border-radius:3cqw; background:#e0e3eb; position:relative; transition:background .2s .2s; }
.ccm-switch:after { content:""; position:absolute; top:.65cqw; left:.65cqw; width:2.1cqw; height:2.1cqw; background:white; border-radius:50%; transition:transform .2s .2s; }
.ccm-crm-fields { opacity:0; visibility:hidden; transform:translate(-50%,calc(-50% + 4cqw)); transition:opacity .4s .65s,visibility 0s .65s,transform .5s .65s; }
.ccm-fields-head { display:flex; justify-content:space-between; background:#f5f5fa; padding:1.5cqw 2.5cqw; border-radius:4cqw; font-size:2.6cqw; color:#7b879e; }
.ccm-field-row { display:grid; grid-template-columns:3cqw 1fr 5cqw 1fr 4cqw 5cqw; align-items:center; gap:1cqw; padding:4cqw 0; border-bottom:.2cqw solid #eceef6; font-size:2.6cqw; opacity:0; transform:translateY(2cqw); transition:opacity .4s calc(.75s + var(--row-delay,0s)),transform .4s calc(.75s + var(--row-delay,0s)); }
.ccm-field-row:nth-of-type(3) { --row-delay:.2s; }
.ccm-field-row:nth-of-type(4) { --row-delay:.4s; border-bottom:0; }
.ccm-field-row b { font-size:2.7cqw; font-weight:500; }
.ccm-field-row img { width:5cqw; height:5cqw; object-fit:contain; }
.ccm-field-row img.ccm-field-opera { width:3.6cqw; height:4.5cqw; justify-self:center; }
.ccm-field-row i { font-style:normal; font-size:4cqw; text-align:center; }
.is-animating .ccm-switch { background:#4264ff; }
.is-animating .ccm-switch:after { transform:translateX(2.1cqw); }
.is-animating .ccm-crm-integrations { opacity:0; transform:translate(-50%,calc(-50% - 4cqw)); }
.is-animating .ccm-crm-fields { opacity:1; visibility:visible; transform:translate(-50%,-50%); }
.is-animating .ccm-field-row { opacity:1; transform:none; }
.ccm-crm-cursor { left:80%; top:48%; }
.is-animating .ccm-crm-cursor { animation:ccm-monitor-cursor 1.1s both; }
html[dir="ltr"] .ccm-panel,html[dir="ltr"] .ccm-pill { direction:ltr; }
.contact-center-card[data-motion-visible="false"] .ccm-scene * { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
 .ccm-scene *, .ccm-scene *:after { animation:none!important; transition:none!important; }
 .ccm-cursor { display:none; }
}