/* Iris Remote — custom laag bovenop Tailwind (kaarten, scrollbar, animaties). */
:root {
  --iris-blue: #8ed5ff;
  --iris-blue-deep: #38bdf8;
  --surface-bg: #0c0e10;
  --surface-1: #15181b;
  --surface-1-line: rgba(255, 255, 255, 0.07);
  --on-surface: #edf0f2;
  --on-surface-variant: #a7b1b9;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #ff9c92;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { -webkit-tap-highlight-color: transparent; }
body {
  background-color: var(--surface-bg);
  color: var(--on-surface);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  min-height: max(100dvh, 640px);
  -webkit-font-smoothing: antialiased;
  /* De bottom-nav is fixed en groeit mee met de home-indicator; de ruimte
     eronder moet dus mee groeien, anders valt de laatste kaart erachter. */
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

/* ── Safe areas ─────────────────────────────────────────────────────────────
 * `viewport-fit=cover` + `apple-mobile-web-app-status-bar-style: black-translucent`
 * laten de app tot in de hoeken lopen. Dat is alleen mooi als de vaste balken de
 * insets respecteren: zonder deze regels stond de titel onder de Dynamic Island
 * en overlapte de home-indicator de nav-knoppen (de toast-host deed het al goed,
 * de rest niet). De zij-insets tellen in landschap op een notch-toestel.
 */
#topbar {
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 12px 24px -16px rgba(0,0,0,0.55);
}
#topbar .material-symbols-outlined.text-primary {
  background: rgba(142, 213, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
}
#main {
  padding-top: calc(96px + env(safe-area-inset-top, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
#bottomnav {
  /* De ondergrens is geen sierpadding: Chrome op Android rapporteert de
     gebarenbalk niet als inset (env = 0), dus zonder max() zouden de labels
     daar strakker tegen de rand komen dan in de vorige versie. */
  padding-bottom: max(16px, calc(8px + env(safe-area-inset-bottom, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#ptr { top: env(safe-area-inset-top, 0px); }

/* Tikdoelen: Apple houdt 44pt aan, Android 48dp. Icoonknoppen halen dat niet
   uit hun eigen inhoud, dus dwingen we het af zonder de glyph te vergroten. */
.tap-target {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-btn { min-width: 56px; min-height: 48px; }

/* Achtergrond bevriezen zolang het sheet open staat. Enkel `overflow:hidden` op
   body is op iOS niet genoeg — Safari scrollt dan alsnog door. De scrollpositie
   wordt door JS in --scroll-lock-top bewaard en bij sluiten teruggezet. */
body.sheet-open {
  position: fixed;
  top: var(--scroll-lock-top, 0px);
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}
/* Elke kaart deelt dezelfde vorm, maar een vlak oppervlak zonder enige diepte
   las als een lijst in een spreadsheet, niet als een app. Een zeer lichte
   verticale gradient + een zachte schaduw geven de kaart een rand met de
   achtergrond zonder er "glazig" over te doen — het effect moet je voelen,
   niet zien flitsen. */
.glass-panel, .glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%), var(--surface-1);
  border: 1px solid var(--surface-1-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 20px -12px rgba(0,0,0,0.45);
}
.glass-panel:focus-within {
  border-color: rgba(142, 213, 255, 0.35);
}
/* Primaire call-to-action-knoppen mogen wél een klein beetje gloeien — dat is
   het enige gloed-gebruik in de app, gereserveerd voor "dit is de belangrijke
   knop", niet uitgesmeerd over elke kaart. */
.iris-glow, .active-glow { box-shadow: 0 4px 16px -4px rgba(142, 213, 255, 0.35); }

.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background-color: var(--iris-blue); display: inline-block;
}
/* Pulse blijft gereserveerd voor écht live signalen (sync-pill); decoratieve
   kloppende stipjes die niets aanduiden zijn eruit gehaald in index.html. */
.pulse { animation: pulse-glow 2.4s infinite; }
.status-dot.offline { background-color: var(--err); }
/* Waarschuwing bij een bevroren lijst: valt op zonder de kaarten te verdringen. */
.stale-note {
  color: var(--warn);
  border-left: 2px solid rgba(251, 191, 36, 0.45);
  padding-left: 10px;
}
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(142, 213, 255, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(142, 213, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(142, 213, 255, 0); }
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(142, 213, 255, 0.2); border-radius: 10px;
}

/* Actieve tab in de bottom-nav (JS zet .nav-active) */
.nav-btn { color: #8b959c; }
.nav-btn:hover { color: var(--iris-blue); }
.nav-btn.nav-active {
  color: var(--iris-blue);
  background: rgba(142, 213, 255, 0.1);
  border-radius: 0.75rem;
  padding: 4px 16px;
}
.nav-btn.nav-active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Artikel-preview (iframe) in het bottom-sheet */
.preview-frame {
  width: 100%; height: 45dvh; background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem;
}
#detail-overlay:not([hidden]) { display: flex; }

/* ── Animaties ─────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s var(--ease) both; }
/* Stagger: kinderen komen na elkaar binnen */
.stagger > * { opacity: 0; animation: fadeUp 0.45s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0.03s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.13s; }
.stagger > *:nth-child(4) { animation-delay: 0.18s; }
.stagger > *:nth-child(5) { animation-delay: 0.23s; }
.stagger > *:nth-child(n+6) { animation-delay: 0.28s; }

/* ── Bottom-sheet ───────────────────────────────────────────────────────────
 * De animatie hing eerst aan `:not([hidden])`. Dat draaide nooit: het overlay
 * gaat van display:none naar flex in hetzelfde frame waarin de opacity zou
 * moeten overgaan, en dan slaat de browser de transitie over. Het sheet klapte
 * er dus zonder animatie in, met alle CSS ervoor keurig aanwezig. Nu hangt het
 * aan een aparte `.open`-klasse die JS één frame later zet.
 */
#detail-overlay {
  transition: opacity 0.28s var(--ease);
  opacity: 0;
}
#detail-overlay.open { opacity: 1; }
#detail-card {
  transform: translateY(24px);
  transition: transform 0.32s var(--ease);
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  /* Tijdens een sleep mag de browser de verticale pan niet zelf afhandelen. */
  touch-action: pan-y;
}
#detail-overlay.open #detail-card { transform: translateY(0); }
/* Tijdens het slepen volgt de kaart de vinger 1:1 — een transitie maakt dat stroperig. */
#detail-card.dragging { transition: none; }

/* Sleepgreep: de affordance voor swipe-to-dismiss. Zonder streepje weet niemand
   dat het kan, en dan is de gebaar-ondersteuning verspilde moeite. */
.sheet-grabber {
  width: 40px; height: 4px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  margin: -6px auto 12px;
  flex: none;
}

/* Detail-actieknoppen: tik-feedback */
[data-action] { transition: transform 0.12s var(--ease), background 0.2s; }
[data-action]:active { transform: scale(0.97); }

/* Sync-spin */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.8s linear infinite; }

/* ── Skeleton-loaders ──────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: 0.5rem;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-card {
  height: 132px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(15,23,42,0.6);
  border-radius: 0.75rem;
}

/* ── Toast notificaties ────────────────────────────────────────────────── */
#toast-host {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 76px); left: 50%;
  transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--iris-blue);
  border-radius: 0.75rem; padding: 12px 14px;
  font-size: 13px; color: var(--on-surface);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: toastIn 0.32s var(--ease) both;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.toast.leaving { animation: toastOut 0.3s var(--ease) forwards; }
@keyframes toastIn { from { opacity:0; transform: translateY(-12px) scale(0.98);} to {opacity:1; transform: none;} }
@keyframes toastOut { to { opacity:0; transform: translateY(-12px) scale(0.98);} }
.toast .material-symbols-outlined { font-size: 20px; }

/* ── Sync-status pill (header-left) ────────────────────────────────────── */
#sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500;
  padding: 4px 10px 4px 8px; border-radius: 9999px;
  color: var(--on-surface-variant);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
#sync-pill.fresh { color: var(--ok); background: rgba(74, 222, 128, 0.09); border-color: rgba(74, 222, 128, 0.18); }
#sync-pill.recent { color: var(--on-surface-variant); }
#sync-pill.stale { color: var(--warn); background: rgba(251, 191, 36, 0.09); border-color: rgba(251, 191, 36, 0.18); }
#sync-pill.dead { color: var(--err); background: rgba(255, 156, 146, 0.09); border-color: rgba(255, 156, 146, 0.18); }
#sync-pill .dot { width:6px; height:6px; border-radius:50%; background: currentColor; }
#sync-pill.stale .dot, #sync-pill.dead .dot { animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ── Besluit-status badges (inline in cards) ───────────────────────────── */
.bdg { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding-top:2px; }
.bdg.pending { color: var(--iris-blue); }
.bdg.applied { color: var(--ok); }
.bdg.failed  { color: var(--err); }

/* ── Pull-to-refresh ───────────────────────────────────────────────────── */
#ptr {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; justify-content: center;
  color: var(--iris-blue); z-index: 40; pointer-events: none;
  transform: translateY(-64px); transition: transform 0.2s var(--ease);
}
#ptr .material-symbols-outlined { font-size: 26px; }
#ptr.spinning .material-symbols-outlined { animation: spin 0.8s linear infinite; }

/* Card hover op desktop: alleen de rand reageert, geen lift/schaduw. */
@media (hover:hover) {
  .item:hover { border-color: rgba(142,213,255,0.35); }
}
.item { transition: border-color 0.2s; }

/* ── Filter-chips (Actiecentrum) ───────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 9999px;
  border: 1px solid var(--surface-1-line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--on-surface-variant);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.12s var(--ease);
}
.chip:hover { color: var(--on-surface); border-color: rgba(255, 255, 255, 0.2); }
.chip:active { transform: scale(0.96); }
.chip-on {
  color: var(--iris-blue);
  border-color: rgba(142, 213, 255, 0.4);
  background: rgba(142, 213, 255, 0.1);
  box-shadow: 0 2px 10px -4px rgba(142, 213, 255, 0.3);
}
.chip-count {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: rgba(255, 255, 255, 0.06); border-radius: 9999px;
  padding: 0 6px; min-width: 20px; text-align: center;
}
.chip-on .chip-count { background: rgba(142, 213, 255, 0.16); }

/* ── Markdown-blokken (Iris' analyse) ──────────────────────────────────── */
.markdown { font-size: 14px; line-height: 1.6; color: var(--on-surface-variant); }
.markdown .md-p { margin: 0 0 10px; }
.markdown .md-p:last-child { margin-bottom: 0; }
.markdown .md-list { margin: 0 0 10px; padding-left: 20px; }
.markdown ul.md-list { list-style: disc; }
.markdown ol.md-list { list-style: decimal; }
.markdown .md-list li { margin-bottom: 4px; }
.markdown .md-list li::marker { color: rgba(142, 213, 255, 0.6); }
.markdown .md-hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 14px 0; }
/* Tabellen mogen breed zijn — ze scrollen in hun eigen container, de pagina niet. */
.md-table-wrap {
  overflow-x: auto; margin: 0 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.md-table { border-collapse: collapse; width: 100%; font-size: 12.5px; white-space: nowrap; }
.md-table th, .md-table td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.md-table th {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--iris-blue); background: rgba(255, 255, 255, 0.03);
  position: sticky; top: 0;
}
.md-table td { color: var(--on-surface-variant); }
.md-table td:first-child { color: var(--on-surface); font-weight: 500; }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* Details-pijl: de eigen marker weg, wij tekenen er zelf een */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Focus-zichtbaarheid voor toetsenbord */
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--iris-blue); outline-offset: 2px;
}

