/* mnemo appearance tokens (mnemo5-ui). Loaded after brand.css. Every rule keys off a data-mnemo-* attribute that
   /theme.js sets on <html>, so with the defaults nothing here applies and the Xeme look from brand.css is unchanged. */
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/brand/fonts/Inter-Variable.woff2) format("woff2")}

/* Serif headings: Newsreader for page, dialog and markdown headings, body stays in the sans. */
html[data-mnemo-font="serif"] h1,html[data-mnemo-font="serif"] h2,html[data-mnemo-font="serif"] h3,
html[data-mnemo-font="serif"] .rk-chat-markdown h1,html[data-mnemo-font="serif"] .rk-chat-markdown h2,html[data-mnemo-font="serif"] .rk-chat-markdown h3{
  font-family:var(--xeme-display) !important;font-weight:500 !important;letter-spacing:-0.015em}

/* Density: --spacing (set by theme.js) scales every Tailwind gap and padding; these tune the dense lists too. */
html[data-mnemo-density="compact"] [data-slot="sidebar"]{font-size:13px}
html[data-mnemo-density="compact"] [data-testid="message-user-bubble"],
html[data-mnemo-density="compact"] [data-testid="message-bot-bubble"]{padding:8px 14px !important}
html[data-mnemo-density="spacious"] [data-testid="message-user-bubble"],
html[data-mnemo-density="spacious"] [data-testid="message-bot-bubble"]{padding:14px 20px !important}

/* Corner radius for bubbles and the composer. */
html[data-mnemo-radius] [data-testid="message-user-bubble"],
html[data-mnemo-radius] [data-testid="message-bot-bubble"]{border-radius:var(--mnemo-bubble-radius,14px) !important}
html[data-mnemo-radius="sharp"] [data-testid="composer-bar"]{border-radius:8px !important}
html[data-mnemo-radius="round"] [data-testid="composer-bar"]{border-radius:24px !important}

/* Chat bubble styles. */
html[data-mnemo-bubbles="outline"] [data-testid="message-user-bubble"]{background:transparent !important;box-shadow:inset 0 0 0 1px var(--input) !important}
html[data-mnemo-bubbles="outline"] [data-testid="message-bot-bubble"]{background:transparent !important;box-shadow:inset 0 0 0 1px var(--border) !important}
html[data-mnemo-bubbles="minimal"] [data-testid="message-bot-bubble"]{background:transparent !important;box-shadow:none !important;padding-left:2px !important;padding-right:2px !important}
html[data-mnemo-bubbles="minimal"] [data-testid="message-user-bubble"]{box-shadow:none !important}
html[data-mnemo-accent="custom"][data-mnemo-bubbles="filled"] [data-testid="message-user-bubble"]{background:var(--mnemo-accent-soft) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mnemo-accent) 28%,transparent) !important}

/* Message width: the upstream bubbles stop at 39rem; this widens or narrows the reading column. */
html[data-mnemo-width]:not([data-mnemo-width="default"]) [data-testid="transcript"] [class*="39rem"]{max-width:min(92%,var(--mnemo-msg-width,39rem)) !important}
html[data-mnemo-width="full"] [data-testid="transcript"] [class*="39rem"]{max-width:calc(100% - 2rem) !important}

