/*
 * Loading state shown before React mounts, replaced on first render.
 *
 * Lives here rather than in an index.html <style> block for two reasons: Vite's
 * HTML inline-CSS proxy breaks under @tailwindcss/vite and under VS Code's
 * ELECTRON_RUN_AS_NODE, and public/ files are copied verbatim so they never
 * enter that pipeline.
 *
 * The Action popover picks up its real palette from OBR's theme at runtime, so
 * this follows the system scheme to avoid flashing the wrong background first.
 */

:root {
  --preload-bg: #f5f5f5;
  --preload-track: #e0e0e0;
  --preload-accent: #7c3aed;
}

@media (prefers-color-scheme: dark) {
  :root {
    --preload-bg: #1e1e1e;
    --preload-track: rgba(255, 255, 255, 0.12);
    --preload-accent: #a78bfa;
  }
}

body {
  margin: 0;
  background: var(--preload-bg);
}

#preload {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#preload .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--preload-track);
  border-top-color: var(--preload-accent);
  border-radius: 50%;
  animation: preload-spin 0.8s linear infinite;
}

@keyframes preload-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #preload .spinner {
    animation-duration: 2.4s;
  }
}