/* VxAI Web -- color themes. Each block overrides the palette variables
   defined in style.css :root (Classic Nord, the default) by setting
   data-theme on <html>. Applied two ways: the tiny inline script in each
   page's <head> (reads localStorage 'vxai-theme' before first paint, so
   there's no flash of the wrong colors), and the picker in settings
   (settings.js). Keep :root in style.css as Classic Nord so the app still
   looks right even with localStorage unavailable.

   Keep the data-theme names here in sync with THEMES/THEME_SWATCH in
   settings.js and the bg map in the inline head scripts. */

[data-theme="classic-nord"] {
  --bg: #2E3440;
  --surface: #3B4252;
  --panel: #434C5E;
  --muted: #4C566A;
  --fg: #D8DEE9;
  --fg-bright: #ECEFF4;
  --primary: #88C0D0;
  --secondary: #81A1C1;
  --accent: #B48EAD;
  --success: #A3BE8C;
  --warning: #EBCB8B;
  --error: #BF616A;
  --btn-fg: #2E3440;
}

[data-theme="dracula"] {
  --bg: #282A36;
  --surface: #21222C;
  --panel: #44475A;
  --muted: #6272A4;
  --fg: #F8F8F2;
  --fg-bright: #FFFFFF;
  --primary: #BD93F9;
  --secondary: #8BE9FD;
  --accent: #FF79C6;
  --success: #50FA7B;
  --warning: #F1FA8C;
  --error: #FF5555;
  --btn-fg: #282A36;
}

[data-theme="tokyo-night"] {
  --bg: #1A1B26;
  --surface: #1F2335;
  --panel: #24283B;
  --muted: #565F89;
  --fg: #C0CAF5;
  --fg-bright: #E0E4F8;
  --primary: #7AA2F7;
  --secondary: #7DCFFF;
  --accent: #BB9AF7;
  --success: #9ECE6A;
  --warning: #E0AF68;
  --error: #F7768E;
  --btn-fg: #1A1B26;
}

[data-theme="catppuccin-mocha"] {
  --bg: #1E1E2E;
  --surface: #181825;
  --panel: #313244;
  --muted: #6C7086;
  --fg: #CDD6F4;
  --fg-bright: #E6E9F5;
  --primary: #89B4FA;
  --secondary: #94E2D5;
  --accent: #CBA6F7;
  --success: #A6E3A1;
  --warning: #F9E2AF;
  --error: #F38BA8;
  --btn-fg: #1E1E2E;
}

[data-theme="one-dark"] {
  --bg: #282C34;
  --surface: #21252B;
  --panel: #3E4451;
  --muted: #5C6370;
  --fg: #ABB2BF;
  --fg-bright: #D6DAE2;
  --primary: #61AFEF;
  --secondary: #56B6C2;
  --accent: #C678DD;
  --success: #98C379;
  --warning: #E5C07B;
  --error: #E06C75;
  --btn-fg: #282C34;
}

[data-theme="gruvbox-dark"] {
  --bg: #282828;
  --surface: #1D2021;
  --panel: #3C3836;
  --muted: #928374;
  --fg: #EBDBB2;
  --fg-bright: #FBF1C7;
  --primary: #83A598;
  --secondary: #8EC07C;
  --accent: #D3869B;
  --success: #B8BB26;
  --warning: #FABD2F;
  --error: #FB4934;
  --btn-fg: #282828;
}

[data-theme="solarized-dark"] {
  --bg: #002B36;
  --surface: #073642;
  --panel: #586E75;
  --muted: #586E75;
  --fg: #839496;
  --fg-bright: #93A1A1;
  --primary: #268BD2;
  --secondary: #2AA198;
  --accent: #D33682;
  --success: #859900;
  --warning: #B58900;
  --error: #DC322F;
  --btn-fg: #002B36;
}

