/* ============================================================
 * Moderis Chat — de hele app is één gesprek.
 * Forest-groen op warm crème (tokens uit moderis.css).
 * Layout: peilbalk (sticky) · draad (scroll) · composer (fixed).
 * ============================================================ */

html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
/* body position:fixed — HET beproefde iOS-recept voor chat-apps. Safari's
   "scroll het veld in beeld"-reflex negeert overflow:hidden en scrolde de
   pagina 300+px op focus (gemeten met de tik-meter); onze terugzet-correctie
   maakte er een zichtbare touwtrekwedstrijd van. Met een gefixeerde body
   bestaat er simpelweg geen paginascroll meer om over te vechten. */
body { margin: 0; padding: 0; position: fixed; inset: 0; overflow: hidden; }
/* Ook programmatisch niet scrollbaar: met overflow:hidden kan scrollIntoView
   of een caret-reveal de body tóch verschuiven — dan staat de hele app
   blijvend scheef. clip kent geen scrollpositie (hidden blijft voor Safari <16). */
body { overflow: clip; }
body {
  background:
    radial-gradient(120% 90% at 50% -10%, #f3eee2 0%, transparent 55%),
    #efeae0;
  font-family: var(--m-font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
}
* { box-sizing: border-box; }
/* Knoppen en velden erven het lettertype niet vanzelf (anders systeemfont). */
button, input, textarea, select { font-family: inherit; }

/* ---------- Mobiele soepelheid ---------- */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior: none;
}
body { -webkit-tap-highlight-color: transparent; }
* { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* iOS zoomt in op velden < 16px. */
input, textarea, select { font-size: 16px !important; max-width: 100%; min-width: 0; box-sizing: border-box; }
/* Grid-kinderen mogen krimpen — anders duwt een invoerveld de kolom het
   scherm uit (drie-macrogrid in de profiel-sheet). */
.sheet [style*="grid"] > * { min-width: 0; }

/* ---------- Shell ---------- */
.c-shell {
  /* Zijmarge = minstens 16 px, en genoeg om de notch/afgeronde hoek te
     ontwijken — maar alleen het deel van de safe-area dat níet al buiten de
     gecentreerde shell valt (liggend op een grote iPhone telt dat anders dubbel). */
  --shell-max: 780px;
  --zij-l: max(16px, calc(env(safe-area-inset-left, 0px) - max(0px, (100vw - var(--shell-max)) / 2)));
  --zij-r: max(16px, calc(env(safe-area-inset-right, 0px) - max(0px, (100vw - var(--shell-max)) / 2)));
  /* Exact het zichtbare venster: krimpt mee met het toetsenbord (--vvh uit
     chat-shared.js). De composer staat als gewoon flex-kind onderin — geen
     fixed-positionering, dus niets om over te vechten met iOS. */
  height: 100vh;
  height: 100dvh;
  height: var(--vvh, 100dvh);
  /* Bewust ZONDER hoogte-animatie: een hoogte-animatie staat op iOS stil
     zolang WebKit het toetsenbord opstart (geen frames) en springt daarna.
     Het meeglijden op iOS doet chat-shared.js met een transform op draad en
     composer (compositor), en wisselt deze hoogte op een onzichtbaar moment. */
  /* Vastgeplakt aan het zichtbare venster: als Safari pant, schuiven we
     exact mee (--vvtop = visualViewport.offsetTop). Bewust GEEN transition
     op transform — exact volgen is juist de bedoeling. */
  transform: translateY(var(--vvtop, 0px));
  display: flex;
  flex-direction: column;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}
@media (min-width: 1100px) {
  /* Desktop: draad + receptpaneel naast elkaar. */
  .c-shell { max-width: 1180px; --shell-max: 1180px; }
}

/* ---------- Peilbalk (doel + macro's, altijd zichtbaar) ---------- */
.c-peil {
  position: relative; z-index: 30;
  background: color-mix(in srgb, var(--m-bg) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--m-line);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--zij-r) 0 var(--zij-l);
  /* Altijd even hoog: het dagoverzicht klapt als een LAAG over de draad
     open (.c-dag), zodat de draad nooit opnieuw opgemeten hoeft te worden. */
  flex: 0 0 auto;
}
.c-peil-kop {
  display: flex; align-items: center; gap: 10px;
  height: 40px;
  cursor: pointer;
}
.c-peil-lijnen { cursor: pointer; }
.c-peil-merk {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--m-serif);
  font-size: 19px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--forest-950);
}
/* Op heel smalle schermen (320 px) past "Moderis" niet naast het cijfer en
   de twee knoppen — dan alleen het blad, net als een app-icoon. */
@media (max-width: 359px) { .c-peil-woordmerk { display: none; } }
.c-peil-stip {
  width: 26px; height: 26px; border-radius: 9px;
  background: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px -3px rgba(35,81,57,0.45);
  flex: 0 0 auto;
}
.c-peil-kop > * { flex-shrink: 0; }
.c-peil-cijfer {
  flex-shrink: 1; min-width: 0; overflow: hidden;
  margin-left: auto;
  font-family: var(--m-mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  display: flex; align-items: baseline; gap: 4px;
  white-space: nowrap;
}
.c-peil-cijfer .doel { color: var(--ink-3); font-size: 12px; }
.c-peil-caret { color: var(--ink-3); transition: transform .22s cubic-bezier(.22,1,.36,1); }
.c-peil.is-open .c-peil-caret { transform: rotate(180deg); }
.c-peil-knop {
  border: 0; background: transparent; padding: 12px 10px; margin: -12px -8px -12px -2px;
  border-radius: 12px; cursor: pointer; color: var(--ink-2);
  display: flex; align-items: center;
}

/* de dunne lijnen: energie + 3 macro-slivers */
.c-peil-lijnen { display: flex; gap: 6px; align-items: center; padding: 4px 0 9px; }
.c-peil-energie {
  flex: 1; height: 4px; border-radius: 999px;
  background: rgba(30,40,25,0.10); overflow: hidden;
  position: relative;
}
.c-peil-energie > .vul {
  position: absolute; inset: 0 auto 0 0;
  background: var(--forest-700); border-radius: 999px;
  transition: width .42s cubic-bezier(.22,1,.36,1);
}
.c-peil-energie > .bonus {
  position: absolute; inset: 0 0 0 auto;
  background: repeating-linear-gradient(-55deg, var(--leaf-soft), var(--leaf-soft) 4px, transparent 4px, transparent 8px);
  border-radius: 999px;
}
.c-peil-energie > .spook {
  position: absolute; inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--forest-500) 42%, transparent);
  border-radius: 999px;
  transition: width .42s cubic-bezier(.22,1,.36,1), opacity .18s;
}
.c-peil-sliver { width: 34px; height: 4px; border-radius: 999px; background: rgba(30,40,25,0.10); overflow: hidden; }
.c-peil-sliver > i { display: block; height: 100%; border-radius: 999px; transition: width .42s cubic-bezier(.22,1,.36,1); }
.c-peil-sliver.p > i { background: var(--macro-protein); }
.c-peil-sliver.k > i { background: var(--macro-carb); }
.c-peil-sliver.v > i { background: var(--macro-fat); }

