/* Sekreter shared theme: colour tokens, light/dark, animated background.
   Light/dark: system by default; <html data-theme="light|dark"> overrides (set by theme.js). */

:root {
  color-scheme: light;
  --bg: #eef1f7;
  --bg2: #dfe6f3;
  --glow1: rgba(26, 115, 232, 0.22);
  --glow2: rgba(0, 196, 180, 0.16);
  --grid: rgba(26, 60, 120, 0.07);
  --fg: #111;
  --card: rgba(255, 255, 255, 0.86);
  --accent: #1a73e8;
  --rec: #d93025;
  --border: rgba(0, 0, 0, 0.12);
  --muted: #6b7280;
  --me: #dbe9ff;
  --bot: rgba(255, 255, 255, 0.9);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0f1a;
    --bg2: #121a2e;
    --glow1: rgba(56, 132, 255, 0.22);
    --glow2: rgba(0, 220, 200, 0.12);
    --grid: rgba(120, 160, 255, 0.07);
    --fg: #ececf1;
    --card: rgba(22, 27, 42, 0.86);
    --border: rgba(255, 255, 255, 0.12);
    --muted: #9aa3b2;
    --me: #1f3a5f;
    --bot: rgba(22, 27, 42, 0.9);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f1a;
  --bg2: #121a2e;
  --glow1: rgba(56, 132, 255, 0.22);
  --glow2: rgba(0, 220, 200, 0.12);
  --grid: rgba(120, 160, 255, 0.07);
  --fg: #ececf1;
  --card: rgba(22, 27, 42, 0.86);
  --border: rgba(255, 255, 255, 0.12);
  --muted: #9aa3b2;
  --me: #1f3a5f;
  --bot: rgba(22, 27, 42, 0.9);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--fg);
  position: relative;
  isolation: isolate;
}

/* Soft glows: two large radial blobs that drift very slowly (transform only, cheap on iPhone). */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 25%, var(--glow1), transparent 70%),
    radial-gradient(35% 30% at 80% 75%, var(--glow2), transparent 70%);
  animation: drift 38s ease-in-out infinite alternate;
  will-change: transform;
}

/* Faint grid texture that slides slowly. */
body::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
  animation: slide 60s linear infinite;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(44px, 44px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* Top-right controls shared by all screens. */
.ui-controls { display: flex; gap: 8px; align-items: center; }
select.lang-select, button.theme-toggle {
  font-size: 14px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: inherit; cursor: pointer;
}
button.theme-toggle { width: 36px; font-size: 16px; line-height: 1; }