/* ===================== MAIL (spec 2026-08-11) =====================
   In-app mail naast de chat (Taak 2: alleen de leesschermen). Page-geometrie via de
   gedeelde .page-regel in application.css; dit bestand draagt alleen de mail-specifieke
   tabbalk/rijen/berichtweergave. Apart bestand zodat application.css ongemoeid blijft
   (zelfde patroon als meldingen.css/vakanties.css). */

/* Quarantaine-kaart (Taak 12): bovenaan de inbox, vóór de gewone rijen — bewust een
   duidelijk andere vorm dan .listrow (geen leesbare inhoud, wél een keuze) zodat 'm niet
   per ongeluk als een gewoon bericht aanvoelt.

   GRIJS EN NEUTRAAL (design scherm 9): geen rood, geen driehoekje — en sinds die toetsing
   ook geen accent-tint met accentrand meer. De boodschap is "lezen is niet nodig", niet
   "pas op". Accent is in dit ontwerp voor wat je aandacht vráágt; een kaart die zegt dat je
   iets juist niet hoeft te lezen hoort daar niet bij. */
.mail-quarantine { --stack-gap: 3px; }
/* ---------- Inbox-rij (scherm 2) ----------
   Avatar · onderwerp + tijd · fragment. Rijen leven in één .contact-card met hairlines
   ertussen, dus geen eigen rand/radius meer per rij. */
/* Ongelezen: onderwerp én fragment zwaarder en in inkt, plus de stip. */

/* Verzonden/concepten gebruiken dezelfde rij, maar met de oude sender-regel. */

/* ---------- Swipe-acties (scherm 4) ----------
   Rechts antwoorden, links archiveren. Bij een halve veeg zie je de kleur en het woord
   al, zodat je nog kunt terugtrekken. Archiveren is GRIJS, niet rood: de mail blijft
   staan, en rood zou suggereren dat er iets weggegooid wordt. */
/* pan-y: verticaal scrollen is van de browser, horizontaal vegen van ons. Zonder deze
   regel kaapt Android Chrome de zijwaartse beweging (scroll/terug-gebaar), stuurt hij
   touchcancel in plaats van touchend, en blijft de rij halverwege hangen. */
/* De rij loopt van rand tot rand — een veeg hoort bij de schermrand te beginnen — en de
   schermpadding zit ín de rij (zie .mail-swipe > .listrow). Zonder deze negatieve marge
   telde de padding van de pagina er nog eens bovenop en stond de inhoud op 36px. */
.mail-swipe { position: relative; overflow: hidden; touch-action: pan-y; }
/* De hint is DECORATIE: hij ligt over de volle rij en is normaal onzichtbaar (opacity 0).
   Zonder `pointer-events: none` vangt hij wél elke tik op — en dan opent de rij eronder
   niet meer. Bij de mailrijen bleef dat verborgen omdat .listrow zelf `position:
   relative` heeft en dus bovenop schildert; de sessierij in de Blinco-tab (.listrow,
   statisch) had die bescherming niet en was daardoor helemaal niet aan te tikken.
   (Gevonden op de live app, 2026-08-18.) */
.mail-swipe__hint {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-5);
  font-size: var(--text-15);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) linear;
}
/* De rij binnen een veeg-wrapper schildert bovenop de hint en draagt zijn eigen vlak,
   zodat de kleur pas tevoorschijn komt als de rij wegschuift. */
/* De mailrij ligt plat op de paginagrond, zoals de agenda-lijst (feedback 2026-09-10):
   een witte kaart per mail maakte van de lijst een stapel blokjes, en omdat die kaart
   full-bleed is stonden de avatar en de datum tegen de schermrand. De rij houdt een
   ONDOORZICHTIGE grond, want daaronder ligt de swipe-hint; de schermpadding zit nu ín de
   rij zodat de inhoud netjes uitlijnt met de rest van het scherm. */
/* Sinds L4 (2026-10-01) ligt de rij weer in een groep (§3.5): de rij draagt het grijze
   vlak, de wrapper knipt hem op de hoeken van de groep. */