/* ---------- Dagoverzicht: een laag onder de peilbalk ----------
   Klapt open over de draad heen met alleen transform/opacity (vloeiend,
   ook op een goedkoop toestel). Scrolt zelf als de dag vol raakt. */
.c-dag {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
  background: var(--m-bg);
  border-bottom: 1px solid var(--m-line);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 22px 40px -22px rgba(20,28,18,0.45);
  padding: 8px var(--zij-r) 16px var(--zij-l);
  max-height: calc(var(--vvh, 100dvh) - 170px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  transform: translate3d(0, -10px, 0); opacity: 0; visibility: hidden;
  transition: transform .2s cubic-bezier(.4,0,.9,.6), opacity .16s ease, visibility 0s linear .2s;
}
.c-dag::-webkit-scrollbar { display: none; }
.c-dag.is-open {
  transform: none; opacity: 1; visibility: visible;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease, visibility 0s;
}
.c-dag-scrim {
  /* Tot precies de onderkant van de shell (100% = de peilbalk): steekt hij
     uit, dan wordt de body scrollbaar (in Safari <16 kent body geen clip). */
  position: absolute; top: 100%; left: 0; right: 0; height: calc(var(--vvh, 100dvh) - 100%); z-index: 1;
  background: rgba(20,28,18,0.16);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.c-dag-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
/* Dichtklappen omdat het toetsenbord komt: instant (geen animatie die over
   de toetsenbord-animatie heen loopt). */
html.kb-open .c-dag, html.kb-open .c-dag-scrim { transition: none; }
/* Krap (liggend mét toetsenbord: 108–160 px zichtbaar): alleen het gesprek
   en de composer. Peilbalk en snelchips verbergen verplaatst de composer
   niet (die hangt aan de onderrand), dus dit mag tijdens de focus. */
html.kb-krap .c-peil, html.kb-krap .c-snelrij, html.kb-krap .c-naar-onder { display: none; }
html.kb-krap .c-draad { padding-top: 8px; padding-bottom: 8px; }
html.kb-krap .c-veld textarea { max-height: 66px; }
/* Krap (liggend met toetsenbord): kop en knoppenbalk van een sheet plakken
   niet — anders blijft er geen ruimte over voor het veld waarin je typt. */
html.kb-krap .sheet-kop { position: relative; }
html.kb-krap .sheet .c-recept-voet { position: relative; bottom: auto; }
html.kb-krap .sheet .c-recept-voet::before { display: none; }   /* de overgang hoort alleen bij een plakkende balk */
html.kb-krap .sheet-overlay { padding-top: 0; padding-bottom: 0; }
/* Met het toetsenbord open ligt de thuisbalk eronder: geen extra marge. */
html.kb-open .sheet { --s-onder: 12px; }
.c-peil-bar { margin-bottom: 11px; }
.c-peil-bar-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; color: var(--ink-2); margin-bottom: 4px;
}
.c-peil-bar-kop .num { font-size: 12.5px; color: var(--ink); }
.c-peil-track { height: 6px; border-radius: 999px; background: rgba(30,40,25,0.10); overflow: hidden; }
.c-peil-track > i { display: block; height: 100%; border-radius: 999px; transition: width .4s linear; }
.c-peil-lijf {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  font-size: 12px; color: var(--ink-2); margin: 4px 0 12px;
}
.c-peil-lijf .num { font-size: 12px; }
.c-peil-acties { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Draad ---------- */
.c-draad {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px var(--zij-r) 26px var(--zij-l);
  scrollbar-width: none;
  overscroll-behavior: contain;
  /* GEEN scroll-behavior: smooth — dat animeert óók programmatische
     scrollTop-updates, en tijdens het streamen zet de draad die elke paar
     tokens: een permanente animatiewachtrij, voelbaar op mobiel. */
}
.c-draad::-webkit-scrollbar { display: none; }

.c-dagscheiding {
  text-align: center;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-3);
  margin: 22px 0 14px;
}

@keyframes c-bericht-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.c-bericht {
  margin-bottom: 14px;
  max-width: 100%;
}
/* Alleen wat je nu verstuurt schuift in beeld — een geladen draad, of een
   beurt die van de stream naar de draad verhuist, staat er gewoon. */
.c-bericht.is-vers { animation: c-bericht-in .26s cubic-bezier(.22,1,.36,1) backwards; }
/* Moderis praat zonder bubbel — als tekst op het canvas, kalm en editorial. */
.c-bericht.is-moderis {
  font-size: 14.5px; line-height: 1.6;
  color: var(--forest-950);
  padding-right: 34px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
/* De gebruiker krijgt de forest-bubbel, rechts. */
.c-bericht.is-ik { display: flex; justify-content: flex-end; }
/* De kolom (foto's + bubbel + Opnieuw) krijgt de maximale breedte; de
   bubbel vult die naar behoefte. Stond de 82% op de bubbel zelf, dan was
   dat 82% van een kolom die zo breed was als de bubbel → korte woorden
   ("test") braken af als "te / st". */
.c-bericht.is-ik > .kolom {
  max-width: 82%; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end;
}
.c-bericht.is-ik .bubbel {
  background: var(--forest-700);
  color: var(--on-forest);
  font-size: 14.5px; line-height: 1.5;
  padding: 10px 15px;
  border-radius: 19px 19px 5px 19px;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  box-shadow: 0 6px 18px -8px rgba(28,70,48,0.5);
}
.c-bericht.is-mislukt .bubbel { opacity: .55; }
.c-bericht-fotos { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 5px; }
.c-bericht-fotos img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--m-line);
}
.c-opnieuw {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 6px 12px;
  border: 1px solid var(--m-line-2); border-radius: 999px;
  background: var(--m-card); color: var(--macro-fat);
  font-family: var(--m-font); font-size: 12px; font-weight: 600;
  cursor: pointer;
}

