/* web/components/loader/loader.css — [MINE1 loader-v1]
   The app-wide "working on it" overlay (everything except chat turns, which
   keep their own typing indicator). One element, mounted lazily by
   components/loader/loader.js. Tokens only (theme_b.css), so it follows
   light/dark on its own. */

#dl-root { position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  display: none; font-family: inherit; }
#dl-root.on { display: block; }
#dl-root .dl-scrim { position: absolute; inset: 0;
  background: color-mix(in srgb, var(--tb-bg, #0b0f1e) 42%, transparent);
  backdrop-filter: blur(5px) saturate(1.05); -webkit-backdrop-filter: blur(5px) saturate(1.05);
  opacity: 0; transition: opacity 220ms ease; pointer-events: auto; }
#dl-root.on .dl-scrim { opacity: 1; }
#dl-root.mini .dl-scrim { opacity: 0; pointer-events: none; }

/* ---- the card ---- */
#dl-root .dl-card { position: absolute; left: 50%; top: 50%;
  width: min(380px, calc(100vw - 32px));
  transform: translate(-50%, -50%) scale(.96); opacity: 0;
  background: var(--tb-surface, var(--surface, #141a33));
  color: var(--tb-text, var(--text, #e8ebf7));
  border: 1px solid var(--tb-border, var(--border, rgba(255,255,255,.12)));
  border-radius: var(--tb-radius-dialog, 18px);
  box-shadow: var(--tb-shadow-dialog, 0 24px 60px rgba(0,0,0,.45));
  padding: 26px 24px 18px; pointer-events: auto;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.9,.3,1.2);
  text-align: center; overflow: hidden; }
#dl-root.on .dl-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#dl-root.mini .dl-card { opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.9); }
#dl-root .dl-card::before { content: ""; position: absolute; inset: -40% -20% auto;
  height: 70%; pointer-events: none; opacity: .55;
  background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--tb-accent, #3563ff) 28%, transparent), transparent 70%),
              radial-gradient(50% 50% at 75% 30%, color-mix(in srgb, var(--tb-lilac, #b8a6ff) 26%, transparent), transparent 70%);
  animation: dl-drift 9s ease-in-out infinite alternate; }

/* ---- the orb: three blobs that keep morphing, plus two orbiting sparks ---- */
.dl-orb { position: relative; width: 84px; height: 84px; margin: 0 auto 16px; }
.dl-blob { position: absolute; inset: 8px; border-radius: 42% 58% 61% 39% / 45% 42% 58% 55%;
  filter: blur(.3px); opacity: .92;
  animation: dl-morph 5.5s ease-in-out infinite, dl-spin 11s linear infinite; }
.dl-blob.b1 { background: linear-gradient(135deg, var(--tb-accent, #3563ff), color-mix(in srgb, var(--tb-accent, #3563ff) 40%, #7fd3ff)); }
.dl-blob.b2 { background: linear-gradient(135deg, var(--tb-lilac, #b8a6ff), #ff9ad5);
  animation-duration: 6.5s, 14s; animation-direction: normal, reverse; inset: 18px 4px 4px 22px; opacity: .8; }
.dl-blob.b3 { background: linear-gradient(135deg, var(--tb-success, #c6f24e), #5ee7c9);
  animation-duration: 7.2s, 9s; inset: 6px 24px 24px 8px; opacity: .72; }
.dl-spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--tb-accent, #3563ff) 60%, #fff);
  transform-origin: 0 0; animation: dl-orbit 2.6s linear infinite; }
.dl-spark.s2 { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; animation-duration: 3.9s; animation-delay: -1.3s;
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--tb-success, #c6f24e) 60%, #fff); }
.dl-ring { position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--tb-text, #fff) 22%, transparent);
  animation: dl-spin 16s linear infinite reverse; }

/* done / fail morph */
#dl-root.done .dl-blob, #dl-root.fail .dl-blob, #dl-root.done .dl-spark, #dl-root.fail .dl-spark,
#dl-root.done .dl-ring, #dl-root.fail .dl-ring { animation-play-state: paused; opacity: 0; transition: opacity 160ms ease; }
.dl-mark { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.4);
  transition: opacity 180ms ease, transform 320ms cubic-bezier(.2,1.4,.4,1); }
.dl-mark svg { width: 56px; height: 56px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dl-mark.ok svg { stroke: var(--tb-success-text, #c6f24e); }
.dl-mark.ok svg path { stroke-dasharray: 40; stroke-dashoffset: 40; }
#dl-root.done .dl-mark.ok { opacity: 1; transform: scale(1); }
#dl-root.done .dl-mark.ok svg path { animation: dl-draw 420ms 120ms ease forwards; }
.dl-mark.bad svg { stroke: var(--tb-danger, #ff5c7a); }
#dl-root.fail .dl-mark.bad { opacity: 1; transform: scale(1); }
#dl-root.fail .dl-card { animation: dl-shake 420ms ease; }

/* ---- words ---- */
.dl-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; line-height: 1.3; }
.dl-sub { height: 22px; position: relative; color: var(--tb-text-secondary, var(--text-muted, #aab1d6)); font-size: 13.5px; }
.dl-sub span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-sub span.on { opacity: 1; transform: translateY(0); }
.dl-sub span.off { opacity: 0; transform: translateY(-6px); }

/* ---- bar ---- */
.dl-bar { height: 4px; border-radius: 999px; margin: 16px 6px 12px; overflow: hidden;
  background: color-mix(in srgb, var(--tb-text, #fff) 10%, transparent); }
.dl-bar i { display: block; height: 100%; width: 38%; border-radius: inherit;
  background: linear-gradient(90deg, var(--tb-accent, #3563ff), var(--tb-lilac, #b8a6ff), var(--tb-success, #c6f24e));
  animation: dl-slide 1.5s cubic-bezier(.4,0,.2,1) infinite; }
#dl-root.done .dl-bar i { width: 100%; animation: none; transition: width 300ms ease; }

/* ---- footer ---- */
.dl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl-elapsed { font-size: 12px; color: var(--tb-text-muted, #8d94ba); font-variant-numeric: tabular-nums; }
.dl-steps { display: flex; gap: 5px; }
.dl-steps b { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--tb-text, #fff) 18%, transparent); }
.dl-steps b.on { background: var(--tb-accent, #3563ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-accent, #3563ff) 22%, transparent); }
.dl-steps b.done { background: var(--tb-success, #c6f24e); }
.dl-btn { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--tb-border-strong, var(--border-2, rgba(255,255,255,.2)));
  background: transparent; color: var(--tb-text-secondary, #aab1d6); }
.dl-btn:hover { background: var(--tb-surface-2, rgba(255,255,255,.06)); color: var(--tb-text, #fff); }

/* ---- minimised pill (bottom-right) ---- */
.dl-pill { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px; border-radius: 999px; pointer-events: auto; cursor: pointer;
  background: var(--tb-surface, #141a33); color: var(--tb-text, #e8ebf7);
  border: 1px solid var(--tb-border, rgba(255,255,255,.12));
  box-shadow: var(--tb-shadow-float, 0 10px 30px rgba(0,0,0,.35));
  opacity: 0; transform: translateY(12px); transition: opacity 200ms ease, transform 220ms ease; }
#dl-root.mini .dl-pill { opacity: 1; transform: translateY(0); }
.dl-pill .dl-orb { width: 26px; height: 26px; margin: 0; }
.dl-pill .dl-blob { inset: 2px; }
.dl-pill .dl-spark, .dl-pill .dl-ring { display: none; }
.dl-pill .t { font-size: 12.5px; font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-pill .n { font-size: 11px; color: var(--tb-text-muted, #8d94ba); }

@keyframes dl-morph {
  0%   { border-radius: 42% 58% 61% 39% / 45% 42% 58% 55%; }
  33%  { border-radius: 58% 42% 37% 63% / 60% 55% 45% 40%; }
  66%  { border-radius: 36% 64% 58% 42% / 42% 60% 40% 58%; }
  100% { border-radius: 42% 58% 61% 39% / 45% 42% 58% 55%; } }
@keyframes dl-spin { to { transform: rotate(360deg); } }
@keyframes dl-orbit { from { transform: rotate(0deg) translateX(38px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(38px) rotate(-360deg); } }
@keyframes dl-slide { 0% { transform: translateX(-120%); } 60% { transform: translateX(160%); } 100% { transform: translateX(300%); } }
@keyframes dl-drift { from { transform: translate(-3%, 0) rotate(-2deg); } to { transform: translate(4%, 6%) rotate(3deg); } }
@keyframes dl-draw { to { stroke-dashoffset: 0; } }
@keyframes dl-shake { 0%,100% { transform: translate(-50%, -50%); } 20% { transform: translate(calc(-50% - 7px), -50%); }
  40% { transform: translate(calc(-50% + 6px), -50%); } 60% { transform: translate(calc(-50% - 4px), -50%); } 80% { transform: translate(calc(-50% + 3px), -50%); } }

@media (prefers-reduced-motion: reduce) {
  .dl-blob, .dl-spark, .dl-ring, .dl-bar i, #dl-root .dl-card::before { animation: none !important; }
  .dl-bar i { width: 100%; opacity: .6; }
  #dl-root .dl-card, .dl-pill, .dl-sub span { transition: none !important; }
}