/* ── Vandaag-tab: sectiekop, stat-cijfers, ernst-badges ──────────────────
 * Elke kaart op Vandaag (Agenda, Postvak, Vraagt aandacht, …) deelt dezelfde
 * kop-vorm: icoon in een gekleurd vlakje + titel, zodat een sectie in één
 * oogopslag te herkennen is zonder op de kleine mono-caps labels te vertrouwen.
 */
.card-head { display: flex; align-items: center; gap: 12px; }
/* Een rondje per sectie in tien losse kleuren was druk; helemaal geen vlak
   was te vlak — zonder anker las elke kop hetzelfde en verdween de app in
   een muur van grijze tekst. Het compromis: één rustige, getinte badge als
   basis (dezelfde vorm overal, dus geen regenboog), en JS' eigen inline
   `background`/`color` — voor de écht semantische gevallen (rood = vraagt
   aandacht, groen = gaat goed) — mag daar gewoon overheen. Vroeger stond hier
   `!important`, wat die inline kleuren juist blokkeerde: de urgente en
   goedgekeurde kaarten kregen daardoor allebei hetzelfde neutrale blauw. */
.card-head-icon {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(142, 213, 255, 0.10);
  color: var(--iris-blue);
}
.card-head-icon .material-symbols-outlined { font-size: 19px; }
.card-head-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--on-surface); letter-spacing: -0.005em; }
.card-head-meta { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--on-surface-variant); }