/* Mutatieregel: "✓ gelogd — nog 1228 kcal". Systeem-feiten, geen spraak. */
.c-mutatie {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  margin: -4px 0 14px;
}
.c-mutatie.is-vers { animation: c-bericht-in .26s cubic-bezier(.22,1,.36,1) backwards; }
.c-mutatie .stip {
  width: 17px; height: 17px; border-radius: 999px;
  background: var(--leaf); color: var(--forest-950);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.c-mutatie.is-fout .stip { background: var(--macro-fat-bg); color: var(--macro-fat); }

/* Denkt-regel */
.c-denkt {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink-3); font-size: 13px;
  margin: 2px 0 14px;
}
@keyframes c-denk { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.c-denkt-dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--forest-500);
  animation: c-denk 1.2s ease-in-out infinite;
}
.c-denkt-dot:nth-child(2) { animation-delay: .15s; }
.c-denkt-dot:nth-child(3) { animation-delay: .30s; }

/* ---------- De drie kaarten ---------- */
.c-kaartrij {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 2px calc(-1 * var(--zij-r)) 6px calc(-1 * var(--zij-l));
  padding: 4px var(--zij-r) 12px var(--zij-l);
  scroll-padding-inline: var(--zij-l) var(--zij-r);
  scrollbar-width: none;
}
.c-kaartrij::-webkit-scrollbar { display: none; }
@media (min-width: 780px) {
  .c-kaartrij { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 2px 0 6px; padding: 4px 0 8px; }
}

@keyframes c-kaart-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

.c-kaart {
  position: relative;
  /* Op een smal scherm iets breder (anders breken de knoppen af), en altijd
     een randje van de volgende kaart in beeld: dan zie je dat je kunt vegen. */
  flex: 0 0 min(80vw, 320px);
  max-width: 320px;
  scroll-snap-align: center;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 20px;
  box-shadow: var(--m-shadow);
  padding: 14px 15px 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.c-kaartrij.is-live .c-kaart { animation: c-kaart-in .30s cubic-bezier(.22,1,.36,1) backwards; }
@media (min-width: 780px) { .c-kaart { flex: 1 1 auto; max-width: none; } }

/* alles-in-huis krijgt de leaf-streep — het enige kleuraccent op de kaart */
.c-kaart.is-inhuis::before {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--leaf);
}
.c-kaart.is-tikbaar { cursor: pointer; transition: transform .14s ease; }
@media (pointer: coarse) {
  /* Zie hieronder: pas na 60 ms, zodat scrollen over kaarten ze niet laat "ademen". */
  .c-kaart.is-tikbaar:active:not(:has(button:active)) { transform: scale(.985); transition: transform .12s ease .06s; }
}
.c-kaart-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 6px;
  min-height: 14px;
}
.c-kaart-eyebrow .ontdek { color: var(--forest-600); }
.c-kaart-naam {
  font-family: var(--m-serif);
  font-size: 17px; font-weight: 500; letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--forest-950);
  margin: 0 0 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  text-wrap: pretty;
}
.c-kaart-kcal { display: flex; align-items: baseline; gap: 5px; margin-bottom: 3px; }
.c-kaart-kcal .num { font-family: var(--m-mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.c-kaart-kcal .eenheid { font-size: 12px; color: var(--ink-3); }
.c-kaart-projectie {
  font-family: var(--m-mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--ink-2);
  margin-bottom: 8px;
}
.c-kaart-projectie.is-boven { color: var(--macro-fat); }
.c-kaart-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.c-kaart-regel {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  margin-bottom: 4px;
}
.c-kaart-regel .stip { width: 6px; height: 6px; border-radius: 999px; margin-top: 5.5px; flex: 0 0 auto; }
.c-kaart-regel .stip.huis { background: var(--leaf-deep); }
.c-kaart-regel .stip.halen { background: var(--macro-carb); }
.c-kaart-waarom {
  font-size: 12.5px; color: var(--ink-2); font-style: italic;
  margin: 2px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-kaart-voet {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--m-line);
  padding-top: 8px;
  gap: 8px;
}
.c-kaart-voet button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--m-font); font-size: 13px; font-weight: 600;
  padding: 0 10px; min-height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease, opacity .12s;
}
.c-kaart-voet .bekijk { color: var(--forest-700); padding: 0 8px; margin-left: -8px; }
.c-kaart-voet .log { color: var(--on-forest); background: var(--forest-700); padding: 0 15px; border-radius: 999px; min-width: 7.6em; justify-content: center; }
.c-kaart-voet .log:disabled { opacity: .55; cursor: default; }
.c-kaart-voet .log.is-gelogd { background: var(--leaf); color: var(--forest-950); }