[data-theme="monokai"] {
  --bg: #272822;
  --surface: #20211D;
  --panel: #3E3D32;
  --muted: #75715E;
  --fg: #F8F8F2;
  --fg-bright: #FFFFFF;
  --primary: #66D9EF;
  --secondary: #AE81FF;
  --accent: #FD971F;
  --success: #A6E22E;
  --warning: #E6DB74;
  --error: #F92672;
  --btn-fg: #272822;
}

[data-theme="ayu-mirage"] {
  --bg: #1F2430;
  --surface: #191E2A;
  --panel: #2A3140;
  --muted: #5C6773;
  --fg: #CBCCC6;
  --fg-bright: #E0E1DA;
  --primary: #73D0FF;
  --secondary: #95E6CB;
  --accent: #D4BFFF;
  --success: #AAD94C;
  --warning: #FFD173;
  --error: #F28779;
  --btn-fg: #1F2430;
}

[data-theme="rose-pine"] {
  --bg: #191724;
  --surface: #1F1D2E;
  --panel: #26233A;
  --muted: #6E6A86;
  --fg: #E0DEF4;
  --fg-bright: #F5F2FF;
  --primary: #C4A7E7;
  --secondary: #9CCFD8;
  --accent: #EBBCBA;
  --success: #9CCFD8;
  --warning: #F6C177;
  --error: #EB6F92;
  --btn-fg: #191724;
}




/* ---------------------------------------------------------------------
   Midnight Sky -- the date2date page's look (vxai.rymdspace.nl/date2date),
   not a re-tint, carrying the TOKYO NIGHT palette. Four layers working
   together, all four reproduced here:

   1. THE STARFIELD -- three fixed 1px elements, each carrying the page's
      exact box-shadow list of star positions/colours (dim static layer,
      then two twinkling accent layers on the same keyframes). The
      coordinates are vw/vh so the field scales to any viewport. The stars
      were already Tokyo Night's own accents (#7AA2F7 / #BB9AF7 / #7DCFFF /
      #E0AF68 over #3B4261 / #565F89), so this layer needed no retuning.
   2. THE VIGNETTE -- the radial gradient that pulls the corners down to
      near-black and concentrates the eye on the centre, warmed from the
      page's #0A0A10 to Tokyo Night's #16161E ground.
   3. THE GRAIN -- a fixed feTurbulence SVG at 3.5% opacity, for the film
      texture over the whole viewport.
   4. THE GLASS -- the terminal card is translucent, blurred with
      backdrop-filter, and ringed with a faint accent glow + deep shadow.
      Here that lands on the message cards and the composer/header/tabbar/
      sidebar surfaces.

   COLOUR: every token below is Tokyo Night's own -- bg #1A1B26,
   surface #1F2335, panel #24283B, blue #7AA2F7 leading, cyan #7DCFFF,
   violet #BB9AF7 as the accent. The one deliberate departure from the
   stock Tokyo Night block is --fg-bright, kept one step cooler than
   #E0E4F8 to sit with the blue lead.

   The starfield layers live in each page's DOM and only paint when this
   theme is active. Contrast (computed, WCAG AA): fg 11.1:1 on bg;
   muted #565F89 at 4.0:1 on bg; btn-fg 7.8:1 on primary.
   --------------------------------------------------------------------- */
[data-theme="midnight-sky"] {
  --bg: #1A1B26;
  --surface: #1F2335;
  --panel: #24283B;
  --muted: #565F89;
  --fg: #C0CAF5;
  --fg-bright: #E0E4F8;
  --primary: #7AA2F7;
  --secondary: #7DCFFF;
  --accent: #BB9AF7;
  --success: #9ECE6A;
  --warning: #E0AF68;
  --error: #F7768E;
  --out-head: #7AA2F7;
  --render-glow: #9AB8FF;
  --render-glow-soft: rgba(154, 184, 255, 0.35);
  --btn-fg: #1A1B26;
}

/* ---- starfield + atmosphere (theme-scoped, only when active) ---- */

/* Glass over the app chrome: translucent, blurred, so the stars behind it
   glow through like the date2date terminal. The tool blocks and the app
   column itself stay transparent so the field shows through everywhere. */