.mail-swipe > .listrow {
  position: relative;
  background: var(--color-card);
}
.mail-swipe__hint .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mail-swipe__hint--reply {
  left: 0;
  right: 0;
  justify-content: flex-start;
  background: var(--color-surface);
  color: var(--color-text);
}
.mail-swipe__hint--archive {
  left: 0;
  right: 0;
  justify-content: flex-end;
  background: var(--color-surface);
  color: var(--color-text-muted);
}
/* Verwijderen (assistent-sessie): zelfde plek als antwoorden — de kant waar je naartoe
   beweegt — maar rood, want dit is onomkeerbaar. */
.mail-swipe__hint--delete {
  left: 0;
  right: 0;
  justify-content: flex-start;
  background: var(--color-error-soft);
  color: var(--color-error-deep);
}
.mail-swipe--reply .mail-swipe__hint--reply,
.mail-swipe--reply .mail-swipe__hint--delete,
.mail-swipe--archive .mail-swipe__hint--archive { opacity: 1; }
/* Voorbij de drempel: het gebaar kondigt zich aan vóór je loslaat. */
.mail-swipe--armed .mail-swipe__hint--reply { background: var(--color-btn); color: var(--color-on-btn); }
.mail-swipe--armed .mail-swipe__hint--archive { background: var(--color-line); color: var(--color-text); }
.mail-swipe--armed .mail-swipe__hint--delete { background: var(--color-error); color: var(--color-on-accent); }
/* De veeg-formulieren zijn de no-JS-terugval; ze worden alleen door de controller
   aangeklikt en horen niet in beeld. */
.mail-swipe__submit { display: none; }

/* ---------- "Ongedaan maken"-balk (scherm 4) ----------
   Vier seconden onderaan. Zwevend boven de lijst, links de mededeling, rechts de weg terug. */
.mail-undo {
  position: sticky;
  bottom: var(--space-4);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-groep);
  background: var(--color-text);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-16);
}
.mail-undo__text { font-size: var(--text-sm); }
.mail-undo__button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--color-on-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Mappen-la (scherm 3) ----------
   Alleen om van map te wisselen: navigatie links, acties onderaan — twee soorten, twee
   plekken. Export staat er bewust niet in (geen object: "exporteren wat?"). */
.mail-drawer { position: fixed; inset: 0; z-index: 60; }
.mail-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 26, 18, 0.4);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--curve-decel);
}
.mail-drawer--open .mail-drawer__backdrop { opacity: 1; }
.mail-drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 80%;
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--space-4);
  background: var(--color-surface);
  /* Geen ronde hoeken: de la is een volle-hoogte laag, geen kaart (§10). */
  border-radius: 0;
  box-shadow: var(--shadow-16);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur-normal) var(--curve-decel);
}
.mail-drawer--open .mail-drawer__panel { transform: translateX(0); }

/* Je Blinco-adres bovenaan: dat is wat de andere ouder ziet. */
.mail-drawer__identity {
  display: flex;
  align-items: center;
  gap: 11px;
  /* 52px bovenmarge = de statusbalk-vrijloop (§10). De kop begon op y=0 en liep
     daardoor onder de notch. */
  padding: 52px 18px 16px;
}
/* Scheidingen lopen niet van rand tot rand maar springen 25px in (§10). Een border
   kan dat niet, vandaar de pseudo-lijn. */
.mail-drawer__identity { position: relative; }
.mail-drawer__identity::after {
  content: "";
  position: absolute;
  inset: auto 25px 0;
  height: 1px;
  background: var(--color-hair);
}
.mail-drawer__identity-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mail-drawer__identity-name { font-size: var(--text-base); font-weight: 500; }
.mail-drawer__identity-address {
  margin-top: 1px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.mail-drawer__folders { padding: var(--space-2) var(--space-2) 0; }
.mail-drawer__folder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-veld-plan);
  color: var(--color-text);
  text-decoration: none;
}
.mail-drawer__folder .icon { flex: none; width: var(--icon); height: var(--icon); color: var(--color-text-muted); }
.mail-drawer__folder-name { flex: 1; font-size: var(--text-base); font-weight: 500; }
/* Twee soorten teller: wat je aandacht vraagt (accent-gevuld) en hoeveel er ligt (gedempt). */
.mail-drawer__folder-count { flex: none; font-size: var(--text-xs); color: var(--color-faint); }

.mail-drawer__rule { height: 1px; margin: 12px 25px; border: 0; background: var(--color-hair); }

/* Thread-detail (mail_threads/show). */

