/* SBWebUI beta — zelfde ontwerptokens, vormen en animaties als de Grok-versie */
:root, [data-theme="slayer"] {
  --bg: #05060a; --surface: #0a0c12; --elevated: #10131a; --line: #1a1e2a; --line-strong: #262b3c;
  --fg: #c8c6d4; --muted: #8a8798; --accent: #8f88b8; --on-accent: #0c0b12;
  --good: #3dcc7a; --bad: #ef6b78; --warn: #f0b34a;
  --think-ring: #1e40af; --think-glow: #3b82f6; --chat-width: 64rem;
  --radius-card: .5rem; --radius-btn: .25rem;
  --font-sans: "Instrument Sans", "Segoe UI", sans-serif; --font-display: "Syne", "Segoe UI", sans-serif;
  color-scheme: dark;
}
[data-theme="helder"] {
  --think-ring: #1d4ed8; --think-glow: #2563eb;
  --bg: #f3f6ff; --surface: #ffffff; --elevated: #e7edff; --line: #d5def8; --line-strong: #b7c4ee;
  --fg: #121833; --muted: #5c6796; --accent: #3d74f0; --on-accent: #ffffff;
  --good: #0f8a55; --bad: #c4283d; --warn: #9a6200; color-scheme: light;
}
[data-theme="contrast"] {
  --bg: #000; --surface: #000; --elevated: #111; --line: #fff; --line-strong: #fff;
  --fg: #fff; --muted: #d6d6d6; --accent: #c8c6d4; --on-accent: #05060a;
  --good: #00ff9c; --bad: #ff5a6e; --warn: #ffe600; color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg); }
*::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
html, body { height: 100%; overflow: hidden; } /* alleen #view scrolt; de pagina zelf nooit */
html { font-size: calc(16px * var(--text-scale, 1)); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); line-height: 1.5; font-size: 1rem; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--bg); cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; font-family: var(--font-display); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; margin-top: 1.2rem; } h3 { font-size: 1rem; }
code { background: var(--elevated); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; font: 13px ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
.muted { color: var(--muted); } .ok { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.pad { padding: 1rem; } .row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .grow { flex: 1; }
.hide { display: none !important; } .sr { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; } /* fixed: verlengt de pagina niet en veroorzaakt geen scroll bij focus */
.xs { font-size: .75rem; } .sm { font-size: .875rem; } .caps { text-transform: uppercase; letter-spacing: .05em; }

/* knoppen & velden (rounded-btn, border-line-strong, h-11) */
.btn, .tabs button, .themes button { height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--bg); color: var(--fg); font-size: .875rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn:hover, .tabs button:hover, .themes button:hover { border-color: var(--accent); }
.btn.sm, .themes button { height: 2rem; font-size: .75rem; padding: 0 .5rem; }
.btn.primary, .tabs button.on, .themes button.on, .seg button.on, .navbtn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .6; }
.square { width: 2.75rem; padding: 0; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: .5rem .75rem; width: 100%; min-height: 2.75rem; outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); outline: none; }
textarea { resize: vertical; min-height: 5rem; }
label { display: block; margin: .6rem 0; font-size: .875rem; color: var(--muted); }
label input, label select, label textarea { margin-top: .25rem; color: var(--fg); }
label.check { display: flex; gap: .5rem; align-items: center; color: var(--fg); } label.check input { width: auto; min-height: 0; margin: 0; }
small { display: block; margin-top: .2rem; }

/* shell: header h-14 elevated, zijmenu's standaard dicht (lg: ernaast) */
.shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); background: var(--bg); color: var(--fg); }
.header { height: 3.5rem; flex-shrink: 0; display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; border-bottom: 1px solid var(--line); background: var(--elevated); }
.header .square { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); display: grid; place-items: center; height: 2.75rem; }
.brandname { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; text-decoration: none; color: var(--fg); }
.header .right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.themes { display: none; gap: .5rem; } @media (min-width: 640px) { .themes { display: flex; } }
.userbtn { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.userbtn .avatar-user { width: 2rem; height: 2rem; font-size: .75rem; }
.userbtn .nm { font-weight: 600; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbtn button.link { background: transparent; border: 0; color: var(--muted); text-decoration: underline; padding: .25rem; font-size: .875rem; }
.rolebar { flex-shrink: 0; display: flex; gap: .5rem; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--line); background: var(--bg); font-size: .75rem; color: var(--muted); }
.body { display: grid; flex: 1; min-height: 0; width: 100%; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .body.l { grid-template-columns: 260px minmax(0, 1fr); } .body.r { grid-template-columns: minmax(0, 1fr) 240px; } .body.l.r { grid-template-columns: 260px minmax(0, 1fr) 240px; }
  .hide-lg-open { display: none !important; }
}
.aside { display: none; min-height: 0; flex-direction: column; overflow: auto; }
.aside.open { display: flex; position: fixed; inset: 0; z-index: 20; background: var(--bg); }
@media (min-width: 1024px) { .aside.open { position: static; } .aside.left.open { border-right: 1px solid var(--line); } .aside.right.open { border-left: 1px solid var(--line); } }
.sidehead { display: flex; align-items: center; justify-content: space-between; padding: .75rem; }
.sidehead h2 { margin: 0; font-size: 1.1rem; }
.sidenav { display: flex; flex-direction: column; gap: .25rem; border-bottom: 1px solid var(--line); padding: .75rem; }
.navbtn { height: 2.75rem; border-radius: var(--radius-btn); padding: 0 .75rem; text-align: left; font-size: .875rem; border: 1px solid transparent; background: transparent; color: var(--fg); }
.navbtn.on { background: var(--elevated); color: var(--fg); border-color: transparent; font-weight: 600; }
.sidepad { padding: .75rem; }
.convlist { list-style: none; margin: 0; padding: 0 .5rem .75rem; overflow: auto; flex: 1; min-height: 0; }
.conv { margin-bottom: .25rem; border-radius: var(--radius-btn); padding: .5rem; } .conv.on { background: var(--elevated); }
.conv .t { width: 100%; text-align: left; font-size: .875rem; background: transparent; border: 0; padding: .25rem; border-radius: var(--radius-btn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.conv .acts { display: flex; gap: .25rem; margin-top: .25rem; } .conv .acts button { height: 2rem; font-size: .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 0 .5rem; }
.rules { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .875rem; } .rules li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); } .rules li b { font-weight: 600; }
.view, main.view { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: auto; }
.foot { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--elevated); padding: .5rem .75rem; font-size: .8rem; color: var(--muted); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.pill { display: inline-block; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: .1rem .5rem; color: var(--muted); background: var(--bg); }
.pill.pub { color: var(--good); border-color: var(--good); } button.pill { height: auto; cursor: pointer; }

/* blokken */
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem; margin-bottom: .75rem; }
.block h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .25rem; } .block p { margin: 0; color: var(--fg); font-size: .9rem; white-space: pre-wrap; }

