/* Decorative beetles from the agency-caller preview, confined to their own scene. */
.sidebar { overflow-y: auto; scrollbar-width: thin; }
.sidebar > .brand, .sidebar > .nav, .sidebar > .sidebar-actions { flex-shrink: 0; }
.caller-beetles { position: relative; }
.caller-beetles-sidebar { height: 142px; min-height: 142px; width: 100%; overflow: hidden; border-bottom: 1px solid var(--border); background: radial-gradient(ellipse at 50% 100%, rgb(139 80 200 / .07), transparent 70%); }
.caller-beetle-scene { pointer-events: none; }
.caller-beetles-sidebar .caller-beetle-scene { position: absolute; top: 0; left: 50%; width: 224px; height: 132px; transform: translateX(-50%); }
.caller-beetles-sidebar::before { content: ""; position: absolute; bottom: 20px; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgb(176 123 224 / .18), transparent); }
.caller-beetle-walker { position: absolute; top: 0; left: 0; width: 42px; height: 54px; pointer-events: none; }
.caller-beetle { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 3px rgb(0 0 0 / .45)); }
.caller-beetle .legs-a { transform-origin: 32px 39px; animation: caller-legs-a .48s ease-in-out infinite alternate; }
.caller-beetle .legs-b { transform-origin: 32px 39px; animation: caller-legs-b .48s ease-in-out infinite alternate; }
.caller-beetle .antenna { transform-origin: 32px 22px; animation: caller-feel 1.8s ease-in-out infinite alternate; }
.caller-beetles-sidebar .caller-beetle-walker-a { animation: caller-walk-a 27s linear infinite; animation-delay: -5s; }
.caller-beetle-walker-b { width: 33px; height: 44px; opacity: .85; animation: caller-walk-b 34s linear infinite; animation-delay: -13s; }
.caller-beetle-walker-b .legs-a, .caller-beetle-walker-b .legs-b { animation-duration: .38s; }
.caller-beetle-toggle { position: absolute; bottom: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; padding: 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted, #a7a0b5); cursor: pointer; z-index: 2; }
.caller-beetle-toggle:hover { color: var(--text, #eee); background: rgb(167 125 244 / .10); border-color: var(--border); }
.caller-beetle-toggle:focus-visible { outline: 2px solid var(--primary, #a77df4); outline-offset: 2px; }
.caller-beetle-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.beetle-play-icon { display: none; }
.caller-beetles-paused .beetle-play-icon { display: block; }
.caller-beetles-paused .beetle-pause-icon { display: none; }
/* The walker stays in the border strip, clear of the login fields. */
.caller-beetles-login { position: absolute; inset: 0; pointer-events: none; }
.caller-beetles-login .caller-beetle-scene { position: absolute; inset: 3px; }
.caller-beetles-login .caller-beetle-walker { width: 18px; height: 23px; animation: caller-login-walk 35s linear infinite; animation-delay: -3s; }
.caller-beetles-login .caller-beetle-toggle { pointer-events: auto; bottom: 5px; right: 5px; }
.caller-beetles-paused .caller-beetle-walker, .caller-beetles-paused .caller-beetle g,
.caller-beetles-hidden .caller-beetle-walker, .caller-beetles-hidden .caller-beetle g { animation-play-state: paused; }
@keyframes caller-walk-a {
  0% { transform: translate(14px,68px) rotate(85deg); } 24% { transform: translate(111px,78px) rotate(92deg); }
  34% { transform: translate(159px,64px) rotate(48deg); } 43% { transform: translate(164px,31px) rotate(-15deg); }
  51% { transform: translate(145px,25px) rotate(-83deg); } 76% { transform: translate(55px,39px) rotate(-95deg); }
  87% { transform: translate(13px,41px) rotate(-160deg); } 94% { transform: translate(7px,64px) rotate(-235deg); }
  100% { transform: translate(14px,68px) rotate(-275deg); }
}
@keyframes caller-walk-b {
  0% { transform: translate(173px,91px) rotate(-85deg); } 31% { transform: translate(85px,97px) rotate(-94deg); }
  49% { transform: translate(35px,84px) rotate(-40deg); } 58% { transform: translate(40px,60px) rotate(28deg); }
  69% { transform: translate(77px,56px) rotate(95deg); } 90% { transform: translate(175px,70px) rotate(145deg); }
  96% { transform: translate(180px,86px) rotate(216deg); } 100% { transform: translate(173px,91px) rotate(275deg); }
}
@keyframes caller-legs-a { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes caller-legs-b { from { transform: rotate(7deg); } to { transform: rotate(-7deg); } }
@keyframes caller-feel { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes caller-login-walk {
  0% { left: 0; top: 0; transform: rotate(90deg); }
  24% { left: calc(100% - 18px); top: 0; transform: rotate(90deg); }
  27% { left: calc(100% - 18px); top: 0; transform: rotate(180deg); }
  48% { left: calc(100% - 18px); top: calc(100% - 23px); transform: rotate(180deg); }
  51% { left: calc(100% - 18px); top: calc(100% - 23px); transform: rotate(270deg); }
  74% { left: 0; top: calc(100% - 23px); transform: rotate(270deg); }
  77% { left: 0; top: calc(100% - 23px); transform: rotate(360deg); }
  97% { left: 0; top: 0; transform: rotate(360deg); }
  100% { left: 0; top: 0; transform: rotate(450deg); }
}
@media (prefers-reduced-motion: reduce) {
  .caller-beetle-walker, .caller-beetle g { animation: none !important; }
  .caller-beetles-sidebar .caller-beetle-walker-a { transform: translate(40px,60px) rotate(85deg); }
  .caller-beetle-walker-b { transform: translate(153px,70px) rotate(-85deg); }
  .caller-beetles-login .caller-beetle-walker { left: 35px; top: 0; transform: rotate(90deg); }
  .caller-beetle-toggle { display: none; }
}
@media (max-width: 720px) { .sidebar:not(.is-open) { overflow-y: visible; } }

/* A compact status for pending operations. It never blocks the page controls. */
.caller-loading[hidden] { display: none !important; }
.caller-loading { position: fixed; z-index: 1000; right: 20px; bottom: 20px; width: min(300px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--cp-card, #2a303b); color: var(--text, #eee); box-shadow: 0 10px 35px rgb(0 0 0 / .25); }
.caller-loading-label { margin: 5px 0 0; min-height: 1.4em; font-size: 12px; overflow-wrap: anywhere; }
.caller-beetles-loading { height: 48px; }
.caller-beetles-loading .caller-beetle-scene { position: absolute; inset: 0 28px 0 0; overflow: hidden; border-bottom: 1px dashed rgb(167 125 244 / .22); }
.caller-beetles-loading .caller-beetle-walker { width: 32px; height: 41px; top: 2px; transform: rotate(90deg); animation: caller-loading-walk 3.5s linear infinite; }
.caller-beetles-paused .caller-beetles-loading .caller-beetle-walker,
.caller-beetles-hidden .caller-beetles-loading .caller-beetle-walker { animation-play-state: paused; }
.caller-beetles-loading .caller-beetle-toggle { right: -8px; bottom: 7px; }
@keyframes caller-loading-walk {
    0% { left: 0; opacity: 0; } 10% { opacity: 1; }
    90% { opacity: 1; } 100% { left: calc(100% - 32px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .caller-beetles-loading .caller-beetle-walker { animation: none !important; left: calc(50% - 16px); opacity: 1; }
}
@media (max-width: 720px) { .caller-loading { right: 16px; bottom: 16px; } }