/* Eén mail in de draad (L4, 2026-10-01, variant B): een grijze kaart (26px) met afzender
   (avatar 40 in wit, naam 17, tijd 14) en de tekst op 16/1,55 (conventions §3.4/§3.5). */
.mail-message { padding: 22px 20px; background: var(--color-card); border-radius: var(--radius-groep); }
.mail-message__meta { display: flex; align-items: center; gap: 14px; }
.mail-message__body { padding-top: 12px; font-size: var(--text-base); line-height: var(--leading-lees); white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }

/* Bezorgstatus (Taak 9): bounced is een harde fout (--color-error, spiegelt
   .mail-contact__status--stopped/.mail-review__notice--blocked hierboven); unconfirmed is
   bewust NEUTRAAL (gedempte tekstkleur) — geen valse zekerheid in beide richtingen. */
.mail-message__delivery-status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
}
.mail-message__delivery-status--unconfirmed { color: var(--color-text-muted); font-weight: 400; }
/* Taak 13-review leftover, ingevuld in Taak 15: net als bounced hierboven een bevestigde
   niet-bezorging (het contact heeft het kanaal stopgezet), geen open tussenstand. */
.mail-message__delivery-status--blocked { color: var(--color-error); }

/* Gefilterde weergave (Taak 15, spec §4.3/B5/B6): samenvatting-kaart i.p.v. de rauwe body.
   Het origineel blijft altijd één tik weg via <details> (geen JS nodig) — patroon
   .kindf__more/-sum/-chev (settings/gezin/_kind_fields), eigen klassen hier omdat de kaart
   ook de samenvatting/indicatoren-opmaak draagt die kindf niet heeft. */
.mail-message__summary {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-groep);
}
.mail-message__summary-text {
  margin: 0;
  font-size: var(--text-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mail-message__summary-empty { margin: 0; font-size: var(--text-15); color: var(--color-text-muted); }

/* Rauwe indicatoren (huisregel "rauw tonen", geen eufemisme) — zelfde foutkleur-familie
   als .mail-contact__status--stopped/.mail-review__notice--blocked, want het zijn signalen
   van emotionele lading, geen neutrale metadata. */
.mail-message__indicators {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: var(--space-2) 0 0;
  list-style: none;
}
.mail-message__indicator {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-error-soft);
  color: var(--color-error);
  font-size: var(--text-sm);
}

.mail-message__original { margin-top: var(--space-2); }
.mail-message__original-sum {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  min-height: 44px;
  cursor: pointer;
  color: var(--color-accent);
  font-size: var(--text-15);
  font-weight: 500;
}
.mail-message__original-sum::-webkit-details-marker { display: none; }
.mail-message__original-chev { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); transition: transform .18s ease; }
.mail-message__original[open] .mail-message__original-chev { transform: rotate(180deg); }
.mail-message__original .mail-message__body { margin-top: var(--space-2); }
.mail-message__body--quoted { padding-top: 0; color: var(--color-text-muted); }

/* Filter-onbeschikbaar-melding (Taak 15): AI was stuk — de mail zelf blijft gewoon rauw
   leesbaar eronder, dus bewust gedempt/neutraal net als .mail-message__rejected-title
   hierboven, geen foutkleur (er ging niets mis met de mail zelf, alleen met het filter). */
