/* chat-themes.css
   Chat themes for Years 7 to 12 (sm-themes.js lists them, chat-themes.js
   applies them). Years 3 to 6 keep stars and the Star shop, and never get
   body[data-sm-theme], so nothing here touches them.

   A theme is a set of tokens on body[data-sm-theme] (and on a picker
   swatch, [data-th], so the preview is drawn from the same values):
     --th-bg       the chat behind the messages
     --th-art      an optional fine pattern over it (low contrast, never
                   competing with the text)
   Dark themes (body.smth-dark) also set the surfaces and ink, and remap the
   app's own tokens inside #app, so the header, bubbles, composer, menus,
   Maths Studio cards and streaming text all follow. Graphs, working panels
   and tool panels inside a message keep their light paper (restored tokens
   below), because their drawings are made for it.

   Dark contrast, measured (WCAG 2.1) on every visible text element in the
   header, chat, composer and menus, in all four dark themes, desktop and
   phone: 4.98:1 or more everywhere (the lowest is white on the deep teal
   student bubble and Send button), 5.3:1 or more on the welcome screen. */

/* ── Light family: the chat colour only; bubbles, header and composer stay white ── */
body[data-sm-theme="th-slate"], [data-th="th-slate"] { --th-bg: #E9EDF1; }
body[data-sm-theme="th-sage"],  [data-th="th-sage"]  { --th-bg: #E8EFE7; }
body[data-sm-theme="th-sand"],  [data-th="th-sand"]  { --th-bg: #F3ECDF; }
body[data-sm-theme="th-lilac"], [data-th="th-lilac"] { --th-bg: #EFEAF6; }
body[data-sm-theme="th-grid"],  [data-th="th-grid"]  {
  --th-bg: #F7F8F6;
  --th-art: linear-gradient(rgba(47,122,128,.075) 1px, transparent 1px) 0 0 / 24px 24px,
            linear-gradient(90deg, rgba(47,122,128,.075) 1px, transparent 1px) 0 0 / 24px 24px;
}
body[data-sm-theme="th-dots"],  [data-th="th-dots"]  {
  --th-bg: #F8F7F3;
  --th-art: radial-gradient(circle, rgba(26,23,20,.16) 1px, transparent 1.5px) 0 0 / 18px 18px;
}
body[data-sm-theme="th-topo"],  [data-th="th-topo"]  {
  --th-bg: #F2F1EA;
  --th-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%234E8A90' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M180 58c64 0 118 40 116 104s-44 126-118 126S54 238 60 168 116 58 180 58z'/%3E%3Cpath d='M180 92c46 0 84 28 82 74s-32 88-84 88-88-34-84-84 40-78 86-78z'/%3E%3Cpath d='M182 126c28 0 50 18 48 44s-20 52-50 52-52-20-50-48 24-48 52-48z'/%3E%3Cpath d='M180 156c12 0 22 8 21 19s-9 22-21 22-22-9-21-21 9-20 21-20z'/%3E%3Cpath d='M-20 330c60-30 120-10 180 0s140 20 220-20'/%3E%3Cpath d='M-20 30c70 20 130-10 190-20s130 0 210 30'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 360px;
}

/* ── Dark family ── */
body[data-sm-theme="th-dark"], [data-th="th-dark"] {
  --th-bg: #121619; --th-surface: #1C2226; --th-surface2: #262D32; --th-line: rgba(255,255,255,.12);
  --th-ink: #ECEFF1; --th-ink-soft: #C3CBCF; --th-accent: #8ED0D5; --th-ph: #9AA4A9;
}
body[data-sm-theme="th-teal"], [data-th="th-teal"] {
  --th-bg: #0F2B2E; --th-surface: #163A3E; --th-surface2: #1F4A4F; --th-line: rgba(255,255,255,.14);
  --th-ink: #EEF6F6; --th-ink-soft: #C6DCDD; --th-accent: #9ADCE0; --th-ph: #9DBDBF;
}
body[data-sm-theme="th-ocean"], [data-th="th-ocean"] {
  --th-bg: #0B2233; --th-art: linear-gradient(180deg, #0B2233 0%, #0C3140 55%, #0F3D47 100%);
  --th-surface: #142D3D; --th-surface2: #1C3A4C; --th-line: rgba(255,255,255,.13);
  --th-ink: #EDF4F7; --th-ink-soft: #C2D4DC; --th-accent: #94D6E0; --th-ph: #9CB4BF;
}
body[data-sm-theme="th-midnight"], [data-th="th-midnight"] {
  --th-bg: #0B0D1A; --th-art: linear-gradient(180deg, #161A35 0%, #0E1124 55%, #07080F 100%);
  --th-surface: #1A1E36; --th-surface2: #242944; --th-line: rgba(255,255,255,.13);
  --th-ink: #EEEFF6; --th-ink-soft: #C6C9DC; --th-accent: #A9C8F0; --th-ph: #A0A4BE;
}

/* the chat area, every theme */
body[data-sm-theme] #chat-col { background: var(--th-bg); }
body[data-sm-theme] #chat-col::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--th-art, none);
}
body[data-sm-theme] #chat-col { position: relative; isolation: isolate; }
body[data-sm-theme] #chat-col > * { position: relative; z-index: 1; }
body[data-sm-theme] #chat-area { background: transparent; }

/* ── Dark: the app's tokens remapped inside #app ── */
body.smth-dark { background: var(--th-bg); }
body.smth-dark #app {
  --ink: var(--th-ink); --ink-soft: var(--th-ink-soft); --ink-muted: var(--th-ink-soft);
  --cream: var(--th-surface2); --cream-dark: var(--th-surface2); --border: var(--th-line);
  --white: var(--th-surface); --teal-light: rgba(142,208,213,.16);
  background: var(--th-bg); color: var(--th-ink);
}
body.smth-dark #app-nav, body.smth-dark #config-bar { background: var(--th-surface); border-color: var(--th-line); }
body.smth-dark .app-logo { color: var(--th-ink); }
body.smth-dark #c27-subj, body.smth-dark #c27-me, body.smth-dark #my-badges-btn, body.smth-dark #smh-nav,
body.smth-dark #chat-guide-btn, body.smth-dark #logout-btn, body.smth-dark #c27-plus, body.smth-dark .trial-pill {
  background: var(--th-surface2); color: var(--th-ink); border-color: var(--th-line);
}
body.smth-dark .c27-pop { background: var(--th-surface); color: var(--th-ink); box-shadow: 0 20px 50px -18px rgba(0,0,0,.7), 0 0 0 1px var(--th-line); }
body.smth-dark .c27-pop button:hover { background: var(--th-surface2); }
body.smth-dark .c27-mi { background: rgba(142,208,213,.16); color: var(--th-accent); }
body.smth-dark .c27-lvl.core { background: var(--th-surface2); color: var(--th-ink-soft); }
body.smth-dark #c27-subjpop button[aria-pressed="true"] { background: rgba(142,208,213,.16); border-color: var(--th-line); color: var(--th-accent); }

body.smth-dark .msg-row.bot .bubble, body.smth-dark .c27-greet .bubble {
  background: var(--th-surface); color: var(--th-ink); border-color: var(--th-line); box-shadow: none;
}
body.smth-dark .msg-h1, body.smth-dark .msg-h2 { color: var(--th-ink); }
body.smth-dark .msg-h3 { color: var(--th-ink-soft); }
body.smth-dark .c27-who { color: var(--th-accent); }
body.smth-dark .msg-row.bot .msg-avatar, body.smth-dark .c27-greet .msg-avatar { background: var(--th-surface2); border-color: var(--th-line); color: var(--th-accent); }
body.smth-dark .tts-btn { color: var(--th-ink-soft); }
body.smth-dark .tts-btn:hover { background: rgba(255,255,255,.08); color: var(--th-ink); }
body.smth-dark .subject-chip { background: rgba(142,208,213,.14); color: var(--th-accent); }
body.smth-dark .welcome-msg h2, body.smth-dark .welcome-primary h2 { color: var(--th-ink); }
body.smth-dark .welcome-msg p, body.smth-dark .welcome-primary p { color: var(--th-ink-soft); }
body.smth-dark .chip { background: var(--th-surface2); color: var(--th-ink); border-color: var(--th-line); }
body.smth-dark .chip:hover { background: rgba(142,208,213,.16); color: var(--th-accent); border-color: rgba(142,208,213,.4); }
body.smth-dark .typing-dots .dot { background: var(--th-accent); }

body.smth-dark #input-area { background: var(--th-surface); border-color: var(--th-line); box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
body.smth-dark #msg-input { color: var(--th-ink); }
body.smth-dark #msg-input::placeholder { color: var(--th-ph); }
body.smth-dark #c27-bar #studio-chip { background: rgba(142,208,213,.14); border-color: rgba(142,208,213,.35); color: var(--th-accent); }
body.smth-dark #c27-bar #harder-chip { background: var(--th-surface2); border-color: var(--th-line); color: var(--th-ink); }
body.smth-dark #c27-mic { color: var(--th-ink-soft); }
body.smth-dark #c27-mic:hover { background: var(--th-surface2); color: var(--th-ink); }
body.smth-dark #attach-preview, body.smth-dark #voice-input-area { background: var(--th-surface); border-color: var(--th-line); color: var(--th-ink); }

/* the Maths Studio card in a message */
body.smth-dark .smst-offer {
  background: linear-gradient(180deg, rgba(142,208,213,.13), rgba(142,208,213,.07));
  border-color: rgba(142,208,213,.35); color: var(--th-ink); box-shadow: none;
}
body.smth-dark .smst-offer .k { color: var(--th-accent); }
body.smth-dark .smst-offer .t { color: var(--th-ink-soft); }

/* light islands: panels, graphs and tools drawn for a light page keep it */
body.smth-dark #app .bubble [class$="-panel"], body.smth-dark #app .bubble [class*="-panel "],
body.smth-dark #app .live-graph-holder, body.smth-dark #app .graph-holder, body.smth-dark #app .smg-card,
body.smth-dark #app .sm-gt-panel, body.smth-dark #app .sm-primary-tool, body.smth-dark #app #whiteboard-panel,
body.smth-dark #app [class^="mab-"], body.smth-dark #app .diag-card, body.smth-dark #app #diag-wrapper {
  --ink: #1A1714; --ink-soft: #4A4540; --ink-muted: #8A8480; --cream: #FAF6EF; --cream-dark: #F2EBE0;
  --border: rgba(26,23,20,0.1); --white: #FFFFFF; --teal-light: #E8F5F6;
  color: #1A1714;
}