/* Een sectiekop die naar een eigen scherm leidt (Postvak, Agenda) moet zich
   als knop gedragen, niet als een <div> die toevallig een pijltje heeft. */
.card-head-btn {
  background: transparent; border: 0; padding: 0; width: 100%; text-align: left;
  cursor: pointer; transition: opacity 0.15s var(--ease);
}
.card-head-btn:hover { opacity: 0.85; }
.card-head-btn:active { opacity: 0.7; }

.stat-num { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }

/* ── Vandaag-hero: begroeting + besluit-telling ────────────────────────────
 * Was twee losse regels platte tekst — visueel niet te onderscheiden van elke
 * andere paragraaf op het scherm, terwijl dit de eerste zin is die iemand
 * leest. Een dunne accentbalk + een chip voor het aantal geven het de
 * aandacht van een openingszin in plaats van een logregel. */
#today-greeting { position: relative; padding-left: 14px; }
#today-greeting::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--iris-blue), rgba(142,213,255,0.15));
}
#today-sub {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 14px;
}

.sev-pill {
  display: inline-flex; align-items: center; font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
  white-space: nowrap;
}
.sev-hoog   { background: rgba(255, 156, 146, 0.12); color: var(--err); }
.sev-midden { background: rgba(251, 191, 36, 0.12);  color: var(--warn); }
.sev-laag   { background: transparent; color: var(--on-surface-variant); }

