/* Vera OS — void glass · light biomorphic (mockup juni 2026) */
:root {
  --bg: #eef3f4;
  --text: #191c1c;
  --text-dim: #5f6b6b;
  --line: rgba(191, 201, 200, .5);
  --line-soft: rgba(191, 201, 200, .3);
  --accent: #006970;          /* deep teal */
  --accent-bright: #00bfc9;
  --accent-soft: rgba(0, 106, 102, .08);
  --teal-50: #e6f4f4;
  --glass: rgba(255, 255, 255, .8);
  --glass-strong: rgba(255, 255, 255, .9);
  --ok: #0f9d77;
  --warn: #d4564e;
  --radius: 24px;
  --radius-lg: 40px;
  --font-display: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --shadow-glass: 0 30px 60px rgba(0,0,0,.05), 0 0 40px rgba(0,106,102,.03), inset 0 0 20px rgba(255,255,255,.9);
  /* spectral accents — organic breathing edition */
  --mist-rose: #FFD2E6;
  --ocean-mint: #D2FFE6;
  --sky-blue: #D2E6FF;
  --dream-violet: #E6D2FF;
  --iri-spectrum: linear-gradient(120deg, var(--mist-rose), var(--ocean-mint), var(--sky-blue), var(--dream-violet), var(--mist-rose));
  --bio-surface: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(240,250,255,.6) 100%);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-display);
  letter-spacing: .02em;
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(125, 244, 255, .18), transparent 60%),
    radial-gradient(900px 650px at -10% 110%, rgba(255, 210, 230, .22), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(210, 255, 230, .14), transparent 60%),
    var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* ---------- shader background ---------- */
#shader-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; display: block; pointer-events: none;
}
.mono { font-family: var(--font-mono); letter-spacing: .04em; }
button { font-family: inherit; cursor: pointer; }
svg { display: block; }

/* ---------- iridescent hover (mockup signature) ---------- */
@keyframes iridescentShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.iri { position: relative; z-index: 1; }
.iri::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,210,230,.35), rgba(210,255,230,.35), rgba(210,230,255,.35), rgba(230,210,255,.35));
  background-size: 200% 200%;
  z-index: -1; opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.16,1,.3,1);
  animation: iridescentShift 5s ease infinite;
}
.iri:hover::before, .iri.active::before { opacity: 1; }

/* iridescent gradient border: bio-glass surface in padding-box, spectrum in border-box */
@keyframes iriBorder {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}
/* organic blob morph zonder transform — combineerbaar met hover-scale */
@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%; }
}

/* glass building blocks */
.bio-glass {
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(240,250,255,.5) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 32px rgba(31,38,135,.05), inset 0 0 15px rgba(255,255,255,.8);
}

/* ---------- login ---------- */
.login {
  position: fixed; inset: 0; display: grid; place-items: center;
  min-height: 100dvh; padding: 24px; z-index: 100;
}
.login-card {
  width: min(380px, 100%); text-align: center;
  padding: 48px 34px;
  background: var(--glass); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
.login-logo { width: 56px; margin: 0 auto 18px; }
.login-card h1 {
  font-weight: 800; font-size: 26px; letter-spacing: .2em; text-transform: uppercase;
}
.login-sub { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; margin: 8px 0 28px; }
.login-card input {
  width: 100%; padding: 14px 20px; font-size: 16px; font-family: inherit;
  background: var(--glass-strong); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.login-card input:focus-visible {
  border-color: rgba(0,106,102,.4);
  box-shadow: 0 0 20px rgba(0,106,102,.08);
  background: #fff;
}
.login-card button {
  width: 100%; margin-top: 12px; padding: 14px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  transition: filter .2s, transform .1s;
}
.login-card button:hover { filter: brightness(1.15); }
.login-card button:active { transform: translateY(1px); }
.login-err { color: var(--warn); font-size: 13px; margin-top: 12px; }

/* ---------- shell layout ---------- */
.shell { display: flex; flex-direction: column; height: 100dvh; }

.menubar {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 18px;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.3));
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border-bottom: none;
  flex-shrink: 0; z-index: 50;
}
/* spectrale haarlijn i.p.v. harde rand */
.menubar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 2%, var(--mist-rose), var(--ocean-mint), var(--sky-blue), var(--dream-violet), transparent 98%);
  background-size: 300% 100%;
  opacity: .55; pointer-events: none;
  animation: iridescentShift 12s ease infinite;
}
.menubar-home {
  display: flex; align-items: center; gap: 9px;
  background: none; border: none; color: var(--text);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .2em;
  padding: 7px 14px; border-radius: 999px; min-height: 36px;
  transition: color .25s;
}
.menubar-home:hover { color: var(--accent); }
.menubar-home svg { width: 17px; height: 17px; color: var(--accent); }
.menubar-app {
  color: var(--text-dim); font-size: 11px; flex: 1; text-align: center;
  text-transform: uppercase; letter-spacing: .12em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menubar-right {
  display: flex; align-items: center; gap: 14px; margin-left: auto;
  border: 1px solid transparent;
  background:
    var(--bio-surface) padding-box,
    linear-gradient(120deg, rgba(255,210,230,.7), rgba(210,255,230,.7), rgba(210,230,255,.7), rgba(230,210,255,.7)) border-box;
  background-size: 100% 100%, 300% 300%;
  border-radius: 999px; padding: 6px 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 10px rgba(31,38,135,.05), inset 0 0 10px rgba(255,255,255,.7);
  animation: iriBorder 10s ease infinite;
}
.menubar-stat {
  font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em;
  white-space: nowrap; transition: color .4s;
}
.menubar-stat.warn { color: var(--warn); }
.menubar-clock { font-size: 12px; color: var(--text); }
.menubar-icon {
  background: none; border: none; color: var(--text-dim);
  padding: 5px; border-radius: 999px; min-width: 30px; min-height: 30px;
  transition: color .25s, background .25s;
}
.menubar-icon:hover { color: var(--accent); background: var(--teal-50); }
.menubar-icon svg { width: 15px; height: 15px; margin: auto; }

/* ---------- F3: Vera Credits pill + popover ---------- */
.topbar-credits {
  display: inline-flex; align-items: center; gap: 5px; width: auto;
  padding: 4px 10px 4px 8px; color: var(--accent);
}
.topbar-credits .cr-amt { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.topbar-credits.cr-low { color: #c77700; }
.topbar-credits.cr-low:hover { background: rgba(199,119,0,.1); }
.topbar-credits.cr-zero { color: var(--warn); }
.topbar-credits.cr-zero:hover { background: rgba(212,86,78,.1); }
.topbar-credits.cr-flash { animation: cr-flash 0.5s ease 0s 4 alternate; }
@keyframes cr-flash { from { background: transparent; } to { background: rgba(212,86,78,.22); } }
.topbar-credits.cr-unlimited { color: #7c3aed; }
.topbar-credits.cr-unlimited:hover { background: rgba(124,58,237,.1); }
.topbar-credits.cr-unlimited .cr-amt { font-size: 15px; line-height: 1; }
.cp-bal.cp-unlimited .cp-bal-num { color: #7c3aed; }
.cp-bal.cp-unlimited .cp-bal-eur { color: #7c3aed; }
/* Heel smalle telefoons: ook de klok weglaten zodat de toolbar zeker past. */
@media (max-width: 430px) { .menubar-clock { display: none; } }

.credits-pop {
  position: fixed; z-index: 9000; width: 248px;
  background: var(--glass-strong); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.16); padding: 14px; color: var(--text);
  font-size: 13px;
}
.credits-pop .cp-head { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--text-dim); margin-bottom: 10px; }
.credits-pop .cp-muted { color: var(--text-dim); }
.credits-pop .cp-bal { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.credits-pop .cp-bal-num { font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.credits-pop .cp-bal-eur { font-size: 11px; color: var(--text-dim); }
.credits-pop .cp-bal.cp-low .cp-bal-num { color: #c77700; }
.credits-pop .cp-bal.cp-zero .cp-bal-num { color: var(--warn); }
.credits-pop .cp-rows { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credits-pop .cp-row { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 12px; }
.credits-pop .cp-row .mono { color: var(--text); }
.credits-pop .cp-warn { margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 12px; background: rgba(212,86,78,.12); color: var(--warn); }
.credits-pop .cp-warn-amber { background: rgba(199,119,0,.12); color: #a85f00; }
.credits-pop .cp-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); margin: 12px 0 8px; }
.credits-pop .cp-packs { display: flex; gap: 6px; }
.credits-pop .cp-pack {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--teal-50); border: 1px solid rgba(0,105,112,.15); border-radius: 12px;
  padding: 8px 4px; cursor: pointer; transition: border-color .2s, background .2s;
}
.credits-pop .cp-pack:hover { border-color: var(--accent); }
.credits-pop .cp-pack.cp-pack-sel { border-color: var(--accent); background: var(--accent-soft); }
.credits-pop .cp-pack-cr { font-size: 13px; font-weight: 600; color: var(--accent); }
.credits-pop .cp-pack-eur { font-size: 11px; color: var(--text-dim); }
.credits-pop .cp-note { margin-top: 10px; font-size: 10.5px; color: var(--text-dim); line-height: 1.4; }
/* F6: automatisch bijladen (PAYG) */
.credits-pop .cp-ar {
  background: var(--teal-50); border: 1px solid rgba(0,105,112,.15); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.credits-pop .cp-ar-line { font-size: 11.5px; color: var(--text); line-height: 1.45; display: flex; gap: 6px; }
.credits-pop .cp-ar-line b { color: var(--accent); }
.credits-pop .cp-ar-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #1a9b53; box-shadow: 0 0 0 3px rgba(26,155,83,.15); }
.credits-pop .cp-ar-card { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.credits-pop .cp-ar-err { font-size: 10.5px; color: var(--warn, #c0392b); }
.credits-pop .cp-ar-actions { display: flex; gap: 6px; }
.credits-pop .cp-ar-actions button, .credits-pop .cp-ar-on-btn {
  font: inherit; font-size: 11px; cursor: pointer; border-radius: 9px; padding: 7px 10px;
  border: 1px solid rgba(0,105,112,.2); background: var(--glass-strong, #fff); color: var(--text); transition: border-color .2s, background .2s;
}
.credits-pop .cp-ar-on-btn { width: 100%; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.credits-pop .cp-ar-on-btn:hover, .credits-pop .cp-ar-change:hover { border-color: var(--accent); }
.credits-pop .cp-ar-off:hover { border-color: var(--warn, #c0392b); color: var(--warn, #c0392b); }
.credits-pop .cp-ar-on-btn:disabled { opacity: .6; cursor: default; }

.desktop { position: relative; flex: 1; overflow: hidden; }

/* ---------- homescreen: fullscreen, geen scroll, swipebare pagina's ---------- */
.home {
  height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px clamp(18px, 5vw, 64px) 96px;
  position: relative;
}
.pager {
  flex: 1; min-height: 0; overflow: hidden;
  position: relative;
  margin: 0 calc(-1 * clamp(18px, 5vw, 64px));
  user-select: none; -webkit-user-select: none;
}
.pages {
  display: flex; height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pages::-webkit-scrollbar { display: none; }
.pages.no-anim { scroll-behavior: auto; }
.pages.no-scroll { overflow: hidden !important; scroll-snap-type: none !important; }
.page {
  flex: 0 0 100%; height: 100%;
  scroll-snap-align: start;
  display: grid; align-content: start; justify-content: center;
  gap: 26px; padding: 18px clamp(18px, 5vw, 64px) 8px;
  overflow: hidden;
}
.page-dots {
  display: flex; justify-content: center; gap: 8px;
  padding-top: 14px; flex-shrink: 0;
}
.page-dots:empty { display: none; }
.page-dot {
  width: 8px; height: 8px; border-radius: 999px;
  border: none; padding: 0;
  background: rgba(0, 106, 102, .18);
  transition: width .45s cubic-bezier(.16,1,.3,1), background .45s, box-shadow .45s;
}
.page-dot.active {
  width: 26px;
  background: linear-gradient(120deg, var(--accent), var(--accent-bright), var(--accent));
  background-size: 200% 100%;
  animation: iridescentShift 6s ease infinite;
  box-shadow: 0 0 12px rgba(0,191,201,.35);
}
/* ---------- live-rail: uitklapbare zijbalk links met live links ---------- */
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: .65; }
}
.live-rail {
  position: fixed; left: 12px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px);
}
.live-rail-toggle {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 9px; min-width: 34px;
  border: 1px solid transparent; border-radius: 999px;
  color: var(--text);
  background:
    var(--bio-surface) padding-box,
    linear-gradient(160deg, rgba(255,210,230,.75), rgba(210,255,230,.75), rgba(210,230,255,.75), rgba(230,210,255,.75)) border-box;
  background-size: 100% 100%, 300% 300%;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 12px rgba(31,38,135,.06), inset 0 0 10px rgba(255,255,255,.7);
  animation: iriBorder 10s ease infinite;
  transition: box-shadow .45s, transform .45s cubic-bezier(.16,1,.3,1);
}
.live-rail-toggle:hover, .live-rail.open .live-rail-toggle {
  box-shadow: 0 4px 18px rgba(0,106,102,.12), inset 0 0 14px rgba(255,255,255,.85);
  transform: scale(1.04);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent-bright);
  box-shadow: 0 0 10px rgba(0,191,201,.6);
  animation: livePulse 3s ease-in-out infinite;
}
.live-count { font-size: 11px; font-weight: 600; }
.live-rail-label {
  writing-mode: vertical-rl; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--text-dim);
}
.live-rail-list {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 0; max-height: 70vh; padding: 0; opacity: 0;
  overflow: hidden; pointer-events: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 24px;
  background:
    var(--bio-surface) padding-box,
    linear-gradient(120deg, rgba(255,210,230,.7), rgba(210,255,230,.7), rgba(210,230,255,.7), rgba(230,210,255,.7)) border-box;
  background-size: 100% 100%, 300% 300%;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(31,38,135,.08), inset 0 0 14px rgba(255,255,255,.7);
  animation: iriBorder 12s ease infinite;
  transition: max-width .55s cubic-bezier(.16,1,.3,1), padding .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.live-rail.open .live-rail-list {
  max-width: min(320px, calc(100vw - 90px));
  padding: 12px; opacity: 1; pointer-events: auto;
  overflow-y: auto;
}
.live-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 16px;
  text-decoration: none; color: var(--text);
  transition: background .35s, transform .35s;
}
.live-link:hover { background: rgba(255,255,255,.75); transform: translateX(2px); }
.live-link-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 0 8px rgba(0,191,201,.4); }
.live-link-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.live-link-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.live-link-url { font-size: 10px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }

/* ---------- app grid: breathing biomorphic icons ---------- */
@keyframes breathing {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1); }
  50% { border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%; transform: scale(1.02); }
}
/* twee extra ademritmes — samen met variërende duur/delay ademt elk icoon anders */
@keyframes breathingB {
  0%, 100% { border-radius: 44% 56% 64% 36% / 52% 40% 60% 48%; transform: scale(1.012); }
  50% { border-radius: 62% 38% 34% 66% / 38% 64% 36% 62%; transform: scale(1); }
}
@keyframes breathingC {
  0%, 100% { border-radius: 66% 34% 48% 52% / 46% 62% 38% 54%; transform: scale(1); }
  33% { border-radius: 42% 58% 38% 62% / 60% 36% 64% 40%; transform: scale(1.018); }
  66% { border-radius: 54% 46% 60% 40% / 38% 56% 44% 62%; transform: scale(1.008); }
}
@keyframes entranceUp { to { opacity: 1; transform: translateY(0); } }

.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 6px; min-height: 64px;
  background: none; border: none; color: var(--text); text-align: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* drag & drop herordenen */
.app-tile.drag-ghost { opacity: .25; }
.app-tile.drag-ghost .app-icon { animation: none !important; }
.drag-proxy {
  position: fixed; z-index: 999; pointer-events: none;
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 16px 30px rgba(0,106,102,.25));
  opacity: .92;
}
body.reordering .app-tile:not(.drag-ghost) .app-icon { animation-duration: 3s; }
.app-tile .app-icon {
  width: 80px; height: 80px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(240,250,255,.5) 100%) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 32px rgba(31,38,135,.05), inset 0 0 15px rgba(255,255,255,.8);
  animation: breathing 8s ease-in-out infinite;
  transition: box-shadow .4s, background .4s, transform .4s;
}
/* desync: per positie een ander ritme, andere duur en een negatieve delay
   zodat geen twee iconen tegelijk of identiek bewegen */
.app-tile:nth-child(3n+2) .app-icon { animation-name: breathingB; animation-duration: 9.4s; }
.app-tile:nth-child(3n)   .app-icon { animation-name: breathingC; animation-duration: 11.2s; }
.app-tile:nth-child(2n)   .app-icon { animation-delay: -3.1s; }
.app-tile:nth-child(3n+1) .app-icon { animation-delay: -5.6s; }
.app-tile:nth-child(5n+2) .app-icon { animation-delay: -1.7s; animation-duration: 7.3s; }
.app-tile:nth-child(7n+4) .app-icon { animation-delay: -6.9s; animation-duration: 12.6s; }

.app-tile:hover .app-icon {
  background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(220,255,250,.7) 100%) !important;
  box-shadow: 0 8px 32px rgba(0,106,102,.1), inset 0 0 20px rgba(255,255,255,.9);
  transform: scale(1.08);
}
.app-tile:focus-visible { outline: none; }
.app-tile:focus-visible .app-icon { box-shadow: 0 0 0 2px var(--accent-bright), inset 0 0 15px rgba(255,255,255,.8); }
.app-tile:active .app-icon { transform: scale(.96); }
.app-icon svg { width: 26px; height: 26px; }
.app-tile-name {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text);
  display: inline-block; max-width: 132px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
  border: 1px solid transparent;
  background:
    var(--bio-surface) padding-box,
    linear-gradient(120deg, rgba(255,255,255,.85), rgba(255,255,255,.85)) border-box;
  background-size: 100% 100%, 300% 300%;
  padding: 4px 12px; border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 4px rgba(31,38,135,.05), inset 0 0 6px rgba(255,255,255,.6);
  transition: color .35s, background .35s, box-shadow .35s;
}
.app-tile:hover .app-tile-name, .app-tile:focus-visible .app-tile-name {
  color: var(--accent);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(240,250,255,.8) 100%) padding-box,
    linear-gradient(120deg, var(--mist-rose), var(--ocean-mint), var(--sky-blue), var(--dream-violet)) border-box;
  background-size: 100% 100%, 300% 300%;
  box-shadow: 0 3px 12px rgba(0,106,102,.08), inset 0 0 8px rgba(255,255,255,.85);
  animation: iriBorder 6s ease infinite;
}
.app-tile-desc { font-size: 10px; color: var(--text-dim); margin-top: 4px; display: block; max-width: 150px; }

/* stagger entrance */
@media (prefers-reduced-motion: no-preference) {
  .app-tile { opacity: 0; transform: translateY(10px); animation: entranceUp .6s cubic-bezier(.16,1,.3,1) forwards; }
  .app-tile:nth-child(1) { animation-delay: 100ms; }
  .app-tile:nth-child(2) { animation-delay: 175ms; }
  .app-tile:nth-child(3) { animation-delay: 250ms; }
  .app-tile:nth-child(4) { animation-delay: 325ms; }
  .app-tile:nth-child(5) { animation-delay: 400ms; }
  .app-tile:nth-child(n+6) { animation-delay: 475ms; }
}

/* ---------- windows (desktop): floating glass ---------- */
.window {
  position: absolute; display: flex; flex-direction: column;
  min-width: 320px; min-height: 240px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-glass);
}
.window.focused { box-shadow: 0 40px 80px rgba(0,0,0,.1), 0 0 50px rgba(0,106,102,.05), inset 0 0 20px rgba(255,255,255,.9); }
/* ---------- immersive maximize: echte fullscreen apps ---------- */
.window.maximized {
  position: fixed !important; inset: 0 !important;
  width: auto !important; height: auto !important;
  border-radius: 0; border: none; z-index: 500;
}
.window.maximized .window-resize { display: none; }
/* body vult de volledige hoogte; de balk overlapt i.p.v. ruimte in te nemen */
.window.maximized .window-body { position: absolute; inset: 0; }
/* window-bar wordt een zelf-verbergende overlay bovenin - in de Ademende huisstijl */
.window.maximized .window-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  height: 46px; cursor: default;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.42));
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border-bottom: none;
  transform: translateY(-110%);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