/* chat */
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.scroller { min-height: 0; flex: 1; overflow: auto; padding: 1rem; }
.col { margin: 0 auto; max-width: min(var(--chat-width), 100%); display: flex; flex-direction: column; gap: .75rem; }
.msgs { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: min(var(--chat-width), 100%); display: flex; flex-direction: column; gap: .75rem; }
.msgs li.user { align-self: flex-end; max-width: 85%; } .msgs li.assistant { display: flex; gap: .5rem; align-items: flex-start; align-self: flex-start; max-width: 85%; }
.avatar-ai { width: min(var(--avatar-size, 36px), 34vw); height: min(var(--avatar-size, 36px), 34vw); flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #05060a; box-shadow: 0 0 0 2px var(--line-strong); display: block; }
.avatar-ai img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-ai.stock img { transform: scale(1.1); } /* snijdt de lichte uitstraling van het standaardlogo weg */
.avatar-ai.big { width: 3.5rem; height: 3.5rem; }
/* denken: donkerblauwe puls om de avatar (vervangt de witte rand) */
.avatar-ai[data-state="thinking"] { animation: sb-ring 1.6s ease-in-out infinite; box-shadow: 0 0 0 2px var(--think-ring), 0 0 0 0 transparent; }
@keyframes sb-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--think-ring), 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px var(--think-ring), 0 0 14px 5px var(--think-glow); }
}
/* denk-tekst als tunnel: komt klein vanuit de verte op je af, wordt groot en verdwijnt langs je heen */
.think-tunnel { position: relative; height: 5.5rem; min-width: 16rem; overflow: hidden; color: var(--fg); font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%); }
.think-tunnel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; border-radius: 50%; border: 2px solid var(--think-glow); opacity: 0; animation: sb-ring-out 1.8s ease-out infinite; }
.think-tunnel span { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.8rem; text-align: center; opacity: 0; transform-origin: 50% 50%; white-space: nowrap; text-shadow: 0 0 14px var(--think-glow); animation: sb-tunnel 3.6s cubic-bezier(.5, 0, .9, .6) infinite; }
.think-tunnel span:nth-child(2) { animation-delay: 1.2s; } .think-tunnel span:nth-child(3) { animation-delay: 2.4s; }
@keyframes sb-ring-out { 0% { transform: scale(.15); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes sb-tunnel {
  0% { transform: scale(.12); opacity: 0; filter: blur(3px); }
  20% { opacity: .8; }
  55% { transform: scale(1); opacity: 1; filter: blur(0); }
  100% { transform: scale(5); opacity: 0; filter: blur(7px); }
}
.bubble { border-radius: 18px; padding: .5rem .75rem; font-size: .875rem; overflow-wrap: anywhere; min-width: 0; }
.user .bubble { border-bottom-right-radius: 5px; } .assistant .bubble { border-bottom-left-radius: 5px; }
.user .bubble { background: var(--accent); color: var(--on-accent); } .assistant .bubble { border: 1px solid var(--line); background: var(--surface); }
.bubble p { margin: .3rem 0; } .bubble p:first-child { margin-top: 0; } .bubble p:last-child { margin-bottom: 0; }
.bubble pre { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 2.2rem .6rem .6rem; overflow: auto; position: relative; margin: .5rem 0; }
.bubble pre code { border: 0; padding: 0; background: transparent; white-space: pre; }
.bubble ul { margin: .3rem 0; padding-left: 1.2rem; }
.codebar { position: absolute; top: 4px; right: 4px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; max-width: calc(100% - 8px); }
.copy { height: 1.6rem !important; font-size: .7rem !important; padding: 0 .4rem !important; }
.srcline { font-size: .7rem; color: var(--muted); margin-top: .25rem; }
.notice { max-width: min(var(--chat-width), 100%); margin: 0 auto; font-size: .85rem; color: var(--warn); }
.composer { border-top: 1px solid var(--line); } .composer .inner { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem; max-width: min(var(--chat-width), 100%); margin: 0 auto; }
.composer textarea { flex: 1; min-height: 2.75rem; max-height: 10rem; resize: none; padding: .5rem .75rem; font-size: .875rem; margin: 0; }
.composer .filelab { height: 2.75rem; display: grid; place-items: center; padding: 0 .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); font-size: .75rem; cursor: pointer; margin: 0; color: var(--fg); }
.composer .sel { width: auto; min-width: 7rem; margin: 0; font-size: .8rem; }
.metrics { font-size: .7rem; color: var(--muted); margin-top: .25rem; }
@keyframes sb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sb-think { animation: sb-blink .9s ease-in-out infinite; }
.typing::after { content: "▍"; animation: sb-blink 1s steps(2) infinite; margin-left: 1px; }

/* kaarten, tabs, tabellen */
.page { padding: 1rem; max-width: 60rem; width: 100%; margin: 0 auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem; margin-bottom: 1rem; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; }
.tbl-wrap { overflow-x: auto; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .checks { list-style: none; padding: 0; margin: .5rem 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .seg button { height: 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--bg); font-size: .875rem; }
.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(150%); background: var(--elevated); border: 1px solid var(--accent); padding: .6rem 1rem; border-radius: var(--radius-btn); transition: transform .2s, opacity .2s; z-index: 50; max-width: 90vw; opacity: 0; pointer-events: none; visibility: hidden; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; } .toast.err { border-color: var(--bad); }
.page-body p { margin: .5rem 0; white-space: pre-wrap; }

/* preloader / login: BootTunnel (canvas + kaart met hoekmarkeringen) */
.boot { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: var(--bg); color: var(--fg); }
.boot canvas { position: absolute; inset: 0; width: 100%; height: 100%; will-change: contents; }
.boot .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--bg) 0%, transparent 62%); }
.boot .center { position: relative; z-index: 10; display: grid; place-items: center; height: 100%; padding: 0 1rem; overflow: auto; }
.boot .bcard { position: relative; width: 100%; max-width: 36rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 2rem 1.5rem; text-align: center; }
.boot .bcard.left { text-align: left; max-width: 26rem; }
.boot .corner { position: absolute; width: .75rem; height: .75rem; border: 0 solid var(--accent); }
.boot .c1 { left: .5rem; top: .5rem; border-left-width: 1px; border-top-width: 1px; } .boot .c2 { right: .5rem; top: .5rem; border-right-width: 1px; border-top-width: 1px; }
.boot .c3 { left: .5rem; bottom: .5rem; border-left-width: 1px; border-bottom-width: 1px; } .boot .c4 { right: .5rem; bottom: .5rem; border-right-width: 1px; border-bottom-width: 1px; }
.boot .col1 { display: flex; flex-direction: column; align-items: center; }
.boot .logo96 { width: 6rem; height: 6rem; border-radius: 50%; } .boot .logo80 { width: 5rem; height: 5rem; border-radius: 50%; }
.boot .eyebrow { margin: .75rem 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.boot h1.big { margin: .75rem 0 0; font-size: 1.875rem; font-weight: 700; line-height: 1.2; } @media (min-width: 640px) { .boot h1.big { font-size: 2.25rem; } }
.boot .sub { margin: .75rem 0 0; font-size: .875rem; color: var(--muted); }
.boot .count { margin: 1.25rem 0 0; font-size: .875rem; color: var(--muted); }
.boot .bar { margin-top: .75rem; height: .375rem; width: 100%; max-width: 20rem; background: var(--line-strong); } .boot .bar > div { height: 100%; background: var(--accent); }
.boot .go { margin-top: 1.5rem; height: 2.75rem; width: 100%; max-width: 20rem; border-radius: var(--radius-btn); background: var(--accent); color: var(--on-accent); border: 0; font-size: .875rem; font-weight: 600; }
.boot .brand-l { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; } .boot .brand-l h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.boot form .btn.primary { width: 100%; margin-top: .5rem; } .boot .formgap > * { margin-top: .75rem; }
.boot .hr { text-align: center; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
body.plain .bcard { margin: 2rem auto; }

/* werkruimte: breedte-slider, assistent-kiezer, voorbeeldpaneel */
.workspace { display: flex; flex: 1; min-height: 0; min-width: 0; }
.chatbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .4rem .75rem; border-bottom: 1px solid var(--line); background: var(--surface); font-size: .8rem; color: var(--muted); }
.chatbar .who { display: flex; align-items: center; gap: .5rem; color: var(--fg); font-weight: 600; }
.chatbar .who .avatar-ai { width: 1.75rem; height: 1.75rem; }
.chatbar label { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--muted); }
.chatbar input[type=range] { width: 9rem; min-height: 0; padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
.pickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; max-width: min(var(--chat-width), 100%); margin: 0 auto .75rem; width: 100%; }
.pick { display: flex; gap: .6rem; align-items: center; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: .5rem .6rem; background: var(--surface); color: var(--fg); }
.pick.on { border-color: var(--accent); background: var(--elevated); }
.pick .nm { font-weight: 600; font-size: .9rem; display: block; } .pick .tg { font-size: .75rem; color: var(--muted); display: block; }
.pane { display: none; flex-direction: column; min-width: 0; width: min(46%, 42rem); border-left: 1px solid var(--line); background: var(--surface); }
.pane.open { display: flex; }
.pane .panehead { display: flex; gap: .4rem; align-items: center; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.pane .panebody { flex: 1; min-height: 0; overflow: auto; }
.pane iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.pane pre { margin: 0; padding: .75rem; white-space: pre-wrap; word-break: break-word; font: 13px ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
@media (max-width: 1023px) { .pane.open { position: fixed; inset: 0; z-index: 25; width: auto; } }
.assist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.assist-card { display: flex; flex-direction: column; gap: .5rem; }
.assist-card .top { display: flex; gap: .6rem; align-items: center; }
.avatar-user { width: min(var(--user-avatar-size, 36px), 34vw); height: min(var(--user-avatar-size, 36px), 34vw); flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--elevated); color: var(--fg); font-weight: 600; font-size: .8rem; }
.avatar-user img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-user.big { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; } .avatar-user.topbar { width: 2rem; height: 2rem; font-size: .75rem; }
.msgs li.user { display: flex; gap: .5rem; align-items: flex-start; justify-content: flex-end; }
.popover { position: absolute; right: .75rem; top: 100%; z-index: 30; width: min(22rem, calc(100vw - 1.5rem)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: .75rem; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.chatbar { position: relative; }
.display-panel { display: grid; gap: .25rem; }
.popover .dp-row, .display-panel .dp-row { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; align-items: center; margin: .3rem 0; }
.dp-row .dp-l { color: var(--fg); } .dp-row input[type=range] { grid-column: 1 / -1; width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
.hero { max-width: min(var(--chat-width), 100%); width: 100%; margin: 0 auto .75rem; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.hero-banner { display: block; width: 100%; height: var(--banner-h, 160px); object-fit: cover; }
.hero-text { padding: .75rem 1rem 1rem; } .hero-text h2 { margin: 0 0 .25rem; } .hero-text p { margin: 0; color: var(--muted); white-space: pre-wrap; }
.banner-prev { display: block; width: 100%; max-width: 32rem; aspect-ratio: 4 / 1; object-fit: cover; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); margin: .5rem 0; }
.banner-prev.empty { display: grid; place-items: center; color: var(--muted); font-size: .8rem; background: var(--elevated); }
/* tegels (kiezer op de startpagina en assistentenoverzicht) volgen de avatar-slider, in vaste verhouding */
.pick .avatar-ai, .assist-card .avatar-ai:not(.big) { width: var(--avatar-size, 36px); height: var(--avatar-size, 36px); }
.assist-card .avatar-ai.big { width: calc(var(--avatar-size, 36px) * 1.5); height: calc(var(--avatar-size, 36px) * 1.5); }
.pickers { grid-template-columns: repeat(auto-fill, minmax(calc(10rem + var(--avatar-size, 36px)), 1fr)); }
.or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .75rem; color: var(--muted); font-size: .8rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.social { display: grid; gap: .5rem; }
.social-btn { width: 100%; justify-content: center; }
.idents { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.idents li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius-card); padding: .5rem .75rem; }
.avatar-edit { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0; }

/* Staat "verminder beweging" aan in je besturingssysteem, dan staan de animaties uit, tenzij je in Weergave "Animaties altijd aan" kiest. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after { animation: none !important; transition: none !important; }
  :root:not([data-motion="on"]) .think-tunnel span { opacity: 0; } :root:not([data-motion="on"]) .think-tunnel span:first-child { opacity: 1; transform: none; }
  :root:not([data-motion="on"]) .avatar-ai[data-state="thinking"] { box-shadow: 0 0 0 3px var(--think-ring), 0 0 10px 3px var(--think-glow); }
}
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } .userbtn .nm { display: none; } }

.model-sel { height: 2rem; font-size: .75rem; padding: 0 .4rem; max-width: 14rem; }
.modellist { display: grid; gap: .25rem; margin: .5rem 0; }
.tablewrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.plain { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .35rem; }

.codebox { position: relative; margin: .5rem 0; min-width: min(22rem, 80vw); }
.codebox pre { margin: 0 !important; }
.codebox.collapsed pre { max-height: 13rem; overflow: hidden; }
.codebox.collapsed::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 2.4rem; height: 3.5rem; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; border-radius: 0 0 var(--radius-btn) var(--radius-btn); }
.code-toggle { width: 100%; margin-top: .25rem; }
.beeld-card { margin: .5rem 0; padding: .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); display: grid; gap: .5rem; }
.beeld-text { white-space: pre-wrap; word-break: break-word; font: 13px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .5rem .6rem; user-select: all; }
.beeld-chips { flex-wrap: wrap; gap: .35rem; }
textarea.beeld-text { width: 100%; resize: vertical; user-select: text; color: var(--fg); }
.beeld-ctrl { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.beeld-ctrl label { display: grid; gap: .2rem; } .beeld-ctrl select, .beeld-ctrl input { width: 100%; } .beeld-wide { grid-column: 1 / -1; }
.beeld-more summary { cursor: pointer; color: var(--muted); } .beeld-more[open] { display: grid; gap: .5rem; }
.muziek-res, .muziek-list { display: grid; gap: .6rem; } .muziek-item { display: grid; gap: .4rem; margin: 0; } .muziek-item audio { width: 100%; }
.mus-access { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--line); }
.beeld-prog { display: grid; gap: .3rem; } .beeld-prog.err span { color: var(--bad); }
.beeld-bar { height: .45rem; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; } .beeld-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.beeld-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.beeld-item { margin: 0; display: grid; gap: .35rem; align-content: start; } .beeld-item img, .beeld-item video { width: 100%; height: auto; border-radius: var(--radius-btn); border: 1px solid var(--line); display: block; }
.beeld-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .9rem; margin: .75rem 0; }
.beeld-gallery .beeld-item { padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.beeld-gallery figcaption { max-height: 4.5em; overflow: hidden; }
.beeld-thumb { all: unset; cursor: zoom-in; display: block; } .beeld-thumb:focus-visible img { outline: 2px solid var(--accent); }
.beeld-gallery.pub { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .beeld-gallery.pub .beeld-item { padding: .4rem; }
.beeld-gallery.pub img { aspect-ratio: 1 / 1; object-fit: cover; }
.beeld-dialog { max-width: min(92vw, 70rem); max-height: 92vh; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); color: var(--fg); }
.beeld-dialog::backdrop { background: rgba(0, 0, 0, .7); } .beeld-dialog img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; margin: 0 auto; }
.beeld-dialog-info { padding: .75rem 1rem; display: grid; gap: .35rem; }
.share-bar { gap: .3rem; align-items: center; } .share-bar .btn.sm { text-decoration: none; }
.img-access { display: grid; gap: .3rem; min-width: 9rem; } .img-access label { display: flex; gap: .35rem; align-items: center; } .num-sm { width: 6.5rem; }

/* ---------- profielpagina (editor en weergave) ---------- */
.page.wide { max-width: 90rem; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pf-side { position: sticky; top: 0; }
.pf-previewcard { margin-bottom: 0; }
.pf-framebox { height: calc(100vh - 12rem); min-height: 22rem; }
.pf-framebox .pf-frame, .page.wide > .pf-frame { width: 100%; height: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--bg); display: block; }
.page.wide > .pf-frame { height: calc(100vh - 11rem); min-height: 24rem; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pf-rows { display: grid; gap: .5rem; margin-bottom: .6rem; }
.pf-row { display: grid; grid-template-columns: 9rem 1fr 2fr auto; gap: .4rem; align-items: center; }
.pf-row > * { margin: 0 !important; }
.pf-block { border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .75rem; margin-bottom: .75rem; background: var(--bg); }
.pf-blockhead { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.pf-thumb { display: block; max-width: 100%; max-height: 14rem; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); margin-bottom: .4rem; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.45; white-space: pre; tab-size: 2; }
.pf-help { margin-top: .6rem; } .pf-help summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.member-card { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--fg); margin-bottom: 0; }
.member-card:hover, .member-card:focus-visible { border-color: var(--accent); }
@media (max-width: 1100px) { .pf-layout { grid-template-columns: 1fr; } .pf-side { position: static; order: -1; } .pf-framebox { height: 22rem; } }
@media (max-width: 640px) { .pf-two, .pf-row { grid-template-columns: 1fr; } }

/* ---------- achtergrondafbeelding op het chatscherm ---------- */
:root { --bg-img: .35; }
.chat.bgimg { position: relative; isolation: isolate; }
.chat.bgimg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--bg-img);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 55%, var(--bg) 100%), var(--chat-bg, url("bg-main.jpg")) center / cover no-repeat; mix-blend-mode: screen; }
[data-theme="helder"] .chat.bgimg::before { mix-blend-mode: multiply; opacity: calc(var(--bg-img) * .45); }
.assist-model { display: block; margin-top: .15rem; }