.mail-message__filter-notice {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Bijlagen bij een definitieve mail: een stapel losse kaarten (scherm 10). */
.mail-message__attachments {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}
/* ---------- Bijlage als losse kaart (scherm 10) ----------
   "Met extensie en grootte, en een pijl om te bewaren in Documenten — niet alleen
   openen." De extensie leest sneller dan een icoon en zegt of de ander het kan openen;
   de grootte zegt of downloaden zin heeft op een trage verbinding. Openen en bewaren
   zijn twee bedoelingen, dus twee raakvlakken. */
/* Bijlagen als groep witte rijen in de grijze mailkaart (L4, §3.5). */
.mail-message__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 8px 10px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-binnen);
}
.mail-message__attachment:first-child { border-top-left-radius: var(--radius-groep); border-top-right-radius: var(--radius-groep); }
.mail-message__attachment:last-child { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
.mail-message__attachment-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}
.mail-message__attachment .filetile { width: 36px; height: 36px; }
.mail-message__attachment-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mail-message__attachment-name {
  font-size: var(--text-17);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.mail-message__attachment-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.mail-message__attachment-saved,
.mail-message__attachment-save {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
/* Geen gevulde tegel achter bewaren/bewaard: alleen het icoon, in inkt resp. gedempt (iconen
   nooit terracotta, §3.3). */
.mail-message__attachment-saved { background: none; color: var(--color-faint); }
.mail-message__attachment-save { background: none; color: var(--color-text); padding: 0; }
.mail-message__attachment-saved .icon,
.mail-message__attachment-save .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mail-message__attachment-save form { display: contents; }

/* Geweigerde bijlagen bij een binnengekomen mail (Taak 11) — bewust gedempt/neutraal, geen
   foutkleur: de mail zelf kwam gewoon aan, alleen één bestand niet mee. */
.mail-message__rejected-title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.mail-message__rejected-attachments {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: var(--space-1) 0 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Composer (Taak 3): nieuwe mail / reply / concept bewerken (mail_messages/new, edit + _form). */
/* Meegroeien i.p.v. handmatige resize-greep — zelfde reden als .compose__body. */
.mail-compose__body { resize: none; max-height: 320px; min-height: 180px; }
/* Onderwerp in een tekstrij: links, onder het kleine label (de gedeelde .setrow__input staat rechts). */
.setrow__input.mail-compose__subject { width: 100%; min-height: 0; height: auto; padding: 2px 0 0; text-align: left; font-size: var(--text-17); }
.mail-compose__bericht .form__label { display: block; margin: 0 4px 8px; }

/* Controleer je mail: niet te controleren = een grijze kaart (§3.3); "Mijn eigen tekst
   versturen" is een tekstlink onder de knop (§3.9c). */
.mail-review__unavailable { margin-bottom: var(--space-5); padding: 18px 20px; background: var(--color-card); border-radius: var(--radius-groep); }
.mail-review-page > .infobox { margin-bottom: var(--space-3); }
.mail-review__unavailable-titel { margin: 0; font-size: var(--text-17); }
.mail-review__unavailable-tekst { margin: 4px 0 0; font-size: var(--text-15); line-height: var(--leading); color: var(--color-text-muted); }
.mail-review__unavailable > :first-child { margin-top: 0; }
.mail-review__eigen-form { display: flex; justify-content: center; }
.mail-review__eigen { min-height: 44px; font-size: var(--text-15); }

/* ---------- Verzonden (design "Mail - UX ontwerp", scherm 7) ----------
   De status is de tweede regel: in Postvak IN staat daar de tekst van de mail, hier wat
   ermee gebeurd is. ALLEEN MISLUKT KRIJGT KLEUR — afgeleverd is een rustig vinkje, het
   gele vlak is er één keer, en dan met de reden en de twee herstelknoppen erbij. */
/* Sinds L4 (2026-10-01) een rij in de groep, net als Postvak IN (conventions §3.5); de groep
   geeft het grijze vlak. Mislukt kleurt niet de rij maar de statusregel, met de twee
   herstelknoppen eronder. */
.mail-sent > .listrow { color: inherit; text-decoration: none; }
.mail-sent__meta { flex: none; display: flex; align-items: center; gap: 5px; }
.mail-sent__meta .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--color-faint); }
.mail-sent__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.mail-sent__status .icon { flex: none; width: var(--icon-xs); height: var(--icon-xs); }
.mail-sent__status span { min-width: 0; overflow-wrap: break-word; }
/* Afgeleverd: HETZELFDE vinkje als in de chat (.message__tick) — het erft de gedempte
   tekstkleur, want dit is een bevestiging en geen alarm. Eén afleverstatus-idioom door de
   hele app, en alleen mislukt krijgt kleur. */
.mail-sent__status .message__tick { flex: none; }
/* Mislukt: het enige gekleurde vlak in Verzonden, mét de reden erbij. */
.mail-sent__status--bounced { color: var(--color-amber-deep); }
.mail-sent__status--bounced .icon { color: var(--color-amber-deep); }
/* De oplossing staat op de regel: een foutmelding zonder uitweg is een dood spoor. */
/* Onder de tekst van de rij (16 + avatar 40 + 14 = 70px in), twee witte pillen. */
.mail-sent__fix { display: flex; gap: 8px; padding: 0 18px 16px 70px; }
.mail-sent__fix .button { flex: 1; }
/* button_to wikkelt zijn knop in een <form>; die mag de rij-flow niet breken. */
.mail-sent__fix form { display: contents; }

/* ---------- "Niet bezorgd"-banner in de mail (scherm 25) ----------
   Nooit stil laten mislukken: bij een kanaal dat als dossier dient moet je zeker weten wat
   aankwam. Rood alleen voor falen — dit is de enige plek in Contact waar rood verschijnt,
   zodat het signaal hard blijft. Het herstel staat op de plek zelf. */
/* Sinds L4 (2026-10-01): de gewone waarschuwing (.infobox--warning-vorm) bij de mail zelf, met
   twee witte pillen die het oplossen. */
.mail-bounce {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-groep);
  background: var(--color-amber-soft);
  color: var(--color-amber-deep);
}
.mail-bounce__head { display: flex; align-items: center; gap: var(--space-2); }
.mail-bounce__head .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.mail-bounce__title { font-size: var(--text-15); font-weight: 500; }
.mail-bounce__text { margin: var(--space-1) 0 0; font-size: var(--text-15); line-height: var(--leading); }
.mail-bounce__actions { display: flex; gap: 8px; margin-top: 12px; }
.mail-bounce__actions .button { flex: 1; }
.mail-bounce__actions form { display: contents; }
/* ---------- Draad (design "Mail - UX ontwerp", schermen 10 t/m 13) ----------
   Geen chatbubbels: mails zijn te lang voor bubbels, en het zou het verschil met de
   Chat-tab uitwissen. Mail blijft mail. Onder de lijst hangt een vaste antwoordknop, dus
   de inhoud houdt onderaan ruimte vrij. */
