@layer components{.ccp{border-radius:var(--r-card);background:var(--bg-raised);border:1px solid var(--line);width:100%;max-width:420px;color:var(--text);margin:0;padding:8px;position:relative;box-shadow:inset 0 1px #ffffff0d}.ccp-screen{aspect-ratio:3/4;background:var(--bg);border:1px solid var(--line);border-radius:14px;flex-direction:column;padding:.75rem .9rem .85rem;display:flex}.ccp-top{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:.75rem;padding-bottom:.6rem;display:flex}.ccp-timer{font-family:var(--font-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--amber);font-size:.8125rem;display:inline-block}.ccp-caller{color:var(--text-muted);justify-content:space-between;align-items:baseline;gap:.75rem;margin-top:.65rem;font-size:.875rem;display:flex}.ccp-caller time{font-family:var(--font-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.ccp-core{justify-items:center;gap:.7rem;padding:.7rem 0 .25rem;display:grid}.ccp-ring{width:64px;height:64px;color:var(--amber);place-items:center;display:grid;position:relative}.ccp-ring-base,.ccp-pulse{border:1.5px solid var(--amber);border-radius:50%;position:absolute;inset:0}.ccp-pulse{pointer-events:none}.ccp-ring .icon{width:22px;height:22px;position:relative}.ccp-status{text-align:center;display:grid}.ccp-status>p{grid-area:1/1}.ccp-status--in{color:var(--text-muted);font-size:.9375rem;display:none}.ccp-status--ok{letter-spacing:-.01em;font-size:1rem;font-weight:560;line-height:1.3}.ccp-wave{height:28px;margin:.3rem 0 .55rem;position:relative}.ccp-wave:before{content:"";background:var(--line);height:1px;position:absolute;top:50%;left:0;right:0}.ccp-wave canvas{width:100%;height:100%;display:none;position:absolute;inset:0}.ccp-wave svg{width:100%;height:100%;display:block;position:relative;overflow:visible}.ccp-wave path{fill:none;stroke:var(--amber);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.ccp-lines{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.ccp-line{justify-items:start;gap:.2rem;max-width:86%;display:grid}.ccp-line[data-who=caller]{justify-self:end;justify-items:end}.ccp-who{font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-muted);padding:0 .3rem;font-size:.6875rem}.ccp-bubble{background:var(--bg-raised);border:1px solid var(--line);color:var(--text);overflow-wrap:break-word;border-radius:14px;margin:0;padding:.5rem .75rem;font-size:.875rem;line-height:1.4;box-shadow:inset 0 1px #ffffff0a}.ccp-line[data-who=agent] .ccp-bubble{border-bottom-left-radius:6px}.ccp-line[data-who=caller] .ccp-bubble{color:var(--text-muted);border-bottom-right-radius:6px}.ccp-booked{border-radius:var(--r-pill);background:var(--bg-raised);border:1px solid var(--line);height:28px;font-family:var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;align-self:center;align-items:center;gap:.45rem;margin:.7rem auto;padding:0 .8rem 0 .6rem;font-size:.75rem;display:inline-flex;box-shadow:inset 0 1px #ffffff0a}.ccp-check{flex:none;width:16px;height:16px}.ccp-check path{fill:none;stroke:var(--amber);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.ccp-foot{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.5rem .55rem;margin-top:auto;padding-top:.7rem;display:flex}.ccp-signoff{width:30px;height:30px;color:var(--amber);flex:none;place-items:center;display:grid;position:relative}.ccp-signoff svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.ccp-signoff circle{fill:none;stroke:var(--amber);stroke-width:2px}.ccp-signoff .icon{width:14px;height:14px;position:relative}.ccp-transfer{letter-spacing:-.01em;margin:0;font-size:.875rem;font-weight:560;line-height:1.3}.ccp-control{border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg-raised);height:36px;color:var(--text);transition:border-color var(--dur-fast), background-color var(--dur-fast);align-items:center;gap:.4rem;margin-left:auto;padding:0 .75rem 0 .6rem;font-size:.8125rem;font-weight:500;line-height:1;display:none}.ccp-control:hover{border-color:color-mix(in srgb, var(--amber) 55%, transparent);background:#ffbf000f}@media (max-width:1023px),(pointer:coarse){.ccp-control{height:44px;padding:0 .9rem 0 .75rem}}.ccp-control .icon{width:14px;height:14px;display:none}.ccp-ctl{display:none}.ccp[data-state=playing] .i-pause,.ccp[data-state=playing] .ccp-ctl--pause,.ccp[data-state=rest] .i-play,.ccp[data-state=paused] .i-play,.ccp[data-state=rest] .ccp-ctl--play,.ccp[data-state=paused] .ccp-ctl--play,.ccp[data-state=done] .i-replay,.ccp[data-state=done] .ccp-ctl--replay{display:block}@media (prefers-reduced-motion:no-preference){html.js:not([data-motion=reduced]) .ccp-control{display:inline-flex}html.js[data-motion=full] .ccp-wave canvas{display:block}html.js[data-motion=full] .ccp-wave svg{display:none}html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-status--in{display:block}html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-status--ok,html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-timer,html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-line,html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-booked,html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-transfer{clip-path:inset(0% 100% 0% 0%)}html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-line{transform:translateY(6px)}html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-booked{transform:scale(.96)}html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-check path,html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-signoff circle{stroke-dasharray:1;stroke-dashoffset:1px}html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-signoff svg,html.js:not([data-motion=reduced]) .ccp[data-state=rest] .ccp-signoff .icon{clip-path:circle(0%)}}@media (max-width:479px){.ccp-screen{padding:.7rem .8rem .8rem}.ccp-ring{width:60px;height:60px}.ccp-transfer{font-size:.8125rem}}@media (min-width:1280px){.ccp-screen{aspect-ratio:4/5}}.ccp[data-still]{width:420px;max-width:none}.ccp[data-still] .ccp-screen{aspect-ratio:3/4;padding:.75rem .9rem .85rem}.ccp[data-still] .ccp-ring{width:64px;height:64px}.ccp[data-still] .ccp-transfer{font-size:.875rem}html.js[data-motion=full] .ccp[data-still] .ccp-wave svg{display:block}}
