/* eschool365 — global base styles.
   Component styling is inline (createElement style objects) to match the
   original design system 1:1; this file holds resets, the page canvas,
   keyframes, the boot skeleton, focus-visible, and (later phases) the
   mobile @media overrides. */

:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #F4F6F8; }
#root { height: 100%; }
body { font-family: Inter, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
input, button, select, textarea { font-family: inherit; }

/* scrollbars (from the original base CSS) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d3d8df; border-radius: 8px; border: 2px solid #f4f6f8; }
::-webkit-scrollbar-thumb:hover { background: #bfc5ce; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* boot skeleton (hidden once React mounts) */
#boot {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  background: #F4F6F8; color: #737A88;
  font: 600 14px Inter, system-ui, sans-serif;
}
#boot .boot-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #E2E4FF; border-top-color: #5B47E0;
  animation: spin .8s linear infinite;
}
.boot-hidden { display: none !important; }

/* a11y */
*:focus-visible { outline: 2px solid #5B47E0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* Rae assistant */
.rae-launch { transition: transform .15s ease; }
.rae-launch:hover { transform: translateY(-2px) scale(1.04); }
@keyframes raePulse { 0% { box-shadow: 0 0 0 0 rgba(51,225,161,.6); } 70% { box-shadow: 0 0 0 8px rgba(51,225,161,0); } 100% { box-shadow: 0 0 0 0 rgba(51,225,161,0); } }
.rae-pulse { animation: raePulse 1.8s ease-out infinite; }
@keyframes raeBlink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.rae-dot { width: 6px; height: 6px; border-radius: 50%; background: #9AA0AC; display: inline-block; animation: raeBlink 1s infinite; }
.rae-panel { animation: fadeUp .18s ease; }