/* ─────────────────────────────────────────────────────────────────
   views-chat-manuscript.css — Manuscript flavor for the live story
   chat surface. Selectors use :is(#view-chat, .site-l1-ms-host, .module-story-chat-host) so the
   same chrome applies in-app and on the marketing landing embeds.
   Visual only; no JS changes.
   ───────────────────────────────────────────────────────────────── */

:root {
  --ms-paper:     rgba(255,250,240,0.92);
  --ms-paper-d:   rgba(28,22,18,0.8);
  --ms-ink:       var(--ds-ink);
  --ms-ink-soft:  rgba(42,31,18,0.6);
  --ms-margin:    rgba(217,119,87,0.55);
  --ms-rule-soft: rgba(60,45,30,0.16);
  --ms-serif:     "Playfair Display", "Cormorant Garamond", serif;
  --ms-mono:      "JetBrains Mono", ui-monospace, monospace;
  --ms-hand:      "Caveat", cursive;
}

/* Manuscript canvas — only the chat-log area gets the page treatment.
   The sidebar and composer keep their app chrome so practical UI affordances
   stay intact. */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-main {
  background: transparent;
}

/* Watercolor wash sits on the OUTER host (behind the paper .ms-canvas), not inside the box. */

/* Story hint strip in header: always landing-style parchment (never charcoal in html.dark). */
:is(#view-chat) .chat-header .story-hint-strip,
:is(#view-chat) .chat-ms-head .story-hint-strip {
  background: rgba(255, 252, 246, 0.97);
  border: 1px solid rgba(201, 184, 154, 0.38);
  color: var(--ms-ink);
}
html.dark :is(#view-chat) .chat-header .story-hint-strip,
html.dark :is(#view-chat) .chat-ms-head .story-hint-strip {
  background: rgba(255, 252, 246, 0.97);
  color: var(--ms-ink);
  border-color: rgba(201, 184, 154, 0.38);
}
:is(#view-chat) .chat-header .story-hint-strip-bar-kicker,
:is(#view-chat) .chat-header .story-hint-strip-eyebrow,
:is(#view-chat) .chat-ms-head .story-hint-strip-bar-kicker,
:is(#view-chat) .chat-ms-head .story-hint-strip-eyebrow {
  color: rgba(42, 31, 18, 0.55);
}
html.dark :is(#view-chat) .chat-header .story-hint-strip-bar-kicker,
html.dark :is(#view-chat) .chat-ms-head .story-hint-strip-bar-kicker,
html.dark :is(#view-chat) .chat-header .story-hint-strip-eyebrow,
html.dark :is(#view-chat) .chat-ms-head .story-hint-strip-eyebrow {
  color: rgba(42, 31, 18, 0.55);
}

:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-header,
:is(#view-chat) .chat-ms-head {
  font-family: var(--ms-serif);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-header .chat-title,
:is(#view-chat) .chat-ms-title {
  font-family: var(--ms-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Main chat: paper + margin live on .ms-canvas (landing-dl-widgets); log is a simple column. */
:is(#view-chat) .chat-ms-script .chat-log {
  position: relative;
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  padding: 0.5rem 0 1rem;
  color: var(--ms-ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log {
  position: relative;
  background: var(--ms-paper);
  background-image:
    radial-gradient(1200px 500px at 50% -8%, rgba(245,232,210,0.5), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(245,220,180,0.3), transparent 60%);
  border: 1px solid var(--ms-rule-soft);
  border-radius: 18px;
  padding: 1.6rem 1.8rem 1.6rem 3.4rem;
  color: var(--ms-ink);
  box-shadow: 0 14px 32px rgba(20,18,14,0.10);
  /* no backdrop-filter: the paper is 0.92-opaque already; a live blur over the
   * whole thread re-runs on every keystroke repaint (typing jank). */
}

/* Red margin stripe on the left — module / marketing hosts only (not #view-chat main log). */
:is(.site-l1-ms-host, .module-story-chat-host) .chat-log::before {
  content: "";
  position: absolute;
  left: 2.4rem; top: 1.4rem; bottom: 1.4rem;
  width: 1px;
  background: var(--ms-margin);
  pointer-events: none;
}

html.dark :is(#view-chat) .chat-ms-script .chat-log {
  background: transparent;
  color: var(--ms-ink);
}
/* Main Path story: keep parchment column — do not use charcoal slab from embedded hosts. */
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .chat-log {
  background: var(--ms-paper-d);
  color: #f5ecdf;
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .chat-log::before {
  background: rgba(231,178,92,0.5);
}

/* Bot/narrator line: feels like a stage direction or italic narration. */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg.bot .italian-text {
  font-family: var(--ms-serif);
  font-size: 1.12rem;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.005em;
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg.bot .italian-text em {
  font-style: italic;
  color: var(--ms-ink-soft);
}

/* Norsk-støtte panel reads like a translator's annotation in the margin. */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg .no-translation {
  font-family: "Playfair Display", Georgia, serif; /* owner 2026-06-13: revealed translation reads as part of the story, not plain UI */
  font-size: 1.02rem;
  color: var(--ms-ink);
  background: rgba(255, 252, 246, 0.55);
  border-left: 2px solid var(--ms-margin);
  padding: 0.55rem 0.72rem;
  margin-top: 0.4rem;
  border-radius: 8px;
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg .no-translation span {
  color: var(--ms-ink);
  font-weight: 400;
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .chat-log .msg .no-translation {
  color: rgba(245, 236, 223, 0.92);
  background: rgba(40, 36, 32, 0.35);
}
html.dark #view-chat .chat-log .msg .no-translation {
  color: rgba(245, 236, 223, 0.92);
  border-left-color: rgba(231, 178, 92, 0.45);
  background: rgba(40, 36, 32, 0.35);
}
html.dark #view-chat .chat-log .msg .no-translation span {
  color: rgba(245, 236, 223, 0.95);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg .no-translation strong {
  font-family: var(--ms-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-margin);
  font-weight: 500;
}

/* User reply: landing manuscript row (.ms-line.you) */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg.user {
  border-left: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
html.dark :is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg.user {
  background: transparent;
}

/* Meta-line treated as an editorial cue. */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg.meta {
  font-family: var(--ms-mono);
  font-size: 0.78rem;
  color: var(--ms-ink-soft);
  text-transform: none;
  letter-spacing: 0.02em;
  border: 1px dashed var(--ms-rule-soft);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  background: rgba(255,250,240,0.4);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .chat-log .msg.meta {
  background: rgba(245, 236, 223, 0.06);
  color: rgba(245, 236, 223, 0.7);
}
html.dark #view-chat .chat-log .msg.meta {
  background: rgba(255, 250, 240, 0.55);
  color: rgba(42, 31, 18, 0.75);
  border-color: rgba(201, 184, 154, 0.45);
}

/* Composer: keep it minimal and parchment-y so it sits under the manuscript. */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-form {
  /* alpha 0.86→0.93 in lieu of the old blur(2px) backdrop-filter, which made
   * every keystroke repaint re-blur the composer band (typing jank). */
  background: rgba(255,250,240,0.93);
  border-top: 1px solid var(--ms-rule-soft);
}
/* Dark composer slab: embedded Lab hosts only — NOT main #view-chat (story stays manuscript). */
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .chat-form {
  background: rgba(28, 22, 18, 0.78);
}
html.dark #view-chat .chat-form,
html.dark #view-chat .landing-story-send.chat-form {
  background: rgba(255, 252, 246, 0.94);
  border-top: 1px solid rgba(201, 184, 154, 0.42);
  color: var(--ms-ink);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-form textarea {
  font-family: var(--ms-serif);
  font-size: 1.02rem;
  background: rgba(255,250,240,0.9);
  border: 1px solid var(--ms-rule-soft);
  color: var(--ms-ink);
}
/* Dark charcoal textarea only on embedded hosts — main #view-chat stays parchment (see below). */
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .chat-form textarea {
  background: rgba(28,22,18,0.6);
  color: #f5ecdf;
}

/* Story-completion panel reads like a final-page coda. */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-complete-panel {
  background: rgba(255,250,240,0.9);
  border: 1px solid var(--ms-rule-soft);
  font-family: var(--ms-serif);
}
html.dark :is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-complete-panel {
  background: rgba(28,22,18,0.78);
  color: #f5ecdf;
}
/* Main chat story view stays manuscript-light even in dark global theme */
html.dark #view-chat .story-complete-panel {
  background: rgba(255, 252, 246, 0.96);
  color: var(--ds-ink);
  border-color: rgba(201, 184, 154, 0.38);
  box-shadow: 0 14px 36px rgba(22, 18, 12, 0.06);
}
html.dark #view-chat .story-complete-panel h3,
html.dark #view-chat .story-complete-panel p {
  color: rgba(42, 31, 18, 0.92);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-complete-kicker {
  font-family: var(--ms-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-margin);
}

/* Listen-only: Italian hidden; parchment cue on the bubble. */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .chat-log .msg.bot.listen-only {
  background: rgba(255,250,240,0.6);
  border-left: 2px solid rgba(74,143,184,0.4);
  padding-left: 0.6rem;
}

/* Story thread: never use dashboard charcoal bubbles — manuscript lines carry the surface. */
#view-chat .chat-log .msg.bot {
  max-width: 100%;
  align-self: stretch;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.35rem 0 0.85rem;
  color: var(--ms-ink);
}
html.dark #view-chat .chat-log .msg.bot {
  background: transparent !important;
  color: var(--ms-ink);
}
#view-chat .chat-log .msg.bot.listen-only {
  background: rgba(255, 252, 246, 0.65) !important;
  border: 1px dashed rgba(201, 184, 154, 0.45) !important;
  border-radius: 14px;
  padding: 0.65rem 0.85rem 0.75rem !important;
}

/* Per-speaker scene lines (dialogue_segments) */
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.35rem 0 0.55rem;
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row {
  border-radius: 12px;
  padding: 0.5rem 0.72rem 0.62rem;
  border: 1px solid var(--ms-rule-soft);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--narration {
  background: rgba(255, 250, 240, 0.35);
  border-style: dashed;
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-0 {
  background: rgba(229, 231, 235, 0.55);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-1 {
  background: rgba(219, 234, 254, 0.55);
  border-color: rgba(30, 58, 138, 0.12);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-2 {
  background: rgba(254, 226, 226, 0.55);
  border-color: rgba(153, 27, 27, 0.1);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-3 {
  background: rgba(254, 243, 199, 0.55);
  border-color: rgba(146, 64, 14, 0.1);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-4 {
  background: rgba(209, 250, 229, 0.55);
  border-color: rgba(6, 95, 70, 0.1);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-5 {
  background: rgba(237, 233, 254, 0.55);
  border-color: rgba(91, 33, 182, 0.1);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-6 {
  background: rgba(252, 231, 243, 0.55);
  border-color: rgba(157, 23, 77, 0.1);
}
/* Embedded hosts: darker tint in global dark theme. Main Path story keeps pastel manuscript. */
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-row--narration {
  background: rgba(245, 236, 223, 0.06);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-1 {
  background: rgba(30, 58, 138, 0.22);
  border-color: rgba(147, 197, 253, 0.15);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-2 {
  background: rgba(127, 29, 29, 0.25);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-3 {
  background: rgba(120, 53, 15, 0.28);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-4 {
  background: rgba(6, 78, 59, 0.28);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-5 {
  background: rgba(76, 29, 149, 0.28);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-row--dialogue.color-6 {
  background: rgba(131, 24, 67, 0.28);
}
html.dark #view-chat .story-segment-row--narration {
  background: rgba(255, 250, 240, 0.35);
}
html.dark #view-chat .story-segment-row--dialogue.color-1 {
  background: rgba(219, 234, 254, 0.55);
  border-color: rgba(30, 58, 138, 0.12);
}
html.dark #view-chat .story-segment-row--dialogue.color-2 {
  background: rgba(254, 226, 226, 0.55);
  border-color: rgba(153, 27, 27, 0.1);
}
html.dark #view-chat .story-segment-row--dialogue.color-3 {
  background: rgba(254, 243, 199, 0.55);
  border-color: rgba(146, 64, 14, 0.1);
}
html.dark #view-chat .story-segment-row--dialogue.color-4 {
  background: rgba(209, 250, 229, 0.55);
  border-color: rgba(6, 95, 70, 0.1);
}
html.dark #view-chat .story-segment-row--dialogue.color-5 {
  background: rgba(237, 233, 254, 0.55);
  border-color: rgba(91, 33, 182, 0.1);
}
html.dark #view-chat .story-segment-row--dialogue.color-6 {
  background: rgba(252, 231, 243, 0.55);
  border-color: rgba(157, 23, 77, 0.1);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-label {
  font-family: var(--ms-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-ink-soft);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-play {
  flex-shrink: 0;
  font-family: var(--ms-mono);
  font-size: 0.72rem;
  padding: 0.18rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--ms-rule-soft);
  background: rgba(255, 250, 240, 0.75);
  cursor: pointer;
  color: var(--ms-ink);
}
html.dark :is(.site-l1-ms-host, .module-story-chat-host) .story-segment-play {
  background: rgba(28, 22, 18, 0.55);
  color: #f5ecdf;
}
html.dark #view-chat .story-segment-play {
  background: rgba(255, 250, 240, 0.75);
  color: var(--ms-ink);
  border-color: rgba(201, 184, 154, 0.45);
}
:is(#view-chat, .site-l1-ms-host, .module-story-chat-host) .story-segment-row .italian-text {
  font-family: var(--ms-serif);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════
   App chat (#view-chat) — full landing manuscript shell (cream page + stamp).
   Overrides global dark theme only inside this view so the story matches
   landing.html / Design Lab, not the charcoal dashboard chrome.
   ═══════════════════════════════════════════════════════════════════════ */
/* Same watercolor asset as landing hero painting — cream veil keeps type readable. */
#view-chat .chat-wrap {
  position: relative;
  overflow: visible;
  isolation: isolate;
  grid-template-columns: 1fr;
  background:
    linear-gradient(
      165deg,
      rgba(247, 241, 230, 0.93) 0%,
      rgba(239, 231, 218, 0.9) 45%,
      rgba(232, 224, 212, 0.92) 100%
    ),
    url("/watercolor/birmingham-museums-trust-nbneQlI2M1A-unsplash.jpg") center top / cover no-repeat;
}
/* Soft edge blend so the photo reads as wash, not a hard panel */
#view-chat .chat-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background: radial-gradient(ellipse 95% 85% at 50% 55%, rgba(255, 252, 246, 0.45), transparent 62%);
}
#view-chat .chat-wrap > * {
  position: relative;
  z-index: 1;
}

/* Single backdrop from .chat-wrap — avoid stacking extra gradient “blobs” here */
#view-chat .chat-main.chat-main--story-dl {
  overflow: visible;
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
}
#view-chat .chat-main.chat-main--story-dl > .chat-story-dl-host {
  position: relative;
  z-index: 1;
}

#view-chat .chat-sidebar {
  /* alpha 0.82→0.94 in lieu of blur(10px) backdrop-filter (repaint cost). */
  background: rgba(255, 252, 246, 0.94);
  border-right: 1px solid rgba(201, 184, 154, 0.42);
  color: var(--ds-ink);
}

#view-chat .sidebar-label {
  color: rgba(26, 23, 20, 0.48);
}

#view-chat .back-btn {
  color: var(--ds-gold-deep);
  font-family: "Inter", system-ui, sans-serif;
}

#view-chat .sidebar-nav-link {
  color: rgba(26, 23, 20, 0.72);
}

#view-chat .sidebar-nav-link:hover {
  color: #b8893b;
}

#view-chat .chat-sidebar-profile-hint {
  color: rgba(26, 23, 20, 0.55);
}

/* Dual-pane host fills the main column */
#view-chat .chat-story-dl-host.site-landing-dl-host {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.65rem 0.85rem 1.1rem;
  box-sizing: border-box;
  /* Scroll the whole manuscript (paper + thread + hints + composer) — canvas must not be height-capped by flex. */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Last lines + completion card sit above the reply deck; keep them scrollable into view. */
  scroll-padding-bottom: min(40vh, 12rem);
}

/* Outer wash comes from .chat-wrap photo — skip extra rim layers that read as more boxes */
#view-chat .chat-story-dl-host.site-landing-dl-host::before {
  display: none;
}

#view-chat .chat-story-dl-host.site-landing-dl-host > .chat-ms-canvas {
  position: relative;
  z-index: 1;
}

#view-chat .chat-ms-canvas.ms-canvas {
  /* Do not stretch to viewport: a definite flex height clips grid content below the paper. */
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-height: min(720px, calc(100dvh - 8rem));
  max-width: min(960px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* One margin rule only: landing ms-canvas ::before — hide duplicate from chat-log */
#view-chat .chat-ms-script .chat-log::before {
  display: none;
}

#view-chat .chat-ms-script .chat-log {
  padding-left: 2rem;
  padding-right: 1.35rem;
}

/* Toolbar buttons — warm manuscript, not dashboard gold-on-black */
#view-chat .listen-only-toggle,
#view-chat .listen-replay-scene {
  border: 1px solid rgba(201, 184, 154, 0.55);
  background: rgba(255, 252, 246, 0.95);
  color: var(--ds-ink);
}

#view-chat .listen-only-toggle:hover,
#view-chat .listen-replay-scene:hover {
  border-color: rgba(184, 137, 59, 0.55);
  background: rgba(255, 250, 240, 1);
}

#view-chat .listen-only-toggle.active {
  border-color: rgba(217, 119, 87, 0.65);
  background: rgba(217, 119, 87, 0.12);
  color: #6b2f1f;
}

/* Dark theme: main story log stays flat on ms-canvas paper */
html.dark #view-chat .chat-ms-script .chat-log {
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  color: var(--ms-ink);
}

html.dark #view-chat .chat-log .msg.user {
  background: transparent;
  color: var(--ms-ink);
}

html.dark #view-chat .chat-log .msg.meta {
  background: rgba(247, 241, 230, 0.92);
  color: rgba(42, 31, 18, 0.72);
}

html.dark #view-chat #user-message,
html.dark #view-chat .landing-story-send textarea,
html.dark #view-chat .chat-form textarea,
html.dark #view-chat .site-landing-dl-host .ms-input .field textarea,
html.dark #view-chat .site-landing-dl-host textarea {
  background: rgba(255, 252, 246, 0.98) !important;
  color: var(--ds-ink) !important;
  border-color: rgba(201, 184, 154, 0.45) !important;
  -webkit-text-fill-color: var(--ds-ink) !important;
  caret-color: var(--ds-ink);
}
html.dark #view-chat .site-landing-dl-host .ms-input .field textarea:focus,
html.dark #view-chat #user-message:focus {
  background: rgba(255, 250, 240, 1) !important;
  border-color: rgba(217, 119, 87, 0.45) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.2);
}