/* voortgangsbalk bovenaan tijdens uploaden */
body[data-uploading]::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: sb-upbar 1s linear infinite; }
@keyframes sb-upbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
body[data-uploading] { cursor: progress; }

/* ---------- inklapbare kaarten en menugroepen ---------- */
.cl-head { cursor: pointer; user-select: none; display: flex; align-items: center; gap: .4rem; }
.cl-head::after { content: "\25BE"; margin-left: auto; color: var(--muted); transition: transform .15s; font-size: .9em; }
.cl > .cl-head::after { transform: rotate(-90deg); }
.cl > :not(.cl-head) { display: none !important; }
.cl-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.card.cl .cl-head { margin-bottom: 0; }
.navgroup .sidenav { margin-top: .35rem; }
.folderlist { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .4rem; }
.folderlist .row { align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- bovenmenu, gecentreerd in de header ---------- */
.header { position: relative; }
.topmenu { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); display: flex; align-items: center; gap: .25rem; }
.topmenu.hide { display: none; }
.toptab { padding: .45rem .9rem; border-radius: var(--radius-btn); color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; border: 1px solid transparent; }
.toptab:hover { color: var(--fg); border-color: var(--line-strong); }
.toptab.on { color: var(--fg); background: var(--bg); border-color: var(--line-strong); }
.only-narrow .navbtn { display: block; text-decoration: none; }
@media (min-width: 900px) { .only-narrow { display: none; } }
@media (max-width: 899px) { .topmenu { display: none; } }
.menu-row input { flex: 1 1 8rem; min-width: 0; margin: 0; }

