/* ═══════════════════════════════════════════════════════════════
   Sivarr — base.css
   Design tokens · dark/light theme · reset · global animations · boot loader
   Split from styles.css (Path A restructure)
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand palette */
  --teal: #41076b;
  --teal2: rgba(65, 7, 107, 0.12);
  --teal3: rgba(65, 7, 107, 0.22);
  --teal4: #2d0454;
  --purple: #41076b;
  --purple2: rgba(65, 7, 107, 0.12);
  --purple3: #2d0454;
  --coral: #e8614a;
  --coral2: #fdf0ed;
  --coral3: #993c1d;
  --amber: #854f0b;
  --amber2: #fef6e4;
  --amber3: #ef9f27;
  --green: #3b6d11;
  --green2: #eaf3de;
  --green3: #059669;
  --red: #a32d2d;
  --red2: #fcebeb;
  --red3: #e24b4a;
  --blue: #185fa5;
  --blue2: #e6f1fb;
  --pink: #993556;
  --pink2: #fbeaf0;

  /* Surfaces — light mode */
  --bg: #f9fafb;
  --bg2: #ffffff;
  --bg3: #f2f4f7;
  --sidebar-bg: #f7f8fa;
  --sidebar-border: #e8eaed;

  /* Text — light mode */
  --text1: #0d1117;
  --text2: #374151;
  --text3: #6b7280;
  --text4: #9ca3af;

  /* Borders & shadows */
  --border: #e5e7eb;
  --border2: #d1d5db;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow2: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow3: 0 8px 32px rgba(0, 0, 0, 0.12);
  --glow-teal: 0 0 20px rgba(13, 122, 95, 0.25);
  --glow-purple: 0 0 20px rgba(83, 74, 183, 0.25);

  /* Shape */
  --radius: 9px;
  --radius2: 14px;
  --radius3: 18px;
  --font-scale: 1;
  --sb-width: 256px;
  --topbar-h: 54px;

  /* Typography */
  --font: "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, sans-serif;

  /* Motion */
  --transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  --spring: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* AI gradient */
  --ai-grad: linear-gradient(135deg, #41076b 0%, #41076b 100%);
  --ai-glow: 0 0 32px rgba(65, 7, 107, 0.28), 0 0 12px rgba(65, 7, 107, 0.18);

  /* Legacy compat */
  --accent: #41076b;
  --accent2: #41076b;
  --surface: var(--bg2);
  --card: var(--bg2);
  --text: var(--text1);
  --muted: var(--text3);
  --muted2: var(--text4);
  --yellow: var(--amber3);
  --fg: var(--text1);
}

/* ── DARK MODE — Warm Charcoal palette ─────────────────────── */
[data-theme="dark"] {
  --bg: #1c1c1c;
  --bg2: #242424;
  --bg3: #2e2e2e;
  --sidebar-bg: #161616;
  --sidebar-border: #2a2a2a;
  --border: #2e2e2e;
  --border2: #3a3a3a;

  --text1: #f4f3f1;
  --text2: #c0bdb9;
  --text3: #7a7672;
  --text4: #54514e;

  --shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow2: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow3: 0 12px 40px rgba(0, 0, 0, 0.7);

  --teal: #0fdbad;
  --teal2: rgba(15, 219, 173, 0.1);
  --teal3: rgba(15, 219, 173, 0.2);
  --teal4: #0ab58f;
  --purple: #8b80f0;
  --purple2: rgba(139, 128, 240, 0.12);
  --purple3: #6458cc;

  --green3: #34d399;
  --red3: #f87171;
  --amber3: #fbbf24;

  --coral2: rgba(232, 97, 74, 0.1);
  --amber2: rgba(239, 159, 39, 0.1);
  --green2: rgba(59, 109, 17, 0.12);
  --red2: rgba(163, 45, 45, 0.1);
  --blue2: rgba(24, 95, 165, 0.1);
  --pink2: rgba(153, 53, 86, 0.1);

  --ai-grad: linear-gradient(135deg, #0fdbad 0%, #8b80f0 100%);
  --ai-glow:
    0 0 32px rgba(15, 219, 173, 0.25), 0 0 12px rgba(139, 128, 240, 0.2);
  --glow-teal: 0 0 20px rgba(15, 219, 173, 0.3);
  --glow-purple: 0 0 20px rgba(139, 128, 240, 0.3);

  --surface: var(--bg2);
  --card: var(--bg2);
  --text: var(--text1);
  --muted: var(--text3);
  --muted2: var(--text4);
  --fg: var(--text1);
}

/* ── BASE ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text2);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

body.dashboard-active {
  overflow: hidden;
}

/* Premium scrollbars */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text4);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  font-family: var(--font);
}
input,
textarea,
select {
  font-family: var(--font);
}