.divider-line { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* Snel-starten-kaarten: rustiger dan de rest van de app, geen glow, wél een
   duidelijke hover/press-state zodat ze als knop lezen i.p.v. als infokaart. */
.quick-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--surface-1-line);
  border-radius: 0.75rem;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.quick-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(142, 213, 255, 0.28);
  box-shadow: 0 6px 16px -8px rgba(142, 213, 255, 0.25);
}
.quick-card:active { transform: scale(0.98); }
.quick-card:disabled { opacity: 0.5; }

/* ── Bottom-nav: actieve tab meer body dan een kleurwissel ─────────────────
 * `.nav-active` gaf alleen de tekstkleur en een platte tint mee, waardoor de
 * balk oogde als vijf gelijke knoppen met één toevallig blauwer label. */
#bottomnav { padding-top: 10px; }
.nav-btn {
  padding: 6px 4px;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s, transform 0.15s var(--ease);
}
.nav-btn.nav-active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(142, 213, 255, 0.4);
}
.nav-btn .material-symbols-outlined { font-size: 22px; }
.nav-btn .font-label-caps { font-weight: 600; }

/* ── Chat-panel (Vandaag) ──────────────────────────────────────────────── */
.chat-panel {
  border-color: rgba(142, 213, 255, 0.14);
  background: linear-gradient(180deg, rgba(142,213,255,0.05), rgba(255,255,255,0) 50%), var(--surface-1);
}
.chat-panel #chat-messages:empty { display: none; }