[data-theme="midnight-sky"] #header,
[data-theme="midnight-sky"] #tabbar,
[data-theme="midnight-sky"] #composer,
[data-theme="midnight-sky"] #status,
[data-theme="midnight-sky"] #sidebar,
[data-theme="midnight-sky"] .msg-body,
[data-theme="midnight-sky"] .msg-turn,
[data-theme="midnight-sky"] .seg-tool {
  backdrop-filter: blur(9px) saturate(1.2);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
}

/* The message cards become the glass terminal: faint blue rim + deep
   drop shadow + soft blue bloom, exactly the page's .term recipe. */
[data-theme="midnight-sky"] .msg-body,
[data-theme="midnight-sky"] .msg-turn {
  background: rgba(31, 35, 53, 0.72);
  border-color: #292E42;
  box-shadow: 0 0 0 1px rgba(122, 162, 247, 0.08),
              0 24px 70px -20px rgba(0, 0, 0, 0.85),
              0 0 90px -40px var(--primary);
}

/* Chrome surfaces get the same glass tint as the page's terminal. */
[data-theme="midnight-sky"] #sidebar,
[data-theme="midnight-sky"] #header,
[data-theme="midnight-sky"] #tabbar,
[data-theme="midnight-sky"] #composer,
[data-theme="midnight-sky"] #status {
  background: rgba(26, 27, 38, 0.72);
}

/* Starfield layers -- exact port. The 1px elements get their stars as
   box-shadow, positioned in vw/vh, so they land identically to the page. */