/* ── The picker ── */
body.smth-on #c27-me { display: inline-flex; }
body.smth-on #user-avatar, body.smth-on #logout-btn { display: none !important; }

#smth { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(26,23,20,.4); backdrop-filter: blur(4px); font-family: 'DM Sans', sans-serif; }
#smth .smth-card { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: #1A1714;
  border-radius: 24px; padding: 22px 22px 18px; box-shadow: 0 24px 64px rgba(26,23,20,.28); animation: smthIn .18s ease-out; }
@keyframes smthIn { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
#smth h2 { margin: 0; font: 900 22px Nunito, sans-serif; }
#smth .smth-sub { margin: 4px 0 16px; font-size: 14px; color: #4A4540; line-height: 1.45; }
#smth h3 { margin: 16px 0 10px; font: 800 12px Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #4A4540; }
#smth .smth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
#smth .smth-tile { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 9px; border-radius: 16px; border: 1.5px solid rgba(26,23,20,.1);
  background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; min-height: 44px; transition: border-color .12s, box-shadow .12s; }
#smth .smth-tile:hover { border-color: #79B4BA; }
#smth .smth-tile:focus-visible { outline: 2px solid #37656B; outline-offset: 2px; }
#smth .smth-tile[aria-pressed="true"] { border-color: #2F7A80; box-shadow: 0 0 0 2px #2F7A80; }
#smth .smth-tile .nm { font-weight: 700; font-size: 14px; padding: 0 4px; }
#smth .smth-tile .st { font-size: 12px; color: #4A4540; padding: 0 4px; line-height: 1.35; }
#smth .smth-tile.locked .st { color: #8A5F1E; }
/* the swatch: a tiny chat drawn from the theme's own tokens */
.smth-sw { position: relative; height: 74px; border-radius: 11px; overflow: hidden; background: var(--th-bg, #FAF6EF); border: 1px solid rgba(26,23,20,.08); }
.smth-sw::before { content: ""; position: absolute; inset: 0; background: var(--th-art, none); }
.smth-sw i { position: absolute; display: block; border-radius: 6px; }
.smth-sw .h { left: 0; right: 0; top: 0; height: 12px; border-radius: 0; background: var(--th-surface, #fff); border-bottom: 1px solid var(--th-line, rgba(26,23,20,.08)); }
.smth-sw .b { left: 8px; top: 20px; width: 62%; height: 18px; background: var(--th-surface, #fff); border: 1px solid var(--th-line, rgba(26,23,20,.08)); }
.smth-sw .b::after { content: ""; position: absolute; left: 7px; top: 7px; width: 60%; height: 3px; border-radius: 2px; background: var(--th-ink, #1A1714); opacity: .55; }
.smth-sw .u { right: 8px; top: 44px; width: 38%; height: 14px; background: #2F7A80; }
.smth-sw .lk { right: 6px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; font-size: 12px; }
#smth .smth-msg { min-height: 20px; margin: 14px 2px 0; font-size: 13.5px; color: #4A4540; }
#smth .smth-msg.err { color: #A33A3A; }
#smth .smth-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; position: sticky; bottom: -18px; background: #fff; padding: 12px 0 4px; border-top: 1px solid rgba(26,23,20,.08); }
#smth .smth-foot button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: 800 14px Nunito, sans-serif; cursor: pointer; border: 1.5px solid rgba(26,23,20,.12); background: #fff; color: #1A1714; }
#smth .smth-foot .go { background: #2F7A80; border-color: #2F7A80; color: #fff; }
#smth .smth-foot button:focus-visible { outline: 2px solid #37656B; outline-offset: 2px; }
@media (max-width: 560px) {
  #smth { align-items: flex-end; padding: 0; }
  #smth .smth-card { border-radius: 22px 22px 0 0; max-height: 88vh; padding: 18px 14px 14px; }
  #smth .smth-foot { bottom: -14px; }
  #smth .smth-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { #smth .smth-card { animation: none; } #smth .smth-tile { transition: none; } }