* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg1: #0d1117;
  --bg2: #1a2233;
  --accent: #4da3ff;
  --accent2: #8b5cf6;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --radius: 16px;
  --card-bg: 8, 11, 17;
  --card-alpha: .93;
  --motif-opacity: .5;
}

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: #e6edf3;
  overflow-x: hidden;
  transition: color .6s;
}

/* ---- layer 0: background wash ---- */
#bg {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(160deg, var(--bg1), var(--bg2), var(--bg1));
  background-size: 300% 300%;
  animation: drift 30s ease infinite;
  transition: background 1.2s ease;
}
@keyframes drift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
/* style-specific overlay texture */
#bg::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0; transition: opacity .8s;
}

/* ---- layer 1: floating motifs ---- */
#motifs { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.motif {
  position: absolute;
  font-size: 2.4rem;
  font-family: var(--font-display);
  color: color-mix(in srgb, var(--accent) 85%, #fff 5%);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
  white-space: nowrap;
  user-select: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.motif.alt { color: color-mix(in srgb, var(--accent2) 85%, #fff 5%);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent2) 55%, transparent); }

body[data-motion="drift"] .motif { animation-name: mDrift; }
body[data-motion="rise"]  .motif { animation-name: mRise; }
body[data-motion="pulse"] .motif { animation-name: mPulse; }
body[data-motion="sway"]  .motif { animation-name: mSway; }

@keyframes mDrift {
  0%   { transform: translate(0, 30px); opacity: 0; }
  15%, 85% { opacity: var(--motif-opacity); }
  100% { transform: translate(60px, -140px); opacity: 0; }
}
@keyframes mRise {
  0%   { transform: translateY(60px); opacity: 0; }
  15%, 85% { opacity: var(--motif-opacity); }
  100% { transform: translateY(-160px); opacity: 0; }
}
@keyframes mPulse {
  0%, 100% { transform: scale(.9); opacity: 0; }
  50% { transform: scale(1.08); opacity: var(--motif-opacity); }
}
@keyframes mSway {
  0%   { transform: translateX(-40px); opacity: 0; }
  20%, 80% { opacity: var(--motif-opacity); }
  100% { transform: translateX(40px); opacity: 0; }
}

/* ---- layer 2: content, always above the background ---- */
main {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 6vh 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-height: 100%;
}

header { text-align: center; }
h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: .03em;
  font-weight: 700;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
h1 .dot { color: var(--accent); }
#tagline {
  margin-top: .5rem;
  color: #c3d0de;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
  transition: color .8s;
}

#channels { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.channel-pill {
  font-family: var(--font-display);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgba(var(--card-bg), .8);
  backdrop-filter: blur(6px);
  color: #e6edf3;
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .95rem;
  cursor: pointer;
  transition: all .2s;
}
.channel-pill:hover { background: color-mix(in srgb, var(--accent) 25%, rgba(var(--card-bg), .85)); }
.channel-pill.active {
  background: var(--accent);
  color: #08090d;
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
}
.channel-pill small { opacity: .7; font-weight: 400; }

#chat {
  position: relative;
  background: rgba(var(--card-bg), var(--card-alpha));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
}

