/* ════════════════════════════════════════════════════════════════════
   BBYW OS THEME — donkere "Buy Back Your Week"-skin voor de Mia OS-schil
   Geladen NA os.css (cascade-override). Bron huisstijl: branding/brand.json
   + apps/command-center/index.html.

   PASS 1 (plan)
   - Kleuren: bg #0C0F12 (canvas) · panel #12161A (balken/vensters/kaarten)
     · raised #1D242B (hover/actief/inputs) · ink #F4F6F7 (tekst)
     · muted #8C959E (secundair) · lime #C8FF4D (uitsluitend actie/actief,
     tekst óp lime is altijd #0C0F12) · functioneel: ok #3DD9A4,
     warn #FF6A45, signal #FFC24B, info #6C9BFF · lijnen rgba(ink,.07–.12)
   - Schriften: IBM Plex Sans = romp, Space Grotesk = titels/wordmark,
     IBM Plex Mono = statuswaarden/code/venstertitels.
   - Signature: één 2px lime heerslijn markeert "actief/actie" (actieve tab,
     focus, actieve intake-stap, user-bubble-rand); al het andere is matte
     grafiet met stille 1px lijnen.

   PASS 2 (zelfkritiek)
   - Reflex "dark mode = inversie van het glas" vervangen: alle spectrum-/
     bio-/glasvariabelen worden vlakke panelen en 1px lijnen; inset-witglows
     en kleur-glows weg; schaduw alleen als zwarte elevatie op zwevers.
   - Reflex "lime overal" vervangen: lime alleen heerslijn, primaire knoppen
     (donkere tekst), focus, actieve indicatoren, kleine badges. Codefeed en
     gedachtestroom blijven ink/muted; functiekleuren alleen voor status.
   - Reflex "blobs donker laten doorlopen" vervangen: breathing/iridescent/
     aurora/blobMorph uit, iconen worden strakke 14px-vierkanten — BBYW is
     een grid, geen organisme. Radius 24/40 → 10/14; pills blijven pill
     (touch targets, geen layoutrisico).
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #0C0F12;
  --text: #F4F6F7;
  --text-dim: #8C959E;
  --line: rgba(244,246,247,.12);
  --line-soft: rgba(244,246,247,.07);
  --accent: #C8FF4D;
  --accent-bright: #D9FF7A;
  --accent-soft: rgba(200,255,77,.12);
  --accent-dk: #A8DC35;             /* hover op lime knoppen (os.css valt hierop terug) */
  --teal-50: rgba(200,255,77,.10);  /* was teal hover-vlak → subtiele lime wash */
  --glass: rgba(18,22,26,.94);
  --glass-strong: #12161A;
  --ok: #3DD9A4;
  --warn: #FF6A45;
  --radius: 10px;
  --radius-lg: 14px;
  --font-display: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --shadow-glass: 0 16px 40px rgba(0,0,0,.5);
  /* spectrale accenten → vlak grafiet: elke "regenboog-haarlijn" wordt een stille lijn */
  --mist-rose: #232B33;
  --ocean-mint: #232B33;
  --sky-blue: #232B33;
  --dream-violet: #232B33;
  --iri-spectrum: linear-gradient(#232B33, #232B33);
  --bio-surface: linear-gradient(#12161A, #12161A);
  /* BBYW-tokens + vangnet voor losse variabelen in os.css (worklog gebruikt --fg/--font/--mono) */
  --panel: #12161A;
  --raised: #1D242B;
  --deep: #0F1317;
  --signal: #FFC24B;
  --info: #6C9BFF;
  --fg: #F4F6F7;
  --font: var(--font-display);
  --mono: var(--font-mono);
}

/* ── basis ──────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-display);
  letter-spacing: 0;
  background: var(--bg);
  color: var(--text);
}
#shader-bg { display: none; }
/* aurora-kleurvelden uit (decoratieve pseudo's, z-index -1) */
body::before, body::after { background: none; animation: none; }
::selection { background: rgba(200,255,77,.28); color: var(--text); }
::-webkit-scrollbar-thumb { background: rgba(244,246,247,.18); }
::-webkit-scrollbar-thumb:hover { background: rgba(200,255,77,.45); }
button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* iridescent hover → stille lime haarlijn (signature, ingehouden) */
.iri::before {
  background: none;
  border: 1px solid rgba(200,255,77,.30);
  animation: none;
  box-shadow: none;
}
.bio-glass {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  box-shadow: none;
}

/* ── login ──────────────────────────────────────────────────────────── */
.login-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.login-card h1 { font-family: "Space Grotesk", var(--font-display); letter-spacing: .14em; }
.login-card input {
  background: var(--deep); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.login-card input:focus-visible {
  border-color: rgba(200,255,77,.55);
  box-shadow: none;
  background: var(--deep);
}
.login-card button { background: var(--accent); color: #0C0F12; border-radius: var(--radius); }
.login-card button:hover { filter: none; background: var(--accent-dk); }

/* ── menubar (dekt ook de latere HUD-refactor in os.css) ───────────── */
.menubar {
  background: rgba(18,22,26,.92);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: none;
  animation: none;
}
.menubar::after {
  background: var(--line);
  animation: none;
  opacity: 1;
}
.menubar-home {
  font-family: "Space Grotesk", var(--font-display);
  font-weight: 700; letter-spacing: .12em;
}
.menubar-home svg { color: var(--accent); }
.menubar-right {
  background: transparent;
  border: 0; box-shadow: none; animation: none;
}
.menubar-icon:hover { color: var(--accent); background: var(--teal-50); }
.menubar-icon .mi-badge { background: var(--accent); color: #0C0F12; box-shadow: 0 0 0 2px var(--panel); }

/* credits-pill + popover */
.topbar-credits.cr-low { color: var(--signal); }
.topbar-credits.cr-low:hover { background: rgba(255,194,75,.12); }
.topbar-credits.cr-zero:hover { background: rgba(255,106,69,.12); }
.topbar-credits.cr-unlimited { color: var(--info); }
.topbar-credits.cr-unlimited:hover { background: rgba(108,155,255,.12); }
.cp-bal.cp-unlimited .cp-bal-num, .cp-bal.cp-unlimited .cp-bal-eur { color: var(--info); }
.credits-pop {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: 0 20px 48px rgba(0,0,0,.55);
}
.credits-pop .cp-bal-num { color: var(--text); font-family: var(--font-mono); }
.credits-pop .cp-bal.cp-low .cp-bal-num { color: var(--signal); }
.credits-pop .cp-warn { background: rgba(255,106,69,.12); color: var(--warn); }
.credits-pop .cp-warn-amber { background: rgba(255,194,75,.12); color: var(--signal); }
.credits-pop .cp-pack { background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius); }
.credits-pop .cp-pack.cp-pack-sel { border-color: var(--accent); background: var(--accent-soft); }
.credits-pop .cp-pack-cr { color: var(--accent); }
.credits-pop .cp-ar-dot { background: var(--ok); box-shadow: none; }
.credits-pop .cp-ar-line b { color: var(--text); }
.credits-pop .cp-ar-actions button, .credits-pop .cp-ar-on-btn {
  background: var(--raised); border-color: var(--line); color: var(--text);
}
.credits-pop .cp-ar-on-btn { border-color: rgba(200,255,77,.4); color: var(--accent); }

/* model-selector popover (var-gedreven; alleen randjes) */
.model-pop { border-radius: var(--radius-lg); box-shadow: 0 20px 48px rgba(0,0,0,.55); }
.model-pop .mp-err { background: rgba(255,106,69,.12); }

/* ── homescreen: pager, dots ───────────────────────────────────────── */
.page-dot { background: rgba(244,246,247,.18); }
.page-dot.active {
  background: var(--accent);
  animation: none;
  box-shadow: none;
}

/* ── live-rail ─────────────────────────────────────────────────────── */
.live-rail-toggle {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: none;
  animation: none;
}
.live-rail-toggle:hover, .live-rail.open .live-rail-toggle {
  box-shadow: none; border-color: rgba(200,255,77,.35);
}
.live-rail-list {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  animation: none;
}
.live-link:hover { background: var(--raised); transform: none; }
.live-link-dot { box-shadow: none; }
.live-dot { box-shadow: none; }
.live-settings { background: var(--raised); border: 1px solid var(--line-soft); }
.live-settings:hover { background: var(--raised); color: var(--accent); transform: none; }
.live-mk { color: var(--signal); }

/* ── app-tegels: strak, mat, geen adem/blob/sheen ──────────────────── */
.app-tile .app-icon {
  animation: none !important;
  border-radius: 14px !important;
  background: var(--raised) !important;
  border: 1px solid var(--line);
  box-shadow: none;
}
.app-tile .app-icon::after { content: none; }   /* spectrale sheen uit */
.app-tile:hover .app-icon {
  background: #242C34 !important;
  border-color: rgba(200,255,77,.35);
  box-shadow: none;
}
.app-tile:focus-visible .app-icon {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: transparent;
}
.app-tile-name {
  background: none; border: none; box-shadow: none;
  text-shadow: none;
  color: var(--text);
}
.app-tile:hover .app-tile-name, .app-tile:focus-visible .app-tile-name {
  background: var(--raised);
  border-radius: 6px;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  animation: none;
}
.app-tile-desc { color: var(--text-dim); }
.shortcut-badge { background: var(--accent); color: #0C0F12; border: 2px solid var(--bg); box-shadow: none; }
.drag-proxy { filter: none; }

/* drop-zones */
#home.drop-highlight { outline: 2px dashed rgba(200,255,77,.5); background: rgba(200,255,77,.04); }
#home.drop-highlight::after {
  color: var(--accent); background: var(--panel);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.home.drop-highlight::after {
  background: var(--panel); border: 1px solid rgba(200,255,77,.4);
  color: var(--accent); font-family: var(--font-display);
}
.drop-highlight.home { outline-color: rgba(200,255,77,.5); }
.window.drop-highlight { box-shadow: 0 0 0 2px rgba(200,255,77,.55), 0 12px 40px rgba(0,0,0,.5) !important; }

/* ── vensters ──────────────────────────────────────────────────────── */
.window {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.window.focused { box-shadow: 0 28px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(244,246,247,.06); }
.window-bar {
  background: var(--deep);
  border-bottom: 1px solid var(--line-soft);
}
.window.maximized .window-bar { background: rgba(15,19,23,.92); }
.window.maximized .window-bar::after { background: var(--line); animation: none; opacity: 1; }
.win-peek-handle { background: rgba(244,246,247,.18); }
.window.maximized .win-peek-handle { background: rgba(244,246,247,.18); }
.window-title { color: var(--text-dim); }
.window-dot { box-shadow: none; }
.window-btns button {
  background: var(--raised); border: 1px solid var(--line-soft); color: var(--text-dim);
  box-shadow: none;
}
.window-btns button:hover { background: var(--teal-50); color: var(--accent); }
.window-btns button.close:hover { background: rgba(255,106,69,.14); color: var(--warn); }
.window-btns button.frontend.active { background: var(--teal-50); color: var(--accent); border-color: rgba(200,255,77,.35); }
.window-btns .debug-console-btn.has-errors { color: var(--warn); }
.window-btns .debug-console-btn.has-warns { color: var(--signal); }
.window-body { background: var(--bg); }
.window-body iframe { background: var(--bg); }

/* ── tabbar ────────────────────────────────────────────────────────── */
.tabbar { background: transparent; }
.tab {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.tab.active {
  background: var(--raised);
  color: var(--text);
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 0 var(--accent);   /* signature: lime heerslijn */
}
.tab:hover:not(.active) { background: var(--raised); color: var(--text); }
.tab-x:hover { color: var(--warn); background: rgba(255,106,69,.12); }

/* ── dock ──────────────────────────────────────────────────────────── */
.dock {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  animation: none;
}
.dock-item {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: none;
}
.dock-item::after { background: var(--accent); box-shadow: none; }
.dock-item:hover {
  transform: none;
  border-color: rgba(200,255,77,.4);
  box-shadow: none;
}

/* ── Mia assistant-paneel + builder ────────────────────────────────── */
.mia-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation-name: mia-panel-in;
}
.mia-panel-bar { background: var(--deep); border-bottom: 1px solid var(--line-soft); }
.mia-panel-title { font-family: "Space Grotesk", var(--font-display); }
.mia-panel-close { background: var(--raised); border: 1px solid var(--line-soft); }
.mia-panel-close:hover { color: var(--warn); border-color: rgba(255,106,69,.4); }
.mia-body select, .mia-body textarea {
  background: var(--deep); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mia-body select:focus-visible, .mia-body textarea:focus-visible {
  border-color: rgba(200,255,77,.55); box-shadow: none; background: var(--deep);
}
.builder-go { background: var(--accent); color: #0C0F12; border-radius: var(--radius); }
.builder-go:hover { filter: none; background: var(--accent-dk); }
.builder-delete { background: transparent; border: 1px solid rgba(255,106,69,.4); color: var(--warn); }
.builder-delete:hover { background: rgba(255,106,69,.10); }
.builder-live button { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.builder-live button:hover { border-color: rgba(200,255,77,.4); color: var(--accent); }
.builder-setup-open:hover { background: var(--accent-soft); }

/* ── AI live canvas (generate-overlay) ─────────────────────────────── */
.ai-canvas {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation-name: canvas-in;
}
.ai-canvas-bar { background: var(--deep); border-bottom: 1px solid var(--line-soft); }
.ai-canvas-title { font-family: "Space Grotesk", var(--font-display); }
.phase { background: var(--raised); border: 1px solid var(--line-soft); color: var(--text-dim); }
.phase.on { border-color: rgba(200,255,77,.45); color: var(--accent); background: var(--accent-soft); }
.phase.donephase { border-color: rgba(61,217,164,.4); color: var(--ok); }
.phase.warnphase { border-color: rgba(255,194,75,.45); color: var(--signal); background: rgba(255,194,75,.08); }
.ai-canvas-tabs button { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.ai-canvas-tabs button.active { border-color: rgba(200,255,77,.45); color: var(--accent); background: var(--accent-soft); }
.ai-canvas-min, .ai-canvas-stop, .ai-canvas-retry, .ai-canvas-preview-btn {
  background: var(--raised); border: 1px solid var(--line); color: var(--text-dim);
}
.ai-canvas-min:hover, .ai-canvas-preview-btn:hover { border-color: rgba(200,255,77,.45); color: var(--accent); background: var(--accent-soft); }
.ai-canvas-stop:hover { border-color: var(--warn); color: var(--warn); }
.ai-canvas-retry:hover { border-color: var(--ok); color: var(--ok); }
.ai-canvas-preview-btn.has-preview { border-color: rgba(61,217,164,.45); color: var(--ok); }
.ai-canvas-code { background: var(--deep); }
.ai-canvas-code pre { color: rgba(244,246,247,.78); font-family: var(--font-mono); }
.ai-canvas-right { background: var(--panel); }
.ai-canvas-foot { background: var(--deep); border-top: 1px solid var(--line-soft); }
.ai-canvas.mini { animation: none; background: var(--panel); border-color: var(--line); }
.ai-canvas-activity .act.warn { color: var(--signal); }

/* gedachtegang-paneel */
.think-brain-ring { border-color: rgba(200,255,77,.35); border-top-color: var(--accent); }
.think-sublabel { color: var(--text-dim); }
.think-rate, .think-meta { color: var(--text-dim); }
.think-collapse:hover { background: var(--accent-soft); }
.ai-canvas-think-stream { color: var(--text-dim); }
.think-frag { color: var(--text-dim); }
.think-frag.now { color: var(--text); }
.think-frag.question, .think-frag.decision, .think-frag.listitem { color: var(--text); }
.think-divider { color: var(--text-dim); }
.think-divider::after { background: var(--line); }
.think-summary { color: var(--text-dim); }
.think-summary-dot.q { background: var(--info); }
.think-summary-dot.d { background: var(--signal); }
.think-summary-dot.t { background: var(--accent); }
.think-frag.code, .think-frag.code code { color: rgba(244,246,247,.8); background: var(--deep); }
.think-frag.header { color: var(--text); }
.ai-canvas-think-stream::-webkit-scrollbar-thumb { background: rgba(244,246,247,.15); }

/* code-sectiemarkers + bestandstype-kleuren → brandpalet op donker */
.code-section-marker { color: var(--text-dim); background: var(--raised); }
.code-section-marker[data-section="META"]::before { background: var(--signal); }
.code-section-marker[data-section="FRONTEND"]::before { background: var(--ok); }
.code-section-marker[data-section="ADMIN"]::before { background: var(--info); }

/* recycle- & verify-banners: donker vlak, status via tekstkleur */
.ai-canvas-recycle-banner {
  background: var(--raised); border: 1px solid rgba(61,217,164,.3); color: var(--ok);
}
.ai-canvas-recycle-banner.done { background: var(--raised); color: var(--ok); }
.ai-canvas-recycle-banner .recycle-sub, .recycle-cap { color: var(--text-dim); }
.recycle-tool { background: var(--deep); color: var(--text-dim); }
.ai-canvas-verify-banner { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.ai-canvas-verify-banner.checking { background: var(--raised); color: var(--info); border-color: rgba(108,155,255,.3); }
.ai-canvas-verify-banner.issues { background: var(--raised); color: var(--signal); border-color: rgba(255,194,75,.3); }
.ai-canvas-verify-banner.fixing { background: var(--raised); color: var(--info); border-color: rgba(108,155,255,.3); }
.ai-canvas-verify-banner.passed, .ai-canvas-verify-banner.fixed { background: var(--raised); color: var(--ok); border-color: rgba(61,217,164,.3); }
.ai-canvas-verify-banner.partial, .ai-canvas-verify-banner.fix_failed, .ai-canvas-verify-banner.fix_error { background: var(--raised); color: var(--warn); border-color: rgba(255,106,69,.3); }
.ai-canvas-verify-banner .verify-sub { color: var(--text-dim); }

/* files-paneel */
.ai-canvas-files { background: var(--deep); border-color: var(--line-soft); }
.ai-canvas-files-head { color: var(--text-dim); }
.files-count { color: var(--text-dim); }
.files-empty { color: var(--text-dim); }
.files-folder { color: var(--text-dim); }
.files-file { color: var(--text); background: var(--raised); border: 1px solid var(--line-soft); }
.files-file:hover:not(.disabled) { background: #242C34; }
.files-file-name { color: var(--text); }
.files-file-meta { color: var(--text-dim); }
.file-icon.json { color: var(--signal); }
.file-icon.html { color: var(--ok); }
.file-icon.js { color: var(--info); }
.file-status.done { background: var(--ok); }
.file-status.server { background: var(--info); }
.files-viewer { background: var(--deep); }
.files-viewer-head { background: var(--panel); border-color: var(--line-soft); }
.files-viewer-name { color: var(--text); }
.files-viewer-close { color: var(--text-dim); }
.files-viewer-close:hover { background: rgba(244,246,247,.08); }
.files-viewer-code { color: rgba(244,246,247,.78); }

/* preview-overlay */
.ai-canvas-preview-overlay { background: var(--bg); }
.ai-canvas-preview-overlay iframe { background: var(--bg); }
.preview-overlay-bar { background: var(--deep); border-color: var(--line-soft); }
.preview-overlay-bar button { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.preview-overlay-bar button:hover { border-color: rgba(200,255,77,.45); color: var(--accent); }
.ai-canvas-preview-wait { color: var(--text-dim); background: var(--bg); }

/* resize handles */
.ai-canvas-resize-h:hover, .ai-canvas-resize-h.active,
.ai-canvas-resize-v:hover, .ai-canvas-resize-v.active { background: rgba(200,255,77,.18); }

/* ── overlays: intake & setup ──────────────────────────────────────── */
.overlay { background: rgba(0,0,0,.6); }
.overlay-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation-name: overlayIn;
}
.overlay-head h3 { font-family: "Space Grotesk", var(--font-display); font-weight: 700; }
.btn-ghost { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); border-color: var(--line); }
.iq-field input[type="text"], .iq-field textarea {
  background: var(--deep); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.iq-field input:focus, .iq-field textarea:focus { border-color: rgba(200,255,77,.55); box-shadow: none; }
.chip { background: var(--raised); border: 1px solid var(--line); color: var(--text); box-shadow: none; }
.chip:hover { border-color: rgba(200,255,77,.4); transform: none; box-shadow: none; }
.chip.sel { background: var(--accent); border-color: var(--accent); color: #0C0F12; animation: none; }
.chip.sel small { color: rgba(12,15,18,.7); }
.swatch { border: 2px solid rgba(244,246,247,.25); }
.swatch:hover { transform: none; }
.iq-sumrow { background: var(--raised); border: 1px solid var(--line-soft); }
.iq-note { background: var(--raised); color: var(--text-dim); }
.iq-react { background: var(--raised); border: 1px solid var(--line-soft); animation: none; }
.iq-react b { color: var(--text); }
.setup-item { background: var(--raised); border: 1px solid var(--line-soft); }
.setup-badge { background: var(--accent-soft); color: var(--accent); }
.setup-item.done .setup-badge { background: rgba(61,217,164,.14); color: var(--ok); }
.setup-field input {
  background: var(--deep); color: var(--text); border: 1px solid var(--line);
}
.setup-field input:focus { border-color: rgba(200,255,77,.55); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── quick-menu ────────────────────────────────────────────────────── */
.quick-menu {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,.6);
  animation-name: qm-in;
}
.qm-blob {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  box-shadow: none;
  animation: none;
  color: var(--accent);
}
.qm-title { font-family: "Space Grotesk", var(--font-display); }
.qm-item:hover { background: var(--accent-soft); }
.qm-item svg { color: var(--accent); }
.qm-item.danger svg, .qm-item.danger .qm-l { color: var(--warn); }
.qm-item.danger:hover { background: rgba(255,106,69,.10); }
.qm-sep { background: var(--line-soft); }
.qm-keep { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.qm-del-go { background: var(--warn); color: #0C0F12; }
.qm-del-go:hover:not(:disabled) { box-shadow: none; filter: brightness(1.08); }
.qm-input { background: var(--deep); border: 1.5px solid var(--line); color: var(--text); }
.qm-input:focus { border-color: rgba(200,255,77,.55); }
.qm-color-btn.active { border-color: var(--text); box-shadow: none; }
.qm-save { background: var(--accent) !important; color: #0C0F12 !important; border: 1px solid var(--accent) !important; }
.qm-save:hover { background: var(--accent-dk) !important; }
.qm-force-stop:hover { background: var(--warn); color: #0C0F12; }
.qm-job { background: var(--raised); border: 1px solid var(--line-soft); }
.qm-job:hover { background: #242C34; }
.qm-job.qm-open:hover { background: #242C34; border-color: rgba(200,255,77,.35); box-shadow: none; }
.qm-job-stop:hover { background: var(--warn); color: #0C0F12; }
.qm-job-retry:hover { background: var(--accent); color: #0C0F12; }
.qm-job-view:hover { background: var(--accent); color: #0C0F12; }
.topbar-queue-badge { background: var(--accent); color: #0C0F12; }

/* ── chat ──────────────────────────────────────────────────────────── */
.chat-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation-name: chatPanelIn;
}
.chat-sidebar { background: var(--deep); border-right: 1px solid var(--line-soft); }
.chat-sidebar-btn { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.chat-sidebar-btn:hover { color: var(--accent); border-color: rgba(200,255,77,.4); background: var(--accent-soft); }
.chat-sidebar-search input { background: var(--raised); color: var(--text); border: 1px solid var(--line); }
.chat-sidebar-search input:focus { border-color: rgba(200,255,77,.55); box-shadow: none; }
.chat-sidebar-list::-webkit-scrollbar-thumb { background: rgba(244,246,247,.15); }
.chat-sidebar-item:hover { background: var(--raised); border-color: var(--line-soft); }
.chat-sidebar-item.active { background: var(--accent-soft); border-color: rgba(200,255,77,.3); }
.chat-sidebar-item.active .chat-sidebar-item-title { color: var(--accent); }
.chat-sidebar-item.active .chat-sidebar-item-dot { box-shadow: none; }
.chat-panel-bar { background: var(--deep); border-bottom: 1px solid var(--line-soft); }
.chat-title { font-family: "Space Grotesk", var(--font-display); }
.chat-header-btn { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.chat-header-btn:hover, .chat-header-btn.active { color: var(--accent); border-color: rgba(200,255,77,.4); background: var(--accent-soft); }
.chat-panel-close { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.chat-panel-close:hover { color: var(--warn); border-color: rgba(255,106,69,.4); }
.chat-convos { background: var(--panel); border: 1px solid var(--line); }
.chat-convos-close-btn { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.chat-convos-close-btn:hover { color: var(--accent); border-color: rgba(200,255,77,.4); }
.chat-convos-list::-webkit-scrollbar-thumb { background: rgba(244,246,247,.15); }
.chat-convo-item:hover { background: var(--raised); border-color: var(--line-soft); }
.chat-convo-item.active { background: var(--accent-soft); border-color: rgba(200,255,77,.3); }
.chat-convo-item.active .chat-convo-title { color: var(--accent); }
.chat-convo-item.active .chat-convo-dot { box-shadow: none; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(244,246,247,.15); }
.chat-welcome-text strong { color: var(--text); }
.chat-suggestion { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.chat-suggestion:hover { border-color: rgba(200,255,77,.45); background: var(--accent-soft); color: var(--accent); }

/* bubbels: user = raised + lime haarlijn (signature), assistant = panel */
.chat-msg.user .chat-msg-bubble {
  background: var(--raised);
  color: var(--text);
  border: 1px solid rgba(200,255,77,.30);
  border-radius: 10px 10px 4px 10px;
  box-shadow: none;
}
.chat-msg.assistant .chat-msg-bubble {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 4px 10px 10px 10px;
  box-shadow: none;
  color: var(--text);
}
.chat-msg.assistant .chat-msg-bubble code { background: var(--deep); color: rgba(244,246,247,.85); }
.chat-msg.assistant .chat-msg-bubble pre { background: var(--deep); }
.chat-msg.assistant .chat-msg-bubble strong { color: var(--text); }
.chat-block-tool { background: var(--accent-soft); color: var(--text-dim); }
.chat-block-tool:hover { background: rgba(200,255,77,.18); }
.chat-block-tool-icon { background: var(--accent); }
.chat-block-tool-icon svg { color: #0C0F12; }
.chat-block-think { background: var(--deep); border: 1px solid var(--line-soft); }
.chat-block-think-head:hover { background: rgba(200,255,77,.06); }
.chat-block-think-body { color: var(--text-dim); }
.chat-code-copy { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.chat-code-copy:hover { color: var(--accent); border-color: rgba(200,255,77,.4); }
.chat-code-lang { color: var(--text-dim); }
.chat-tool-indicator { background: var(--deep); border-top: 1px solid var(--line-soft); color: var(--text-dim); }
.chat-input-area { background: var(--deep); }
.chat-input-area textarea {
  background: var(--raised); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.chat-input-area textarea:focus-visible { border-color: rgba(200,255,77,.55); box-shadow: none; background: var(--raised); }
.chat-send-btn { background: var(--accent); color: #0C0F12; box-shadow: none; }
.chat-send-btn:not(:disabled):hover { filter: none; background: var(--accent-dk); transform: none; }
.chat-msg-error { color: var(--warn); }
.chat-attach-btn { background: var(--raised); border: 1px solid var(--line); color: var(--text-dim); }
.chat-attach-btn:hover { color: var(--accent); border-color: rgba(200,255,77,.4); background: var(--accent-soft); }
.chat-attach-item { background: var(--raised); border: 1px solid var(--line-soft); }
.chat-attach-item.error { border-color: rgba(255,106,69,.35); }
.chat-msg-attachment { background: var(--accent-soft); }
.chat-msg-attachment:hover { background: rgba(200,255,77,.18); }
.chat-messages.drag-over::after {
  background: rgba(12,15,18,.92);
  border: 2px dashed rgba(200,255,77,.5);
  color: var(--accent);
  font-family: var(--font-display);
}
.chat-ctx-save-inner { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.chat-ctx-keep { background: var(--accent); color: #0C0F12; }
.chat-ctx-keep:hover { background: var(--accent-dk); }
.chat-ctx-close:hover { background: rgba(255,106,69,.12); color: var(--warn); }

/* losse restjes chat/overlay */
.overlay-close { background: var(--raised); border: 1px solid var(--line); }
.chat-msg-attachment-icon { background: var(--accent); color: #0C0F12; }
.qm-win-btn:hover { background: rgba(244,246,247,.08); }
/* mia-fab staat via de launcher op display:none, maar dek hem af voor het
   geval de losse FAB ooit terugkeert */
.mia-fab {
  border-radius: 50%;
  background: var(--accent); color: #0C0F12;
  border: none; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.mia-fab:hover { box-shadow: 0 14px 34px rgba(0,0,0,.6); background: var(--accent-bright); }

/* ── mia-ctx (element-contextmenu) ─────────────────────────────────── */
.mia-ctx { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 48px rgba(0,0,0,.6); }
.mia-ctx-btn:hover { background: var(--accent-soft); color: var(--accent); }
.mia-ctx-btn.danger:hover { background: rgba(255,106,69,.10); color: var(--warn); }
.mia-ctx-sep { background: var(--line-soft); }
.mia-ctx-mia-input textarea { background: var(--deep); color: var(--text); border: 1px solid var(--line); }
.mia-ctx-mia-input textarea:focus { border-color: rgba(200,255,77,.55); }
.mia-ctx-mia-input button { background: var(--accent); color: #0C0F12; }
.mia-ctx-mia-input button:hover { filter: none; background: var(--accent-dk); transform: none; }
.mia-ctx-highlight {
  outline: 2px solid rgba(200,255,77,.6) !important;
  box-shadow: none !important;
}

/* clipboard / undo / add-dialog / marker */
.clipboard-indicator { background: var(--panel); border: 1px solid rgba(200,255,77,.3); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.clipboard-indicator-dot { background: var(--accent); box-shadow: none; }
.clipboard-indicator-label { color: var(--accent); }
.clipboard-indicator-clear { background: rgba(244,246,247,.08); color: var(--text-dim); }
.clipboard-indicator-clear:hover { background: rgba(255,106,69,.12); color: var(--warn); }
[data-mia-pasted]::after { background: var(--accent); color: #0C0F12; }
.mia-undo-toast { background: var(--panel); border: 1px solid var(--line); color: var(--text); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.mia-undo-btn { background: var(--raised); border: 1px solid var(--line); color: var(--accent); }
.mia-undo-btn:hover { background: var(--accent); color: #0C0F12; }
.mia-add-dialog { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.mia-add-dialog textarea { background: var(--deep); color: var(--text); border: 1px solid var(--line); }
.mia-add-dialog textarea:focus { border-color: rgba(200,255,77,.55); }
.mia-add-cancel { background: var(--raised); color: var(--text-dim); }
.mia-add-cancel:hover { background: var(--raised); color: var(--text); }
.mia-add-confirm { background: var(--accent); color: #0C0F12; }
.mia-add-confirm:hover { filter: none; background: var(--accent-dk); }
.mia-insert-marker { background: linear-gradient(90deg, transparent, var(--accent), transparent); }

/* toast */
.mia-toast {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
}

/* ── MiaMedia prompt ───────────────────────────────────────────────── */
.mia-media-prompt { background: rgba(0,0,0,.6); }
.mia-media-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.mia-media-skip { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.mia-media-skip:hover { background: #242C34; }
.mia-media-go { background: var(--accent); color: #0C0F12; }

/* ── worklog-paneel ────────────────────────────────────────────────── */
.worklog-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 56px rgba(0,0,0,.6);
}
.wl-bar { border-bottom: 1px solid var(--line-soft); }
.wl-btn:hover { background: rgba(244,246,247,.08); }
.wl-date-label { background: rgba(18,22,26,.95); }
.wl-entry { background: rgba(244,246,247,.03); border: 1px solid var(--line-soft); }
.wl-entry:hover { background: rgba(244,246,247,.06); border-color: var(--line); }
.wl-entry-error { border-left: 3px solid rgba(255,106,69,.5); }
.wl-entry-success { border-left: 3px solid rgba(61,217,164,.4); }
.wl-entry-err { color: var(--warn); }
.wl-entry-actions button { background: var(--raised); border: 1px solid var(--line-soft); color: var(--accent); }
.wl-entry-actions button:hover { background: #242C34; }
.wl-entry-del:hover { color: var(--warn) !important; }
.wl-ask { border-top: 1px solid var(--line-soft); }
.wl-ask-input textarea { background: var(--deep); color: var(--text); border: 1px solid var(--line); }
.wl-ask-input button { background: var(--accent); color: #0C0F12; }
.wl-note-form { background: var(--raised); border: 1px solid var(--line-soft); }
.wl-note-input { background: var(--deep); color: var(--text); border: 1px solid var(--line); }
.wl-note-actions button { border: 1px solid var(--line); }
.wl-note-save { background: var(--accent); color: #0C0F12; border-color: var(--accent); }
.wl-resize::after { border-right-color: rgba(244,246,247,.2); border-bottom-color: rgba(244,246,247,.2); }

/* debug console (sidebar + los paneel) */
.debug-badge-error { background: var(--warn); color: #0C0F12; }
.debug-badge-warn { background: var(--signal); color: #0C0F12; }
.dbg-sidebar { background: rgba(15,19,23,.97); border-left: 1px solid var(--line); }
.dbg-sidebar-resize:hover, .dbg-sidebar-resize:active { background: rgba(200,255,77,.25); }
.dbg-detached-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.dbg-head { border-bottom: 1px solid var(--line-soft); }
.dbg-btn:hover { background: rgba(244,246,247,.08); }
.dbg-filters { border-bottom: 1px solid var(--line-soft); }
.dbg-filter-btn { background: var(--raised); border: 1px solid var(--line-soft); }
.dbg-filter-btn:hover { background: #242C34; }
.dbg-filter-btn.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(200,255,77,.3); }
.dbg-entry:hover { background: rgba(244,246,247,.04); }
.dbg-error { border-left-color: rgba(255,106,69,.5); background: rgba(255,106,69,.07); }
.dbg-warn { border-left-color: rgba(255,194,75,.45); background: rgba(255,194,75,.06); }
.dbg-info { border-left-color: rgba(108,155,255,.35); background: rgba(108,155,255,.06); }
.dbg-dot-error { background: var(--warn); box-shadow: none; }
.dbg-dot-warn { background: var(--signal); box-shadow: none; }
.dbg-dot-info { background: var(--info); }
.dbg-error .dbg-entry-msg { color: var(--warn); }
.dbg-warn .dbg-entry-msg { color: var(--signal); }
.dbg-info .dbg-entry-msg { color: var(--info); }
.dbg-entry-stack { background: var(--deep); }
.dbg-entry-fix { background: var(--raised); border: 1px solid var(--line); }
.dbg-entry-fix:hover { background: #242C34; }
.dbg-fix-all { background: var(--raised); border: 1px solid var(--line); }
.dbg-fix-all:hover { background: #242C34; }
.dbg-actions-bar { border-top: 1px solid var(--line-soft); }

/* ── app-instellingen modal ────────────────────────────────────────── */
.aps-overlay { background: rgba(0,0,0,.6); }
.aps {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation: none;
}
.aps-dot { box-shadow: none; }
.aps-title { font-family: "Space Grotesk", var(--font-display); }
.aps-close { background: var(--raised); border: 1px solid var(--line-soft); color: var(--text-dim); }
.aps-close:hover { background: #242C34; color: var(--text); }
.aps-btn { background: var(--accent); color: #0C0F12; }
.aps-btn.ghost { background: var(--raised); color: var(--text-dim); border: 1px solid var(--line); }
.aps-btn.ghost.danger { color: var(--warn); }
.aps-btn.ghost.danger:hover { background: rgba(255,106,69,.12); color: var(--warn); filter: none; }
.aps-err { color: var(--warn); }

/* ── WhatsApp-banner + PWA ─────────────────────────────────────────── */
.wa-banner {
  background: var(--panel);
  border: 1px solid rgba(61,217,164,.35);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
}
.wa-banner-ico { color: var(--ok); }
.wa-banner-join { background: var(--ok); color: #0C0F12; }
.pwa-update, .pwa-install {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 16px 42px rgba(0,0,0,.55);
}
.pwa-install-go { background: var(--accent); color: #0C0F12; }
.pwa-install-go:hover { background: var(--accent-dk); }
.pwa-install-x:hover { background: rgba(244,246,247,.08); }
.pwa-push-ask { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 52px rgba(0,0,0,.55); }
.pwa-push-icon { background: var(--accent); color: #0C0F12; }
#pwa-push-yes { background: var(--accent); color: #0C0F12; }
#pwa-push-yes:hover { background: var(--accent-dk); }
#pwa-push-no { background: var(--raised); color: var(--text-dim); }
#pwa-push-no:hover { background: #242C34; }
.pwa-ios-sheet { background: rgba(0,0,0,.6); }
.pwa-ios-card button { background: var(--accent); color: #0C0F12; }

/* ── mobiel control-center ─────────────────────────────────────────── */
.cc-sheet { background: rgba(0,0,0,.6); }
.cc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  box-shadow: 0 -18px 60px rgba(0,0,0,.6);
  animation-name: pwaSheetUp;
}
.cc-grab { background: rgba(244,246,247,.22); }
.cc-title { font-family: "Space Grotesk", var(--font-display); }
.cc-stat { background: var(--raised); border: 1px solid var(--line-soft); box-shadow: none; }
.cc-stat-val { color: var(--accent); font-family: var(--font-mono); }
.cc-chip-dot { box-shadow: none; }
.cc-chip.warn .cc-chip-dot { box-shadow: none; }
.cc-actions button { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.cc-actions button:active { background: #242C34; }
.cc-actions .cc-logout { border-color: rgba(255,106,69,.4); color: var(--warn); }

/* ── taalselector ──────────────────────────────────────────────────── */
.lang-sw button.active { background: var(--accent); color: #0C0F12; }

/* ── Mia launcher (FAB + menu) ─────────────────────────────────────── */
.mia-launcher-fab {
  border-radius: 50%;
  background: var(--accent);
  color: #0C0F12;
  border: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: none;
}
.mia-launcher-fab:hover { transform: none; box-shadow: 0 14px 34px rgba(0,0,0,.6); background: var(--accent-bright); }
.mia-launcher-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.mia-launcher-item:hover { transform: none; box-shadow: 0 12px 32px rgba(0,0,0,.5); border-color: rgba(200,255,77,.35); }
.mia-li-ic { background: var(--raised); color: var(--accent); box-shadow: none; border-radius: 10px; }

/* ── Mia Connect paneel ────────────────────────────────────────────── */
.connect-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(0,0,0,.6);
  color: var(--text);
}
.connect-panel .cn-title { color: var(--text); font-family: "Space Grotesk", var(--font-display); font-weight: 600; }
.connect-panel .cn-back, .connect-panel .cn-x { background: var(--raised); color: var(--text); }
.connect-panel .cn-back:hover, .connect-panel .cn-x:hover { background: #242C34; }
.connect-panel .cn-lead { color: var(--text-dim); }
.connect-panel .cn-foot, .connect-panel .cn-sub, .connect-panel .cn-ro { color: var(--text-dim); }
.connect-panel .cn-id { background: var(--raised); }
.connect-panel .cn-id-label, .connect-panel .cn-block-t { color: var(--text-dim); }
.connect-panel .cn-handle { color: var(--accent); font-family: var(--font-mono); }
.connect-panel .cn-ghost { background: var(--raised); border: 1px solid var(--line); color: var(--text); }
.connect-panel .cn-ghost:hover { background: #242C34; }
.connect-panel .cn-item:hover { background: var(--raised); }
.connect-panel .cn-av { background: var(--raised); color: var(--accent); }
.connect-panel .cn-chev { color: var(--text-dim); }
.connect-panel .cn-empty { border: 1px dashed var(--line); }
.connect-panel .cn-empty b { color: var(--text); }
.connect-panel .cn-empty p { color: var(--text-dim); }
.connect-panel .cn-btn { background: var(--accent); color: #0C0F12; }
.connect-panel .cn-btn:hover { background: var(--accent-dk); }
.connect-panel .cn-btn-sec { background: var(--raised); color: var(--text); }
.connect-panel .cn-btn-sec:hover { background: #242C34; }
.connect-panel input, .connect-panel select, .connect-panel textarea {
  background: var(--deep); border: 1px solid var(--line); color: var(--text);
}
.connect-panel input:focus, .connect-panel select:focus, .connect-panel textarea:focus {
  outline: 2px solid rgba(200,255,77,.5); outline-offset: 1px;
}
.connect-panel .cn-at-sign { color: var(--text-dim); }
.connect-panel .cn-code-box { background: var(--raised); }
.connect-panel .cn-code { color: var(--accent); font-family: var(--font-mono); }
.connect-panel .cn-steps { color: var(--text-dim); }
.connect-panel .cn-pill.ok { background: rgba(61,217,164,.14); color: var(--ok); }
.connect-panel .cn-pill.off { background: rgba(140,149,158,.16); color: var(--text-dim); }
.connect-panel .cn-block { border-top: 1px solid var(--line-soft); }
.connect-panel .cn-sw:hover { background: var(--raised); }
.connect-panel .cn-sw-txt span { color: var(--text-dim); }
.connect-panel .cn-knob { background: rgba(244,246,247,.18); }
.connect-panel .cn-sw[aria-pressed="true"] .cn-knob { background: var(--accent); }
.connect-panel .cn-danger { background: transparent; border: 1px solid rgba(255,106,69,.4); color: var(--warn); }
.connect-panel .cn-danger:hover { background: rgba(255,106,69,.10); }
.connect-panel .cn-msg { color: var(--ok); }
.connect-panel .cn-msg.bad { color: var(--warn); }
.connect-panel .cb-item { border-left: 2px solid var(--line); }
.connect-panel .cb-item.running { border-left-color: var(--accent); }
.connect-panel .cb-item.done { border-left-color: rgba(61,217,164,.5); }
.connect-panel .cb-item.failed { border-left-color: rgba(255,106,69,.5); }
.connect-panel .cb-item-res { color: var(--text-dim); }
.connect-panel .cb-item-res.bad { color: var(--warn); }
.connect-panel .cb-item-upd { border-left: 2px solid var(--line-soft); }
.connect-panel .cb-preview { border: 1px solid var(--line); background: var(--bg); }
.connect-panel .cb-preview #cb-empty { background: var(--raised); }
.connect-panel #cb-frame { background: var(--bg); }

/* ── mobiel + touch: donkere tegenhangers van de witte :active-states ─ */
@media (hover: none) {
  .app-tile:active .app-icon {
    background: #242C34 !important;
    box-shadow: none;
  }
  .dock-item:active { transform: none; border-color: rgba(200,255,77,.4); }
  .tab:active:not(.active) { background: var(--raised); color: var(--text); }
  .live-link:active { background: var(--raised); }
}
@media (max-width: 759px) {
  .chat-panel { background: var(--panel); }
  .ai-canvas.preview-open .ai-canvas-preview-overlay { background: var(--bg); }
  .ai-canvas.preview-open .preview-overlay-bar button {
    background: rgba(18,22,26,.88);
    border-color: var(--line);
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
  }
  .ai-canvas:not(.mini) .ai-canvas-phases .phase.warnphase { background: var(--signal); }
}

/* ── rustig: overgebleven decoratieve loops uit (entrances blijven) ── */
/* chat-fab op mobiel had blobMorph + iridescentShift; launcher verbergt hem,
   maar voor de zekerheid ook hier stilgezet. */
.chat-fab {
  animation: none; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.chat-fab:hover { box-shadow: 0 14px 34px rgba(0,0,0,.6); border-color: rgba(200,255,77,.4); }
@media (max-width: 759px) { .chat-fab { animation: none; border-radius: 50%; } }
@media (prefers-reduced-motion: reduce) {
  .mia-insert-marker, .clipboard-indicator-dot, .chat-msg-bubble.streaming::after {
    animation: none;
  }
}

/* White-label: het Mia-M-merkteken hoort niet in een BBYW-omgeving.
   De wordmark "BBYW OS" hieronder ís het merk. */
.login-logo { display: none; }