/* Native controls follow light manuscript (Safari / iOS dark theme). */
html.dark #view-chat {
  color-scheme: light;
}

html.dark #view-chat .landing-ms-panel {
  border-top-color: rgba(201, 184, 154, 0.38);
}

html.dark #view-chat .ms-input .role {
  color: #c65d3a;
}

/* Story path: remove sidebar — manuscript uses full width + top Path button */
#view-chat .chat-sidebar {
  display: none !important;
}
#view-chat .chat-ms-head-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem 0.9rem;
}
#view-chat .chat-ms-back-btn {
  margin: 0.2rem 0 0;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 184, 154, 0.55);
  background: rgba(255, 252, 246, 0.96);
  color: #6b4318;
  font-family: var(--dl-mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
#view-chat .chat-ms-back-btn:hover {
  border-color: rgba(184, 137, 59, 0.55);
  background: rgba(255, 250, 240, 1);
}
#view-chat .chat-ms-title {
  margin: 0;
  min-width: 0;
}

#view-chat .chat-header-hint-host--retired {
  display: none !important;
}

/* ── Reply fold: one sheet with the thread — no second card (landing manuscript continuity) ── */
#view-chat .chat-ms-reply-deck {
  max-width: none;
  width: 100%;
  margin: 0;
  margin-top: 0.85rem;
  padding: 1rem 0 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  border-top: 1px dashed rgba(201, 184, 154, 0.38);
}
#view-chat .chat-ms-reply-deck .chat-composer-hint-host:empty,
#view-chat .chat-ms-reply-deck .chat-composer-proposals-host:empty {
  display: none;
}
#view-chat .chat-ms-reply-deck .chat-composer-hint-host,
#view-chat .chat-ms-reply-deck .chat-composer-proposals-host {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Grammar micro-intro ribbon — floats to the right side as an orange note card */
#view-chat .story-grammar-micro-ribbon-host:not([hidden]) {
  float: right;
  clear: right;
  width: min(240px, 40vw);
  margin: 0 0 0.6rem 0.85rem;
  padding-bottom: 0;
  border-bottom: none;
}
#view-chat .story-grammar-micro-ribbon {
  border-radius: 14px;
  padding: 0.6rem 0.75rem 0.55rem;
  background: rgba(217, 119, 87, 0.08);
  border: 1.5px solid rgba(217, 119, 87, 0.38);
  box-shadow: 0 2px 10px rgba(180, 80, 20, 0.08);
}
html.dark #view-chat .story-grammar-micro-ribbon {
  background: rgba(217, 119, 87, 0.1);
  border-color: rgba(217, 119, 87, 0.32);
}
#view-chat .story-grammar-micro-ribbon-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(173, 99, 48, 0.82);
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  margin-bottom: 0.5rem;
}
@media (max-width: 520px) {
  #view-chat .story-grammar-micro-ribbon-host:not([hidden]) {
    float: none;
    width: 100%;
    margin: 0.35rem 0 0.6rem;
  }
}
#view-chat .story-grammar-micro-ribbon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#view-chat .story-grammar-micro-card {
  flex: 1 1 10rem;
  min-width: min(100%, 9rem);
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  border: 1px dashed rgba(217, 119, 87, 0.35);
  background: rgba(255, 248, 242, 0.65);
}
#view-chat .story-grammar-micro-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
}
#view-chat .story-grammar-micro-card-review {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
  background: rgba(173, 99, 48, 0.12);
  color: rgba(120, 72, 38, 0.92);
}
#view-chat .story-grammar-micro-card-title {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--dl-serif, "Playfair Display", Georgia, serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ms-ink, var(--ds-ink));
  line-height: 1.25;
}
#view-chat .story-grammar-micro-contrast-pair {
  margin: 0 0 0.45rem;
}
#view-chat .story-grammar-micro-line {
  margin: 0.15rem 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(42, 31, 18, 0.88);
}
#view-chat .story-grammar-micro-lbl {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(42, 31, 18, 0.48);
  margin-right: 0.25rem;
}
#view-chat .story-grammar-micro-expand-panel {
  margin-top: 0.45rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px dashed rgba(201, 184, 154, 0.35);
  background: rgba(255, 252, 246, 0.35);
  font-size: 0.76rem;
  line-height: 1.45;
  max-height: 14rem;
  overflow: auto;
}
#view-chat .story-grammar-micro-expand-panel .story-grammar-expand-ex {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
}
#view-chat .story-grammar-micro-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
#view-chat .story-grammar-micro-card-body {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(42, 31, 18, 0.82);
}
#view-chat .story-grammar-micro-card-link {
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(173, 99, 48, 0.95);
  border-bottom: 1px dotted rgba(173, 99, 48, 0.45);
}
#view-chat .story-grammar-micro-card-link:hover {
  color: rgba(217, 119, 87, 0.95);
  border-bottom-color: rgba(217, 119, 87, 0.55);
}
html.dark #view-chat .story-grammar-micro-ribbon {
  background: rgba(30, 24, 20, 0.55);
  border-color: rgba(201, 184, 154, 0.22);
}
html.dark #view-chat .story-grammar-micro-card {
  background: rgba(22, 18, 15, 0.55);
  border-color: rgba(201, 184, 154, 0.25);
}