/* spectrale haarlijn i.p.v. harde rand + box-shadow (zelfde als de menubar) */
.window.maximized .window-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 2%, var(--mist-rose), var(--ocean-mint), var(--sky-blue), var(--dream-violet), transparent 98%);
  background-size: 300% 100%; opacity: .55; pointer-events: none;
  animation: iridescentShift 12s ease infinite;
}
.window.maximized.peek .window-bar { transform: translateY(0); }
/* dunne hover-zone om de balk terug te halen */
.win-peek-zone { display: none; }
.window.maximized .win-peek-zone {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 7;
}
/* altijd-zichtbaar grijpvlakje als ontdekkingshulp */
.win-peek-handle { display: none; }
.window.maximized .win-peek-handle {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 7;
  height: 18px; padding: 0 16px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 0 0 11px 11px; box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: pointer; opacity: .55; transition: opacity .25s, height .25s;
}
.window.maximized .win-peek-handle::before {
  content: ''; width: 34px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--mist-rose), var(--ocean-mint), var(--sky-blue));
}
.window.maximized .win-peek-handle:hover { opacity: 1; height: 22px; }
.window.maximized.peek .win-peek-handle { opacity: 0; pointer-events: none; }

/* Mobiel: geen hover beschikbaar -> de app draait echt fullscreen met de
   window-bar als enige top-toolbar. De balk staat IN DE FLOW (overlapt de
   app-top dus niet -> geen afgesneden inhoud) en het venster ligt boven de
   systeem-menubar zodat de knoppen (terug/werklog/console/sluiten) altijd
   aan te tikken zijn. */
@media (max-width: 759px) {
  .window.maximized { z-index: 600 !important; }
  .window.maximized.focused { z-index: 601 !important; }
  .window.maximized .window-bar {
    position: relative !important; transform: none !important;
    height: 50px; z-index: 2;
  }
  .window.maximized .window-body {
    position: relative !important; inset: auto !important; flex: 1;
  }
  .window.maximized .win-peek-zone,
  .window.maximized .win-peek-handle { display: none !important; }
}
.window-bar {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 16px;
  background: rgba(255,255,255,.6); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  cursor: grab; user-select: none; flex-shrink: 0;
}
.window-bar:active { cursor: grabbing; }
.window-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px rgba(0,106,102,.35); }
.window-title {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; flex: 1;
  text-transform: uppercase; letter-spacing: .15em; color: rgba(0,80,85,.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.window-btns { display: flex; gap: 6px; }
.window-btns button {
  background: rgba(255,255,255,.8); border: 1px solid var(--line-soft); color: var(--text-dim);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: color .25s, background .25s;
}
.window-btns button:hover { background: var(--teal-50); color: var(--accent); }
.window-btns button.close:hover { background: rgba(212,86,78,.1); color: var(--warn); }
.window-btns svg { width: 13px; height: 13px; }
.window-body { flex: 1; position: relative; background: #fff; display: flex; overflow: hidden; }
.dbg-iframe-wrap { flex: 1; position: relative; min-width: 0; }
.window-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.window-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; z-index: 5;
}
.iframe-shield { position: absolute; inset: 0; z-index: 4; display: none; }
body.dragging .iframe-shield { display: block; }


/* ---------- tabbar: open app tabs ---------- */
.tabbar {
  display: flex; align-items: center; gap: 3px;
  height: 40px; padding: 4px 14px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.15));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0; z-index: 49;
  border-bottom: 1px solid var(--line-soft);
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar.hidden { display: none !important; }
.tab {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 12px; height: 30px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
  transition: all .25s cubic-bezier(.16,1,.3,1);
  flex-shrink: 0; cursor: pointer;
}
.tab.active {
  background: rgba(255,255,255,.82);
  color: var(--text);
  border-color: rgba(0,106,102,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.04), inset 0 0 8px rgba(255,255,255,.6);
}
.tab.dim { opacity: .45; }
.tab:hover:not(.active) { background: rgba(255,255,255,.55); color: var(--text); }
.tab-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.tab-name {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.tab-x {
  font-size: 14px; line-height: 1; color: var(--text-dim);
  margin-left: 1px; padding: 0 2px; border-radius: 50%;
  transition: color .2s, background .2s;
  font-family: var(--font-display);
}
.tab-x:hover { color: var(--warn); background: rgba(212,86,78,.08); }

/* ---------- dock ---------- */
.dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 10px 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(240,250,255,.55) 100%) padding-box,
    linear-gradient(120deg, rgba(255,210,230,.75), rgba(210,255,230,.75), rgba(210,230,255,.75), rgba(230,210,255,.75)) border-box;
  background-size: 100% 100%, 300% 300%;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05), 0 0 20px rgba(255,255,255,.8), inset 0 0 14px rgba(255,255,255,.7);
  animation: iriBorder 10s ease infinite;
  z-index: 60;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.dock:empty { display: none; }
.dock-item {
  position: relative; width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
  background: var(--bio-surface);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), inset 0 0 8px rgba(255,255,255,.6);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s;
}
.dock-item svg { width: 20px; height: 20px; }
.dock-item::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px rgba(0,106,102,.5);
}
.dock-item.minimized { opacity: .5; }
.dock-item:hover {
  transform: translateY(-4px) scale(1.08);
  border-color: rgba(210,230,255,.9);
  box-shadow: 0 8px 20px rgba(0,106,102,.12), inset 0 0 10px rgba(255,255,255,.8);
}

/* ---------- Vera assistant ---------- */
.mia-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 58px; height: 58px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(135deg, var(--accent) 0%, #00838c 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,106,102,.3), inset 0 0 12px rgba(255,255,255,.18);
  margin-bottom: env(safe-area-inset-bottom);
  animation: blobMorph 7s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.mia-fab svg { width: 24px; height: 24px; }
.mia-fab:hover {
  transform: scale(1.07);
  box-shadow: 0 14px 36px rgba(0,106,102,.35), 0 0 24px rgba(210,230,255,.6), inset 0 0 12px rgba(255,255,255,.25);
}
.mia-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 70;
  width: min(380px, calc(100vw - 40px));
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(240,250,255,.78) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-radius: 30px; overflow: hidden;
  box-shadow: var(--shadow-glass);
  animation: mia-panel-in .45s cubic-bezier(.16,1,.3,1), iriBorder 12s ease infinite;
}
@keyframes mia-panel-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.mia-panel-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: rgba(255,255,255,.45);
  border-bottom: 1px solid var(--line-soft);
  cursor: grab; touch-action: none; user-select: none;
}
.mia-panel-bar:active { cursor: grabbing; }
.mia-pulse {
  width: 13px; height: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 12px rgba(0,191,201,.4);
  animation: blobMorph 6.4s ease-in-out infinite, canvas-pulse 3.6s ease-in-out infinite;
}
.mia-panel-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mia-panel-kicker {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: rgba(0,80,85,.7);
}
.mia-panel-title { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.mia-panel-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  color: var(--text-dim); font-size: 17px; line-height: 1;
  transition: color .2s, border-color .2s;
}
.mia-panel-close:hover { color: var(--warn); border-color: rgba(212,86,78,.4); }
.mia-body { padding: 18px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.mia-body p + p { margin-top: 10px; }
.mia-note { font-size: 11px; color: var(--text-dim); }

/* ---------- mobile (<760px): fullscreen apps, no windows ---------- */
@media (max-width: 759px) {
  .window {
    inset: 0 !important; width: auto !important; height: auto !important;
    min-width: 0; min-height: 0; border-radius: 0; border: none;
  }
  .window-bar { height: 50px; cursor: default; }
  .window-resize { display: none; }
  .window-btns button { width: 38px; height: 38px; }
  .window-btns .min, .window-btns .max { display: none; }
  .window-bar .back { display: grid !important; }
  /* Mobiel: CPU/MEM/DISK-stats verbergen zodat de credit-pill + iconen passen
     en de rest van de toolbar niet meer van het scherm afvalt. */
  .menubar-stat { display: none; }
  .menubar { height: 52px; padding: 0 10px; gap: 8px; min-width: 0; }
  .menubar-home { flex-shrink: 0; }
  .menubar-app { min-width: 0; }
  .menubar-right { gap: 7px; padding: 5px 9px; flex-shrink: 0; max-width: 100%; }
  .menubar-icon { min-width: 28px; min-height: 28px; padding: 4px; }
  .topbar-credits { padding: 4px 8px; gap: 4px; }
  .topbar-credits .cr-amt { font-size: 11px; }
  .topbar-credits.cr-unlimited .cr-amt { font-size: 14px; }
  .tabbar { height: 36px; padding: 3px 10px; gap: 2px; }
  .tab { padding: 4px 8px 4px 10px; height: 26px; font-size: 9.5px; gap: 5px; }
  .tab-name { max-width: 80px; }
  .tab-x { font-size: 13px; }
  .menubar-home { letter-spacing: .12em; padding: 7px 8px; }
  .home { padding: 20px 18px 96px; }
  .pager { margin: 0 -18px; }
  .live-rail { left: 8px; }
  .page { padding: 12px 18px 8px; gap: 20px; }
  .app-tile .app-icon { width: 68px; height: 68px; }
  .dock { max-width: calc(100vw - 96px); left: 14px; transform: none; overflow-x: auto; }
}
.window-bar .back {
  display: none; background: none; border: none; color: var(--accent);
  width: 38px; height: 38px; place-items: center; border-radius: 50%;
}
.window-bar .back svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .app-tile { opacity: 1; transform: none; }
  .app-tile .app-icon { border-radius: 28px; }
}
/* static fallback radius for breathing blobs when animation not running */
@supports not (animation-name: breathing) {
  .app-tile .app-icon { border-radius: 28px; }
}

/* ---------- AI app builder ---------- */
.builder-intro { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.builder-label {
  display: block; font-size: 9.5px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .18em; margin: 12px 0 6px;
}
.mia-body select, .mia-body textarea {
  width: 100%; background: var(--glass-strong); color: var(--text);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 11px 14px; font: inherit; font-size: 13.5px;
  transition: border-color .3s, box-shadow .3s;
}
.mia-body textarea { resize: vertical; min-height: 72px; border-radius: 18px; }
.mia-body select:focus-visible, .mia-body textarea:focus-visible {
  outline: none; border-color: rgba(0,106,102,.4);
  box-shadow: 0 0 20px rgba(0,106,102,.06); background: #fff;
}
.builder-actions { display: flex; gap: 8px; margin-top: 14px; }
.builder-go {
  flex: 1; background: var(--accent); color: #fff; border: none;
  border-radius: 999px; padding: 11px 14px; font: inherit; font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; min-height: 44px;
  transition: filter .2s;
}
.builder-go:hover { filter: brightness(1.15); }
.builder-go:disabled { opacity: .5; cursor: wait; }
.builder-delete {
  background: rgba(255,255,255,.8); border: 1px solid rgba(212,86,78,.35); color: var(--warn);
  border-radius: 999px; padding: 0 16px; font: inherit; font-size: 12px; min-height: 44px; cursor: pointer;
  transition: background .2s;
}
.builder-delete:hover { background: rgba(212,86,78,.08); }
.builder-status {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 12px; color: var(--text-dim);
}
.builder-spinner {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(0,106,102,.15); border-top-color: var(--accent);
  animation: builder-spin .8s linear infinite;
}
@keyframes builder-spin { to { transform: rotate(360deg); } }
.builder-log { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; max-height: 130px; overflow-y: auto; }
.builder-log-item { font-size: 12px; color: var(--text-dim); }
.builder-log-item.ok { color: var(--ok); }
.builder-log-item.err { color: var(--warn); }
@media (max-width: 759px) {
  .mia-panel { bottom: 88px; max-height: calc(100dvh - 130px); overflow-y: auto; }
}

/* live publish row in App Builder */
.builder-live {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 8px 0 2px; padding: 9px 14px;
  background: var(--glass-strong); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12px;
}
.builder-live a { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.builder-live a:not([href]) { color: var(--text-dim); }
.builder-live button {
  background: rgba(255,255,255,.8); border: 1px solid var(--line); color: inherit;
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; flex-shrink: 0;
  transition: border-color .2s, color .2s;
}
.builder-live button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(191,201,200,.6); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,106,102,.4); }