/* ── Chat-composer (Vandaag) ────────────────────────────────────────────── */
.chat-composer {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--surface-1-line);
  border-radius: 9999px;
  padding: 5px 5px 5px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-composer:focus-within {
  border-color: rgba(142, 213, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(142, 213, 255, 0.12);
}
.chat-composer input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--on-surface); font-family: 'Inter', sans-serif; font-size: 14px;
  padding: 8px 0;
}
.chat-composer input::placeholder { color: rgba(167, 177, 185, 0.45); }
.chat-composer button {
  width: 38px; height: 38px; flex: none; border-radius: 9999px;
  background: var(--iris-blue); color: #00354a;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s, transform 0.12s var(--ease);
}
.chat-composer button:hover { opacity: 0.9; }
.chat-composer button:active { transform: scale(0.92); }
.chat-composer button:disabled { opacity: 0.4; }
.chat-composer .material-symbols-outlined { font-size: 19px; }

/* Begint de balk met een knop (de microfoon), dan hoort de linkerinspringing
   van 16px daar niet — die is er voor tekst die direct tegen de rand begint. */
.chat-composer:has(> button:first-child) { padding-left: 5px; }

/* De bijrol. Opnemen is een hulpmiddel bij het invoerveld, versturen is het
   besluit; twee identiek gekleurde cirkels maken die volgorde onleesbaar. */
.chat-composer button.is-secundair {
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-surface-variant);
}
.chat-composer button.is-secundair:hover { background: rgba(255, 255, 255, 0.1); }

/* Luisteren moet je kunnen zíén — anders weet je niet of je al praat. De
   JS zette hiervoor `bg-primary`, maar die Tailwind-klasse verloor het van
   `.chat-composer button` en deed dus niets. */
.chat-composer button.is-luistert {
  background: var(--err);
  color: #2a0b08;
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 156, 146, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 156, 146, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-composer button.is-luistert { animation: none; }
}

/* Chatbubbels: Iris links (neutraal), jij rechts (accent) — zonder dit oogde
   het gesprek als een lijst identieke paragrafen zonder afzender. */
.chat-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.chat-msg.me {
  margin-left: auto; background: rgba(142, 213, 255, 0.14); color: var(--on-surface);
  border-bottom-right-radius: 4px;
}
.chat-msg.iris {
  background: rgba(255, 255, 255, 0.04); color: var(--on-surface-variant);
  border-bottom-left-radius: 4px;
}

/* Typing-indicator: drie stippen die stuiteren — Iris is aan het schrijven. */
.chat-typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 2px; }
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary, #8ed5ff);
  opacity: 0.5;
  animation: chatBounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Zachte "Iris is aanwezig"-glow op de eerste Iris-bubble. */
.chat-msg.iris.is-greeting { box-shadow: 0 4px 18px -6px rgba(142, 213, 255, 0.4); }

