/* ===================== CHAT · MAIL · ASSISTENT =====================
   Design "Mail - UX ontwerp" (handoff 2026-08-16), schermen 1, 2, 24, 32, 33 en 3b.
   Drie losse bestemmingen sinds de navigatie-opdracht (2026-09-05) — de kanaalbalk is
   vervallen. Deze laag draagt de lijstkaart, de lege staten en de schrijfknop.
   Alle waarden via de tokens uit application.css — geen kale px-kleuren of -radii. */

/* Paginageometrie: zelfde breedte als de andere top-level ouder-schermen. */
.contact { --page-max: 880px; }


/* ---------- Lijst-omhulsel ---------- */
/* Geen eigen padding: de titelrij draagt zijn ruimte al. */
.contact-body { padding-top: 0; }
/* Sectiekop per groep (L4, 2026-10-01): zoals .vkop — 15 muted, 16px ingesprongen, 28/10. */
.contact-section {
  margin: 28px 16px 10px;
  font-size: var(--text-15);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Lijst in de gesprek-hub (Chat, Mail, assistent-archief, zoeken, nieuw bericht) als groep
   rijen (L4, keuze Jerry 2026-10-01, conventions §3.5): elk item een eigen grijs vlak, 3px
   ertussen, 26px buitenhoek, 6px binnenhoek, geen haarlijnen — zoals Kasboek en Contacten.
   De naam "card" blijft: hij zit in tientallen views. */
.contact-card { display: flex; flex-direction: column; gap: 3px; }
/* :is(*, .contact-invite) tilt de specificiteit boven de knop-reset van de instap-rijen
   (background: none), zodat ook die het grijze vlak krijgen. */
.contact-card > :is(*, .contact-invite) { background: var(--color-card); border-radius: var(--radius-binnen); }
.contact-card > :first-child { border-top-left-radius: var(--radius-groep); border-top-right-radius: var(--radius-groep); }
.contact-card > :last-child { border-bottom-left-radius: var(--radius-groep); border-bottom-right-radius: var(--radius-groep); }
/* Een kaart die op een lege staat volgt, is de volgende stáp — geen vervolg van die tekst. */
.empty-state + .contact-card { margin-top: 20px; }

/* ---------- Gespreksrij (scherm 1) ----------
   62px per rij: acht mensen passen zonder scrollen. */
/* ---------- De regel onder de lijst (scherm 1) ----------
   Wie geen Blinco heeft staat hier niet grijs maar helemaal niet; deze regel zegt waar
   je diegene wél vindt. Gecentreerd en gedempt: het is een voetnoot, geen melding. */
.contact-note {
  margin: var(--space-4) 16px 0;
  font-size: var(--text-15);
  line-height: var(--leading);
  color: var(--color-text-muted);
}

/* ---------- Lege staten (scherm 24) ----------
   Hier stond een eigen .contact-empty: geen icoon, eigen maten. De app had die vorm al
   (.empty-state) en het ontwerp tekent 'm mét icoon-cirkel — dus dit was een tweede
   lege staat naast de bestaande. Weg; alles loopt nu via shared/_empty_state. */

/* ---------- Instap-rijen zonder gekoppelde ouder ---------- */
/* KNOP-RESET (verplicht): `samen_cta` levert deze rijen als <a> áls je de functie mag
   gebruiken, en als <button> zodra er een sheet of paywall achter zit. Zonder reset
   krijgt die <button> het standaard browser-chroom — grijs vlak, rand, eigen font —
   en staan twee rijen in dezelfde kaart er totaal verschillend bij. Eén vorm, twee
   elementsoorten. */
.contact-invite {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.contact-invite {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px;
  color: inherit;
  text-decoration: none;
}
.contact-invite:active { transform: scale(0.985); }
/* Icoon in een kaart staat in een witte cirkel van 44px (§3.5). */
.contact-invite__tile {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
}
.contact-invite__tile .icon { width: var(--icon); height: var(--icon); }
.contact-invite__body { flex: 1; min-width: 0; }
.contact-invite__title { display: block; font-size: var(--text-17); font-weight: 400; }
/* Wacht-variant: dezelfde kaartvorm, maar het is een mededeling en geen knop — de titel
   draagt dus niet de inkt van een actie (2026-09-04). */
.contact-invite--pending .contact-invite__title { color: var(--color-text-muted); }
.contact-invite__text {
  display: block;
  margin-top: 1px;
  font-size: var(--text-15);
  color: var(--color-text-muted);
}

/* ---------- De schrijfknop (scherm 32) ----------
   Eén potlood rechtsonder, op alle drie de tabs op dezelfde plek — VAST aan het scherm,
   niet aan het einde van de lijst. Met `sticky` zakte hij op een korte pagina mee naar
   het einde van de inhoud en stond hij ineens midden op een leeg scherm.
   Hij zweeft net boven de bottom-nav; de gradient erachter zorgt dat hij nooit tekst
   bedekt bij het scrollen. */
.contact-fab {
  position: fixed;
  /* 18px van de rand, 16px boven de balk van 84px = de 100px uit de bron. */
  right: 18px;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.contact-fab__fade { display: none; }
.contact-fab__button {
  position: relative;
  pointer-events: auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  /* Rond, niet afgerond-vierkant, en met de eigen fab-schaduw (bron 2026-09-03). */
  border-radius: 50%;
  background: var(--color-btn);
  color: var(--color-on-btn);
  box-shadow: var(--shadow-fab);
}
.contact-fab__button .icon { width: var(--icon-lg); height: var(--icon-lg); }
/* Als <button> (agenda: opent de keuze-sheet) zonder de browser-knoprand. */
button.contact-fab__button { border: 0; padding: 0; font: inherit; cursor: pointer; }
.contact-fab__button:active { transform: scale(0.95); }

/* ---------- Nieuw bericht (scherm 33) ---------- */
.contact-picker__search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--space-4);
  padding: 11px var(--space-4);
  background: var(--color-card);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.contact-picker__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-17);
  color: var(--color-text);
}
.contact-picker__input:focus { outline: none; }
.contact-picker__input::placeholder { color: var(--color-faint); }