/* skelet: naam is al bekend, cijfers laden nog */
@keyframes c-skelet-adem { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.c-skelet-blok { border-radius: 8px; background: var(--m-card-3); animation: c-skelet-adem 1.4s ease-in-out infinite; }

/* verouderde rij: klapt in tot strip, blijft klikbaar */
.c-kaartrij-wrap.is-verouderd .c-kaartrij {
  max-height: 66px; overflow: hidden;
  opacity: .5;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 96%);
          mask-image: linear-gradient(#000 40%, transparent 96%);
  cursor: pointer;
  padding-bottom: 0;
}
.c-kaartrij-wrap.is-verouderd .c-kaart-voet { pointer-events: none; }
.c-kaartrij-wrap.is-verouderd.is-open .c-kaartrij {
  max-height: none; opacity: 1;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 12px;   /* kaart 2 en 3 bereikbaar */
  -webkit-mask-image: none; mask-image: none;
  animation: m-fade .22s ease backwards;
}
@media (min-width: 780px) { .c-kaartrij-wrap.is-verouderd.is-open .c-kaartrij { overflow: visible; } }
.c-kaartrij-wrap.is-verouderd.is-open .c-kaart-voet { pointer-events: auto; }
.c-kaartrij-label {
  font-family: var(--m-font); font-size: 11.5px; color: var(--ink-3);
  border: 0; background: none; padding: 6px 0; margin: 0 0 2px; width: 100%;
  text-align: left; line-height: 1.45;
  display: none;
}
.c-kaartrij-wrap.is-verouderd .c-kaartrij-label { display: block; cursor: pointer; }

/* ---------- Receptpaneel ---------- */
.c-recept-kop { margin-bottom: 4px; }
.c-recept-naam {
  font-family: var(--m-serif); font-size: 21px; font-weight: 500;
  letter-spacing: -0.015em; margin: 0 0 6px; color: var(--forest-950);
  text-wrap: pretty;
}
.c-recept-cijfers { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.c-recept-cijfers .num { font-size: 17px; font-weight: 600; }
.c-ing { list-style: none; margin: 0 0 4px; padding: 0; }
.c-ing li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--m-line);
  font-size: 13.5px;
}
.c-ing li:last-child { border-bottom: 0; }
.c-ing .gram {
  font-family: var(--m-mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--ink-2);
  min-width: 46px; text-align: right;
}
.c-ing .bron-stip { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.c-ing .bron-stip.voorraad { background: var(--leaf-deep); }
.c-ing .bron-stip.db { background: var(--forest-300); }
.c-ing .bron-stip.ai { background: var(--ink-3); }
.c-ing .halen-label { margin-left: auto; font-size: 11px; color: var(--macro-carb); font-weight: 600; }
.c-stappen { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: stap; }
.c-stappen li {
  counter-increment: stap;
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55;
  margin-bottom: 10px;
}
.c-stappen li::before {
  content: counter(stap);
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--forest-100); color: var(--forest-800);
  font-family: var(--m-mono); font-size: 11.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; margin-top: 1px;
}
.c-recept-voet {
  display: flex; gap: 8px;
  position: sticky; bottom: 0;
  background: var(--m-card);
  padding: 12px 0 2px;
  margin-top: 10px;
}
/* In een sheet: de balk plakt tot de échte onderrand (anders zie je de
   inhoud door de onderste strook heen scrollen) en een zachte overgang
   erboven laat zien dat er nog meer is. */
.sheet .c-recept-voet {
  bottom: calc(-1 * var(--s-onder));
  margin-bottom: calc(-1 * var(--s-onder));
  padding-bottom: var(--s-onder);
  z-index: 2;
}
.sheet .c-recept-voet::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px;
  background: linear-gradient(rgba(253,251,246,0), var(--m-card));
  pointer-events: none;
}
.c-porties { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.c-portie-chip { padding: 0 12px; min-height: 34px; font-size: 12.5px; }
.c-porties button {
  width: 30px; height: 30px; border-radius: 10px;
  border: 1px solid var(--m-line-2); background: var(--m-card);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.c-porties .aantal { font-family: var(--m-mono); font-size: 14px; min-width: 34px; text-align: center; }

/* ---------- SnelRij (chips boven de composer) ---------- */
.c-snelrij {
  flex: 0 0 auto;
  display: flex; gap: 7px;
  padding: 8px var(--zij-r) 2px var(--zij-l);
  overflow-x: auto; scrollbar-width: none;
}
.c-snelrij::-webkit-scrollbar { display: none; }
.c-snelchip {
  flex: 0 0 auto;
  border: 1px solid var(--m-line-2);
  background: color-mix(in srgb, var(--m-card) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--forest-800);
  font-family: var(--m-font); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--m-shadow);
  animation: c-bericht-in .24s cubic-bezier(.22,1,.36,1) backwards;
}
.c-snelchip:active { transform: scale(.96); }

/* ---------- Composer ---------- */
.c-composer {
  position: relative;
  /* Zijkanten zoals --zij-l/--zij-r: de inset min de centreermarge van de
     shell — anders telt de notch liggend dubbel en springt de composer
     36–43 px verder in dan de inhoud erboven. */
  padding: 8px max(12px, calc(env(safe-area-inset-right, 0px) - max(0px, (100vw - var(--shell-max, 780px)) / 2)))
    calc(env(safe-area-inset-bottom, 0px) + 10px)
    max(12px, calc(env(safe-area-inset-left, 0px) - max(0px, (100vw - var(--shell-max, 780px)) / 2)));
  background: color-mix(in srgb, var(--m-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--m-line);
}
/* Toetsenbord open: de thuisbalk-marge is dan overbodig. De klasse staat op
   <html> en wisselt synchroon met de hoogte (chat-shared.js) — via React
   kwam hij een frame te laat en stuiterde de composer één keer na. */
html.kb-open .c-composer { padding-bottom: 10px; }
/* De app krimpt al bij de vingeraanraking, terwijl het toetsenbord er nog
   een kwart seconde over doet om omhoog te schuiven. In dat gaatje vullen
   we de strook eronder met dezelfde kleur, zodat de composer niet los
   boven een blanco baan lijkt te zweven. Puur verf, geen layout. */
html.kb-open .c-composer::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;
  height: 100vh; background: var(--m-bg); pointer-events: none;
}
.c-composer-binnen {
  max-width: 780px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
}
.c-fotostrip { display: flex; gap: 8px; max-width: 780px; margin: 0 auto 8px; }
.c-fotostrip .thumb {
  position: relative; width: 56px; height: 56px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--m-line-2);
}
.c-fotostrip img { width: 100%; height: 100%; object-fit: cover; }
.c-fotostrip .weg {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 999px; border: 0;
  background: rgba(18,42,29,0.72); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.c-plus {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--m-line-2);
  background: var(--m-card); color: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
  transition: transform .15s;
}
.c-plus.is-open { transform: rotate(45deg); }
.c-plusmenu {
  position: absolute;
  bottom: calc(100% + 10px); left: 12px;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 16px;
  box-shadow: var(--m-shadow-md);
  overflow: hidden;
  animation: m-pop .18s cubic-bezier(.22,1,.36,1) both;
  z-index: 45;
}
.c-plusmenu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: transparent;
  padding: 12px 18px 12px 14px;
  font-family: var(--m-font); font-size: 14px; font-weight: 500; color: var(--ink);
  cursor: pointer; text-align: left;
}
.c-veld {
  flex: 1;
  min-width: 0;   /* anders kan het veld niet smaller dan zijn textarea (320 px, grote tekst) */
  background: var(--m-card);
  border: 1px solid var(--m-line-2);
  border-radius: 21px;
  padding: 9px 14px;
  display: flex; align-items: flex-end;
  transition: border-color .15s, box-shadow .15s;
}
.c-veld:focus-within {
  border-color: var(--forest-500);
  box-shadow: 0 0 0 3px rgba(58,125,87,0.12);
}
.c-veld textarea {
  flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; resize: none;
  font-family: var(--m-font); font-size: 16px !important; line-height: 1.4;
  color: var(--ink); padding: 0; margin: 0;
  max-height: 132px;
}
.c-veld textarea::placeholder { color: var(--ink-3); }
/* Startscherm (index.html): hetzelfde veld, nog zonder React erachter. */
.c-veld-nep { flex: 1; font-size: 16px; line-height: 1.4; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-shell.is-boot .c-plus { display: block; }
.c-stuur {
  width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: var(--forest-700); color: var(--on-forest);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
  transition: background .15s, transform .1s;
  box-shadow: 0 5px 14px -5px rgba(35,81,57,0.55);
}
.c-stuur:active { transform: scale(.94); }
.c-stuur:disabled { background: var(--m-card-3); color: var(--ink-3); box-shadow: none; cursor: default; }
.c-stuur.is-bezig { background: var(--forest-900); }

/* ---------- Lege staat ---------- */
.c-leeg { padding: 40px 6px 10px; }
.c-leeg h1 {
  font-family: var(--m-serif);
  font-size: 26px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--forest-950);
  margin: 0 0 4px;
}
.c-leeg p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.55; }
.c-voorstel {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 17px;
  box-shadow: var(--m-shadow);
  padding: 14px 16px;
  margin-bottom: 9px;
  font-family: var(--m-font); font-size: 14.5px; color: var(--ink);
  cursor: pointer; text-align: left;
  animation: c-kaart-in .3s cubic-bezier(.22,1,.36,1) backwards;
}
.c-voorstel:nth-child(2) { animation-delay: .06s; }
.c-voorstel:nth-child(3) { animation-delay: .12s; }
.c-voorstel:nth-child(4) { animation-delay: .18s; }
.c-voorstel .icoon {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--forest-100); color: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.c-tip {
  font-size: 12.5px; color: var(--ink-3);
  text-align: center; margin: 6px 0 14px;
  animation: c-bericht-in .3s ease both;
}

