/* ==========================================================================
   KuduDoc — loading state
   The four bars of the mark, pulsing left to right.

   The mark is already four vertical strokes of different heights, so it does
   not need a spinner bolted onto it: the bars themselves are the animation.
   Each one stretches and settles in turn, which reads as a wave travelling
   left to right and lands back where it started, so a long wait looks like
   the same motion repeating rather than something stuck.

   scaleY on each <path> with transform-origin at its own centre, so a bar
   grows from the middle in both directions and the mark keeps its optical
   centre line. transform-box: fill-box is what makes a percentage origin
   resolve against the path's own box rather than the SVG viewport.
   ========================================================================== */

.kd-loader{
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.kd-loader__mark{ overflow: visible; flex-shrink: 0; }
.kd-loader__mark .logo-mark__bar{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: kd-load-pulse 1.15s var(--ease-in-out, cubic-bezier(.4, 0, .2, 1)) infinite;
}
/* The stagger is the whole effect: without it four bars breathe in unison and
   it reads as a heartbeat rather than as progress moving across. */
.kd-loader__mark .logo-mark__bar:nth-child(1){ animation-delay: 0ms; }
.kd-loader__mark .logo-mark__bar:nth-child(2){ animation-delay: 110ms; }
.kd-loader__mark .logo-mark__bar:nth-child(3){ animation-delay: 220ms; }
.kd-loader__mark .logo-mark__bar:nth-child(4){ animation-delay: 330ms; }

@keyframes kd-load-pulse{
  0%, 100% { transform: scaleY(0.48); }
  45%      { transform: scaleY(1.16); }
}

/* Optional line under the mark. Kept quiet — a loading screen that shouts is
   a loading screen you notice, and the point is not to be noticed. */
.kd-loader__label{
  font-size: var(--text-small); color: var(--text-tertiary);
  letter-spacing: .01em;
}

/* Full-screen variant, for a cold start where there is nothing else to show. */
.kd-loader--screen{
  position: fixed; inset: 0; z-index: 200;
  justify-content: center;
  background: var(--surface-page);
}
.kd-loader--screen[hidden]{ display: none; }

/* Inline variant, for a panel that is filling in while the page around it
   stays put. */
.kd-loader--inline{ padding-block: var(--space-9); }

/* An animation somebody cannot switch off is a problem, not a flourish. The
   bars hold their real heights and the whole mark breathes once a second
   instead, which still says "working" without anything travelling.

   !important is load-bearing here, not laziness. base.css carries the usual
   blanket reduced-motion reset — `*, *::before, *::after { animation-duration:
   .01ms !important; animation-iteration-count: 1 !important; }` — and without
   matching it, that rule wins and this fallback resolves to a single 0.01ms
   pass. Measured: animationDuration computes to 1e-05s. The mark would then sit
   completely still, which on a LOADING state is worse than no animation
   anywhere else, because stillness is exactly what "nothing is happening" looks
   like. The blanket reset is right for decorative motion and wrong for the one
   element whose entire job is to say "still working". */
@media (prefers-reduced-motion: reduce){
  .kd-loader__mark .logo-mark__bar{ animation: none !important; }
  .kd-loader__mark{ animation: kd-load-fade 1.6s ease-in-out infinite !important; }
  @keyframes kd-load-fade{ 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
}

/* --------------------------------------------------------------------------
   In a button.
   .is-busy already exists in app-micro.css (dims and blocks pointer events);
   this only adds the layout the mark needs beside a label.

   currentColor rather than a per-variant rule: the bars then inherit whatever
   the button's own text colour is, so one declaration covers primary (white on
   blue), secondary (blue on white) and danger without any of them being
   enumerated here — and a new button variant gets it for free.
   -------------------------------------------------------------------------- */
.btn.is-busy{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.is-busy .logo-mark__bar{ stroke: currentColor; }
.kd-btn__busy-label{ line-height: 1; }

/* The mark inline beside a line of text — the AI "Reading 3 documents…" row.
   Sized down to 22px so it sits on the text baseline rather than dominating it. */
.aq-thinking__mark{ flex-shrink: 0; }