h1,
h2,
h3,
.panel-title,
.section-title,
.vh-title,
.card-title,
.h-card-title,
.h-stat-val,
.chat-header-name,
.siva-brief-name {
  font-family: var(--font-display);
}

::selection {
  background: rgba(13, 122, 95, 0.25);
  color: var(--text1);
}
[data-theme="dark"] ::selection {
  background: rgba(15, 219, 173, 0.2);
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── GLOBAL ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.ai-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg3) 25%,
    var(--bg2) 50%,
    var(--bg3) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius);
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes ctxMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes si-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mob-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ── BOOT LOADER — the Sivarr mark IS the loader ─────────────
   Self-drawing SVG logo + teal shimmer while the app boots.
   ═══════════════════════════════════════════════════════════ */
#siv-boot {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #ffffff);
  transition: opacity 0.5s ease;
}
#siv-boot.hide {
  opacity: 0;
  pointer-events: none;
}
.siv-boot-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.siv-boot-svg {
  width: 104px;
  height: 104px;
  overflow: visible;
  filter: drop-shadow(0 0 9px rgba(13, 122, 95, 0.4));
  animation: sivBootBreathe 2.8s ease-in-out infinite;
}
.sb-draw {
  fill: none;
  stroke: var(--teal, #0d7a5f);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sivDraw 2.6s ease-in-out infinite;
}
.sb-frame {
  stroke-width: 4;
  animation-delay: 0s;
}
.sb-s1 {
  stroke-width: 9;
  animation-delay: 0.42s;
}
.sb-s2 {
  stroke-width: 9;
  animation-delay: 0.66s;
}
@keyframes sivDraw {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  40% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  72% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92% {
    stroke-dashoffset: -1;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}
@keyframes sivBootBreathe {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(13, 122, 95, 0.25));
  }
  50% {
    transform: scale(1.07);
    filter: drop-shadow(0 0 18px rgba(13, 122, 95, 0.55));
  }
}
.siv-boot-word {
  font-family: var(--font-display, inherit);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--text3, #888);
  animation: sivBootWord 2.6s ease-in-out infinite;
}
@keyframes sivBootWord {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .siv-boot-svg {
    animation: none;
  }
  .sb-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Mini Sivarr-logo shimmer loader — reused across modals/spinners */
@keyframes sivMiniSweep {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -150% 0;
  }
}
@keyframes sivMiniPulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-spinner,
  .ag-spinner,
  .ps-spin {
    animation: sivMiniPulse 2s ease-in-out infinite;
  }
}

/* ── THEME TRANSITION ─────────────────────────────────────────
   Smooth colour transition when toggling dark/light mode */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.15s ease,
    box-shadow 0.25s ease !important;
}

/* ── DENSITY: Compact tightens vertical rhythm across the app ── */
[data-density="compact"] body {
  line-height: 1.4;
}

/* ── Font-scale (Settings → Appearance → Text size) ─────────── */
html {
  font-size: calc(100% * var(--font-scale, 1));
}

/* ── PARITY PATCH — restored @media content ── */

@media (max-width: 600px) {
  .tpl-search-wrap input {
    width: 120px;
  }

  .tpl-modal {
    height: 92vh;
  }

  .tpl-modal-use-btn {
    padding: 8px 11px;
    font-size: 0;
    gap: 0;
  }

  .tpl-modal-use-btn i {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk {
    animation: none;
    opacity: 0.45;
  }
}