/* Module overlay story: same grammar ribbon treatment as main chat manuscript */
.module-story-ms-canvas .story-grammar-micro-ribbon-host:not([hidden]) {
  margin: 0.5rem 0 0.65rem;
  padding: 0 0.15rem 0.5rem;
  border-bottom: 1px dashed rgba(201, 184, 154, 0.35);
}
.module-story-ms-canvas .story-grammar-micro-ribbon {
  border-radius: 12px;
  padding: 0.55rem 0.65rem 0.5rem;
  background: rgba(255, 252, 246, 0.42);
  border: 1px solid rgba(201, 184, 154, 0.32);
}
.module-story-ms-canvas .story-grammar-micro-ribbon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.module-story-ms-canvas .story-grammar-micro-card {
  flex: 1 1 12rem;
  min-width: min(100%, 10rem);
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px dashed rgba(201, 184, 154, 0.45);
  background: rgba(255, 250, 240, 0.55);
}
.module-story-ms-canvas .story-grammar-micro-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
}
.module-story-ms-canvas .story-grammar-micro-contrast-pair {
  margin: 0 0 0.45rem;
}
.module-story-ms-canvas .story-grammar-micro-line {
  margin: 0.15rem 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(42, 31, 18, 0.88);
}
.module-story-ms-canvas .story-grammar-micro-expand-panel {
  margin-top: 0.45rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px dashed rgba(201, 184, 154, 0.35);
  background: rgba(255, 252, 246, 0.35);
  font-size: 0.76rem;
  line-height: 1.45;
  max-height: 14rem;
  overflow: auto;
}
.module-story-ms-canvas .story-grammar-micro-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