#messages {
  display: flex; flex-direction: column; gap: .7rem;
  max-height: 55vh; overflow-y: auto;
  scroll-behavior: smooth;
  padding: .2rem;
}
.msg { max-width: 88%; padding: .65rem .9rem; border-radius: 12px; line-height: 1.55; font-size: .95rem; }
.msg.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 82%, #000 12%); color: #08090d; border-bottom-right-radius: 4px; font-weight: 500; }
.msg.bot  { align-self: flex-start; background: rgba(255,255,255,.08); border-bottom-left-radius: 4px; }
.msg.bot.thinking { color: #9fb0c3; font-style: italic; animation: pulse 1.6s ease infinite; }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.msg.bot.error { color: #ffb4a9; }

.msg.bot p { margin: 0 0 .55rem; }
.msg.bot p:last-child, .msg.bot ul:last-child, .msg.bot ol:last-child { margin-bottom: 0; }
.msg.bot ul, .msg.bot ol { margin: 0 0 .55rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.msg.bot li::marker { color: var(--accent); }
.msg.bot strong { color: color-mix(in srgb, var(--accent) 68%, #fff 32%); font-weight: 650; }
.msg.bot h4 { margin: .2rem 0 .45rem; font-size: .95rem; color: color-mix(in srgb, var(--accent) 60%, #fff 40%); }
.msg.bot code { background: rgba(255,255,255,.1); border-radius: 5px; padding: .05rem .35rem; font-size: .85em; }
.msg.bot .sources {
  display: block; margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem; color: #9fb0c3;
}
.msg.bot .sources-label {
  display: block; text-transform: uppercase; letter-spacing: .09em;
  font-size: .68rem; color: color-mix(in srgb, var(--accent) 75%, #fff 10%); margin-bottom: .3rem;
}
.msg.bot .sources ul { gap: .15rem; }
.msg.bot .sources strong { color: #c6d2df; font-weight: 600; }

#ask-form { display: flex; gap: .5rem; }
#question {
  flex: 1;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #e6edf3;
  padding: .75rem .9rem;
  font-size: 1rem;
  font-family: var(--font-body);
  outline: none;
}
#question:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
#send {
  font-family: var(--font-display);
  background: var(--accent);
  border: none;
  color: #08090d;
  font-weight: 700;
  border-radius: 10px;
  padding: 0 1.4rem;
  font-size: 1rem;
  cursor: pointer;
  transition: filter .15s;
}
#send:hover { filter: brightness(1.1); }
#send:disabled { opacity: .5; cursor: wait; }

.fineprint { font-size: .72rem; color: #7b8b9e; text-align: center; }
#empty-state { text-align: center; color: #9fb0c3; }
#empty-state[hidden] { display: none; }

/* =====================  per-channel styles  ===================== */

/* fonts */
body[data-font="serif"]     { --font-display: Georgia, "Times New Roman", serif; --font-body: Georgia, "Times New Roman", serif; }
body[data-font="mono"]      { --font-display: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-font="condensed"] { --font-display: "Arial Narrow", "Helvetica Neue", Impact, sans-serif; }

/* neon — glowing late-night */
body[data-style="neon"] { --radius: 18px; --motif-opacity: .55; }
body[data-style="neon"] .motif { text-shadow: 0 0 30px currentColor, 0 0 60px currentColor; font-weight: 600; }
body[data-style="neon"] h1 { text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent); }
body[data-style="neon"] #chat { border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 20%, transparent), 0 18px 60px rgba(0,0,0,.75); }

/* noir — hard shadow, vignette */
body[data-style="noir"] { --radius: 4px; --motif-opacity: .3; --card-alpha: .95; }
body[data-style="noir"] #bg::after {
  opacity: 1;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.85) 100%);
}
body[data-style="noir"] .motif { text-shadow: none; filter: blur(.4px); letter-spacing: .04em; }
body[data-style="noir"] #chat { border-left: 3px solid var(--accent); }
body[data-style="noir"] h1 { letter-spacing: .12em; text-transform: uppercase; font-size: 2rem; }

/* print — dossier / newsprint */
body[data-style="print"] { --radius: 3px; --motif-opacity: .28; --card-alpha: .95; }
body[data-style="print"] #bg::after {
  opacity: 1;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
body[data-style="print"] .motif { text-shadow: none; font-weight: 400; letter-spacing: .06em; }
body[data-style="print"] #chat { border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
body[data-style="print"] .channel-pill { border-radius: 3px; }
body[data-style="print"] h1 { letter-spacing: -.01em; }

/* broadcast — urgent TV news */
body[data-style="broadcast"] { --radius: 6px; --motif-opacity: .45; }
body[data-style="broadcast"] #bg::after {
  opacity: 1;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px);
}
body[data-style="broadcast"] .motif { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 3px 12px rgba(0,0,0,.6); }
body[data-style="broadcast"] h1 { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
body[data-style="broadcast"] #chat { border-top: 4px solid var(--accent); }
body[data-style="broadcast"] .channel-pill { border-radius: 4px; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }

/* retro — warm analog */
body[data-style="retro"] { --radius: 22px; --motif-opacity: .45; }
body[data-style="retro"] #bg::after {
  opacity: 1;
  background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%),
              radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 45%);
}
body[data-style="retro"] .motif { text-shadow: 2px 2px 0 color-mix(in srgb, var(--accent2) 45%, transparent); }
body[data-style="retro"] #chat { border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); }
body[data-style="retro"] h1 { font-style: italic; }

/* clinical — cool and precise */
body[data-style="clinical"] { --radius: 10px; --motif-opacity: .3; }
body[data-style="clinical"] .motif { text-shadow: none; font-weight: 300; }
body[data-style="clinical"] #chat { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
body[data-style="clinical"] h1 { font-weight: 600; letter-spacing: -.015em; }
body[data-style="clinical"] .channel-pill { border-radius: 7px; }

/* occult — strange and otherworldly */
body[data-style="occult"] { --radius: 20px; --motif-opacity: .42; }
body[data-style="occult"] #bg::after {
  opacity: 1;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 55%),
              radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.75) 100%);
}
body[data-style="occult"] .motif { filter: blur(.5px); text-shadow: 0 0 34px currentColor; letter-spacing: .1em; }
body[data-style="occult"] h1 { letter-spacing: .1em; }
body[data-style="occult"] #chat { border-color: color-mix(in srgb, var(--accent2) 32%, transparent); }

@media (max-width: 540px) {
  h1 { font-size: 1.8rem; }
  #messages { max-height: 48vh; }
  .motif { font-size: 1.6rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  #bg, .motif { animation: none !important; }
  .motif { opacity: var(--motif-opacity); }
}