/* Klikbare top-3 besluiten in Iris' openingsgroet. */
.iris-greet-list { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.iris-greet-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  text-align: left; padding: 7px 10px; border-radius: 10px;
  background: rgba(142, 213, 255, 0.06);
  border: 1px solid rgba(142, 213, 255, 0.16);
  color: var(--on-surface); cursor: pointer;
  font-size: 13px; line-height: 1.4;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.iris-greet-item:hover { background: rgba(142, 213, 255, 0.14); border-color: rgba(142, 213, 255, 0.4); }
.iris-greet-item:active { transform: scale(0.99); }
.iris-greet-item .material-symbols-outlined { font-size: 18px; color: var(--primary, #8ed5ff); flex-shrink: 0; }
.iris-greet-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Postvak ──────────────────────────────────────────────────────────────
 * Herzien op 10 aug 2026. De oude weergave zette drie grote cijfers bovenaan
 * (waarvan "121 open" het grootste was — een getal dat geen enkele handeling
 * hier verandert), gevolgd door een rode alinea en een lijst waarin élke regel
 * het label van zijn eigen sectiekop herhaalde als een pil die eruitzag als
 * een knop. Wat er nu staat volgt één regel: de vorm van een regel vertelt wat
 * je ermee kunt. Afzender + tijd bovenaan (zo scan je een postvak), onderwerp
 * eronder, en alleen een regel met conceptantwoord krijgt een aanwijzing.
 */
.mail-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; }
.mail-head-main {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.mail-head-main:hover { opacity: 0.85; }
.mail-head-main:active { opacity: 0.7; }
.mail-head-btn {
  flex: none; font-size: 12px; font-weight: 500; color: var(--iris-blue);
  border: 1px solid rgba(142, 213, 255, 0.28); border-radius: 9px;
  padding: 7px 11px; background: transparent; cursor: pointer;
  transition: background 0.15s var(--ease);
}
.mail-head-btn:hover { background: rgba(142, 213, 255, 0.08); }

/* Regels raken elkaar via een haarlijn in plaats van via witruimte: dat leest
   als één lijst, niet als losse kaartjes, en scheelt verticale ruimte op een
   scherm waar dertig regels op passen moeten. */
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 8px; margin: 0 -8px; border-radius: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mail-list > .mail-row:first-child { border-top: 0; }
.mail-row.is-tapbaar { cursor: pointer; transition: background 0.15s var(--ease); }
.mail-row.is-tapbaar:hover { background: rgba(255, 255, 255, 0.035); }
.mail-row.is-tapbaar:active { background: rgba(255, 255, 255, 0.06); }
.mail-row.is-tapbaar:focus-visible { outline: 2px solid var(--iris-blue); outline-offset: 1px; }

.mail-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--on-surface); margin-top: 1px;
}
.mail-row-top { display: flex; align-items: baseline; gap: 8px; }
.mail-from {
  font-size: 12.5px; color: var(--on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
/* Ongelezen is een eigenschap van de afzenderregel, niet van de hele regel:
   een lijst waarin de helft vetgedrukt staat leest als een waarschuwing. */
.mail-from.is-ongelezen { color: var(--on-surface); font-weight: 600; }
.mail-time {
  flex: none; font-size: 11px; color: var(--on-surface-variant);
  opacity: 0.6; font-variant-numeric: tabular-nums;
}
.mail-subject {
  font-size: 13.5px; color: var(--on-surface); line-height: 1.35; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-summary {
  font-size: 12px; color: var(--on-surface-variant); opacity: 0.72;
  line-height: 1.35; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* De enige aanwijzing in de lijst, en hij betekent iets concreets: hier ligt
   een conceptantwoord klaar. Vandaar een pen en geen chevron — een chevron
   betekent "er is meer", dit betekent "je kunt hier iets versturen". */
.mail-draft-hint {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(142, 213, 255, 0.12); color: var(--iris-blue); margin-top: 2px;
}
.mail-draft-hint .material-symbols-outlined { font-size: 16px; }

.mail-sectie + .mail-sectie { margin-top: 18px; }
.mail-sectie-kop {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-surface-variant); opacity: 0.75; margin-bottom: 6px;
}
details.mail-sectie > summary.mail-sectie-kop { cursor: pointer; }
.mail-sectie-num {
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: rgba(255, 255, 255, 0.06); border-radius: 9999px; padding: 1px 7px;
}

/* Concepten: het enige in dit scherm dat met één tik de deur uit kan, dus de
   enige regel die als primaire actie is vormgegeven. */
.mail-cta {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: 11px; cursor: pointer;
  background: rgba(142, 213, 255, 0.09); border: 1px solid rgba(142, 213, 255, 0.24);
  color: var(--iris-blue); font-size: 13px; font-weight: 500;
  transition: background 0.15s var(--ease);
}
.mail-cta:hover { background: rgba(142, 213, 255, 0.14); }
.mail-cta .material-symbols-outlined { font-size: 18px; }

.mail-open-all {
  display: flex; align-items: center; gap: 6px; width: 100%; justify-content: center;
  padding: 9px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--surface-1-line);
  color: var(--on-surface-variant); font-size: 12.5px; font-weight: 500;
  transition: background 0.15s var(--ease);
}
.mail-open-all:hover { background: rgba(255, 255, 255, 0.06); color: var(--on-surface); }
.mail-open-all .material-symbols-outlined { font-size: 17px; opacity: 0.6; }
.mail-open-all-count {
  font-variant-numeric: tabular-nums; font-size: 11px;
  background: rgba(255, 255, 255, 0.07); border-radius: 9999px; padding: 1px 7px;
}

/* De cijfers blijven, maar als bijschrift onder de zin die ze samenvat. */
.mail-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--on-surface-variant);
}
.mail-meta b { font-weight: 600; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.mail-meta i { font-style: normal; opacity: 0.35; }
.mail-meta .is-warn, .mail-meta .is-warn b { color: var(--warn); }

/* Waarschuwing over de triage: de kop moet opvallen, de uitleg eronder hoeft
   niet elke keer meegelezen te worden. */
.mail-note { border-radius: 11px; padding: 10px 12px; }
.mail-note.is-warn { background: rgba(251, 191, 36, 0.09); border: 1px solid rgba(251, 191, 36, 0.22); }
.mail-note.is-err { background: rgba(255, 156, 146, 0.09); border: 1px solid rgba(255, 156, 146, 0.24); }
.mail-note > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; line-height: 1.35;
}
.mail-note.is-warn > summary { color: var(--warn); }
.mail-note.is-err > summary { color: var(--err); }
.mail-note > summary .material-symbols-outlined { font-size: 16px; flex: none; }
.mail-note > p {
  font-size: 11.5px; line-height: 1.45; color: var(--on-surface-variant);
  margin-top: 7px; padding-left: 24px;
}
.mail-note-caret { transition: transform 0.2s var(--ease); opacity: 0.6; }
details[open] > summary .mail-note-caret { transform: rotate(180deg); }

/* Neutrale variant van .mail-note: de uitgefilterde bak is naslag, geen
   waarschuwing. Geel zou hem laten schreeuwen om aandacht die hij niet vraagt. */
.mail-note.is-stil { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.mail-note.is-stil > summary { color: var(--on-surface-variant); }

/* Rij-acties. Bewust laag contrast tot je ze aanraakt: ze moeten bereikbaar
   zijn zonder de lijst in een knoppenbalk te veranderen — je scant hier post,
   je bedient geen apparaat. Blokkeren kleurt pas rood bij aanraking, want een
   permanent rood icoon naast elke afzender leest als een oordeel over die
   afzender. Tikdoel blijft 34px: dit wordt met een duim bediend. */
.mail-acties { display: flex; gap: 2px; align-items: center; flex: none; margin-top: 1px; }
.mail-actie {
  width: 34px; height: 34px; border-radius: 9px; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--on-surface-variant); opacity: 0.5;
  cursor: pointer; transition: opacity 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.mail-actie .material-symbols-outlined { font-size: 18px; }
.mail-actie:hover, .mail-actie:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.mail-actie.is-blok:hover, .mail-actie.is-blok:focus-visible { color: var(--err); background: rgba(255, 156, 146, 0.1); }
.mail-actie:disabled { opacity: 0.25; cursor: default; }

.mail-blocklist { margin-top: 8px; padding-left: 24px; }
.mail-blocklist > li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mail-blocklist > li:first-child { border-top: 0; }
.mail-blocked-from { font-size: 12px; color: var(--on-surface); }
.mail-blocked-sub {
  font-size: 11.5px; color: var(--on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-blocked-why { font-size: 10.5px; color: var(--on-surface-variant); opacity: 0.6; margin-top: 1px; }

.mail-leeg, .mail-voet { font-size: 12px; color: var(--on-surface-variant); opacity: 0.7; }
.mail-voet { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); }