/* ---------- Smaak-sheet ---------- */
.c-smaak-groep { margin-bottom: 16px; }
.c-smaak-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.c-smaak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--m-line-2);
  background: var(--m-card-2); color: var(--ink);
  cursor: pointer;
}
.c-smaak-chip.dol       { background: var(--forest-100); color: var(--forest-800); border-color: var(--forest-200); }
.c-smaak-chip.houdt_van { background: var(--leaf-soft); color: var(--forest-800); border-color: var(--forest-200); }
.c-smaak-chip.licht_niet{ background: var(--macro-carb-bg); color: #8a6a12; }
.c-smaak-chip.sterk_niet{ background: var(--macro-fat-bg); color: var(--macro-fat); }
.c-smaak-chip.verbod    { background: #7a2e2e; color: #fff; border-color: #7a2e2e; }
.c-smaak-waarom { font-size: 12px; color: var(--ink-3); margin: 8px 0 2px; line-height: 1.5; }
.c-smaak-standen { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }

/* ---------- Voorraad-sheet ---------- */
.c-voorraad-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--m-line);
  font-size: 14px;
}
.c-voorraad-item:last-child { border-bottom: 0; }
.c-voorraad-item.is-op { color: var(--ink-3); }
.c-voorraad-item.is-op .naam { text-decoration: line-through; text-decoration-color: rgba(30,40,25,0.3); }
.c-voorraad-item .naam { flex: 1; }
.c-voorraad-item .schakel {
  border: 1px solid var(--m-line-2); background: var(--m-card);
  border-radius: 999px; padding: 0 14px; min-height: 34px; position: relative;
  font-family: var(--m-font); font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
}

/* ---------- Sheet (bottom-sheet; gedrag in app-shared.jsx) ---------- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 60;
  background-color: rgba(20,28,18,0.42);
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: m-fade .24s ease backwards;
  overscroll-behavior: contain;
  touch-action: pinch-zoom;   /* de achtergrond scrolt nooit mee; inzoomen mag wel */
}
.sheet {
  --s-l: max(22px, env(safe-area-inset-left, 0px));
  --s-r: max(22px, env(safe-area-inset-right, 0px));
  --s-onder: calc(env(safe-area-inset-bottom, 0px) + 22px);
  position: relative;
  background: var(--m-card);
  border-radius: 28px 28px 0 0;
  padding: 0 var(--s-r) var(--s-onder) var(--s-l);
  box-shadow: 0 -20px 50px rgba(20,28,18,0.25);
  /* 'backwards' i.p.v. 'both': na de animatie mag de veeg-logica de
     transform weer zelf zetten (een vasthoudende animatie wint anders). */
  animation: m-slide-up .36s cubic-bezier(.22,1,.36,1) backwards;
  /* % van de overlay = van het ZICHTBARE venster (de shell volgt --vvh).
     Gaat het toetsenbord open, dan krimpt de sheet mee in plaats van er
     met zijn bovenkant onder te verdwijnen. */
  max-height: min(92%, calc(100% - max(env(safe-area-inset-top, 0px), 10px) - 10px));
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;   /* scrollen en inzoomen (vegen-sluiten negeert twee vingers) */
}
.sheet::-webkit-scrollbar { display: none; }
/* De sheet krijgt bij openen de focus (voor schermlezers en Tab); een rand
   om het hele paneel helpt niemand. */