/* Code blocks (the app renders code without syntax colours, so the theme is surface, ink and border). */
html[data-mnemo-code="graphite"] .rk-chat-markdown pre{background:#0b0d11 !important;color:#e6e8eb !important;border-color:#252c37 !important}
html[data-mnemo-code="paper"] .rk-chat-markdown pre{background:#fbf8f1 !important;color:#14171c !important;border-color:#e3ddd2 !important}
html[data-mnemo-code="contrast"] .rk-chat-markdown pre{background:#000 !important;color:#fff !important;border:1px solid #fff !important}
html[data-mnemo-code="graphite"] .rk-chat-markdown pre code,html[data-mnemo-code="paper"] .rk-chat-markdown pre code,
html[data-mnemo-code="contrast"] .rk-chat-markdown pre code{color:inherit !important;background:transparent !important}

/* Motion. "system" keeps the brand.css prefers-reduced-motion rule. */
html[data-mnemo-motion="reduce"] *,html[data-mnemo-motion="reduce"] *::before,html[data-mnemo-motion="reduce"] *::after{
  animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion:reduce){
  html[data-mnemo-motion="full"] *,html[data-mnemo-motion="full"] *::before,html[data-mnemo-motion="full"] *::after{animation-duration:revert !important;transition-duration:revert !important}
}

/* High contrast: stronger ink, borders and focus rings in both themes. */
:root:root[data-mnemo-contrast="high"][data-theme="dark"]{
  --foreground:#ffffff !important;--muted-foreground:#d3d8df !important;--faint-foreground:#aab2bd !important;
  --border:#5a6472 !important;--input:#7b8594 !important;--sidebar-border:#5a6472 !important;--ring:#ffffff !important;--background:#05070a !important;--sidebar:#000000 !important}
:root:root[data-mnemo-contrast="high"][data-theme="light"]{
  --foreground:#000000 !important;--muted-foreground:#262b33 !important;--faint-foreground:#3f4652 !important;
  --border:#8a8170 !important;--input:#5f5747 !important;--sidebar-border:#8a8170 !important;--ring:#000000 !important;--background:#ffffff !important;--sidebar:#f4f2eb !important}
html[data-mnemo-contrast="high"] a{text-decoration:underline !important}
html[data-mnemo-contrast="high"] :focus-visible{outline:2px solid var(--ring) !important;outline-offset:2px !important}

/* ---------- mnemo controls injected by /mnemo-appearance/ui.js ---------- */
.mnemo-ap-toggle{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:999px;border:1px solid var(--border);
  background:var(--sidebar-accent);color:var(--foreground);cursor:pointer;padding:0}
.mnemo-ap-toggle:hover{border-color:color-mix(in srgb,var(--foreground) 30%,transparent)}
.mnemo-ap-toggle:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.mnemo-ap-toggle svg{width:17px;height:17px}
.mnemo-ap-float{position:fixed;top:14px;right:14px;z-index:60;display:flex;gap:6px}
.mnemo-ap-float .mnemo-ap-toggle{background:var(--card)}
.mnemo-ap-menuitem{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--foreground);font:inherit;font-size:14px;cursor:pointer;text-align:start}
.mnemo-ap-menuitem:hover,.mnemo-ap-menuitem:focus-visible{background:var(--accent);outline:none}
.mnemo-ap-menuitem svg{width:16px;height:16px;color:var(--muted-foreground)}
.mnemo-ap-menuitem .mnemo-ap-kbd{margin-inline-start:auto;font:500 11px/1 var(--xeme-mono);color:var(--muted-foreground);text-transform:capitalize}

.mnemo-ap-overlay{position:fixed;inset:0;z-index:2147483000;background:var(--overlay);display:grid;place-items:center;padding:16px}
.mnemo-ap-dialog{width:min(720px,100%);max-height:min(88vh,860px);overflow:auto;background:var(--dialog,var(--card));color:var(--foreground);
  border:1px solid var(--border);border-radius:var(--r-dialog,16px);box-shadow:var(--shadow-md)}
.mnemo-ap-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:18px 22px;background:inherit;border-bottom:1px solid var(--border)}
.mnemo-ap-head h2{margin:0;font:500 24px/1.15 var(--xeme-display) !important;letter-spacing:-0.02em}
.mnemo-ap-head p{margin:2px 0 0;color:var(--muted-foreground);font-size:13px}
.mnemo-ap-head .mnemo-ap-x{margin-inline-start:auto}
.mnemo-ap{display:grid;gap:4px;padding:8px 22px 22px;font-size:14px}
.mnemo-ap-inline{padding:0;margin-top:20px}
.mnemo-ap-inline .mnemo-ap-title{font:600 11px/1 var(--xeme-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin:6px 0 6px}
.mnemo-ap-row{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.mnemo-ap-row:last-child{border-bottom:0}
.mnemo-ap-row > div:first-child b{display:block;font-weight:500}
.mnemo-ap-row > div:first-child span{display:block;color:var(--muted-foreground);font-size:12px;margin-top:2px}
@media (max-width:560px){.mnemo-ap-row{grid-template-columns:1fr;gap:8px}}
.mnemo-ap-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid var(--border);border-radius:calc(var(--r-sm) + 2px);background:var(--background)}
.mnemo-ap-seg button{border:0;background:transparent;color:var(--muted-foreground);font:inherit;font-size:13px;padding:6px 11px;border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mnemo-ap-seg button[aria-pressed="true"]{background:var(--card);color:var(--foreground);box-shadow:0 0 0 1px var(--input)}
.mnemo-ap-seg button:focus-visible,.mnemo-ap-btn:focus-visible,.mnemo-ap-sw:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.mnemo-ap-seg svg{width:14px;height:14px}
.mnemo-ap-sws{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mnemo-ap-sw{width:28px;height:28px;border-radius:999px;border:1px solid var(--input);cursor:pointer;padding:0;position:relative}
.mnemo-ap-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--foreground)}
.mnemo-ap-sw.xeme{background:linear-gradient(135deg,#14171c 50%,#f7f7f5 50%)}
.mnemo-ap-hex{display:inline-flex;align-items:center;gap:6px}
.mnemo-ap-hex input[type="text"]{width:92px;height:30px;padding:0 8px;border:1px solid var(--input);border-radius:var(--r-sm);background:var(--background);color:var(--foreground);font:500 13px var(--xeme-mono)}
.mnemo-ap-hex input[type="color"]{width:30px;height:30px;padding:0;border:1px solid var(--input);border-radius:var(--r-sm);background:transparent;cursor:pointer}
.mnemo-ap-ratio{display:block;margin-top:8px;font:500 12px/1.4 var(--xeme-mono);color:var(--muted-foreground)}
.mnemo-ap-ratio .ok{color:var(--success)}.mnemo-ap-ratio .warn{color:var(--warning)}
.mnemo-ap-btn{height:32px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--input);background:transparent;color:var(--foreground);font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mnemo-ap-btn:hover{background:var(--accent)}
.mnemo-ap-btn svg{width:16px;height:16px}
.mnemo-ap-x{width:32px;padding:0;justify-content:center}
.mnemo-ap-btn.primary{background:var(--primary);color:var(--primary-foreground);border-color:transparent}
.mnemo-ap-btn.primary:hover{background:var(--primary-hover)}
.mnemo-ap-actions{display:flex;flex-wrap:wrap;gap:8px}
.mnemo-ap textarea{width:100%;min-height:96px;margin-top:8px;padding:8px;border:1px solid var(--input);border-radius:var(--r-sm);background:var(--background);color:var(--foreground);font:12px/1.5 var(--xeme-mono);resize:vertical}
.mnemo-ap-msg{font-size:12px;color:var(--muted-foreground);min-height:16px;margin-top:6px}
.mnemo-ap-preview{display:grid;gap:8px;padding:14px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--background)}
.mnemo-ap-preview .u{justify-self:end;max-width:80%;padding:8px 14px;border-radius:var(--mnemo-bubble-radius,14px);background:var(--chat-user);color:var(--chat-user-foreground);box-shadow:inset 0 0 0 1px var(--border)}
.mnemo-ap-preview .b{justify-self:start;max-width:85%;padding:8px 14px;border-radius:var(--mnemo-bubble-radius,14px);background:var(--muted)}
.mnemo-ap-preview .b a{color:var(--link)}
.mnemo-ap-preview pre{margin:0;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--muted);font:12px/1.5 var(--xeme-mono);overflow:auto}
html[data-mnemo-bubbles="outline"] .mnemo-ap-preview .u,html[data-mnemo-bubbles="outline"] .mnemo-ap-preview .b{background:transparent;box-shadow:inset 0 0 0 1px var(--input)}
html[data-mnemo-bubbles="minimal"] .mnemo-ap-preview .b{background:transparent;padding-inline:2px}
html[data-mnemo-accent="custom"][data-mnemo-bubbles="filled"] .mnemo-ap-preview .u{background:var(--mnemo-accent-soft)}
html[data-mnemo-code="graphite"] .mnemo-ap-preview pre{background:#0b0d11;color:#e6e8eb}
html[data-mnemo-code="paper"] .mnemo-ap-preview pre{background:#fbf8f1;color:#14171c;border-color:#e3ddd2}
html[data-mnemo-code="contrast"] .mnemo-ap-preview pre{background:#000;color:#fff;border-color:#fff}
.mnemo-ap-preview .p{justify-self:start;display:inline-flex;gap:8px}
.mnemo-ap-scope{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-foreground)}
.mnemo-ap-scope input{accent-color:var(--primary)}
.mnemo-ap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mnemo-ap-settings{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
#mnemo-ap-settings > h3{font-size:15px;font-weight:600;margin:0 0 4px}