/* Collaborate & Approve — Moment 02b.
   The approval panel from Figma, with the agent's answer running inside its grey area.
   "Total 5 Approval" opens the Approvers list; "Send Back" opens the Collaboration view. */
.ca{position:relative;width:100%;max-width:658px;margin:0 auto}   /* never wider than the image itself, so it isn't stretched */
.ca-panel{position:relative;width:100%;aspect-ratio:658/674;box-sizing:border-box;border:1px solid #E7E9EF}
.ca-panel > img{display:block;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none}

/* the grey content area (measured on the 658x674 frame) */
.ca-feed{position:absolute;left:3.80%;top:15.43%;width:92.40%;height:58.61%;overflow-y:auto;overflow-x:hidden;background:#F2F3F8;scrollbar-width:none;overscroll-behavior:contain}
.ca-feed::-webkit-scrollbar{display:none}
.ca-chat{width:96.05%;margin-left:1.97%;padding-bottom:8px}
.ca-msg{position:relative;width:100%;background-repeat:no-repeat;background-size:100% auto;animation:caIn .35s cubic-bezier(.2,.7,.2,1) both}
/* the live spider inside the radar message (same geometry as the vendor page, scaled to this chart) */
.sp.sp--chat{left:28.37%;top:0;width:44.38%;height:100%}
.sp--chat .sp-svg{overflow:hidden}
@keyframes caIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ca-typing{display:flex;padding:8px 0 6px 2%}
.ca-typing.right{justify-content:flex-end;padding:8px 0 6px 0}
.ca-typing span{display:inline-flex;gap:4px;background:#fff;border-radius:12px;padding:11px 13px;box-shadow:0 1px 2px rgba(27,39,54,.06)}
.ca-typing.right span{background:linear-gradient(135deg,#E6E4F7,#DDF5EE)}
.ca-typing i{width:5px;height:5px;border-radius:50%;background:#8a90a8;animation:caBlink 1s infinite}
.ca-typing i:nth-child(2){animation-delay:.15s}.ca-typing i:nth-child(3){animation-delay:.3s}
@keyframes caBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* hotspots */
.ca-hit{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:6px;z-index:3}
.ca-hit::after{content:"";position:absolute;inset:-5px;border-radius:9px;border:2px solid #2D8DE7;opacity:0;animation:caPulse 2.4s ease-out 1;pointer-events:none}
.ca-hit:hover::after{animation:none;opacity:1}
.ca-hit:focus-visible{outline:2px solid #2D8DE7;outline-offset:3px}
.ca-hit--approvals{left:3.5%;top:83.1%;width:28.6%;height:3.4%}
.ca-hit--sendback{left:76.3%;top:83.2%;width:10.15%;height:3.15%;animation-delay:1.2s}
.ca-hit--sendback::after{animation-delay:1.2s}
.ca-hit--approve{left:91.5%;top:82.8%;width:3.8%;height:3.7%;animation-delay:.6s}
.ca-hit--approve::after{animation-delay:.6s}
.ca.has-open .ca-hit::after{animation:none;opacity:0}
@keyframes caPulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}

/* Approvers — opens just above the "Total 5 Approval" row */
.ca-pop{position:absolute;left:1.06%;bottom:18%;width:106.5%;z-index:6;opacity:0;transform:translateY(8px) scale(.98);transform-origin:12% 100%;pointer-events:none;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.ca-pop.open{opacity:1;transform:none;pointer-events:auto}
.ca-pop img{display:block;width:100%;height:auto;max-width:none}

/* Collaboration — a modal over the page */
.ca-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(10,12,30,.42);opacity:0;pointer-events:none;transition:opacity .25s ease}
.ca-modal.open{opacity:1;pointer-events:auto}
.ca-modal-box{position:relative;width:min(1197px,100%,calc((100vh - 48px) * 1197 / 752));border-radius:12px;overflow:visible;transform:translateY(12px) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ca-modal--confirm .ca-modal-box{width:min(480px,100%,calc((100vh - 48px) * 440 / 220))}
.ca-modal.open .ca-modal-box{transform:none}
.ca-modal-box img{display:block;width:100%;height:auto;max-width:none;border-radius:12px;box-shadow:0 24px 70px rgba(10,2,6,.3)}

/* close buttons */
.ca-close{position:absolute;top:-12px;right:-12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #E8EBF2;color:#1B2736;cursor:pointer;box-shadow:0 2px 8px rgba(10,2,6,.14);z-index:2;transition:background .15s}
.ca-close:hover{background:#F5F7FB}
.ca-close:focus-visible{outline:2px solid #2D8DE7;outline-offset:2px}
.ca-pop .ca-close{top:-10px;right:-10px}

@media (max-width:640px){
  .ca-pop{width:100%;left:0}
  .ca-close{top:-10px;right:-6px;width:28px;height:28px}
}
@media (prefers-reduced-motion: reduce){
  .ca-msg{animation:none}
  .ca-hit::after{animation:none;opacity:.8}
  .ca-pop,.ca-modal,.ca-modal-box{transition:none}
}

/* UX delight — onboarding pace in the approval bar (Figma 1057:438409; sized on the 658px frame, em scales with the panel) */
.ca-panel{container-type:inline-size}
.ca-pace{position:absolute;left:54.7%;top:84.7%;z-index:4;display:inline-flex;align-items:center;gap:.7em;white-space:nowrap;
  font:400 8.5px/1.43 'Inter',-apple-system,sans-serif;font-size:min(8.5px,1.3cqw);color:#1B2736;
  padding:.47em 1.17em .47em .94em;border-radius:1.4em;background:rgba(33,238,199,.1);cursor:pointer;outline:none;
  opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.ca-pace.on{opacity:1;transform:translate(-50%,-50%)}
.ca-pace:focus-visible{box-shadow:0 0 0 2px #2D8DE7}
.ca-pace-ico{width:1.36em;height:1.36em;flex:none;overflow:visible}
.ca-pace.on .ca-pace-ico{animation:caRocket 1.6s ease-in-out}
.ca-pace.done .ca-pace-ico{animation:caLift .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes caRocket{0%,100%{transform:none}20%,60%{transform:translateY(-1px) rotate(-4deg)}40%,80%{transform:translateY(1px) rotate(4deg)}}
@keyframes caLift{0%{transform:none}45%{transform:translateY(-3px)}100%{transform:none}}
.ca-pace-t{font-variant-numeric:tabular-nums}
.ca-pace-fast{color:#4AB261;max-width:0;opacity:0;overflow:hidden;margin-left:-.7em;transition:max-width .6s cubic-bezier(.2,.7,.2,1),opacity .4s ease .15s,margin .6s}
.ca-pace.done .ca-pace-fast{max-width:16em;opacity:1;margin-left:0}
/* compare tooltip */
.ca-pace-tip{position:absolute;left:50%;bottom:calc(100% + .7em);display:grid;gap:.7em;padding:1.17em 1.41em;background:#fff;border:1px solid #E8EBF2;border-radius:.94em;
  font-size:12px;
  box-shadow:0 .7em 2.1em rgba(10,2,6,.12);pointer-events:none;opacity:0;transform:translate(-50%,.4em);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.ca-pace.tip .ca-pace-tip{opacity:1;transform:translate(-50%,0)}
.ca-pace-row{display:flex;align-items:center;gap:.94em}
.ca-pace-row span{width:8.2em;color:#6E7DAD}
.ca-pace-row i{position:relative;width:12.9em;height:.7em;border-radius:.35em;background:#EEF0F5;overflow:hidden}
.ca-pace-row em{font-style:normal;color:#1B2736}
.ca-pace-bar{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;width:0;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.ca-pace-bar--me{background:#21EEC7}.ca-pace-bar--avg{background:#D1D7E5;transition-delay:.1s}
.ca-pace.tip .ca-pace-bar--me{width:39%}
.ca-pace.tip .ca-pace-bar--avg{width:100%}
/* reads as interactive, like the other hotspots: pulsing ring invites the click —
   first to play the count-up, then again (once done) to open the compare tooltip */
.ca-pace::after{content:"";position:absolute;inset:-5px;border-radius:1.9em;border:2px solid #2D8DE7;opacity:0;pointer-events:none}
.ca-pace.on:not(.done)::after,.ca-pace.done::after{animation:caPulse 2.4s ease-out .6s 1}
.ca-pace.tip::after{animation:none;opacity:0}
.ca.has-open .ca-pace::after{animation:none;opacity:0}
@media (prefers-reduced-motion: reduce){.ca-pace,.ca-pace-fast,.ca-pace-tip,.ca-pace-bar{transition:none}.ca-pace-ico{animation:none!important}.ca-pace.done::after{animation:none;opacity:.8}}

/* controls: pause / play and restart, under the panel (same look as the onboarding slider) */
.ca-ctl{display:flex;justify-content:center;gap:6px;margin-top:16px}
.ca-ctl button{width:32px;height:32px;padding:0;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #E8EBF2;color:#1B2736;cursor:pointer;box-shadow:0 1px 4px rgba(10,2,6,.06);transition:background .2s,border-color .2s}
.ca-ctl button:hover{background:#F5F7FB;border-color:#D5DAE6}
.ca-ctl button:focus-visible{outline:2px solid #2c4283;outline-offset:2px}
.ca-ctl button[aria-pressed="true"]{border-color:#2c4283}
.ca.is-paused .ca-typing i{animation-play-state:paused}