/* Ruimte onder de draad voor de vaste antwoordbalk EN de bottom-nav eronder ? anders
   valt de laatste mail achter de knop. */
.mail-thread { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 88px); }
.mail-thread__messages { --stack-gap: 3px; }

/* Antwoorden is de enige knop onderaan, en hij staat vast: hier zoek je 'm in negen van de
   tien gevallen.

   BOVEN de bottom-nav, niet eronder: allebei staan ze `fixed` op bottom: 0, dus zonder
   deze offset schoof de nav er precies overheen en stak alleen de bovenrand van de knop
   er nog bovenuit. */
/* De balk loopt door tot de onderrand, áchter de tabbalk-pil langs (testronde L10): hing hij
   los boven de nav, dan scrolde de mail zichtbaar door de doorzichtige strook ertussen. */
.mail-thread__reply-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 12px var(--page-gutter) calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  /* Op de ondergrond, niet op een wit vlak: de balk is geen kaart. */
  background: var(--color-bg);
}
/* Beantwoorden is de primaire knop van het scherm: inkt-pil van volle breedte, 56px, 18/500
   (conventions §3.8; L4, 2026-10-01). */
.mail-thread__reply-bar .button { min-height: 56px; font-size: var(--text-lg); font-weight: 500; gap: 8px; }

/* ---------- Eerdere mails (schermen 11 t/m 13) ----------
   Oudste boven, als groep rijen; een tik opent één mail op zijn plek. */
.mail-earlier__chev { flex: none; align-self: center; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }

/* Eerdere mail als rij in de groep (L4, §3.5): 16/18/16/16, avatar 40 in wit, naam 17, tijd 14,
   voorvertoning 15 (hooguit twee regels). Open = de hele tekst op zijn plek, chevron omhoog. */