/* ---------- AI live canvas (live layout streaming) ---------- */
.ai-canvas {
  position: fixed; z-index: 80;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1240px, 94vw); height: min(760px, 84dvh);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86) 0%, rgba(240,250,255,.78) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  animation: canvas-in .45s cubic-bezier(.16,1,.3,1), iriBorder 12s ease infinite;
}
@keyframes canvas-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }
.ai-canvas-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; flex-shrink: 0;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.45);
  cursor: grab; touch-action: none;
}
.ai-canvas-bar:active { cursor: grabbing; }
.ai-canvas.mini .ai-canvas-bar { cursor: pointer; }
.ai-canvas-pulse {
  width: 12px; height: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 12px rgba(0,191,201,.45);
  animation: blobMorph 6s ease-in-out infinite, canvas-pulse 3.2s ease-in-out infinite;
}
@keyframes canvas-pulse { 50% { opacity: .45; } }
.ai-canvas.done .ai-canvas-pulse { background: var(--ok); animation: none; }
.ai-canvas.err  .ai-canvas-pulse { background: var(--warn); animation: none; }
.ai-canvas-title { font-weight: 600; font-size: 14px; white-space: nowrap; }
.ai-canvas-phases { display: flex; gap: 6px; flex: 1; min-width: 0; }
.phase {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim);
  background: rgba(255,255,255,.6); transition: all .3s;
}
.phase.on {
  border-color: var(--accent); color: var(--accent);
  background: var(--teal-50);
}
.phase.donephase { border-color: rgba(15,157,119,.4); color: var(--ok); }
.phase.warnphase { border-color: rgba(220,160,40,.5); color: #b8860b; background: rgba(255,243,205,.6); }
.ai-canvas-timer { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.ai-canvas-tabs { display: none; gap: 4px; }
.ai-canvas-tabs button {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.6); color: var(--text-dim);
}
.ai-canvas-tabs button.active { border-color: var(--accent); color: var(--accent); background: var(--teal-50); }
.ai-canvas-min {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: rgba(255,255,255,.8);
  color: var(--text-dim); font-size: 16px; line-height: 1;
  transition: border-color .2s, color .2s;
}
.ai-canvas-min:hover { border-color: var(--accent); color: var(--accent); }
.ai-canvas-stop {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: rgba(255,255,255,.8);
  color: var(--text-dim); font-size: 11px; line-height: 1;
  transition: border-color .2s, color .2s;
}
.ai-canvas-stop:hover { border-color: #c0392b; color: #c0392b; }
.ai-canvas.done .ai-canvas-stop, .ai-canvas.err .ai-canvas-stop,
.ai-canvas.mini .ai-canvas-stop { display: none; }
.ai-canvas-body { flex: 1; display: flex; min-height: 0; }
.ai-canvas-code {
  flex: 1.05; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(160deg, rgba(230,244,244,.55) 0%, rgba(255,255,255,.4) 100%);
  /* border-right: resize handle vervangt dit */
}
/* activity-feed: vanaf seconde 0 zichtbaar wat Vera doet */
.ai-canvas-activity {
  padding: 14px 20px 6px; font-size: 10.5px; line-height: 1.75;
  color: var(--text-dim);
  border-bottom: 1px dashed var(--line);
}
.ai-canvas-activity:empty { display: none; }
.ai-canvas-activity .act.ok { color: var(--ok); }
.ai-canvas-activity .act.err { color: var(--warn); }
.ai-canvas-activity .act.warn { color: #b07d2a; }
#act-now { color: var(--accent); font-weight: 500; animation: canvas-pulse 1.6s ease-in-out infinite; min-height: 1em; }
#act-now:empty { display: none; }
/* ---------- chain-of-thought v2: rich, leesbaar, visueel ---------- */
/* === GEDACHTEGANG PANEL === */
.ai-canvas-think {
  flex: 2; display: flex; flex-direction: column;
  margin: 0; padding: 0;
  background: transparent;
  overflow: hidden;
  min-height: 120px;
  /* border-bottom: resize handle vervangt dit */
  transition: flex .5s cubic-bezier(.16,1,.3,1);
}
.ai-canvas-think.compact { flex: 0.6; min-height: 80px; }
@keyframes think-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(0,191,201,0); }
  50% { box-shadow: 0 0 32px rgba(0,191,201,.12); }
}



/* --- header --- */
.ai-canvas-think-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px; gap: 10px;
  cursor: pointer; user-select: none;
}
.think-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.think-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* animated brain indicator */
.think-brain {
  position: relative; width: 28px; height: 28px; flex-shrink: 0;
}
.think-brain-ring {
  position: absolute; inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--accent-bright, #00bfc9);
  border-right-color: var(--dream-violet, #7c3aed);
  border-radius: 50%;
  animation: think-spin 2.4s linear infinite;
}
.think-brain-core {
  position: absolute; inset: 6px;
  background: linear-gradient(135deg, var(--accent-bright, #00bfc9), var(--dream-violet, #7c3aed));
  border-radius: 50%;
  animation: think-core-pulse 2s ease-in-out infinite;
}
@keyframes think-spin { to { transform: rotate(360deg); } }
@keyframes think-core-pulse {
  0%, 100% { transform: scale(.85); opacity: .7; }
  50% { transform: scale(1.1); opacity: 1; }
}
.ai-canvas-think.fast .think-brain-ring { animation-duration: 1s; }
.ai-canvas-think.fast .think-brain-core { animation-duration: .8s; }

.think-head-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.think-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent, #006970); font-weight: 600;
}
.think-sublabel {
  font-size: 11.5px; color: #3a6b68; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.think-rate {
  font-size: 9.5px; color: var(--accent-bright, #00bfc9);
  background: rgba(0,191,201,.1); padding: 2px 7px; border-radius: 8px;
  white-space: nowrap; letter-spacing: .04em;
}
.think-rate:empty { display: none; }
.think-meta {
  font-size: 9.5px; color: var(--text-dim, #8fa5a3);
  letter-spacing: .06em; white-space: nowrap;
}

/* collapse toggle */
.think-collapse {
  background: rgba(0,105,112,.08); border: none; border-radius: 8px;
  width: 26px; height: 26px; cursor: pointer; font-size: 13px;
  color: var(--accent, #006970); display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .3s;
}
.think-collapse:hover { background: rgba(0,105,112,.16); }

/* --- stream: gedachtentekst --- */
.ai-canvas-think-stream {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 16px 12px;
  font-size: 12.5px; line-height: 1.75;
  color: #3a5f5c;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
}

/* thought fragments */
.think-frag {
  opacity: .45; padding: 2px 0;
  animation: think-frag-in .6s cubic-bezier(.16,1,.3,1);
  border-left: 2px solid transparent; padding-left: 0;
  transition: opacity .4s, border-color .4s;
}
.think-frag:nth-last-child(-n+4) { opacity: .7; }
.think-frag:nth-last-child(-n+2) { opacity: .9; }
@keyframes think-frag-in { from { opacity: 0; transform: translateY(6px); } }

.think-frag.now {
  opacity: 1; color: #1a4a47; font-weight: 450;
}
.think-frag.now::after {
  content: '\258d'; color: var(--accent-bright, #00bfc9); font-style: normal;
  animation: canvas-pulse 1s steps(2) infinite; margin-left: 2px;
}

.think-frag.question {
  border-left: 2px solid var(--accent-bright, #00bfc9);
  padding-left: 10px; margin-left: -2px;
  color: #1a4a47;
}
.think-frag.decision {
  border-left: 2px solid var(--dream-violet, #7c3aed);
  padding-left: 10px; margin-left: -2px;
  color: #1a4a47; font-weight: 450;
}
.think-frag.listitem {
  padding-left: 14px; position: relative;
}
.think-frag.listitem::before {
  content: '\2192'; position: absolute; left: 0;
  color: var(--accent, #006970); font-weight: 600;
}

/* section divider */
.think-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 4px; font-size: 9.5px; font-weight: 600;
  color: var(--accent, #006970); text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--mono, 'Geist Mono', monospace);
}
.think-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(0,105,112,.2), transparent);
}

/* summary bar */
.think-summary {
  padding: 8px 16px 10px; margin-top: 2px;
  font-size: 10.5px; color: #3a6b68;
  background: rgba(0,105,112,.04);
  border-top: 1px solid rgba(0,105,112,.08);
  border-radius: 0 0 22px 22px;
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono, 'Geist Mono', monospace);
}
.think-summary-item { display: flex; align-items: center; gap: 4px; }
.think-summary-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.think-summary-dot.q { background: var(--accent-bright, #00bfc9); }
.think-summary-dot.d { background: var(--dream-violet, #7c3aed); }
.think-summary-dot.t { background: var(--accent, #006970); }

/* calm mode */
.ai-canvas-think.calm { opacity: .65; }
.ai-canvas-think.calm .ai-canvas-think-stream { }
.ai-canvas-think.calm .think-brain-ring { animation-duration: 6s; }
.ai-canvas-think.calm .think-brain-core { animation: none; opacity: .5; }
.ai-canvas-think.calm .think-frag.now::after { content: ''; }

/* done/error state */
.ai-canvas.done .ai-canvas-think, .ai-canvas.err .ai-canvas-think { opacity: .5; }
.ai-canvas.done .think-brain-ring, .ai-canvas.err .think-brain-ring { animation: none; }
.ai-canvas.done .think-brain-core, .ai-canvas.err .think-brain-core { animation: none; }

/* mobile */
@container (max-width: 500px) {
  .think-sublabel { max-width: 140px; }
  .ai-canvas-think-stream { font-size: 12px; }
}


.ai-canvas-code pre {
  padding: 18px 20px 28px; font-size: 11px; line-height: 1.55;
  color: #2a5f5c; white-space: pre-wrap; word-break: break-word;
}
.ai-canvas-code pre::after {
  content: '▌'; color: var(--accent-bright);
  animation: canvas-pulse 1s steps(2) infinite;
}
.ai-canvas.done .ai-canvas-code pre::after, .ai-canvas.err .ai-canvas-code pre::after { content: ''; }
.ai-canvas-right { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(235,248,252,.78) 100%); overflow: hidden; }
/* old right-toggle removed — v3 layout */

/* old preview iframe rule removed — v3 layout */
/* old preview-wait rule removed — v3 layout */
.ai-canvas-foot {
  flex-shrink: 0; padding: 9px 20px; font-size: 11px; color: var(--text-dim);
  border-top: 1px solid var(--line-soft); background: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* geminimaliseerd: ademende bio-glass pill rechtsonder, bouwt door */
.ai-canvas.mini {
  left: auto !important; right: 20px; top: auto !important; bottom: 152px;
  transform: none !important;
  width: 280px; height: auto; border-radius: 999px; cursor: pointer;
  animation: iriBorder 8s ease infinite;
}
.ai-canvas.mini .ai-canvas-body, .ai-canvas.mini .ai-canvas-foot,
.ai-canvas.mini .ai-canvas-tabs, .ai-canvas.mini .ai-canvas-phases { display: none; }
.ai-canvas.mini .ai-canvas-bar { border-bottom: 0; background: none; }
@media (max-width: 759px) {
  .ai-canvas { width: 100vw; height: 100dvh; border-radius: 0; left: 0; top: 0; transform: none; }
  .ai-canvas-bar { flex-wrap: wrap; padding: 12px 14px; }
  .ai-canvas-phases { order: 5; flex-basis: 100%; }
  .ai-canvas-tabs { display: flex; }
  .ai-canvas-body { flex-direction: column; position: relative; }
  .ai-canvas-code, .ai-canvas-right { flex: 1; border-right: 0; }
  .ai-canvas.tab-think .ai-canvas-code { display: none; }
  .ai-canvas.tab-think .ai-canvas-right { display: flex; }
  .ai-canvas.tab-code .ai-canvas-right { display: none; }
  .ai-canvas.tab-files .ai-canvas-code { display: none; }
  .ai-canvas.tab-files .ai-canvas-right { display: none; }
  .ai-canvas.tab-files .ai-canvas-files-mobile { display: flex !important; }
  /* removed v3 — mobile uses different tabs now */
  /* removed v3 */
  /* removed v3 */
  .ai-canvas.mini { left: auto; right: 14px; top: auto; bottom: 150px; width: 250px; height: auto; border-radius: 24px; }
}

/* ---------- overlays: intake-wizard & setup-assistent ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 22px;
  background: rgba(238, 243, 244, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.overlay-card {
  width: min(620px, 100%); max-height: min(86dvh, 760px);
  display: flex; flex-direction: column;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(240,250,255,.8) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  animation: overlayIn .45s cubic-bezier(.16,1,.3,1), iriBorder 14s ease infinite;
}
@keyframes overlayIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.overlay-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 26px 28px 14px;
  cursor: grab; touch-action: none; user-select: none;
}
.overlay-head:active { cursor: grabbing; }
.overlay-head h3 { transition: opacity .3s; }
.overlay-head h3 { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.overlay-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); margin-bottom: 6px; }
.overlay-sub { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.overlay-close {
  margin-left: auto; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  font-size: 18px; color: var(--text-dim); line-height: 1;
}
.overlay-close:hover { color: var(--text); }
.overlay-body { padding: 6px 28px 18px; overflow-y: auto; flex: 1; }
.overlay-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 28px 22px; border-top: 1px solid var(--line-soft);
}
.btn-ghost {
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.55);
  color: var(--text-dim); font-size: 14px; font-weight: 500;
}
.btn-ghost:hover { color: var(--text); }
.btn-ghost:disabled, .btn-ghost.invis { visibility: hidden; }

/* voortgang */
.intake-progress { display: flex; gap: 6px; padding: 0 28px 6px; }
.intake-progress span {
  height: 4px; flex: 1; border-radius: 999px;
  background: var(--line-soft); transition: background .4s;
}
.intake-progress span.done { background: var(--accent); }
.intake-progress span.cur { background: var(--accent-bright); }

/* velden */
.iq-field { margin: 18px 0; }
.iq-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.iq-label .req { color: var(--warn); }
.iq-help { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.45; }
.iq-field input[type="text"], .iq-field textarea {
  width: 100%; padding: 13px 16px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255,255,255,.65); color: var(--text);
  outline: none; transition: border-color .25s, box-shadow .25s;
  resize: vertical;
}
.iq-field input:focus, .iq-field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.iq-field.iq-err input, .iq-field.iq-err textarea { border-color: var(--warn); }
.iq-errmsg { font-size: 12px; color: var(--warn); margin-top: 6px; display: none; }
.iq-field.iq-err .iq-errmsg { display: block; }

/* chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  font-size: 13.5px; font-weight: 500; color: var(--text);
  transition: all .25s cubic-bezier(.16,1,.3,1);
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
}
.chip small { display: block; font-weight: 400; color: var(--text-dim); font-size: 11.5px; }
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip.sel {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 18px rgba(0,105,112,.25);
}
.chip.sel small { color: rgba(255,255,255,.75); }
.chip-grid.big .chip { flex: 1 1 calc(50% - 9px); padding: 14px 16px; border-radius: 20px; text-align: left; flex-direction: column; align-items: flex-start; gap: 2px; }

/* kleur-swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatch {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 10px rgba(0,0,0,.12); padding: 0;
  transition: transform .2s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch-custom { width: 38px; height: 38px; border-radius: 50%; border: 1px dashed var(--line); background: none; overflow: hidden; position: relative; }
.swatch-custom input { position: absolute; inset: -8px; width: 60px; height: 60px; cursor: pointer; border: 0; padding: 0; }

/* samenvatting */
.iq-summary { margin: 14px 0; display: grid; gap: 8px; }
.iq-sumrow {
  display: grid; grid-template-columns: 130px 1fr; gap: 10px;
  padding: 11px 16px; border-radius: 16px;
  background: rgba(255,255,255,.55); border: 1px solid var(--line-soft);
  font-size: 13px;
}
.iq-sumrow b { font-weight: 600; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.iq-note {
  margin-top: 16px; padding: 14px 16px; border-radius: 18px;
  background: var(--teal-50); border: 1px solid rgba(0,105,112,.15);
  font-size: 12.5px; color: var(--text); line-height: 1.55;
}

/* builder-paneel aanvullingen */
.builder-new-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 14px 0 12px; }
#builder-new .builder-go { width: 100%; }
.builder-setup-open {
  width: 100%; margin-top: 10px; padding: 11px 16px;
  border-radius: 999px; border: 1px solid rgba(0,105,112,.25);
  background: var(--teal-50); color: var(--accent);
  font-size: 13px; font-weight: 600;
}
.builder-setup-open:hover { background: rgba(0,105,112,.12); }

/* setup-assistent */
.setup-item {
  border: 1px solid var(--line-soft); border-radius: 22px;
  background: rgba(255,255,255,.55); margin: 14px 0; overflow: hidden;
}
.setup-item-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: none; border: 0; text-align: left;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text);
}
.setup-badge {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: rgba(212,86,78,.12); color: var(--warn);
  transition: all .3s;
}
.setup-item.done .setup-badge { background: rgba(15,157,119,.14); color: var(--ok); }
.setup-item-head .chev { margin-left: auto; color: var(--text-dim); transition: transform .3s; }
.setup-item.open .chev { transform: rotate(90deg); }
.setup-item-body { display: none; padding: 0 18px 18px; }
.setup-item.open .setup-item-body { display: block; }
.setup-why { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
.setup-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: st; }
.setup-steps li {
  counter-increment: st; position: relative;
  padding: 7px 0 7px 36px; font-size: 13px; line-height: 1.5;
}
.setup-steps li::before {
  content: counter(st); position: absolute; left: 0; top: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal-50); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.setup-field { margin: 10px 0; }
.setup-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.setup-field input {
  width: 100%; padding: 11px 14px; font: var(--font-mono); font-family: var(--font-mono);
  font-size: 13px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.7); outline: none;
}
.setup-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.setup-field .iq-help { margin: 5px 0 0; }
.setup-done-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12.5px; color: var(--text-dim); cursor: pointer; user-select: none;
}
.setup-savemsg { font-size: 12px; color: var(--ok); }

@media (max-width: 759px) {
  .overlay { padding: 0; }
  .overlay-card { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .chip-grid.big .chip { flex: 1 1 100%; }
  .iq-sumrow { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- intake: ademende interactie-polish ---------- */
.iq-field.iq-in { animation: iqIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes iqIn { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.iq-field.iq-in:nth-child(2) { animation-delay: .05s; }
.iq-field.iq-in:nth-child(3) { animation-delay: .1s; }
.iq-field.iq-in:nth-child(4) { animation-delay: .15s; }
.iq-field.iq-in:nth-child(5) { animation-delay: .2s; }

/* reactie van Vera op een gekozen antwoord */
.iq-react {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding: 11px 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(240,250,255,.65)) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 300% 300%;
  border-radius: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  animation: iqIn .5s cubic-bezier(.16,1,.3,1) both, iriBorder 10s ease infinite;
}
.iq-react .iq-react-blob {
  width: 11px; height: 11px; flex-shrink: 0; margin-top: 3px;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 10px rgba(0,191,201,.35);
  animation: blobMorph 6s ease-in-out infinite;
}
.iq-react b { color: var(--text); font-weight: 600; }

/* chips: bio-glass met ademende selectie */
.chip {
  background: var(--bio-surface);
  transition: border-color .25s, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.chip:hover { box-shadow: 0 6px 18px rgba(0,106,102,.1); }
.chip.sel { animation: chip-breathe 5.5s ease-in-out infinite; }
@keyframes chip-breathe {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,106,102,.18); }
  50% { box-shadow: 0 6px 26px rgba(0,191,201,.32); }
}

/* progress: huidige stap ademt */
.intake-progress span.cur { animation: progress-breathe 2.8s ease-in-out infinite; }
@keyframes progress-breathe { 50% { opacity: .45; } }

@media (max-width: 759px) {
  .overlay-head { cursor: default; }
  .mia-panel-bar { cursor: default; }
}

/* ---------- quick-menu: rechtsklik / vasthouden op een app-icoon ---------- */
@keyframes qm-in {
  from { opacity: 0; transform: scale(.92) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes qm-blob-breathe {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%; }
}
.quick-menu {
  position: fixed; z-index: 95;
  min-width: 232px; max-width: 290px;
  padding: 8px;
  border: 1px solid transparent; border-radius: 26px;
  background: var(--bio-surface) padding-box, var(--iri-spectrum) border-box;
  background-size: auto, 300% 300%;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(31,38,135,.16), 0 0 40px rgba(0,106,102,.05), inset 0 0 18px rgba(255,255,255,.75);
  animation: qm-in .24s cubic-bezier(.22,1.2,.3,1), iriBorder 14s ease infinite;
  transform-origin: top center;
  user-select: none; -webkit-user-select: none;
}
.quick-menu.closing { opacity: 0; transform: scale(.95); transition: opacity .16s, transform .16s; pointer-events: none; }
.qm-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 6px;
}
.qm-blob {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,.8) 0%, rgba(240,250,255,.6) 100%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 0 10px rgba(255,255,255,.8), 0 4px 14px rgba(31,38,135,.07);
  animation: qm-blob-breathe 7s ease-in-out infinite;
}
.qm-blob svg { width: 18px; height: 18px; fill: currentColor; }
.qm-title { font-weight: 700; font-size: 13.5px; letter-spacing: .01em; }
.qm-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 12px;
  background: transparent; border: 0; border-radius: 16px;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  transition: background .18s, transform .18s;
}
.qm-item:hover { background: var(--accent-soft); }
.qm-item:active { transform: scale(.98); }
.qm-item:disabled { opacity: .55; cursor: default; }
.qm-item svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.qm-item .qm-l { display: block; font-weight: 600; font-size: 13px; }
.qm-item .qm-d { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.qm-item.danger svg, .qm-item.danger .qm-l { color: var(--warn); }
.qm-item.danger:hover { background: rgba(212,86,78,.09); }
.qm-sep { height: 1px; margin: 6px 12px; background: var(--line-soft); }
/* bevestiging: volledige de-installatie */
.qm-confirm { padding: 12px 14px 13px; max-width: 270px; }
.qm-confirm-q { font-size: 14px; margin: 0 0 6px; }
.qm-confirm-sub { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); margin: 0 0 12px; }
.qm-actions { display: flex; gap: 8px; }
.qm-actions button {
  flex: 1; padding: 9px 12px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer;
  transition: transform .18s, box-shadow .18s, opacity .18s;
}
.qm-actions button:active { transform: scale(.97); }
.qm-actions button:disabled { opacity: .55; cursor: default; }
.qm-keep {
  background: var(--glass-strong); color: var(--text);
  border: 1px solid var(--line);
}
.qm-del-go {
  background: var(--warn); color: #fff; border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(212,86,78,.25);
}
.qm-del-go:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(212,86,78,.35); }
.qm-err { font-size: 11px; color: var(--warn); margin: 10px 0 0; }
.qm-err.hidden { display: none; }

/* right-column view toggle: preview vs gedachtegang */
/* removed v3 */
/* removed v3 */
/* removed v3 */
/* removed v3 */

/* ---- status-overlays: inline boven gedachtegang ---- */
.ai-canvas-status-overlays {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}
.ai-canvas-status-overlays:empty { display: none; }

/* ---- recycle-banner ---- */
.ai-canvas-recycle-banner {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(28,39,51,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: verifyFadeIn 0.4s ease;
  background: linear-gradient(90deg, rgba(34,139,34,.06), rgba(210,255,230,.18)); background-color: rgba(255,255,255,.82);
  color: #1a6b3a;
}
.ai-canvas-recycle-banner.hidden { display: none; }
.ai-canvas-recycle-banner.done {
  background: linear-gradient(90deg, rgba(15,157,119,.06), rgba(210,255,230,.2)); background-color: rgba(255,255,255,.82);
  color: #0a8a5e;
}
.ai-canvas-recycle-banner .recycle-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.ai-canvas-recycle-banner .recycle-icon.spin {
  animation: recycleSpin 2s linear infinite;
}
.ai-canvas-recycle-banner .recycle-text { flex: 1; }
.ai-canvas-recycle-banner .recycle-sub {
  font-size: 11px;
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.recycle-cap {
  display: inline-block;
  background: rgba(34,139,34,.1);
  color: #1a6b3a;
  padding: 1px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
.recycle-tool {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,106,102,.08);
  color: #006a66;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
}
.recycle-tool-type {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .6;
  font-weight: 700;
}
@keyframes recycleSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- verificatie-banner ---- */
.ai-canvas-verify-banner {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(28,39,51,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: verifyFadeIn 0.4s ease;
}
.ai-canvas-verify-banner.hidden { display: none; }
.ai-canvas-verify-banner.checking {
  background: linear-gradient(90deg, rgba(0,105,112,.04), rgba(210,230,255,.2)); background-color: rgba(255,255,255,.82);
  color: #006970;
}
.ai-canvas-verify-banner.issues {
  background: linear-gradient(90deg, rgba(220,160,40,.06), rgba(255,243,205,.25)); background-color: rgba(255,255,255,.82);
  color: #8b6914;
}
.ai-canvas-verify-banner.fixing {
  background: linear-gradient(90deg, rgba(0,105,112,.05), rgba(210,255,230,.2)); background-color: rgba(255,255,255,.82);
  color: #006970;
}
.ai-canvas-verify-banner.passed, .ai-canvas-verify-banner.fixed {
  background: linear-gradient(90deg, rgba(15,157,119,.06), rgba(210,255,230,.2)); background-color: rgba(255,255,255,.82);
  color: #0a8a5e;
}
.ai-canvas-verify-banner.partial, .ai-canvas-verify-banner.fix_failed, .ai-canvas-verify-banner.fix_error {
  background: linear-gradient(90deg, rgba(200,60,40,.05), rgba(255,220,210,.2)); background-color: rgba(255,255,255,.82);
  color: #a83820;
}
.ai-canvas-verify-banner .verify-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.ai-canvas-verify-banner .verify-text { flex: 1; }
.ai-canvas-verify-banner .verify-sub {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}
@keyframes verifyFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes verifyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.ai-canvas-verify-banner.checking .verify-icon,
.ai-canvas-verify-banner.fixing .verify-icon {
  animation: verifyPulse 1.5s ease-in-out infinite;
}

/* Force Quit + Retry buttons */
.ai-canvas-retry {
  background: rgba(0, 180, 120, 0.25);
  color: #00b478;
  border: 1px solid rgba(0, 180, 120, 0.4);
  border-radius: 8px;
  width: 32px; height: 32px;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.15s;
}
.ai-canvas-retry:hover {
  background: rgba(0, 180, 120, 0.4);
  transform: scale(1.1);
}
.ai-canvas-retry.hidden { display: none; }
.ai-canvas.err .ai-canvas-stop { display: none; }

/* ============================================================
   ENHANCED THINKING PANEL — rich content: code blocks, headers
   ============================================================ */
.think-frag.code {
  background: rgba(28,39,51,.06);
  border-left: 3px solid var(--accent, #006A66);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 4px 0;
  overflow-x: auto;
}
.think-frag.code code {
  font-family: 'Geist Mono', monospace;
  font-size: .82em;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: #1c2733;
}
.think-frag.header {
  font-weight: 600;
  color: var(--accent, #006A66);
  border-bottom: 1px solid rgba(0,106,102,.15);
  padding-bottom: 4px;
  margin-top: 10px;
  margin-bottom: 2px;
  font-size: .92em;
  letter-spacing: .02em;
}
.think-frag.header::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #006A66);
  margin-right: 8px;
  vertical-align: middle;
  animation: think-header-pulse 2s ease-in-out infinite;
}
@keyframes think-header-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.ai-canvas-think.calm .think-frag.header::before {
  animation: none;
  opacity: .4;
}

/* ============================================================
   TERMINAL CODE — section markers for META/FRONTEND/ADMIN
   ============================================================ */
.code-section-marker {
  display: block;
  background: linear-gradient(135deg, rgba(0,106,102,.12), rgba(210,230,255,.2));
  border: 1px solid rgba(0,106,102,.2);
  border-radius: 8px;
  padding: 6px 14px;
  margin: 8px 0 4px;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: .85em;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent, #006A66);
  user-select: none;
}
.code-section-marker::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.code-section-marker[data-section="META"]::before { background: #c99a2e; }
.code-section-marker[data-section="FRONTEND"]::before { background: #0f9d77; }
.code-section-marker[data-section="ADMIN"]::before { background: #8a5cb8; }

/* ============================================================
   FILE SYSTEM PANEL
   ============================================================ */
/* v3: files panel is inside right column, styled by new rules below */
/* v3: old tab-files rules removed, handled by mobile CSS */
/* v3: files always visible on desktop, old rules removed */

.files-tree {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.files-empty {
  color: #6b7686;
  font-size: .9em;
  text-align: center;
  padding: 40px 20px;
  opacity: .7;
}
.files-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-weight: 600;
  font-size: .95em;
  color: #1c2733;
  margin-bottom: 4px;
}
.files-folder-icon::before {
  content: '';
  display: inline-block;
  width: 20px; height: 16px;
  background: linear-gradient(135deg, #D2E6FF, #D2FFE6);
  border-radius: 3px 3px 4px 4px;
  border: 1px solid rgba(0,106,102,.2);
  position: relative;
}
.files-folder-icon::after {
  content: '';
  display: block;
  width: 10px; height: 4px;
  background: linear-gradient(135deg, #D2E6FF, #D2FFE6);
  border-radius: 2px 2px 0 0;
  border: 1px solid rgba(0,106,102,.2);
  border-bottom: none;
  position: relative;
  top: -21px;
  left: 0;
}
.files-file {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px 10px 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: all .3s ease;
  text-align: left;
  font-size: .9em;
  color: #1c2733;
  margin-bottom: 4px;
}
.files-file:hover:not(.disabled) {
  background: rgba(255,255,255,.85);
  border-color: rgba(0,106,102,.15);
  box-shadow: 0 2px 8px rgba(0,106,102,.06);
}
.files-file.disabled {
  opacity: .5;
  cursor: default;
}
.file-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.file-icon.json { color: #c99a2e; }
.file-icon.html { color: #0f9d77; }
.file-icon.js { color: #8a5cb8; }
.files-file-name {
  flex: 1;
  font-weight: 500;
}
.files-file-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82em;
  color: #6b7686;
}
.file-status {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.file-status.done { background: #0f9d77; }
.file-status.building {
  background: #c99a2e;
  animation: file-pulse 1.5s ease-in-out infinite;
}
.file-status.server { background: #8a5cb8; }
@keyframes file-pulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* File viewer */
.files-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.files-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(28,39,51,.08);
  background: rgba(255,255,255,.6);
}
.files-viewer-name {
  font-weight: 600;
  font-size: .9em;
  color: var(--accent, #006A66);
}
.files-viewer-close {
  background: none;
  border: none;
  font-size: 1.4em;
  cursor: pointer;
  color: #6b7686;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background .2s;
}
.files-viewer-close:hover { background: rgba(28,39,51,.06); }
.files-viewer-code {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  font-size: .82em;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  color: #1c2733;
  margin: 0;
}

/* Tab active state for files tab */
.ai-canvas-tabs button#canvas-tab-files.active {
  color: var(--accent, #006A66);
  border-color: var(--accent, #006A66);
}

/* ============================================================
   ENHANCED THINKING — wider stream, better readability
   ============================================================ */
.ai-canvas-think-stream {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,106,102,.15) transparent;
}
.ai-canvas-think-stream::-webkit-scrollbar { width: 4px; }
.ai-canvas-think-stream::-webkit-scrollbar-track { background: transparent; }
.ai-canvas-think-stream::-webkit-scrollbar-thumb { background: rgba(0,106,102,.15); border-radius: 4px; }

/* Mobile: files tab works like code/preview toggle */
@media (max-width: 759px) {
  .ai-canvas.tab-files .ai-canvas-right { display: none; }
  .ai-canvas.tab-files .ai-canvas-files {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--bg, #F7F9FB);
  }
}


/* ============================================================
   CANVAS V3 — split right panel, preview overlay, files always
   ============================================================ */

/* --- Files panel: always visible in right column --- */
.ai-canvas-files {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 80px;
  /* remove old background — uses parent */
  background: transparent;
  border-right: none;
}
.ai-canvas-files-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); font-weight: 600;
  border-top: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.ai-canvas-files-head svg { color: var(--accent); opacity: .7; }
.files-count {
  font-size: 9px; color: var(--text-dim); font-weight: 400;
  margin-left: auto;
}
/* override old files panel CSS that hid it */
.ai-canvas.tab-code .ai-canvas-files,
.ai-canvas.tab-preview .ai-canvas-files { display: flex; }
.ai-canvas.tab-files .ai-canvas-code { /* keep for mobile only */ }

/* --- Preview overlay --- */
.ai-canvas-preview-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: inherit;
  animation: preview-in .3s cubic-bezier(.16,1,.3,1);
}
@keyframes preview-in { from { opacity: 0; transform: scale(.98); } }
.ai-canvas-preview-overlay.hidden { display: none; }
.preview-overlay-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; flex-shrink: 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); font-weight: 600;
}
.preview-overlay-bar button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.8);
  color: var(--text-dim); font-size: 18px; line-height: 1;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.preview-overlay-bar button:hover { border-color: var(--accent); color: var(--accent); }
.ai-canvas-preview-overlay iframe {
  flex: 1; width: 100%; border: 0; background: #fff;
}
.ai-canvas-preview-wait {
  position: absolute; inset: 50px 0 0; display: grid; place-items: center;
  font-size: 11px; color: var(--text-dim); background: rgba(255,255,255,.9);
}

/* --- Preview button in header --- */
.ai-canvas-preview-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.7);
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-dim);
  cursor: pointer; transition: all .25s;
  flex-shrink: 0;
}
.ai-canvas-preview-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--teal-50); }
.ai-canvas-preview-btn.has-preview { border-color: var(--ok); color: var(--ok); }
.ai-canvas-preview-btn svg { flex-shrink: 0; }
.ai-canvas.mini .ai-canvas-preview-btn { display: none; }

/* --- Retry button styling (was missing) --- */
.ai-canvas-retry {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: rgba(255,255,255,.8);
  color: var(--text-dim); font-size: 16px; line-height: 1;
  transition: border-color .2s, color .2s; cursor: pointer;
}
.ai-canvas-retry:hover { border-color: var(--ok); color: var(--ok); }

/* --- Files panel: breathing dot for building status --- */
.files-tree { padding: 8px 16px 12px; }

/* --- Enhanced thinking: better code block detection --- */
.think-frag.code {
  font-family: var(--font-mono); font-size: 11px;
  background: rgba(0,106,102,.06); border-radius: 6px;
  padding: 6px 10px; margin: 4px 0;
  border-left: 2px solid var(--accent);
  color: #2a5f5c; white-space: pre-wrap; word-break: break-word;
}
.think-frag.header {
  font-weight: 700; font-size: 12px; color: var(--accent);
  margin-top: 8px; padding-top: 4px;
  border-top: 1px dashed var(--line-soft);
}

/* --- Remove old files tab CSS that conflicted --- */
.ai-canvas.tab-files .ai-canvas-files { display: flex; }

/* --- Mobile overrides for v3 --- */
@media (max-width: 759px) {
  .ai-canvas-preview-btn span { display: none; }
  .ai-canvas-preview-btn { padding: 5px 8px; }
  .ai-canvas.tab-think .ai-canvas-code { display: none; }
  .ai-canvas.tab-think .ai-canvas-right { flex: 1; display: flex; }
  .ai-canvas.tab-files .ai-canvas-code { display: none; }
  .ai-canvas.tab-files .ai-canvas-right { flex: 1; display: flex; }
  .ai-canvas.tab-files .ai-canvas-think { display: none; }
  .ai-canvas.tab-code .ai-canvas-right { display: none; }
  .ai-canvas.tab-think .ai-canvas-files { display: none; }
}

/* ---------- resize handles: panelen schaalbaar ---------- */
.ai-canvas-resize-h {
  width: 6px; cursor: col-resize; flex-shrink: 0;
  background: transparent; position: relative; z-index: 5;
  transition: background .2s;
}
.ai-canvas-resize-h:hover, .ai-canvas-resize-h.active {
  background: var(--accent-soft);
}
.ai-canvas-resize-h::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 32px; border-radius: 2px;
  background: var(--line);
  transition: background .2s;
}
.ai-canvas-resize-h:hover::after, .ai-canvas-resize-h.active::after {
  background: var(--accent);
}

.ai-canvas-resize-v {
  height: 6px; cursor: row-resize; flex-shrink: 0;
  background: transparent; position: relative; z-index: 5;
  transition: background .2s;
}
.ai-canvas-resize-v:hover, .ai-canvas-resize-v.active {
  background: var(--accent-soft);
}
.ai-canvas-resize-v::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 2px; border-radius: 2px;
  background: var(--line);
  transition: background .2s;
}
.ai-canvas-resize-v:hover::after, .ai-canvas-resize-v.active::after {
  background: var(--accent);
}

/* resizing state: voorkom iframe capture en tekst-selectie */
body.panel-resizing { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; }
body.panel-resizing-v { cursor: row-resize !important; user-select: none !important; -webkit-user-select: none !important; }
body.panel-resizing .iframe-shield,
body.panel-resizing-v .iframe-shield,
body.panel-resizing iframe,
body.panel-resizing-v iframe { pointer-events: none !important; }

/* mobile: verberg resize handles */
@media (max-width: 759px) {
  .ai-canvas-resize-h, .ai-canvas-resize-v { display: none; }
}

/* ========== Vera universele chat-assistent v2 ========== */

/* ---- chat FAB: links van de builder FAB ---- */
.chat-fab {
  position: fixed; right: 88px; bottom: 20px; z-index: 70;
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px; height: 54px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(240,250,255,.78) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--accent); border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,106,102,.15), inset 0 0 12px rgba(255,255,255,.7);
  margin-bottom: env(safe-area-inset-bottom);
  animation: iriBorder 10s ease infinite, entranceUp .5s cubic-bezier(.16,1,.3,1) forwards;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  cursor: pointer;
}
.chat-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.chat-fab-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; }
.chat-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 36px rgba(0,106,102,.2), 0 0 20px rgba(210,230,255,.5), inset 0 0 14px rgba(255,255,255,.8);
}
.chat-fab:active { transform: scale(.97); }

/* ---- chat panel: widget + fullscreen ---- */
@keyframes chatPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 71;
  width: min(480px, calc(100vw - 40px));
  height: min(640px, calc(100dvh - 140px));
  display: flex; flex-direction: row;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(240,250,255,.82) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(44px); -webkit-backdrop-filter: blur(44px);
  border-radius: 30px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.06), 0 0 40px rgba(0,106,102,.04), inset 0 0 20px rgba(255,255,255,.85);
  animation: chatPanelIn .45s cubic-bezier(.16,1,.3,1), iriBorder 12s ease infinite;
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.chat-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}

/* ---- sidebar (hidden in widget, visible in fullscreen) ---- */
.chat-sidebar {
  display: none; flex-direction: column; width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(240,250,255,.4) 100%);
}
.chat-sidebar-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px; font-size: 14px; font-weight: 600; color: var(--accent);
}
.chat-sidebar-pulse {
  width: 10px; height: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 8px rgba(0,191,201,.4);
  animation: blobMorph 6.4s ease-in-out infinite, canvas-pulse 3.6s ease-in-out infinite;
}
.chat-sidebar-btn {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  color: var(--text-dim); display: grid; place-items: center; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.chat-sidebar-btn:hover { color: var(--accent); border-color: rgba(0,106,102,.3); background: var(--teal-50); }
.chat-sidebar-search {
  padding: 0 12px 10px;
}
.chat-sidebar-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 12px; font: inherit; font-size: 12px;
  background: rgba(255,255,255,.7); color: var(--text);
  transition: border-color .3s, box-shadow .3s;
}
.chat-sidebar-search input:focus { outline: none; border-color: rgba(0,106,102,.4); box-shadow: 0 0 12px rgba(0,106,102,.06); }
.chat-sidebar-list {
  flex: 1; overflow-y: auto; padding: 4px 8px 8px;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(0,106,102,.15) transparent;
}
.chat-sidebar-list::-webkit-scrollbar { width: 4px; }
.chat-sidebar-list::-webkit-scrollbar-thumb { background: rgba(0,106,102,.15); border-radius: 999px; }

.chat-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.chat-sidebar-item:hover { background: rgba(255,255,255,.7); border-color: var(--line); }
.chat-sidebar-item.active { background: var(--teal-50); border-color: rgba(0,106,102,.25); }
.chat-sidebar-item-info { flex: 1; min-width: 0; }
.chat-sidebar-item-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-sidebar-item.active .chat-sidebar-item-title { color: var(--accent); font-weight: 600; }
.chat-sidebar-item-meta {
  font-size: 10px; color: var(--text-dim); margin-top: 2px;
  font-family: var(--font-mono);
}
.chat-sidebar-item-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); opacity: .4;
}
.chat-sidebar-item.active .chat-sidebar-item-dot { opacity: 1; box-shadow: 0 0 6px rgba(0,191,201,.4); }
.chat-sidebar-item-delete {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: none; background: transparent; color: var(--text-dim);
  font-size: 14px; display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity .2s, color .2s;
}
.chat-sidebar-item:hover .chat-sidebar-item-delete { opacity: 1; }
.chat-sidebar-item-delete:hover { color: var(--warn); }
.chat-sidebar-empty {
  text-align: center; padding: 30px 16px; color: var(--text-dim);
  font-size: 12px; line-height: 1.6;
}