.contact-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px 12px 16px;
  color: inherit;
  text-decoration: none;
}
.contact-pick:active { transform: scale(0.985); }
.contact-pick__tile {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gezin-color, var(--color-surface));
  /* Initiaal in inkt, niet in accent (contact-opdracht 2026-09-03 §4): accent is voor
     tekst-signalen, en een avatar-letter is er geen. */
  color: var(--color-text);
  font-weight: 500;
  font-size: var(--text-sm);
}
.contact-pick__tile--assistant {
  background: var(--color-assistant-soft);
  color: var(--color-assistant);
}
.contact-pick__tile .icon { width: var(--icon); height: var(--icon); }
.contact-pick__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contact-pick__name { font-size: var(--text-17); font-weight: 400; }
.contact-pick__sub { margin-top: 1px; font-size: var(--text-15); color: var(--color-text-muted); }


/* ---------- Bronvermelding onder een assistent-antwoord (scherm 21) ----------
   "Uit agenda · Kijkles zwemmen" is tikbaar en opent het item. Zonder bron geen chip —
   en dus geen valse stelligheid. In de koele assistent-tint: dit is Blinco die iets
   opzocht, niet de andere ouder die iets zei. */
.message__sources { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.message__source {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-2);
  border: 1px solid var(--color-assistant-line);
  border-radius: var(--radius-pill);
  background: var(--color-assistant-soft);
  color: var(--color-assistant);
  font-size: var(--text-xs);
  text-decoration: none;
}
.message__source:active { transform: scale(0.97); }


/* Kop boven een lijst binnen Contact (archief-weergave). */
.contact-kop { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }

/* ---------- Sessie-la (§9) ----------
   Een lijst met periodekoppen, geen mappen-nav. De la deelt de chrome van de mail-la;
   alleen wat de sessielijst zelf nodig heeft staat hier. */
.mail-drawer__identity-icon { flex: none; width: var(--icon); height: var(--icon); margin: 0 4px; color: var(--color-text-muted); }
.mail-drawer__edit {
  flex: none;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  cursor: pointer;
}
.mail-drawer__folder { border-radius: var(--radius-veld-plan); }
.mail-drawer__periode {
  margin: 0;
  padding: 14px 13px 6px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.mail-drawer__sessie { display: flex; align-items: center; margin: 0 var(--space-2); border-radius: var(--radius-veld-plan); }
.mail-drawer__sessie-titel {
  flex: 1;
  min-width: 0;
  padding: 13px;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: break-word;
}
/* Actief = accent-tekst, geen vlak (§10). */
.mail-drawer__sessie--actief .mail-drawer__sessie-titel { color: var(--color-accent); font-weight: var(--weight-medium); }
/* De prullenbak per rij hoort bij de bewerkstand; buiten die stand is hij er niet. */
.mail-drawer__sessie-form { display: none; }
.mail-drawer--bewerken .mail-drawer__sessie-form { display: block; }
.mail-drawer__sessie-del {
  display: grid;
  place-items: center;
  padding: 13px 13px 13px 6px;
  border: 0;
  background: none;
  color: var(--color-error);
  cursor: pointer;
}
.mail-drawer__sessie-del .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Voetrij: wist het gesprek waar je in zit. In de bewerkstand overbodig — daar staat
   per rij al een prullenbak. */
.mail-drawer__foot { margin-top: auto; padding-top: var(--space-4); }
.mail-drawer--bewerken .mail-drawer__foot { display: none; }
.mail-drawer__wis-form { margin: 0; }
.mail-drawer__wis {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 11px 18px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: left;
  cursor: pointer;
}
.mail-drawer__wis .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }

/* De assistentlade gebruikt native modal-focus en de vlakke navigatierollen (§3.9). */
dialog.mail-drawer { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); }
dialog.mail-drawer::backdrop { background: var(--color-scrim); }
dialog.mail-drawer .mail-drawer__panel { width: 84%; max-width: 330px; background: var(--color-drawer); box-shadow: none; padding: calc(12px + env(safe-area-inset-top, 0px)) 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
dialog.mail-drawer .mail-drawer__panel > .coach-head__menu { margin-left: auto; margin-right: 12px; }
dialog.mail-drawer .mail-drawer__identity { padding: 8px 18px 16px; flex-wrap: wrap; }
dialog.mail-drawer .mail-drawer__identity-name { font-size: var(--text-22); }
dialog.mail-drawer .mail-drawer__identity-address, dialog.mail-drawer .mail-drawer__periode { font-size: var(--text-15); }
dialog.mail-drawer .mail-drawer__folder { min-height: 52px; box-sizing: border-box; border-radius: var(--radius-veld-plan); }
dialog.mail-drawer .mail-drawer__folder-name { font-size: var(--text-lg); }
dialog.mail-drawer .mail-drawer__folder .icon { color: var(--color-text); }
dialog.mail-drawer .mail-drawer__sessie { border-radius: var(--radius-veld-plan); }
dialog.mail-drawer .mail-drawer__sessie-titel { font-size: var(--text-17); overflow-wrap: anywhere; }
dialog.mail-drawer .mail-drawer__sessie--actief { background: var(--color-selected); }
dialog.mail-drawer .mail-drawer__sessie--actief .mail-drawer__sessie-titel { color: var(--color-text); font-weight: 400; }
dialog.mail-drawer .mail-drawer__edit { min-height: 44px; font-size: var(--text-15); }
dialog.mail-drawer .mail-drawer__sessie-del { min-width: 44px; min-height: 44px; padding: 12px; }