/* ============================================================
   MonOn AI — Design System foundation (vanilla CSS)

   Single foundation file for the static UI surfaces (landing, auth,
   dashboard, chat, admin). It mirrors the canonical design system
   (../../../tokens/*.css + ../../../components/styles-runtime.js) but
   is consolidated here under /ui/assets/css/ so it is reliably served
   in every environment — the Laravel deployment only aliases /ui, not
   the repo-root /styles.css or /tokens/.

   Link this BEFORE any page-specific stylesheet.

   Direction: RASN research-backed relaxation palette.
   PRIMARY: Powder Blue #B0E0E6. Dark ink on all primary fills.
   No red, no yellow, no purple, no black/grey for status.
   ============================================================ */

/* ---- Webfonts: Philosopher (display/brand) + Mulish (UI/body) ---- */
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root {
  /* ---- Warm neutral ramp (linen / sand / off-white) ---- */
  --sand-50:  #FBF8F3;
  --sand-100: #F4EEE4;
  --sand-200: #E9E0D2;
  --sand-300: #D8CCBA;
  --sand-400: #BCAE99;
  --sand-500: #998C77;
  --sand-600: #766B5A;
  --sand-700: #564E42;
  --sand-800: #3A3530;
  --sand-900: #241F1B;

  /* ---- Ink (warm-slate, for headings on light) ---- */
  --ink-700: #3E4A56;
  --ink-800: #2C3742;
  --ink-900: #1E2730;

  /* ---- Powder blue (PRIMARY — calm, blue-green, L≈80%) ---- */
  --blue-50:  #F2FBFC;
  --blue-100: #E3F7F9;
  --blue-200: #C7EEF2;
  --blue-300: #BAE8EC;
  --blue-400: #B0E0E6;   /* ★ brand primary */
  --blue-500: #82CDD5;
  --blue-600: #52AEBB;
  --blue-700: #368A96;
  --blue-800: #266673;
  --blue-900: #1B4D54;

  /* ---- Sage (SECONDARY — balance, "ok") ---- */
  --sage-50:  #EFF3EC;
  --sage-100: #E1E9DB;
  --sage-200: #CAD7C1;
  --sage-300: #AEC0A3;
  --sage-400: #94A988;
  --sage-500: #7B926E;
  --sage-600: #647859;
  --sage-700: #4F5F47;

  /* ---- Lavender (TERTIARY) ---- */
  --lav-50:  #F1EFF5;
  --lav-100: #E6E2EE;
  --lav-200: #D5CEE3;
  --lav-300: #BCB1D2;
  --lav-400: #A294C0;
  --lav-500: #897AAA;

  /* ---- Blush (warm accent) ---- */
  --blush-50:  #F8EEEC;
  --blush-100: #F0DDD9;
  --blush-200: #E4C4BD;
  --blush-300: #D9A99E;
  --blush-400: #C98C7E;

  /* ---- Clay (CAUTION — used in place of red) ---- */
  --clay-100: #F1DED7;
  --clay-300: #D6A292;
  --clay-400: #C68A74;
  --clay-500: #B97B68;
  --clay-600: #A2654F;

  /* ---- Semantic: surfaces & backgrounds ---- */
  --bg-page:        var(--sand-50);
  --bg-sunken:      var(--sand-100);
  --bg-tint-blue:   var(--blue-50);
  --bg-tint-sage:   var(--sage-50);
  --surface-card:   #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-inset:  var(--sand-100);
  --surface-overlay: rgba(44, 55, 66, 0.42);

  /* ---- Borders & dividers ---- */
  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--sand-400);
  --border-focus:   var(--blue-500);

  /* ---- Text ---- */
  --text-strong:    var(--ink-800);
  --text-body:      var(--sand-700);
  --text-muted:     var(--sand-600);
  --text-faint:     var(--sand-500);
  --text-disabled:  var(--sand-400);
  --text-on-primary: var(--ink-900);
  --text-link:      var(--blue-700);

  /* ---- Primary (powder blue) — light fill, dark-ink text ---- */
  --primary:        var(--blue-400);
  --primary-hover:  var(--blue-500);
  --primary-active: var(--blue-600);
  --primary-soft:   var(--blue-100);
  --primary-softer: var(--blue-50);
  --on-primary:     var(--ink-900);

  /* ---- Secondary (sage) ---- */
  --secondary:      var(--sage-500);
  --secondary-hover: var(--sage-600);
  --secondary-soft: var(--sage-100);

  /* ---- Accents ---- */
  --accent-lav:     var(--lav-400);
  --accent-lav-soft: var(--lav-100);
  --accent-blush:   var(--blush-300);
  --accent-blush-soft: var(--blush-50);

  /* ---- Status (calm, no alarm-red / no yellow) ---- */
  --status-ok:      var(--sage-500);
  --status-ok-soft: var(--sage-100);
  --status-info:    var(--blue-700);
  --status-info-soft: var(--blue-100);
  --status-caution: var(--clay-500);
  --status-caution-soft: var(--clay-100);

  /* ---- Chat bubbles ---- */
  --bubble-user-bg:   var(--blue-400);
  --bubble-user-text: var(--ink-900);
  --bubble-ai-bg:     #FFFFFF;
  --bubble-ai-text:   var(--sand-700);
  --bubble-ai-border: var(--sand-200);

  /* ---- Typography ---- */
  --font-serif: 'Philosopher', 'Iowan Old Style', Georgia, serif;
  --font-sans:  'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.72;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.16em;

  /* ---- Spacing (4px grid) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Radii ---- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  26px;
  --radius-2xl: 34px;
  --radius-pill: 999px;

  /* ---- Container widths ---- */
  --width-prose:   42rem;
  --width-content: 64rem;
  --width-wide:    80rem;

  /* ---- Elevation (warm slate tint, low alpha) ---- */
  --shadow-xs: 0 1px 2px rgba(44, 55, 66, 0.05);
  --shadow-sm: 0 2px 8px rgba(44, 55, 66, 0.07);
  --shadow-md: 0 8px 22px rgba(44, 55, 66, 0.09);
  --shadow-lg: 0 18px 44px rgba(44, 55, 66, 0.12);
  --shadow-xl: 0 30px 70px rgba(44, 55, 66, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(44, 55, 66, 0.05);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 4px rgba(176, 224, 230, 0.50);
  --ring-blue: 0 0 0 4px rgba(176, 224, 230, 0.50);
  --ring-sage: 0 0 0 4px rgba(123, 146, 110, 0.22);

  /* ---- Motion — calm, no bounce ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
  --duration-fast:   140ms;
  --duration-normal: 220ms;
  --duration-slow:   360ms;
}

/* ============================================================
   Base element defaults — warm canvas, brand type
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--blue-200); color: var(--ink-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

/* ============================================================
   Component classes — vanilla port of components/styles-runtime.js
   ============================================================ */

/* ---------- Button ---------- */
.mon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; line-height: 1;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.mon-btn:hover { text-decoration: none; }
.mon-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.mon-btn--sm { font-size: 13px; padding: 8px 16px; }
.mon-btn--md { font-size: 15px; padding: 11px 22px; }
.mon-btn--lg { font-size: 17px; padding: 14px 30px; }
.mon-btn--block { width: 100%; }
.mon-btn[disabled], .mon-btn--disabled {
  cursor: not-allowed; opacity: 0.5; pointer-events: none;
}
.mon-btn--primary { background: var(--primary); color: var(--on-primary); }
.mon-btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-1px); }
.mon-btn--primary:active { background: var(--primary-active); transform: translateY(0); }
.mon-btn--secondary { background: var(--secondary); color: var(--sand-50); }
.mon-btn--secondary:hover { background: var(--secondary-hover); color: var(--sand-50); transform: translateY(-1px); }
.mon-btn--secondary:active { transform: translateY(0); }
.mon-btn--soft { background: var(--primary-soft); color: var(--primary-active); }
.mon-btn--soft:hover { background: var(--blue-200); color: var(--primary-active); }
.mon-btn--outline { background: transparent; color: var(--primary-active); border-color: var(--border-default); }
.mon-btn--outline:hover { background: var(--surface-card); border-color: var(--primary); }
.mon-btn--ghost { background: transparent; color: var(--text-body); }
.mon-btn--ghost:hover { background: var(--bg-sunken); }

