/* ============================================================================
 *  wlc-loading.css — loading-state visuals (u_44_load_1)
 *  Namespaced (.u44l-* / .wlc-spinner) so it cannot collide with existing CSS.
 * ==========================================================================*/

/* ---------- boot splash ---------- */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--bg, #0b0f14);
  color: var(--fg, #e6edf3);
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  transition: opacity .3s ease;
}
#boot-splash.u44l-fade { opacity: 0; pointer-events: none; }
.u44l-logo {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--accent, #58a6ff);
  animation: u44lPulse 1.4s ease-in-out infinite;
  text-shadow: 0 0 30px color-mix(in oklab, var(--accent, #58a6ff) 55%, transparent);
}
@keyframes u44lPulse {
  0%, 100% { opacity: .55; transform: scale(.98); }
  50%      { opacity: 1;   transform: scale(1);   }
}
.u44l-dots { display: flex; gap: 7px; }
.u44l-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent, #58a6ff);
  animation: u44lDot 1.2s ease-in-out infinite;
}
.u44l-dots span:nth-child(2) { animation-delay: .18s; }
.u44l-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes u44lDot {
  0%, 80%, 100% { transform: scale(.4); opacity: .35; }
  40%           { transform: scale(1);  opacity: 1;   }
}
.u44l-boot-text {
  font-size: 13px;
  color: var(--fg-mute, #5b6878);
  letter-spacing: .4px;
}
.u44l-boot-err {
  max-width: 380px;
  padding: 12px 16px;
  background: rgba(231,76,60,.12);
  border: 1px solid rgba(231,76,60,.42);
  border-radius: 8px;
  color: #ff8a80;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

/* ---------- inline spinner ---------- */
.wlc-spinner {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--accent, #58a6ff) 25%, transparent);
  border-top-color: var(--accent, #58a6ff);
  animation: wlcSpin .75s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes wlcSpin { to { transform: rotate(360deg); } }
.wlc-spinner.u44l-sm { width: 12px; height: 12px; border-width: 1.6px; }
.wlc-spinner.u44l-md { width: 16px; height: 16px; }
.wlc-spinner.u44l-lg { width: 24px; height: 24px; border-width: 3px; }

/* ---------- WS connection pill ---------- */
.u44l-ws-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--bg-2, #1a2230);
  border: 1px solid var(--border, #2a3546);
  color: var(--fg-dim, #8b96a5);
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: color .2s, border-color .2s;
}
.u44l-ws-pill .u44l-ws-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-mute, #5b6878);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--fg-mute, #5b6878) 25%, transparent);
  flex: 0 0 auto;
  transition: background .2s, box-shadow .2s;
}
.u44l-ws-pill.is-connecting { color: var(--amber, #f39c12);
  border-color: color-mix(in oklab, var(--amber, #f39c12) 40%, var(--border, #2a3546)); }
.u44l-ws-pill.is-connecting .u44l-ws-dot {
  background: var(--amber, #f39c12);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--amber, #f39c12) 30%, transparent),
              0 0 8px color-mix(in oklab, var(--amber, #f39c12) 60%, transparent);
  animation: u44lPulseDot 1.2s ease-in-out infinite;
}
.u44l-ws-pill.is-online { color: var(--green, #2ecc71);
  border-color: color-mix(in oklab, var(--green, #2ecc71) 40%, var(--border, #2a3546)); }
.u44l-ws-pill.is-online .u44l-ws-dot {
  background: var(--green, #2ecc71);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--green, #2ecc71) 25%, transparent);
}
.u44l-ws-pill.is-offline { color: var(--red, #e74c3c);
  border-color: color-mix(in oklab, var(--red, #e74c3c) 45%, var(--border, #2a3546)); }
.u44l-ws-pill.is-offline .u44l-ws-dot {
  background: var(--red, #e74c3c);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--red, #e74c3c) 30%, transparent),
              0 0 8px color-mix(in oklab, var(--red, #e74c3c) 55%, transparent);
  animation: u44lPulseDot 1.4s ease-in-out infinite;
}
@keyframes u44lPulseDot { 0%,100% { opacity: 1 } 50% { opacity: .4 } }

/* ---------- skeleton shimmer ---------- */
.u44l-sk-bar {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--bg-2, #1a2230) 0%,
    var(--bg-3, #232d3d) 50%,
    var(--bg-2, #1a2230) 100%);
  background-size: 220% 100%;
  animation: u44lShimmer 1.5s linear infinite;
}
@keyframes u44lShimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* ---------- button busy state ---------- */
.btn.u44l-busy { opacity: .75; cursor: progress !important; }
.btn.u44l-busy > .wlc-spinner { margin-right: 6px; }

/* ---------- floating delayed spinner ---------- */
.u44l-delayed-spin {
  position: fixed;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--bg-1, #131923);
  border: 1px solid var(--border, #2a3546);
  border-radius: 8px;
  color: var(--fg, #e6edf3);
  font-size: 12.5px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.u44l-delayed-spin.show { opacity: 1; transform: translateY(0); }