/* ---- fullscreen mode ---- */
.chat-panel.fullscreen {
  position: fixed; inset: 0; right: 0; bottom: 0;
  width: 100%; height: 100dvh;
  border-radius: 0;
  z-index: 200;
  animation: chatFullIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes chatFullIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
.chat-panel.fullscreen .chat-sidebar { display: flex; }
.chat-panel.fullscreen .chat-sidebar-toggle-btn { display: none; }
.chat-panel.fullscreen .chat-header-btn[aria-label="Gesprekken"] { display: none; }
.chat-panel.fullscreen .chat-convos { display: none !important; }
.chat-panel.fullscreen .chat-messages { max-width: 820px; margin: 0 auto; width: 100%; }
.chat-panel.fullscreen .chat-input-area { max-width: 820px; margin: 0 auto; width: 100%; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.chat-panel.fullscreen .chat-tool-indicator { max-width: 820px; margin: 0 auto; width: 100%; }
.chat-panel.fullscreen .chat-attachments { max-width: 820px; margin: 0 auto; width: 100%; }
.chat-panel.fullscreen .chat-msg { max-width: 80%; }
.chat-panel.fullscreen .chat-msg-bubble { font-size: 14px; padding: 12px 18px; }
.chat-panel.fullscreen .chat-panel-bar { padding: 10px 20px; }

/* widget mode: hide sidebar, show toggle */
.chat-panel:not(.fullscreen) .chat-sidebar { display: none; }
.chat-panel:not(.fullscreen) .chat-sidebar-toggle-btn { display: none; }

/* fullscreen icon swap (minimize arrows) */
.chat-panel.fullscreen #chat-fullscreen svg { display: none; }
.chat-panel.fullscreen #chat-fullscreen::before {
  content: '';
  display: block; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- header ---- */
.chat-panel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; flex-shrink: 0;
  background: rgba(255,255,255,.5);
  border-bottom: 1px solid var(--line-soft);
  cursor: grab; touch-action: none; user-select: none;
}
.chat-panel.fullscreen .chat-panel-bar { cursor: default; }
.chat-panel-bar:active { cursor: grabbing; }
.chat-panel.fullscreen .chat-panel-bar:active { cursor: default; }
.chat-pulse {
  width: 12px; height: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 10px rgba(0,191,201,.4);
  animation: blobMorph 6.4s ease-in-out infinite, canvas-pulse 3.6s ease-in-out infinite;
}
.chat-panel-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.chat-kicker {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: rgba(0,80,85,.6);
}
.chat-title {
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-header-btn {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  color: var(--text-dim); display: grid; place-items: center;
  transition: color .2s, border-color .2s, background .2s;
}
.chat-header-btn:hover { color: var(--accent); border-color: rgba(0,106,102,.3); background: var(--teal-50); }
.chat-header-btn.active { color: var(--accent); border-color: rgba(0,106,102,.4); background: var(--teal-50); }
.chat-panel-close {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  color: var(--text-dim); font-size: 16px; line-height: 1;
  transition: color .2s, border-color .2s;
}
.chat-panel-close:hover { color: var(--warn); border-color: rgba(212,86,78,.4); }

/* ---- conversation history overlay (widget mode) ---- */
.chat-convos {
  position: absolute; top: 57px; left: 0; right: 0; bottom: 0;
  z-index: 5; display: flex; flex-direction: column;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,250,255,.92));
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  animation: chatConvosIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes chatConvosIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.chat-convos-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 12px; font-weight: 600;
  color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.chat-convos-close-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  color: var(--text-dim); font-size: 16px; display: grid; place-items: center;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.chat-convos-close-btn:hover { color: var(--accent); border-color: rgba(0,106,102,.3); }
.chat-convos-list {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(0,106,102,.15) transparent;
}
.chat-convos-list::-webkit-scrollbar { width: 4px; }
.chat-convos-list::-webkit-scrollbar-thumb { background: rgba(0,106,102,.15); border-radius: 999px; }
.chat-convo-empty {
  text-align: center; padding: 40px 16px; color: var(--text-dim);
  font-size: 12px; line-height: 1.6;
}
.chat-convo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 16px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.chat-convo-item:hover { background: rgba(255,255,255,.7); border-color: var(--line); }
.chat-convo-item.active { background: var(--teal-50); border-color: rgba(0,106,102,.25); }
.chat-convo-info { flex: 1; min-width: 0; }
.chat-convo-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-convo-item.active .chat-convo-title { color: var(--accent); font-weight: 600; }
.chat-convo-meta {
  font-size: 10px; color: var(--text-dim); margin-top: 2px;
  font-family: var(--font-mono);
}
.chat-convo-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); opacity: .5;
}
.chat-convo-item.active .chat-convo-dot { opacity: 1; box-shadow: 0 0 6px rgba(0,191,201,.4); }
.chat-convo-delete {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: none; background: transparent; color: var(--text-dim);
  font-size: 14px; display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity .2s, color .2s;
}
.chat-convo-item:hover .chat-convo-delete { opacity: 1; }
.chat-convo-delete:hover { color: var(--warn); }

