/* mnemo · Xeme UI layer v5 (mnemo15-ui, 1 Nov 2026). Black and white after dokeo.co (studied live, own code).
   Loaded last. Palette rules use html[data-mnemo-palette][data-theme] (0,2,1): above brand.css (0,1,0),
   below a custom accent from theme.js (:root:root[data-theme], 0,3,0), so a picked accent still wins.
   Paper palette = the v4 tokens in brand.css, so it needs no rules here. */

/* ---------- palette: mono (default) ---------- */
html[data-mnemo-palette="mono"][data-theme="dark"]{
  --background:#0a0a0a !important;--dialog:#111111 !important;--foreground:#fafafa !important;
  --card:#111111 !important;--card-foreground:#fafafa !important;--popover:#111111 !important;--popover-foreground:#fafafa !important;
  --glass-fill:#161616 !important;--glass-stroke:#ffffff1a !important;
  --primary:#fafafa !important;--primary-foreground:#0a0a0a !important;--primary-hover:#d4d4d4 !important;--primary-disabled:#fafafa21 !important;
  --secondary:#ffffff0a !important;--secondary-foreground:#fafafa !important;
  --muted:#141414 !important;--muted-foreground:#a3a3a3 !important;--faint-foreground:#737373 !important;
  --accent:#ffffff0f !important;--accent-foreground:#fafafa !important;
  --border:#ffffff17 !important;--input:#ffffff29 !important;--ring:#fafafa !important;
  --sidebar:#0a0a0a !important;--sidebar-foreground:#fafafa !important;--sidebar-border:#ffffff14 !important;
  --sidebar-accent:#ffffff10 !important;--sidebar-accent-foreground:#fafafa !important;
  --link:#fafafa !important;--unread:#fafafa !important;--status-working:#fafafa !important;--favicon-plate:#fafafa !important;
  --overlay:rgba(0,0,0,.72) !important;--scrollbar:#262626 !important;--scrollbar-hover:#404040 !important;
  --shadow-sm:0 0 0 1px #ffffff12;--shadow-md:0 0 0 1px #ffffff14,0 16px 40px -16px #000000cc;
  --mnemo-user-ink:#fafafa;--mnemo-user-ink-fg:#0a0a0a;--mnemo-user-soft:#1a1a1a;
}
html[data-mnemo-palette="mono"][data-theme="light"]{
  --background:#ffffff !important;--dialog:#ffffff !important;--foreground:#0a0a0a !important;
  --card:#ffffff !important;--card-foreground:#0a0a0a !important;--popover:#ffffff !important;--popover-foreground:#0a0a0a !important;
  --glass-fill:#ffffff !important;--glass-stroke:#0a0a0a1a !important;
  --primary:#0a0a0a !important;--primary-foreground:#ffffff !important;--primary-hover:#262626 !important;--primary-disabled:#0a0a0a26 !important;
  --secondary:#0a0a0a08 !important;--secondary-foreground:#0a0a0a !important;
  --muted:#f5f5f5 !important;--muted-foreground:#525252 !important;--faint-foreground:#737373 !important;
  --accent:#0a0a0a0a !important;--accent-foreground:#0a0a0a !important;
  --border:#e5e5e5 !important;--input:#d4d4d4 !important;--ring:#0a0a0a !important;
  --sidebar:#fafafa !important;--sidebar-foreground:#0a0a0a !important;--sidebar-border:#ebebeb !important;
  --sidebar-accent:#0a0a0a0d !important;--sidebar-accent-foreground:#0a0a0a !important;
  --link:#0a0a0a !important;--unread:#0a0a0a !important;--status-working:#0a0a0a !important;--favicon-plate:#0a0a0a !important;
  --overlay:rgba(10,10,10,.4) !important;--scrollbar:#d4d4d4 !important;--scrollbar-hover:#a3a3a3 !important;
  --shadow-sm:0 1px 2px #0a0a0a0d;--shadow-md:0 1px 2px #0a0a0a0d,0 8px 24px -12px #0a0a0a2e;
  --mnemo-user-ink:#0a0a0a;--mnemo-user-ink-fg:#ffffff;--mnemo-user-soft:#f2f2f2;
}
/* ---------- palette: graphite (dokeo app surfaces) ---------- */
html[data-mnemo-palette="graphite"][data-theme="dark"]{
  --background:#0a0b14 !important;--dialog:#11131f !important;--card:#11131f !important;--popover:#11131f !important;--muted:#181b2a !important;
  --glass-fill:#181b2a !important;--sidebar:#0a0b14 !important;--border:#ffffff17 !important;--input:#ffffff29 !important;--sidebar-border:#ffffff14 !important;
  --foreground:#f4f5f8 !important;--primary:#f4f5f8 !important;--primary-foreground:#0a0b14 !important;--muted-foreground:#9aa0b4 !important;
  --link:#f4f5f8 !important;--mnemo-user-ink:#f4f5f8;--mnemo-user-ink-fg:#0a0b14;--mnemo-user-soft:#222638;
}
html[data-mnemo-palette="graphite"][data-theme="light"]{
  --background:#f6f7f9 !important;--dialog:#ffffff !important;--card:#ffffff !important;--popover:#ffffff !important;--muted:#eef0f4 !important;
  --sidebar:#eef0f4 !important;--border:#e1e4ea !important;--input:#cdd2db !important;--sidebar-border:#e1e4ea !important;
  --foreground:#11131f !important;--primary:#11131f !important;--primary-foreground:#ffffff !important;--muted-foreground:#4b5266 !important;
  --link:#11131f !important;--mnemo-user-ink:#11131f;--mnemo-user-ink-fg:#ffffff;--mnemo-user-soft:#e8eaf0;
}
html[data-mnemo-palette="paper"]{--mnemo-user-ink:var(--foreground);--mnemo-user-ink-fg:var(--background);--mnemo-user-soft:var(--muted)}
html[data-mnemo-palette="mono"] ::selection{background:#fafafa;color:#0a0a0a}
html[data-mnemo-palette="mono"][data-theme="light"] ::selection{background:#0a0a0a;color:#ffffff}

/* ---------- your messages ---------- */
html[data-mnemo-user-bubble="ink"][data-mnemo-accent="xeme"] .bg-chat-user{background:var(--mnemo-user-ink) !important;color:var(--mnemo-user-ink-fg) !important}
html[data-mnemo-user-bubble="ink"][data-mnemo-accent="xeme"] .bg-chat-user a{color:inherit !important}
html[data-mnemo-user-bubble="ink"][data-mnemo-accent="custom"] .bg-chat-user{background:var(--primary) !important;color:var(--primary-foreground) !important}
html[data-mnemo-user-bubble="soft"] .bg-chat-user{background:var(--mnemo-user-soft) !important;color:var(--foreground) !important;box-shadow:inset 0 0 0 1px var(--border)}
/* "bot" leaves the upstream bot colour alone */

/* ---------- chat layout: document ---------- */
html[data-mnemo-layout="document"] [data-testid="message-user-bubble"]{border-radius:10px !important}
html[data-mnemo-layout="document"] [data-testid="transcript"] [data-message-id]{padding-block:6px}
html[data-mnemo-layout="document"] [data-testid="transcript"] [data-message-id] + [data-message-id]{border-top:1px solid var(--border)}

/* ---------- headings ---------- */
html[data-mnemo-headings="serif"] h1,html[data-mnemo-headings="serif"] h2,html[data-mnemo-headings="serif"] [data-testid="settings-header"] h2,
html[data-mnemo-headings="serif"] .mnemo-ap-head h2,html[data-mnemo-headings="serif"] .mnemo-ap-title{font-family:var(--xeme-display) !important;font-weight:500 !important;letter-spacing:-.02em !important;text-transform:none !important}
html[data-mnemo-headings="mono"] h1,html[data-mnemo-headings="mono"] h2,html[data-mnemo-headings="mono"] .mnemo-ap-head h2,
html[data-mnemo-headings="mono"] .mnemo-ap-title{font-family:var(--xeme-mono) !important;letter-spacing:-.01em !important}

/* ---------- borders ---------- */
html[data-mnemo-borders="none"]{--border:transparent !important;--sidebar-border:transparent !important;--shadow-sm:none}
html[data-mnemo-borders="none"] [data-testid="composer-bar"]{box-shadow:0 0 0 1px var(--input) !important}
html[data-mnemo-borders="strong"][data-theme="dark"]{--border:#ffffff33 !important;--input:#ffffff4d !important;--sidebar-border:#ffffff29 !important}
html[data-mnemo-borders="strong"][data-theme="light"]{--border:#0a0a0a33 !important;--input:#0a0a0a52 !important;--sidebar-border:#0a0a0a29 !important}

/* ---------- bot avatars ---------- */
html[data-mnemo-avatars="mono"] [data-testid="bots-sidebar"] img,html[data-mnemo-avatars="mono"] [data-testid="bots-sidebar"] svg:not(.lucide),
html[data-mnemo-avatars="mono"] [data-testid="transcript"] img[alt=""],html[data-mnemo-avatars="mono"] .bot-avatar{filter:grayscale(1) contrast(1.05)}

/* ---------- theme pill (sidebar footer, sign-in float, /mnemo/ header) ---------- */
.mnemo-theme-pill.mnemo-ap-toggle{display:inline-flex;align-items:center;gap:0;width:auto;height:32px;padding:2px;border-radius:999px;border:1px solid var(--border);background:var(--background);flex:none}
.mnemo-theme-pill button{display:inline-grid;place-items:center;width:28px;height:26px;border:0;border-radius:999px;background:transparent;color:var(--muted-foreground);cursor:pointer;padding:0;transition:background-color .15s,color .15s}
.mnemo-theme-pill button:hover{color:var(--foreground)}
.mnemo-theme-pill button[aria-pressed="true"]{background:var(--accent);color:var(--foreground);box-shadow:0 0 0 1px var(--input)}
.mnemo-theme-pill button:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.mnemo-theme-pill svg{width:15px;height:15px}
[data-testid="sidebar-footer"] .mnemo-theme-pill{margin-left:auto}

/* ---------- composer and model row ---------- */
[data-testid="composer-bar"]{border-radius:16px !important}
[data-testid="composer-bar"] > .mnemo-chat-model{gap:8px;padding:8px 4px 2px}
.mnemo-chat-model-label{font-family:var(--xeme-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}
[data-testid="composer-bar"] > .mnemo-chat-model select{height:26px;border-radius:999px;padding:0 10px;border:1px solid var(--border);background:var(--background);font-size:12px}
.mnemo-chat-running{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--border);font-family:var(--xeme-mono);font-size:11px;color:var(--foreground);max-width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mnemo-chat-running i{width:6px;height:6px;border-radius:999px;background:var(--success);flex:none}
.mnemo-chat-running span{overflow:hidden;text-overflow:ellipsis}
.mnemo-chat-running em{font-style:normal;color:var(--muted-foreground)}

/* ---------- per-reply meta ---------- */
.mnemo-cost{display:flex;flex-wrap:wrap;gap:6px;align-items:center;opacity:1 !important;margin:6px 0 2px 2px !important;font-family:var(--xeme-mono);font-size:10.5px !important;letter-spacing:.02em;color:var(--muted-foreground)}
.mnemo-cost > span{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;border:1px solid var(--border)}
.mnemo-cost .c-usd{color:var(--foreground)}
html[data-mnemo-meta="off"] .mnemo-cost{display:none !important}
html[data-mnemo-meta="cost"] .mnemo-cost .c-model{display:none}
html[data-mnemo-meta="model"] .mnemo-cost .c-tok,html[data-mnemo-meta="model"] .mnemo-cost .c-usd{display:none}

/* ---------- stuck run bar ---------- */
.mnemo-stuck{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 8px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);font-size:12.5px}
.mnemo-stuck-dot{width:7px;height:7px;border-radius:999px;background:var(--warning);box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 22%,transparent)}
.mnemo-stuck-t{font-family:var(--xeme-mono);font-size:11.5px}
.mnemo-stuck-msg{color:var(--muted-foreground)}
.mnemo-stuck-btn{margin-left:auto;height:26px;padding:0 12px;border-radius:999px;border:1px solid var(--input);background:var(--foreground);color:var(--background);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.mnemo-stuck-btn:disabled{opacity:.6}
.mnemo-stuck-link{color:var(--muted-foreground);font-size:12px}

/* ---------- appearance panel: looks ---------- */
.mnemo-ap-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;width:100%}
.mnemo-ap-look{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--background);color:var(--foreground);font:inherit;cursor:pointer}
.mnemo-ap-look:hover{border-color:var(--input)}
.mnemo-ap-look b{font-size:13px;font-weight:600}
.mnemo-ap-look span{font-size:11.5px;color:var(--muted-foreground);line-height:1.35}
.mnemo-ap-look:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.mnemo-ap-seg button[aria-pressed="true"]{background:var(--foreground) !important;color:var(--background) !important;box-shadow:none !important}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .mnemo-chat-running{max-width:calc(100vw - 80px)}
  .mnemo-stuck-btn{margin-left:0}
  .mnemo-ap-looks{grid-template-columns:1fr 1fr}
}