#view-chat .site-landing-dl-host .chat-ms-reply-deck .landing-story-hint {
  max-width: none;
  margin: 0 0 0.75rem;
  padding: 0 0 0.85rem;
  border: none;
  border-radius: 0;
  border-bottom: 1px dashed rgba(201, 184, 154, 0.45);
  border-left: none;
  background: transparent !important;
  box-shadow: none;
}
#view-chat .site-landing-dl-host .chat-ms-reply-deck .landing-story-hint-kicker {
  border-bottom: none;
  padding-bottom: 0.35rem;
  margin-bottom: 0.4rem;
}
#view-chat .chat-ms-reply-deck .proposal-chips-row {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
/* Ghost tiles — one manuscript surface, not grey app cards */
#view-chat .chat-ms-reply-deck .proposal-chips-heading {
  color: rgba(26, 23, 20, 0.5);
  font-family: inherit; /* match the app UI font, not a decorative mono (owner: consistency 2026-06-13) */
}
#view-chat .chat-ms-reply-deck .proposal-chip {
  background: rgba(255, 252, 246, 0.55);
  border: 1px dashed rgba(201, 184, 154, 0.48);
  border-radius: 12px;
  box-shadow: none;
}
#view-chat .chat-ms-reply-deck .proposal-chip:hover {
  background: rgba(255, 250, 240, 0.92);
  border-color: rgba(184, 137, 59, 0.42);
}
#view-chat .chat-ms-reply-deck .proposal-chip.selected {
  border-style: solid;
  border-color: rgba(217, 119, 87, 0.55);
}
#view-chat .chat-ms-reply-deck .proposal-chip-label {
  color: rgba(26, 23, 20, 0.55);
}
#view-chat .chat-ms-reply-deck .proposal-chip-text {
  font-family: inherit; /* a UI control, not story prose — match the app's Inter (owner: consistency 2026-06-13) */
  font-weight: 500;
}
/* Hint drawer sections: thin rule, not stacked yellow cards */
#view-chat .chat-composer-hint-host .hc-section {
  background: rgba(255, 252, 246, 0.42);
  border: 1px solid rgba(201, 184, 154, 0.28);
  border-radius: 10px;
  box-shadow: none;
}

#view-chat .chat-ms-reply-deck .landing-ms-panel.chat-ms-footer-panel {
  margin-top: 0;
  padding-top: 0.65rem;
  border-top: none;
  background: transparent;
}
#view-chat .chat-ms-reply-deck .landing-ms-panel.chat-ms-footer-panel::before {
  display: none;
}
#view-chat .chat-ms-reply-deck .chat-form,
#view-chat .chat-ms-reply-deck .landing-story-send.chat-form {
  background: transparent !important;
  border-top: none !important;
  padding-top: 0.35rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.dark #view-chat .chat-ms-reply-deck .chat-form,