/* ---------- IconButton ---------- */
.mon-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; color: var(--text-muted); background: transparent;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.mon-iconbtn:hover { background: var(--bg-sunken); color: var(--text-strong); }
.mon-iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.mon-iconbtn--sm { width: 32px; height: 32px; font-size: 16px; }
.mon-iconbtn--md { width: 40px; height: 40px; font-size: 19px; }
.mon-iconbtn--lg { width: 48px; height: 48px; font-size: 22px; }
.mon-iconbtn--solid { background: var(--primary); color: var(--on-primary); }
.mon-iconbtn--solid:hover { background: var(--primary-hover); color: var(--on-primary); }
.mon-iconbtn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---------- Tag / Badge ---------- */
.mon-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-pill); line-height: 1;
}
.mon-tag--neutral { background: var(--bg-sunken); color: var(--text-muted); }
.mon-tag--blue { background: var(--blue-100); color: var(--blue-700); }
.mon-tag--sage { background: var(--sage-100); color: var(--sage-700); }
.mon-tag--lav { background: var(--lav-100); color: var(--lav-500); }
.mon-tag--blush { background: var(--blush-50); color: var(--blush-400); }
.mon-tag--clay { background: var(--clay-100); color: var(--clay-600); }
.mon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 700;
  border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary);
  font-family: var(--font-sans); line-height: 1;
}
.mon-badge--dot { min-width: 9px; width: 9px; height: 9px; padding: 0; }
.mon-badge--sage { background: var(--sage-500); }
.mon-badge--clay { background: var(--clay-500); }

