/* PaperOS PaperLoader from getpaper 07f0f58; colors use the V2 theme. */
.loader {
  --loader-dur: 4.5s;
  --loader-ink: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.loader--sm {
  width: 24px;
  --loader-dur: 2.4s;
}

.loader--md {
  width: 72px;
}

.loader__rotor {
  position: relative;
  width: 70.7%;
  height: 70.7%;
  animation: loader-rotate var(--loader-dur) linear infinite both;
}

.loader__body,
.loader__crease,
.loader__flap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.loader path {
  fill: none;
  stroke: var(--loader-ink);
  stroke-width: 10;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.loader__crease {
  animation: loader-crease var(--loader-dur) linear infinite both;
}

.loader__crease path {
  stroke-linecap: butt;
}

.loader__flap {
  transform-origin: 72.5% 27.5%;
  animation: loader-fold var(--loader-dur) linear infinite both;
}

.loader__scribble {
  position: absolute;
  left: 20%;
  height: 7%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.loader__scribble--1 {
  top: 29%;
  width: 55%;
  animation: loader-scribble-1 var(--loader-dur) linear infinite both;
}

.loader__scribble--2 {
  top: 48%;
  width: 58%;
  animation: loader-scribble-2 var(--loader-dur) linear infinite both;
}

.loader__scribble--3 {
  top: 67%;
  width: 38%;
  animation: loader-scribble-3 var(--loader-dur) linear infinite both;
}

.loader--sm .loader__scribble {
  display: none;
}

@keyframes loader-rotate {
  0%,
  6% {
    transform: rotate(-45deg);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  18%,
  72% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  86%,
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes loader-fold {
  0%,
  6% {
    transform: rotate3d(1, 1, 0, 180deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  18%,
  72% {
    transform: rotate3d(1, 1, 0, 0deg);
    animation-timing-function: cubic-bezier(0.7, 0, 0.5, 1);
  }
  86%,
  100% {
    transform: rotate3d(1, 1, 0, 180deg);
  }
}

@keyframes loader-crease {
  0%,
  7% {
    opacity: 1;
  }
  14%,
  78% {
    opacity: 0;
  }
  86%,
  100% {
    opacity: 1;
  }
}

@keyframes loader-scribble-1 {
  0%,
  18% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  25%,
  62% {
    transform: scaleX(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  }
  68%,
  100% {
    transform: scaleX(0);
  }
}

@keyframes loader-scribble-2 {
  0%,
  25% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  32%,
  64% {
    transform: scaleX(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  }
  70%,
  100% {
    transform: scaleX(0);
  }
}

@keyframes loader-scribble-3 {
  0%,
  32% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  39%,
  66% {
    transform: scaleX(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  }
  72%,
  100% {
    transform: scaleX(0);
  }
}


/* Style guide button feedback: preserve the label width while the dots pulse. */
.button.is-loading {position:relative;opacity:1;cursor:wait}
.button.is-loading .button-label {opacity:0}
.button.is-loading::after {content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:-10px 0 currentColor,10px 0 currentColor;animation:button-busy 900ms ease-in-out infinite alternate}
@keyframes button-busy {from{opacity:.35}to{opacity:1}}
.loading-status {display:flex;align-items:center;gap:16px;color:var(--accent);font-size:13px;min-height:64px}
.work-questionnaires>.loading-status {justify-content:center;min-height:220px;padding:32px;text-align:center}
#connection-status {display:inline-flex;align-items:center;gap:8px}
#agent-working {display:flex;align-items:center;gap:8px;animation:feedback-enter 280ms cubic-bezier(.22,1,.36,1) both}
#agent-working .loader {width:18px}
.message-text:not(:empty)~#agent-working,.tool-call~#agent-working {margin-top:10px}
/* A running tool row already shows its own spinner. */
.message-content:has(.tool-call.is-running) #agent-working {display:none}
#agent-stage {font-size:12px;color:var(--muted)}
.tool-call summary>.loader {width:18px;vertical-align:middle;margin-right:7px}
@keyframes feedback-enter {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes loader-pulse {0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce) {
  .loader__rotor {animation:loader-pulse 1.6s linear infinite both}
  .loader__flap,.loader__crease,.loader__scribble {animation:none}
  .loader__flap {transform:rotate3d(1,1,0,180deg)}
  #agent-working {animation:none}
  .resource-chevron {transition:none}
}