/* ---- messages area ---- */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: rgba(0,106,102,.15) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(0,106,102,.15); border-radius: 999px; }

/* welcome screen */
.chat-welcome {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px 12px 12px; gap: 14px;
}
.chat-welcome-icon { width: 48px; height: 48px; opacity: .6; }
.chat-welcome-icon svg { width: 48px; height: 48px; }
.chat-welcome-text { font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.chat-welcome-text strong { color: var(--text); }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.chat-suggestion {
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 11.5px;
  color: var(--text); cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.chat-suggestion:hover { border-color: rgba(0,106,102,.4); background: var(--teal-50); color: var(--accent); }

/* message bubbles */
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; animation: entranceUp .35s cubic-bezier(.16,1,.3,1) forwards; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.assistant { align-self: flex-start; align-items: flex-start; max-width: 96%; }
.chat-msg-bubble {
  padding: 10px 14px; font-size: 13px; line-height: 1.55;
  border-radius: 20px; word-break: break-word;
}
.chat-msg.user .chat-msg-bubble {
  background: var(--accent); color: #fff;
  border-bottom-right-radius: 6px;
}
.chat-msg.assistant .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(240,250,255,.7));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 12px rgba(31,38,135,.04), inset 0 0 10px rgba(255,255,255,.6);
  color: var(--text);
  border-bottom-left-radius: 6px;
}

/* rich markdown styling inside assistant bubbles */
.chat-msg.assistant .chat-msg-bubble p { margin: 0; }
.chat-msg.assistant .chat-msg-bubble p + p { margin-top: 8px; }
.chat-msg.assistant .chat-msg-bubble code {
  background: rgba(0,106,102,.06); padding: 1px 5px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 12px;
}
.chat-msg.assistant .chat-msg-bubble pre {
  background: rgba(0,20,25,.04); padding: 10px 12px; border-radius: 12px;
  overflow-x: auto; margin: 8px 0; font-size: 11.5px;
  position: relative;
}
.chat-msg.assistant .chat-msg-bubble pre code { background: none; padding: 0; }
.chat-msg.assistant .chat-msg-bubble ul, .chat-msg.assistant .chat-msg-bubble ol {
  margin: 6px 0; padding-left: 20px;
}
.chat-msg.assistant .chat-msg-bubble h1, .chat-msg.assistant .chat-msg-bubble h2,
.chat-msg.assistant .chat-msg-bubble h3 {
  font-size: 13px; font-weight: 600; margin: 10px 0 4px; color: var(--accent);
}
.chat-msg.assistant .chat-msg-bubble strong { color: var(--accent); }

/* ---- rich message blocks: tool calls, thoughts, code ---- */
.chat-block-tool {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin: 6px 0;
  border-radius: 10px; font-size: 11px; font-family: var(--font-mono);
  background: rgba(0,106,102,.04); border: 1px solid rgba(0,106,102,.1);
  color: var(--accent); cursor: pointer; transition: background .2s;
}
.chat-block-tool:hover { background: rgba(0,106,102,.08); }
.chat-block-tool-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  background: var(--accent); border-radius: 4px;
  display: grid; place-items: center;
}
.chat-block-tool-icon svg { width: 10px; height: 10px; color: #fff; }
.chat-block-tool-name { font-weight: 600; }
.chat-block-tool-detail { color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-block-think {
  margin: 6px 0; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(0,106,102,.08);
  background: rgba(240,250,255,.5);
}
.chat-block-think-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  font-size: 11px; font-family: var(--font-mono); color: var(--text-dim);
  transition: background .2s;
}
.chat-block-think-head:hover { background: rgba(0,106,102,.04); }
.chat-block-think-icon {
  width: 14px; height: 14px; flex-shrink: 0; opacity: .6;
}
.chat-block-think-body {
  display: none; padding: 0 12px 10px;
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
  font-family: var(--font-mono); white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow-y: auto;
}
.chat-block-think.open .chat-block-think-body { display: block; }
.chat-block-think-chevron {
  margin-left: auto; transition: transform .2s; font-size: 10px;
}
.chat-block-think.open .chat-block-think-chevron { transform: rotate(90deg); }

/* code block copy button */
.chat-code-copy {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--line); background: rgba(255,255,255,.8);
  color: var(--text-dim); font-size: 10px; cursor: pointer;
  display: grid; place-items: center; opacity: 0;
  transition: opacity .2s, color .2s, border-color .2s;
}
.chat-msg.assistant .chat-msg-bubble pre:hover .chat-code-copy { opacity: 1; }
.chat-code-copy:hover { color: var(--accent); border-color: rgba(0,106,102,.3); }
.chat-code-lang {
  position: absolute; top: 6px; left: 10px;
  font-size: 9px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); opacity: .6;
}

/* streaming cursor */
.chat-msg-bubble.streaming::after {
  content: ''; display: inline-block;
  width: 6px; height: 14px; margin-left: 2px; vertical-align: middle;
  background: var(--accent); border-radius: 2px;
  animation: cursorBlink 1s ease-in-out infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* thinking indicator */
.chat-msg-thinking {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 11px; color: var(--text-dim);
  font-family: var(--font-mono);
}
.chat-think-dots { display: flex; gap: 3px; }
.chat-think-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-bright); opacity: .4;
  animation: thinkDot 1.4s ease-in-out infinite;
}
.chat-think-dots span:nth-child(2) { animation-delay: .2s; }
.chat-think-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes thinkDot { 0%, 80%, 100% { opacity: .4; transform: scale(1); } 40% { opacity: 1; transform: scale(1.3); } }

/* tool indicator bar */
.chat-tool-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; font-size: 11px; color: var(--text-dim);
  background: rgba(255,255,255,.5); border-top: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.chat-tool-spinner {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(0,106,102,.15); border-top-color: var(--accent);
  animation: builder-spin .7s linear infinite;
}

/* ---- input area ---- */
.chat-input-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px; flex-shrink: 0;
  background: rgba(255,255,255,.5);
  border-top: 1px solid var(--line-soft);
}
.chat-input-area textarea {
  flex: 1; resize: none; border: 1px solid var(--line);
  border-radius: 20px; padding: 10px 16px; font: inherit; font-size: 13px;
  background: var(--glass-strong); color: var(--text);
  max-height: 120px; line-height: 1.4;
  transition: border-color .3s, box-shadow .3s;
}
.chat-input-area textarea:focus-visible {
  outline: none; border-color: rgba(0,106,102,.4);
  box-shadow: 0 0 16px rgba(0,106,102,.06); background: #fff;
}
.chat-send-btn {
  flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 50%; border: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  transition: filter .2s, transform .15s, opacity .3s;
  opacity: .4;
}
.chat-send-btn:not(:disabled) { opacity: 1; cursor: pointer; }
.chat-send-btn:not(:disabled):hover { filter: brightness(1.15); transform: scale(1.06); }
.chat-send-btn:not(:disabled):active { transform: scale(.95); }

/* ---- error message ---- */
.chat-msg-error {
  font-size: 12px; color: var(--warn); padding: 6px 14px;
  background: rgba(212,86,78,.06); border-radius: 12px;
}

/* ---- mobile ---- */
@media (max-width: 759px) {
  .chat-fab { right: 14px; bottom: 88px; padding: 0 16px; height: 48px; }
  .chat-fab-label { display: none; }
  .chat-panel {
    right: 0; bottom: 0; left: 0;
    width: 100%; height: 100dvh;
    border-radius: 0;
  }
  .chat-panel .chat-sidebar { display: none; }
  .mia-fab { bottom: 20px; right: 14px; }
}

/* builder FAB shift (ruimte voor chat FAB) */
@media (min-width: 760px) {
  .mia-fab { right: 20px; }
}



/* ============================================================
   FILE UPLOAD — attachment preview + attach button
   ============================================================ */
.chat-attach-btn {
  flex: 0 0 auto; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.6); color: var(--text-dim);
  display: grid; place-items: center; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.chat-attach-btn:hover { color: var(--accent); border-color: rgba(0,106,102,.3); background: var(--teal-50); }
.chat-attach-btn:active { transform: scale(.95); }

.chat-attachments {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px 0; flex-shrink: 0;
}
.chat-attachments.hidden { display: none; }

.chat-attach-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(240,250,255,.7));
  border: 1px solid var(--line);
  font-size: 11px; font-family: var(--font-mono);
  color: var(--text); max-width: 220px;
  animation: entranceUp .3s cubic-bezier(.16,1,.3,1) forwards;
}
.chat-attach-item-thumb {
  width: 32px; height: 32px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0;
  background: rgba(0,106,102,.06);
}
.chat-attach-item-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: rgba(0,106,102,.08); color: var(--accent);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.chat-attach-item-info {
  flex: 1; min-width: 0;
}
.chat-attach-item-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.chat-attach-item-size {
  font-size: 10px; color: var(--text-dim); margin-top: 1px;
}
.chat-attach-item-remove {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: none; background: transparent; color: var(--text-dim);
  font-size: 14px; cursor: pointer; display: grid; place-items: center;
  transition: color .2s;
}
.chat-attach-item-remove:hover { color: var(--warn); }
.chat-attach-item.uploading { opacity: .6; }
.chat-attach-item.uploading .chat-attach-item-name::after {
  content: ' uploaden...'; color: var(--text-dim); font-weight: 400;
}
.chat-attach-item.error { border-color: rgba(212,86,78,.3); }
.chat-attach-item.error .chat-attach-item-name { color: var(--warn); }

/* file attachment in message bubbles */
.chat-msg-attachment {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-bottom: 6px;
  border-radius: 10px; font-size: 11px;
  background: rgba(0,106,102,.04); border: 1px solid rgba(0,106,102,.1);
  color: var(--accent); cursor: pointer;
  transition: background .2s;
  font-family: var(--font-mono); text-decoration: none;
}
.chat-msg-attachment:hover { background: rgba(0,106,102,.08); }
.chat-msg-attachment-icon {
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 8px; font-weight: 700;
}
.chat-msg-attachment img {
  width: 20px; height: 20px; border-radius: 4px; object-fit: cover;
}
.chat-msg-attachment-name { font-weight: 500; }
.chat-msg-attachment-size { color: var(--text-dim); }

/* drag-over indicator */
.chat-messages.drag-over::after {
  content: 'Sleep bestanden hier';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(240,250,255,.9);
  border: 2px dashed var(--accent);
  border-radius: 20px;
  font: 600 14px/1 var(--font);
  color: var(--accent);
  pointer-events: none;
  z-index: 10;
}
.chat-messages { position: relative; }

/* ============================================================
   MIA CONTEXT MENU — rechtermuisklik op elk element
   ============================================================ */
.mia-ctx {
  position: fixed; z-index: 9999;
  min-width: 220px; max-width: 320px;
  padding: 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(240,250,255,.9) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-radius: 16px; overflow: visible;
  box-shadow: 0 16px 48px rgba(0,0,0,.1), 0 0 24px rgba(0,106,102,.06),
    inset 0 0 12px rgba(255,255,255,.7);
  animation: ctxIn .2s cubic-bezier(.16,1,.3,1), iriBorder 10s ease infinite;
}
.mia-ctx.hidden { display: none; }
@keyframes ctxIn {
  from { opacity: 0; transform: scale(.92) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.mia-ctx-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 8px; border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.mia-ctx-pulse {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,191,201,.4);
}
.mia-ctx-tag {
  font-size: 10px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mia-ctx-actions {
  display: flex; flex-direction: column; gap: 1px;
}

.mia-ctx-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  border: none; background: transparent;
  font: inherit; font-size: 12px; color: var(--text);
  cursor: pointer; width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.mia-ctx-btn:hover { background: var(--teal-50); color: var(--accent); }
.mia-ctx-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .6; }
.mia-ctx-btn:hover svg { opacity: 1; }
.mia-ctx-btn.danger:hover { background: rgba(212,86,78,.06); color: var(--warn); }

.mia-ctx-sep {
  height: 1px; background: var(--line-soft); margin: 4px 8px;
}

/* Vera sub-section: ask Vera about this element */
.mia-ctx-mia {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px; padding-top: 6px;
}
.mia-ctx-mia.hidden { display: none; }
.mia-ctx-mia-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 11px; font-weight: 600;
  color: var(--accent);
}
.mia-ctx-mia-head svg { opacity: .7; }
.mia-ctx-mia-input {
  display: flex; gap: 6px; padding: 6px 8px 4px; align-items: flex-end;
}
.mia-ctx-mia-input textarea {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 10px; font: inherit; font-size: 11px;
  background: rgba(255,255,255,.7); color: var(--text);
  transition: border-color .3s, height .15s ease;
  resize: none; overflow-y: auto; max-height: 120px;
  line-height: 1.4;
}
.mia-ctx-mia-input textarea:focus { outline: none; border-color: rgba(0,106,102,.4); }
.mia-ctx-mia-input button {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--accent); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: filter .2s, transform .15s;
}
.mia-ctx-mia-input button:hover { filter: brightness(1.15); transform: scale(1.06); }
.mia-ctx-mia-input button:active { transform: scale(.94); filter: brightness(.95); }

/* element highlight when context-menu targets it */
.mia-ctx-highlight {
  outline: 2px solid rgba(0,191,201,.6) !important;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(0,191,201,.2) !important;
  transition: outline .2s, box-shadow .2s;
}

/* ---- Vera Clipboard indicator ---- */
.clipboard-indicator {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 9998;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(240,250,255,.9));
  border: 1px solid rgba(0,191,201,.25);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 0 16px rgba(0,106,102,.06);
  animation: clipIn .25s cubic-bezier(.16,1,.3,1);
  font-size: 11px;
}
.clipboard-indicator.hidden { display: none; }
@keyframes clipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.95); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.clipboard-indicator-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,191,201,.4);
  animation: clipPulse 2s ease-in-out infinite;
}
@keyframes clipPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.clipboard-indicator-label { font-weight: 600; color: var(--accent); }
.clipboard-indicator-preview {
  color: var(--text-dim); max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clipboard-indicator-clear {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.06); color: var(--text-dim);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.clipboard-indicator-clear:hover { background: rgba(212,86,78,.1); color: var(--warn); }

/* ---- Frontend toggle active state ---- */
.window-btns button.frontend.active {
  background: var(--teal-50); color: var(--accent);
  border-color: rgba(0,191,201,.3);
}

/* ---- Pasted element preview marker ---- */
[data-mia-pasted] {
  position: relative;
}
[data-mia-pasted]::after {
  content: 'geplakt';
  position: absolute; top: -6px; right: -6px;
  font: 500 8px/1 var(--font-mono);
  padding: 2px 5px; border-radius: 4px;
  background: var(--accent); color: #fff;
  pointer-events: none; z-index: 100;
}

/* ---- Undo toast for preview deletes ---- */
.mia-undo-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 9998;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(240,250,255,.9));
  border: 1px solid rgba(0,191,201,.25);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  font-size: 12px; color: var(--text);
  animation: ctxIn .25s cubic-bezier(.16,1,.3,1);
}
.mia-undo-toast.hidden { display: none; }
.mia-undo-toast span { font-weight: 500; }
.mia-undo-btn {
  padding: 5px 14px; border-radius: 8px;
  border: 1px solid var(--accent); background: transparent;
  color: var(--accent); font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s;
}
.mia-undo-btn:hover { background: var(--accent); color: #fff; }

/* ---- Add element dialog ---- */
.mia-add-dialog {
  position: fixed; z-index: 9999;
  width: 280px; padding: 12px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(240,250,255,.9) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.1), 0 0 24px rgba(0,106,102,.06),
    inset 0 0 12px rgba(255,255,255,.7);
  animation: ctxIn .2s cubic-bezier(.16,1,.3,1), iriBorder 10s ease infinite;
}
.mia-add-dialog-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 10px; font-size: 12px; font-weight: 600;
  color: var(--accent);
}
.mia-add-dialog-head svg { opacity: .7; }
.mia-add-dialog textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font: inherit; font-size: 11px;
  background: rgba(255,255,255,.7); color: var(--text);
  resize: none; line-height: 1.4;
  transition: border-color .3s;
}
.mia-add-dialog textarea:focus { outline: none; border-color: rgba(0,106,102,.4); }
.mia-add-dialog-actions {
  display: flex; justify-content: flex-end; gap: 6px;
  margin-top: 8px;
}
.mia-add-dialog-actions button {
  padding: 6px 14px; border-radius: 8px;
  font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: filter .2s, transform .1s;
  border: none;
}
.mia-add-cancel {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line) !important;
}
.mia-add-cancel:hover { background: var(--teal-50); color: var(--text); }
.mia-add-confirm {
  background: var(--accent); color: #fff;
}
.mia-add-confirm:hover { filter: brightness(1.15); }