/* ---------- Social push en Discord-bot ---------- */
.statrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; margin: .4rem 0 .9rem; }
.statbox { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .55rem .7rem; min-width: 0; }
.statnum { font-size: 1.15rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot.online { background: #3fb950; box-shadow: 0 0 0 3px rgba(63,185,80,.25); } .dot.offline { background: #f85149; } .dot.paused { background: #d29922; box-shadow: none; }
.bars { display: flex; align-items: flex-end; gap: .35rem; height: 7.5rem; margin: .5rem 0 1rem; }
.barcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar { width: 100%; max-width: 2rem; height: var(--hh, 2%); background: var(--accent); border-radius: 3px 3px 0 0; }
.docs h3 { margin: 1rem 0 .3rem; } .docs p, .docs li { line-height: 1.5; }
.card.inset { background: var(--bg); }
.pill.ok { color: #3fb950; } .pill.bad { color: #f85149; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-btn); margin: .5rem 0; padding: .5rem .75rem; }

/* ---------- Discord-bot v0.8: kanalen, alarmen, commando's ---------- */
.chanrow { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-btn); margin: .3rem 0; background: var(--bg); list-style: none; }
.chanrow input[type=checkbox], .cmdrow input[type=checkbox], label.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
label.check { display: flex; gap: .4rem; align-items: center; margin: .25rem 0; }
.warnbox { border-color: var(--warn); }
.warnlist { margin: .2rem 0 0; padding-left: 1.2rem; } .warnlist li { margin: .25rem 0; }
.cmdrow { display: grid; grid-template-columns: auto 9rem 1fr auto; gap: .5rem; align-items: start; margin: .4rem 0; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--bg); }
.cmdname { display: flex; align-items: center; gap: .15rem; } .cmdname input { min-width: 0; margin: 0; }
.cmdrow textarea { margin: 0; min-width: 0; }
@media (max-width: 700px) { .cmdrow { grid-template-columns: auto 1fr; } .cmdrow textarea { grid-column: 1 / -1; } }
.savebar { position: sticky; bottom: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .6rem .8rem; background: var(--elevated); border: 1px solid var(--accent); border-radius: var(--radius-card); margin-top: .8rem; z-index: 3; }
.tablewrap { overflow-x: auto; } table.tbl { border-collapse: collapse; width: 100%; font-size: .85rem; } table.tbl th, table.tbl td { border-bottom: 1px solid var(--line); padding: .3rem .5rem; text-align: left; }

.runrow { margin: .6rem 0 1rem; flex-wrap: wrap; align-items: center; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.convlist[hidden] { display: none; }

/* ---- telefoon: chat is om te lezen ---- */
.jump { position: absolute; right: .75rem; bottom: 5.5rem; z-index: 5; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
@media (max-width: 640px) {
  .scroller { padding: .6rem .5rem; }
  .msgs { gap: .6rem; }
  .msgs li.user, .msgs li.assistant { max-width: 100%; }
  .msgs li.assistant > div { flex: 1; min-width: 0; }
  .msgs .avatar-ai, .msgs .avatar-user { width: min(var(--avatar-size, 36px), 14vw); height: min(var(--avatar-size, 36px), 14vw); }
  .msgs .avatar-user { width: min(var(--user-avatar-size, 36px), 14vw); height: min(var(--user-avatar-size, 36px), 14vw); }
  .bubble { font-size: 1rem; line-height: 1.5; padding: .55rem .7rem; }
  .composer .inner { padding: .4rem .5rem; gap: .4rem; }
  .composer textarea { min-height: 2.5rem; }
  .composer .filelab { padding: 0 .4rem; }
  .composer .warn { padding: .3rem .6rem 0 !important; font-size: .75rem; }
  .foot { padding: .2rem .6rem; font-size: .7rem; gap: .5rem; }
  .foot > span { display: none; }
  .chatbar { padding: .3rem .5rem; gap: .4rem; }
  .userbtn .link { display: none; }
  .think-tunnel { min-width: 0; width: 100%; max-width: 14rem; }
}

.brandbox { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brandbox .ver { font-size: .65rem; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock[hidden] { display: none; }
.clock .t { font-weight: 700; font-size: .95rem; color: var(--fg); }
.clock .d { font-size: .65rem; color: var(--muted); }
@media (max-width: 380px) { .clock .d { display: none; } }

.ragsrc { font-size: .75rem; color: var(--muted); margin-top: .35rem; }
.ragsrc a { color: var(--accent, inherit); }
.catline.sub { padding-left: 1.2rem; }

/* Chatballonnen (v0.8.4): vorm, grootte, positie en transparantie; de keuze staat in Weergave (data-attributen op <html>) */
html[data-bshape="semi"] .bubble { border-radius: 10px; } html[data-bshape="semi"] .user .bubble { border-bottom-right-radius: 4px; } html[data-bshape="semi"] .assistant .bubble { border-bottom-left-radius: 4px; }
html[data-bshape="square"] .bubble, html[data-bshape="square"] .user .bubble, html[data-bshape="square"] .assistant .bubble { border-radius: 2px; }
html[data-bsize="compact"] .bubble { padding: .3rem .55rem; font-size: .8125rem; line-height: 1.4; }
html[data-bsize="large"] .bubble { padding: .8rem 1.05rem; font-size: 1.0625rem; line-height: 1.55; }
html[data-bpos="stack"] .msgs li.user { flex-direction: column-reverse; align-items: flex-end; }
html[data-bpos="stack"] .msgs li.assistant { flex-direction: column; align-items: flex-start; }
html[data-bpos="stack"] .msgs li.assistant > div { flex: none; max-width: 100%; }
html[data-btrans="semi"] .user .bubble { background: color-mix(in srgb, var(--accent) 65%, transparent); }
html[data-btrans="semi"] .assistant .bubble { background: color-mix(in srgb, var(--surface) 60%, transparent); }
html[data-btrans="glass"] .user .bubble { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--fg); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-btrans="glass"] .assistant .bubble { background: color-mix(in srgb, var(--surface) 28%, transparent); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bubble-prev { list-style: none; margin: .5rem 0; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); background: var(--bg); }
.bubble-prev li { max-width: 85%; } .bubble-prev li.user { align-self: flex-end; } .bubble-prev li.assistant { align-self: flex-start; }
.dp-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .35rem; margin: .25rem 0 .6rem; } .dp-seg button { height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--bg); color: var(--fg); font-size: .8125rem; } .dp-seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--elevated); color: var(--accent); font-weight: 600; }