.mail-earlier__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px 16px 16px;
  color: inherit;
  text-decoration: none;
}
.mail-earlier__row--open .mail-earlier__chev { transform: rotate(180deg); }
.mail-earlier__full {
  display: block;
  margin-top: 6px;
  font-size: var(--text-base);
  line-height: var(--leading-lees);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mail-earlier__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 500;
}
.mail-earlier__body { flex: 1; min-width: 0; }
.mail-earlier__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.mail-earlier__sender { font-size: var(--text-17); font-weight: 400; overflow-wrap: break-word; }
.mail-earlier__meta { flex: none; display: flex; align-items: center; gap: 5px; }
.mail-earlier__meta .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--color-faint); }
.mail-earlier__time { font-size: var(--text-sm); color: var(--color-text-muted); }
.mail-earlier__snippet {
  margin-top: 1px;
  font-size: var(--text-15);
  color: var(--color-text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* ---------- Draad-samenvatting (schermen 11 en 30) ----------
   Sinds L4 (2026-10-01): een grijze kaart (§3.5) met een klein kopje, de tekst op 16/1,55 en
   de punten als regels. Status: open = amber (loopt nog), akkoord = groen (zo staat het in de
   mails) — nooit terracotta (§3.3). Het verzoek is een actierij. */
.mail-summary { padding: 18px 20px; background: var(--color-card); border-radius: var(--radius-groep); }
.mail-summary__head { display: flex; align-items: center; gap: 8px; }
.mail-summary__head .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }
.mail-summary__label { font-size: var(--text-15); color: var(--color-text-muted); }
.mail-summary__text { margin: 10px 0 0; font-size: var(--text-base); line-height: var(--leading-lees); }
.mail-summary__points { --stack-gap: var(--space-2); list-style: none; margin: 12px 0 0; padding: 0; }
.mail-summary__point { display: flex; align-items: flex-start; gap: 10px; }
.mail-summary__status { flex: none; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading); }
.mail-summary__status--open { color: var(--color-amber-deep); }
.mail-summary__status--akkoord { color: var(--color-green); }
.mail-summary__point-text {
  flex: 1;
  font-size: var(--text-15);
  line-height: var(--leading);
  color: var(--color-text);
  text-decoration: none;
}
.mail-summary__note { margin: 12px 0 0; font-size: var(--text-sm); line-height: var(--leading); color: var(--color-text-muted); }

.mail-summary__collapsed,
.mail-summary__request {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--radius-groep);
  background: var(--color-card);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-17);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mail-summary__collapsed .icon,
.mail-summary__request .icon { flex: none; width: var(--icon); height: var(--icon); color: var(--color-text); }
.mail-summary__collapsed-text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-15);
  color: var(--color-text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.mail-summary__collapsed-chev { color: var(--color-text-muted); }
.mail-summary__request:active { transform: scale(0.99); }

/* ---------- Zoeken in mail (design "Mail - UX ontwerp", schermen 5 en 6) ----------
   Een modal die over het hele scherm schuift: geen logo, geen kanaalbalk, geen bottom-nav.
   Het veld blijft bovenaan staan; de suggesties eronder worden vervangen door resultaten. */
/* Het zoekveld is een veld zoals elk ander (L4, 2026-10-01, §3.7): witte pil met de
   veldrand; icoon, invoer en kruisje ín het veld. Plakt bovenaan bij het scrollen. */
.mail-search__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px 0 20px;
  background: var(--color-card);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.mail-search__bar:focus-within { border-color: var(--color-text); box-shadow: var(--veld-focus-ring); }
.mail-search__icon { flex: none; display: grid; place-items: center; color: var(--color-text-muted); }
.mail-search__icon .icon { width: var(--icon); height: var(--icon); }
.mail-search__input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 14px 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: var(--text-17);
  color: var(--color-text);
}
.mail-search__input:focus { outline: none; box-shadow: none; }
.mail-search__input::placeholder { color: var(--color-faint); }
.mail-search__clear { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; color: var(--color-text-muted); }
.mail-search__clear .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Filters VÓÓR het typen: bij drie contacten is tikken sneller dan een naam intikken. */
.mail-search__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mail-search__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-15);
  font-weight: 500;
  text-decoration: none;
}
.mail-search__chip .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }
.mail-search__chip--on { background: var(--color-text); border-color: var(--color-text); color: var(--color-on-dark); }
.mail-search__chip--on .icon { color: var(--color-on-dark); }
.mail-search__chip-avatar {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gezin-color, var(--color-card));
  color: var(--color-text);
  font-size: var(--text-10);
  font-weight: 500;
}