/* ---- Insertion marker (shows where element will be added) ---- */
.mia-insert-marker {
  height: 3px; margin: 4px 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  animation: markerPulse 1.5s ease infinite;
  pointer-events: none;
}
@keyframes markerPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* Blue action button in menubar */

/* ---------- Al Jazeera News Widget ---------- */

/* ── iframe bridge: cross-iframe drag & drop ── */
body.iframe-dragging .iframe-shield { display: block !important; }
body.iframe-dragging .window { transition: box-shadow .2s; }
.drop-highlight.home { outline: 2.5px dashed rgba(0,191,201,.5); outline-offset: -6px; border-radius: 16px; }
.window.drop-highlight { box-shadow: 0 0 0 3px rgba(0,191,201,.5), 0 8px 32px rgba(0,0,0,.15) !important; }
.home.drop-highlight::after {
  content: 'Sleep hier om een snelkoppeling te maken';
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  padding: 8px 18px; border-radius: 10px;
  background: rgba(0,191,201,.12); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0,191,201,.25);
  color: var(--accent); font: 500 12px/1.4 Geist,system-ui,sans-serif;
  white-space: nowrap; pointer-events: none; z-index: 100;
  animation: dropHint .4s ease-out;
}
@keyframes dropHint {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* ---- Homescreen shortcuts ---- */
.shortcut-tile .shortcut-icon {
  position: relative;
}
.shortcut-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(0,106,102,.2);
  pointer-events: none;
}
.shortcut-tile .app-tile-desc {
  font-size: 9px; opacity: .5; letter-spacing: .06em;
}

/* ---- Toast notification ---- */
.mia-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(0,60,60,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #fff; font: 500 13px/1.4 'Geist', system-ui, sans-serif;
  padding: 10px 24px; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 100000;
}
.mia-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}

/* ---- Drop zone highlight for homescreen ---- */
#home.drop-highlight {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: rgba(0,191,201,.04);
  border-radius: 16px;
  transition: outline .2s, background .2s;
}
#home.drop-highlight::after {
  content: 'Laat los voor snelkoppeling';
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  font: 500 12px/1 'Geist', system-ui, sans-serif;
  color: var(--accent); background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 8px 20px; border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,106,102,.1);
  white-space: nowrap; pointer-events: none; z-index: 10;
}

/* ===== Fix: thinking indicator text pulse ===== */
.chat-msg-thinking > span:last-child {
  animation: thinkTextPulse 2s ease-in-out infinite;
}
@keyframes thinkTextPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}
.chat-think-dots span {
  display: block;
}

