/* ============================================================
   MODULE BRAND BRIDGE — Exponential Partners
   Loaded AFTER each module's own <style>, so these :root values
   win the cascade and re-theme the lesson onto the EP system:
   indigo -> cobalt, system sans -> brand type, neutrals -> ink scale.
   The modules stay byte-for-byte intact; only their CSS variables
   are remapped. Light only.
   ============================================================ */

@import url('/ds/tokens/fonts.css');
@import url('/ds/tokens/colors.css');
@import url('/ds/tokens/typography.css');
@import url('/ds/tokens/layout.css');

:root {
  /* Brand signal: cobalt replaces indigo everywhere the modules used --accent */
  --accent:        var(--blue-600);
  --accent-ink:    var(--blue-700);
  --accent-soft:   var(--blue-50);
  --user-bubble:   var(--blue-600);
  --user-ink:      #ffffff;

  /* Neutrals -> Exponential ink scale */
  --ink:           var(--ink-800);
  --ink-soft:      var(--ink-600);
  --ink-faint:     var(--ink-400);
  --canvas:        var(--paper-tint);
  --rule:          var(--ink-200);
  --rule-strong:   var(--ink-300);
  --bot-bubble:    var(--ink-50);
  --bot-ink:       var(--ink-800);
  --side:          var(--paper-tint); /* app-shell sidebar surface */

  /* Semantics kept quiet, matched to the system */
  --ok:            var(--success);
  --ok-soft:       var(--success-bg);
  --warn:          var(--warning);
  --warn-soft:     var(--warning-bg);
  --danger:        var(--danger);
  --danger-soft:   var(--danger-bg);

  --shadow:        var(--shadow-card);
}

/* Brand voice: neo-grotesque body, Didone serif on display headings */
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--font-display); letter-spacing: var(--ls-display); }

/* The signature device: one accent word in blue italic.
   Modules can opt a word in with <em class="accent"> or <span class="accent-word">. */
.accent-word, h1 em, h2 em {
  font-style: italic;
  color: var(--blue-500);
  font-weight: inherit;
}

/* Embed mode (?embed=1): the lesson is rendered inline inside a page, so drop
   its own page background and let it sit on the host surface. */
html.ac-embed, html.ac-embed body { background: transparent !important; }

/* User messages don't need a "You" avatar — keep them clean, like modern chat UIs. */
/* Hide the "You" avatar on user messages. Needs .app specificity to beat the
   later `.app .avatar { display: grid }` rule below. */
.app .avatar.you { display: none; }

/* Consistent "next module" button appended by window.__acFinish() when a lesson ends. */
.ac-next { display: flex; justify-content: center; padding: 26px 0 8px; }
.ac-next__btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--blue-600); color: #fff; border-radius: var(--radius-pill);
  padding: 13px 24px; font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-brand); transition: background 0.15s, transform 0.12s;
}
.ac-next__btn:hover { background: var(--blue-700); transform: translateY(-1px); }
.ac-next__btn b { font-weight: 800; }

/* Suggested "next step" pill above a lesson's composer (shared by lessons that
   opt in with a #suggestRow/#suggestPill above their input). */
.suggest-row { display: flex; justify-content: center; margin-bottom: 12px; }
.suggest-row.hidden { display: none; }
.suggest-pill {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px; padding: 9px 17px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.suggest-pill:hover:not(:disabled) { background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.suggest-pill:disabled { opacity: 0.5; cursor: default; }
.suggest-pill .sp-ic {
  display: grid; place-items: center; flex: none;
  width: 19px; height: 19px; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800;
}
.suggest-pill:hover:not(:disabled) .sp-ic { background: #fff; color: var(--accent); }
.suggest-pill .sp-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-pill .sp-ar { transition: transform 0.15s; }
.suggest-pill:hover:not(:disabled) .sp-ar { transform: translateX(3px); }

/* Brand logo image (the build swaps the ">_" lockups for /autocomplete-logo.png).
   The .logo / .side-brand flex containers stay; we just size the image. */
.topbar .logo img { height: 39px; width: auto; display: block; }
.side .side-brand img { height: 28px; width: auto; display: block; }

/* ============================================================
   SHARED APP SHELL — the full-screen "LLM app" form factor
   (sidebar + main chat) that every lesson now renders inside.
   Ported from the approved module-0 reference so all eight
   lessons share ONE definition instead of copy-pasting it 8×.
   Everything is scoped under .app so single-column lessons that
   haven't been wrapped yet are untouched. Module files keep only
   their demo-specific CSS; this owns the chrome.
   ============================================================ */

/* Full-height shell. position:relative so the mobile sidebar drawer + its
   backdrop (and the ui-tour overlay) anchor to the app. */
.app { position: relative; display: flex; height: 100vh; overflow: hidden; background: var(--paper); }

/* ----- Sidebar ----- */
.app .side { width: 264px; flex: none; background: var(--side); border-right: 1px solid var(--rule); display: flex; flex-direction: column; padding: 14px 12px; gap: 4px; }
.app .side-brand { display: flex; align-items: center; padding: 8px 8px 12px; }
.app .side .side-brand img { height: 42px; width: auto; display: block; }

.app .side-btn { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--rule-strong); background: var(--paper); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.3; font-weight: 600; color: var(--ink); cursor: pointer; font-family: inherit; text-decoration: none; margin-top: 6px; }
.app .side-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.app .side-btn svg { color: var(--accent); flex: none; }

.app .side-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.app .side-sec { margin-top: 8px; }
.app .side-label { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; padding: 4px 8px; margin-bottom: 2px; }
.app .side-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; font-size: 13px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; overflow: hidden; }
.app .side-item:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); color: var(--ink); }
.app .side-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.app .side-item svg { flex: none; }
.app .side-item.proj svg { color: var(--accent); }
.app .side-item .si-main { overflow: hidden; text-overflow: ellipsis; }
.app .side-empty { font-size: 12.5px; color: var(--ink-faint); padding: 6px 9px; }