/* Zoekgeschiedenis: per regel te wissen, niet alleen als hele lijst. */
.mail-search__history { display: flex; align-items: center; gap: var(--space-2); min-height: 60px; padding: 8px 8px 8px 20px; }
.mail-search__history-term { flex: 1; min-width: 0; font-size: var(--text-17); color: var(--color-text); text-decoration: none; overflow-wrap: break-word; }
.mail-search__history-form { display: contents; }
.mail-search__history-clear {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.mail-search__history-clear .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mail-search__note { margin: var(--space-4) 16px 0; font-size: var(--text-15); color: var(--color-text-muted); line-height: var(--leading); }

/* Actief filter blijft als chip staan: zwart met een kruisje, zodat je ziet dat je
   resultaten beperkt zijn en dat in één tik terug kunt draaien. */
.mail-search__active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 16px; }
.mail-search__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-on-dark);
  font-size: var(--text-15);
  font-weight: 500;
  text-decoration: none;
}
.mail-search__active-chip .icon { width: var(--icon-xs); height: var(--icon-xs); }
.mail-search__count { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Eén resultaat = één MAIL, geen draad: twee treffers in dezelfde draad zijn twee regels. */
.mail-searchresult { display: block; padding: 16px 20px; color: inherit; text-decoration: none; }
.mail-searchresult:active { transform: scale(0.99); }
.mail-searchresult__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.mail-searchresult__subject {
  font-size: var(--text-17); font-weight: 400;
  overflow-wrap: break-word;
}
.mail-searchresult__time { flex: none; font-size: var(--text-sm); color: var(--color-text-muted); }
/* Niet de eerste regel van de mail, maar de zin waar je woord in staat. */
.mail-searchresult__snippet {
  margin: 4px 0 0;
  font-size: var(--text-15);
  line-height: var(--leading);
  color: var(--color-text-muted);
}
.mail-searchresult__mark {
  padding: 0 2px;
  border-radius: var(--radius-xs);
  background: var(--color-mark);
  color: var(--color-text);
  font-weight: 500;
}
.mail-searchresult__context { margin-top: 4px; font-size: var(--text-sm); color: var(--color-text-muted); }
.mail-searchresult__folder::before { content: " · "; }

/* ---------- Mail-acties (design "Mail - UX ontwerp", scherm 8) ----------
   De draad staat bovenaan in de sheet, dus je twijfelt nooit waar de actie op valt.
   Geen verwijder-rij: een verzonden mail gaat hier niet weg. */
/* Rijmaten, kleuren en tekstrollen worden met de andere sheetmenu's gedeeld. */
.mail-actions__list { display: flex; flex-direction: column; gap: 3px; padding-top: var(--space-2); }
.mail-actions__list form { display: contents; }
.mail-actions__body { display: flex; flex-direction: column; min-width: 0; }
.mail-actions__hint { margin-top: 2px; }

/* "Zet in agenda" bij een samenvattingspunt: een klein icoon achter de regel, want het
   punt zelf is de inhoud — de actie mag daar niet mee concurreren. */
.mail-summary__to-agenda {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--color-faint);
  cursor: pointer;
}
.mail-summary__to-agenda .icon { width: var(--icon-sm); height: var(--icon-sm); }
.mail-summary__to-agenda:active { transform: scale(0.92); }

/* De echte bestandskiezer zit ín de knop en blijft onzichtbaar. */
.mail-compose__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Controleer je mail (conventions §3.9c, prototype 29 sep) ----------
   De mail als witte kaart; wat Blinco voorstelt staat in de tekst zelf: jouw zin doorgestreept,
   het voorstel geel gemarkeerd. Geen kaart per voorstel, geen diff per woord. */
.mail-review__kaart { padding: 20px 20px 22px; background: var(--color-surface); border-radius: var(--radius-groep); }
.mail-review__aan { display: block; font-size: var(--text-15); color: var(--color-text-muted); }
.mail-review__onderwerp { margin: 6px 0 0; font-size: var(--text-20); font-weight: 500; line-height: var(--leading-kop); }
.mail-review__tekst { margin-top: 14px; font-size: var(--text-base); line-height: var(--leading-lees); white-space: pre-line; overflow-wrap: anywhere; }
.mail-review__oud { color: var(--color-text-muted); }
.mail-review__nieuw { padding: 0 4px; background: var(--color-mark); border-radius: var(--radius-binnen); color: inherit; }

/* ---------- Bericht → actie (design "Mail - UX ontwerp", scherm 27) ----------
   Lang indrukken op een bericht, in chat én mail. Het bericht staat bovenaan in de sheet,
   dus je twijfelt nooit waar de actie op valt. */