/* ---------- Avatar ---------- */
.mon-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); overflow: hidden; flex: none;
  font-family: var(--font-sans); font-weight: 700; color: var(--sand-50);
  background: var(--blue-400);
}
.mon-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mon-avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.mon-avatar--md { width: 40px; height: 40px; font-size: 15px; }
.mon-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.mon-avatar--bot { background: var(--blue-500); }

/* ---------- Input / Textarea ---------- */
.mon-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.mon-label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.mon-hint { font-size: 12px; color: var(--text-faint); }
.mon-hint--error { color: var(--clay-600); }
.mon-inputwrap { position: relative; display: flex; align-items: center; }
.mon-inputwrap > .mon-affix {
  position: absolute; color: var(--text-faint); font-size: 17px;
  display: inline-flex; align-items: center; pointer-events: none;
}
.mon-inputwrap > .mon-affix--left { left: 14px; }
.mon-inputwrap > .mon-affix--right { right: 14px; }
.mon-input, .mon-textarea {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--text-body);
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 12px 14px;
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.mon-input.has-left { padding-left: 40px; }
.mon-input.has-right { padding-right: 40px; }
.mon-input::placeholder, .mon-textarea::placeholder { color: var(--text-faint); }
.mon-input:hover, .mon-textarea:hover { border-color: var(--border-strong); }
.mon-input:focus, .mon-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.mon-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.mon-field--error .mon-input, .mon-field--error .mon-textarea { border-color: var(--clay-400); }
.mon-field--error .mon-input:focus, .mon-field--error .mon-textarea:focus {
  box-shadow: 0 0 0 4px rgba(185, 123, 104, 0.18);
}

/* ---------- Checkbox ---------- */
.mon-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--font-sans); }
.mon-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.mon-check .box {
  width: 22px; height: 22px; flex: none; border-radius: 7px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sand-50); font-size: 13px;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mon-check .box i { opacity: 0; transform: scale(0.6); transition: all var(--duration-fast) var(--ease-out); }
.mon-check input:checked + .box { background: var(--primary); border-color: var(--primary); }
.mon-check input:checked + .box i { opacity: 1; transform: scale(1); color: var(--on-primary); }
.mon-check input:focus-visible + .box { box-shadow: var(--ring); }
.mon-check .ctext { font-size: 14px; color: var(--text-body); line-height: 1.45; }

