/* SkillBridge AI Studio — global styles (PHP/vanilla-JS build)
   App is permanently dark-themed (mirrors ThemeProvider defaultTheme="dark" enableSystem={false}) */

:root, .dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  --radius: 0.625rem;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
img, video { max-width: 100%; }

/* ── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── Sidebar / layout transitions ──────────────────────────*/
aside { transition: width .3s ease-in-out, transform .3s ease-in-out; }

/* ── Simple animation utilities (subset of tailwindcss-animate we rely on) */
.animate-in { animation-duration: .18s; animation-timing-function: ease-out; animation-fill-mode: both; }
.fade-in { animation-name: sb-fade-in; }
.zoom-in, .zoom-in-95, .zoom-ins { animation-name: sb-zoom-in; }
.slide-in-from-bottom-2 { animation-name: sb-slide-up; }
.fade-in-up { animation: sb-fade-in-up .3s ease both; }

@keyframes sb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-zoom-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes sb-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sb-fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-spin { animation: sb-spin 1s linear infinite; }

/* ── Toast (sonner replacement) ─────────────────────────── */
#sb-toast-root {
  position: fixed; top: 16px; right: 16px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.sb-toast {
  pointer-events: auto;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--foreground) / 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: sb-slide-up .18s ease-out both;
  display: flex; flex-direction: column; gap: 4px;
}
.sb-toast.success { border-left: 3px solid #10b981; }
.sb-toast.error { border-left: 3px solid #ef4444; }
.sb-toast.info { border-left: 3px solid #6d5efc; }
.sb-toast-title { font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); }
.sb-toast-desc { font-size: 12px; color: hsl(var(--foreground) / 0.6); }
.sb-toast-action {
  margin-top: 6px; align-self: flex-start;
  font-size: 12px; font-weight: 600; color: #a78bfa;
  background: none; border: none; cursor: pointer; padding: 0;
}
.sb-toast-action:hover { text-decoration: underline; }

/* ── Misc glass helper (used for cards / panels needing the glassmorphism look) */
.sb-glass {
  background: hsl(var(--secondary) / 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--foreground) / 0.08);
}

/* ── Focus ring resets to something less jarring on dark UI */
button, a { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #6d5efc55; outline-offset: 2px;
}