/* Allino Inbox 0.2: rustig, professioneel, licht en donker. */
:root {
    --accent: #601293; --accent-2: #7b2cb3; --accent-zacht: #f3ecf9; --accent-tekst: #ffffff;
    --tekst: #17171c; --tekst-2: #4b4b57; --zacht: #75757f; --lijn: #e6e6ec; --lijn-2: #d6d6de;
    --vlak: #ffffff; --vlak-2: #fafafc; --achter: #f3f3f7; --rail: #1d1426; --rail-tekst: #cfc3dc; --rail-actief: #ffffff;
    --hover: #f2f0f7; --gekozen: #ede5f6; --notitie: #fff7dc; --notitie-lijn: #f1d77a;
    --rood: #d23b3b; --oranje: #e8890c; --blauw: #2f6fdb; --groen: #23925a; --geel: #d9a400;
    --p1: #d1453b; --p2: #eb8909; --p3: #246fe0; --p4: #8b8b95;
    --wa: #1faa59; --fb: #0866ff; --ig: #d62976; --mail: #6b6b78; --chat: #7b2cb3;
    --schaduw: 0 1px 2px rgba(20, 10, 40, .06), 0 4px 16px rgba(20, 10, 40, .06);
    --schaduw-hoog: 0 10px 40px rgba(20, 10, 40, .18);
    --rond: 10px; --rond-k: 7px;
    --rail-b: 64px; --zij-b: 236px; --lijst-b: 390px; --contact-b: 300px;
    --schaal: 1;
    color-scheme: light;
}
:root[data-thema="donker"] {
    --accent: #b88be6; --accent-2: #caa6ee; --accent-zacht: #2a2135; --accent-tekst: #160e1f;
    --tekst: #ececf2; --tekst-2: #c4c4cf; --zacht: #9a9aa8; --lijn: #2e2e37; --lijn-2: #3b3b46;
    --vlak: #1b1b21; --vlak-2: #202027; --achter: #121216; --rail: #0e0b12; --rail-tekst: #a99bb8; --rail-actief: #ffffff;
    --hover: #24242c; --gekozen: #2c2338; --notitie: #2f2a1a; --notitie-lijn: #6b5a1e;
    --p4: #7d7d88; --mail: #9a9aa8;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --schaduw-hoog: 0 10px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]):not([data-thema="donker"]) {
        --accent: #b88be6; --accent-2: #caa6ee; --accent-zacht: #2a2135; --accent-tekst: #160e1f;
        --tekst: #ececf2; --tekst-2: #c4c4cf; --zacht: #9a9aa8; --lijn: #2e2e37; --lijn-2: #3b3b46;
        --vlak: #1b1b21; --vlak-2: #202027; --achter: #121216; --rail: #0e0b12; --rail-tekst: #a99bb8; --rail-actief: #ffffff;
        --hover: #24242c; --gekozen: #2c2338; --notitie: #2f2a1a; --notitie-lijn: #6b5a1e;
        --p4: #7d7d88; --mail: #9a9aa8;
        --schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
        --schaduw-hoog: 0 10px 40px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: calc(14px * var(--schaal))/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: var(--achter); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
svg.i.k { width: 15px; height: 15px; vertical-align: -3px; }
svg.i.g { width: 22px; height: 22px; }
.zacht { color: var(--zacht); }
.klein { font-size: calc(12.5px * var(--schaal)); }
.fout { color: var(--rood); }
.rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rij.ruim { justify-content: space-between; }
.rij.nowrap { flex-wrap: nowrap; }
.groei { flex: 1; min-width: 0; }
.afkap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- knoppen en velden ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--lijn-2); background: var(--vlak); border-radius: var(--rond-k); padding: 6px 12px; cursor: pointer; min-height: 34px; white-space: nowrap; font-weight: 500; transition: background .12s, border-color .12s; }
.knop:hover { background: var(--hover); text-decoration: none; }
.knop.hoofd { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.knop.hoofd:hover { background: var(--accent-2); border-color: var(--accent-2); }
.knop.klein { padding: 3px 9px; min-height: 28px; font-size: calc(12.5px * var(--schaal)); }
.knop.gevaar { color: var(--rood); }
.knop.stil { border-color: transparent; background: transparent; }
.knop.stil:hover { background: var(--hover); }
.knop:disabled { opacity: .55; cursor: default; }
.knop.gesplitst { border-radius: var(--rond-k) 0 0 var(--rond-k); }
.knop.gesplitst + .knop { border-radius: 0 var(--rond-k) var(--rond-k) 0; border-left-color: rgba(255,255,255,.3); padding: 6px 8px; margin-left: -8px; }
.icoonknop { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; border-radius: var(--rond-k); cursor: pointer; color: var(--tekst-2); width: 32px; height: 32px; flex: none; position: relative; }
.icoonknop:hover { background: var(--hover); color: var(--tekst); }
.icoonknop.aan { color: var(--accent); }
.icoonknop.ster.aan { color: var(--geel); }
.icoonknop.ster.aan svg { fill: var(--geel); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], input[type=date], input[type=datetime-local], input:not([type]), select, textarea {
    width: 100%; border: 1px solid var(--lijn-2); background: var(--vlak); border-radius: var(--rond-k); padding: 7px 10px; min-height: 36px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.knop:focus-visible, .icoonknop:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
label.veld { display: block; margin: 10px 0; font-size: calc(12.5px * var(--schaal)); color: var(--zacht); font-weight: 500; }
label.veld > input, label.veld > select, label.veld > textarea, label.veld > .rij { margin-top: 4px; font-size: calc(14px * var(--schaal)); color: var(--tekst); font-weight: 400; }
.vinkje { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.vinkje input { margin-top: 3px; accent-color: var(--accent); }
.kleurkeus { display: flex; gap: 6px; flex-wrap: wrap; }
.kleurkeus button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.kleurkeus button.gekozen { border-color: var(--tekst); box-shadow: 0 0 0 2px var(--vlak) inset; }

/* ---------- meldingen (toast) ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1f1a26; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 90; max-width: calc(100% - 32px); box-shadow: var(--schaduw-hoog); display: flex; gap: 12px; align-items: center; animation: op .18s ease-out; }
.toast.fout { background: var(--rood); }
.toast button { background: none; border: 0; color: #d9c2f2; font-weight: 600; cursor: pointer; padding: 0; }
@keyframes op { from { transform: translate(-50%, 8px); opacity: 0; } }

/* ---------- inloggen ---------- */
.inlog { max-width: 380px; margin: 10vh auto; background: var(--vlak); padding: 30px; border-radius: 16px; border: 1px solid var(--lijn); box-shadow: var(--schaduw); }
.inlog h1 { margin: 0 0 4px; font-size: calc(22px * var(--schaal)); display: flex; align-items: center; gap: 10px; }
.inlog .knop { width: 100%; margin-top: 10px; min-height: 40px; }
.scheiding { text-align: center; color: var(--zacht); margin: 16px 0 6px; font-size: calc(12.5px * var(--schaal)); }
.logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #7b2cb3, #4a0e72); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none; }

/* ---------- indeling ---------- */
.app { display: grid; grid-template-columns: var(--rail-b) var(--zij-b) var(--lijst-b) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.app.zonder-lijst { grid-template-columns: var(--rail-b) var(--zij-b) minmax(0, 1fr); }
.app.zonder-lijst .lijstkolom { display: none; }
.app.zij-in { grid-template-columns: var(--rail-b) 0 var(--lijst-b) minmax(0, 1fr); }
.app.zij-in.zonder-lijst { grid-template-columns: var(--rail-b) 0 minmax(0, 1fr); }
.app.zij-in .zijbalk { visibility: hidden; padding: 0; border: 0; }
.rail { background: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; }
.rail .logo { margin-bottom: 14px; }
.rail a, .rail button { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--rail-tekst); background: none; border: 0; cursor: pointer; position: relative; }
.rail a:hover, .rail button:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.rail a.actief { background: rgba(185, 139, 230, .22); color: var(--rail-actief); }
.rail .badge { position: absolute; top: 4px; right: 3px; }
.rail .onder { margin-top: auto; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.rail svg.i { width: 21px; height: 21px; }
.badge { background: var(--rood); color: #fff; border-radius: 9px; font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.badge.stil { background: var(--lijn-2); color: var(--tekst-2); }

.zijbalk { background: var(--vlak-2); border-right: 1px solid var(--lijn); overflow-y: auto; padding: 14px 10px 20px; }
.zijbalk .titel { font-weight: 700; font-size: calc(16px * var(--schaal)); padding: 4px 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.zijbalk h3 { font-size: calc(11px * var(--schaal)); text-transform: uppercase; letter-spacing: .07em; color: var(--zacht); margin: 18px 10px 6px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.zijbalk h3 button { color: var(--zacht); }
.zijbalk a { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: var(--rond-k); color: var(--tekst-2); font-weight: 500; }
.zijbalk a:hover { background: var(--hover); text-decoration: none; color: var(--tekst); }
.zijbalk a.actief { background: var(--gekozen); color: var(--tekst); }
.zijbalk a .teller { margin-left: auto; font-size: calc(12px * var(--schaal)); color: var(--zacht); font-weight: 600; }
.zijbalk a.actief .teller { color: var(--accent); }
.zijbalk a .stip { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 4px; }
.zijbalk .kanaal { width: 22px; height: 22px; margin: 0 -2px; }
.zijbalk .kanaal svg.i { width: 12px; height: 12px; stroke-width: 2.2; }
.testmodus { margin: 0 4px 10px; padding: 9px 11px; border-radius: 9px; background: var(--notitie); border: 1px solid var(--notitie-lijn); color: var(--tekst); font-size: calc(12.5px * var(--schaal)); display: flex; gap: 8px; }

.lijstkolom { background: var(--vlak); border-right: 1px solid var(--lijn); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lijstkop { padding: 14px 14px 10px; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 10px; }
.lijstkop h1 { font-size: calc(17px * var(--schaal)); margin: 0; font-weight: 700; }
.zoekveld { position: relative; }
.zoekveld svg { position: absolute; left: 10px; top: 9px; color: var(--zacht); }
.zoekveld input { padding-left: 34px; background: var(--achter); border-color: transparent; }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--lijn-2); border-radius: 999px; padding: 3px 10px; font-size: calc(12.5px * var(--schaal)); background: var(--vlak); cursor: pointer; white-space: nowrap; color: var(--tekst-2); font-weight: 500; }
.chip:hover { background: var(--hover); }
.chip.aan { background: var(--gekozen); border-color: var(--accent); color: var(--tekst); }
.lijst { overflow-y: auto; flex: 1; min-height: 0; }
.leeg { padding: 40px 24px; text-align: center; color: var(--zacht); }
.leeg .groot { font-size: calc(34px * var(--schaal)); margin-bottom: 6px; }
.bulkbalk { display: flex; gap: 6px; align-items: center; padding: 8px 12px; background: var(--gekozen); border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }

.gesprek-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 11px 14px 11px 10px; border-bottom: 1px solid var(--lijn); color: var(--tekst); cursor: pointer; position: relative; border-left: 3px solid transparent; }
.gesprek-item:hover { background: var(--hover); text-decoration: none; }
.gesprek-item.actief { background: var(--gekozen); border-left-color: var(--accent); }
.gesprek-item.gekozen { background: var(--gekozen); }
.gesprek-item .links { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gesprek-item .kies { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; opacity: 0; }
.gesprek-item:hover .kies, .lijst.kiezen .kies { opacity: 1; }
.gesprek-item .boven { display: flex; gap: 6px; align-items: center; min-width: 0; }
.gesprek-item .wie { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.gesprek-item.ongelezen .wie, .gesprek-item.ongelezen .onderwerp { font-weight: 700; }
.gesprek-item.ongelezen::before { content: ''; position: absolute; left: 3px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.gesprek-item .tijd { font-size: calc(12px * var(--schaal)); color: var(--zacht); flex: none; }
.gesprek-item .onderwerp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst); margin-top: 1px; }
.gesprek-item .voorbeeld { color: var(--zacht); font-size: calc(13px * var(--schaal)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--voorbeeld-regels, 2); -webkit-box-orient: vertical; margin-top: 1px; }
:root[data-geen-voorbeeld] .gesprek-item .voorbeeld { display: none; }
.etiketten { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.etiket { display: inline-flex; align-items: center; gap: 4px; font-size: calc(11.5px * var(--schaal)); padding: 1px 7px; border-radius: 5px; background: var(--achter); color: var(--tekst-2); font-weight: 500; white-space: nowrap; }
.etiket.label { color: var(--lc); background: color-mix(in srgb, var(--lc) 13%, transparent); }
:root[data-thema="donker"] .etiket.label { color: color-mix(in srgb, var(--lc) 55%, white); background: color-mix(in srgb, var(--lc) 26%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]):not([data-thema="donker"]) .etiket.label { color: color-mix(in srgb, var(--lc) 55%, white); background: color-mix(in srgb, var(--lc) 26%, transparent); } }
.etiket.concept { background: color-mix(in srgb, var(--blauw) 14%, transparent); color: var(--blauw); }
.etiket.hoog { background: color-mix(in srgb, var(--oranje) 16%, transparent); color: var(--oranje); }
.etiket.urgent { background: color-mix(in srgb, var(--rood) 15%, transparent); color: var(--rood); }
.etiket.ai { background: linear-gradient(135deg, #7b2cb3, #d62976); color: #fff; }
.etiket.sluimer { background: color-mix(in srgb, var(--blauw) 12%, transparent); color: var(--blauw); }
.etiket.uitnod { background: color-mix(in srgb, var(--groen) 14%, transparent); color: var(--groen); }

.kanaal { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; position: relative; font-weight: 600; font-size: 12px; }
.kanaal.klein { width: 16px; height: 16px; position: absolute; right: -6px; bottom: -5px; border: 2px solid var(--vlak); }
.kanaal.klein svg.i { width: 9px; height: 9px; stroke-width: 2.6; }
@media (hover: none) { .gesprek-item .kies { display: none; } .lijst.kiezen .kies { display: block; } }
.kanaal.mail { background: var(--mail); } .kanaal.chat { background: var(--chat); } .kanaal.whatsapp { background: var(--wa); }
.kanaal.messenger { background: var(--fb); } .kanaal.sociaal { background: var(--wa); } .kanaal.instagram { background: linear-gradient(45deg, #f9a43a, #d62976 55%, #7b3bc4); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 12px; flex: none; position: relative; letter-spacing: .02em; }
.avatar.k { width: 22px; height: 22px; font-size: 10px; }
.avatar.g { width: 40px; height: 40px; font-size: 15px; }
.avatar.niemand { background: transparent; border: 1.5px dashed var(--lijn-2); color: var(--zacht); }

/* ---------- detail ---------- */
.detail { background: var(--vlak); overflow: hidden; display: flex; min-width: 0; min-height: 0; }
.detail .paneelhoofd { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.detail .scroll { overflow-y: auto; flex: 1; min-height: 0; }
.gesprekkop { padding: 12px 18px 10px; border-bottom: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 8px; }
.gesprekkop h1 { font-size: calc(18px * var(--schaal)); margin: 0; font-weight: 700; line-height: 1.3; word-break: break-word; }
.gesprekkop .meta { display: flex; gap: 8px; align-items: center; color: var(--zacht); font-size: calc(13px * var(--schaal)); flex-wrap: wrap; }
.werkbalk { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.werkbalk .scheider { width: 1px; height: 22px; background: var(--lijn); margin: 0 4px; }
.keuze { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lijn-2); border-radius: var(--rond-k); padding: 3px 9px 3px 4px; min-height: 32px; background: var(--vlak); cursor: pointer; font-weight: 500; font-size: calc(13px * var(--schaal)); }
.keuze:hover { background: var(--hover); }
.keuze.status-open { border-color: color-mix(in srgb, var(--groen) 50%, transparent); }
.aanwezig { display: inline-flex; gap: 6px; align-items: center; font-size: calc(12.5px * var(--schaal)); color: var(--blauw); background: color-mix(in srgb, var(--blauw) 10%, transparent); padding: 3px 10px; border-radius: 999px; }
.aanwezig .stip { width: 7px; height: 7px; background: var(--blauw); border-radius: 50%; animation: puls 1.4s infinite; }
@keyframes puls { 50% { opacity: .3; } }

.berichten { padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
.bericht { border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--vlak); box-shadow: var(--schaduw); overflow: hidden; }
.bericht > .kop { display: flex; gap: 10px; align-items: center; padding: 10px 14px; }
.bericht > .kop .naam { font-weight: 600; }
.bericht > .kop .sub { color: var(--zacht); font-size: calc(12.5px * var(--schaal)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bericht .inhoud { padding: 0 14px 12px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.bericht iframe { width: 100%; border: 0; min-height: 80px; display: block; background: #fff; }
.bericht.uit { border-color: color-mix(in srgb, var(--accent) 30%, var(--lijn)); }
.bericht.notitie { background: var(--notitie); border-color: var(--notitie-lijn); box-shadow: none; }
.bericht.concept { border-style: dashed; border-color: var(--blauw); }
.bericht.mislukt { border-color: var(--rood); }
.bericht .voet { padding: 8px 14px; border-top: 1px solid var(--lijn); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--vlak-2); }
.bericht.notitie .voet { background: transparent; border-top-color: var(--notitie-lijn); }
.bijlage { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--lijn); border-radius: 8px; padding: 4px 10px; font-size: calc(12.5px * var(--schaal)); color: var(--tekst); background: var(--vlak); }
.bijlage:hover { background: var(--hover); text-decoration: none; }
.bijlage-foto { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; margin: 6px 0; cursor: zoom-in; }
.vermelding { color: var(--accent); font-weight: 600; }
.chatcontext { margin: 0 14px 12px; border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 12px; background: var(--vlak-2); font-size: calc(13px * var(--schaal)); }
.chatcontext .regel { margin: 4px 0; }

/* chatbubbels (WhatsApp, Messenger, Instagram) */
.bubbels { padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 4px; }
.dagscheiding { text-align: center; margin: 12px 0 6px; }
.dagscheiding span { background: var(--achter); color: var(--zacht); font-size: calc(11.5px * var(--schaal)); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.bubbel { max-width: min(76%, 560px); padding: 7px 11px 6px; border-radius: 14px; position: relative; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.bubbel.in { align-self: flex-start; background: var(--achter); border-bottom-left-radius: 4px; }
.bubbel.uit { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--vlak)); border-bottom-right-radius: 4px; }
.bubbel.notitie { align-self: center; background: var(--notitie); border: 1px solid var(--notitie-lijn); max-width: 90%; border-radius: 10px; font-size: calc(13px * var(--schaal)); }
.bubbel.concept { border: 1.5px dashed var(--blauw); background: var(--vlak); }
.bubbel.mislukt { border: 1.5px solid var(--rood); }
.bubbel .tijd { font-size: calc(11px * var(--schaal)); color: var(--zacht); float: right; margin: 6px 0 -4px 10px; display: inline-flex; gap: 3px; align-items: center; }
.bubbel .wie { font-size: calc(11.5px * var(--schaal)); font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.bubbel .acties { display: flex; gap: 6px; margin-top: 6px; clear: both; }

.uitnodiging { margin: 0 14px 12px; border: 1px solid var(--lijn); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 54px 1fr; gap: 12px; background: var(--vlak-2); }
.uitnodiging .datumblok { border-radius: 9px; overflow: hidden; text-align: center; border: 1px solid var(--lijn); background: var(--vlak); }
.uitnodiging .datumblok .m { background: var(--rood); color: #fff; font-size: calc(11px * var(--schaal)); font-weight: 700; text-transform: uppercase; padding: 2px 0; }
.uitnodiging .datumblok .d { font-size: calc(20px * var(--schaal)); font-weight: 700; padding: 3px 0 4px; }
.uitnodiging h4 { margin: 0 0 2px; font-size: calc(15px * var(--schaal)); }
.platform { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: calc(12.5px * var(--schaal)); }
.platform.meet { color: #188038; } .platform.teams { color: #5b5fc7; } .platform.zoom { color: #2d8cff; }

/* antwoordvak */
.antwoordvak { border-top: 1px solid var(--lijn); padding: 10px 18px 14px; background: var(--vlak); }
.antwoordvak .tabs { display: flex; gap: 2px; margin-bottom: 8px; align-items: center; }
.antwoordvak .tabs button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; cursor: pointer; font-weight: 600; color: var(--zacht); font-size: calc(13px * var(--schaal)); }
.antwoordvak .tabs button.actief { background: var(--gekozen); color: var(--tekst); }
.antwoordvak.notitie .tabs button.actief { background: var(--notitie); }
.antwoordvak .doos { border: 1px solid var(--lijn-2); border-radius: var(--rond); background: var(--vlak); position: relative; }
.antwoordvak.notitie .doos { background: var(--notitie); border-color: var(--notitie-lijn); }
.antwoordvak .doos:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.antwoordvak textarea { border: 0; background: transparent; min-height: 96px; max-height: 45vh; padding: 10px 12px; }
.antwoordvak textarea:focus { outline: 0; }
.antwoordvak .balk { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-top: 1px solid var(--lijn); gap: 8px; flex-wrap: wrap; }
.antwoordvak .cc { border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; background: transparent; }
.venster { margin-bottom: 8px; padding: 8px 12px; border-radius: 8px; font-size: calc(13px * var(--schaal)); display: flex; gap: 8px; align-items: center; }
.venster.open { background: color-mix(in srgb, var(--groen) 10%, transparent); color: var(--groen); }
.venster.dicht { background: color-mix(in srgb, var(--oranje) 13%, transparent); color: var(--tekst); }
.suggesties { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--vlak); border: 1px solid var(--lijn-2); border-radius: var(--rond); box-shadow: var(--schaduw-hoog); z-index: 20; padding: 4px; }
.suggesties button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.suggesties button:hover, .suggesties button.actief { background: var(--hover); }
.suggesties .sub { color: var(--zacht); font-size: calc(12px * var(--schaal)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* contactpaneel rechts */
.contact { width: var(--contact-b); border-left: 1px solid var(--lijn); overflow-y: auto; background: var(--vlak-2); padding: 16px; flex: none; }
.contact h3 { font-size: calc(11px * var(--schaal)); text-transform: uppercase; letter-spacing: .07em; color: var(--zacht); margin: 18px 0 8px; font-weight: 600; }
.contact .kaart { display: flex; gap: 12px; align-items: center; }
.contact .gegeven { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: calc(13px * var(--schaal)); color: var(--tekst-2); word-break: break-all; }
.contact .eerder { display: block; padding: 7px 9px; border-radius: 8px; color: var(--tekst); font-size: calc(13px * var(--schaal)); }
.contact .eerder:hover { background: var(--hover); text-decoration: none; }
.contact-tabs { display: flex; gap: 2px; margin: -6px 0 14px; padding: 3px; background: var(--hover); border-radius: 9px; }
.contact-tabs button { flex: 1; display: inline-flex; gap: 6px; align-items: center; justify-content: center; border: 0; background: none; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-weight: 600; color: var(--zacht); font-size: calc(13px * var(--schaal)); }
.contact-tabs button.aan { background: var(--vlak); color: var(--tekst); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.contact-inhoud .rij.ruim { justify-content: space-between; }

/* menu (popover) */
.menu { position: fixed; z-index: 95; background: var(--vlak); border: 1px solid var(--lijn-2); border-radius: var(--rond); box-shadow: var(--schaduw-hoog); padding: 5px; min-width: 210px; max-width: 320px; max-height: 70vh; overflow-y: auto; animation: menuop .1s ease-out; }
@keyframes menuop { from { opacity: 0; transform: translateY(-4px); } }
.menu button, .menu a { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--tekst); font-size: calc(13.5px * var(--schaal)); }
.menu button:hover, .menu a:hover, .menu button.actief { background: var(--hover); text-decoration: none; }
.menu .kop { font-size: calc(11px * var(--schaal)); text-transform: uppercase; letter-spacing: .07em; color: var(--zacht); padding: 8px 10px 4px; font-weight: 600; }
.menu hr { border: 0; border-top: 1px solid var(--lijn); margin: 4px 0; }
.menu input[type=search], .menu input[type=text] { margin: 2px 0 4px; }
.menu .vink { margin-left: auto; color: var(--accent); }
.menu .rechts { margin-left: auto; color: var(--zacht); font-size: calc(12px * var(--schaal)); }

/* dialoog */
.dialoog-achter { position: fixed; inset: 0; background: rgba(15, 8, 25, .45); z-index: 85; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; animation: vervaag .12s; overflow-y: auto; }
@keyframes vervaag { from { opacity: 0; } }
.dialoog { background: var(--vlak); border-radius: 14px; box-shadow: var(--schaduw-hoog); width: 100%; max-width: 560px; padding: 20px 22px; border: 1px solid var(--lijn); }
.dialoog h2 { margin: 0 0 12px; font-size: calc(17px * var(--schaal)); }
.dialoog .knoppen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.sneltoetsen { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: calc(13.5px * var(--schaal)); }
kbd { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--achter); border: 1px solid var(--lijn-2); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; color: var(--tekst-2); }

/* ---------- taken ---------- */
.taakgroep { padding: 6px 0; }
.taakgroep > h4 { margin: 12px 18px 4px; font-size: calc(13px * var(--schaal)); display: flex; gap: 8px; align-items: center; }
.taakgroep > h4 .zacht { font-weight: 500; }
.taakgroep.laat > h4 { color: var(--rood); }
.taak-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 18px; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.taak-item:hover { background: var(--hover); }
.taak-item.actief { background: var(--gekozen); }
.taak-item.gedaan .titel { text-decoration: line-through; color: var(--zacht); }
.taak-item .titel { font-weight: 500; word-break: break-word; }
.taak-item .onder { display: flex; gap: 10px; flex-wrap: wrap; font-size: calc(12px * var(--schaal)); color: var(--zacht); margin-top: 3px; align-items: center; }
.taak-item .onder .laat { color: var(--rood); font-weight: 600; }
.taak-item .onder .vandaag { color: var(--groen); font-weight: 600; }
.vink { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--p4); background: transparent; cursor: pointer; flex: none; margin-top: 1px; position: relative; padding: 0; }
.vink.p1 { border-color: var(--p1); background: color-mix(in srgb, var(--p1) 10%, transparent); }
.vink.p2 { border-color: var(--p2); background: color-mix(in srgb, var(--p2) 10%, transparent); }
.vink.p3 { border-color: var(--p3); background: color-mix(in srgb, var(--p3) 10%, transparent); }
.vink:hover::after, .vink.gedaan::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); color: var(--zacht); }
.vink.gedaan { background: var(--p4); border-color: var(--p4); }
.vink.gedaan::after { color: #fff; }
.snelinvoer { display: flex; gap: 8px; }
.snelvoorbeeld { font-size: calc(12.5px * var(--schaal)); color: var(--zacht); min-height: 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.snelvoorbeeld b { color: var(--accent); }
.weergavekeus { display: inline-flex; border: 1px solid var(--lijn-2); border-radius: var(--rond-k); overflow: hidden; }
.weergavekeus button { border: 0; background: var(--vlak); padding: 4px 9px; cursor: pointer; color: var(--zacht); display: inline-flex; }
.weergavekeus button.aan { background: var(--gekozen); color: var(--accent); }

.bord { display: flex; gap: 14px; padding: 16px; overflow-x: auto; align-items: flex-start; height: 100%; }
.kolom { background: var(--achter); border-radius: 12px; width: 290px; flex: none; display: flex; flex-direction: column; max-height: 100%; }
.kolom > h4 { margin: 0; padding: 12px 14px 8px; font-size: calc(13.5px * var(--schaal)); display: flex; justify-content: space-between; align-items: center; }
.kolom .kaarten { padding: 0 10px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kolom.slepen-over { outline: 2px dashed var(--accent); }
.taakkaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 9px; padding: 9px 11px; cursor: grab; box-shadow: var(--schaduw); }
.taakkaart:active { cursor: grabbing; }
.taakkaart.sleept { opacity: .4; }
.taakkaart .onder { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: calc(12px * var(--schaal)); color: var(--zacht); }

.teamraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px; }
.teamkaart { border: 1px solid var(--lijn); border-radius: 12px; padding: 14px; background: var(--vlak); box-shadow: var(--schaduw); cursor: pointer; color: var(--tekst); display: block; }
.teamkaart:hover { border-color: var(--accent); text-decoration: none; }
.teamkaart .cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; text-align: center; }
.teamkaart .cijfers b { display: block; font-size: calc(19px * var(--schaal)); }
.teamkaart .cijfers span { font-size: calc(11px * var(--schaal)); color: var(--zacht); }

.paneel { max-width: 860px; padding: 18px 22px; }
.paneel h2 { margin: 6px 0 12px; font-size: calc(18px * var(--schaal)); }
.paneel h3 { margin: 22px 0 8px; font-size: calc(14px * var(--schaal)); }
.kaartblok { border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; margin: 12px 0; background: var(--vlak); }
.mailboxkaart { padding: 0; }
.mailboxkaart > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; border-radius: 12px; flex-wrap: wrap; }
.mailboxkaart > summary::-webkit-details-marker { display: none; }
.mailboxkaart > summary:hover { background: var(--hover); }
.mailboxkaart > summary .pijltje { display: inline-flex; transition: transform .15s; transform: rotate(-90deg); color: var(--zacht); }
.mailboxkaart[open] > summary .pijltje { transform: none; }
.mailboxkaart[open] > summary { border-bottom: 1px solid var(--lijn); border-radius: 12px 12px 0 0; }
.mailboxkaart .mb-titel { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 220px; }
.mailboxkaart .mb-wie { flex: 0 1 auto; }
.mailboxkaart .mb-status { margin-left: auto; }
.mailboxkaart > :not(summary) { margin-left: 16px; margin-right: 16px; }
.mailboxkaart > :last-child { margin-bottom: 16px; }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tabel { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--schaal)); }
.tabel th, .tabel td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { font-size: calc(11.5px * var(--schaal)); color: var(--zacht); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.geheim { font-family: ui-monospace, Menlo, monospace; background: var(--achter); padding: 10px 12px; border-radius: 8px; word-break: break-all; user-select: all; margin: 8px 0; border: 1px solid var(--lijn); }
.status-stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-stip.ok { background: var(--groen); } .status-stip.uit { background: var(--p4); } .status-stip.fout { background: var(--rood); }
.taakdetail { padding: 16px 22px; max-width: 760px; }
.taakdetail .titelveld { font-size: calc(19px * var(--schaal)); font-weight: 700; border-color: transparent; padding-left: 4px; }
.taakdetail .titelveld:hover { border-color: var(--lijn-2); }
.velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }
.opmerking { padding: 9px 12px; border-radius: 9px; background: var(--achter); margin: 8px 0; white-space: pre-wrap; }

.agenda { padding: 8px 0 30px; }
.agenda .dag { padding: 4px 18px; }
.agenda .dag > h4 { margin: 18px 0 8px; font-size: calc(13px * var(--schaal)); color: var(--zacht); }
.agenda .dag.vandaag > h4 { color: var(--accent); }
.afspraak { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--lijn); border-left: 4px solid var(--accent); border-radius: 9px; margin-bottom: 8px; background: var(--vlak); }
.afspraak.uitgenodigd { border-left-color: var(--oranje); background: color-mix(in srgb, var(--oranje) 5%, var(--vlak)); }
.afspraak.misschien { border-left-style: dashed; }
.afspraak.geweigerd, .afspraak.geannuleerd { opacity: .55; }
.afspraak.geannuleerd .titel { text-decoration: line-through; }
.afspraak .tijd { font-weight: 600; font-size: calc(13px * var(--schaal)); }

/* mobiel */
.onderbalk { display: none; }
.terugknop { display: none; }
.zij-scherm { display: none; } /* 0.8.3: alleen op de telefoon, zie hieronder */
@media (max-width: 1280px) { .contact { display: none; } }
@media (max-width: 1100px) { :root { --lijst-b: 340px; --zij-b: 210px; } }
@media (max-width: 900px) {
    .app, .app.zonder-lijst, .app.zij-in { grid-template-columns: 1fr; height: calc(100dvh - 58px); }
    .rail { display: none; }
    .zijbalk { position: fixed; inset: 0 25% 58px 0; z-index: 70; transform: translateX(-102%); transition: transform .2s; box-shadow: var(--schaduw-hoog); visibility: visible !important; padding: 14px 10px !important; }
    .zijbalk.open { transform: none; }
    /* 0.8.3: donkere laag achter het open menu; tikken sluit het menu. De onderbalk blijft bereikbaar. */
    .zij-scherm { display: none; position: fixed; inset: 0 0 58px 0; z-index: 69; background: rgba(10, 6, 16, .38); }
    .zijbalk.open + .zij-scherm { display: block; }
    .lijstkolom, .detail { grid-column: 1; grid-row: 1; }
    .app .detail { display: none; }
    .app.toon-detail .detail { display: flex; }
    .app.toon-detail .lijstkolom { display: none; }
    .app.zonder-lijst .detail { display: flex; }
    .terugknop { display: inline-flex; }
    .onderbalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 58px; background: var(--vlak); border-top: 1px solid var(--lijn); z-index: 60; padding-bottom: env(safe-area-inset-bottom); }
    .onderbalk a, .onderbalk button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: calc(11px * min(var(--schaal), 1.15)); /* de vijf knoppen moeten naast elkaar passen */ color: var(--zacht); background: none; border: 0; position: relative; font-weight: 500; }
    .onderbalk a.actief { color: var(--accent); }
    .onderbalk .badge { position: absolute; top: 5px; left: calc(50% + 6px); }
    .bubbel { max-width: 88%; }
    .raster2 { grid-template-columns: 1fr; }
    .antwoordvak { padding: 8px 10px 10px; }
    .gesprekkop { padding: 10px 12px; }
    .berichten, .bubbels { padding: 12px 10px; }
    .afspraak { grid-template-columns: 70px 1fr; }
    .afspraak > :last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 0.3: mailboxen, mappen, gelezen, regels, eigen agenda's ---------- */
.zijbalk a .uitklap { width: 18px; height: 18px; margin: 0 -4px 0 -6px; flex: none; transition: transform .15s; }
.zijbalk a .uitklap .i { transform: rotate(-90deg); }
.zijbalk a .uitklap.open .i { transform: rotate(0deg); }
.zijbalk a.submap { font-size: calc(13px * var(--schaal)); padding-top: 4px; padding-bottom: 4px; }
.zijbalk a.submap .i { width: 14px; height: 14px; opacity: .7; }
.zijbalk a .stip, .agenda .stip, .stip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.teller.fout { color: var(--rood, #c0392b); font-weight: 700; }
.etiket.mailboxetiket { opacity: .8; }
/* 0.3.1: de bron van een WhatsApp-, Messenger- of Instagram-gesprek */
.etiket.bron { background: var(--accent-zacht); color: var(--accent); font-weight: 600; }
.etiket.gelezen { background: color-mix(in srgb, var(--groen, #15803d) 14%, transparent); color: var(--groen, #15803d); }
.icoonknop.lezen { opacity: .55; }
.icoonknop.lezen.aan { opacity: 1; color: var(--accent); }
.mappenlijst { display: grid; gap: 4px; margin: 6px 0 10px; }
.mappenlijst .vinkje { margin: 0; }
.afspraak.extern { border-left: 4px solid var(--kleur, #2563eb); padding-left: 10px; }
.kleurstip { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.kleurstip.aan { border-color: var(--tekst); box-shadow: 0 0 0 2px var(--achtergrond, #fff) inset; }
.menu code { font-size: calc(12px * var(--schaal)); background: var(--hover); padding: 1px 5px; border-radius: 4px; }
.zoekveld input { padding-right: 38px; }
.zoekveld > .icoonknop { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; }
.zoekveld > .icoonknop svg { position: static; }
/* 0.3.1b: tokens onleesbaar zonder wachtwoordveld */
.verborgen-invoer { -webkit-text-security: disc; text-security: disc; font-family: monospace; }
/* 0.3.4: per map een keuze (werkmap, archief, verzonden); lange foutmeldingen lopen door op de volgende regel */
.mappenlijst > .rij { flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid var(--rand, #eee); padding: 4px 0; }
.mappenlijst > .rij > .vinkje { flex: 1 1 320px; min-width: 0; }
.mappenlijst > .rij > .vinkje > span { white-space: normal; overflow-wrap: anywhere; }
.mappenlijst select { max-width: 260px; }

/* 0.3.8: balk bij een nieuwe versie */
.nieuwe-versie { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 60; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--rail); color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.2); font-size: calc(13.5px * var(--schaal)); max-width: calc(100vw - 32px); }

/* 0.4.0: stappen in Mijn account */
.kaartblok h4 { font-size: calc(13px * var(--schaal)); margin: 14px 0 6px; }
.stappen { margin: 0 0 8px; padding-left: 20px; font-size: calc(13.5px * var(--schaal)); color: var(--tekst-2); }
.stappen li { margin: 4px 0; }

/* 0.5.0 (#948): takenlijst */
.taak-item { position: relative; }
.taak-item .kies { width: 16px; height: 16px; accent-color: var(--accent); margin: 3px 0 0; opacity: 0; flex: none; }
.taak-item:hover .kies, .taak-item.gekozen .kies { opacity: 1; }
.taak-item.gekozen { background: var(--gekozen); }
.taak-item.sleept { opacity: .4; }
.taak-item.sleep-boven { box-shadow: inset 0 2px 0 var(--accent); }
.taakgroep.slepen-over { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.taak-item .rijknoppen { display: flex; gap: 2px; opacity: 0; margin-left: auto; flex: none; }
.taak-item:hover .rijknoppen, .taak-item:focus-within .rijknoppen { opacity: 1; }
@media (hover: none) { .taak-item .kies { display: none; } .taak-item .rijknoppen { opacity: 1; } }
.etiket.uitgezet { background: color-mix(in srgb, var(--blauw) 13%, transparent); color: var(--blauw); }
.etiket.gekregen { background: color-mix(in srgb, var(--groen) 13%, transparent); color: var(--groen); }
.herkomst { margin: 6px 4px; font-size: calc(13px * var(--schaal)); color: var(--tekst-2); background: var(--achter); border-radius: 8px; padding: 7px 10px; }
.zijbalk a.slepen-over, nav a.slepen-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.bord.week .kolom { width: 230px; }
.bord.week .kolom.vandaag { background: color-mix(in srgb, var(--accent) 8%, var(--achter)); }
.bord.week .kolom.vandaag > h4 { color: var(--accent); }
.bord.week .kolom.laat > h4 { color: var(--rood); }
.taakkaart.gekozen { outline: 2px solid var(--accent); }
.afspraak.taak .titel svg { vertical-align: -2px; }
.menu .snelrij { display: flex; gap: 2px; padding: 0 2px 4px; }
.menu .snelrij button { flex: 1; width: auto; flex-direction: column; gap: 3px; font-size: calc(11px * var(--schaal)); padding: 6px 2px; justify-content: center; text-align: center; color: var(--tekst-2); }
.menu .kleurkeus { display: flex; flex-wrap: wrap; gap: 6px; }
.menu .kleurkeus button { width: 22px; height: 22px; padding: 0; border-radius: 50%; flex: none; }
.menu .kleurkeus button.gekozen { outline: 2px solid var(--tekst); outline-offset: 2px; }
.menu .chip { width: auto; display: inline-flex; padding: 3px 8px; border: 1px solid var(--lijn); border-radius: 99px; font-size: calc(12px * var(--schaal)); }
.menu .chip.aan { background: var(--accent-zacht); border-color: var(--accent); }

/* ---------- 0.6.0 (#950): de eigen agenda ---------- */
div.veld { display: block; margin: 10px 0; font-size: calc(12.5px * var(--schaal)); color: var(--zacht); font-weight: 500; }
div.veld > span:first-child { display: block; margin-bottom: 4px; }
.veld.kort { flex: 1; min-width: 160px; margin: 6px 0; }
.segment { display: inline-flex; border: 1px solid var(--lijn-2); border-radius: 8px; overflow: hidden; background: var(--vlak); }
.segment button { border: 0; background: none; padding: 5px 11px; font: inherit; font-size: calc(13px * var(--schaal)); color: var(--tekst-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.segment button + button { border-left: 1px solid var(--lijn-2); }
.segment button.aan { background: var(--gekozen); color: var(--tekst); font-weight: 600; }
.segment button:disabled { cursor: default; opacity: .7; }
.agenda-scherm .agendakop h1 { font-size: calc(17px * var(--schaal)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agendaknoppen { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.agendazoek { width: 210px; }
.agendazoek input { height: 32px; }
.welkom { margin: 10px 18px 0; padding: 12px 14px; border-radius: 10px; background: var(--accent-zacht); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); display: flex; flex-direction: column; gap: 8px; font-size: calc(13.5px * var(--schaal)); }
.zijbalk .agendarij { display: flex; align-items: center; gap: 2px; padding: 1px 4px 1px 10px; border-radius: 8px; }
.zijbalk .agendarij:hover { background: var(--hover); }
.zijbalk .agendarij label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 5px 0; font-size: calc(13.5px * var(--schaal)); cursor: pointer; color: var(--tekst-2); }
.zijbalk .agendarij input { accent-color: var(--kleur); width: 15px; height: 15px; margin: 0; flex: none; }
.zijbalk .agendarij .icoonknop { width: 26px; height: 26px; opacity: 0; }
.zijbalk .agendarij:hover .icoonknop, .zijbalk .agendarij .icoonknop:focus { opacity: 1; }
@media (hover: none) { .zijbalk .agendarij .icoonknop { opacity: 1; } }
.deelrij { padding: 4px 0; border-bottom: 1px solid var(--lijn); gap: 10px; }
.deelrij select { width: auto; max-width: 60%; }

/* Rooster (dag en week) */
.rooster { display: flex; flex-direction: column; flex: 1; min-height: 0; --uren-b: 52px; }
.rooster-kop, .rooster-heledag, .rooster-lijf { display: grid; grid-template-columns: var(--uren-b) repeat(var(--dagen), minmax(0, 1fr)); }
.rooster-kop { border-bottom: 1px solid var(--lijn); padding-right: 10px; }
.rooster-dagkop { background: none; border: 0; font: inherit; padding: 6px 0; display: flex; flex-direction: column; align-items: center; color: var(--zacht); cursor: pointer; border-radius: 8px; }
.rooster-dagkop span { font-size: calc(12px * var(--schaal)); text-transform: uppercase; letter-spacing: .03em; }
.rooster-dagkop b { font-size: calc(20px * var(--schaal)); color: var(--tekst); font-weight: 600; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.rooster-dagkop:hover b { background: var(--hover); }
.rooster-dagkop.vandaag span { color: var(--accent); }
.rooster-dagkop.vandaag b { background: var(--accent); color: var(--accent-tekst); }
.rooster-heledag { border-bottom: 1px solid var(--lijn); padding-right: 10px; min-height: 28px; }
.rooster-heledag .rooster-hoek { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: calc(11px * var(--schaal)); }
.heledag-cel { border-left: 1px solid var(--lijn); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-width: 0; max-height: 92px; overflow-y: auto; }
.rooster-scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; }
.rooster-uren div { position: relative; font-size: calc(11px * var(--schaal)); color: var(--zacht); text-align: right; padding-right: 6px; }
.rooster-uren div { transform: translateY(-7px); }
.rooster-kol { position: relative; border-left: 1px solid var(--lijn); background-image: repeating-linear-gradient(to bottom, var(--lijn) 0 1px, transparent 1px 22px, color-mix(in srgb, var(--lijn) 45%, transparent) 22px 23px, transparent 23px 44px); cursor: cell; user-select: none; touch-action: pan-y; }
.rooster-kol.vandaag { background-color: color-mix(in srgb, var(--accent) 3%, transparent); }
.nu-lijn { position: absolute; left: -1px; right: 0; height: 2px; background: var(--rood); z-index: 3; pointer-events: none; }
.nu-lijn::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rood); }
.blok { position: absolute; z-index: 2; border-radius: 6px; padding: 3px 6px; font-size: calc(12px * var(--schaal)); line-height: 1.25; overflow: hidden; cursor: pointer; color: var(--tekst);
    background: color-mix(in srgb, var(--kleur) 18%, var(--vlak)); border-left: 3px solid var(--kleur); box-shadow: 0 0 0 1px var(--vlak); }
.blok:hover { background: color-mix(in srgb, var(--kleur) 26%, var(--vlak)); }
.blok:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.blok.eigen { cursor: grab; }
.blok.sleept { opacity: .85; box-shadow: var(--schaduw-hoog); cursor: grabbing; z-index: 5; }
.blok.heel { position: static; padding: 2px 6px; }
.blok.uitnodiging.uitgenodigd { border-left-style: dashed; background: color-mix(in srgb, var(--kleur) 10%, var(--vlak)); }
.blok.taak { background: var(--vlak); border: 1px dashed var(--kleur); border-left: 3px solid var(--kleur); }
.blok.verborgen { background: repeating-linear-gradient(135deg, var(--vlak-2) 0 6px, var(--achter) 6px 12px); color: var(--zacht); }
.blok.nieuw { background: color-mix(in srgb, var(--accent) 22%, var(--vlak)); border-left-color: var(--accent); pointer-events: none; }
.blok-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blok-titel svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.blok-meta { color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(11.5px * var(--schaal)); }
.blok.kort { display: flex; gap: 6px; align-items: baseline; padding-top: 1px; }
.blok.kort .blok-meta { order: -1; }
.blok-greep { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .blok { background: color-mix(in srgb, var(--kleur) 30%, var(--vlak)); } }
:root[data-thema="donker"] .blok { background: color-mix(in srgb, var(--kleur) 30%, var(--vlak)); }

/* Maand */
.maand { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 8px 8px; }
.maand-kop { display: grid; grid-template-columns: repeat(7, 1fr); font-size: calc(11.5px * var(--schaal)); color: var(--zacht); text-transform: uppercase; text-align: center; padding: 6px 0; }
.maand-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(86px, 1fr)); flex: 1; border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); overflow-y: auto; }
.maand-cel { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 2px 3px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: cell; }
.maand-cel.ander { background: var(--vlak-2); }
.maand-cel.ander .maand-dag { color: var(--zacht); }
.maand-cel.doel { background: var(--gekozen); }
.maand-dag { align-self: center; background: none; border: 0; font: inherit; font-size: calc(12.5px * var(--schaal)); font-weight: 600; padding: 2px 7px; border-radius: 99px; cursor: pointer; color: var(--tekst); }
.maand-dag:hover { background: var(--hover); }
.maand-cel.vandaag .maand-dag { background: var(--accent); color: var(--accent-tekst); }
.maand-item { font-size: calc(12px * var(--schaal)); padding: 1px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-left: 3px solid var(--kleur); }
.maand-item:hover { background: var(--hover); }
.maand-item.heel { background: color-mix(in srgb, var(--kleur) 20%, var(--vlak)); }
.maand-item.taak { border-left-style: dashed; }
.maand-meer { background: none; border: 0; font: inherit; font-size: calc(11.5px * var(--schaal)); color: var(--zacht); text-align: left; padding: 0 5px; cursor: pointer; }

/* Lijst en dialoog */
.afspraak.eigen { cursor: pointer; }
.afspraak.eigen:hover { background: var(--hover); }
.afspraakvorm .grote-titel { font-size: calc(18px * var(--schaal)); font-weight: 600; padding: 9px 11px; margin-bottom: 8px; }
.afspraakvorm .tijdrij { gap: 6px; }
.afspraakvorm .tijdrij input[type=date] { width: 150px; }
.afspraakvorm .tijdrij input[type=time] { width: 100px; }
.afspraakvorm .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-weg { border: 0; background: none; padding: 0 0 0 4px; font-size: calc(15px * var(--schaal)); line-height: 1; cursor: pointer; color: var(--zacht); }
.afspraak-taken { display: flex; flex-direction: column; gap: 4px; }
.afspraak-taken .taakregel { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; color: var(--tekst); text-decoration: none; font-size: calc(13.5px * var(--schaal)); }
.afspraak-taken .taakregel:hover { background: var(--hover); }
.afspraak-taken .taakregel.gedaan .afkap { text-decoration: line-through; color: var(--zacht); }
.afspraak-taken .vink { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--zacht); display: grid; place-items: center; flex: none; }
.afspraak-taken .vink.aan { background: var(--groen); border-color: var(--groen); color: #fff; }
.routelijst { padding-left: 20px; margin: 6px 0 12px; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 900px) {
    .agendazoek { width: 100%; order: 3; }
    .agendaknoppen { width: 100%; justify-content: flex-start; }
    .rooster { --uren-b: 40px; }
    .maand-grid { grid-template-rows: repeat(6, minmax(64px, 1fr)); }
    .maand-item .zacht { display: none; }
    .afspraakvorm .tijdrij input[type=date] { width: 140px; }
}
div.veld input, div.veld select, div.veld textarea { font-size: calc(14px * var(--schaal)); color: var(--tekst); font-weight: 400; }
div.veld .rij.nowrap > input:not([type=checkbox]) { flex: 1; }
div.veld label.rij.nowrap { gap: 8px; justify-content: flex-start; font-size: calc(12.5px * var(--schaal)); color: var(--tekst-2); margin-top: 6px; }
@media (max-width: 900px) {
    .agendakop > .rij.ruim { flex-wrap: wrap; gap: 8px; }
    .agenda-scherm .agendakop h1 { font-size: calc(15px * var(--schaal)); }
    .agendaknoppen { flex-wrap: wrap !important; }
    .agendazoek { flex: 1 1 100%; }
    .rooster-heledag .rooster-hoek { font-size: 0; }
    .welkom { margin: 8px 10px 0; }
}

/* ---------- 0.7.0 (#950 fase 2, #952) ---------- */
/* Aanvullen tijdens het typen (contacten, collega's) */
.aanvul { position: fixed; z-index: 120; background: var(--vlak); border: 1px solid var(--lijn-2); border-radius: 10px; box-shadow: var(--schaduw-hoog); padding: 4px; max-height: 300px; overflow-y: auto; }
.aanvul button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 7px; text-align: left; font: inherit; font-size: calc(13.5px * var(--schaal)); color: var(--tekst); cursor: pointer; min-width: 0; }
.aanvul button.aan, .aanvul button:hover { background: var(--gekozen); }
.aanvul .afkap { flex: 1; min-width: 0; }
.postcoderij { gap: 6px; margin-top: 6px; align-items: center; }
.contactkiezer input { width: 100%; }
.contactkiezer .chip { max-width: 100%; overflow: hidden; }
.bezet-uitleg { margin-top: 4px; }
.bezet-uitleg.fout { color: var(--rood); }
.knop.aan { background: var(--gekozen); border-color: var(--accent); }

/* Vegen op de telefoon */
.gesprek-item.veegt { position: relative; z-index: 2; transition: none; }
.gesprek-item.veegt[data-veeg="weg"] { background: color-mix(in srgb, var(--rood) 12%, var(--vlak)); }
.gesprek-item.veegt[data-veeg="taak"] { background: color-mix(in srgb, var(--accent) 12%, var(--vlak)); }
.gesprek-item.veegt.genoeg[data-veeg="weg"] { background: color-mix(in srgb, var(--rood) 28%, var(--vlak)); }
.gesprek-item.veegt.genoeg[data-veeg="taak"] { background: color-mix(in srgb, var(--accent) 28%, var(--vlak)); }
.gesprek-item.veegt::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: calc(12px * var(--schaal)); font-weight: 700; padding: 3px 8px; border-radius: 99px; color: #fff; }
.gesprek-item.veegt[data-veeg="weg"]::after { content: 'Prullenbak'; right: -100px; background: var(--rood); }
.gesprek-item.veegt[data-veeg="taak"]::after { content: 'Taak maken'; left: -100px; background: var(--accent); }

/* Privé, uitnodigingen en bezet in het rooster */
.blok.prive { background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--kleur) 14%, transparent) 7px 9px); }
.blok.nog-reageren { border-left-style: dashed; background: color-mix(in srgb, var(--kleur) 8%, var(--vlak)); }
.blok.geweigerd { opacity: .5; text-decoration: line-through; }
.blok.bezet { cursor: default; }
.blok.bezet[role="button"] { cursor: pointer; }
.maand-item.prive { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--kleur) 16%, transparent) 6px 8px); }
.rooster-kol.doel { background-color: color-mix(in srgb, var(--accent) 8%, transparent); }
.teamkop { flex-direction: row; gap: 6px; justify-content: center; cursor: default; font-size: calc(13px * var(--schaal)); color: var(--tekst); min-width: 0; padding: 8px 4px; }
.rooster.team .rooster-kol { cursor: cell; }

/* Taken naast de agenda */
.rooster-met-taken { display: grid; grid-template-columns: minmax(0, 1fr) 280px; flex: 1; min-height: 0; }
.rooster-met-taken > .rooster { min-width: 0; }
.takenpaneel { border-left: 1px solid var(--lijn); padding: 10px 12px; overflow-y: auto; min-height: 0; background: var(--vlak-2); }
.takenpaneel .paneelkop { font-size: calc(11.5px * var(--schaal)); text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); margin: 12px 0 4px; font-weight: 600; }
.paneeltaak { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; background: var(--vlak); border: 1px solid var(--lijn); margin-bottom: 4px; cursor: grab; font-size: calc(13px * var(--schaal)); }
.paneeltaak a { color: var(--tekst); text-decoration: none; min-width: 0; }
.paneeltaak .vink { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--p, var(--zacht)); background: none; padding: 0; flex: none; cursor: pointer; }
.paneeltaak .vink:hover { background: color-mix(in srgb, var(--p, var(--zacht)) 20%, transparent); }
.paneeltaak .fout { color: var(--rood); }
.blok.taak[draggable="true"] { cursor: grab; }

/* Contacten */
.contact-item { text-decoration: none; color: inherit; }
.contactgegevens { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.contactregel { gap: 10px; font-size: calc(14px * var(--schaal)); align-items: flex-start; }
.contactregel svg { margin-top: 3px; color: var(--zacht); flex: none; }
.contactlink { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--tekst); font-size: calc(13.5px * var(--schaal)); }
.contactlink:hover { background: var(--hover); }
@media (max-width: 900px) {
    .rooster-met-taken { grid-template-columns: 1fr; }
    .takenpaneel { border-left: 0; border-top: 1px solid var(--lijn); max-height: 40vh; }
}

/* ---------- 0.8.0 (#953) ---------- */
.opslaanknop[disabled] { background: transparent !important; border-color: transparent !important; color: var(--groen) !important; opacity: 1; cursor: default; box-shadow: none; }
.prullenbak-item { cursor: default; align-items: center; }
.prullenbak-item .titel { font-weight: 500; }


.eerder-gesprek { border: 1px solid var(--lijn); border-radius: var(--rond); margin: 0 0 6px; background: var(--vlak-2); }
.eerder-gesprek > summary { display: flex; gap: 8px; align-items: center; padding: 8px 10px; cursor: pointer; list-style: none; min-width: 0; }
.eerder-gesprek > summary::-webkit-details-marker { display: none; }
.eerder-gesprek > summary::before { content: '▸'; color: var(--zacht); transition: transform .12s; }
.eerder-gesprek[open] > summary::before { transform: rotate(90deg); }
.eerder-gesprek[open] > summary { border-bottom: 1px solid var(--lijn); }
/* 0.8.1: eerdere gesprekken onderaan het gesprek (ingeklapt) en voorproefjes in het contactpaneel. */
details.eerdere { margin: 18px 0 8px; padding: 0 2px; }
details.eerdere > summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; padding: 8px 10px; border-radius: var(--rond); color: var(--tekst-2); font-size: calc(13px * var(--schaal)); font-weight: 600; border: 1px dashed var(--lijn); }
details.eerdere > summary::-webkit-details-marker { display: none; }
details.eerdere > summary::before { content: '▸'; color: var(--zacht); transition: transform .12s; }
details.eerdere[open] > summary { margin-bottom: 8px; }
details.eerdere[open] > summary::before { transform: rotate(90deg); }
.contact .eerder-kaart { padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); margin: 0 0 8px; font-size: calc(13px * var(--schaal)); }
.contact .voorproef { margin: 6px 0 2px; color: var(--tekst-2); font-size: calc(12.5px * var(--schaal)); line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: var(--voorproef-regels, 10); -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.linkknop { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; }
.linkknop:hover { text-decoration: underline; }
.eerder-inhoud { padding: 4px 10px; max-height: 70vh; overflow-y: auto; }
.eerder-inhoud .berichten { padding: 0; }

/* 0.8.1 (Dennis 28-10): altijd zien waar je op reageert. */
.reactie-op { display: flex; gap: 8px; align-items: center; font-size: calc(12.5px * var(--schaal)); color: var(--tekst-2); background: var(--accent-zacht); border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; min-width: 0; }
.reactie-op .i { flex: none; color: var(--accent); }
.reactie-op b { color: var(--tekst); font-weight: 600; }
.bericht.antwoord-doel { box-shadow: 0 0 0 2px var(--accent); }
.bericht.antwoord-doel .kop .naam::after { content: 'Je reageert hierop'; margin-left: 8px; font-size: calc(11px * var(--schaal)); font-weight: 600; color: var(--accent); background: var(--accent-zacht); padding: 1px 7px; border-radius: 5px; }

/* 0.8.2 (Dennis 28-10): lettergrootte instelbaar (Mijn account > Weergave, per apparaat). --schaal vergroot alleen de tekst,
   niet de knoppen en rondjes. Zonder eigen keuze is de tekst op een telefoon iets groter dan op de computer. */
@media (max-width: 900px) { :root:not([data-letter]) { --schaal: 1.1; } }
:root[data-letter="groter"] { --schaal: 1.15; }
:root[data-letter="groot"] { --schaal: 1.3; }
:root[data-letter="extra"] { --schaal: 1.45; }
:root[data-letter="normaal"] { --schaal: 1; }

/* ---------- 0.8.5 (Dennis 28-10): gesprek op de telefoon ---------- */
.antwoordvak .vak-kop, .antwoordvak .vak-dicht { display: none; }
@media (max-width: 900px) {
    /* Eén scrollgebied: de kop scrolt mee weg, zodat het bericht het hele scherm krijgt. */
    .detail .paneelhoofd { overflow-y: auto; overscroll-behavior: contain; }
    .detail .paneelhoofd > .scroll { flex: 1 0 auto; overflow: visible; min-height: auto; }
    .gesprekkop { gap: 6px; padding: 8px 10px 8px; }
    .gesprekkop h1 { font-size: calc(16.5px * var(--schaal)); line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
    .gesprekkop h1.heel { -webkit-line-clamp: unset; display: block; }
    .gesprekkop .meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; gap: 6px; font-size: calc(12.5px * var(--schaal)); }
    .gesprekkop .meta > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .gesprekkop .meta > span:nth-of-type(2) { flex: none; }
    .gesprekkop .meta .kanaalicoon, .gesprekkop .meta > :first-child { flex: none; }
    .werkbalk { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .werkbalk::-webkit-scrollbar { display: none; }
    .werkbalk .alleen-breed { display: none; }
    .werkbalk > * { flex: none; }
    /* Antwoordvak dicht: één balk onderaan het scherm. */
    .antwoordvak { position: sticky; bottom: 0; z-index: 5; padding: 8px 10px; box-shadow: 0 -4px 14px rgba(0, 0, 0, .06); }
    .antwoordvak:not(.open) > :not(.vak-dicht) { display: none; }
    .antwoordvak .vak-dicht { display: flex; gap: 8px; }
    .antwoordvak .vak-dicht .knop { justify-content: center; min-height: 42px; }
    /* Open: over het hele scherm, Versturen bovenin. */
    .antwoordvak.open { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 0 10px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); box-shadow: none; overflow-y: auto; }
    .antwoordvak.open .vak-dicht { display: none; }
    .antwoordvak.open .vak-kop { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 3; background: inherit; padding: max(10px, env(safe-area-inset-top)) 0 10px; margin: 0 -2px 4px; border-bottom: 1px solid var(--lijn); }
    .antwoordvak.notitie.open { background: var(--vlak); }
    .vak-titel { font-weight: 700; font-size: calc(15px * var(--schaal)); }
    .antwoordvak.open .doos { flex: 1; display: flex; flex-direction: column; min-height: 200px; }
    .antwoordvak.open textarea { flex: 1; max-height: none; min-height: 160px; font-size: max(16px, calc(15px * var(--schaal))); /* 16px: iOS zoomt dan niet in */ }
    .antwoordvak.open .balk .zacht.klein { display: none; }
}
/* 0.8.5: reacties van Facebook en Instagram */
.kanaal.fb_reactie { background: var(--fb); } .kanaal.ig_reactie { background: linear-gradient(45deg, #f9a43a, #d62976 55%, #7b3bc4); }
.post-context { border: 1px solid var(--lijn); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin: 4px 0 8px; display: grid; gap: 4px; background: var(--vlak); }
.post-context .post-tekst { white-space: pre-wrap; font-size: calc(13.5px * var(--schaal)); }
.kanaal.reacties { background: var(--fb); }