/* Adaptive learner presentation — shared design tokens + audience/subject overlays */

html {
  color-scheme: light dark;
}

/* OS theme — base palette (adult/default); audience themes override as needed */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #eef2f7;
    --surface: #ffffff;
    --surface-2: #e4eaf2;
    --border: #c5d0de;
    --text: #152030;
    --muted: #5c6f85;
    --accent: #2563eb;
    --accent-press: #1d4ed8;
    --examiner: #e8eef8;
    --learner: #dce8ff;
    --success: #0d9f6e;
    --warn: #c58a00;
    --theme-color: #eef2f7;
    --theme-header-bg: rgba(255, 255, 255, 0.94);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-color: #0a0e14;
    --theme-header-bg: rgba(20, 27, 38, 0.95);
  }
}

:root {
  --theme-accent: var(--accent);
  --theme-accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --theme-radius: 12px;
  --theme-radius-lg: 16px;
  --theme-font-scale: 1;
  --theme-line-height: 1.45;
  --theme-space: 1;
  --theme-bubble-padding: 0.85rem 1rem;
  --theme-pattern-opacity: 0.06;
  --theme-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --theme-font-body: var(--theme-font-display);
  --subject-screen-bg: var(--bg);
  --subject-messages-overlay: transparent;
}

.theme-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%);
}

.theme-backdrop.theme-backdrop-active {
  display: block;
  opacity: 1;
}

/* —— Full-height learner screens (child, teen, adult) —— */
body[class*="theme-audience-"] .screen {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(12px);
  min-height: 0;
}

body[class*="theme-audience-"] .screen.screen-active {
  transform: translateY(0);
}

body[class*="theme-audience-"] #chat-screen.screen {
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body[class*="theme-audience-"] .chat-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body[class*="theme-audience-"] .chat-body .thinking {
  flex-shrink: 0;
  margin-top: auto;
}

body[class*="theme-audience-"] .messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0.75rem 1.5rem;
  gap: calc(0.75rem * var(--theme-space, 1));
}

body[class*="theme-audience-"] #chat-screen .chat-header,
body[class*="theme-audience-"] #chat-screen .composer,
body[class*="theme-audience-"] #chat-screen .session-controls,
body[class*="theme-audience-"] #chat-screen .thinking,
body[class*="theme-audience-"] #chat-screen .live-dashboard {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

body[class*="theme-audience-"] #chat-screen .composer-form {
  width: 100%;
}

/* Bubble look differs by audience: teen = comic-bubble; child/adult = standard cards (styles.css). */
body[class*="theme-audience-"] #login-screen .login-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body[class*="theme-audience-"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 94%, var(--accent) 6%) 0%,
    var(--bg) 38%
  );
}

body[class*="theme-subject-"] .setup-header {
  position: relative;
  overflow: hidden;
}

body[class*="theme-subject-"] .setup-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--theme-pattern-opacity);
  background-image: var(--theme-pattern-image, none);
  background-repeat: repeat;
  background-size: 96px 96px;
  pointer-events: none;
}

body[class*="theme-subject-"] .setup-header > * {
  position: relative;
  z-index: 1;
}