/* ===== Fix: context-menu save bar styling ===== */
.chat-ctx-save-bar {
  display: flex; justify-content: center;
  padding: 12px 16px; margin-top: 8px;
  animation: ctxSaveIn .25s ease;
}
@keyframes ctxSaveIn { from { opacity: 0; transform: translateY(6px); } }
.chat-ctx-save-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 8px 14px;
  background: var(--glass-strong, rgba(255,255,255,.92));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-soft, rgba(191,201,200,.3));
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.chat-ctx-save-label {
  font-size: 12px; font-weight: 500; color: var(--text-dim, #5f6b6b);
}
.chat-ctx-save-actions {
  display: flex; align-items: center; gap: 4px;
}
.chat-ctx-keep {
  padding: 5px 14px; border-radius: 8px; border: none;
  font-size: 11px; font-weight: 600; font-family: inherit;
  background: var(--accent, #006970); color: #fff;
  cursor: pointer; transition: all .15s;
}
.chat-ctx-keep:hover { background: var(--accent-bright, #00bfc9); }
.chat-ctx-close {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: none; background: transparent;
  color: var(--text-dim, #5f6b6b); cursor: pointer;
  font-size: 14px; line-height: 1; transition: all .12s;
  font-family: inherit;
}
.chat-ctx-close:hover {
  background: rgba(212,86,78,.08); color: var(--warn, #d4564e);
}
.chat-ctx-save-bar.saved .chat-ctx-save-inner {
  border-color: var(--ok, #0f9d77);
}

/* ---- Quick Menu: edit inputs & color picker ---- */
.qm-input{width:100%;box-sizing:border-box;padding:8px 10px;border:1.5px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.5);color:var(--text);font:inherit;font-size:.92rem;outline:none;transition:border-color .2s}
.qm-input:focus{border-color:rgba(0,200,180,.6)}
.qm-colors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 0}
.qm-color-btn{width:32px;height:32px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;padding:0}
.qm-color-btn:hover{transform:scale(1.15)}
.qm-color-btn.active{border-color:#fff;transform:scale(1.2);box-shadow:0 0 8px rgba(255,255,255,.3)}
.qm-save{background:var(--accent)!important;color:#fff!important;border:1px solid var(--accent)!important}
.qm-save:hover{background:var(--accent-dk,#005a5e)!important}

/* ---------- MiaMedia: compressie/conversie prompt ---------- */
.mia-media-prompt{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .2s ease}
.mia-media-card{background:var(--bio-surface);border:1px solid var(--line-soft);border-radius:22px;padding:22px 24px;max-width:360px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mia-media-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mia-media-title{font-weight:700;font-size:15px;margin:0}
.mia-media-sub{font-size:11px;color:var(--text-dim);margin:2px 0 0}
.mia-media-desc{font-size:13px;line-height:1.5;color:var(--text);margin:0 0 14px}
.mia-media-quality{margin-bottom:16px}
.mia-media-quality input[type=range]{width:100%;margin-top:6px;accent-color:var(--accent)}
.mia-media-actions{display:flex;gap:8px}
.mia-media-skip{flex:1;padding:9px 14px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(255,255,255,.5);color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:background .15s}
.mia-media-skip:hover{background:rgba(255,255,255,.8)}
.mia-media-go{flex:1;padding:9px 14px;border:none;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.mia-media-go:hover{background:var(--accent-dk,#005a5e)}
.mia-media-go:disabled{opacity:.6;cursor:default}
.mia-media-status{font-size:11px;margin:10px 0 0;text-align:center}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ---------- qm icon editor enhancements ---------- */
.qm-upload-row{display:flex;justify-content:center;margin:10px 0 6px}
.qm-upload-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px dashed var(--accent);border-radius:12px;background:rgba(0,105,112,.06);color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.qm-upload-btn:hover{background:rgba(0,105,112,.12)}
.qm-upload-preview{text-align:center;margin:6px 0}
.qm-current-icon{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px}
.qm-current-icon img{width:48px;height:48px;object-fit:cover;border-radius:12px;border:2px solid var(--line-soft)}
.qm-remove-img{background:none;border:none;color:var(--warn);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:8px}
.qm-remove-img:hover{background:rgba(212,86,78,.1)}

/* ---------- Topbar builder icon (minimized canvas) ---------- */
.topbar-builder-icon{position:relative;color:var(--accent)!important}
.topbar-builder-icon.hidden{display:none}
.topbar-builder-icon .topbar-builder-dot{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .2s}
.topbar-builder-icon.active .topbar-builder-dot{opacity:1;animation:topbarPulse 1.5s ease infinite}
@keyframes topbarPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* ---- Queue Manager (topbar icon + window) ---- */
.topbar-queue-icon{position:relative}
.topbar-queue-icon.active svg{color:var(--accent)}
.topbar-queue-badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none;line-height:1}
.queue-manager{position:fixed;top:40px;right:20px;width:420px;height:480px;z-index:160;background:var(--bio-surface,rgba(238,243,244,.85));border:1px solid var(--line-soft,rgba(0,0,0,.08));border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.15);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);display:flex;flex-direction:column;overflow:hidden;transition:all .2s ease}
.queue-manager.hidden{display:none}
.queue-manager.fullscreen{inset:8px;width:auto;height:auto;border-radius:14px;top:32px}
.qm-win-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line-soft,rgba(0,0,0,.06));flex-shrink:0;user-select:none}
.qm-win-bar-left{display:flex;align-items:center;gap:8px;color:var(--accent,#006970)}
.qm-win-title{font-size:13px;font-weight:600}
.qm-win-bar-right{display:flex;gap:4px}
.qm-win-btn{width:28px;height:28px;border:none;border-radius:8px;background:transparent;color:var(--text,#1a2a2c);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.qm-win-btn:hover{background:rgba(0,0,0,.06)}
.qm-win-tabs{display:flex;padding:6px 14px 0;gap:4px;flex-shrink:0}
.qm-tab{padding:6px 14px;border:none;border-radius:10px 10px 0 0;background:transparent;color:var(--text-dim,#5a6a6c);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.qm-tab.active{background:rgba(0,105,112,.08);color:var(--accent,#006970)}
.qm-tab:hover:not(.active){background:rgba(0,0,0,.03)}
.qm-win-body{flex:1;overflow-y:auto;padding:10px 14px}
.qm-win-empty{text-align:center;padding:40px 20px;color:var(--text-dim);font-size:13px}
.qm-win-loading{text-align:center;padding:40px 20px;color:var(--text-dim);font-size:12px}
.qm-win-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--text-dim);flex-shrink:0}
.qm-force-stop{padding:5px 12px;border:1px solid var(--warn,#e74c3c);border-radius:8px;background:transparent;color:var(--warn,#e74c3c);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.qm-force-stop:hover{background:var(--warn,#e74c3c);color:#fff}
.qm-job{padding:12px;border:1px solid var(--line-soft,rgba(0,0,0,.06));border-radius:14px;margin-bottom:8px;background:rgba(255,255,255,.4);transition:all .15s}
.qm-job:hover{background:rgba(255,255,255,.7)}
.qm-job-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.qm-job-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.qm-job-status-dot.running{background:var(--accent,#006970);animation:pulse-dot 1.5s ease-in-out infinite}
.qm-job-status-dot.queued{background:#f39c12}
.qm-job-status-dot.done{background:#2ecc71}
.qm-job-status-dot.error{background:#e74c3c}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.qm-job-status-label{font-size:12px;font-weight:600;color:var(--text)}
.qm-job-time{font-size:10px;color:var(--text-dim);margin-left:auto}
.qm-job-duration{font-size:10px;color:var(--text-dim)}
.qm-job-prompt{font-size:12px;line-height:1.5;color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px}
.qm-job-app{font-size:11px;color:var(--accent);margin-bottom:4px}
.qm-job-error{font-size:11px;color:var(--warn,#e74c3c);margin-bottom:4px}
.qm-job-actions{display:flex;gap:6px}
.qm-job-stop,.qm-job-retry{padding:4px 12px;border-radius:8px;font:inherit;font-size:11px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.qm-job-stop{background:rgba(231,76,60,.1);color:#e74c3c}
.qm-job-stop:hover{background:#e74c3c;color:#fff}
.qm-job-retry{background:rgba(0,105,112,.08);color:var(--accent)}
.qm-job-retry:hover{background:var(--accent);color:#fff}
.qm-job-stop:disabled,.qm-job-retry:disabled{opacity:.5;cursor:default}
.qm-win-resize{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize}
.qm-win-resize::after{content:'';position:absolute;bottom:4px;right:4px;width:10px;height:10px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);opacity:.3}
/* Fix qm-input text readability */
.qm-input{color:var(--text,#1a2a2c)!important}
.qm-save{color:#fff!important;background:var(--accent,#006970)!important}


/* ---- Worklog Panel ---- */
.worklog-panel {
  position: fixed;
  right: 80px; top: 60px;
  width: 440px; height: 520px;
  background: rgba(247,249,251,.92);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border-radius: 24px;
  border: 1px solid rgba(0,105,112,.12);
  box-shadow: 0 12px 48px rgba(0,0,0,.10), 0 0 0 1px rgba(0,105,112,.06);
  z-index: 900;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: opacity .2s, transform .2s;
}
.worklog-panel.hidden { display: none; }
.worklog-panel.wl-fullscreen {
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  border-radius: 0;
}
.wl-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 8px;
  border-bottom: 1px solid rgba(0,105,112,.08);
  flex-shrink: 0;
}
.wl-bar-left { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.wl-title { font-size: 12px; letter-spacing: .03em; }
.wl-bar-right { display: flex; gap: 4px; }
.wl-btn {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--fg); opacity: .6;
  transition: background .15s, opacity .15s;
}
.wl-btn:hover { background: rgba(0,105,112,.08); opacity: 1; }
.wl-body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  scrollbar-width: thin; scrollbar-color: rgba(0,105,112,.15) transparent;
}
.wl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; color: var(--fg); opacity: .6; gap: 8px; padding: 24px;
}
.wl-empty-icon { opacity: .3; }
.wl-date-group { margin-bottom: 16px; }
.wl-date-label {
  font-size: 11px; letter-spacing: .04em; text-transform: capitalize;
  color: var(--accent); opacity: .7; padding: 4px 0 8px; position: sticky; top: 0;
  background: rgba(247,249,251,.95); backdrop-filter: blur(8px); z-index: 1;
}
.wl-entry {
  background: rgba(0,105,112,.03);
  border: 1px solid rgba(0,105,112,.06);
  border-radius: 14px; padding: 10px 14px; margin-bottom: 8px;
  transition: background .15s, border-color .15s;
}
.wl-entry:hover { background: rgba(0,105,112,.06); border-color: rgba(0,105,112,.12); }
.wl-entry-error { border-left: 3px solid rgba(220,60,60,.4); }
.wl-entry-success { border-left: 3px solid rgba(0,180,120,.3); }
.wl-entry-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.wl-entry-type { font-size: 12px; font-weight: 500; }
.wl-entry-time { font-size: 10px; opacity: .5; }
.wl-entry-prompt {
  font-size: 13px; line-height: 1.5; color: var(--fg); opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.wl-entry-err { font-size: 11px; color: #c44; margin-top: 4px; }
.wl-entry-actions {
  display: flex; gap: 6px; margin-top: 8px; opacity: 0;
  transition: opacity .15s;
}
.wl-entry:hover .wl-entry-actions { opacity: 1; }
.wl-entry-actions button {
  background: rgba(0,105,112,.06); border: 1px solid rgba(0,105,112,.1);
  border-radius: 8px; padding: 3px 10px; font-size: 11px; cursor: pointer;
  font-family: var(--mono); color: var(--accent);
  transition: background .15s;
}
.wl-entry-actions button:hover { background: rgba(0,105,112,.12); }
.wl-entry-del { margin-left: auto; opacity: .4; }
.wl-entry-del:hover { opacity: 1; color: #c44 !important; }

/* Ask Vera section */
.wl-ask {
  border-top: 1px solid rgba(0,105,112,.08);
  padding: 10px 16px 12px; flex-shrink: 0;
}
.wl-ask-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--accent); opacity: .7; margin-bottom: 6px;
}
.wl-ask-input { display: flex; gap: 6px; }
.wl-ask-input textarea {
  flex: 1; border: 1px solid rgba(0,105,112,.12); border-radius: 10px;
  padding: 7px 12px; font-size: 13px; font-family: var(--font);
  background: rgba(255,255,255,.6); color: var(--fg);
  resize: none; outline: none;
  transition: border-color .15s;
}
.wl-ask-input textarea:focus { border-color: var(--accent); }
.wl-ask-input button {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: opacity .15s;
}
.wl-ask-input button:hover { opacity: .85; }

/* Note form */
.wl-note-form {
  background: rgba(0,105,112,.04); border: 1px solid rgba(0,105,112,.1);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 12px;
}
.wl-note-input {
  width: 100%; border: 1px solid rgba(0,105,112,.1); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: var(--font);
  background: rgba(255,255,255,.6); color: var(--fg);
  resize: vertical; outline: none; margin-bottom: 8px;
}
.wl-note-input:focus { border-color: var(--accent); }
.wl-note-actions { display: flex; gap: 6px; justify-content: flex-end; }
.wl-note-actions button {
  padding: 5px 14px; border-radius: 8px; font-size: 12px; cursor: pointer;
  font-family: var(--mono); border: 1px solid rgba(0,105,112,.1);
}
.wl-note-save { background: var(--accent); color: #fff; border-color: var(--accent); }
.wl-note-cancel { background: transparent; color: var(--fg); }

/* Resize handle */
.wl-resize {
  position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize;
}
.wl-resize::after {
  content: ''; position: absolute; bottom: 4px; right: 4px;
  width: 8px; height: 8px; border-right: 2px solid rgba(0,105,112,.2);
  border-bottom: 2px solid rgba(0,105,112,.2);
}

/* Worklog button in window bar */
.window-btns .worklog {
  opacity: .5; transition: opacity .15s;
}
.window-btns .worklog:hover { opacity: 1; }
.window-btns .worklog svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .worklog-panel { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: 100% !important; height: 70vh; border-radius: 20px 20px 0 0; }
}

/* ════════════════════════════════════════════════════════════════════
   DEBUG CONSOLE — white breathing sidebar + detachable panel
   ════════════════════════════════════════════════════════════════════ */

/* Debug button in window bar */
.window-btns .debug-console-btn {
  opacity: .4; transition: opacity .15s, color .15s;
  position: relative;
}
.window-btns .debug-console-btn:hover { opacity: 1; }
.window-btns .debug-console-btn svg { width: 14px; height: 14px; }
.window-btns .debug-console-btn.has-errors { opacity: .85; color: #dc3c3c; }
.window-btns .debug-console-btn.has-warns { opacity: .75; color: #d4a017; }

/* Badge */
.debug-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; font-size: 9px; font-weight: 700;
  line-height: 15px; text-align: center;
  font-family: var(--font-mono);
  pointer-events: none;
}
.debug-badge.hidden { display: none; }
.debug-badge-error { background: #dc3c3c; color: #fff; }
.debug-badge-warn { background: #d4a017; color: #fff; }
@keyframes debug-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.debug-badge-error { animation: debug-pulse 2s ease-in-out infinite; }

/* ── Sidebar (inside window-body) ── */
.dbg-sidebar {
  position: relative;
  width: 340px;
  background: rgba(247, 249, 251, .95);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-left: 1px solid rgba(0, 105, 112, .10);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width .2s ease;
}
.dbg-sidebar.hidden { display: none; }
.dbg-sidebar-resize {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 10;
  background: transparent; transition: background .15s;
}
.dbg-sidebar-resize:hover,
.dbg-sidebar-resize:active {
  background: rgba(0, 105, 112, .25);
}

/* ── Detached floating panel ── */
.dbg-detached-panel {
  position: fixed;
  left: 100px; top: 80px;
  width: 520px; height: 480px;
  background: rgba(247, 249, 251, .94);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border-radius: 24px;
  border: 1px solid rgba(0, 105, 112, .12);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 105, 112, .06);
  z-index: 910;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: opacity .2s, transform .2s;
}
.dbg-detached-panel.hidden { display: none; }
.dbg-detached-panel.dbg-fullscreen {
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  border-radius: 0;
}

/* ── Shared styles for sidebar & detached ── */

/* Header bar */
.dbg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; gap: 8px;
  border-bottom: 1px solid rgba(0, 105, 112, .08);
  flex-shrink: 0;
}
.dbg-head-left { display: flex; align-items: center; gap: 7px; color: var(--accent); }
.dbg-head-right { display: flex; gap: 3px; }
.dbg-title { font-size: 12px; letter-spacing: .03em; color: var(--accent); font-weight: 500; }
.dbg-btn {
  background: none; border: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-dim); opacity: .6;
  transition: background .15s, opacity .15s;
}
.dbg-btn:hover { background: rgba(0, 105, 112, .08); opacity: 1; color: var(--accent); }

/* Filters */
.dbg-filters {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-bottom: 1px solid rgba(0, 105, 112, .06);
  flex-shrink: 0; flex-wrap: wrap;
}
.dbg-filter-btn {
  background: rgba(0, 105, 112, .04); border: 1px solid rgba(0, 105, 112, .08);
  border-radius: 8px; padding: 3px 9px; font-size: 11px;
  font-family: var(--font-mono); color: var(--text-dim); cursor: pointer;
  transition: all .15s;
}
.dbg-filter-btn:hover { background: rgba(0, 105, 112, .08); color: var(--accent); }
.dbg-filter-btn.active { background: rgba(0, 105, 112, .12); color: var(--accent); border-color: rgba(0, 105, 112, .20); font-weight: 500; }
.dbg-count { margin-left: auto; font-size: 10px; color: var(--text-dim); opacity: .6; }

/* Body / log area */
.dbg-body {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(0, 105, 112, .12) transparent;
  font-size: 12px;
}
.dbg-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; color: var(--text-dim); gap: 8px; opacity: .6;
}

/* Entries */
.dbg-entry {
  padding: 6px 10px; margin-bottom: 2px;
  border-radius: 10px; border-left: 3px solid transparent;
  transition: background .12s;
  cursor: default;
}
.dbg-entry:hover { background: rgba(0, 105, 112, .04); }
.dbg-entry[data-stack] { cursor: pointer; }
.dbg-error { border-left-color: rgba(220, 60, 60, .45); background: rgba(220, 60, 60, .05); }
.dbg-warn  { border-left-color: rgba(212, 160, 23, .40); background: rgba(212, 160, 23, .04); }
.dbg-log   { border-left-color: rgba(0, 105, 112, .12); }
.dbg-info  { border-left-color: rgba(0, 150, 200, .25); background: rgba(0, 150, 200, .03); }

.dbg-entry-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.dbg-level-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.dbg-dot-error { background: #dc3c3c; box-shadow: 0 0 6px rgba(220, 60, 60, .3); }
.dbg-dot-warn  { background: #d4a017; box-shadow: 0 0 5px rgba(212, 160, 23, .25); }
.dbg-dot-log   { background: #90a4ae; }
.dbg-dot-info  { background: #0096c8; }
.dbg-entry-time { font-size: 10px; color: var(--text-dim); opacity: .6; }
.dbg-entry-src { font-size: 10px; color: var(--accent); opacity: .7; margin-left: auto; }
.dbg-entry-fix {
  background: rgba(0, 105, 112, .08); border: 1px solid rgba(0, 105, 112, .15);
  border-radius: 6px; padding: 1px 8px; font-size: 10px;
  font-family: var(--font-mono); color: var(--accent); cursor: pointer;
  transition: all .15s; margin-left: 6px; white-space: nowrap;
}
.dbg-entry-fix:hover { background: rgba(0, 105, 112, .18); }

.dbg-entry-msg {
  margin: 0; padding: 0; font-size: 11px; line-height: 1.5;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  max-height: 100px; overflow-y: auto; opacity: .85;
}
.dbg-error .dbg-entry-msg { color: #c44; }
.dbg-warn  .dbg-entry-msg { color: #b8860b; }
.dbg-info  .dbg-entry-msg { color: #0077a0; }

.dbg-entry-stack {
  margin: 4px 0 0; padding: 6px 8px; font-size: 10px; line-height: 1.6;
  color: var(--text-dim); background: rgba(0, 105, 112, .04); border-radius: 8px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 140px; overflow-y: auto;
}
.dbg-entry-stack.hidden { display: none; }

/* Actions bar */
.dbg-actions-bar {
  border-top: 1px solid rgba(0, 105, 112, .08);
  padding: 8px 14px; flex-shrink: 0;
  display: flex;
}
.dbg-fix-all {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0, 105, 112, .06); border: 1px solid rgba(0, 105, 112, .15);
  border-radius: 10px; padding: 6px 14px; font-size: 12px;
  font-family: var(--font-mono); color: var(--accent); cursor: pointer;
  transition: all .15s; width: 100%; justify-content: center;
}
.dbg-fix-all:hover { background: rgba(0, 105, 112, .14); }
.dbg-fix-all svg { color: var(--accent); }

/* Resize handle (detached panel only) */
.dbg-resize {
  position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize;
}
.dbg-resize::after {
  content: ''; position: absolute; bottom: 4px; right: 4px;
  width: 8px; height: 8px; border-right: 2px solid rgba(0, 105, 112, .18);
  border-bottom: 2px solid rgba(0, 105, 112, .18);
}

/* Mobile */
@media (max-width: 600px) {
  .dbg-sidebar { width: 100%; max-width: 100%; position: absolute; inset: 0; z-index: 5; }
  .dbg-detached-panel { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: 100% !important; height: 70vh; border-radius: 20px 20px 0 0; }
}

/* ── Mobile files panel close button ── */
.files-panel-close {
  display: none;
  background: none; border: none;
  font-size: 1.5em; line-height: 1;
  cursor: pointer; color: var(--text-dim, #6b7686);
  padding: 4px 10px; border-radius: 8px;
  margin-left: auto;
  transition: background .2s, color .2s;
}
.files-panel-close:hover { background: rgba(28,39,51,.06); color: var(--accent, #006A66); }
@media (max-width: 759px) {
  .files-panel-close { display: block; }
  .files-viewer-close { min-width: 44px; min-height: 44px; font-size: 1.6em; display: grid; place-items: center; }
}

/* ---- chat: cross-device "Vera werkt" indicator ---- */
.chat-working-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; color: var(--accent);
  font-family: var(--font-mono);
}
.chat-sidebar-item.working .chat-sidebar-item-dot,
.chat-convo-item.working .chat-convo-dot {
  opacity: 1; background: var(--accent);
  animation: chat-working-pulse 1.1s ease-in-out infinite;
}
.chat-sidebar-item.working,
.chat-convo-item.working { border-color: rgba(0,191,201,.3); }
@keyframes chat-working-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,191,201,.5); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(0,191,201,0); }
}


/* ---------- live-rail: rij met instellingen-knop ---------- */
.live-row { display: flex; align-items: center; gap: 4px; }
.live-row .live-link { flex: 1; min-width: 0; }
.live-mk { color: #e0a400; font-size: 11px; }
.live-settings {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.45); border: 1px solid var(--line-soft);
  color: var(--text-dim); transition: background .25s, color .25s, transform .25s;
}
.live-settings svg { width: 16px; height: 16px; }
.live-settings:hover { background: #fff; color: var(--accent); transform: rotate(35deg); }

/* ---------- app-instellingen modal ---------- */
.aps-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(20,30,30,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.aps-overlay.show { opacity: 1; }
.aps-overlay.closing { opacity: 0; }
.aps {
  width: min(480px, 100%); max-height: 88vh; overflow-y: auto;
  border: 1px solid transparent; border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(240,250,255,.88) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  box-shadow: var(--shadow-glass);
  animation: iriBorder 12s ease infinite;
  transform: scale(.96) translateY(8px); transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.aps-overlay.show .aps { transform: scale(1) translateY(0); }
.aps-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft); }
.aps-dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 0 10px rgba(0,191,201,.5); }
.aps-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.aps-kicker { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .14em; }
.aps-title { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aps-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.5); border: 1px solid var(--line-soft); color: var(--text-dim);
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.aps-close svg { width: 16px; height: 16px; }
.aps-close:hover { background: #fff; color: var(--text); }
.aps-body { padding: 8px 20px 22px; }
.aps-sec { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.aps-sec:last-child { border-bottom: none; }
.aps-h { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.aps-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.aps-lbl { font-size: 12px; color: var(--text-dim); }
.aps-val { font-size: 12px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
a.aps-val:hover { color: var(--accent); text-decoration: underline; }
.aps-note { margin: 10px 0 0; font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.aps-input-row { display: flex; gap: 8px; margin-top: 8px; }
.aps-input {
  flex: 1; min-width: 0; padding: 10px 14px; font-size: 13px;
  background: var(--glass-strong); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.aps-input:focus { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(0,191,201,.15); }
.aps-btn {
  flex-shrink: 0; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  transition: filter .2s, opacity .2s;
}
.aps-btn:hover { filter: brightness(1.08); }
.aps-btn:disabled { opacity: .6; cursor: default; }
.aps-btn.ghost { background: rgba(255,255,255,.5); color: var(--text-dim); border: 1px solid var(--line); }
.aps-btn.ghost.danger { color: #b3261e; }
.aps-btn.ghost.danger:hover { background: #fff; color: #b3261e; filter: none; }
.aps-cd-current { margin-bottom: 12px; }
.aps-cd-current .aps-btn { margin-top: 10px; }
.aps-dns { margin-top: 14px; }
.aps-dns-intro { margin: 0 0 12px; font-size: 11px; color: var(--text-dim); line-height: 1.55; }
.aps-dns-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.aps-dns-h, .aps-dns-r { display: grid; grid-template-columns: 56px 64px 1fr 56px; gap: 8px; padding: 9px 12px; align-items: center; }
.aps-dns-h { background: rgba(0,106,112,.06); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.aps-dns-r { font-size: 12px; border-top: 1px solid var(--line-soft); }
.aps-dns-r .aps-copy { cursor: pointer; color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.aps-copy { cursor: pointer; }
.aps-err { margin: 10px 0 0; font-size: 12px; color: #b3261e; }
.aps-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.aps-switch-txt { display: flex; flex-direction: column; gap: 3px; }
.aps-sw-l { font-size: 13px; font-weight: 600; color: var(--text); }
.aps-sw-d { font-size: 11px; color: var(--text-dim); line-height: 1.45; }
.aps-switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; }
.aps-switch input { opacity: 0; width: 0; height: 0; }
.aps-slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(120,130,130,.35); transition: background .25s; }
.aps-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .25s; }
.aps-switch input:checked + .aps-slider { background: var(--accent); }
.aps-switch input:checked + .aps-slider::before { transform: translateX(20px); }
@media (max-width: 520px) {
  .aps-input-row { flex-direction: column; }
  .aps-btn { width: 100%; }
  .aps-dns-h, .aps-dns-r { grid-template-columns: 44px 52px 1fr 44px; gap: 6px; font-size: 11px; }
}

/* F4: Stripe-bijkoop bevestiging toast */
.cr-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);
  background:rgba(20,22,28,.92);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:13px;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);opacity:0;pointer-events:none;z-index:9999;
  transition:opacity .25s ease, transform .25s ease;}
.cr-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- WhatsApp join-banner (topbar) ---------- */
.wa-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 18px;padding-top:max(9px, env(safe-area-inset-top));
  background:linear-gradient(90deg, rgba(37,211,102,.16), rgba(0,105,112,.12));
  border-bottom:1px solid rgba(37,211,102,.35);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  font-size:13px;color:var(--ink, #16282a);
  animation:waBannerIn .35s ease;
}
@keyframes waBannerIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
.wa-banner-out{opacity:0;transform:translateY(-100%);transition:opacity .3s ease, transform .3s ease;}
.wa-banner-ico{width:20px;height:20px;flex:none;color:#1faa53;}
.wa-banner-txt{flex:1 1 240px;min-width:0;line-height:1.35;}
.wa-banner-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto;}
.wa-banner-join{
  display:inline-block;padding:6px 14px;border-radius:999px;background:#1faa53;color:#fff;
  font-weight:600;text-decoration:none;font-size:12.5px;white-space:nowrap;
  box-shadow:0 3px 12px rgba(31,170,83,.35);
}
.wa-banner-join:hover{background:#188f45;}
.wa-banner-later,.wa-banner-stop{
  background:transparent;border:1px solid rgba(0,0,0,.18);border-radius:999px;
  padding:5px 12px;font-size:12px;color:inherit;cursor:pointer;white-space:nowrap;font-family:inherit;
}
.wa-banner-later:hover,.wa-banner-stop:hover{background:rgba(0,0,0,.06);}
.wa-banner-stop{opacity:.75;}
@media (max-width:640px){
  .wa-banner{gap:8px;padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top));font-size:12px;}
  .wa-banner-actions{margin-left:0;width:100%;justify-content:flex-end;}
}

/* ================= PWA: native app-gevoel ================= */
html, body { overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }

/* geïnstalleerde app (standalone): safe-areas + geen tekst-selectie op OS-chrome */
html.standalone .menubar { padding-top: max(6px, env(safe-area-inset-top)); height: auto; min-height: 50px; }
html.standalone .dock { bottom: max(16px, calc(env(safe-area-inset-bottom) + 6px)); }
html.standalone .menubar, html.standalone .dock, html.standalone .tabbar,
html.standalone .live-rail, html.standalone .page-dots {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.standalone .mia-fab, html.standalone .chat-fab {
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px));
}

/* update-banner: nieuwe versie beschikbaar */
.pwa-update {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: max(60px, calc(env(safe-area-inset-top) + 56px));
  z-index: 9500; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; font-size: 13px; color: var(--text);
  background: var(--glass-strong);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,.65); border-radius: 999px;
  box-shadow: 0 16px 42px rgba(0,0,0,.14);
  animation: pwaSlideDown .45s cubic-bezier(.2,.9,.25,1.15);
}
.pwa-update-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(0,191,201,.18); }
.pwa-update button {
  border: none; border-radius: 999px; padding: 7px 16px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
}
.pwa-update button:hover { background: #00565c; }
@keyframes pwaSlideDown { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* installatie-chip boven de dock */
.pwa-install {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
  z-index: 9400; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 14px; font-size: 13px; color: var(--text);
  background: var(--glass-strong);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,.65); border-radius: 999px;
  box-shadow: 0 16px 42px rgba(0,0,0,.14);
  max-width: calc(100vw - 28px);
  animation: pwaSlideUp .45s cubic-bezier(.2,.9,.25,1.15);
}
.pwa-install svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.pwa-install-go {
  border: none; border-radius: 999px; padding: 7px 15px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.pwa-install-go:hover { background: #00565c; }
.pwa-install-x {
  border: none; background: none; color: var(--text-dim);
  font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 50%;
}
.pwa-install-x:hover { background: rgba(0,0,0,.06); }
@keyframes pwaSlideUp { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* meldingen-permissiekaart */
.pwa-push-ask {
  position: fixed; right: 18px; z-index: 9400;
  top: max(64px, calc(env(safe-area-inset-top) + 60px));
  width: min(340px, calc(100vw - 28px));
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px;
  background: var(--glass-strong);
  backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px);
  border: 1px solid rgba(255,255,255,.65); border-radius: 20px;
  box-shadow: 0 20px 52px rgba(0,0,0,.16);
  animation: pwaSlideDown2 .5s cubic-bezier(.2,.9,.25,1.12);
}
@keyframes pwaSlideDown2 { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
.pwa-push-icon {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
}
.pwa-push-icon svg { width: 19px; height: 19px; }
.pwa-push-txt { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.pwa-push-txt strong { font-size: 13.5px; }
.pwa-push-txt span { color: var(--text-dim); }
.pwa-push-btns { display: flex; flex-direction: column; gap: 6px; margin-left: auto; flex-shrink: 0; }
.pwa-push-btns button {
  border: none; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 600;
}
#pwa-push-yes { background: var(--accent); color: #fff; }
#pwa-push-yes:hover { background: #00565c; }
#pwa-push-no { background: rgba(0,0,0,.05); color: var(--text-dim); }
#pwa-push-no:hover { background: rgba(0,0,0,.09); }

/* iOS installatie-instructie (bottom sheet) */
.pwa-ios-sheet {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(20, 40, 42, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
}
.pwa-ios-card {
  width: min(440px, 100%);
  background: var(--bg); border-radius: 26px 26px 0 0;
  padding: 26px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 60px rgba(0,0,0,.22);
  animation: pwaSheetUp .4s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes pwaSheetUp { from { transform: translateY(60%); } to { transform: translateY(0); } }
.pwa-ios-card h3 { margin: 0 0 6px; font-size: 18px; }
.pwa-ios-card p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.pwa-ios-card ol { margin: 0 0 18px; padding-left: 22px; font-size: 14px; line-height: 2; }
.pwa-ios-card ol svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; color: var(--accent); }
.pwa-ios-card button {
  width: 100%; border: none; border-radius: 999px; padding: 12px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .pwa-update, .pwa-install, .pwa-push-ask, .pwa-ios-card { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   UI v2 (10-07-2026) — generative organic shell
   Doel: minder retro, meer ademend/organisch/futuristisch + mobiele UX
   Override-laag: wint door cascade-volgorde, raakt geen bestaande regels.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- ambient aurora: langzaam driftende kleurvelden ---------- */
@keyframes auroraDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(4vw, 3vh) scale(1.08); }
  66%      { transform: translate(-3vw, 5vh) scale(.95); }
}
@keyframes auroraDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-5vw, -4vh) scale(1.12); }
}
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(70px); will-change: transform;
}
body::before {
  width: 55vmax; height: 55vmax; left: -12vmax; top: -18vmax;
  background: radial-gradient(circle at 40% 40%, rgba(0,191,201,.13), rgba(210,230,255,.10) 45%, transparent 70%);
  animation: auroraDriftA 46s ease-in-out infinite;
}
body::after {
  width: 48vmax; height: 48vmax; right: -14vmax; bottom: -16vmax;
  background: radial-gradient(circle at 60% 60%, rgba(255,210,230,.14), rgba(210,255,230,.10) 50%, transparent 72%);
  animation: auroraDriftB 58s ease-in-out infinite;
}

/* ---------- topbar: zwevend HUD-eiland i.p.v. retro balk ---------- */
.menubar {
  margin: max(10px, env(safe-area-inset-top)) 12px 0;
  height: 46px; padding: 0 8px 0 6px; gap: 10px;
  border: 1px solid transparent; border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(240,250,255,.55) 100%) padding-box,
    linear-gradient(120deg, rgba(255,210,230,.55), rgba(210,255,230,.55), rgba(210,230,255,.55), rgba(230,210,255,.55)) border-box;
  background-size: 100% 100%, 300% 300%;
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 10px 30px rgba(31,38,135,.07), inset 0 0 14px rgba(255,255,255,.7);
  animation: iriBorder 14s ease infinite;
}
.menubar::after { display: none; }               /* haarlijn vervangen door randgradient */
html.standalone .menubar { padding-top: 0; height: 46px; min-height: 46px; }
/* home = ademende orb + naam */
.menubar-home {
  gap: 8px; padding: 5px 12px 5px 5px; min-height: 36px;
}
.menubar-home svg {
  width: 28px; height: 28px; padding: 5px; box-sizing: border-box;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blobMorph 9s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(0,106,102,.25), inset 0 0 6px rgba(255,255,255,.3);
}
.menubar-home span { font-size: 12.5px; letter-spacing: .16em; }
/* stats-cluster: kalmer, zonder eigen tweede rand-in-rand */
.menubar-right {
  border-color: transparent; animation: none;
  background: rgba(255,255,255,.4);
  box-shadow: inset 0 0 8px rgba(255,255,255,.6);
  padding: 4px 8px; gap: 10px;
}
.menubar-icon { min-width: 34px; min-height: 34px; }
.menubar-clock { font-size: 11.5px; opacity: .85; }

/* tabbar: zwevende chip-strip, geen volle balk */
.tabbar {
  margin: 8px 12px 0; height: auto; padding: 0;
  background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  gap: 6px;
}
.tab {
  height: 32px; padding: 5px 12px 5px 13px;
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(240,250,255,.45) 100%);
  border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 4px 14px rgba(31,38,135,.05), inset 0 0 8px rgba(255,255,255,.55);
}
.tab.active {
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(240,250,255,.82) 100%) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: iriBorder 8s ease infinite;
  box-shadow: 0 6px 18px rgba(0,106,102,.1), inset 0 0 10px rgba(255,255,255,.7);
}

/* ---------- homescreen: meer lucht, vloeiender ---------- */
.home { padding-top: 22px; }
.app-tile { gap: 12px; }
.app-tile .app-icon { position: relative; overflow: hidden; }
/* zachte spectrale sheen die door elk icoon trekt */
.app-tile .app-icon::after {
  content: ''; position: absolute; inset: -40%;
  background: conic-gradient(from 210deg,
    transparent 0 62%, rgba(255,210,230,.28) 70%, rgba(210,230,255,.30) 78%,
    rgba(210,255,230,.26) 86%, transparent 94%);
  animation: iconSheen 12s linear infinite; pointer-events: none;
}
@keyframes iconSheen { to { transform: rotate(1turn); } }
.app-tile:nth-child(2n) .app-icon::after { animation-duration: 15s; animation-delay: -6s; }
.app-tile:nth-child(3n) .app-icon::after { animation-duration: 18s; animation-delay: -11s; }
.app-icon svg { position: relative; z-index: 1; width: 28px; height: 28px; }
/* label: licht, zwevend, geen zware pill */
.app-tile-name {
  border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; padding: 3px 8px;
  text-shadow: 0 1px 6px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.7);
}
.app-tile:hover .app-tile-name, .app-tile:focus-visible .app-tile-name {
  background: rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,106,102,.08); animation: none;
}

/* page-indicator: vloeibare capsule-strip */
.page-dots { gap: 7px; padding-top: 12px; }
.page-dot { width: 7px; height: 7px; background: rgba(0,106,102,.16); }
.page-dot.active { width: 30px; height: 7px; }

/* ---------- dock: dieper glas, levendiger ---------- */
.dock { gap: 12px; padding: 11px 16px; padding-bottom: max(11px, env(safe-area-inset-bottom)); }
.dock-item { width: 48px; height: 48px; }
.dock-item::after { bottom: -7px; width: 5px; height: 5px; background: var(--accent-bright); box-shadow: 0 0 8px rgba(0,191,201,.7); }

/* ---------- FABs: rustiger duo rechtsonder ---------- */
.chat-fab { height: 56px; }
.mia-fab, .chat-fab { bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)); }

/* ---------- banners: zwevend, nemen geen topbar-ruimte in ---------- */
.wa-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
  width: min(560px, calc(100vw - 24px));
  z-index: 65; border-radius: 22px;
  border: 1px solid rgba(37,211,102,.4); border-bottom: 1px solid rgba(37,211,102,.4);
  padding: 12px 16px; padding-top: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(230,250,238,.85));
  box-shadow: 0 18px 48px rgba(0,0,0,.13);
  animation: pwaSlideUp .5s cubic-bezier(.2,.9,.25,1.12);
}
.wa-banner-out { transform: translateX(-50%) translateY(16px); }
.wa-banner-later, .wa-banner-stop { min-height: 36px; }
.wa-banner-join { padding: 8px 16px; min-height: 20px; }

/* ---------- melding-slots: banners/toasts stapelen i.p.v. overlappen ----------
   html.has-wab wordt door os.js gezet zolang de wa-banner zichtbaar is.
   Alles wat óók onder-midden leeft schuift dan één slot omhoog. */
html.has-wab .pwa-install {
  bottom: max(206px, calc(env(safe-area-inset-bottom) + 206px));
}
html.has-wab .mia-toast,
html.has-wab .mia-undo-toast,
html.has-wab .clipboard-indicator {
  bottom: max(206px, calc(env(safe-area-inset-bottom) + 206px));
}
@media (max-width: 759px) {
  html.has-wab .pwa-install,
  html.has-wab .mia-toast,
  html.has-wab .mia-undo-toast,
  html.has-wab .clipboard-indicator {
    bottom: max(248px, calc(env(safe-area-inset-bottom) + 248px));
  }
  /* push-permissiekaart nooit over de update-banner heen */
  .pwa-push-ask { top: max(112px, calc(env(safe-area-inset-top) + 108px)); }
}

/* ═══════════ touch-parity: hover-gedrag ook zonder muis ═══════════ */
@media (hover: none) {
  .app-tile:active .app-icon {
    background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(220,255,250,.7) 100%) !important;
    box-shadow: 0 8px 32px rgba(0,106,102,.1), inset 0 0 20px rgba(255,255,255,.9);
  }
  .dock-item:active { transform: scale(1.1); border-color: rgba(210,230,255,.9); }
  .tab:active:not(.active) { background: rgba(255,255,255,.7); color: var(--text); }
  .live-link:active { background: rgba(255,255,255,.8); }
  .menubar-icon:active { color: var(--accent); background: var(--teal-50); }
  .chat-fab:active, .mia-fab:active { transform: scale(.95); }
  /* iridescent hover-effect: activeer op touch via :active */
  .iri:active::before { opacity: 1; }
}

/* ═══════════ mobiel (<760px): maximaal schermrendement ═══════════ */
@media (max-width: 759px) {
  /* topbar: compact zwevend eiland — orb + OS-titel linksboven */
  .menubar { margin: max(8px, env(safe-area-inset-top)) 10px 0; height: 44px; padding: 0 6px 0 5px; flex-wrap: nowrap; }
  .menubar-home { padding: 4px 10px 4px 4px; gap: 7px; flex-shrink: 1; min-width: 0; justify-content: flex-start; }
  .menubar-home svg { width: 28px; height: 28px; flex-shrink: 0; }
  .menubar-home span {
    display: inline-block; font-size: 11px; letter-spacing: .12em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
  }
  .menubar-app { display: none; }             /* appnaam zit al in tab/venster */
  .menubar-right { gap: 5px; padding: 3px 5px; margin-left: auto; flex-shrink: 0; }
  .menubar-icon { min-width: 38px; min-height: 38px; }
  html.standalone .menubar { margin-top: max(10px, env(safe-area-inset-top)); }

  /* tabbar-chips compact */
  .tabbar { margin: 7px 10px 0; }
  .tab { height: 34px; padding: 5px 11px 5px 12px; }

  /* homescreen: minder dode ruimte */
  .home { padding: 14px 16px 88px; }
  .pager { margin: 0 -16px; }
  .page { padding: 10px 16px 8px; gap: 18px; }
  .page-dots { padding-top: 10px; }

  /* dock gecentreerd, veegbaar, boven safe-area */
  .dock {
    left: 50%; transform: translateX(-50%);
    max-width: calc(100vw - 24px); overflow-x: auto;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 4px));
    scrollbar-width: none;
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock-item { width: 46px; height: 46px; flex-shrink: 0; }

  /* FABs: chat wordt rond (label weg) — minder visuele drukte */
  .chat-fab { right: 82px; bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: blobMorph 8s ease-in-out infinite, iridescentShift 10s ease infinite; }
  .chat-fab-label { display: none; }
  .mia-fab { right: 16px; bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); }

  /* wa-banner boven dock/FABs, acties vol breed en dik genoeg om te tikken */
  .wa-banner { bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)); }
  .wa-banner-actions { width: 100%; justify-content: stretch; }
  .wa-banner-actions > * { flex: 1; text-align: center; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

  /* live-rail: grotere tikzone */
  .live-rail-toggle { padding: 16px 11px; min-width: 40px; }
}

/* ---------- mobiel control-center (bottom sheet) ---------- */
.cc-chip {
  display: none; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text-dim);
  padding: 4px 8px; border-radius: 999px; min-height: 34px;
}
.cc-chip-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ok); box-shadow: 0 0 8px rgba(15,157,119,.5);
  animation: livePulse 3.4s ease-in-out infinite;
}
.cc-chip.warn .cc-chip-dot { background: var(--warn); box-shadow: 0 0 8px rgba(212,86,78,.55); }
@media (max-width: 759px) { .cc-chip { display: inline-flex; min-width: 38px; min-height: 38px; justify-content: center; } }

.cc-sheet {
  position: fixed; inset: 0; z-index: 9550;
  background: rgba(20, 40, 42, .32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
}
.cc-card {
  width: min(460px, 100%);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(240,250,255,.9)) padding-box,
    var(--iri-spectrum) border-box;
  background-size: 100% 100%, 320% 320%;
  animation: pwaSheetUp .4s cubic-bezier(.2,.9,.3,1.05), iriBorder 12s ease infinite;
  border-radius: 26px 26px 0 0; border-bottom: none;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 60px rgba(0,0,0,.2);
}
.cc-grab { width: 42px; height: 5px; border-radius: 999px; background: rgba(0,0,0,.14); margin: 2px auto 14px; }
.cc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.cc-title { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.cc-clock { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cc-stat {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 12px 6px; border-radius: 18px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 0 10px rgba(255,255,255,.7), 0 2px 8px rgba(31,38,135,.04);
}
.cc-stat-val { font-size: 16px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.cc-stat-val.warn { color: var(--warn); }
.cc-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-dim); }
.cc-sub { font-size: 11px; color: var(--text-dim); text-align: center; margin-bottom: 14px; min-height: 14px; }
.cc-actions { display: flex; gap: 8px; }
.cc-actions button {
  flex: 1; min-height: 46px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--text);
  transition: background .2s, border-color .2s;
}
.cc-actions button:active { background: rgba(255,255,255,.95); }
.cc-actions .cc-logout { border-color: rgba(212,86,78,.35); color: var(--warn); }

/* ═══════════════════════════════════════════════════════════════════
   Chat v2 — organische metamorfose + mobile-first
   ═══════════════════════════════════════════════════════════════════ */

/* -- desktop/algemeen: lichter, meer lucht, organische accenten -- */
.chat-panel-bar {
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.chat-header-btn, .chat-panel-close { width: 32px; height: 32px; }
.chat-input-area { background: rgba(255,255,255,.42); }
.chat-input-area textarea { border-radius: 24px; }
.chat-send-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  box-shadow: 0 6px 16px rgba(0,106,102,.22);
}
.chat-msg.user .chat-msg-bubble {
  border-radius: 22px 22px 6px 22px;
  background: linear-gradient(135deg, var(--accent), #008a90);
  color: #fff; box-shadow: 0 6px 18px rgba(0,106,102,.18);
}
.chat-msg.assistant .chat-msg-bubble {
  border-radius: 6px 22px 22px 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(240,250,255,.7));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 14px rgba(31,38,135,.05), inset 0 0 10px rgba(255,255,255,.6);
}
.chat-messages { padding: 18px 16px 12px; gap: 14px; }
.chat-suggestion { min-height: 36px; }

/* -- mobiel (<760px): chat = strak fullscreen-sheet, alles tikbaar -- */
@media (max-width: 759px) {
  .chat-panel {
    inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: none;
    background: linear-gradient(165deg, rgba(255,255,255,.97) 0%, rgba(240,250,255,.94) 100%);
    animation: chatFullIn .3s cubic-bezier(.16,1,.3,1);
  }
  /* header: onder de notch, geen drag-gedoe, dikke tikdoelen */
  .chat-panel-bar {
    padding: max(12px, env(safe-area-inset-top)) 14px 10px;
    cursor: default; gap: 8px;
  }
  .chat-header-btn, .chat-panel-close { width: 40px; height: 40px; }
  #chat-fullscreen { display: none; }        /* zinloos op mobiel: chat is al fullscreen */
  .chat-kicker { display: none; }            /* minder ruis, meer titel */
  .chat-title { font-size: 15.5px; }
  .chat-pulse { width: 14px; height: 14px; }

  /* berichten: bredere bubbels, prettig leesbaar */
  .chat-messages { padding: 12px 14px 10px; gap: 12px; }
  .chat-msg { max-width: 88%; }
  .chat-msg.assistant { max-width: 100%; }
  .chat-msg-bubble { font-size: 14.5px; line-height: 1.5; padding: 11px 15px; }

  /* input: pill boven de home-indicator; 16px voorkomt iOS-zoom */
  .chat-input-area {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }
  .chat-input-area textarea {
    font-size: 16px; padding: 12px 16px; border-radius: 26px; max-height: 132px;
  }
  .chat-send-btn { width: 48px; height: 48px; }
  .chat-attach-btn { width: 48px; height: 48px; }
  .chat-attachments { padding: 8px 12px 0; }

  /* welkom + suggesties: veegbare chip-strip i.p.v. rommelige wrap */
  .chat-welcome { padding: 28px 14px 12px; }
  .chat-suggestions {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    width: 100%; max-width: 100%; padding: 2px 2px 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .chat-suggestions::-webkit-scrollbar { display: none; }
  .chat-suggestion { flex: 0 0 auto; min-height: 42px; font-size: 13px; padding: 10px 17px; }

  /* gesprekkenlijst: volwaardige regels, delete altijd bereikbaar */
  .chat-convos { top: calc(max(12px, env(safe-area-inset-top)) + 60px); }
  .chat-convos-head { padding: 12px 14px; }
  .chat-convos-close-btn { width: 38px; height: 38px; }
  .chat-convo-item { padding: 13px 14px; min-height: 54px; }
  .chat-convo-title { font-size: 14.5px; }
  .chat-convo-meta { font-size: 11px; }
  .chat-convo-delete { opacity: .55; width: 38px; height: 38px; font-size: 17px; }

  .chat-tool-indicator { padding: 7px 14px; }
  .chat-msg-thinking { padding: 8px 14px; }
}

/* -- touch-parity voor chat-bediening -- */
@media (hover: none) {
  .chat-header-btn:active, .chat-attach-btn:active, .chat-convos-close-btn:active {
    color: var(--accent); border-color: rgba(0,106,102,.3); background: var(--teal-50);
  }
  .chat-panel-close:active { color: var(--warn); border-color: rgba(212,86,78,.4); }
  .chat-suggestion:active { border-color: rgba(0,106,102,.4); background: var(--teal-50); color: var(--accent); }
  .chat-convo-item:active { background: var(--teal-50); }
  .chat-send-btn:not(:disabled):active { transform: scale(.92); }
}

/* ---------- reduced motion: alles rustig ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .app-tile .app-icon::after { animation: none; opacity: 0; }
  .menubar-home svg, .chat-fab { animation: none; border-radius: 14px; }
  .wa-banner, .cc-card { animation: none; }
}

/* ═══════════ UI v4 fixes (10-07-2026): popup-placement, dubbele topbar, tap-respons ═══════════ */

/* -- 3: directe tap-respons: geen dubbeltik-zoom-wachttijd op interactieve elementen -- */
button, [role="button"], .tab, .dock-item, .app-tile, .menubar-icon, .window-btns button,
.window-bar .back, .chat-fab, .mia-fab, a { touch-action: manipulation; }
button { -webkit-tap-highlight-color: transparent; }

@media (max-width: 759px) {
  /* -- 3: jank-fix — aurora statisch en goedkoper op mobiel (blur 70px + eeuwige
        animatie vrat de compositor leeg -> taps voelden traag/dubbel) -- */
  body::before, body::after { animation: none !important; filter: blur(44px); opacity: .85; will-change: auto; }
  .menubar { animation: none; }               /* iriBorder-loop niet nodig op klein scherm */
  .menubar-home svg { animation: blobMorph 9s ease-in-out infinite; } /* orb mag blijven ademen */

  /* -- 2: fullscreen app actief (html.fs-app via os.js) -> OS-topbar & tabbar weg;
        de window-bar is dan de enige balk. Geen doorschijnende dubbele balken meer. -- */
  html.fs-app .menubar, html.fs-app .tabbar { display: none !important; }
  .window.maximized .window-bar {
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,251,252,.94));
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding-top: max(0px, env(safe-area-inset-top)); height: auto; min-height: 50px;
  }
  .window.maximized { background: #f2f8f9; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* -- 1: install-chip ("Zet Vera OS op je beginscherm") = nette volle-breedte kaart
        onderin, boven dock/FABs, niet meer zwevend halfweg het scherm -- */
  .pwa-install {
    left: 14px; right: 14px; transform: none; animation: pwaCardUp .4s cubic-bezier(.2,.9,.25,1.1);
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
    border-radius: 20px; padding: 12px 12px 12px 16px; justify-content: flex-start;
  }
  .pwa-install span { flex: 1; min-width: 0; }
}
@keyframes pwaCardUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* -- 1b: als de WhatsApp-banner in beeld is, install-chip even niet tonen
      (stapelen halverwege het scherm was rommelig; chip komt terug zodra banner weg is) -- */
html.has-wab .pwa-install { display: none !important; }