/* ────────────────────────────────────────────────────────────────────
   BOOT-PHASE STYLES
   ────────────────────────────────────────────────────────────────────
   Originally inline in index.html (one <style> block + ~9 style="…"
   attributes on the loader <div>s). Lifted out 2026-05-12 so style-src
   and style-src-elem can drop 'unsafe-inline'.

   This file is referenced from <head> via a regular <link
   rel="stylesheet">, so it's covered by `style-src 'self'` and needs
   no nonce or hash. The class names match what:
     - index.html's #sicha-boot fallback uses on first paint, AND
     - public/sw-cleanup.js / public/boot.js write into the DOM
       imperatively when they create overlays / fallback UI.

   Keep the visual identity consistent with the React shell
   (purple gradient + the same spinner) — these screens are what the
   user sees during a SW cleanup, a slow boot, or a hard reset, so
   they need to feel like Sicha and not a browser default.
*/

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

.sicha-boot-overlay,
#sicha-boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #312e81, #581c87);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* SW cleanup overlay needs to sit ABOVE everything including #sicha-boot */
.sicha-boot-overlay { z-index: 2147483647; }

.sicha-boot-inner {
  text-align: center;
}

.sicha-boot-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(168, 85, 247, 0.3);
  border-top-color: #c084fc;
  border-radius: 50%;
  animation: sicha-spin 1s linear infinite;
  margin: 0 auto;
}

.sicha-boot-label {
  color: #e9d5ff;
  font-size: 14px;
  margin-top: 14px;
  font-weight: 500;
}

.sicha-noscript {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1b4b;
  color: #e9d5ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 24px;
  text-align: center;
}

.sicha-noscript-title {
  font-size: 24px;
  margin-bottom: 12px;
}

.sicha-noscript-body {
  font-size: 14px;
  opacity: 0.8;
}

/* Watchdog fallback panel emitted by /boot.js after the 12-second
   timeout. Mirrors the original inline-styled markup so the visual
   change is zero. */
.sicha-boot-fallback {
  text-align: center;
  padding: 24px;
}

.sicha-boot-fallback-title {
  color: #fca5a5;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.sicha-boot-fallback-sub {
  color: #e9d5ff;
  font-size: 13px;
  margin-bottom: 16px;
  max-width: 280px;
}

.sicha-boot-fallback-btn {
  background: #7c3aed;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}

.sicha-boot-fallback-link {
  color: #c084fc;
  font-size: 12px;
  text-decoration: underline;
}

.sicha-boot-fallback-errors {
  color: #fca5a5;
  font-size: 11px;
  margin-top: 12px;
  max-width: 300px;
  word-break: break-all;
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: 8px;
  white-space: pre-wrap;
}
