/* A workspace still assembling itself sits under one opaque veil in its own
 * surface colour, so nothing half-built shows through. The ring mirrors the AI
 * panel's travelling ring, and waits a moment before appearing so a quick
 * load reads as a calm blank rather than a flicker. */

.ls3-workspace-loading-host { position: relative; }

.ls3-workspace-loading {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--ls3-workspace-loading-bg, var(--bg-primary));
  opacity: 1;
  transition: opacity 180ms ease;
}

.ls3-workspace-loading.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.ls3-workspace-loading-ring {
  position: relative;
  width: 30px;
  height: 30px;
  opacity: 0;
  animation: ls3-workspace-loading-appear 220ms ease 260ms forwards;
}

.ls3-workspace-loading-ring::before {
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 55%,
    color-mix(in srgb, var(--ls3-workspace-loading-accent, var(--color-accent)) 45%, transparent) 78%,
    var(--ls3-workspace-loading-head, var(--ai-stream-caret, var(--color-accent))) 100%
  );
  content: "";
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ls3-workspace-loading-spin 1.05s linear infinite;
}

@keyframes ls3-workspace-loading-spin { to { transform: rotate(1turn); } }
@keyframes ls3-workspace-loading-appear { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ls3-workspace-loading { transition: none; }
  .ls3-workspace-loading-ring { animation: none; opacity: 1; }
  .ls3-workspace-loading-ring::before {
    animation: none;
    background: color-mix(in srgb, var(--ls3-workspace-loading-accent, var(--color-accent)) 45%, transparent);
  }
}