/* Gedeelde schil voor de nieuwe weergave (2026-09-06), naar het ChatGPT-ontwerp in
   frontend-demo/: zijbalk, kopbalk, paginakop, knoppen, panelen, velden, dialogen en de
   verslag-"papier"-stijl van het sessie-detail. Gescoped op body.layout2; de klassieke
   pagina's blijven onaangeraakt. Pagina-specifiek: sessions2.css, opname2.css, dag2.css,
   eindverslag2.css. */

body.layout2 {
  --navy: #273346; --yellow: #ffb300; --teal: #287e73; --teal-soft: #eaf4f0;
  --bg2: #f8f7f4; --paper: #fff; --text2: #273346; --soft: #657080; --line: #e8e9e7; --radius2: 12px;
  /* zijbalk + knoptekst als tokens (2026-09-17), zodat een thema ze kan overschrijven */
  --accent-text: var(--navy); --side-bg: var(--navy); --side-text: #dce2eb; --side-nav: #c2ccda; --side-nav-active: #fff; --side-muted: #aab5c4; --side-hover: #333f52; --side-active: #3a4658; --side-line: #465164;
  --avatar-bg: #edf1ee; --avatar-text: var(--teal);
  display: block; margin: 0; padding: 0; gap: 0; min-height: 100vh;
  background: var(--bg2); color: var(--text2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5;
}
/* ── Thema's "Levavi" (2026-09-17): palet "Inkt en koper" uit de merkgids — Inkt #141A20, Krijt #F3F0EA,
   Koper #B86B4B (het enige accent, alleen in de omgeving), Nevel #79858D, Diep #0C1116.
   `theme-levavi` = LICHT (standaard, verzoek Niels: "voor iets dat werk lichter maakt ziet donker er
   zwaar uit"): zijbalk in krijt met het woordmerk in inkt, inkt alleen voor tekst, koper als accent.
   `theme-levavi-donker` = de eerste versie met de inkt-zijbalk. Schakelen via Instellingen → Uiterlijk
   (localStorage `theme2`); zonder keuze blijft Focus. */
body.layout2.theme-levavi, body.layout2.theme-levavi-donker {
  --navy: #141A20; --yellow: #B86B4B; --accent-text: #F3F0EA; --teal: #B86B4B; --teal-soft: #F1E6DF;
  --text2: #141A20; --soft: #79858D; --avatar-bg: #F3F0EA; --avatar-text: #141A20;
}
body.layout2.theme-levavi {
  --bg2: #FAF8F4; --paper: #fff; --line: #E6E1D8;
  --side-bg: #F3F0EA; --side-text: #141A20; --side-nav: #3A434B; --side-nav-active: #141A20; --side-muted: #79858D;
  --side-hover: #ECE7DE; --side-active: #fff; --side-line: #E1DBD0;
}
body.layout2.theme-levavi .sidebar2 { border-right: 1px solid var(--line); }
body.layout2.theme-levavi .sidebar2 .nav-item2.active { box-shadow: inset 3px 0 var(--yellow), 0 1px 3px #141a2014; }
body.layout2.theme-levavi .sidebar2 .brand2 { margin: 4px 22px 34px; }
body.layout2.theme-levavi .sidebar2 .new-session2.active { box-shadow: inset 0 0 0 2px #141A20; }
body.layout2.theme-levavi-donker {
  --bg2: #F3F0EA; --paper: #FFFDFA; --line: #E3DED5;
  --side-text: #D9D4CB; --side-nav: #c2bfb7; --side-muted: #79858D; --side-hover: #1C242C; --side-active: #0C1116; --side-line: #2A333B;
}
body.layout2.theme-levavi-donker .sidebar2 .brand2 { margin: 4px 22px 34px; }
body.layout2.theme-levavi-donker .sidebar2 .new-session2.active { box-shadow: inset 0 0 0 2px #F3F0EA; }
body.layout2 .app-nav { display: none; }
body.layout2 .l2-hide { display: none !important; }
body.layout2 .icon2 { width: 19px; height: 19px; flex-shrink: 0; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.layout2 .icon2.small { width: 15px; height: 15px; }
body.layout2 .icon2.big { width: 43px; height: 43px; stroke-width: 1.5; }

/* ── zijbalk ─────────────────────────────────────────────────────────────── */
body.layout2 .sidebar2 { position: fixed; inset: 0 auto 0 0; width: 216px; background: var(--side-bg); color: var(--side-text); padding: 32px 18px 18px; display: flex; flex-direction: column; z-index: 10; box-sizing: border-box; overflow-y: auto; }
.sidebar2 .brand2 { display: block; margin: 0 14px 30px; }
.sidebar2 .brand2 img { display: block; width: 100%; height: auto; }
.sidebar2 .new-session2 { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-bottom: 30px; background: var(--yellow); color: var(--accent-text); border-radius: 8px; font-weight: 600; font-size: .9375rem; text-decoration: none; box-sizing: border-box; }
.sidebar2 .new-session2:hover { filter: brightness(1.04); }
.sidebar2 .new-session2.active { box-shadow: inset 0 0 0 2px var(--navy); }
.sidebar2 .nav2 { display: flex; flex-direction: column; }
.sidebar2 .nav-item2 { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; border: 0; background: transparent; color: var(--side-nav); padding: 12px 14px; margin: 3px 0; border-radius: 8px; font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer; font-family: inherit; text-align: left; }
.sidebar2 .nav-item2:hover { background: var(--side-hover); color: var(--side-nav-active); }
.sidebar2 .nav-item2.active { background: var(--side-active); color: var(--side-nav-active); box-shadow: inset 3px 0 var(--yellow); }
.sidebar2 .sidebar-bottom2 { margin-top: auto; }
.sidebar2 .profile2 { display: flex; align-items: center; gap: 10px; margin-top: 18px; border-top: 1px solid var(--side-line); padding: 22px 10px 2px; font-size: .875rem; color: var(--side-nav-active); }
.sidebar2 .profile2 small { display: block; color: var(--side-muted); font-size: .75rem; }
.avatar2 { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-text); font-size: .875rem; font-weight: 650; }

/* ── schil: kopbalk + pagina ─────────────────────────────────────────────── */
body.layout2 .shell2 { margin-left: 216px; min-height: 100vh; display: flex; flex-direction: column; }
.app-header2 { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 18px 32px; background: var(--paper); box-sizing: border-box; }
.breadcrumb2 { color: var(--soft); font-size: .875rem; }
.breadcrumb2 strong { color: var(--text2); font-weight: 600; }
.health2 { display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: .75rem; }
/* Elke pagina begint op dezelfde plek naast de zijbalk, zodat de titel niet verspringt als je
   van tabblad wisselt. Werkpagina's (sessies, cliënten, dag) lopen door tot 1600 px; lees- en
   schrijfpagina's (body.smal2) stoppen op 950 px inhoud, zodat regels niet te lang worden. */
body.layout2 main.main2 { display: block; width: 100%; max-width: 1600px; margin: 0; padding: 30px 32px 36px; gap: 0; box-sizing: border-box; }
body.layout2.smal2 main.main2 { max-width: calc(950px + 64px); }
/* Prompts, Woordenboek en Prestaties zijn klassieke pagina's in de schil: hun titel staat daar
   links naast "Terug" in dezelfde maat als op de andere pagina's, in plaats van gecentreerd. */
body.layout2 .topbar h1 { text-align: left; font-size: 1.75rem; font-weight: 650; letter-spacing: -.7px; color: var(--text2); }
body.layout2 .topbar .spacer { display: none; }
.page-heading2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.page-heading2 h1 { margin: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -.7px; color: var(--text2); }
.heading-note2 { font-size: .875rem; margin: 5px 0 0; color: var(--soft); }
.heading-note2 #count:not(:empty)::before { content: ' · '; }
.heading-actions2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content-width2 { max-width: 950px; margin: 0; }

/* ── knoppen, panelen, velden ────────────────────────────────────────────── */
body.layout2 .btn2, body.layout2 .ghost2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text2); padding: 9px 14px; font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2; box-sizing: border-box; }
body.layout2 .btn2:hover, body.layout2 .ghost2:hover { background: #f1f3f1; }
body.layout2 .btn2.primary2 { background: var(--yellow); border-color: var(--yellow); color: var(--accent-text); font-weight: 600; }
body.layout2 .btn2.primary2:hover { background: var(--yellow); filter: brightness(1.04); }
body.layout2 .btn2:disabled, body.layout2 .ghost2:disabled { opacity: .5; cursor: not-allowed; filter: none; }
body.layout2 .ghost2 { border-color: transparent; background: transparent; color: var(--soft); }
body.layout2 .icon-btn2 { padding: 7px; }
body.layout2 .text-button2 { border: 0; background: transparent; color: var(--soft); padding: 5px; font: inherit; font-size: .8125rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
body.layout2 .text-button2:hover { color: var(--text2); }
.section-panel2 { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius2); padding: 26px; box-sizing: border-box; }
.section-panel2 > h2 { margin: 0 0 20px; font-size: 1.2rem; font-weight: 620; letter-spacing: -.3px; }
.section-panel2 > h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.section-panel2 .heading-note2 { margin: -12px 0 18px; }
.columns2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row2.between2 { justify-content: space-between; }
.inline-note2 { padding: 12px 14px; background: #f7f3e7; border-radius: 8px; font-size: .8125rem; color: #786230; margin-bottom: 20px; }
.muted2 { color: var(--soft); }
.soft-small2 { font-size: .75rem; display: block; color: var(--soft); font-weight: 400; }
.count-badge2 { font-size: .6875rem; border-radius: 5px; padding: 1px 5px; background: #eaf0eb; color: var(--teal); }
.count-badge2:empty { display: none; }
.field2 { display: grid; gap: 7px; margin: 0 0 16px; font-size: .875rem; color: var(--text2); }
.field2 > span:first-child, .field2 > label:first-child { font-size: .875rem; color: var(--soft); }
body.layout2 .input2, body.layout2 .field2 input:not([type=checkbox]):not([type=radio]), body.layout2 .field2 select, body.layout2 .field2 textarea { width: 100%; box-sizing: border-box; border: 1px solid #dce1de; border-radius: 8px; background: var(--paper); color: var(--text2); padding: 10px 12px; font: inherit; font-size: .875rem; min-width: 0; }
body.layout2 .field2 textarea { resize: vertical; line-height: 1.5; }
body.layout2 .field2 input:focus, body.layout2 .field2 select:focus, body.layout2 .field2 textarea:focus, body.layout2 .input2:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.task2 { display: flex; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); align-items: flex-start; cursor: pointer; }
.task2 input { margin-top: 4px; accent-color: var(--teal); }
.task2 > span { flex: 1; font-size: .9375rem; }
.task2 small { display: block; font-size: .8125rem; color: var(--soft); margin-top: 3px; }
.timeline2 { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.timeline2 time { font-size: .875rem; color: var(--soft); font-variant-numeric: tabular-nums; min-width: 42px; }
.timeline2 h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.timeline2 p { margin: 5px 0; font-size: .875rem; color: var(--soft); }
.report-card2 { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: center; }
.report-card2:last-child { border-bottom: 0; }
.report-card2 .grow2 { flex: 1; min-width: 0; }
.report-card2 h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.report-card2 p { margin: 5px 0 0; font-size: .875rem; color: var(--soft); }
.empty-state2 { text-align: center; padding: 65px 25px; color: var(--soft); font-size: .9375rem; }
.empty-state2 h3 { margin: 0 0 6px; color: var(--text2); font-size: 1.05rem; }
.empty-state2 a { color: var(--teal); }
.eyebrow2 { font-size: .6875rem; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; color: var(--teal); margin-bottom: 12px; }
.choice2 { display: flex; width: 100%; box-sizing: border-box; padding: 18px; text-align: left; justify-content: flex-start; align-items: center; margin-bottom: 12px; gap: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text2); font: inherit; cursor: pointer; }
.choice2:hover { background: #f1f3f1; }
.choice2 .icon2 { color: var(--teal); }
.choice2 strong { display: block; font-weight: 600; font-size: .9375rem; }
.choice2 small { display: block; color: var(--soft); font-weight: 400; margin-top: 3px; font-size: .8125rem; }

/* ── dialogen (instellingen, wizard, verslag-viewer) ─────────────────────── */
body.layout2 dialog.dialog2 { padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--text2); width: min(580px, calc(100% - 30px)); max-height: 88dvh; box-shadow: 0 24px 90px #14243733; box-sizing: border-box; }
body.layout2 dialog.dialog2.wide2 { width: min(860px, calc(100% - 30px)); }
body.layout2 dialog.dialog2::backdrop { background: #17263966; backdrop-filter: blur(3px); }
.dialog-head2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 25px; border-bottom: 1px solid var(--line); }
.dialog-head2 h2 { margin: 0; font-size: 1.3rem; font-weight: 620; letter-spacing: -.3px; }
.dialog-body2 { padding: 25px; overflow: auto; max-height: calc(88dvh - 80px); box-sizing: border-box; }
.dialog-body2 > p { font-size: .875rem; color: var(--soft); margin: 0 0 16px; }
.dialog-footer2 { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 20px; }
.settings-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
body.layout2 .settings-grid2 .btn2 { justify-content: flex-start; padding: 18px; }
body.layout2 .field2 > span:first-child, body.layout2 .field2 > label:first-child { color: var(--text2); }
.dialog-footer2 .spacer2 { flex: 1; }
body.layout2 .model-info2 { display: grid; gap: 2px; background: #f7f8f6; border-color: transparent; }

/* ── sessie-detail: cliëntkop, tabs, verslag-papier (gedeeld door Sessies en Opname) ── */
body.layout2 .detail { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; position: relative; }
body.layout2 .detail > p.loading { color: var(--soft); }
.client-header2 { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.client-header2 .avatar2 { width: 44px; height: 44px; font-size: 1rem; }
.client-header2 .grow2 { flex: 1; min-width: 0; }
.client-header2 h2 { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -.3px; line-height: 1.3; }
.client-header2 .meta2 { color: var(--soft); font-size: .8125rem; margin-top: 4px; }
.header-actions2 { display: flex; align-items: center; gap: 4px; }
body.layout2 .btn-icon.detail-delete-corner { position: static; width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--soft); box-shadow: none; }
body.layout2 .btn-icon.detail-delete-corner:hover { background: #fff0f0; color: #b43b3b; border-color: #f3d6d6; }
.header-extra2 { margin: 0 0 4px 56px; display: flex; flex-direction: column; gap: 6px; }
.header-extra2 .title-wrap { margin: 0; }
.header-extra2 .session-title-input { border: 1px solid transparent; background: transparent; padding: 4px 6px; margin-left: -6px; font-size: .9375rem; color: var(--text2); width: 100%; box-sizing: border-box; resize: none; }
.header-extra2 .session-title-input:hover { border-color: var(--line); background: #fff; }
.header-extra2 .session-title-input:focus { border-color: var(--teal); background: #fff; outline: none; }
.header-extra2 .client-line { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8125rem; }
.header-extra2 .client-line-label { color: var(--soft); }
.header-extra2 .ckaart { margin: 0; }
.detail-tabs2 { display: flex; gap: 25px; border-bottom: 1px solid var(--line); margin: 18px 0 23px; }
.detail-tabs2 button { position: relative; border: 0; border-radius: 0; background: transparent; color: var(--soft); padding: 0 0 13px; font: inherit; font-weight: 500; font-size: .875rem; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.detail-tabs2 button.active { color: var(--teal); }
.detail-tabs2 button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); }
.l2-panel[hidden] { display: none !important; }
.report-view-options2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; font-size: .875rem; color: var(--soft); }
.report-controls2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.report-picker2 { display: grid; gap: 7px; flex: 1; min-width: 0; font-size: .8125rem; color: var(--soft); }
.report-picker2 select { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 9px 12px; font: inherit; font-size: .875rem; color: var(--text2); max-width: 420px; }
.report-picker2.stacked select { display: none; }
.segmented2 { display: inline-flex; background: #f0f2ef; border-radius: 7px; padding: 3px; gap: 3px; }
.segmented2 button { border: 0; border-radius: 5px; background: transparent; padding: 5px 14px; font: inherit; font-size: .8125rem; color: var(--soft); cursor: pointer; box-shadow: none; }
.segmented2 button.active { background: #fff; color: var(--text2); box-shadow: 0 1px 3px #27334615; }

body.layout2 .report-block { border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 4px 18px #27334604; padding: 0; margin: 0 0 26px; overflow: hidden; }
body.layout2 .report-block[hidden] { display: none !important; }
body.layout2 .report-header { width: 100%; box-sizing: border-box; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; background: transparent; border: 0; border-bottom: 0; border-radius: 0; padding: 22px 32px 0; margin: 0; min-height: 0; cursor: pointer; font: inherit; text-align: left; }
body.layout2 .report-header:hover { background: transparent; }
body.layout2 .report-header .report-name { font-size: .6875rem; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; color: var(--teal); }
body.layout2 .report-header .report-desc { font-size: .75rem; color: var(--soft); }
body.layout2 .report-chevron { width: 12px; height: 12px; color: var(--soft); order: 99; margin-left: auto; }
body.layout2 .report-actions { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; padding: 14px 32px 0; margin: 0; }
body.layout2 .report-actions .btn-icon { width: auto; height: 30px; min-width: 0; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text2); padding: 0 10px; font: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.2; }
body.layout2 .report-actions .btn-icon svg { width: 15px; height: 15px; }
body.layout2 .report-actions .btn-icon[data-label]::after { content: attr(data-label); }
body.layout2 .report-actions .btn-icon.editing[data-label]::after { content: 'Opslaan'; }
body.layout2 .report-actions .btn-icon:hover { background: #f1f3f1; }
body.layout2 .report-actions .btn-icon.btn-icon-primary { background: var(--paper); color: var(--text2); border-color: var(--line); }
body.layout2 .report-actions .btn-icon.l2-primary { background: var(--yellow); border-color: var(--yellow); color: var(--accent-text); }
body.layout2 .report-actions .btn-icon.l2-primary:hover { filter: brightness(1.04); }
body.layout2 .report-actions .btn-icon.copied { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-soft); }
body.layout2 .report-actions .btn-icon.btn-icon-danger { margin-left: auto; width: 30px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--soft); }
body.layout2 .report-actions .btn-icon.btn-icon-danger:hover { color: #b43b3b; background: #fff0f0; }
body.layout2 .report-block > .markdown { padding: 22px 32px 24px; font-size: .9375rem; line-height: 1.65; }
body.layout2 .report-block > .markdown .md-heading, body.layout2 .report-block > .markdown h3 { margin: 23px 0 8px; font-size: .9375rem; }
body.layout2 .report-block > .markdown > :first-child { margin-top: 0; }
body.layout2 .report-block > .report-editor { margin: 18px 32px; width: calc(100% - 64px); box-sizing: border-box; }
body.layout2 .report-block > .name-warning { margin: 14px 32px 0; }
body.layout2 .report-block > .ai-edit-panel { margin: 14px 32px 0; }
body.layout2 .report-block > .model-feedback { border-top: 1px solid var(--line); margin: 0; padding: 15px 32px; font-size: .8125rem; }
body.layout2 .report-block > p.empty { padding: 18px 32px 24px; margin: 0; }
body.layout2 .report-block.collapsed { padding-bottom: 18px; }
body.layout2 .generate-section { margin: 0 0 26px; }
body.layout2 .generate-section[hidden] { display: none !important; }
body.layout2 .todo-section { margin-top: 0; }
body.layout2 .l2-panel .pregen-indicator { font-size: .8125rem; color: var(--soft); margin: 0 0 12px; }
body.layout2 details.l2-transcript > summary { display: none; }
body.layout2 details.l2-transcript > div { border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 22px 26px; margin-top: 12px !important; color: var(--text2) !important; font-size: .9rem !important; }
body.layout2 .l2-panel .detail-actions { margin: 0 0 8px; }

/* klassieke pill-knoppen en panelen → ontwerp-stijl (detail, opname-, dag- en verslagen-pagina) */
body.layout2 .btn-primary { background: var(--yellow); color: var(--accent-text); border: 1px solid var(--yellow); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; min-height: 0; width: auto; flex: 0 0 auto; }
body.layout2 .btn-primary:hover { background: var(--yellow); border-color: var(--yellow); filter: brightness(1.04); }
body.layout2 .btn-ghost { background: var(--paper); color: var(--text2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.2; min-height: 0; flex: 0 0 auto; }
body.layout2 .btn-ghost:hover { background: #f1f3f1; color: var(--text2); }
body.layout2 .btn-ghost.btn-ghost-danger { background: #b43b3b; border-color: #b43b3b; color: #fff; }
body.layout2 .btn-ghost.btn-ghost-danger-outline { color: #b43b3b; border-color: #e6bcbc; background: var(--paper); }
body.layout2 .btn-ghost.btn-ghost-danger-outline:hover { background: #b43b3b; color: #fff; }
body.layout2 .btn-danger { border-radius: 8px; padding: 8px 14px; font: inherit; font-size: .875rem; font-weight: 600; min-height: 0; }
body.layout2 .client-line-btn { min-height: 0; padding: 6px 12px; font-size: .8125rem; }
body.layout2 .ai-edit-panel { border: 1px solid var(--line); border-radius: 8px; background: #f5f7f4; box-shadow: none; padding: 14px 16px; }
body.layout2 .ai-edit-input { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; }
body.layout2 .ai-edit-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(40, 126, 115, .15); }
body.layout2 .ai-edit-btns { gap: 8px; }
body.layout2 .ai-edit-status { font-size: .8125rem; color: var(--soft); }
body.layout2 .ai-edit-undo { padding: 5px 10px; font-size: .8125rem; }
body.layout2 .detail .generate-section, body.layout2 .detail .todo-section { border: 1px solid var(--line); border-radius: 9px; background: var(--paper); padding: 22px 32px 24px; box-shadow: 0 4px 18px #27334604; }
body.layout2 .detail .generate-section h3, body.layout2 .detail .todo-section h3 { margin: 0 0 14px; font-size: .6875rem; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; color: var(--teal); }
body.layout2 .detail .generate-section select, body.layout2 .detail .np-select, body.layout2 .detail .todo-section select { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 9px 12px; font: inherit; font-size: .875rem; color: var(--text2); }
body.layout2 .detail .todo-hint, body.layout2 .detail .generate-section .hint, body.layout2 .detail .generate-merge { font-size: .8125rem; color: var(--soft); }
body.layout2 .detail .todo-input { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: inherit; font-size: .9rem; }
body.layout2 .detail .mf-btn { border-radius: 6px; }
body.layout2 .detail .session-title-input { border-radius: 8px; }
body.layout2 .health-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #c8ccd2; }
body.layout2 .health-dot.ok { background: #2f9e6c; }
body.layout2 .health-dot.fail, body.layout2 .health-dot.err, body.layout2 .health-dot.down { background: #b43b3b; }
body.layout2 .health-dot.warn { background: #d9a441; }

/* ── mobiel / smal ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body.layout2 .sidebar2 { width: 196px; padding: 26px 12px 14px; }
  body.layout2 .shell2 { margin-left: 196px; }
  body.layout2 main.main2 { padding: 22px 20px 30px; }
}
@media (max-width: 900px) {
  body.layout2 { padding-bottom: max(env(safe-area-inset-bottom), 8px); }
  body.layout2 .sidebar2 { display: none; }
  body.layout2 .shell2 { margin-left: 0; }
  body.layout2 .app-nav { display: block; }
  .app-header2 { min-height: 0; padding: 10px 16px; }
  .breadcrumb2 { white-space: nowrap; }
  .health2 #healthText { display: none; }
  body.layout2 main.main2 { padding: 14px 12px 96px; }
  .page-heading2 { align-items: center; margin-bottom: 14px; }
  .page-heading2 h1 { font-size: 1.4rem; }
  .heading-note2 { display: none; }
  .section-panel2 { padding: 18px 16px; }
  .columns2 { grid-template-columns: 1fr; }
  .settings-grid2 { grid-template-columns: 1fr; }
  .dialog-footer2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .header-extra2 { margin-left: 0; }
  body.layout2 .report-header, body.layout2 .report-actions { padding-left: 16px; padding-right: 16px; }
  body.layout2 .report-block > .markdown { padding: 16px; }
  body.layout2 .report-block > .name-warning, body.layout2 .report-block > .ai-edit-panel { margin-left: 16px; margin-right: 16px; }
  body.layout2 .report-block > .model-feedback { margin: 0; padding: 12px 16px; }
  body.layout2 .detail .generate-section, body.layout2 .detail .todo-section { padding: 16px; }
}

/* instellingen: beschikbare verslagtypen (2026-09-07) */
.prompt-vis2 { margin-top: 18px; }
.prompt-vis-list2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0 10px; max-height: 240px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfa; }
.prompt-vis-item2 { display: flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; }
.prompt-vis-item2 input { accent-color: var(--teal); }
.prompt-vis-item2 em { font-style: normal; font-size: .7rem; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.prompt-vis-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 600px) { .prompt-vis-list2 { grid-template-columns: 1fr; } }

/* Intramed-modal (intramed-place.js, klassieke stijl) → ontwerp-tokens in de nieuwe weergave (2026-09-07) */
body.layout2 .intramed-modal { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 90px #14243733; color: var(--text2); font-family: inherit; }
body.layout2 .intramed-modal h2, body.layout2 .intramed-modal .imd-title { font-weight: 600; color: var(--text2); }
body.layout2 .intramed-modal .imd-state { color: var(--soft); font-size: .875rem; }
body.layout2 .intramed-modal .imd-state.error { color: #b43b3b; background: #fbeeee; border: 1px solid #e6bcbc; border-radius: 10px; padding: 10px 12px; font-weight: 500; }
body.layout2 .intramed-modal .imd-state.success { color: var(--teal); }
body.layout2 .intramed-modal .imd-btn { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text2); padding: 9px 14px; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.2; cursor: pointer; }
body.layout2 .intramed-modal .imd-btn:hover { background: #f1f3f1; }
body.layout2 .intramed-modal .imd-btn-primary { background: var(--yellow); border-color: var(--yellow); color: var(--accent-text); font-weight: 600; }
body.layout2 .intramed-modal .imd-btn-primary:hover { background: var(--yellow); filter: brightness(1.04); }
body.layout2 .intramed-modal .imd-btn-secondary { background: var(--paper); border-color: var(--line); color: var(--text2); }
body.layout2 .intramed-modal .imd-confirm-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
body.layout2 .intramed-modal .imd-candidate { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
body.layout2 .intramed-modal .imd-candidate.best { border-color: var(--teal); background: var(--teal-soft); }
body.layout2 .intramed-modal .imd-candidate-score { background: var(--teal-soft); color: var(--teal); border-radius: 999px; font-size: .75rem; font-weight: 600; }
body.layout2 .intramed-modal .imd-candidate-time { color: var(--soft); }
body.layout2 .intramed-modal .imd-confirm-card { border-color: var(--teal); background: var(--teal-soft); border-radius: 10px; }
body.layout2 .intramed-modal .imd-confirm-name { color: var(--text2); }
body.layout2 .intramed-modal .imd-confirm-time, body.layout2 .intramed-modal .imd-confirm-meta { color: var(--soft); }
body.layout2 .intramed-modal .imd-replay { margin-top: 10px; }
body.layout2 .intramed-modal .imd-replay-note { color: var(--soft); font-size: .75rem; }
body.layout2 .intramed-modal .imd-manual-input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; }
body.layout2 .intramed-modal .imd-close { color: var(--soft); }

/* EPD-loskoppeling (2026-09-11): app-nav.js zet html.no-intramed als de instantie geen Intramed heeft */
html.no-intramed .im-only { display: none !important; }
html.no-dagmodus .dag-only { display: none !important; }
html.no-sprekers .sprekers-only { display: none !important; }
html.no-metrics .metrics-only { display: none !important; }
html.no-klinisch .klin-only { display: none !important; }
html.no-beheer .beheer-only { display: none !important; }

/* Bewaartermijnen in het instellingenvenster */
.settings-sectie2 { margin-top: 18px; }
.settings-sectie2 h3 { margin: 0 0 4px; font-size: .95rem; }
.bewaar-lijst2 { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; }
.bewaar-rij2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bewaar-naam2 { font-size: .86rem; }
.bewaar-rij2 select { padding: 5px 8px; border: 1px solid var(--line2, #d9d4ca); border-radius: 7px; font: inherit; font-size: .84rem; background: #fff; min-width: 130px; }
.bewaar-acties2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bewaar-status2 { font-size: .78rem; color: var(--text-soft, #6b7280); }
.bewaar-status2.ok { color: #12653c; }
.bewaar-status2.fout { color: #a3241d; }
.bewaar-status2.let-op { color: #8a5a00; }

/* Denkmodus-instelling: uitleg onder de keuze, op een eigen regel (2026-09-19) */
.settings-sectie2 .denk-status2 { display: block; margin-top: 8px; line-height: 1.45; }

/* Transcript-tab: de sprekerschakelaar is geen tekstkaart, dus zonder rand. */
body.layout2 details.l2-transcript > .transcript-toggle { border: 0; background: transparent; padding: 0; margin-top: 0 !important; }
body.layout2 .transcript-toggle .btn-ghost.actief { background: var(--navy); border-color: var(--navy); color: #fff; }
body.layout2 .transcript-speaker { color: var(--teal); }

/* ── Knoppen gelijktrekken (2026-09-26) ────────────────────────────────────────
   Handelingen op een tekst (kopiëren, bewerken, AI-aanpassing, mailen, downloaden)
   krijgen een icoon + woord; andere knoppen alleen een woord. Twee maten: normaal
   (de gewone .btn2) en klein (.knop-klein, 30 px) voor een werkbalk bij een tekst.
   Iconen, kopieerbevestiging en verwijdervraag komen uit knoppen.js. */
body.layout2 .knop-met-icoon { display: inline-flex; align-items: center; gap: 6px; }
body.layout2 .knop-met-icoon .icon2 { width: 15px; height: 15px; }
body.layout2 .btn2.knop-klein, body.layout2 .ghost2.knop-klein, body.layout2 .btn-ghost.knop-klein, body.layout2 .btn-primary.knop-klein {
  height: 30px; padding: 0 10px; font-size: .8125rem; gap: 5px; box-sizing: border-box; min-height: 0; }
body.layout2 .ghost2.knop-klein { color: #4b555c; }
body.layout2 button.knop-klaar { background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal); }
body.layout2 button.knop-mislukt { background: #fff0f0; border-color: #f3d6d6; color: #b43b3b; }
body.layout2 .knop-vraag { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--text2); }
body.layout2 .report-actions .knop-vraag { margin-left: auto; }
body.layout2 .knop-vraag button { height: 30px; padding: 0 10px; border-radius: 8px; font: inherit; font-size: .8125rem; cursor: pointer; border: 1px solid transparent; box-sizing: border-box; }
body.layout2 .knop-vraag .knop-ja { background: #a63a2e; border-color: #a63a2e; color: #fff; font-weight: 600; }
body.layout2 .knop-vraag .knop-ja:hover { filter: brightness(1.08); }
body.layout2 .knop-vraag .knop-ja.gewoon { background: var(--yellow); border-color: var(--yellow); color: var(--accent-text); }
body.layout2 .knop-vraag .knop-vraag-tekst { color: var(--text2); }
body.layout2 .knop-vraag input[type=checkbox] { margin: 0 2px 0 0; }
body.layout2 .knop-vraag label { display: inline-flex; align-items: center; gap: 4px; color: var(--soft); }
body.layout2 .knop-vraag .knop-nee { background: transparent; color: #4b555c; }
body.layout2 .knop-vraag .knop-nee:hover { background: #f1f3f1; }
body.layout2 .knop-vraag button:disabled { opacity: .6; cursor: default; }
body.layout2 .knop-klein.knop-ico2 { width: 30px; padding: 0; justify-content: center; color: var(--soft); }
body.layout2 .knop-klein.knop-ico2:hover { color: #b43b3b; background: #fff0f0; }
/* Vraag met uitleg (bv. kaart opnieuw opbouwen): eigen regel, rustig vlak, knoppen eronder */
body.layout2 .knop-vraag:has(.knop-vraag-uitleg) { display: flex; flex-basis: 100%; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); gap: 8px; }
body.layout2 .knop-vraag-tekst { font-weight: 600; }
body.layout2 .knop-vraag-uitleg { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--soft); line-height: 1.45; }