/* Blokkenbeheer: indelingskaart (v0.8.4) */
.bmap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; } .bmap { display: grid; gap: .6rem; } .bmap-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: .6rem; align-items: stretch; }
.bmap-zone { border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); padding: .5rem; min-height: 6rem; display: flex; flex-direction: column; gap: .4rem; } .bmap-zone.over { border-color: var(--accent); background: var(--elevated); } .bmap-zone.full header span { color: var(--warn); }
.bmap-zone header { display: flex; align-items: center; gap: .5rem; } .bmap-zone header strong { flex: 1; font-size: .8125rem; } .bmap-list { display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.z-start .bmap-list, .z-footer .bmap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.bmap-tile { border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--bg); padding: .45rem .55rem; cursor: grab; } .bmap-tile:focus-visible, .bmap-tile.on { border-color: var(--accent); outline: none; } .bmap-tile.drag { opacity: .45; } .bmap-tile.concept { border-style: dashed; opacity: .8; }
.bmap-t { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .8125rem; } .bmap-b { margin: .2rem 0 .35rem; font-size: .75rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bmap-acts { display: flex; gap: .3rem; } .bmap-acts .btn { height: 2rem; min-width: 2rem; padding: 0 .4rem; } .bmap-to { height: 2rem; min-height: 2rem; padding: 0 .3rem; font-size: .75rem; flex: 1; min-width: 0; }
.bmap-fixed { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); color: var(--muted); font-size: .75rem; display: grid; place-items: center; padding: .5rem; text-align: center; } .z-chat { min-height: 8rem; }
.bmap-live { margin-bottom: .6rem; } .bmap-empty { margin: .4rem 0; }
@media (max-width: 960px) { .bmap-layout { grid-template-columns: 1fr; } .bmap-mid { grid-template-columns: 1fr; } .bmap-mid .z-chat { order: -1; min-height: 3rem; } .bmap-tile { cursor: default; } }

/* OG-simulator (v0.8.4) */
.sim-stage { background: repeating-conic-gradient(var(--elevated) 0% 25%, var(--bg) 0% 50%) 0 0 / 16px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 1rem; display: flex; justify-content: center; overflow-x: auto; }
.sim-frame { width: 100%; transition: max-width .2s; } .sim-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: .6rem .75rem; display: flex; flex-direction: column; gap: .3rem; overflow: hidden; } .sim-card p { margin: 0; font-size: .8125rem; color: var(--fg); overflow-wrap: anywhere; } .sim-title { font-size: .9375rem; overflow-wrap: anywhere; }
.sim-card.discord { border-left: 4px solid var(--accent); } .sim-img { width: 100%; max-height: 16rem; object-fit: cover; border-radius: var(--radius-btn); display: block; } .sim-img.none { display: grid; place-items: center; min-height: 6rem; border: 1px dashed var(--line-strong); }
.sim-card:not(.discord):not(.small) { padding: 0; gap: 0; } .sim-card:not(.discord):not(.small) .sim-img { border-radius: 0; } .sim-txt { padding: .6rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.sim-card.small { flex-direction: row; align-items: center; } .sim-card.small .sim-img { width: 5.5rem; height: 5.5rem; flex: none; }
.popover { max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
.bmap-acts { flex-wrap: wrap; } .bmap-mid .bmap-to { flex-basis: 100%; }

/* Afstand tussen avatar en ballon (slider in Weergave, onder de avatar-instellingen) */
.msgs li.user, .msgs li.assistant { gap: var(--bubble-gap, 8px); }

/* Projecten (v0.8.5) */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin-bottom: 1rem; } .proj-card { display: block; color: var(--fg); text-decoration: none; margin: 0; } .proj-card:hover, .proj-card:focus-visible { border-color: var(--accent); outline: none; } .proj-card.arch { opacity: .65; } .proj-card h3 { margin: 0 0 .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; } .chip { font-size: .7rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: .1rem .55rem; color: var(--muted); background: var(--bg); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; margin: .4rem 0 .8rem; } .tpl { text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--bg); color: var(--fg); padding: .55rem .65rem; min-height: 4.5rem; } .tpl.on { border-color: var(--accent); background: var(--elevated); }
.tool-card { margin: 0; display: flex; flex-direction: column; gap: .35rem; } .tool-card.on { border-color: var(--accent); } .tool-card p { margin: 0; }

/* Beheer > Privacy en voorwaarden */
.legal-ed { width: 100%; box-sizing: border-box; font: .88rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; min-height: 12rem; }
.legal-prev { margin-top: .8rem; padding: 1rem 1.2rem; border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 12px; }
.legal-prev h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.legal-prev h2 { font-size: 1.1rem; margin: 1.4rem 0 .3rem; }
.legal-prev h1 + p { opacity: .7; font-size: .9rem; }
.foot a.link { margin-inline-start: .8rem; font-size: .85rem; }