.message-actions__snippet {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-left: 3px solid var(--color-line);
  background: var(--color-panel);
  border-radius: var(--radius-binnen);
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--color-text-muted);
  max-height: 7.5em;
  overflow: hidden;
}
.message-actions__list { display: flex; flex-direction: column; }
.message-actions__item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.message-actions__item + .message-actions__item { border-top: 1px solid var(--color-hair); }
.message-actions__item .icon { flex: none; width: var(--icon); height: var(--icon); color: var(--color-text-muted); }
.message-actions__body { display: flex; flex-direction: column; }
.message-actions__label { font-size: var(--text-base); font-weight: 500; }
.message-actions__hint { margin-top: 1px; font-size: var(--text-xs); color: var(--color-faint); }
/* Lang indrukken mag geen tekstselectie of native menu oproepen op de bericht-rijen. */
[data-message-actions-body] { -webkit-touch-callout: none; }

/* ---------- Rustig bezorgen (design "Mail - UX ontwerp", scherm 29) ----------
   Uitstel is de standaard, geen poort: de bovenste keuze draagt het gewicht, "Nu versturen"
   staat er gewoon onder — zonder drempel, want voor echte spoed moet het gewoon kunnen. */
.quiet-hours__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--color-text-muted);
}
.quiet-hours__choice {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.quiet-hours__choice--primary { border-color: var(--color-btn); }
.quiet-hours__choice:active { transform: scale(0.99); }
.quiet-hours__choice-label { font-size: var(--text-base); font-weight: 500; }
.quiet-hours__when::before { content: " "; }
.quiet-hours__choice-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.quiet-hours__footer { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-faint); }
.quiet-hours__link { color: var(--color-accent); text-decoration: none; }

/* "Gepland" onder een eigen bericht: rustig, want er is niets mis — het wacht alleen. */
.message__scheduled {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.message__scheduled .icon { flex: none; width: var(--icon-xs); height: var(--icon-xs); }
.message__scheduled form { display: contents; }
.message__scheduled-withdraw {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* ===================== GEDEELD PER PERSOON (scherm 31) =====================
   Alles wat jullie deelden op een plek: foto's in een raster, documenten als rijen.
   De actieve tab is DONKER gevuld, niet accent — accent blijft voor acties
   ("Bewaar"). Wat al in Documenten staat draagt een groen vinkje in plaats van
   een tweede knop: de kluis mag niet vollopen met dubbelen. */
.shared-files { --page-max: 880px; }
.shared-files__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0 0;
}
.shared-files__title { font-family: var(--font-display); font-size: var(--text-24); font-weight: 500; margin: 0; }

.shared-files__tabs { display: flex; gap: 6px; padding: var(--space-4) 0 var(--space-1); }
.shared-files__tab {
  padding: 9px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}
.shared-files__tab--active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-on-dark);
}

/* Maandkop: hetzelfde ritme als de zoekresultaten (scherm 6) — de tijd is je
   orientatiepunt bij terugzoeken. */
.shared-files__month {
  margin: var(--space-4) 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-faint);
}

/* ---------- Fotoraster ---------- */
.shared-files__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shared-files__tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-groep);
  overflow: hidden;
  background: var(--color-panel);
}
.shared-files__tile-link { display: block; width: 100%; height: 100%; }
.shared-files__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vinkje en bewaarknop staan op dezelfde plek: de tegel toont er altijd precies een. */
.shared-files__tile-saved,
.shared-files__tile-save {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.shared-files__tile-saved { background: var(--color-green-soft); color: var(--color-text); }
.shared-files__tile-save { background: var(--color-panel); color: var(--color-accent); padding: 0; }
.shared-files__tile-saved .icon,
.shared-files__tile-save .icon { width: var(--icon-sm); height: var(--icon-sm); }
.shared-files__tile-save form { display: contents; }

/* ---------- Documentenlijst ---------- */
.shared-files__list {
  border-top: 1px solid var(--color-line);
}
.shared-files__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 2px;
  border-bottom: 1px solid var(--color-line);
}
.shared-files__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: inherit; }
.shared-files__name { font-size: var(--text-base); font-weight: 500; overflow-wrap: anywhere; }
.shared-files__source { font-size: var(--text-xs); color: var(--color-faint); }
.shared-files__save {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 6px 11px;
  border-radius: var(--radius);
  background: var(--color-panel);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
}
.shared-files__saved {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}
.shared-files__saved .icon { width: var(--icon-xs); height: var(--icon-xs); }

/* ---------- Bijlage-sheet (scherm 18) ----------
   Bron kiezen, dan bestand. Drie bronnen bovenaan, daaronder direct de recente bestanden
   uit Blinco met vinkjes rechts. De limiet staat er vóór het kiezen. */