body[class*="theme-subject-"] .topic-chip {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* —— Audience: Child —— */
body.theme-audience-child {
  --theme-color: #1a1030;
  --theme-accent: #ff8fab;
  --theme-accent-soft: rgba(255, 143, 171, 0.22);
  --theme-radius: 18px;
  --theme-radius-lg: 22px;
  --theme-font-scale: 1.08;
  --theme-line-height: 1.55;
  --theme-space: 1.12;
  --theme-bubble-padding: 1rem 1.1rem;
  --theme-pattern-opacity: 0.09;
  --theme-font-display: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  --bg: #1a1030;
  --surface: #261845;
  --surface-2: #322058;
  --border: #4a3868;
  --text: #fff7fb;
  --muted: #c9b8dc;
  --accent: #ff8fab;
  --accent-press: #ff6b8f;
  --examiner: #3d2a62;
  --learner: #4a3278;
  --success: #7dffb2;
}

@media (prefers-color-scheme: light) {
  body.theme-audience-child {
    --bg: #fdf0ff;
    --surface: #ffffff;
    --surface-2: #f5e6ff;
    --border: #e0c4ef;
    --text: #3b1348;
    --muted: #7a5c8a;
    --examiner: #f0e0ff;
    --learner: #ffe3f0;
    --theme-color: #fdf0ff;
  }
}

body.theme-audience-child .brand-mark {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff8fab, #ffd166, #8ecae6);
  box-shadow: 0 8px 24px rgba(255, 143, 171, 0.35);
}

body.theme-audience-child .brand-mark::after {
  content: attr(data-mascot);
  position: absolute;
  right: -6px;
  top: -8px;
  font-size: 1rem;
}

body.theme-audience-child .bubble {
  font-size: calc(1rem * var(--theme-font-scale));
  line-height: var(--theme-line-height);
  border-radius: var(--theme-radius);
  padding: var(--theme-bubble-padding);
}

body.theme-audience-child .bubble.examiner {
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

body.theme-audience-child .bubble.learner.bubble-celebrated {
  border-color: color-mix(in srgb, var(--success) 55%, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

body.theme-audience-child .bubble-reaction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  animation: childReactionIn 0.45s ease;
}

body.theme-audience-child .bubble-reaction-icons {
  font-size: 1.35rem;
  letter-spacing: 0.15rem;
  animation: childEmojiPop 0.55s ease;
}

body.theme-audience-child .bubble-reaction-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent) 70%, white);
}

body.theme-audience-child .bubble-reaction-badge {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 35%, white);
  color: #3b1348;
}

body.theme-audience-child .btn-send {
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), #ffd166);
}

body.theme-audience-child .live-stat {
  border-radius: 16px;
}

body.theme-audience-child .setup-form,
body.theme-audience-child .composer textarea {
  font-size: calc(1rem * var(--theme-font-scale));
}

/* —— Audience: Teen —— */
body.theme-audience-teen {
  --theme-color: #0f1524;
  --theme-accent: #7c5cff;
  --theme-accent-soft: rgba(124, 92, 255, 0.2);
  --theme-radius: 14px;
  --theme-font-scale: 1.03;
  --theme-line-height: 1.5;
  --theme-font-display: "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --bg: #0f1524;
  --surface: #171f33;
  --surface-2: #212b44;
  --border: #334066;
  --accent: #7c5cff;
  --accent-press: #6246e5;
}

@media (prefers-color-scheme: light) {
  body.theme-audience-teen {
    --bg: #ecefff;
    --surface: #ffffff;
    --surface-2: #dde4ff;
    --border: #b8c4ef;
    --text: #141a33;
    --muted: #4f5d8a;
    --theme-color: #ecefff;
  }
}