/* ---------- Card ---------- */
.mon-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  font-family: var(--font-sans); color: var(--text-body);
}
.mon-card--pad { padding: var(--space-6); }
.mon-card--tint-blue { background: var(--bg-tint-blue); border-color: var(--blue-100); }
.mon-card--tint-sage { background: var(--bg-tint-sage); border-color: var(--sage-100); }
.mon-card--interactive { cursor: pointer; transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
.mon-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---------- Banner ---------- */
.mon-banner {
  display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-sans);
  padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5;
  border: 1px solid transparent;
}
.mon-banner i.lead { font-size: 18px; line-height: 1.4; flex: none; }
.mon-banner--info { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.mon-banner--ok { background: var(--sage-50); color: var(--sage-700); border-color: var(--sage-100); }
.mon-banner--caution { background: var(--clay-100); color: var(--clay-600); border-color: #E8CDC3; }
.mon-banner--soft { background: var(--lav-100); color: var(--lav-500); border-color: #DDD6E8; }

/* ---------- Dialog ---------- */
.mon-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--surface-overlay); backdrop-filter: blur(3px);
  animation: monFade var(--duration-normal) var(--ease-out);
}
.mon-dialog {
  width: 100%; max-width: 440px; background: var(--surface-card);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: var(--space-8); font-family: var(--font-sans); color: var(--text-body);
  animation: monRise var(--duration-slow) var(--ease-out);
}
.mon-dialog h2 { font-family: var(--font-serif); font-size: 24px; color: var(--text-strong); margin: 0 0 10px; }
.mon-dialog p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0 0 22px; }
.mon-dialog-actions { display: flex; flex-direction: column; gap: 10px; }
@keyframes monFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes monRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Chat bubble ---------- */
.mon-msg { display: flex; gap: 10px; font-family: var(--font-sans); }
.mon-msg--me { justify-content: flex-end; }
.mon-msg__bubble { padding: 11px 16px; font-size: 15px; line-height: 1.55; max-width: 78%; }
.mon-msg--ai .mon-msg__bubble {
  background: var(--bubble-ai-bg); color: var(--bubble-ai-text);
  border: 1px solid var(--bubble-ai-border); border-radius: 20px 20px 20px 6px;
  box-shadow: var(--shadow-xs);
}
.mon-msg--me .mon-msg__bubble {
  background: var(--bubble-user-bg); color: var(--bubble-user-text); border-radius: 20px 20px 6px 20px;
}
.mon-typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; }
.mon-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); animation: monBounce 1.2s ease-in-out infinite; }
.mon-typing span:nth-child(2) { animation-delay: 0.18s; }
.mon-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes monBounce { 0%,80%,100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Composer ---------- */
.mon-composer {
  display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 18px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.mon-composer:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.mon-composer textarea {
  flex: 1; border: none; outline: none; resize: none; background: transparent;
  font-family: var(--font-sans); font-size: 16px; color: var(--text-body);
  line-height: 1.5; padding: 9px 0; max-height: 140px;
}
.mon-composer textarea::placeholder { color: var(--text-faint); }
.mon-composer__send {
  flex: none; width: 42px; height: 42px; border: none; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); cursor: pointer; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.mon-composer__send:hover { background: var(--primary-hover); transform: translateY(-1px); }
.mon-composer__send[disabled] { background: var(--sand-300); cursor: not-allowed; transform: none; }

/* ---------- History item ---------- */
.mon-history {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 13px; border: none; border-radius: var(--radius-md); cursor: pointer;
  background: transparent; font-family: var(--font-sans); color: var(--text-body);
  transition: background var(--duration-fast) var(--ease-out);
}
.mon-history:hover { background: var(--bg-sunken); }
.mon-history--active { background: var(--blue-100); }
.mon-history i { color: var(--text-faint); font-size: 16px; flex: none; }
.mon-history--active i { color: var(--primary); }
.mon-history__body { min-width: 0; flex: 1; }
.mon-history__title { font-size: 14px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-history__meta { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Toast (transient corner feedback) ---------- */
.mon-toast {
  position: fixed; top: 20px; right: 20px; z-index: 5200;
  max-width: 360px; padding: 12px 18px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.45;
  color: var(--sand-50); background: var(--ink-800);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  animation: monToastIn var(--duration-normal) var(--ease-out);
}
.mon-toast--ok { background: var(--secondary); }       /* sage */
.mon-toast--error { background: var(--status-caution); } /* clay — never red */
.mon-toast--info { background: var(--blue-700); }
.mon-toast--soft {
  background: var(--bg-sunken);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
@keyframes monToastIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- Brand logo lockup (connected-heart mark + Philosopher wordmark) ---------- */
.mon-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; }
.mon-logo:hover { text-decoration: none; }
.mon-logo__mark { display: block; flex: none; color: var(--blue-600); }
.mon-logo__word {
  font-family: var(--font-serif); font-weight: 700; line-height: 1;
  letter-spacing: 0.01em; color: var(--ink-800); white-space: nowrap;
}
.mon-logo--sm .mon-logo__mark { width: 24px; height: 24px; }
.mon-logo--sm .mon-logo__word { font-size: 19px; }
.mon-logo--md .mon-logo__mark { width: 34px; height: 34px; }
.mon-logo--md .mon-logo__word { font-size: 27px; }
.mon-logo--lg .mon-logo__mark { width: 48px; height: 48px; }
.mon-logo--lg .mon-logo__word { font-size: 38px; }
.mon-logo--on-dark .mon-logo__mark { color: #FFFFFF; }
.mon-logo--on-dark .mon-logo__word { color: #FFFFFF; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mon-dialog, .mon-dialog-backdrop { animation: none; }
  .mon-typing span { animation: none; }
  .mon-toast { animation: none; }
  .mon-btn, .mon-card--interactive, .mon-composer__send { transition: none; }
  .mon-btn:hover, .mon-card--interactive:hover, .mon-composer__send:hover { transform: none; }
}