/* "This lesson" panel pinned to the sidebar bottom */
.app .side-lesson { border: 1px solid var(--rule); background: var(--paper); border-radius: 12px; padding: 12px 12px 11px; margin-top: 8px; box-shadow: var(--shadow); }
.app .sl-head { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 3px; }
.app .sl-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.app .sl-steps { display: flex; flex-direction: column; gap: 2px; margin-bottom: 11px; }
.app .sl-step { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; font-family: inherit; padding: 6px 6px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); }
.app .sl-step:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }
.app .sl-step:disabled { cursor: default; }
.app .sl-step.locked { opacity: 0.45; }
.app .sl-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1.6px solid var(--rule-strong); display: grid; place-items: center; font-size: 10px; font-weight: 800; color: transparent; }
.app .sl-step.current .sl-dot { border-color: var(--accent); color: var(--accent); }
.app .sl-step.done .sl-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.app .sl-step .sl-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .sl-step.done .sl-lbl { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

.app .sl-complete { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; border-radius: 9px; padding: 9px 12px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; background: var(--accent); color: #fff; transition: background 0.15s, opacity 0.15s; }
.app .sl-complete:disabled { opacity: 0.45; cursor: default; }
.app .sl-complete:not(:disabled):hover { background: var(--accent-ink); }
.app .side-lesson.is-complete .sl-complete { background: var(--ok-soft); color: #0b7a52; }
.app .sl-next { display: block; text-align: center; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.app .sl-next:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Restart, relocated by the shell runtime into the module card after Mark complete. */
.app .sl-restart { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 7px; border: 1px solid var(--rule-strong); background: var(--paper); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: var(--ink-soft); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.app .sl-restart:hover { background: var(--canvas); border-color: var(--accent); color: var(--accent-ink); }
.app .sl-restart svg { flex: none; color: var(--ink-faint); }
.app .sl-restart:hover svg { color: var(--accent); }

/* ----- Main chat column ----- */
.app .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app .topbar2 { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.app .ctl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule-strong); background: var(--paper); border-radius: 9px; padding: 7px 11px; font-size: 13px; font-weight: 600; color: var(--ink); }
.app .ctl .car { color: var(--ink-faint); font-size: 11px; }
.app .spacer { flex: 1; }
.app .mod-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; }
.app .mdot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink-faint); background: var(--canvas); border: 1.5px solid var(--rule-strong); transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s; }
.app a.mdot { text-decoration: none; }
.app .mdot.is-complete { background: var(--ok); border-color: var(--ok); color: #fff; }
.app .mdot.mdot--here { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--accent) 38%, var(--rule-strong)); }
.app .mdot.mdot--here.is-complete { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--ok) 45%, var(--rule-strong)); }
.app a.mdot:hover { transform: scale(1.18); background: var(--accent); border-color: var(--accent); color: #fff; }
.app .composer-note { max-width: 720px; margin: 10px auto 0; text-align: center; font-size: 12px; color: var(--ink-faint); }

.app .chatarea { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.app .messages { max-width: 720px; margin: 0 auto; padding: 28px 24px 8px; display: flex; flex-direction: column; gap: 18px; }

/* Lead-in: the intro folded into the top of the chat */
.app .lead-in { padding: 2px; }
.app .lead-in .eyebrow { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.app .lead-in h1 { font-size: 29px; line-height: 1.12; margin: 0 0 13px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.app .lead-in p { margin: 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.55; }
.app .lead-in strong { color: var(--ink); font-weight: 600; }
.app .lead-cta { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.app .lead-cta svg { color: var(--accent); flex: none; }
.app .lead-in--started { padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.app .lead-in--started .lead-cta { display: none; }

/* Chat primitives */
.app .row { display: flex; gap: 12px; align-items: flex-start; }
.app .row.user { flex-direction: row-reverse; }
.app .avatar { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.app .avatar.bot { background: var(--accent); color: #fff; }
.app .bubble { max-width: 80%; padding: 12px 15px; border-radius: 14px; font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.app .row.user .bubble { background: var(--user-bubble); color: var(--user-ink); border-bottom-right-radius: 5px; }
.app .row.bot .bubble { background: var(--bot-bubble); color: var(--bot-ink); border-bottom-left-radius: 5px; }
.app .bubble .cursor { display: inline-block; width: 7px; height: 17px; vertical-align: text-bottom; background: currentColor; opacity: 0.5; margin-left: 1px; animation: acblink 1s steps(2, start) infinite; }

/* Copy control beneath each user message (injected by the shared shell). Only
   user rows get it: the bubble is wrapped in a right-aligned column so the
   button tucks under the bubble's trailing edge. */
.app .ac-user-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 80%; min-width: 0; }
.app .ac-user-col .bubble { max-width: 100%; }
.app .ac-copy { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--rule-strong); border-radius: 7px; background: var(--paper); color: var(--ink-soft); font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.app .ac-copy:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.app .ac-copy.is-copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--rule-strong)); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.app .ac-copy svg { width: 13px; height: 13px; flex: none; }
.app .typing-dots { display: inline-flex; gap: 4px; padding: 3px 2px; }
.app .typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: acbounce 1.2s infinite ease-in-out both; }
.app .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.app .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
.app .next-cta { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.app .next-cta:hover { border-bottom-color: currentColor; }
@keyframes acblink { to { visibility: hidden; } }
@keyframes acbounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

/* Composer */
.app .composer { border-top: 1px solid var(--rule); padding: 14px 16px 18px; }
.app .composer-inner { max-width: 720px; margin: 0 auto; }
.app .input-shell { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule-strong); border-radius: 14px; padding: 11px 12px 11px 16px; background: var(--canvas); transition: border-color 0.15s, box-shadow 0.15s; }
.app .input-shell.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
.app .input-text { flex: 1; font-size: 15.5px; color: var(--ink); min-height: 22px; font-family: inherit; white-space: pre-wrap; }
.app .input-text.placeholder { color: var(--ink-faint); }
.app .input-text .cursor { display: inline-block; width: 1.5px; height: 18px; vertical-align: text-bottom; background: var(--accent); margin-left: 1px; animation: acblink 1s steps(2, start) infinite; }
.app .send-btn { width: 34px; height: 34px; border-radius: 9px; border: none; flex: none; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
.app .send-btn:disabled { opacity: 0.4; cursor: default; }

/* ----- Sidebar toggle (open/close) ----- */
/* Bottom-of-chat "continue" pill, injected by the shared shell when a lesson's
   steps finish. Marks complete + moves to the next module in one tap. */
.app .ac-continue-row { display: flex; justify-content: center; padding: 10px 0 6px; }
.app .ac-continue-pill { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 999px; padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--accent); color: #fff; box-shadow: var(--shadow); transition: background 0.15s, transform 0.05s; animation: acpop 0.28s ease; }
@keyframes acpop { from { opacity: 0; transform: translateY(5px) scale(0.97); } to { opacity: 1; transform: none; } }
.app .ac-continue-pill:hover { background: var(--accent-ink); }
.app .ac-continue-pill:active { transform: scale(0.98); }
.app .ac-continue-pill.is-done { background: var(--ok-soft); color: #0b7a52; cursor: default; }

/* The toggle button is injected into .topbar2 by the shared shell runtime. */
.app .nav-toggle { width: 34px; height: 34px; border-radius: 9px; flex: none; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.app .nav-toggle:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.app .nav-backdrop { display: none; }

/* Home-page hero: the lesson renders as a compact, chat-only preview — the shell
   sets .ac-preview whenever a ?launch target is present. Drop the sidebar chrome
   and the course-progress dots so the top bar is just the model chip and nothing
   can collide with it at any width. The real course nav lives in the curriculum
   section below the hero, so nothing is lost. */
.ac-preview .app .side,
.ac-preview .app .nav-toggle,
.ac-preview .app .nav-backdrop,
.ac-preview .app .mod-dots { display: none; }

/* Desktop: collapsing slides the sidebar out and the chat reflows to fill. */
.app .side { transition: margin-left 0.26s cubic-bezier(.4,0,.2,1); }
.app.nav-collapsed .side { margin-left: -264px; }

/* Mobile: the sidebar becomes an off-canvas drawer over the chat (default closed). */
@media (max-width: 720px) {
  .app .side { position: absolute; top: 0; left: 0; bottom: 0; width: 264px; margin-left: 0; z-index: 30; box-shadow: 0 12px 40px rgba(16,18,29,0.18); transform: translateX(0); transition: transform 0.26s cubic-bezier(.4,0,.2,1); }
  .app.nav-collapsed .side { transform: translateX(-101%); margin-left: 0; }
  .app .nav-backdrop { display: block; position: absolute; inset: 0; z-index: 29; background: rgba(20,18,30,0.42); opacity: 1; transition: opacity 0.26s; }
  .app.nav-collapsed .nav-backdrop { opacity: 0; pointer-events: none; }
  /* Not enough room to absolutely-centre the dots without overlapping the model chip. */
  .app .mod-dots { position: static; transform: none; margin-left: auto; }
}