/* Voorlezen */
.msgtools { margin-top: .3rem; display: flex; gap: .4rem; }
.tts-btn { display: inline-flex; align-items: center; gap: .35rem; }
.tts-btn.on { outline: 2px solid var(--accent, #a58bff); outline-offset: 1px; }

/* Modelbeheer (Beheer, Modellen) */
.mm-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; margin: .4rem 0; max-height: 10rem; overflow: auto; }
progress { accent-color: var(--accent); }
.mm-info[hidden], .btn[hidden], progress[hidden] { display: none !important; }

/* v0.8.8: afbeeldingen in de chat, vervolgvragen, projectlabels */
.imgchips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem .75rem 0; } .imgchips:empty { display: none; }
.imgchip { position: relative; } .imgchip img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .5rem; border: 1px solid var(--border, #8884); }
.imgchip .x { position: absolute; top: -.4rem; right: -.4rem; width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--border, #8886); background: var(--bg, #fff); color: var(--fg); cursor: pointer; line-height: 1; }
.chatimgs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } .chatimgs img { display: block; max-width: min(16rem, 100%); max-height: 12rem; border-radius: .5rem; }
.followups { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; } .followups[hidden] { display: none; }
.followups .chip { font: inherit; font-size: .9rem; text-align: left; min-height: 2.5rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--accent, #5b3fd1); background: transparent; color: var(--fg); cursor: pointer; }
.followups .chip:hover, .followups .chip:focus-visible { background: var(--accent, #5b3fd1); color: #fff; outline: none; }
.projtag { display: inline-block; margin-right: .4rem; padding: 0 .4rem; border-radius: .4rem; font-size: .75rem; border: 1px solid var(--border, #8886); }
.projlink { text-decoration: none; } .projmove { padding: .25rem 0; flex-wrap: nowrap; }
.projconv { margin: 0; padding-left: 1.2rem; } .projconv li { margin: .25rem 0; }

/* v0.9: specialisten, mapkoppeling, dicteren */
.reports { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 .5rem; } .reports:empty { display: none; }
.report { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface, transparent); padding: .4rem .75rem; }
.report summary { cursor: pointer; min-height: 2rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.report-body { padding: .25rem 0 .5rem; overflow-wrap: anywhere; } .report-body .row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.working { color: var(--muted); font-size: .9rem; padding: .25rem 0; }
.folderpanel { max-width: min(var(--chat-width), 100%); margin: 0 auto; padding: .6rem .75rem; border-top: 1px solid var(--line); } .folderpanel.hide, .foldchip.hide { display: none; }
.foldlist { max-height: 14rem; overflow: auto; display: flex; flex-direction: column; gap: .15rem; margin: .4rem 0; font-size: .9rem; }
.foldchip { max-width: min(var(--chat-width), 100%); margin: 0 auto; padding: .3rem .75rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
#mic-btn.on { background: var(--accent, #5b3fd1); color: #fff; }

/* Inlogvenster als holo-liftdeur: dicht = alleen logo, hover/focus = twee deurhelften schuiven uit elkaar */
.lift { perspective: 1000px; }
.lift-head { cursor: pointer; outline-offset: 4px; }
.lift-hint { text-align: center; margin: .25rem 0 0; transition: opacity .3s, max-height .4s; max-height: 2rem; overflow: hidden; }
.lift.open .lift-hint { opacity: 0; max-height: 0; margin: 0; }
.lift-body { position: relative; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.2s cubic-bezier(.45, 0, .2, 1); }
.lift.open .lift-body { grid-template-rows: 1fr; transition-duration: 1.5s; }
.lift-inner { min-height: 0; overflow: hidden; opacity: 0; transform: rotateX(-10deg) scaleY(.96); transform-origin: top center; visibility: hidden;
  transition: opacity .4s .18s, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s; }
.lift.open .lift-inner { opacity: 1; transform: none; visibility: visible; transition: opacity .4s .18s, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.lift-body::before, .lift-body::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 55%, color-mix(in srgb, var(--accent) 22%, transparent)),
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--accent) 14%, transparent) 3px 4px);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--accent) 25%, transparent);
  backdrop-filter: none; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s .1s; }
.lift-body::before { left: 0; transform-origin: left center; }
.lift-body::after { right: 0; transform-origin: right center; }
.lift.open .lift-body::before { transform: translateX(-102%) rotateY(55deg); opacity: 0; }
.lift.open .lift-body::after { transform: translateX(102%) rotateY(-55deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lift-body, .lift-inner, .lift-body::before, .lift-body::after, .lift-hint { transition: none !important; } }

.lift-snd { font: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* tempo afgestemd op het deurgeluid: openen ca. 1,5 s, sluiten ca. 1,2 s */
.lift-body::before, .lift-body::after { transition: transform 1.2s cubic-bezier(.45, 0, .2, 1), opacity 1s .1s; }
.lift.open .lift-body::before, .lift.open .lift-body::after { transition-duration: 1.5s, 1.2s; }
.lift-inner { transition: opacity .5s .2s, transform 1.2s cubic-bezier(.45, 0, .2, 1), visibility 0s 1.2s; }
.lift.open .lift-inner { transition: opacity .6s .6s, transform 1.5s cubic-bezier(.45, 0, .2, 1), visibility 0s; }
/* Deurhelften verdwijnen achter de rand van de kaart i.p.v. als losse vakken ernaast te blijven hangen */
.lift-body { overflow: clip; }
.lift.open .lift-body::before { transform: translateX(-101%); }
.lift.open .lift-body::after { transform: translateX(101%); }
/* Project kiezen vanuit de chatbalk */
.projsel { max-width: 11rem; padding: .25rem .5rem; font-size: .85rem; }
/* Wijzigingsset, playground */
.changes { margin: .5rem 0; padding: .6rem .75rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); }
.changes p { margin: .25rem 0 .5rem; word-break: break-word; }
.chg-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 1rem; }
.chg-box { width: min(900px, 100%); max-height: 90vh; overflow: auto; background: var(--elevated); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.chg-list { display: flex; flex-direction: column; gap: .4rem; overflow: auto; }
.chg-file summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.chg-diff { margin: .4rem 0 0; max-height: 40vh; overflow: auto; font-size: .8rem; line-height: 1.35; white-space: pre; }
.chg-diff .drow { display: block; padding: 0 .4rem; }
.chg-diff .dadd { background: color-mix(in srgb, #3fb950 20%, transparent); }
.chg-diff .ddel { background: color-mix(in srgb, #f85149 20%, transparent); }
.chg-diff .dctx { opacity: .7; }
.chg-diff .dgap { display: block; opacity: .5; padding: 0 .4rem; }
.pgpanel { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: .5rem; min-height: 0; }
.pgtools { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.pgtools input { flex: 1 1 10rem; min-width: 8rem; }
.pgtabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.pgnote { margin: 0; }
.pgedit { flex: 1 1 40%; min-height: 8rem; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; tab-size: 2; resize: none; white-space: pre; }
.pgframe { flex: 1 1 45%; min-height: 8rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.pgframe iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pgframe .muted { color: #555; }
.pane .panebody:has(.pgpanel) { overflow: hidden; }

/* ===== v0.9.4: iconen, projectpil, mobiel ===== */
.composer .filelab, .composer .square { width: 2.75rem; flex: none; padding: 0; display: grid; place-items: center; background: var(--bg); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); cursor: pointer; }
.composer .filelab:hover, .composer .square:hover, .composer .filelab:focus-within { border-color: var(--accent); color: var(--accent); }
.composer .filelab input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#mic-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chatbar { gap: .5rem; }
.chatbar .btn.sm { height: 2.25rem; padding: 0 .65rem; gap: .4rem; }
.chatbar .btn.sm svg { flex: none; }
.projbox { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: 0 .35rem 0 .65rem; height: 2.25rem; max-width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--accent); }
.projbox:focus-within, .projbox:hover { border-color: var(--accent); }
.projbox svg { flex: none; }
.projbox .projsel { border: 0; background: transparent; min-height: 0; height: 2rem; width: auto; max-width: 13rem; padding: 0 .25rem; margin: 0; color: var(--fg); font-weight: 600; font-size: .85rem; text-overflow: ellipsis; }
.chatbar .projlink { height: 2.25rem; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .header { height: 3rem; padding: 0 .5rem; gap: .35rem; }
  .header .square { width: 2.5rem; height: 2.5rem; }
  .brandbox .ver, .clock { display: none; }
  .brandname { font-size: 1.1rem; }
  .shell:has(.chat.bgimg) .foot { display: none; }
  .chatbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .35rem; }
  .chatbar::-webkit-scrollbar { display: none; }
  .chatbar > * { flex: none; }
  .chatbar .who, .chatbar .grow { display: none; }
  .chatbar .btn.sm { width: 2.25rem; padding: 0; }
  .chatbar .btn.sm .lbl { display: none; }
  .projbox { flex: 1 1 auto; min-width: 7rem; }
  .projbox .projsel { max-width: none; flex: 1; }
  .chatbar .projlink { font-size: 0; width: 2.25rem; justify-content: center; }
  .chatbar .projlink::before { content: "↗"; font-size: .95rem; }
  .composer .inner { gap: .3rem; padding: .35rem .4rem; }
  .composer .filelab, .composer .square { width: 2.5rem; height: 2.5rem; }
  .composer textarea { min-width: 0; }
  .panehead { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .panehead > * { flex: none; }
  /* beheer en overige pagina's */
  .view { min-width: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -.25rem; padding-bottom: .25rem; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; height: 2.5rem; }
  .card, .panel { padding: .75rem; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  .row { flex-wrap: wrap; }
  input, select, textarea { font-size: 1rem; }
  .chg-box { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .popover { max-width: calc(100vw - 1rem); }
}

/* ===== v0.9.5: beheer-opties voor telefoons ===== */
.pick.more { justify-content: center; color: var(--accent); border-style: dashed; min-height: 2.75rem; }
@media (max-width: 640px) {
  .m-nobanner .hero-banner, .m-nobanner .chat.bgimg::before { display: none !important; }
  .m-noimg .msgs .avatar-ai, .m-noimg .msgs .avatar-user, .m-noimg .pick .avatar-ai, .m-noimg .chatbar .who .avatar-ai, .m-noimg .chatimgs, .m-noimg .bubble img { display: none !important; }
}

/* v0.9.7: Discord-bot op meerdere servers */
.srv { border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .6rem .7rem .4rem; margin: .7rem 0; background: var(--bg); }
.srv.off { opacity: .72; }
.srvhead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.srvname { font-size: 1.02rem; }
.srv .switch { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; cursor: pointer; }
.srv .switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.bchip { display: inline-block; font-size: .7rem; border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; padding: .08rem .55rem; color: var(--fg-dim, var(--fg)); white-space: nowrap; }
.bchip.warn { border-color: var(--warn, #c8a24a); color: var(--warn, #c8a24a); }
.chanwrap { list-style: none; }
.chanwrap[hidden] { display: none; }
.profrow { margin: .1rem 0 .5rem; }
.prof { border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--radius-btn); padding: .7rem; display: grid; gap: .6rem; background: var(--surface, var(--bg)); }
.prof label { display: grid; gap: .25rem; }
.prof .aifields { display: grid; gap: .6rem; }
.prof [hidden] { display: none; }
.prevline { margin: 0; }
.chansearch { margin: .3rem 0; width: 100%; max-width: 22rem; }
.profcmds .cmdrow { margin: .3rem 0; }
@media (max-width: 640px) { .srvhead .grow { display: none; } .chanrow { gap: .4rem; } }

/* v0.9.8 kennisbank */
.pill.warn { color: var(--warn); border-color: var(--warn); }
.kwlist { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.libtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: .8rem 0; }
.libtile { border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .6rem .8rem; background: var(--surface); display: flex; flex-direction: column; gap: .1rem; }
.libtile strong { font-size: 1.5rem; line-height: 1.1; color: var(--fg); }
.libtile span { font-size: .8rem; color: var(--muted); }
.libtile.ok strong { color: var(--good); } .libtile.warn strong { color: var(--warn); } .libtile.bad strong { color: var(--bad); }
.libprop { border-top: 1px solid var(--line); padding: .6rem 0; }
.libprop input { flex: 1 1 14rem; min-width: 0; } .libprop select { flex: 1 1 12rem; min-width: 0; }
.libentry.undone { opacity: .65; }
.libdiff { display: grid; grid-template-columns: 7rem minmax(0, max-content) auto minmax(0, 1fr); gap: .5rem; font-size: .85rem; padding: .15rem 0; align-items: baseline; overflow-wrap: anywhere; }
.libdiff .old { color: var(--muted); text-decoration: line-through; } .libdiff .new { color: var(--fg); }
.libedit { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .5rem; }
.libedit label { display: block; margin: .3rem 0; } .libedit input, .libedit select, .libedit textarea { width: 100%; }
@media (max-width: 640px) { .libdiff { grid-template-columns: 1fr; gap: 0; } .libdiff [aria-hidden] { display: none; } }

/* v0.9.8 klok: links of rechts, digitaal, analoog of beide */
.clock { flex-direction: row; align-items: center; gap: .45rem; }
.clock .txt { display: flex; flex-direction: column; align-items: flex-end; }
.clock[data-side="left"] { margin-left: .75rem; }
.clock[data-side="left"] .txt { align-items: flex-start; }
.clock[data-style="analog"] .txt .d { font-size: .7rem; }
.aclock { width: calc(2.1rem * var(--clock-scale, 1)); height: calc(2.1rem * var(--clock-scale, 1)); flex: none; }
.aclock .face { fill: var(--surface); stroke: var(--line-strong); stroke-width: 3; }
.aclock .tick { stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.aclock .hh { stroke: var(--fg); stroke-width: 6; stroke-linecap: round; }
.aclock .mh { stroke: var(--fg); stroke-width: 4; stroke-linecap: round; }
.aclock .sh { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.aclock .hub { fill: var(--accent); }
.clock .t { font-size: calc(.95rem * var(--clock-scale, 1)); }
.clock .d, .clock[data-style="analog"] .txt .d { font-size: calc(.65rem * var(--clock-scale, 1)); }
.clock[data-style="analog"] .txt .d { font-size: calc(.7rem * var(--clock-scale, 1)); }
/* De balk groeit mee met een grote klok; zonder (zichtbare) klok blijft hij 3,5rem */
.header:has(> .clock:not([hidden])), .header:has(> .right > .clock:not([hidden])) { height: auto; min-height: max(3.5rem, calc(2.4rem * var(--clock-scale, 1) + .8rem)); }
@media (max-width: 640px) { .header:has(> .clock:not([hidden])), .header:has(> .right > .clock:not([hidden])) { height: 3rem; min-height: 0; } }
/* Het hoofdmenu stond absoluut in het midden en kon onder de klok of de knoppen schuiven; nu staat het midden in de vrije ruimte */
.topmenu { position: static; transform: none; height: auto; margin-inline: auto; min-width: 0; overflow: hidden; flex: 0 1 auto; }
@media (min-width: 900px) { .header:has(> .topmenu:not(.hide)) > .right { margin-left: 0; } }
/* v0.9.8 chatbalk: project- en chatkeuze naast elkaar; op een telefoon krimpen ze binnen hun vak in plaats van eroverheen te lopen */
.chatbar .projbox { min-width: 0; overflow: hidden; }
@media (max-width: 640px) {
  .chatbar .projbox { flex: 1 1 0; }
  .chatbar .projbox .projsel { width: 100%; min-width: 0; max-width: none; }
}
/* v0.9.8 uitklaplijsten: de opties kregen de doorzichtige achtergrond van de keuzelijst en werden op Windows wit met lichte tekst */
select option, select optgroup { background-color: var(--elevated); color: var(--fg); }
select optgroup { color: var(--muted); font-style: normal; }
select option:checked { background-color: var(--accent); color: var(--on-accent); }

/* ScriptSpace-footer (v0.9.9): zelfde opzet als CoreBot en scriptspace.nl, kleuren uit het thema */
.ssfoot { position: relative; flex-shrink: 0; margin-top: auto; box-sizing: border-box; width: 100%; background: var(--surface); color: var(--muted); font-size: .9375rem; line-height: 1.6; padding: 2.25rem 1.5rem 1.5rem; text-align: left; }
.ssfoot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .6; background: linear-gradient(90deg, #ff5d6c, #ff9f43, #ffd43b, #3ddc84, #4dabf7, #b197fc); }
.ssfoot .sf-grid, .ssfoot .sf-line { max-width: 1100px; margin: 0 auto; }
.ssfoot .sf-grid { display: grid; gap: 1.5rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.ssfoot nav { display: grid; gap: .375rem; align-content: start; }
.ssfoot h4 { margin: 0 0 .25rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.ssfoot nav:nth-of-type(1) h4 { color: #4dabf7; } .ssfoot nav:nth-of-type(2) h4 { color: #3ddc84; } .ssfoot nav:nth-of-type(3) h4 { color: #ff9f43; }
.ssfoot a { color: var(--muted); text-decoration: none; } .ssfoot a:hover, .ssfoot a:focus-visible { color: var(--accent); }
.ssfoot .sf-brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--fg); font-weight: 700; font-size: 1.05rem; }
.ssfoot .sf-brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ssfoot .sf-about p { margin: .625rem 0 0; max-width: 34ch; } .ssfoot .sf-about p a { color: var(--accent); }
.ssfoot .sf-line { display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; justify-content: space-between; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); font-size: .85rem; }
[data-theme="helder"] .ssfoot nav:nth-of-type(1) h4 { color: #1c6fd1; } [data-theme="helder"] .ssfoot nav:nth-of-type(2) h4 { color: #1a8a4d; } [data-theme="helder"] .ssfoot nav:nth-of-type(3) h4 { color: #c2620c; }
[data-theme="contrast"] .ssfoot::before { opacity: 1; }
@media (max-width: 800px) { .ssfoot .sf-grid { grid-template-columns: 1fr 1fr; } .ssfoot .sf-about { grid-column: 1 / -1; } .ssfoot { padding-inline: 1rem; } }
/* v0.9.11: Bibliotheek-lijst met filters en tabbladen */
.bib-filters { flex-wrap: wrap; gap: .5rem; align-items: center; }
.bib-filters select, .bib-filters input { width: auto; margin: 0; }
.bib-filters label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.bib-pager { justify-content: center; flex-wrap: wrap; margin: .75rem 0 1rem; }
.bib-pager .muted { align-self: center; padding: 0 .25rem; }

/* v0.9.12: categorieën importeren */
.cat-import { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cat-import h3 { margin: 0 0 .25rem; font-size: 1rem; }
.cat-import textarea { font-family: var(--font-mono, ui-monospace, monospace); font-size: .875rem; }

/* v0.9.12: categorie-editor */
.catline { flex-wrap: wrap; gap: .35rem; align-items: center; }
.catline select { width: auto; margin: 0; max-width: 12rem; }

/* v0.9.13: spraak (dicteren) */
.stt-panel label { display: grid; gap: .25rem; margin-bottom: .6rem; }
.stt-meter { flex: 1; min-width: 8rem; height: .6rem; border-radius: 999px; background: var(--elevated); border: 1px solid var(--line); overflow: hidden; }
.stt-meter span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }
#stt-devs { margin: .25rem 0; padding-left: 1.2rem; }

/* v0.9.17: bronnen van internet */
.ragsrc.websrc a { word-break: break-word; }
/* v0.9.26: gekozen assistent alleen (met "Ander model kiezen"), uitleg bovenaan bij de generatoren OWLAI en SunoCat */
.pickers.focus { grid-template-columns: minmax(0, 1fr) auto; }
.pickers.focus .pick.more { align-self: stretch; justify-content: center; }
/* v0.9.27: blokken Galerij en Muziek, eigen muziekstijlen, tabs in de Galerij */
.mblock-list { display: grid; gap: .45rem; margin: .4rem 0; }
.mblock-list.hor { grid-auto-flow: column; grid-auto-columns: minmax(7.5rem, 9rem); overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x proximity; }
.mblock-list.hor > * { scroll-snap-align: start; }
.mblock-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-btn); display: block; }
.mblock-list.ver .mblock-img img { aspect-ratio: auto; max-height: 14rem; }
.mblock-track { display: grid; gap: .15rem; } .mblock-track audio { width: 100%; height: 2rem; }
.mblock-list.hor .mblock-track { min-width: 12rem; }
.muziek-styles { gap: .35rem; margin-top: .35rem; } .muziek-styles select { flex: 1 1 10rem; min-width: 0; }
.gal-tabs { gap: .4rem; margin: 0 0 .6rem; }
/* v0.9.29: landingspagina voor nieuwe bezoekers */
html.landing-open, html.landing-open body { overflow: hidden; }
.landing { position: fixed; inset: 0; z-index: 60; overflow-y: auto; color: var(--fg);
  background: radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%),
              radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, #a855f7 30%, transparent), transparent 60%), var(--bg); }
.landing > * { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.ld-top { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.ld-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; } .ld-logo { width: 40px; height: 40px; border-radius: 10px; }
.ld-hero { text-align: center; padding-top: clamp(2rem, 8vw, 5rem); padding-bottom: 2.5rem; }
.ld-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--muted); margin: 0 0 .8rem; }
.ld-hero h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.08; margin: 0 auto .9rem; max-width: 16ch; }
.ld-grad { background: linear-gradient(90deg, var(--accent), #a855f7, #22c55e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-lead { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted); max-width: 60ch; margin: 0 auto 1.4rem; }
.ld-cta { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: .4rem 0 .6rem; }
.ld-cta.big .btn { padding: .75rem 1.3rem; font-size: 1.05rem; border-radius: 12px; }
.ld-discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.ld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding-top: 1rem; padding-bottom: 2.5rem; }
.ld-card { border: 1px solid var(--line-strong); border-radius: 16px; padding: 1.1rem 1.1rem 1rem; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px); transition: transform .2s ease, border-color .2s ease; }
.ld-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.ld-ico { font-size: 1.8rem; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); margin-bottom: .6rem; }
.ld-card h3 { margin: 0 0 .3rem; font-size: 1.05rem; } .ld-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.ld-how { padding-bottom: 2.5rem; } .ld-how h2, .ld-faqs h2, .ld-end h2 { text-align: center; margin: 0 0 1rem; }
.ld-how ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.ld-how li { display: flex; gap: .8rem; align-items: flex-start; } .ld-how p { margin: .2rem 0 0; color: var(--muted); font-size: .92rem; }
.ld-num { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--bg); }
.ld-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; padding-top: 1.2rem; padding-bottom: 1.2rem; margin-bottom: 2.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ld-trust p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.ld-faqs { max-width: 760px; padding-bottom: 2.5rem; }
.ld-faq { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .5rem; background: var(--surface); }
.ld-faq summary { cursor: pointer; font-weight: 600; } .ld-faq p { margin: .5rem 0 0; color: var(--muted); }
.ld-end { text-align: center; padding-bottom: 2.5rem; }
.ld-foot { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; padding-top: 1rem; padding-bottom: 2rem; font-size: .85rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .ld-card { transition: none; } .ld-card:hover { transform: none; } }
.ld-preview { position: sticky; top: 0; z-index: 2; display: flex; gap: .5rem; align-items: center; justify-content: center; padding: .5rem 16px;
  background: var(--warn, #f59e0b); color: #111; max-width: none !important; } .ld-preview .btn { margin-left: .5rem; }
.ld-imgbox { margin: .4rem 0 .6rem; } .ld-imgbox input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ld-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; margin-top: .5rem; }
.ld-imgitem { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: .4rem; display: grid; gap: .3rem; background: var(--surface); }
.ld-imgitem img { width: 100%; height: 6rem; object-fit: cover; border-radius: 6px; }
.ld-img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; }
.code-area { width: 100%; font: 13px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; resize: vertical; tab-size: 2; }
/* v0.9.32: slider en blokken onder de chat */
.vote { min-width: 3.4rem; } .vote.on { border-color: #ec4899; } .gal-cap { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.sort-bar { gap: .35rem; margin: .3rem 0 .6rem; }
.mtk { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mtk-lane { display: flex; gap: .6rem; width: max-content; animation: mtk-run var(--mtk-dur, 30s) linear infinite; }
.mtk:hover .mtk-lane, .mtk:focus-within .mtk-lane { animation-play-state: paused; }
.mtk-img { position: relative; flex: 0 0 auto; } .mtk-img img { height: 6.5rem; width: auto; border-radius: var(--radius-btn); display: block; }
.mtk-v { position: absolute; right: .3rem; bottom: .3rem; font-size: .72rem; padding: .05rem .35rem; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; }
.mtk-track { flex: 0 0 auto; display: grid; gap: .1rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); color: var(--fg); text-decoration: none; min-width: 11rem; }
@keyframes mtk-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mtk { overflow-x: auto; mask-image: none; } .mtk-lane { animation: none; } .mtk-lane > [aria-hidden="true"] { display: none; } }
.msl { position: relative; display: grid; gap: .4rem; outline: none; } .msl:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius-btn); }
.msl-stage { min-height: 3rem; }
.msl-img { display: block; position: relative; border-radius: var(--radius-btn); overflow: hidden; }
.msl-img img { display: block; width: 100%; height: auto; max-height: min(22rem, 38vh); object-fit: cover; animation: msl-in .35s ease; }
.msl-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .6rem .4rem; font-size: .78rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.msl-track { display: grid; gap: .25rem; animation: msl-in .35s ease; } .msl-track audio { width: 100%; height: 2rem; }
.msl-nav { position: absolute; top: 40%; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--fg); font-size: 1.3rem; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.msl-nav.prev { left: .3rem; } .msl-nav.next { right: .3rem; }
.msl-muziek .msl-nav { top: auto; bottom: 2.6rem; } .msl-muziek .msl-stage { padding: 0 2.4rem; }
.msl-dots { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; }
.msl-dot { width: .55rem; height: .55rem; border-radius: 50%; border: 0; padding: 0; background: var(--line-strong); cursor: pointer; } .msl-dot[aria-selected="true"] { background: var(--accent); }
@keyframes msl-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msl-img img, .msl-track { animation: none; } }
.below-chat { margin: .35rem auto 0; max-width: min(var(--chat-width), 100%); width: 100%; border-top: 1px solid var(--line); padding: .2rem .5rem .4rem; }
.below-chat summary { cursor: pointer; color: var(--muted); padding: .15rem 0; }
.below-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem; max-height: 40vh; overflow-y: auto; }
.below-grid .block { margin: 0; }
.z-onder .bmap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
/* v0.9.33: kaartmaker en ingebouwde deelkaarten */
.cm-prevs { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; } .cm-prevs figure { margin: 0; display: grid; gap: .3rem; }
.cm-prev { width: min(30rem, 100%); height: auto; border-radius: .5rem; border: 1px solid var(--line-strong); } .cm-prev.tall { width: 8.5rem; }
.cm-colors { gap: .6rem; align-items: center; } .cm-colors input[type=color] { width: 2.4rem; height: 2rem; padding: 0; vertical-align: middle; }
.share-def { max-width: 20rem; width: 100%; border-radius: .5rem; border: 1px dashed var(--line-strong); opacity: .9; } .share-def.tall { max-width: 9rem; }
.gen-howto { margin: 0 1rem 1rem; padding: .6rem .8rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-btn); background: var(--bg); font-size: .9rem; }
.gen-howto ol { margin: .35rem 0 0; padding-left: 1.2rem; } .gen-howto li { margin: .15rem 0; color: var(--fg); } .gen-howto .warn { margin: .4rem 0 0; }
.beeld-anim summary { list-style: none; display: inline-block; } .beeld-anim summary::-webkit-details-marker { display: none; } .beeld-anim[open] { display: grid; gap: .35rem; }
.topdrop { position: relative; } .topdrop summary { list-style: none; cursor: pointer; } .topdrop summary::-webkit-details-marker { display: none; }
.topdrop-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; display: grid; gap: 2px; min-width: 11rem; padding: .3rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.topdrop-menu .toptab { display: block; white-space: nowrap; }
.media-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin: 1rem 0; }
.media-tile { display: grid; gap: .3rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); text-decoration: none; color: var(--fg); }
.media-tile:hover { border-color: var(--accent, var(--line-strong)); transform: translateY(-1px); } .media-ic { font-size: 2rem; }
.header { z-index: 15; } /* v0.9.36: Media-uitklaplijst boven de pagina; zijpanelen (20, 25) blijven erboven */
.topmenu { overflow: visible; } /* v0.9.36: uitklaplijst Media mag buiten de balk */