[data-theme="midnight-sky"] .midnight-sky,
[data-theme="midnight-sky"] .midnight-sky2,
[data-theme="midnight-sky"] .midnight-sky3 {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  z-index: 0;
  pointer-events: none;
}
[data-theme="midnight-sky"] .midnight-sky  { box-shadow: 57vw 71vh 0 #7aa2f755,57vw 65vh 0 #3b4261,23vw 65vh 0 #7aa2f755,80vw 78vh 0 #3b4261,12vw 57vh 0 #565f89,18vw 11vh 0 #565f89,76vw 50vh 0 #7aa2f755,83vw 94vh 0 #3b4261,79vw 1vh 0 #565f89,7vw 4vh 0 #3b4261,30vw 76vh 0 #565f89,99vw 59vh 0 #565f89,56vw 75vh 0 #3b4261,66vw 29vh 0 #565f89,63vw 0vh 0 #565f89,58vw 83vh 0 #565f89,52vw 70vh 0 #565f89,90vw 32vh 0 #565f89,97vw 29vh 0 #565f89,3vw 8vh 0 #565f89,51vw 13vh 0 #565f89,49vw 8vh 0 #565f89,87vw 0vh 0 #3b4261,26vw 6vh 0 #7aa2f755,48vw 90vh 0 #7aa2f755,53vw 9vh 0 #3b4261,99vw 86vh 0 #565f89,43vw 11vh 0 #565f89,42vw 1vh 0 #7aa2f755,97vw 15vh 0 #3b4261,31vw 90vh 0 #565f89,1vw 7vh 0 #7aa2f755,62vw 22vh 0 #3b4261,57vw 65vh 0 #3b4261,93vw 98vh 0 #3b4261,53vw 82vh 0 #7aa2f755,14vw 50vh 0 #7aa2f755,27vw 0vh 0 #565f89,75vw 38vh 0 #565f89,26vw 23vh 0 #7aa2f755,77vw 82vh 0 #565f89,5vw 18vh 0 #3b4261,56vw 33vh 0 #565f89,98vw 78vh 0 #565f89,37vw 49vh 0 #565f89,9vw 11vh 0 #3b4261,74vw 81vh 0 #3b4261,1vw 76vh 0 #565f89,47vw 79vh 0 #7aa2f755,16vw 75vh 0 #7aa2f755,73vw 17vh 0 #7aa2f755,23vw 80vh 0 #3b4261,39vw 29vh 0 #3b4261,92vw 24vh 0 #3b4261,94vw 80vh 0 #3b4261,87vw 49vh 0 #7aa2f755,77vw 10vh 0 #7aa2f755,6vw 13vh 0 #565f89,4vw 65vh 0 #565f89,30vw 94vh 0 #7aa2f755,32vw 53vh 0 #7aa2f755,37vw 66vh 0 #3b4261,92vw 8vh 0 #3b4261,29vw 61vh 0 #565f89,35vw 27vh 0 #3b4261,95vw 2vh 0 #565f89,34vw 52vh 0 #7aa2f755,31vw 7vh 0 #565f89,22vw 36vh 0 #565f89,67vw 73vh 0 #3b4261; }
[data-theme="midnight-sky"] .midnight-sky2 { box-shadow: 99vw 37vh 0 #bb9af7,2vw 75vh 0 #7aa2f7,54vw 48vh 0 #7dcfff,45vw 16vh 0 #7dcfff,24vw 34vh 0 #7aa2f7,1vw 28vh 0 #7dcfff,58vw 3vh 0 #bb9af7,10vw 90vh 0 #7aa2f7,53vw 2vh 0 #7dcfff,80vw 93vh 0 #7aa2f7,45vw 98vh 0 #bb9af7,26vw 4vh 0 #7dcfff,47vw 84vh 0 #bb9af7,79vw 27vh 0 #7dcfff,46vw 72vh 0 #7aa2f7,73vw 36vh 0 #7dcfff,40vw 73vh 0 #bb9af7,60vw 22vh 0 #7dcfff,61vw 75vh 0 #7aa2f7,86vw 82vh 0 #bb9af7,23vw 22vh 0 #7dcfff,41vw 86vh 0 #7dcfff,25vw 74vh 0 #bb9af7,10vw 12vh 0 #7aa2f7,4vw 72vh 0 #7aa2f7,73vw 35vh 0 #7dcfff; animation: midnight-tw 5.5s ease-in-out infinite; }
[data-theme="midnight-sky"] .midnight-sky3 { box-shadow: 87vw 77vh 0 #e0af68,79vw 85vh 0 #7dcfff,81vw 65vh 0 #e0af68,80vw 47vh 0 #bb9af7,67vw 13vh 0 #7dcfff,58vw 76vh 0 #bb9af7,48vw 94vh 0 #bb9af7,56vw 18vh 0 #e0af68,11vw 52vh 0 #e0af68,69vw 36vh 0 #bb9af7,82vw 90vh 0 #bb9af7,75vw 72vh 0 #bb9af7,81vw 90vh 0 #7dcfff,4vw 67vh 0 #7dcfff,27vw 64vh 0 #bb9af7,8vw 1vh 0 #e0af68,83vw 65vh 0 #bb9af7,8vw 90vh 0 #7dcfff; animation: midnight-tw 8.5s ease-in-out infinite reverse; }
@keyframes midnight-tw { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.95; } }

[data-theme="midnight-sky"] .midnight-vignette {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(22,22,30,.55) 78%,rgba(13,14,22,.92) 100%);
}

[data-theme="midnight-sky"] .midnight-grain {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Keep content above the atmosphere layers. #app is the chat column,
   #login-wrap the auth card -- both are static/non-positioned, so without
   this the fixed z-index-0 star layers would paint on top of them. */
[data-theme="midnight-sky"] #app,
[data-theme="midnight-sky"] #login-wrap {
  position: relative;
  z-index: 3;
}

/* The app column must not paint its own opaque --bg over the starfield.
   Its message cards are already translucent glass; the empty space around
   them should show the stars, not a solid panel. */
[data-theme="midnight-sky"] #app { background: transparent; }

/* Respect the OS reduce-motion setting: kill the twinkle. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="midnight-sky"] .midnight-sky2,
  [data-theme="midnight-sky"] .midnight-sky3 { animation: none; }
}