.sheet:focus, .sheet:focus-visible { outline: none; }
/* Een sheet met een zoeklijst: vaste hoogte, zodat het zoekveld niet meezakt
   met het aantal treffers. Met het toetsenbord open krimpt hij gewoon mee. */
@media (max-width: 767px) {
  .sheet.is-vast { height: min(92%, calc(100% - max(env(safe-area-inset-top, 0px), 10px) - 10px)); }
}
/* Grip + titel blijven staan als de inhoud scrolt (zoals een iOS-sheet). */
.sheet-kop {
  position: sticky; top: 0; z-index: 3;
  margin: 0 calc(-1 * var(--s-r)) 0 calc(-1 * var(--s-l)); padding: 9px var(--s-r) 0 var(--s-l);
  background: var(--m-card);
  border-radius: 28px 28px 0 0;
}
.sheet-grip { width: 40px; height: 5px; border-radius: 999px; background: var(--m-line-2); margin: 0 auto 13px; }
.sheet-titelrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.sheet-titelrij h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sheet-sluit {
  width: 32px; height: 32px; padding: 0; border-radius: 999px; flex: 0 0 auto;
  background: var(--m-card-2); position: relative;
}
/* Ruim tikgebied (44px) zonder dat de knop groter oogt. */
.sheet-sluit::after { content: ''; position: absolute; inset: -6px; }
@media (min-width: 768px) {
  .sheet-overlay { justify-content: center; align-items: center; padding: 24px; }
  .sheet.is-vast { height: 82vh; }   /* vaste hoogte: het zoekveld springt niet mee met het aantal treffers */
  .sheet {
    --s-l: 24px; --s-r: 24px; --s-onder: 28px;
    border-radius: 22px; max-width: 500px; width: 100%; max-height: 82vh;
    padding: 0 24px 28px;
    box-shadow: 0 28px 70px rgba(20,28,18,0.34);
    animation: m-pop .22s cubic-bezier(.22,1,.36,1) backwards;
  }
  .sheet-kop { padding-top: 18px; border-radius: 22px 22px 0 0; }
  .sheet-grip { display: none; }
}
/* Breder dan de shell (liggend, tablet): overlay en scanner toch over het
   hele scherm — de shell (met transform) is hun containing block. */