html.dark #view-chat .chat-ms-reply-deck .landing-story-send.chat-form {
  background: transparent !important;
  border-top: none !important;
}

#view-chat .chat-composer-hint-host {
  max-width: min(960px, 100%);
  margin: 0 auto;
  padding: 0 0.85rem 0.5rem;
  box-sizing: border-box;
}
#view-chat .chat-ms-reply-deck .chat-composer-hint-host {
  padding: 0;
}
#view-chat .chat-composer-hint-host .landing-story-hint {
  margin-bottom: 0.45rem;
}
html.dark #view-chat .site-landing-dl-host .chat-ms-reply-deck .landing-story-hint-kicker,
html.dark #view-chat .site-landing-dl-host .chat-ms-reply-deck .landing-story-hint-text {
  color: var(--ds-ink);
}

/* Composer: landing lab parity — wide field, generous vertical rhythm. */
#view-chat .landing-ms-panel.chat-ms-footer-panel .ms-input.chat-ms-input-row {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(72px, 140px) minmax(0, 1fr);
  gap: 1rem 1.35rem;
  margin-top: 1rem;
  align-items: start;
}
#view-chat .chat-ms-reply-deck .landing-ms-panel.chat-ms-footer-panel .ms-input.chat-ms-input-row {
  margin-top: 0;
}
#view-chat .landing-ms-panel.chat-ms-footer-panel .ms-input .field {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
#view-chat .landing-ms-panel.chat-ms-footer-panel .landing-story-send.chat-form {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
  padding: 1rem 1.15rem;
  gap: 0.65rem;
  align-items: stretch;
}
#view-chat .landing-ms-panel.chat-ms-footer-panel .ms-input .field textarea {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 6.25rem;
  box-sizing: border-box;
}
#view-chat .chat-composer-hint-host .story-hint-strip {
  margin-top: 0.35rem;
}

/* Reply starters live above the composer (not inside the scroll thread). */
#view-chat .chat-composer-proposals-host {
  max-width: min(960px, 100%);
  margin: 0 auto;
  padding: 0 0.85rem 0.35rem;
  box-sizing: border-box;
}
#view-chat .chat-ms-reply-deck .chat-composer-proposals-host {
  max-width: none;
  padding: 0;
}

html.dark #view-chat .chat-composer-hint-host .hc-wrap .hc-button {
  background: rgba(255, 252, 246, 0.96);
  border-color: rgba(201, 184, 154, 0.45);
  color: var(--ds-ink);
}
html.dark #view-chat .chat-composer-hint-host .hc-wrap .hc-button-icon {
  background: rgba(217, 119, 87, 0.55);
}
html.dark #view-chat .chat-composer-hint-host .hc-drawer .hc-section {
  background: rgba(255, 250, 240, 0.98);
  border-color: rgba(201, 184, 154, 0.38);
  color: var(--ds-ink);
}
html.dark #view-chat .chat-composer-hint-host .hc-chip {
  background: rgba(255, 252, 246, 0.98);
  color: var(--ds-ink);
  border-color: rgba(201, 184, 154, 0.42);
}

html.dark #view-chat .proposal-chips-heading {
  color: rgba(42, 31, 18, 0.55);
}
html.dark #view-chat .proposal-chip {
  background: rgba(255, 252, 246, 0.96);
  color: var(--ds-ink);
  border-color: rgba(201, 184, 154, 0.45);
}
html.dark #view-chat .proposal-chip:hover {
  background: rgba(255, 250, 240, 1);
  border-color: rgba(184, 137, 59, 0.55);
}
html.dark #view-chat .proposal-chip.selected {
  background: rgba(217, 119, 87, 0.92);
  color: #fff;
  border-color: rgba(184, 90, 60, 0.95);
}
html.dark #view-chat .proposal-chip-label {
  color: rgba(42, 31, 18, 0.55);
}
html.dark #view-chat .proposal-chip.selected .proposal-chip-label {
  color: rgba(255, 255, 255, 0.88);
}
html.dark #view-chat .proposal-chip-text {
  color: var(--ds-ink);
}
html.dark #view-chat .proposal-chip.selected .proposal-chip-text {
  color: #fff;
}

/* Empty-state hint: text on the page, not another inset card */
#view-chat .chat-thread-empty {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.75rem 0 1.25rem;
  margin: 0 0 0.35rem;
}
html.dark #view-chat .chat-thread-empty {
  background: transparent;
  border-color: transparent;
  color: var(--ds-ink);
}
html.dark #view-chat .chat-thread-empty__title,
html.dark #view-chat .chat-thread-empty__body {
  color: inherit;
}

/* Per-line play control inside landing .ms-line .text */
#view-chat .site-landing-dl-host .ms-line .text {
  position: relative;
}
#view-chat .site-landing-dl-host .ms-line-audio-btn {
  position: absolute;
  top: 0.05rem;
  right: 0;
  z-index: 2;
  font-family: var(--dl-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  padding: 0.12rem 0.42rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 184, 154, 0.45);
  background: rgba(255, 250, 240, 0.94);
  cursor: pointer;
  color: var(--ds-ink);
}
#view-chat .site-landing-dl-host .ms-line-audio-btn:hover {
  border-color: rgba(184, 137, 59, 0.55);
}

/* Before-you-begin + composer: light paper with soft watercolor edge (no charcoal slabs) */
#view-chat .story-prep-panel {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(201, 184, 154, 0.38);
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(255, 252, 246, 0.97) 0%, rgba(249, 241, 228, 0.94) 100%);
  box-shadow: 0 12px 36px rgba(22, 18, 12, 0.06);
}
#view-chat .story-prep-panel::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 85% 55% at 8% 92%, rgba(198, 186, 174, 0.28), transparent 58%),
    radial-gradient(ellipse 70% 50% at 92% 12%, rgba(178, 190, 184, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(218, 208, 198, 0.3), transparent 65%);
  filter: blur(18px);
  opacity: 0.92;
  pointer-events: none;
}
html.dark #view-chat .story-prep-panel {
  background:
    linear-gradient(165deg, rgba(255, 252, 246, 0.97) 0%, rgba(249, 241, 228, 0.94) 100%);
  border-color: rgba(201, 184, 154, 0.38);
}
html.dark #view-chat .story-prep-head h3,
html.dark #view-chat .story-prep-head p {
  color: var(--ds-ink);
}
html.dark #view-chat .story-prep-kicker {
  color: var(--ds-gold-deep);
}
html.dark #view-chat .story-prep-card {
  background: rgba(255, 252, 246, 0.92);
  border-color: rgba(201, 184, 154, 0.35);
  color: var(--ds-ink);
}
html.dark #view-chat .story-prep-card-front {
  color: rgba(26, 23, 20, 0.58);
}
html.dark #view-chat .story-prep-card-back {
  color: var(--ds-ink);
}
html.dark #view-chat .story-prep-card-note {
  color: rgba(26, 23, 20, 0.62);
}

