/* Product scenes on solution pages (solutions_scenes.py). Each replays when its pane opens (.sl-pane.on). */
.sc .card,.sc-player,.sc-live,.sc-missed,.sc-inbox,.sc-dom{--c:#fff}
.sc .sc-h .dot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--acc);animation:slpulse 1.4s infinite}
.sc .ring{position:relative;display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--acc);flex:none}
.sc .ring i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:scring 1.4s ease-out infinite}.sc .ring i+i{animation-delay:.7s}

/* recording player: two mirrored speech tracks, colour fills behind the playhead, the speaking track lights up,
   transcript and timer follow (8 s loop; turns at 2-27%, 31-58%, 62-74%, 78-97% as in solutions_scenes.TURNS) */
.sc-player{--loop:8s}
.pl-box{position:relative;display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.pl-t{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:10px;padding:4px 6px;border-radius:10px}
.pl-who{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut)}.pl-who .av{width:20px;height:20px;font-size:10px}
.pl-c .pl-who .av{background:var(--acc)}
.pl-w{position:relative;height:38px}
.pl-base,.pl-fill{position:absolute;inset:0;display:flex;align-items:center;gap:1.5px}
.pl-w i{flex:1;height:var(--h);min-height:2px;border-radius:2px;background:#e4e2db}
.pl-c .pl-fill i{background:var(--acc)}.pl-s .pl-fill i{background:var(--ink)}
.pl-fill{clip-path:inset(0 100% 0 0)}
.pl-head{position:absolute;top:10px;bottom:10px;left:calc(14px + 6px + 62px + 10px);width:2px;margin-left:-1px;border-radius:2px;background:#d0553a;box-shadow:0 0 0 3px rgba(208,85,58,.15)}
.pl-head:before{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:#d0553a}
.sl-pane.on .pl-fill{animation:plfill var(--loop) linear infinite}
.sl-pane.on .pl-head{animation:plhead var(--loop) linear infinite}
@keyframes plfill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes plhead{from{left:calc(14px + 6px + 62px + 10px)}to{left:calc(100% - 14px - 6px)}}
.sl-pane.on .pl-c{animation:plspk-c var(--loop) linear infinite}.sl-pane.on .pl-s{animation:plspk-s var(--loop) linear infinite}
@keyframes plspk-c{0%,1%,28%,61%,75%,100%{background:transparent}3%,26%,63%,73%{background:var(--acc-soft)}}
@keyframes plspk-s{0%,30%,59%,77%,98%,100%{background:transparent}32%,57%,79%,96%{background:#f1f0ec}}
.pl-ctl{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mut)}
.pl-play{position:relative;width:32px;height:32px;border-radius:50%;background:var(--ink);flex:none}
.pl-play:before,.pl-play:after{content:"";position:absolute;top:10px;width:3px;height:12px;border-radius:1px;background:#fff}.pl-play:before{left:11px}.pl-play:after{right:11px}
.pl-time{font:500 12.5px ui-monospace,Menlo,monospace;color:var(--ink);min-width:30px}.pl-of{font:12px ui-monospace,Menlo,monospace;margin-left:-6px}
.pl-sp{padding:2px 7px;border:1px solid var(--line);border-radius:6px;background:#fff}
.pl-dl{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff}
.pl-dl svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-tx{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pl-tx li{font-size:12.5px;line-height:1.4;color:#b0aea6;padding:6px 10px;border-radius:8px;border:1px solid transparent}.pl-tx b{font-weight:600;margin-right:6px}
.sl-pane.on .pl-tx .t0{animation:pltx0 var(--loop) linear infinite}.sl-pane.on .pl-tx .t1{animation:pltx1 var(--loop) linear infinite}
.sl-pane.on .pl-tx .t2{animation:pltx2 var(--loop) linear infinite}.sl-pane.on .pl-tx .t3{animation:pltx3 var(--loop) linear infinite}
@keyframes pltx0{0%,1%,28%,100%{color:#b0aea6;background:transparent;border-color:transparent}2%,27%{color:var(--ink);background:#fff;border-color:var(--line)}}
@keyframes pltx1{0%,30%,59%,100%{color:#b0aea6;background:transparent;border-color:transparent}31%,58%{color:var(--ink);background:#fff;border-color:var(--line)}}
@keyframes pltx2{0%,61%,75%,100%{color:#b0aea6;background:transparent;border-color:transparent}62%,74%{color:var(--ink);background:#fff;border-color:var(--line)}}
@keyframes pltx3{0%,77%,98%,100%{color:#b0aea6;background:transparent;border-color:transparent}78%,97%{color:var(--ink);background:#fff;border-color:var(--line)}}

/* team live view: statuses, then a call comes in for the free colleague */
.lv-r,.ib-r,.ms-r{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.lv-r b,.ib-r b,.ms-r b{display:block;font-size:13.5px;font-weight:500}.lv-r small,.ib-r small,.ms-r small{font-size:12px;color:var(--mut)}
.lv-r em,.ib-r em,.ms-r em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--mut)}
.lv-r .av{position:relative}.lv-r .av:after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;border:2px solid #fff;background:#bbb}
.lv-r.busy .av:after{background:#d0553a}.lv-r.free .av:after{background:var(--acc)}
.lv-r.busy em{font:12px ui-monospace,Menlo,monospace;color:#b4452f}
.lv-in{display:flex;align-items:center;gap:10px;align-self:center;padding:7px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px}
.sl-pane.on .sc-live .lv-in{animation-delay:1.8s}
.sl-pane.on .lv-r.free{animation:scpop .55s var(--out) .5s both,lvring 1s 2.2s 3}
@keyframes lvring{50%{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}}

/* call-back list: one gets done, the count drops, a note is left */
.ms-r .ck{width:18px;height:18px;border-radius:6px;border:2px solid #d7d5cd;flex:none}
.ms-r em{color:var(--acc-2);font-weight:500}
.sl-pane.on .ms-r:first-of-type{animation:scpop .55s var(--out) .5s both,msdone .4s 2s forwards}
.sl-pane.on .ms-r:first-of-type .ck{animation:msck .3s 2s forwards}
.sl-pane.on .ms-r:first-of-type em{animation:msem .3s 2s forwards}
@keyframes msdone{to{opacity:.55}}@keyframes msck{to{background:var(--acc);border-color:var(--acc)}}@keyframes msem{to{opacity:0}}
.sc-missed .cnt{position:relative;display:inline-block;width:22px;height:22px;overflow:hidden;border-radius:999px;background:#fbf4e6;color:#9a6a1c;font:600 12px var(--sans);text-align:center}
.sc-missed .cnt i{position:absolute;left:0;right:0;top:3px;font-style:normal}.sc-missed .cnt i+i{top:100%}
.sl-pane.on .sc-missed .cnt i{animation:mscnt .35s 2.1s forwards}
@keyframes mscnt{to{transform:translateY(-22px)}}
.sl-pane.on .sc-missed .ms-note{animation-delay:2.8s}

/* browser phone: rings, gets answered, in-call controls */
.ph-card{position:relative;display:grid;justify-items:center;gap:4px;padding:24px 18px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center}
.ph-card .ring{width:44px;height:44px;margin-bottom:8px}.ph-card small{font-size:12px;color:var(--mut)}.ph-card b{font:500 20px var(--serif)}
.ph-who{font-size:12.5px;color:var(--mut)}
.ph-btns,.ph-on{display:flex;gap:10px;margin-top:14px}
.ph-btns span{padding:9px 18px;border-radius:999px;font-size:13px;font-weight:500}.ph-btns .no{background:#fdf1ee;color:#b4452f}.ph-btns .yes{background:var(--acc);color:#fff}
.ph-on{position:absolute;bottom:18px;left:0;right:0;justify-content:center;opacity:0}
.ph-on span{padding:7px 12px;border-radius:999px;background:var(--panel);font-size:12px}.ph-on .t{background:var(--ink);color:#fff;font-family:ui-monospace,Menlo,monospace}
.sl-pane.on .ph-btns .yes{animation:phyes .3s 1.8s forwards}
.sl-pane.on .ph-btns{animation:msem .2s 2.1s forwards}
.sl-pane.on .ph-on{animation:scfade .4s 2.2s forwards}
.sl-pane.on .ph-card .ring i{animation-iteration-count:2}
@keyframes phyes{to{transform:scale(.92)}}
.sl-pane.on .sc-phone .sc-tag{animation-delay:2.6s}

/* inbox: conversations drop in, the new one glows, AI summary */
.ib-r .av{background:var(--acc)}.ib-r.warn em{color:#9a6a1c}.ib-r.new em{color:var(--acc-2)}
.sl-pane.on .ib-r.new{animation:scpop .55s var(--out) .5s both,lvring 1s 1.2s 2}
.sl-pane.on .sc-inbox .sc-card{animation-delay:2.4s}

/* menu chatbot: buttons, one gets tapped, answer */
.mn-btns{display:flex;flex-wrap:wrap;gap:6px}
.mn-btns span{font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--acc);color:var(--acc-2);background:#fff}
.sl-pane.on .mn-btns .pick{animation:mnpick .3s 1.5s forwards}
@keyframes mnpick{to{background:var(--acc);color:#fff;transform:scale(.96)}}
.sl-pane.on .sc-menu .b:nth-of-type(2){animation-delay:2s}.sl-pane.on .sc-menu .b:nth-of-type(3){animation-delay:2.7s}

/* website call rings the team: three dashboards ring, one answers */
.rt-page{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:12px;color:var(--mut)}
.rt-btn{padding:6px 12px;border-radius:999px;background:var(--acc);color:#fff;font-weight:500}
.sl-pane.on .rt-btn{animation:phyes .25s .9s 2 alternate}
.rt-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rt-d{display:grid;justify-items:center;gap:4px;padding:14px 8px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:12.5px}
.rt-d small{font-size:11px;color:var(--mut)}.rt-d .ring{width:22px;height:22px;margin-bottom:4px}
.sl-pane.on .rt-d:not(.won){animation:scpop .5s var(--out) both,msdone .3s 2.6s forwards}
.sl-pane.on .rt-d.won{animation:scpop .5s var(--out) both,rtwon .3s 2.6s forwards}
@keyframes rtwon{to{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}}
.sl-pane.on .sc-ringteam .sc-tag{animation-delay:3s}

/* allowed websites: two pass, a copycat is blocked */
.dm-r{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font:13px ui-monospace,Menlo,monospace}
.dm-r i{width:16px;height:16px;border-radius:50%;flex:none;background:var(--acc)}
.dm-r.bad i{background:#d0553a}.dm-r em{margin-left:auto;font:500 11.5px var(--sans);font-style:normal;color:#b4452f;opacity:0}
.sl-pane.on .dm-r.bad{animation:scpop .55s var(--out) 1.3s both,dmshake .4s 2s}
.sl-pane.on .dm-r.bad em{animation:scfade .3s 2s forwards}
@keyframes dmshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* opt-out: the number is marked do-not-call */
.op-r{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #efd0c8;font-size:13px}
.op-r em{font-style:normal;font-size:11.5px;color:#b4452f;font-weight:500}
.sl-pane.on .sc-opt .op-r{animation-delay:2.4s}.sl-pane.on .sc-opt .sc-tag{animation-delay:3s}

/* talk or type: a switch flips between voice and chat */
.tt-sw{position:relative;align-self:center;display:grid;grid-template-columns:1fr 1fr;width:180px;padding:3px;border-radius:999px;background:#e9e8e3;font-size:12.5px;font-weight:500;text-align:center}
.tt-sw span{position:relative;z-index:1;padding:6px 0}
.tt-sw i{position:absolute;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sl-pane.on .tt-sw i{animation:ttsw 8s var(--expo) infinite}
@keyframes ttsw{0%,45%{left:3px}50%,95%{left:50%}100%{left:3px}}
.tt-voice,.tt-chat{grid-area:1/1}
.sc-tt{display:grid!important;grid-template-rows:auto 1fr;gap:16px}
.tt-voice{display:grid;justify-items:center;gap:10px;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.tt-voice .orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#9fe0b0 30%,var(--acc) 70%)}
.tt-voice .bars{display:flex;gap:3px;height:20px}.tt-voice .bars i{width:3px;height:100%;border-radius:2px;background:var(--acc);animation:sllevel 1s ease-in-out infinite}
.tt-voice .bars i:nth-child(2n){animation-delay:-.4s}.tt-voice .bars i:nth-child(3n){animation-delay:-.7s}
.tt-voice small{font-size:12px;color:var(--mut)}
.tt-chat{display:flex;flex-direction:column;gap:8px;justify-content:center}
.sc-tt>.tt-voice,.sc-tt>.tt-chat{grid-row:2;grid-column:1}
.sl-pane.on .sc-tt>.tt-voice{animation:ttv 8s infinite}.sl-pane.on .sc-tt>.tt-chat{animation:ttc 8s infinite}
@keyframes ttv{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes ttc{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){.sl-pane.on .sc *{animation:none!important}.pl-fill{clip-path:inset(0 40% 0 0)}.pl-head{left:60%}.ph-on{opacity:1;position:static}.ph-btns{display:none}
  .sc-tt>.tt-chat{opacity:0}.dm-r em{opacity:1}}