@media (min-width: 781px) {
  /* .c-shell .scanner: specifieker dan de basisregel `.scanner { inset: 0 }`
     verderop — anders zette die left weer op 0 en liep de scanner (met zijn
     sluitknop) rechts het scherm uit. */
  .sheet-overlay, .c-shell .scanner { left: calc(50% - 50vw); right: auto; width: 100vw; }
  /* Ook de scrim van het dagoverzicht: dim de zijmarges mee, en een tik
     daarnaast sluit het overzicht (.c-peil is precies zo breed als de shell). */
  .c-dag-scrim { left: calc(50% - 50vw); right: auto; width: 100vw; }
}
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-slide-up { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes m-pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Navigatie binnen een sheet: detail schuift van rechts in, terug van links. */
@keyframes c-paneel-in { from { opacity: 0; transform: translate3d(26px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes c-paneel-terug { from { opacity: 0; transform: translate3d(-26px, 0, 0); } to { opacity: 1; transform: none; } }
.c-paneel-in { animation: c-paneel-in .26s cubic-bezier(.22,1,.36,1) backwards; }
.c-paneel-terug { animation: c-paneel-terug .26s cubic-bezier(.22,1,.36,1) backwards; }

/* ---------- Toast ---------- */
/* De onderkant van de app: snelchips + composer, met toast en de
   "naar het nieuwste"-knop er vlak boven — ze schuiven vanzelf mee met de
   hoogte van de composer en met het toetsenbord. */
.c-onder { flex: 0 0 auto; position: relative; z-index: 40; }
.toast-wrap {
  position: absolute; left: 0; right: 0;
  bottom: calc(100% + 10px);
  z-index: 70; display: flex; justify-content: center;
  pointer-events: none; padding: 0 16px;
}
/* Met een sheet open: óver de sheet (de overlay ligt over .c-onder), net
   boven de knoppenbalk van de sheet — en tijdens het typen bovenin, zodat
   hij niet over het veld valt. */
.toast-wrap.is-boven { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
html.kb-open .toast-wrap.is-boven { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 10px); }
.toast {
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 100%;
  background: var(--forest-800); color: var(--on-forest);
  padding: 11px 17px 11px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.35;
  box-shadow: 0 14px 34px -10px rgba(20,28,18,0.55);
  animation: m-toast-in .28s cubic-bezier(.22,1,.36,1) both;
}
.toast-stip {
  width: 20px; height: 20px; border-radius: 999px; background: var(--leaf);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.toast.is-fout { background: #5c2a1d; border-radius: 18px; }
.toast.is-fout .toast-stip { background: var(--macro-fat); }
.c-naar-onder {
  position: absolute; right: 14px; bottom: calc(100% + 12px); z-index: 45;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--m-line-2); background: var(--m-card); color: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--m-shadow-md); cursor: pointer;
  animation: m-pop .2s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes m-toast-in { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* ---------- Spinner ---------- */
@keyframes m-rotate { to { transform: rotate(360deg); } }
.m-spin {
  display: inline-block; box-sizing: border-box;
  width: 15px; height: 15px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  animation: m-rotate .65s linear infinite; vertical-align: -2px;
  flex: 0 0 auto;
}

/* ---------- Scanner (volledig scherm) ---------- */
.scanner {
  position: fixed; inset: 0; z-index: 80;
  /* liggend met notch: knoppen en kaartje buiten de notch-zone */
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  background: radial-gradient(120% 80% at 50% 30%, #20281b 0%, #0d110a 100%);
  display: flex; flex-direction: column;
  animation: m-fade .2s ease both;
}

/* ---------- Tap feedback + keuzegrid (profiel-sheet) ---------- */
.tap { transition: background .12s, transform .08s; cursor: pointer; }
.tap:active { transform: scale(0.985); }
.m-pill-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .m-pill-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--m-line-2); border-radius: 999px;
  background: var(--m-card); color: var(--ink-2);
  font-family: var(--m-font); font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.m-chip.is-active { background: var(--forest-700); color: var(--on-forest); border-color: var(--forest-700); }

/* ---------- Maaltijd-inzage ---------- */
/* Een mutatieregel met een logrij erachter is aanklikbaar. */
.c-mutatie.is-klikbaar {
  cursor: pointer;
  border: 0; background: none; width: 100%;
  text-align: left; font: inherit; padding: 0;
}
.c-mutatie.is-herroepen { color: var(--ink-3); text-decoration: line-through; }
.c-mutatie.is-herroepen .stip { background: var(--m-card-3); color: var(--ink-3); }

/* Maaltijden van vandaag in de uitgeklapte peilbalk. */
.c-peil-maaltijden {
  margin: 2px 0 12px;
  border-top: 1px solid var(--m-line);
}
.c-peil-maaltijd {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: baseline; gap: 8px;
  width: 100%; padding: 7px 2px;
  border: 0; border-bottom: 1px solid var(--m-line);
  background: none; cursor: pointer;
  font-family: var(--m-font); font-size: 13px; color: var(--ink);
  text-align: left;
}
.c-peil-maaltijd:last-child { border-bottom: 0; }
.c-peil-maaltijd .tijd { font-family: var(--m-mono); font-size: 11px; color: var(--ink-3); }
.c-peil-maaltijd .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-peil-maaltijd .kcal { font-family: var(--m-mono); font-size: 12px; color: var(--ink-2); }
.c-peil-leeg { font-size: 12px; color: var(--ink-3); padding: 8px 0 10px; }

/* bewerk-modus in het maaltijdpaneel */
.c-log-veld {
  display: flex; align-items: center;
  background: var(--m-card); border: 1px solid var(--m-line-2);
  border-radius: 12px; padding: 0 10px;
}
.c-log-veld input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--m-font); color: var(--ink);
  padding: 9px 3px; min-width: 0;
}
.c-log-veld input[type="number"] { font-family: var(--m-mono); text-align: right; }
.c-log-veld .suffix { font-size: 11.5px; color: var(--ink-3); font-family: var(--m-mono); }
.c-ing-bewerk { list-style: none; margin: 0 0 6px; padding: 0; }
.c-ing-bewerk li { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; }
.c-ing-bewerk .weg {
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: none; color: var(--ink-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* ---------- Strip (forest-paneel voor uitleg + één actie) ---------- */
.c-strip {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--forest-100);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: var(--forest-900);
  margin: 10px 0;
}
.c-strip .m-btn { flex: 0 0 auto; }

/* ---------- Gerechten-sheet ---------- */
.c-gerecht-zoek {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--m-card-2);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  padding: 8px 12px;
  margin-bottom: 6px;
}
.c-gerecht-zoek input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--m-font); color: var(--ink);
  -webkit-appearance: none; appearance: none; min-width: 0; width: 100%; padding: 2px 0;
}
.c-gerecht-zoek input::-webkit-search-decoration { -webkit-appearance: none; }
.c-gerecht-rij {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center; gap: 9px;
  width: 100%; padding: 11px 2px;
  border: 0; border-bottom: 1px solid var(--m-line);
  background: none; cursor: pointer;
  font-family: var(--m-font); text-align: left;
}
.c-gerecht-rij:last-child { border-bottom: 0; }
.c-gerecht-ster {
  width: 36px; height: 36px; margin: -4px; border: 0; border-radius: 10px;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.c-gerecht-ster.is-fav { color: var(--leaf-deep); }

/* ---------- Profiel-sheet ---------- */
.c-prof-sectie { border-top: 1px solid var(--m-line); padding-top: 16px; margin-top: 16px; }
.c-prof-kopregel { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
@keyframes c-vink-fade { 0% { opacity: 0; transform: scale(.8); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.c-prof-vink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--leaf); color: var(--forest-950);
  animation: c-vink-fade 1.4s ease both;
}
.c-prof-klap {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 4px 0;
  border: 0; background: none; cursor: pointer;
  font-family: var(--m-font); font-size: 13.5px; color: var(--ink);
  text-align: left;
}
.c-prof-klap .chevron { margin-left: auto; color: var(--ink-3); transition: transform .2s; }
.c-prof-klap.is-open .chevron { transform: rotate(90deg); }
@keyframes c-rand-flash { 0% { border-color: var(--forest-500); } 100% { border-color: var(--m-line); } }
.c-prof-flash { animation: c-rand-flash .8s ease both; }

/* ---------- Native aanraakgedrag ----------
   (1) Hover alleen met een echte muis — op een telefoon blijft :hover na
       een tik "plakken" tot je ergens anders tikt.
   (2) Knoppen, kaarten en chips: geen tekstselectie of iOS-callout bij lang
       drukken (wél in berichten en recepten: die wil je kunnen kopiëren).
   (3) Directe drukfeedback op alles wat je aanraakt. */
@media (hover: hover) and (pointer: fine) {
  .c-peil-knop:hover { background: rgba(30,40,25,0.06); }
  .c-kaart-voet .bekijk:hover { background: var(--forest-100); }
  .c-plusmenu button:hover { background: var(--m-card-2); }
  .c-voorstel:hover { border-color: var(--forest-300); }
  .c-mutatie.is-klikbaar:hover span:not(.stip) { color: var(--ink); }
  .c-ing-bewerk .weg:hover { background: var(--macro-fat-bg); color: var(--macro-fat); }
  .c-gerecht-ster:hover { background: rgba(30,40,25,0.06); }
}
button, .tap, .c-peil, .c-kaart-eyebrow, .c-kaart-voet, .m-chip, .c-snelchip, .c-voorstel,
.c-gerecht-rij, .c-peil-maaltijd, .c-kaartrij-label, .c-dagscheiding, .sheet-kop, .c-plusmenu {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; }
button:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--forest-500); outline-offset: 2px; }
.c-veld textarea:focus-visible { outline: none; }
@media (pointer: coarse) {
  .c-kaart-voet button:active:not(:disabled),
  .m-chip:active, .m-btn:active:not(:disabled),
  .c-naar-onder:active, .c-plus:active { transform: scale(.96); }
  .c-plusmenu button:active { background: var(--m-card-2); }
  .c-peil-knop:active { background: rgba(30,40,25,0.07); }
  .m-chip, .m-btn, .c-naar-onder { transition: transform .12s ease, background-color .12s ease; }
  /* Grote vlakken in een scrollende lijst (voorstel, rij, regel): de
     drukstand pas na 60 ms. iOS zet :active al bij de aanraking en haalt hem
     weg zodra het een scroll wordt — zonder vertraging "ademt" elke rij even
     als je begint te scrollen. Native lijsten wachten ook even. */
  .c-voorstel:active, .c-mutatie.is-klikbaar:active { transform: scale(.98); transition: transform .12s ease .06s; }
  .c-peil-maaltijd:active, .c-gerecht-rij:active:not(:has(button:active)) {
    background: var(--m-card-2); transition: background-color .1s ease .06s;
  }
  .c-voorstel, .c-mutatie.is-klikbaar { transition: transform .14s ease; }
  .c-peil-maaltijd, .c-gerecht-rij { transition: background-color .14s ease; }
}

@media (pointer: coarse) {
  .c-peil-knop:active, .c-kaart-voet .bekijk:active, .sheet-sluit:active, .c-gerecht-ster:active,
  .c-kaartrij-label:active, .c-opnieuw:active, .c-fotostrip .weg:active, .c-prof-klap:active { opacity: .55; }
  .c-peil-knop, .c-kaart-voet .bekijk, .sheet-sluit, .c-gerecht-ster, .c-kaartrij-label, .c-opnieuw, .c-prof-klap {
    transition: opacity .14s ease;
  }
}
.c-snelchip, .m-chip { position: relative; }
.c-snelchip::after, .m-chip::after { content: ''; position: absolute; inset: -6px -3px; }
.c-fotostrip .weg::after { content: ''; position: absolute; inset: -10px; }

/* ---------- Mobiel: geen backdrop-blur ----------
   backdrop-filter is op iOS duur tijdens scrollen; op een klein scherm valt
   het effect bovendien nauwelijks op. Dichte achtergrond in de plaats. */
@media (pointer: coarse) {
  .c-peil, .c-composer { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--m-bg); }
  .c-snelchip { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--m-card); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-shell { transition: none; }
  .c-bericht.is-vers, .c-kaartrij.is-live .c-kaart, .c-snelchip, .c-voorstel, .c-mutatie.is-vers,
  .c-paneel-in, .c-paneel-terug, .c-naar-onder, .toast { animation: none; }
  .c-denkt-dot, .c-skelet-blok { animation: none; opacity: .6; }
  .c-dag, .c-dag-scrim, .c-peil-energie > .vul, .c-peil-sliver > i { transition-duration: .01ms; }
  .sheet { animation-duration: .01ms; }
}

/* ---------- App-laag: offline- en update-pil (pwa.js) ---------- */
.c-pil {
  position: fixed; z-index: 75;
  /* gecentreerd zonder transform (de inkom-animatie gebruikt transform) */
  left: 16px; right: 16px; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px);
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  display: flex; align-items: center; gap: 10px;
  background: var(--forest-900); color: var(--on-forest);
  font-family: var(--m-font); font-size: 12.5px; font-weight: 500; line-height: 1.35;
  padding: 8px 8px 8px 14px; border-radius: 999px;
  box-shadow: 0 10px 28px -10px rgba(20,28,18,0.5);
  animation: m-toast-in .28s cubic-bezier(.22,1,.36,1) backwards;
  -webkit-user-select: none; user-select: none;
}
.c-pil[hidden] { display: none; }   /* display:flex hierboven won anders van [hidden] */
/* De pil blokkeert nooit wat eronder ligt (alleen zijn knop is aan te tikken),
   en met een sheet open staat hij in de vrije strook erboven — niet over de
   kop en sluitknop van de sheet. */