#view-chat .landing-ms-panel.chat-ms-footer-panel {
  position: relative;
  isolation: isolate;
  margin-top: 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(201, 184, 154, 0.32);
  background: transparent;
}
#view-chat .landing-ms-panel.chat-ms-footer-panel::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -18px;
  height: 120%;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 70% at 15% 80%, rgba(188, 176, 166, 0.22), transparent 58%),
    radial-gradient(ellipse 75% 55% at 88% 15%, rgba(172, 184, 178, 0.16), transparent 55%);
  filter: blur(22px);
  opacity: 0.85;
  pointer-events: none;
}
html.dark #view-chat .landing-ms-panel.chat-ms-footer-panel {
  border-top-color: rgba(201, 184, 154, 0.32);
}

@media (max-width: 640px) {
  #view-chat .chat-ms-head-row {
    grid-template-columns: 1fr;
  }
  #view-chat .chat-header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ── In-module story (path overlay): always cream manuscript, even when html.dark ── */
#module-overlay .module-story-chat-host.chat-log {
  background: rgba(255, 252, 246, 0.96);
  background-image:
    radial-gradient(1200px 500px at 50% -8%, rgba(245, 232, 210, 0.55), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(245, 220, 180, 0.35), transparent 60%);
  color: var(--ds-ink);
}

html.dark #module-overlay .module-story-chat-host.chat-log {
  background: rgba(255, 252, 246, 0.96);
  background-image:
    radial-gradient(1200px 500px at 50% -8%, rgba(245, 232, 210, 0.55), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(245, 220, 180, 0.35), transparent 60%);
  color: var(--ds-ink);
}

html.dark #module-overlay .module-story-chat-host.chat-log::before {
  background: rgba(185, 172, 158, 0.42);
}

html.dark #module-overlay .chat-form {
  background: rgba(255, 250, 240, 0.92);
  color: var(--ds-ink);
}

html.dark #module-overlay .chat-log .msg.user {
  background: rgba(74, 143, 184, 0.12) !important;
  color: var(--ds-ink) !important;
}

html.dark #module-overlay .module-overlay-story-dl .ms-canvas.module-story-ms-canvas {
  background: rgba(255, 250, 240, 0.96) !important;
  color: var(--ds-ink) !important;
}

/* Force ALL story elements inside module overlay to use light cream colors */
#module-overlay .chat-log,
#module-overlay .chat-form,
#module-overlay .story-segment-stack,
#module-overlay .story-segment-row,
#module-overlay .ms-canvas,
#module-overlay .module-story-ms-canvas {
  background: rgba(255, 252, 246, 0.96) !important;
  color: var(--ds-ink) !important;
}

html.dark #module-overlay .chat-log,
html.dark #module-overlay .chat-form,
html.dark #module-overlay .story-segment-stack,
html.dark #module-overlay .story-segment-row,
html.dark #module-overlay .ms-canvas,
html.dark #module-overlay .module-story-ms-canvas {
  background: rgba(255, 252, 246, 0.96) !important;
  color: var(--ds-ink) !important;
}

#module-overlay .chat-log .msg,
#module-overlay .story-segment-row {
  color: var(--ds-ink) !important;
}

html.dark #module-overlay .chat-log .msg,
html.dark #module-overlay .story-segment-row {
  color: var(--ds-ink) !important;
}

/* ============================================================================
   NUCLEAR FIX: Force ALL story/chat elements in module overlay to LIGHT theme
   This overrides ALL dark mode rules for module overlay
   ============================================================================ */

#module-overlay,
#module-overlay *,
html.dark #module-overlay,
html.dark #module-overlay * {
  --ms-paper: rgba(255, 250, 240, 0.96) !important;
  --ms-paper-d: rgba(255, 250, 240, 0.96) !important;
  --ms-ink: var(--ds-ink) !important;
  --ms-ink-soft: rgba(42, 31, 18, 0.6) !important;
}

#module-overlay .chat-log,
#module-overlay .chat-form,
#module-overlay .chat-main,
#module-overlay .story-segment-stack,
#module-overlay .story-segment-row,
#module-overlay .story-prep-panel,
#module-overlay .story-prep-card,
#module-overlay .story-complete-panel,
#module-overlay .ms-canvas,
#module-overlay .module-story-chat-host,
#module-overlay .module-story-ms-canvas,
#module-overlay .msg,
#module-overlay .msg.bot,
#module-overlay .msg.user,
#module-overlay .msg.meta,
html.dark #module-overlay .chat-log,
html.dark #module-overlay .chat-form,
html.dark #module-overlay .chat-main,
html.dark #module-overlay .story-segment-stack,
html.dark #module-overlay .story-segment-row,
html.dark #module-overlay .story-prep-panel,
html.dark #module-overlay .story-prep-card,
html.dark #module-overlay .story-complete-panel,
html.dark #module-overlay .ms-canvas,
html.dark #module-overlay .module-story-chat-host,
html.dark #module-overlay .module-story-ms-canvas,
html.dark #module-overlay .msg,
html.dark #module-overlay .msg.bot,
html.dark #module-overlay .msg.user,
html.dark #module-overlay .msg.meta {
  background: rgba(255, 250, 240, 0.96) !important;
  color: var(--ds-ink) !important;
  border-color: rgba(201, 184, 154, 0.35) !important;
}

#module-overlay .msg.user,
html.dark #module-overlay .msg.user {
  background: rgba(74, 143, 184, 0.12) !important;
}

#module-overlay .story-segment-row--narration,
html.dark #module-overlay .story-segment-row--narration {
  background: rgba(245, 240, 230, 0.8) !important;
  color: var(--ds-ink) !important;
}

#module-overlay textarea,
#module-overlay input,
html.dark #module-overlay textarea,
html.dark #module-overlay input {
  background: #fffdfb !important;
  color: var(--ds-ink) !important;
  border-color: rgba(201, 184, 154, 0.4) !important;
}

#module-overlay .chat-log .msg .no-translation,
html.dark #module-overlay .chat-log .msg .no-translation {
  color: var(--ds-ink) !important;
  background: rgba(255, 252, 246, 0.88) !important;
}
#module-overlay .chat-log .msg .no-translation span,
html.dark #module-overlay .chat-log .msg .no-translation span {
  color: var(--ds-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main Path (#view-chat): beat hints-and-tips.css html.dark story-hint-strip /
   drawer charcoal — composer + deck already parchment; strips must match landing.
   Loaded after hints-and-tips → same specificity wins by source order; use #view-chat id.
   ═══════════════════════════════════════════════════════════════════════════ */
html.dark #view-chat .story-hint-strip,
html.dark #view-chat .story-hint-strip--bar {
  background: rgba(255, 252, 246, 0.97) !important;
  border-color: rgba(201, 184, 154, 0.42) !important;
  color: var(--ds-ink) !important;
}
html.dark #view-chat .story-hint-strip-bar-kicker,
html.dark #view-chat .story-hint-strip-eyebrow {
  color: rgba(42, 31, 18, 0.55) !important;
}
html.dark #view-chat .story-hint-strip-bar-body,
html.dark #view-chat .story-hint-strip-row--muted .story-hint-strip-body,
html.dark #view-chat .story-hint-strip-bar--muted .story-hint-strip-bar-body {
  color: rgba(42, 31, 18, 0.78) !important;
}
html.dark #view-chat .story-hint-strip-drawer {
  background: rgba(255, 250, 240, 0.94) !important;
  border-color: rgba(201, 184, 154, 0.4) !important;
  color: var(--ds-ink) !important;
}
html.dark #view-chat .story-hint-strip-nb-btn {
  background: rgba(255, 252, 246, 0.96) !important;
  color: var(--ds-ink) !important;
  border-color: rgba(201, 184, 154, 0.45) !important;
}
html.dark #view-chat .story-hint-strip-chip {
  background: rgba(255, 252, 246, 0.9) !important;
  border-color: rgba(201, 184, 154, 0.4) !important;
  color: var(--ds-ink) !important;
}
html.dark #view-chat .chat-composer-hint-host .hc-wrap .hc-button,
html.dark #view-chat .chat-composer-hint-host .hc-drawer .hc-section,
html.dark #view-chat .chat-composer-hint-host .hc-chip {
  background: rgba(255, 252, 246, 0.98) !important;
  color: var(--ds-ink) !important;
  border-color: rgba(201, 184, 154, 0.4) !important;
}
html.dark #view-chat .chat-composer-hint-host .hc-button-icon {
  background: rgba(217, 119, 87, 0.45) !important;
}