body.theme-audience-teen .brand-mark {
  border-radius: 14px;
  transform: rotate(-3deg);
  background: linear-gradient(135deg, #7c5cff, #00d4ff);
}

body.theme-audience-teen .messages {
  gap: calc(1rem * var(--theme-space, 1));
}

body.theme-audience-teen .bubble.comic-bubble {
  position: relative;
  max-width: 92%;
  border: 3px solid #12131a;
  color: #12131a;
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow: 5px 5px 0 rgba(18, 19, 26, 0.22);
  padding: 0.95rem 1.15rem;
  border-radius: 22px;
  overflow: visible;
  margin-bottom: 0.35rem;
}

body.theme-audience-teen .bubble.comic-bubble.examiner {
  align-self: flex-start;
  margin-left: 0.15rem;
  background: #fffef8;
  border-radius: 22px 22px 22px 8px;
}

body.theme-audience-teen .bubble.comic-bubble.examiner::before,
body.theme-audience-teen .bubble.comic-bubble.examiner::after {
  content: "";
  position: absolute;
  background: #fffef8;
  border: 3px solid #12131a;
}

body.theme-audience-teen .bubble.comic-bubble.examiner::before {
  width: 14px;
  height: 14px;
  bottom: -11px;
  left: 32px;
  border-radius: 50%;
}

body.theme-audience-teen .bubble.comic-bubble.examiner::after {
  width: 10px;
  height: 10px;
  bottom: -20px;
  left: 20px;
  border-radius: 50%;
}

body.theme-audience-teen .bubble.comic-bubble.learner {
  align-self: flex-end;
  margin-right: 0.15rem;
  background: #dff4ff;
  border-radius: 22px 22px 8px 22px;
}

body.theme-audience-teen .bubble.comic-bubble.learner::before,
body.theme-audience-teen .bubble.comic-bubble.learner::after {
  content: "";
  position: absolute;
  background: #dff4ff;
  border: 3px solid #12131a;
}

body.theme-audience-teen .bubble.comic-bubble.learner::before {
  width: 14px;
  height: 14px;
  bottom: -11px;
  right: 32px;
  border-radius: 50%;
}

body.theme-audience-teen .bubble.comic-bubble.learner::after {
  width: 10px;
  height: 10px;
  bottom: -20px;
  right: 20px;
  border-radius: 50%;
}

body.theme-audience-teen .thinking-bubble {
  position: relative;
  max-width: 92%;
  border: 3px solid #12131a;
  color: #12131a;
  font-weight: 650;
  background: #fffef8;
  border-radius: 22px 22px 22px 8px;
  box-shadow: 5px 5px 0 rgba(18, 19, 26, 0.22);
}

body.theme-audience-teen .thinking-bubble.comic-bubble {
  background: #fffef8;
}

body.theme-audience-teen .topic-chip {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

body.theme-audience-teen .live-dashboard-title::after {
  content: " · your journey";
  color: var(--muted);
  font-weight: 500;
}

body.theme-audience-teen .theme-teen-level {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #12131a;
  background: linear-gradient(135deg, #00d4ff, #7c5cff);
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.35);
  animation: teenBadgePop 0.45s ease;
}

body.theme-audience-teen .bubble-reaction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 2px solid color-mix(in srgb, var(--accent) 45%, #12131a);
  animation: teenReactionIn 0.4s ease;
}

body.theme-audience-teen .bubble-reaction-badge {
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #12131a;
  background: linear-gradient(135deg, #ffd166, #00d4ff);
  border: 2px solid #12131a;
  box-shadow: 2px 2px 0 rgba(18, 19, 26, 0.2);
}

body.theme-audience-teen .bubble-reaction-icons {
  font-size: 1.2rem;
  letter-spacing: 0.12rem;
}

body.theme-audience-teen .bubble-reaction-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #12131a;
}

body.theme-audience-teen .bubble-teen-celebrated {
  box-shadow: 6px 6px 0 rgba(124, 92, 255, 0.35);
}

body.theme-audience-teen .bubble-teen-supportive {
  box-shadow: 5px 5px 0 rgba(18, 19, 26, 0.18);
}

body.theme-audience-teen .bubble-teen-supportive .bubble-reaction-badge {
  background: linear-gradient(135deg, #c8e6ff, #b8f0d8);
}

body.theme-audience-child .bubble-child-supportive .bubble-reaction {
  border-top-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

/* —— Audience: Adult variants —— */
body.theme-audience-adult,
body.theme-audience-adult-student,
body.theme-audience-adult-lifelong {
  --theme-font-body: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

body.theme-audience-adult-professional {
  --theme-font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --theme-font-body: "Segoe UI", system-ui, sans-serif;
  --theme-radius: 10px;
  --theme-pattern-opacity: 0.04;
}

body.theme-audience-adult-teacher {
  --theme-font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --theme-font-body: Georgia, "Times New Roman", serif;
  --theme-line-height: 1.6;
}

body.theme-audience-adult-undergraduate {
  --theme-font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --theme-accent: #4d9bff;
}

body.theme-audience-adult-lifelong {
  --theme-font-scale: 1.06;
  --theme-line-height: 1.65;
  --theme-space: 1.08;
}

body.theme-audience-adult-senior {
  --theme-font-scale: 1.1;
  --theme-line-height: 1.7;
  --theme-space: 1.12;
  --theme-font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --theme-font-body: "Segoe UI", system-ui, sans-serif;
}

body[class*="theme-audience-adult"] .bubble {
  animation: none;
}

body[class*="theme-audience-adult"] .theme-adult-status {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}

body[class*="theme-audience-adult"] .theme-adult-status[data-tone="refine"] {
  color: color-mix(in srgb, var(--warn) 80%, var(--text));
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
}

body[class*="theme-audience-adult"] .bubble-reaction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin-top: 0.6rem;
  padding: 0.55rem 0 0 0.65rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  animation: adultReactionIn 0.35s ease;
}

body[class*="theme-audience-adult"] .bubble-adult-refine .bubble-reaction {
  border-left-color: color-mix(in srgb, var(--warn) 60%, var(--border));
}

body[class*="theme-audience-adult"] .bubble-reaction-badge {
  padding: 0.1rem 0.42rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
}

body[class*="theme-audience-adult"] .bubble-adult-refine .bubble-reaction-badge {
  color: color-mix(in srgb, var(--warn) 85%, var(--text));
  border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
}

body[class*="theme-audience-adult"] .bubble-reaction-icons {
  font-size: 0.95rem;
  letter-spacing: 0.08rem;
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
  font-weight: 600;
}

body[class*="theme-audience-adult"] .bubble-reaction-label {
  font-size: 0.86rem;
  font-weight: 600;
  font-style: italic;
  color: var(--muted);
}

body[class*="theme-audience-adult"] .bubble-adult-celebrated {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

body[class*="theme-audience-adult"] .bubble-adult-refine.bubble-adult-celebrated {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 10%, transparent);
}

/* Teen + adult: distinct subject palettes (no image assets — CSS gradients only) */
body.theme-audience-teen.theme-subject-math {
  --subject-screen-bg: linear-gradient(165deg, #0a1020 0%, #121a30 45%, #080c18 100%);
  --accent: #60a5fa;
}

body.theme-audience-teen.theme-subject-language {
  --subject-screen-bg: linear-gradient(165deg, #120a1e 0%, #1a1230 48%, #0a0614 100%);
  --accent: #c084fc;
}

body.theme-audience-teen.theme-subject-programming {
  --subject-screen-bg: linear-gradient(165deg, #061018 0%, #0c1a24 48%, #040a10 100%);
  --accent: #2dd4bf;
}

body[class*="theme-audience-adult"].theme-subject-math {
  --subject-screen-bg: linear-gradient(165deg, #101620 0%, #141c28 50%, #0c1018 100%);
  --accent: #4d9bff;
}

body[class*="theme-audience-adult"].theme-subject-language {
  --subject-screen-bg: linear-gradient(165deg, #121018 0%, #181424 50%, #0e0a14 100%);
  --accent: #8b5cf6;
}

body[class*="theme-audience-adult"].theme-subject-programming {
  --subject-screen-bg: linear-gradient(165deg, #0c1216 0%, #121c22 50%, #080e12 100%);
  --accent: #14b8a6;
}

@media (prefers-color-scheme: light) {
  body.theme-audience-teen.theme-subject-math {
    --subject-screen-bg: linear-gradient(165deg, #e8f0ff 0%, #dce8ff 50%, #cfdfff 100%);
    --accent: #2563eb;
  }

  body.theme-audience-teen.theme-subject-language {
    --subject-screen-bg: linear-gradient(165deg, #f3e8ff 0%, #ebe0ff 50%, #e0d4ff 100%);
    --accent: #7c3aed;
  }

  body[class*="theme-audience-adult"].theme-subject-math {
    --subject-screen-bg: linear-gradient(165deg, #eef3f9 0%, #e4ebf4 50%, #d9e3ef 100%);
  }

  body[class*="theme-audience-adult"].theme-subject-language {
    --subject-screen-bg: linear-gradient(165deg, #f6f2fc 0%, #ece6f8 50%, #e2daf2 100%);
  }
}

/* Subject-aware screen backgrounds (child, teen, adult) */
body[class*="theme-audience-"].theme-subject-koha {
  --subject-screen-bg: linear-gradient(165deg, #1a1410 0%, #241c16 50%, #14100c 100%);
  --subject-messages-overlay: rgba(196, 154, 108, 0.05);
  --accent: #c49a6c;
}

body[class*="theme-audience-"].theme-subject-programming {
  --subject-screen-bg: linear-gradient(165deg, #0a1218 0%, #0f1a22 50%, #081016 100%);
  --subject-messages-overlay: rgba(94, 234, 212, 0.04);
  --accent: #5eead4;
}

body[class*="theme-audience-"].theme-subject-accounting {
  --subject-screen-bg: linear-gradient(165deg, #101418 0%, #141c22 50%, #0c1014 100%);
  --subject-messages-overlay: rgba(148, 163, 184, 0.05);
  --accent: #94a3b8;
}

body[class*="theme-audience-"].theme-subject-math {
  --subject-screen-bg: linear-gradient(165deg, #0e1218 0%, #121824 48%, #0a0e14 100%);
  --subject-messages-overlay: rgba(77, 155, 255, 0.05);
}

body[class*="theme-audience-"].theme-subject-science {
  --subject-screen-bg: linear-gradient(165deg, #0a1418 0%, #102028 50%, #081014 100%);
  --subject-messages-overlay: rgba(56, 189, 248, 0.05);
  --accent: #38bdf8;
}

body[class*="theme-audience-"].theme-subject-history {
  --subject-screen-bg: linear-gradient(165deg, #16120e 0%, #201812 50%, #100e0a 100%);
  --subject-messages-overlay: rgba(217, 119, 6, 0.05);
  --accent: #d97706;
}

body[class*="theme-audience-"].theme-subject-language {
  --subject-screen-bg: linear-gradient(165deg, #141018 0%, #1a1424 50%, #0e0a14 100%);
  --subject-messages-overlay: rgba(167, 139, 250, 0.05);
  --accent: #a78bfa;
}

@media (prefers-color-scheme: light) {
  body[class*="theme-audience-"].theme-subject-koha {
    --subject-screen-bg: linear-gradient(165deg, #faf6f0 0%, #f0e8dc 50%, #e8dfd0 100%);
    --subject-messages-overlay: rgba(196, 154, 108, 0.08);
  }

  body[class*="theme-audience-"].theme-subject-programming {
    --subject-screen-bg: linear-gradient(165deg, #eef6f8 0%, #e0eef2 50%, #d8e8ec 100%);
    --subject-messages-overlay: rgba(13, 148, 136, 0.06);
    --accent: #0d9488;
  }

  body[class*="theme-audience-"].theme-subject-accounting {
    --subject-screen-bg: linear-gradient(165deg, #f4f6f8 0%, #e8edf2 50%, #dfe6ed 100%);
    --subject-messages-overlay: rgba(71, 85, 105, 0.06);
  }

  body[class*="theme-audience-"].theme-subject-math {
    --subject-screen-bg: linear-gradient(165deg, #eef3fa 0%, #e2eaf6 50%, #d8e2f0 100%);
    --subject-messages-overlay: rgba(37, 99, 235, 0.06);
  }

  body[class*="theme-audience-"].theme-subject-science {
    --subject-screen-bg: linear-gradient(165deg, #eef8fc 0%, #e0f0f8 50%, #d4eaf4 100%);
    --subject-messages-overlay: rgba(2, 132, 199, 0.06);
  }

  body[class*="theme-audience-"].theme-subject-history {
    --subject-screen-bg: linear-gradient(165deg, #faf6f0 0%, #f2ebe0 50%, #ebe0d0 100%);
    --subject-messages-overlay: rgba(180, 83, 9, 0.06);
  }

  body[class*="theme-audience-"].theme-subject-language {
    --subject-screen-bg: linear-gradient(165deg, #f8f4ff 0%, #efe8fc 50%, #e6dcf8 100%);
    --subject-messages-overlay: rgba(124, 58, 237, 0.06);
    --accent: #7c3aed;
  }
}

body[class*="theme-audience-"]:not(.theme-subject-general) .screen {
  background: var(--subject-screen-bg, var(--bg));
}

body[class*="theme-audience-"]:not(.theme-subject-general) .messages {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

body[class*="theme-audience-"]:not(.theme-subject-general) .messages::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--subject-messages-overlay);
  background-image: var(--theme-pattern-image, none);
  background-repeat: repeat;
  background-size: 104px 104px;
  opacity: var(--theme-pattern-opacity);
}

body[class*="theme-audience-"]:not(.theme-subject-general) .messages > * {
  position: relative;
  z-index: 1;
}

body[class*="theme-audience-"]:not(.theme-subject-general) .live-dashboard,
body[class*="theme-audience-"]:not(.theme-subject-general) .chat-header,
body[class*="theme-audience-"]:not(.theme-subject-general) .composer {
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

/* Typography application */
body[class*="theme-audience-"] .setup-header h1,
body[class*="theme-audience-"] .chat-header,
body[class*="theme-audience-"] .topic-chip {
  font-family: var(--theme-font-display);
}

body[class*="theme-audience-"] .messages,
body[class*="theme-audience-"] .field select,
body[class*="theme-audience-"] .field input,
body[class*="theme-audience-"] .composer textarea {
  font-family: var(--theme-font-body);
  font-size: calc(1rem * var(--theme-font-scale));
  line-height: var(--theme-line-height);
}

body[class*="theme-audience-"] .chat-header {
  background: var(--theme-header-bg);
}

/* —— Subject pattern assets —— */
body.theme-subject-koha {
  --theme-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ctext x='8' y='28' fill='%238b7355' font-size='18' opacity='.55'%3E📚%3C/text%3E%3Ctext x='40' y='62' fill='%238b7355' font-size='14' opacity='.4'%3E🗂️%3C/text%3E%3C/svg%3E");
}

body.theme-subject-programming {
  --theme-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Ctext x='10' y='30' fill='%230d9488' font-size='16' font-family='monospace' opacity='.35'%3E%7B%7D%3C/text%3E%3Ctext x='48' y='68' fill='%230d9488' font-size='14' font-family='monospace' opacity='.25'%3E%3C/%3E%3C/text%3E%3C/svg%3E");
}

body.theme-subject-accounting {
  --theme-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Ctext x='12' y='32' fill='%23475569' font-size='16' opacity='.35'%3E📊%3C/text%3E%3Ctext x='44' y='70' fill='%23475569' font-size='14' opacity='.25'%3E📒%3C/text%3E%3C/svg%3E");
}

body.theme-subject-math {
  --theme-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Ctext x='8' y='34' fill='%232563eb' font-size='18' opacity='.28'%3E∑%3C/text%3E%3Ctext x='46' y='72' fill='%232563eb' font-size='16' opacity='.22'%3Eπ%3C/text%3E%3C/svg%3E");
}

body.theme-subject-science {
  --theme-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Ctext x='10' y='34' fill='%230288c7' font-size='16' opacity='.3'%3E⚗️%3C/text%3E%3Ctext x='48' y='72' fill='%230288c7' font-size='14' opacity='.22'%3E🧬%3C/text%3E%3C/svg%3E");
}

body.theme-subject-history {
  --theme-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Ctext x='10' y='34' fill='%23b45309' font-size='16' opacity='.28'%3E🏛%3C/text%3E%3Ctext x='44' y='72' fill='%23b45309' font-size='14' opacity='.22'%3E⏳%3C/text%3E%3C/svg%3E");
}

body.theme-subject-language {
  --theme-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Ctext x='10' y='34' fill='%237c3aed' font-size='16' opacity='.28'%3E📖%3C/text%3E%3Ctext x='44' y='72' fill='%237c3aed' font-size='14' opacity='.22'%3E✍️%3C/text%3E%3C/svg%3E");
}

body.theme-subject-koha.theme-audience-child {
  --accent: #ffb86c;
  --accent-press: #f4a261;
}

body.theme-subject-programming.theme-audience-teen {
  --accent: #00d4ff;
}

body.theme-subject-language.theme-audience-teen {
  --accent: #c084fc;
}

body.theme-subject-language.theme-audience-child {
  --accent: #c4b5fd;
}

/* Celebration layer — child: every evaluation step */
.theme-celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 16vh;
  gap: 0.75rem;
}

.theme-celebration-burst {
  position: relative;
  width: min(280px, 80vw);
  height: 72px;
}

.theme-float-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.75rem;
  transform: translate(-50%, -50%);
  animation: childFloatEmoji 1.8s ease forwards;
  animation-delay: calc(var(--float-i, 0) * 0.08s);
}

.theme-celebration-text {
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: themeCelebrateIn 0.45s ease;
}

.theme-celebrate-child .theme-celebration-text {
  background: linear-gradient(135deg, #ffd166, #ff8fab);
  color: #3b1348;
}

.theme-celebrate-teen .theme-celebration-text {
  background: linear-gradient(135deg, #00d4ff, #7c5cff);
  color: #0f1524;
  border: 3px solid #12131a;
  box-shadow: 5px 5px 0 rgba(18, 19, 26, 0.25);
}

.theme-celebrate-adult {
  padding-top: 12vh;
  justify-content: flex-start;
}

.theme-celebrate-adult .theme-celebration-burst {
  width: auto;
  height: auto;
}

.theme-celebrate-adult .theme-adult-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  animation: adultMarkIn 0.4s ease;
}

.theme-celebrate-adult .theme-celebration-text {
  max-width: min(420px, 88vw);
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  animation: themeCelebrateIn 0.35s ease;
}

.theme-celebrate-adult.theme-celebrate-refine .theme-celebration-text,
.theme-celebrate-adult.theme-celebrate-refine .theme-adult-mark {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

@keyframes teenReactionIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes teenBadgePop {
  0% {
    transform: scale(0.85);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes adultReactionIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes adultMarkIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes childReactionIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes childEmojiPop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes childFloatEmoji {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + (var(--float-i, 0) - 1) * 36px),
        calc(-50% - 48px - var(--float-i, 0) * 8px)
      )
      scale(1.1);
  }
}

@keyframes themeCelebrateIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-celebration,
  .theme-celebration-text,
  .theme-float-emoji,
  body.theme-audience-child .bubble-reaction,
  body.theme-audience-child .bubble-reaction-icons,
  body.theme-audience-teen .bubble-reaction,
  body.theme-audience-teen .theme-teen-level,
  body[class*="theme-audience-adult"] .bubble-reaction,
  body[class*="theme-audience-adult"] .theme-adult-status,
  body.theme-audience-teen .brand-mark {
    animation: none !important;
  }

  body.theme-audience-teen .brand-mark {
    transform: none;
  }
}