.c-pil { pointer-events: none; }
.c-pil button { pointer-events: auto; }
html.laag-open .c-pil { top: calc(env(safe-area-inset-top, 0px) + 6px); }
.c-pil[data-soort="offline"] { padding-right: 14px; background: #4a4f45; }
.c-pil button {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: var(--leaf); color: var(--forest-950);
  font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  min-height: 32px;
}
html.kb-krap .c-pil { display: none; }

/* ---------- Opstartbeeld zonder sessie (eerste start, OAuth-terugkeer) ---------- */
.m-boot {
  height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--m-bg); padding: 24px;
}
.m-boot-merk {
  width: 84px; height: 84px; border-radius: 24px;
  background: linear-gradient(var(--forest-600), var(--forest-800));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -12px rgba(35,81,57,.55);
}
.m-boot-fout {
  max-width: 300px; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.m-boot-fout .m-btn { padding: 10px 18px; font-size: 13px; }

/* ---------- Vangnet, laadfout, schermlezer ---------- */
.c-vangnet, .c-laadfout {
  text-align: center; padding: 14px 6px 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.c-vangnet .m-btn, .c-laadfout .m-btn { padding: 9px 16px; font-size: 13px; }
.sr-alleen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-overlay, .toast, .c-plusmenu, .c-tip, .scanner, .c-pil, .c-kaartrij-wrap .c-kaartrij {
    animation-duration: .01ms !important;
  }
  /* Het bewaard-vinkje fadet uit (eindstand opacity 0): met een verkorte
     animatie was het meteen weg. Zonder animatie staat het gewoon in beeld
     zolang React het toont. */
  .c-prof-vink { animation: none; }
}