/* ── Grammar right panel (G4 drawer + G5 steps) ───────────────── */
.ms-aside-rule {
  border: none;
  border-top: 1px solid var(--wcp-rule, rgba(201, 184, 154, 0.45));
  margin: 0.75rem 0 0.6rem;
}
.ms-grammar-drawer-empty {
  font-size: 0.72rem;
  color: var(--wcp-ink-faint, rgba(42, 31, 18, 0.38));
  line-height: 1.4;
  padding: 0.1rem 0;
}
.ms-grammar-drawer {
  padding: 0.25rem 0 0.5rem;
}
.ms-grammar-drawer-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wcp-ink, var(--ds-ink));
  margin-bottom: 0.55rem;
  line-height: 1.3;
}
.ms-grammar-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.ms-grammar-step {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.ms-grammar-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wcp-rust, #c2553f);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ms-grammar-step-body {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--wcp-ink-mid, rgba(42, 31, 18, 0.72));
}
.ms-grammar-step-body strong {
  color: var(--wcp-ink, var(--ds-ink));
  display: block;
  margin-bottom: 0.15rem;
}
.ms-grammar-ab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.ms-grammar-ab-cell {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--wcp-rule, rgba(201, 184, 154, 0.45));
  border-radius: 4px;
  font-size: 0.73rem;
  line-height: 1.4;
}
.ms-grammar-ab-cell.is-ok {
  border-color: #3d8f6c;
  background: rgba(61, 143, 108, 0.06);
}
.ms-grammar-ab-cell.is-wrong {
  border-color: rgba(194, 85, 63, 0.4);
  color: var(--wcp-ink-faint, rgba(42, 31, 18, 0.5));
  text-decoration: line-through;
}
.ms-grammar-step-example {
  margin-top: 0.3rem;
  font-style: italic;
  font-size: 0.73rem;
  color: var(--wcp-ink-mid, rgba(42, 31, 18, 0.72));
}
html.dark .ms-grammar-drawer-title { color: rgba(255,250,242,0.9); }
html.dark .ms-grammar-step-body { color: rgba(255,250,242,0.7); }
html.dark .ms-grammar-step-body strong { color: rgba(255,250,242,0.9); }
html.dark .ms-grammar-ab-cell { border-color: rgba(255,255,255,0.15); }
html.dark .ms-grammar-ab-cell.is-ok { background: rgba(61,143,108,0.12); }
html.dark .ms-grammar-drawer-empty { color: rgba(255,250,242,0.3); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  Story-mode polish (2026-05-22) — a calmer, more literary manuscript for the
 *  in-app La Passeggiata story. Scoped to #module-overlay so it never touches
 *  the landing demo (#landing-try). Additive; no layout rewrites.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* D6 (2026-05-27): theatre-transcript register. Two-column grid lines
 * (speaker | line) on wide viewports so the script reads like a play.
 * Narrator lines stay serif italic; character lines serif upright; stage
 * directions in gold italic in parentheses. */
#module-overlay .ms-canvas .ms-line {
  margin: 0.95rem 0;
  line-height: 1.62;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
}
@media (min-width: 720px) {
  #module-overlay .ms-canvas .ms-line {
    grid-template-columns: 7.5rem 1fr;
    gap: 1.1rem;
    align-items: baseline;
  }
  #module-overlay .ms-canvas .ms-line .role {
    text-align: right;
    padding-top: 0.18rem;
  }
}
/* Scene directions read like script stage directions: centered, hushed,
 * flanked by a faint rule so they feel like a beat between dialogue. */
#module-overlay .ms-canvas .ms-stage-dir {
  text-align: center;
  font-style: italic;
  opacity: 0.72;
  max-width: 48ch;
  margin: 1.3rem auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-content: center;
}
#module-overlay .ms-canvas .ms-stage-dir::before,
#module-overlay .ms-canvas .ms-stage-dir::after {
  content: "";
  height: 1px;
  flex: 0 1 2.4rem;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.35;
}
/* Role labels: quiet mono small-caps tabs. */
#module-overlay .ms-canvas .ms-line .role {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}
/* Character dialogue gets the serif voice; narration stays a touch lighter. */
#module-overlay .ms-canvas .ms-line.cam .text {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.08rem;
  font-style: normal;
}
#module-overlay .ms-canvas .ms-line.narr .text {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  opacity: 0.86;
  color: rgba(60, 45, 30, 0.78);
}
html.dark #module-overlay .ms-canvas .ms-line.narr .text { color: rgba(245, 236, 223, 0.72); }
/* Stage directions go gold-italic, parenthesized — old hands' theatre note. */
#module-overlay .ms-canvas .ms-stage-dir {
  color: var(--gold-deep, var(--ds-gold-deep));
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
}
html.dark #module-overlay .ms-canvas .ms-stage-dir { color: var(--gold, #c9a84c); }

/* ---------- Single Hint control above the composer (replaces scattered in-thread hints) ---------- */
.module-story-hint-control {
  margin: 0 0 0.5rem;
}
.module-story-hint-toggle {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  color: #6a4a1e;
  background: color-mix(in srgb, var(--ds-gold) 12%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--ds-gold) 32%, transparent);
  transition: background 0.15s ease;
}
.module-story-hint-toggle::before {
  content: "💡 ";
}
.module-story-hint-toggle:hover {
  background: color-mix(in srgb, var(--ds-gold) 20%, #fffdf8);
}
.module-story-hint-toggle.is-open {
  background: color-mix(in srgb, var(--ds-gold) 26%, #fffdf8);
}
.module-story-hint-panel {
  margin-top: 0.5rem;
}
.module-story-hint-panel[hidden] { display: none; }

html.dark .module-story-hint-toggle {
  color: #f0e6d2;
  background: rgba(184, 146, 42, 0.18);
  border-color: rgba(255, 250, 240, 0.16);
}
html.dark .module-story-hint-toggle:hover {
  background: rgba(184, 146, 42, 0.28);
}

/* ---------- Main-view story hints: one "Hint" button above the composer ---------- */
/* Collapse the hint cascade by default — it was a chaotic stack of boxes over the input.
   The button reveals it on demand; grammar lives in the aside drawer (below the stamp). */
#view-chat .chat-ms-reply-deck .story-hint-toggle {
  align-self: flex-start;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.9rem;
  margin: 0 0 0.35rem;
  border-radius: 999px;
  cursor: pointer;
  color: #6a4a1e;
  background: color-mix(in srgb, var(--ds-gold) 12%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--ds-gold) 32%, transparent);
  transition: background 0.15s ease;
}
#view-chat .chat-ms-reply-deck .story-hint-toggle:hover { background: color-mix(in srgb, var(--ds-gold) 20%, #fffdf8); }
#view-chat .chat-ms-reply-deck .story-hint-toggle.is-open { background: color-mix(in srgb, var(--ds-gold) 26%, #fffdf8); }
#view-chat .chat-ms-reply-deck:not(.is-hints-open) #chat-composer-hint-panel { display: none; }
html.dark #view-chat .chat-ms-reply-deck .story-hint-toggle {
  color: #f0e6d2;
  background: rgba(184, 146, 42, 0.18);
  border-color: rgba(255, 250, 240, 0.16);
}

