/* web-main.css — YOUR editable theme + background (SYMBI.md §5).

   This file loads AFTER the locked component styles (sys/web/app.css), so
   anything you set here wins. The chat and sidebar are built from CSS variables
   — override them below to re-theme the whole UI without touching the locked
   components. Change the background freely; add your own rules for any elements
   you add to web-main.html. */

:root {
  /* Palette — override any of these to re-skin the chat + sidebar. */
  --bg: #1a1a1a; /* page background */
  --panel: #232323; /* input box, sidebar panel */
  --border: #333333;
  --ink: #ececec; /* main text */
  --muted: #999999; /* secondary text */
  --accent: #cb7fff; /* the single accent (brand, buttons, "working") */
  --accent-ink: #1a1a1a; /* text on accent-colored fills */

  /* Message bubbles */
  --user: #2f2f2f;
  --assistant: #262626;
  --system: #3a2a2a;

  /* Status-light colors */
  --online: #4ade80;
  --offline: #5a5a5a;
}

/* The page background. Swap for a color, gradient, or image as you like. */
body {
  background: var(--bg);
}

/* Ambient rising motes (see the spawner in web-main.html). Sits behind the
   chat (z-index below content), never intercepts clicks. Tune COUNT in the
   HTML, or the ranges/colors here. Delete this block to remove the effect. */
#motes {
  position: fixed;
  inset: 0;
  z-index: 0; /* above the page background, below content (which sits at z-index 1) */
  overflow: hidden;
  pointer-events: none;
}
/* Lift the chat above the motes layer (the transparent chat still lets motes
   show through its gaps). The sidebar already sits above at its own z-index. */
.symbi {
  position: relative;
  z-index: 1;
}
.mote {
  position: absolute;
  bottom: -12px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  will-change: transform, opacity;
  animation: mote-rise var(--dur) linear var(--delay); /* one-shot; JS respawns */
}
@keyframes mote-rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: var(--op);
  }
  90% {
    opacity: var(--op);
  }
  100% {
    transform: translate(var(--drift), -100vh);
    opacity: 0;
  }
}
/* Flare motes — a rare mote (set in web-main.html) that bursts into a ball of
   light partway up, then vanishes as the flare fades (it does NOT keep rising
   as a dot). Two synced animations: mote-flare-core drives the dot's own rise +
   fade so it dies with the burst; the ::after is the glow bloom. */
.mote.flare {
  animation: mote-flare-core var(--dur) linear var(--delay);
}
.mote.flare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Softer, smaller white core (accent takes over sooner) + lower peak opacity
     below — together ~25% less white/bright than a pure #fff bloom. */
  background: radial-gradient(circle, #fff 0%, var(--accent) 32%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: mote-flare var(--dur) ease-out var(--delay); /* synced to the core */
}
/* The dot: rises like a normal mote, flashes with the burst, then fades to
   nothing by 80% (when the flare fades) instead of continuing to the top. */
@keyframes mote-flare-core {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: var(--op);
  }
  52% {
    opacity: var(--op);
  }
  60% {
    opacity: 0.8; /* brief flash, not full white */
  }
  80% {
    transform: translate(var(--drift), -78vh);
    opacity: 0; /* gone with the flare */
  }
  100% {
    transform: translate(var(--drift), -78vh);
    opacity: 0;
  }
}
@keyframes mote-flare {
  0%,
  52% {
    transform: scale(1);
    opacity: 0;
  }
  60% {
    transform: scale(6);
    opacity: 0.68; /* the flash — dimmed ~28% from before */
  }
  80% {
    transform: scale(16);
    opacity: 0; /* bloom out and fade */
  }
  100% {
    transform: scale(16);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mote,
  .mote.flare {
    animation: none;
    opacity: 0;
  }
  .mote.flare::after {
    animation: none;
    opacity: 0;
  }
}

/* Add your own elements + styles below. */