/* ===================== TOKENS ===================== */
:root {
/* Anthropic/Claude-palet — Slate (inkt) · Cloud (grijs) · Ivory (papier) ·
Book Cloth/Kraft/Manilla (warm) + Focus/Error. Eén warme achtergrond voor de
héle app; kaarten in --color-surface contrasteren daartegen. Primitives onderaan. */
--color-bg: hsl(60 14% 97%); /* licht warm-wit paginagrond */
--color-surface: #ffffff; /* kaarten */
/* Sidebar een tint donkerder dan de warme bg, zodat de nav-rail zich aftekent. */
--color-sidebar-bg: #f0eee6;
/* Subtiele hover/actief-markering: een lichte donkere waas — altijd ietsje
donkerder dan de ondergrond (werkt op elke achtergrond). */
--color-hover: rgba(25, 25, 25, 0.06);
/* Subtiel vlak voor het eigen bericht / actief nav-item (book cloth, lage opacity). */
--color-surface-own: rgba(204, 120, 92, 0.08);
--color-text: #191919; /* Slate Dark (inkt) */
--color-text-muted: #666663; /* Cloud Dark — AA op de bg (~4.8:1) */
--color-border: #d6d5cd; /* zacht, iets donkerder dan de bg */
/* Book Cloth (#cc785c) is te licht voor witte tekst; verdiepte tint voor tekst-
dragende acties (de heldere #cc785c gebruiken we waar geen tekst op staat). */
--color-accent: #b5663f;
--color-accent-hover: #9c5436;
/* Omgangsband "wie heeft de kinderen": één vaste neutrale gray-tint voor béíde ouders,
bewust BUITEN het agenda-kleurpalet (Agenda::Palette) zodat 'ie nooit botst met een
door een ouder gekozen kleur. */
--color-custody: #7d7a70;
--color-focus: #61aaf2; /* Focus-ring */
/* Eén rood voor error én danger (herijkt 2026-07-18 naar de de-facto danger-tint
die de app overal gebruikte; donkerder = beter contrast op wit/soft). */
--color-error: #b23a2a;
/* Redesign-tints (mobiel app-ontwerp 2026-06) — semantische zacht-vlakken +
co-ouder/status-kleuren. Eén bron voor alle redesign-schermen (Home e.v.).
Het accent (#b5663f) en de bg blijven de bestaande tokens; dit vult alleen
de tints aan die het ontwerp gebruikt. */
--color-soft: #f7e9e2; /* accent-tint achtergrond (zacht zand) */
--color-softer: #fbf4ef; /* lichtste accent-tint (active/hover-rijen) */
--color-faint: #b6ada3; /* labels, placeholders, iconen-uit */
--color-line: #ece4db; /* fijne scheidingslijn op kaarten */
--color-coparent: #6b53df; /* co-ouder-kleur (custody, unread-stip) — paars */
--color-coparent-soft: #ede9fb; /* co-ouder tint-achtergrond */
--color-amber: #b0742a; /* status "actie nodig" / wacht-op-akkoord */
--color-amber-soft: #f7ead5; /* amber tint-achtergrond */
--color-green: #3e8e5a; /* status "geregeld" / bevestigd */
--color-green-soft: #e4efe6; /* groen tint-achtergrond */
--color-now-line: #e0492b; /* agenda huidige-tijd-markering (warm rood) */
/* Status-diepten & -randen (consistentie-ronde 2026-07-18): tekst-op-soft en
hairlines per statusfamilie — vervangen de losse hexes in de feature-css. */
--color-amber-deep: #8a5a1e; /* tekst op amber-soft */
--color-amber-border: #ead6b8;
--color-green-deep: #245c3b; /* tekst op green-soft */
--color-green-border: #cfe6d5;
--color-coparent-deep: #4a3b8a; /* tekst op coparent-soft */
--color-coparent-border: #dad2f5;
--color-error-soft: #f7e2dd; /* zacht rood vlak (danger/nood) */
--color-error-border: #ead0ca; /* randen/hovers rond error-soft */
--color-error-deep: #8a3324; /* tekst op error-soft */
--color-soft-border: #eedbcf; /* randen op accent-soft/-softer-vlakken */
/* Bestandstype-tinten (Documenten-handoff): één tint per extensie, zodat een PDF,
Word- of spreadsheet-tegel op afstand herkenbaar is. Bewust eigen tokens en niet
error-soft/green-soft hergebruikt: dit is typering, geen status. */
--color-file-pdf: #c0402b;
--color-file-pdf-soft: #f7e2dd;
--color-file-doc: #2b5cc0;
--color-file-doc-soft: #dee7f9;
--color-file-sheet: #2e8b57;
--color-file-sheet-soft: #e4efe6;
/* Vakantie-badges: bewust blauw — functioneel onderscheidend van status-groen/amber
(vakantie is een feit, geen status). Enige koele badge-familie in het palet. */
--color-holiday-soft: #dbeafe;
--color-holiday-deep: #1e40af;
--color-cover-cool: #e7edef; /* fotoboek-cover-tint t5 (bewust koel) */
--color-on-accent: #ffffff; /* tekst/iconen op gevulde (accent/coparent/donkere) vlakken */
--color-muted-warm: #8b8076; /* warme muted-tekst (splash; zelfde familie als de mails) */
/* Gradients — één bron voor hero-/kaartvullingen (home, plan, paywall, overdracht). */
--gradient-accent: linear-gradient(140deg, var(--book-cloth), var(--color-accent-hover));
--gradient-coparent: linear-gradient(140deg, #7a63e8, #5942c9);
/* Chat (DP2) — deelt de bg met de rest (DRY → --color-bg). Eigen bubbel warm
(Manilla), de ander wit; book cloth als warm accent. */
--color-chat-bg: var(--color-bg);
--color-chat-bubble-own: #ebdbbc; /* Manilla */
/* Eigen-bubbel tekst/meta warm getint (zand-bubbel uit het mobiele ontwerp): bruine
tekst + gedempte warme tijd i.p.v. neutraal grijs. Eigen tokens zodat de gezin-badge
(die --color-chat-bubble-own deelt) ongemoeid blijft. */
--color-chat-bubble-own-text: #4a3826;
--color-chat-bubble-own-meta: #a98d63;
--color-chat-bubble-other: #ffffff;
--color-chat-text: var(--color-text);
--color-chat-border: var(--color-border);
/* Warme, accent-getinte hairline om witte bubbels/pill af te bakenen tegen de
warm-witte bg — strak als een lijn, maar warm (geen koud grijs). */
--color-chat-edge: rgba(204, 120, 92, 0.30);
--color-chat-accent: var(--color-accent);
--color-chat-accent-hover: var(--color-accent-hover);
--color-chat-surface-own: rgba(204, 120, 92, 0.08);
/* Spacing (4px-schaal) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
/* Typografie — klassiek Segoe UI op Windows: zwaar gehint, kraakhelder op kleine
maten (de Variable-versie oogt waziger door zachtere hinting). De Fluent-look
komt uit de layout/componenten, niet uit de font. --font-display deelt dezelfde
stack; het Title-gevoel komt uit weight 600 + letter-spacing. */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: "Funnel Display", var(--font-sans);
/* Typografie-ladder (consistentie-ronde 2026-07-18): álle font-sizes verwijzen naar
een trede — nooit een losse px-waarde in een declaratie. Anchors uit de design-
handoff (xs/sm/base/lg = 12/14/16/18); tussen-/display-treden numeriek benoemd.
Halve pixels zijn bij de migratie omhoog gerond; 9→10, 17→18, 19→20, 21/23→22,
25→24, 27→26, 30/31/34→32. Latere versmalling richting de 4-staps design-schaal
(13→xs/sm, 15→sm/base) = bewuste vervolg-stap mét visuele review. */
--text-10: 0.625rem; /* micro-badges, dev-labels */
--text-11: 0.6875rem; /* meta, timestamps, eyebrows */
--text-xs: 0.75rem; /* 12px */
--text-13: 0.8125rem; /* dichte UI — meest gebruikte maat */
--text-sm: 0.875rem; /* 14px */
--text-15: 0.9375rem; /* ruime body/rijen */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px — subkoppen */
--text-20: 1.25rem;
--text-22: 1.375rem;
--text-24: 1.5rem; /* sheet-/paginatitels */
--text-26: 1.625rem;
--text-28: 1.75rem;
--text-32: 2rem; /* hero-titels/statgetallen */
--text-40: 2.5rem;
--text-56: 3.5rem; /* splash-logo */
--weight-medium: 500;
--leading: 1.5;
/* Eén chevron-pijl voor álle app-selects (DRY): eigen SVG i.p.v. de native
systeem-pijl. Gebruik met appearance:none + background-position: right 14px center
+ padding-right: 40px zodat de pijl nooit tegen de rand of onder de tekst plakt. */
--select-chevron: url('data:image/svg+xml;utf8,');
/* Vorm — zacht (Claude): ruime radii, subtiele schaduwen. Bubbels krijgen hun
eigen, grotere radius. */
--radius: 8px;
--radius-control: 6px; /* knoppen/velden/nav-items */
--radius-bubble: 18px; /* chatbubbel-hoeken (minus de afgeplatte tail) */
--sidebar-width: 264px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
/* Elevatie-ladder — inkt-getinte, zachte dieptes; voor kaarten/zwevers. */
--shadow-4: 0 2px 4px rgba(25, 25, 25, 0.10), 0 0 2px rgba(25, 25, 25, 0.07);
--shadow-8: 0 4px 8px rgba(25, 25, 25, 0.10), 0 0 2px rgba(25, 25, 25, 0.06);
--shadow-16: 0 8px 16px rgba(25, 25, 25, 0.12), 0 0 2px rgba(25, 25, 25, 0.06);
/* Fluent-motion — decelerate-curve + snelle/normale duur. */
--curve-decel: cubic-bezier(0.1, 0.9, 0.2, 1);
--dur-fast: 120ms;
--dur-normal: 200ms;
/* Primitives uit het Anthropic/Claude-palet (laagste laag, geen semantiek). */
--slate-dark: #191919;
--slate-medium: #262625;
--slate-light: #40403e;
--cloud-dark: #666663;
--cloud-medium: #91918d;
--cloud-light: #bfbfba;
--ivory-dark: #e5e4df;
--ivory-medium: #f0f0eb;
--ivory-light: #fafaf7;
--book-cloth: #cc785c;
--kraft: #d4a27f;
--manilla: #ebdbbc;
/* Merk-inkt van het blinCo-woordmerk (bewust geen slate: eigen merk-tint) + de
inverse-accent op donkere grond. Alleen voor shared/_logo. */
--logo-ink: #1a2230;
--logo-inverse-accent: #6ea3e8;
/* Dataviz (DP6) — losse data-lijn in neutraal grijs: bewust NIET de actie-kleur,
zodat een sparkline/bar niet als klikbaar actie-element leest. */
--color-dataviz-line: var(--cloud-dark);
--color-dataviz-muted: var(--cloud-light);
--color-dataviz-axis: var(--color-border);
--color-dataviz-text: var(--color-text-muted);
/* Categorie-kleuren voor donut/multi-serie: onderscheidend & gelijkwaardig
(book cloth vs neutraal grijs — zoals M365/Claude-usage); géén verkeerslicht. */
--color-dataviz-cat-1: var(--book-cloth); /* #cc785c */
--color-dataviz-cat-2: var(--cloud-dark); /* #666663 */
--color-dataviz-cat-3: var(--kraft); /* #d4a27f */
--color-dataviz-cat-4: var(--slate-light); /* #40403e */
/* Barometer (DP3) — gespreks-richting-meter. Bewust één wárme tint-familie die
in verzadiging/diepte oploopt (zand → terracotta → diep oker), NOOIT een
verkeerslicht (groen→rood = morele as, smokkelt een oordeel terug) en NOOIT
signaalrood (alarmeert → verhoogt arousal → escaleert zelf). Familie-conflict-
/style-eis: rustig, niet-alarmerend. Tint-waarden = startwaarden, te tunen met
de drempel-kalibratie. Track/fill dragen nooit tekst → geen WCAG-tekst-eis erop;
de richting-betekenis staat in het label + de positie (kleur is nooit de enige
drager). */
--color-barometer-track: var(--color-chat-border);
--color-barometer-calm-fill: #b8b3a7; /* warm-neutraal grijs, geen connotatie */
--color-barometer-warming-fill: var(--kraft); /* Kraft (tan) — warm, geen alarm */
--color-barometer-hot-fill: var(--book-cloth); /* Book Cloth (terracotta), geen rood */
/* Bewust expliciet warm gehouden (niet aan een nu-koel token gekoppeld): de
warme niet-alarm-doctrine geldt ook ná de ZIVVER-restyle van de chrome. */
--color-barometer-cooldown-bg: rgba(204, 120, 92, 0.08); /* zacht koraal-vlak */
}
/* ===================== BASE (mobile-first) ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
height: 100dvh;
overflow: hidden;
}
body {
height: 100%;
overflow: hidden;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading);
color: var(--color-text);
background: var(--color-bg);
}
/* Headings in het display-font (Funnel Display) — één basisregel dekt alle h1..h6;
titel-classes die al var(--font-display) zetten blijven werken. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
a { color: var(--color-accent); }
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.container {
width: 100%;
max-width: 640px;
margin-inline: auto;
padding: var(--space-4);
}
@media (min-width: 640px) {
.container { padding: var(--space-6); }
}
/* ===================== COMPONENTEN ===================== */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-4);
}
@media (min-width: 640px) {
.card { padding: var(--space-6); }
}
.card__title {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text);
}
.card__meta {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ===================== CHAT (DP2) ===================== */
/* Eén gespreksstroom in het Claude-palet: volle-breedte warme achtergrond, content
(berichten + composer) gecentreerd. Eigen bericht rechts (warm-grijs), de ander
links (wit) — WhatsApp-indeling. De chat vult de viewport onder de nav (body =
flex-kolom); de stroom scrollt, de composer staat vast onderaan. */
.chat {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--color-chat-bg);
color: var(--color-chat-text);
}
.chat__stream {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-4);
display: flex;
flex-direction: column;
}
/* Berichten vastgeankerd onderaan (WhatsApp-stijl): bij weinig berichten staan ze
onderin, nieuwste onderaan; bij overflow collapst de marge en scroll je omhoog
naar oudere berichten. */
.chat__stream .messages { margin-top: auto; }
.messages {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
/* 760px: chat-breedte — ruimer dan de 640px-container voor niet-chat-pagina's */
max-width: 760px;
margin-inline: auto;
}
.messages__empty {
margin: var(--space-6) 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
}
/* Rij = bubbel + status-vinkjes. De ander links, eigen rechts (class door de
own-message-controller). Kant + afgeplatte bubbelhoek = twee signalen naast
kleur (WCAG 1.4.1). */
.message-row {
position: relative;
display: flex;
flex-direction: column;
align-self: flex-start;
align-items: flex-start;
gap: 2px;
max-width: 80%;
transition: transform 0.18s ease;
}
/* Tijdens het slepen volgt de rij de vinger (geen transitie); bij loslaten veert
'ie terug via de transitie hierboven. */
.message-row--swiping { transition: none; }
.message-row--own {
align-self: flex-end;
align-items: flex-end;
}
/* De ander: wit, géén rand — alleen een lichte schaduw voor de lift t.o.v. de bg. */
.message {
padding: var(--space-2) var(--space-3);
background: var(--color-chat-bubble-other);
border: 1px solid var(--color-chat-edge);
border-radius: var(--radius-bubble);
border-bottom-left-radius: 5px;
}
/* Eigen bericht: warme zand-bubbel met bruine tekst, andere afgeplatte hoek. */
.message-row--own .message {
background: var(--color-chat-bubble-own);
color: var(--color-chat-bubble-own-text);
border-color: transparent;
border-bottom-left-radius: var(--radius-bubble);
border-bottom-right-radius: 5px;
}
/* Tijd/vinkjes in de eigen bubbel: gedempt warm (i.p.v. het neutrale meta-grijs). */
.message-row--own .message__meta { color: var(--color-chat-bubble-own-meta); }
/* Geciteerd bericht (reply): klein quote-blokje bovenin de bubbel. */
.message__quote {
display: block;
margin-bottom: 4px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.04);
border-left: 3px solid var(--color-chat-accent);
border-radius: 6px;
font-size: var(--text-xs);
line-height: 1.35;
}
.message__quote-author { display: block; font-weight: 600; color: var(--color-chat-accent); }
.message__quote-body { display: block; color: var(--color-text-muted); overflow-wrap: anywhere; }
/* Reply-knop (desktop): verschijnt op hover, net buiten de bubbel aan de binnenkant.
Op touch verborgen — daar is de swipe de manier. */
.message__reply {
position: absolute;
top: 50%;
right: -34px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--color-text-muted);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease;
}
.message-row--own .message__reply { right: auto; left: -34px; }
.message-row:hover .message__reply { opacity: 1; }
.message__reply-icon { width: 15px; height: 15px; }
@media (hover: none) {
.message__reply { display: none; }
}
/* Crisis-bubbel — alléén de coach-ruimte. "De warme vloor": een zacht, warm
vasthoudend vlak, NOOIT een alarm (geen rood, geen schreeuw). Zelfde bubbel-
anatomie als .message (DRY); alleen warmer getint — zacht clay-vlak + gedempte
clay-rand. Coach = links, dus de afgeplatte linkeronderhoek blijft staan. */
.message--crisis {
background: var(--color-chat-surface-own);
border-color: rgba(196, 115, 74, 0.35);
}
.message__body {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* Typ-indicator (assistent denkt na / andere ouder typt): drie bolletjes die om de
beurt omhoog wippen — bewust GEEN bubbel-chrome (geen achtergrond/rand/schaduw),
puur de bewegende stippen in de gespreksstroom. Vluchtig client-side element —
nooit gepersisteerd. */
.message--typing {
background: none;
border: none;
border-radius: 0;
padding: var(--space-2) var(--space-3);
}
.typing-dots { display: inline-flex; align-items: center; gap: 6px; }
.typing-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cloud-medium);
animation: typing-bounce 1s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.typing-dots span { animation: none; opacity: 0.6; }
}
/* Assistent-actieknoppen onder een coach-bubbel (prefill; efemeer op de verse beurt). */
.message__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0 4px; }
.message__action-btn {
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: 999px;
padding: 6px 14px;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.message__action-btn:hover { background: var(--color-softer); }
/* Afzender-naam: in een 1-op-1-chat zegt de kant al wie het stuurde — visueel
verborgen, maar in de DOM voor schermlezers. */
.message__author {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Tijd + vinkjes rechtsonder ín de bubbel (WhatsApp-stijl). */
.message__meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-1);
margin-top: 2px;
font-size: 0.625rem;
line-height: 1;
color: var(--color-text-muted);
}
.message__time {
font-variant-numeric: tabular-nums;
}
/* Status (vinkjes): ✓ verzonden, ✓✓ afgeleverd — own-only (controller toont 'm). */
.message__status {
display: inline-flex;
align-items: center;
}
.message__tick {
letter-spacing: -0.15em;
}
/* Dag-scheiding: Fluent-divider — een fijne lijn met een gecentreerd caption-label
(luchtiger dan een pil), gespannen over de berichten-kolom. */
.day-separator {
align-self: stretch;
display: flex;
align-items: center;
gap: var(--space-3);
margin: var(--space-4) 0 var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.day-separator::before,
.day-separator::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-chat-edge);
}
/* Fluent-entree: berichten zakken zacht naar hun plek (rise + fade) met de
decelerate-curve. Eén keer per render; bij een nieuw broadcast-bericht
animeert alleen die ene rij. Respecteert prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
.message-row {
animation: message-in var(--dur-normal) var(--curve-decel) both;
}
}
@keyframes message-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Chat-header: kleurband met naam van de andere ouder (anti-misverzend). */
/* Op mobiel verborgen: de naam staat daar in de bovenbalk (.app__topbar). Op desktop
(geen topbar) komt 'ie terug — zie de 768px-media-query. */
.chat__header { display: none; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-bottom: 3px solid var(--gezin-color, transparent); background: var(--color-surface); flex-shrink: 0; }
.chat__header-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gezin-color, var(--color-accent)); flex: none; }
.chat__header-name { font-weight: 600; }
/* Naam-label (anti-misverzend) zit als aria-label op de knop; visueel verborgen
zodat alleen het vliegtuig-icoon toont. */
.compose__send-name {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Composer: vast onderaan, wit afgerond veld + koraal-verzendknop (Claude-look). */
.chat__composer {
flex-shrink: 0;
padding: var(--space-3) var(--space-4) var(--space-4);
background: var(--color-chat-bg);
}
/* Reply/quote ín de pill (WhatsApp-stijl): grijs blokje boven het tekstveld. */
.compose__reply {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: rgba(0, 0, 0, 0.05);
border-left: 3px solid var(--color-chat-accent);
border-radius: 12px;
}
.compose__reply[hidden] { display: none; } /* [hidden] moet de flex hierboven verslaan */
.compose__reply-quote { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.compose__reply-author { font-size: var(--text-xs); font-weight: 600; color: var(--color-chat-accent); }
.compose__reply-snippet {
font-size: var(--text-sm);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compose__reply-cancel {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--color-text-muted);
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
}
.compose__reply-cancel:hover { color: var(--color-text); }
/* Composer = los tekstveld (eigen pill) + losse ronde verzendknop ernaast
(WhatsApp-stijl). Volle-breedte achtergrond eromheen; content gecentreerd. */
.compose {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-2);
width: 100%;
max-width: 760px;
margin-inline: auto;
}
/* Het veld is de pill (tekstveld + bijlage-/foto-iconen erin); de focus-rand
staat op de pill, niet op het kale tekstveld. */
.compose__field {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background: var(--color-chat-bubble-other);
border: 1px solid var(--color-chat-edge);
border-radius: 24px;
transition: border-color var(--dur-fast) var(--curve-decel);
}
/* De invoer-rij ín de pill: tekstveld + icoon-knoppen. */
.compose__field-row {
display: flex;
align-items: flex-end;
gap: var(--space-1);
}
/* Fluent-focus: de pill zelf krijgt een accent-rand, geen zwevende doos. */
.compose__field:focus-within {
outline: none;
border-color: var(--color-chat-accent);
}
.compose__body {
flex: 1;
min-width: 0;
min-height: 36px;
max-height: 160px;
padding: var(--space-2) var(--space-3);
font: inherit;
color: var(--color-chat-text);
background: transparent;
border: 0;
resize: none;
}
.compose__body:focus-visible {
outline: none;
}
/* Bijlage-/foto-placeholders (disabled): rustige icoon-knoppen in de pill. */
.compose__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--color-text-muted);
background: transparent;
border: 0;
border-radius: var(--radius-control);
cursor: pointer;
transition: background var(--dur-fast) var(--curve-decel),
color var(--dur-fast) var(--curve-decel);
}
.compose__icon:not(:disabled):hover {
background: var(--color-hover);
color: var(--color-chat-text);
}
.compose__icon:disabled {
cursor: default;
opacity: 0.55;
}
.compose__icon-svg {
width: 20px;
height: 20px;
}
/* Bij typen schuift het camera-icoon weg (en maakt ruimte voor de tekst) — WhatsApp-
stijl. CSS-only: zodra het tekstveld niet meer de placeholder toont, is er tekst. */
.compose__icon--camera {
transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.compose__body:not(:placeholder-shown) ~ .compose__icon--camera {
width: 0;
opacity: 0;
transform: translateX(12px);
overflow: hidden;
pointer-events: none;
}
/* Verzendknop met vliegtuig-icoon — vierkante icoon-knop (48px). De "Stuur naar
"-tekst (anti-misverzend) zit als aria-label op de knop en is visueel
verborgen (zie .compose__send-name), zodat alleen het icoon toont. */
.compose__submit {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
color: var(--color-on-accent);
background: var(--color-chat-accent);
border: 0;
border-radius: 16px;
cursor: pointer;
overflow: hidden;
transition: background var(--dur-fast) var(--curve-decel),
transform var(--dur-fast) var(--curve-decel);
}
.compose__submit:hover {
background: var(--color-chat-accent-hover);
}
.compose__submit:active {
transform: translateY(0.5px);
}
.compose__send-icon {
width: 20px;
height: 20px;
transition: opacity 0.15s;
}
/* Subtiele spinner: dun wit ringetje dat ronddraait; icoon verdwijnt zacht. */
/* Transparante wrapper zodat de flex-layout van .compose onveranderd blijft. */
.compose__actions { display: contents; }
/* Generieke laad-spinner-op-knop (submit-spinner-controller, DRY): verbergt de knop-
inhoud (tekst óf icoon, ongeacht opmaak — via > * i.p.v. een element-specifieke regel)
en draait er een wit ringetje overheen. Herbruikbaar op elke knop met een actie die
even duurt (versturen, uploaden, toon-analyse, …) — app-breed één stijl i.p.v. losse
per-knop-implementaties. */
.is-loading { position: relative; cursor: default; pointer-events: none; }
.is-loading > * { visibility: hidden; }
.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: var(--color-on-accent);
border-radius: 50%;
animation: spin 0.65s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Info-/fail-melding boven het veld (rustig informatief, geen alarm). */
.compose__notice {
flex-basis: 100%;
padding: var(--space-1) var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ===================== COACH-RUIMTE (Claude-stijl) ===================== */
/* De coach-ruimte deelt de chat-shell (.chat / .message-row / .message / .compose)
maar volgt het assistent-paradigma i.p.v. WhatsApp: de coach "praat" als platte
donkere tekst direct op de achtergrond (géén bubbel), de ouder houdt een lichte
bubbel rechts. Alle bubbel-anatomie komt nog uit .message (DRY) — hier alléén de
afwijkingen, gescoped onder .coach. */
/* Ouder-bubbel: erft de warme zand-bubbel van de chat (DRY) — geen eigen coach-tint meer. */
/* Coach-beurt: geen bubbel. Sterretje-glyph + platte tekst op de achtergrond, volle
leesbreedte. De crisis-vloer blijft wél een (warme) bubbel — bewust vasthoudend. */
.coach .message-row:not(.message-row--own) {
flex-direction: row;
gap: 11px;
align-items: flex-start;
max-width: 100%;
}
.coach .message-row:not(.message-row--own) .message:not(.message--crisis) {
padding-inline: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.coach .message-row:not(.message-row--own) .message__body { line-height: 1.6; }
/* De coach-rij staat op row (bubbel + acties naast elkaar door de regel hierboven) —
wrap zodat de actieknoppen op een eigen regel ONDER de bubbel vallen i.p.v.
ernaast; flex-basis: 100% dwingt bij .message__actions de nieuwe regel af. */
.coach .message-row:not(.message-row--own) { flex-wrap: wrap; }
.coach .message-row:not(.message-row--own) .message__actions { flex-basis: 100%; }
/* Iets ruimer verticaal ritme tussen ouder-bubbel en coach-tekst (Claude-achtig). */
.coach .messages {
gap: var(--space-4);
}
/* Coach-kop (full-bleed): terug-pijl + "Coach" + "Wis gesprek". */
.coach-head {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 11px;
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 11px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-line);
}
.coach-head__back {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-left: -6px;
color: var(--color-text);
}
.coach-head__back svg { width: 24px; height: 24px; }
.coach-head__title {
flex: 1;
min-width: 0;
font-size: var(--text-lg);
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coach-head .button_to { margin: 0; }
/* Coach-drawer: off-canvas sessielijst (ChatGPT-stijl), ontwerp 2026-07-16. */
.coach-head__menu {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
background: transparent;
border: 0;
cursor: pointer;
}
.coach-head__menu svg { width: 22px; height: 22px; }
.coach-drawer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: min(280px, 84vw);
background: var(--color-surface);
border-right: 1px solid var(--color-line);
box-shadow: var(--shadow-16);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform var(--dur-normal) var(--curve-decel);
/* Boven de altijd-zichtbare desktop-sidebar (.sidebar, z-index 50): eenmaal geopend
dekt de coach-drawer ook die balk, anders onderscheppen de sidebar-links de klik. */
z-index: 55;
}
.coach-drawer--open { transform: translateX(0); }
.coach-drawer__scrim {
position: fixed;
inset: 0;
background: rgba(25, 25, 25, 0.32);
z-index: 54;
}
.coach-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 8px;
}
.coach-drawer__title { font-size: var(--text-lg); font-weight: 800; }
.coach-drawer__close {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
background: transparent;
border: 0;
cursor: pointer;
}
.coach-drawer__new {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 12px 10px;
padding: 9px 12px;
border-radius: var(--radius-control);
background: var(--color-bg);
border: 1px solid var(--color-border);
color: var(--color-text);
font-size: var(--text-sm);
font-weight: 700;
text-decoration: none;
}
.coach-drawer__new svg { width: 16px; height: 16px; }
.coach-drawer__list { flex: 1; overflow-y: auto; padding: 0 8px; }
.coach-drawer__group-label {
font-size: var(--text-11);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-faint);
padding: 10px 8px 5px;
}
.coach-drawer__row {
display: flex;
align-items: center;
gap: 4px;
border-radius: var(--radius-control);
}
.coach-drawer__row--active { background: var(--color-line); }
.coach-drawer__row--active .coach-drawer__row-title { color: var(--color-text); font-weight: 700; }
/* Gearchiveerde sessies: gedempt grijs (lichter dan de normale zwarte tekst), zodat het
archief visueel terugtreedt t.o.v. de actieve lijst. */
.coach-drawer__list[data-coach-drawer-target="archivedList"] .coach-drawer__row-title {
color: var(--color-text-muted);
font-weight: 500;
}
.coach-drawer__row-link {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
padding: 9px 4px 9px 8px;
text-decoration: none;
color: inherit;
}
.coach-drawer__row-title {
font-size: var(--text-sm);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coach-drawer__chip {
flex: none;
font-size: var(--text-10);
font-weight: 700;
padding: 1px 6px;
border-radius: 999px;
background: var(--color-coparent-soft);
color: var(--color-coparent);
}
.coach-drawer__row-menu {
flex: none;
display: inline-flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
color: var(--color-faint);
background: transparent;
border: 0;
cursor: pointer;
}
.coach-drawer__row-menu svg { width: 18px; height: 18px; }
.coach-drawer__empty { padding: 12px 8px; font-size: var(--text-sm); color: var(--color-text-muted); }
.coach-drawer__foot {
border-top: 1px solid var(--color-line);
padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
text-align: left;
font-size: var(--text-13);
font-weight: 600;
color: var(--color-text-muted);
background: transparent;
border-left: 0;
border-right: 0;
border-bottom: 0;
cursor: pointer;
}
/* Sessie-context-sheet (⋯-rijmenu): verticale opbouw — een hernoem-rij bóven een
menu-lijst met tikbare rijen. Bewust NIET de horizontale .sheet-actions (die propt
de drie forms op één regel: afgeknelde input + afgekapte acties). */
.coach-drawer__sheet { display: flex; flex-direction: column; }
/* Hernoem-rij: veld + compacte accent-knop, samen op één regel, gelijke hoogte. */
.coach-drawer__rename {
display: flex;
align-items: stretch;
gap: 8px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-line);
}
.coach-drawer__rename-field {
flex: 1;
min-width: 0;
padding: 11px 13px;
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
background: var(--color-surface);
font: inherit;
font-size: var(--text-15);
color: var(--color-text);
transition: border-color .15s ease, box-shadow .15s ease;
}
.coach-drawer__rename-field::placeholder { color: var(--color-faint); }
.coach-drawer__rename-field:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(181, 102, 63, 0.14);
}
.coach-drawer__rename-save {
flex: none;
padding: 0 17px;
border: 0;
border-radius: var(--radius-control);
background: var(--color-accent);
color: var(--color-on-accent);
font: inherit;
font-size: var(--text-sm);
font-weight: 700;
cursor: pointer;
transition: background .15s ease;
}
.coach-drawer__rename-save:hover { background: var(--color-accent-hover); }
/* Menu-lijst: elke button_to is een eigen