/* Hint popup: nicer reveal (spring fade-up) when the button is pressed; sit closer to input. */
#view-chat .chat-ms-reply-deck .story-hint-toggle { margin-top: 0.2rem; }
#view-chat .chat-ms-reply-deck.is-hints-open #chat-composer-hint-panel {
  animation: storyHintPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  margin-top: 0.4rem;
}
@keyframes storyHintPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* owner 2026-06-13: simpler story composer. No "Answer starters" and no empty hint panel
   stacked between the story and the input (that stack was the whole-page gap). JS may still
   populate these hosts, so force-hide. The grammar ribbon stays for grammar help. */
#view-chat #chat-composer-proposals-host,
#view-chat #chat-composer-hint-panel { display: none !important; }

/* "Slik sier du det" — Italian-to-type reveal (owner 2026-06-13). Gold = La Passeggiata. */
#view-chat .story-translate-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; color: #8a640f; background: rgba(184,137,59,0.10); border: 1px solid rgba(184,137,59,0.34); border-radius: 7px; padding: 0.34rem 0.8rem; margin: 0.1rem 0 0.15rem; cursor: pointer; transition: background .15s, border-color .15s, transform .1s, color .15s; }
#view-chat .story-translate-btn::before { content: "\2248"; font-weight: 700; opacity: 0.75; }
#view-chat .story-translate-btn:hover { background: rgba(184,137,59,0.18); border-color: #b8893b; transform: translateY(-1px); }
#view-chat .story-translate-btn.is-open { background: #b8893b; color: #fff; border-color: #b8893b; }
#view-chat .story-translate-panel { margin: 0.1rem 0 0.45rem; padding: 0.7rem 0.9rem; background: rgba(255,252,246,0.72); border: 1px solid rgba(201,184,154,0.5); border-left: 3px solid #b8893b; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.98rem; line-height: 1.65; color: #1a1714; }
#view-chat .story-translate-panel .stm-line { margin: 0.15rem 0; }
#view-chat .story-translate-panel .stm-word { cursor: pointer; border-bottom: 1px dashed rgba(184,137,59,0.55); }
#view-chat .story-translate-panel .stm-word:hover { background: rgba(184,137,59,0.14); color: #8a640f; }

/* Distinct alternatives + reveal glow in the Italian-model panel (owner 2026-06-13). */
#view-chat .story-translate-panel .stm-alt { padding: 0.32rem 0 0.32rem 0.7rem; border-left: 2px solid rgba(184,137,59,0.3); margin: 0.15rem 0; }
#view-chat .story-translate-panel .stm-alt + .stm-alt { border-top: 1px dashed rgba(201,184,154,0.4); padding-top: 0.5rem; }
#view-chat .story-translate-panel .stm-alt .rv-word { cursor: pointer; }
/* More elegant per-line translation inside the story (the "Norwegian support"). */
#view-chat .chat-log .msg .no-translation { background: rgba(255,252,246,0.5); border: none; border-left: 2px solid rgba(184,137,59,0.32); border-radius: 0 8px 8px 0; padding: 0.5rem 0.75rem; }
#view-chat .chat-log .msg .no-translation strong { color: rgba(138,100,15,0.85); font-size: 0.64rem; }

/* ── Composer "Hjelp/Help" (#chat-show-italian button + #chat-italian-model panel):
   a concrete suggested line in the learner's OWN language; each word glows as tappable and
   reveals its Italian (showL1RevealPopover -> /api/reveal-l1). Gold manuscript accent
   (Passeggiata), standard readable font — owner 2026-06-14. ── */
#view-chat #chat-show-italian {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600;
  color: #8a640f; background: rgba(184,137,59,0.10);
  border: 1px solid rgba(184,137,59,0.34); border-radius: 7px;
  padding: 0.34rem 0.8rem; margin: 0.1rem 0 0.15rem; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
}
#view-chat #chat-show-italian:hover { background: rgba(184,137,59,0.18); border-color: #b8893b; transform: translateY(-1px); }
#view-chat #chat-show-italian.is-open { background: #b8893b; color: #fff; border-color: #b8893b; }
#view-chat #chat-italian-model {
  margin: 0.1rem 0 0.5rem; padding: 0.7rem 0.9rem;
  background: rgba(255,252,246,0.72);
  border: 1px solid rgba(201,184,154,0.5); border-left: 3px solid #b8893b; border-radius: 10px;
}
#view-chat #chat-italian-model .stm-cue {
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(138,100,15,0.8); margin-bottom: 0.45rem;
}
#view-chat #chat-italian-model .stm-alt {
  font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.7; font-weight: 400;
  color: #1a1714; padding: 0.34rem 0 0.34rem 0.7rem;
  border-left: 2px solid rgba(184,137,59,0.3); margin: 0.18rem 0;
}
#view-chat #chat-italian-model .stm-alt + .stm-alt { border-top: 1px dashed rgba(201,184,154,0.4); padding-top: 0.5rem; }
#view-chat #chat-italian-model .help-chunk {
  cursor: pointer; border-radius: 4px; padding: 0.02em 0.14em;
  border-bottom: 1.5px dotted rgba(184,137,59,0.6);
  transition: color .12s, background .12s;
}
#view-chat #chat-italian-model .help-chunk:hover,
#view-chat #chat-italian-model .help-chunk:focus { color: #8a640f; background: rgba(184,137,59,0.16); outline: none; }

/* Layout (owner 2026-06-14): Help pill to the LEFT of "tu" (1st grid column, top-aligned); the
   tips open as an in-flow bar BELOW the composer (expands down), never floating over the story. */
#view-chat .landing-ms-panel.chat-ms-footer-panel .ms-input.chat-ms-input-row {
  grid-template-columns: auto minmax(40px, 76px) minmax(0, 1fr);   /* [Hjelp] [tu] [field] */
  align-items: start;
}
#view-chat .chat-ms-input-row > #chat-show-italian {
  align-self: start;
  margin: 1rem 0 0;           /* nudged down to align with the input box (the form has ~1rem top padding) */
  white-space: nowrap;
}
#view-chat #chat-italian-model {
  margin: 0.55rem 0 0;        /* in-flow bar below the composer — no float, no story overlap */
  max-height: 42vh;
  overflow-y: auto;
}