/* Social-inbox-app — huisstijl MamsatWork (paars/goud). */

:root {
  --paars: #5b3a8b;
  --paars-donker: #422a66;
  --goud: #c9a227;
  --tekst: #23202a;
  --grijs: #6b6675;
  --lijn: #e5e1ec;
  --bg: #f6f4fa;
  --wit: #ffffff;
  --rood: #b3261e;
  --groen: #2e7d32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tekst);
  background: var(--bg);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------- Topbar ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paars); color: var(--wit); padding: 0 1.25rem; height: 56px;
  position: relative;                 /* anker voor het account-menu */
}
.topbar-left { display: flex; align-items: center; gap: 1.25rem; }
.brand { font-weight: 700; letter-spacing: .3px; }
.btn-link { color: var(--wit); text-decoration: none; font-size: .9rem; }
.btn-link:hover { text-decoration: underline; }

/* ---------------- Account-bolletje + uitklapmenu ----------------
   De overige schermen (Mijn Account, Standaardantwoorden, Funnel, Uitloggen) zitten hier
   achter; linksboven blijft alleen de Inbox staan. */
.account { position: relative; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: var(--paars-donker); color: var(--wit);
  font-family: inherit; font-weight: 700; font-size: .95rem; line-height: 1;
  text-transform: uppercase; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.avatar:hover, .account-menu:not([hidden]) + .avatar,
.avatar[aria-expanded="true"] { background: var(--goud); border-color: var(--wit); color: #3a2f06; }

.account-menu {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60;
  min-width: 220px;
  display: flex; flex-direction: column;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(66, 42, 102, .18);
  overflow: hidden;
}
.account-menu[hidden] { display: none; }   /* display:flex overrulet 'hidden' anders */
.account-wie {
  padding: .6rem .9rem; border-bottom: 1px solid var(--lijn); background: var(--bg);
  color: var(--grijs); font-size: .78rem; font-weight: 600;
}
.account-link {
  padding: .7rem .9rem; border-bottom: 1px solid var(--lijn);
  color: var(--tekst); text-decoration: none; font-size: .9rem;
}
.account-link:last-child { border-bottom: none; }
.account-link:hover { background: var(--bg); color: var(--paars); }
.account-link { -webkit-tap-highlight-color: transparent; }  /* geen rechthoek op touch */
.account-link:active { opacity: .72; }                       /* terugkoppeling in de regel zelf */
/* Uitloggen is een knop in een formulier (het is een POST), maar moet er als de links
   erboven uitzien: laatste regel van het menu, dus zonder scheidingslijn. */
.account-menu form { margin: 0; display: flex; }
button.account-link {
  width: 100%; border: none; background: none;
  font-family: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}

/* ---------------- Schermkop met terug-knop ----------------
   De schermen achter het account-menu hebben een terug-knop; die brengt je terug naar de
   inbox zoals je hem had staan (filters zitten in de URL, zie nav.py). */
.page-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.page-head h1 { margin: 0; }
.back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 36px; height: 36px;
  border: 1px solid var(--lijn); border-radius: 50%; background: var(--wit);
  color: var(--paars); text-decoration: none;
  font-size: 1.6rem; line-height: 1; padding-bottom: 3px;
}
.back-btn:hover { border-color: var(--paars); background: var(--bg); }

/* Gegevens op "Mijn Account". */
.account-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem;
  margin: 0 0 1rem; padding: .9rem 1rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px;
}
.account-dl dt { color: var(--grijs); font-size: .85rem; }
.account-dl dd { margin: 0; font-weight: 600; }

.content { max-width: 1500px; margin: 1.25rem auto; padding: 0 1.25rem; }

/* De inbox vult de hoogte onder de topbar; de filterrijen nemen hun natuurlijke
   hoogte en de split (lijst + detail) vult exact de rest. Zo past alles altijd op
   één scherm, ongeacht of de filters wrappen. Topbar = 56px, .content-marges = 2.5rem. */
.inbox { display: flex; flex-direction: column; height: calc(100vh - 56px - 2.5rem); }

/* ---------------- Flashes ---------------- */
.flashes { max-width: 1500px; margin: 1rem auto 0; padding: 0 1.25rem; }
.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .5rem; font-size: .92rem; }
.flash-error { background: #fbe9e7; color: var(--rood); border: 1px solid #f3c0ba; }
.flash-success { background: #e8f5e9; color: var(--groen); border: 1px solid #b6dcb8; }

/* ---------------- Icoonknoppen ---------------- */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--lijn); background: var(--wit); color: var(--grijs);
  border-radius: 6px; cursor: pointer;
}
.ico svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico:hover { color: var(--paars); border-color: var(--paars); }
.ico:disabled { opacity: .4; cursor: default; }
.act-done:hover { color: var(--groen); border-color: var(--groen); }
.act-ignore:hover { color: var(--rood); border-color: var(--rood); }
.ico-solid { background: var(--paars); color: var(--wit); border-color: var(--paars); }
.ico-solid:hover { background: var(--paars-donker); color: var(--wit); border-color: var(--paars-donker); }
/* Duimpje: gevuld icoon (i.p.v. de lijnstijl hierboven), in het Facebook-blauw bij hover. */
.act-like svg { fill: currentColor; stroke: none; }
.act-like:hover { color: #1877f2; border-color: #1877f2; }

/* ---------------- Inbox-kop, zoeken, filters ---------------- */
.inbox-head { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-bottom: .4rem; }
.counts { display: flex; gap: 1.25rem; align-items: baseline; flex-wrap: wrap; }

/* Sneltoetsen onder een ?-knopje (popover via <details>, geen JS). */
.help { position: relative; }
.help-btn {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--lijn); background: var(--wit); color: var(--grijs);
  font-weight: 700; font-size: .85rem;
}
.help-btn::-webkit-details-marker { display: none; }
.help-btn:hover, .help[open] .help-btn { border-color: var(--paars); color: var(--paars); }
.help .kbd-hint {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20;
  width: 320px; max-width: 80vw;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(66, 42, 102, .12); padding: .6rem .8rem;
}
.count { color: var(--grijs); font-size: .85rem; }
.count strong { color: var(--paars); font-size: 1.2rem; }
.count-muted { font-size: .78rem; font-style: italic; }

/* Bovenste filterrij: kanaal- en bron-toggles links, zoekveld ernaast. */
.topfilters { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin: .1rem 0 .5rem; }
.topfilters .searchbar { flex: 1 1 280px; margin: 0; }

/* Filterknop: klapt de filters in/uit. Alleen op een smal scherm, waar de filterbalk
   anders een kwart van het scherm opeet; op desktop is er ruimte zat en staat alles vast. */
.filter-btn { display: none; }

.searchbar { display: flex; gap: .5rem; align-items: center; margin: .4rem 0 .6rem; }
.searchbar input[type="search"] {
  flex: 1 1 320px; max-width: 520px;
  padding: .45rem .75rem; border: 1px solid var(--lijn); border-radius: 999px;
  font-size: .9rem; font-family: inherit;
}
.searchbar input[type="search"]:focus { outline: none; border-color: var(--paars); }

/* Datumfilter: één keuzemenu met presets (Alle datums / Vandaag / …). */
.period-select {
  padding: .45rem .6rem; border: 1px solid var(--lijn); border-radius: 999px;
  font-family: inherit; font-size: .8rem; color: var(--tekst); background: var(--wit); cursor: pointer;
}
.period-select:focus { outline: none; border-color: var(--paars); }

.filters { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-bottom: 1.8rem; }
.filtergroup { display: flex; gap: .3rem; }

/* Bijwerken-knop met aftelring. De ring loopt van leeg naar vol tot de volgende
   automatische ronde; inbox.js zet --voortgang elke seconde. */
.vernieuw {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid var(--lijn); border-radius: 999px;
  padding: .18rem .7rem .18rem .45rem; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--grijs);
}
.vernieuw:hover:not(:disabled) { border-color: var(--paars); color: var(--paars); }
.vernieuw:disabled { cursor: default; opacity: .65; }
.vernieuw:active:not(:disabled) { opacity: .72; }

.vernieuw-ring {
  position: relative; flex: 0 0 auto; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--paars) var(--voortgang, 0%), var(--lijn) 0);
}
.vernieuw-ring::before {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--wit);
}
.vernieuw-ring svg {
  position: relative; width: .7rem; height: .7rem;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.vernieuw.bezig .vernieuw-ring svg { animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.chip {
  padding: .28rem .7rem; border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--wit); color: var(--grijs); text-decoration: none; font-size: .8rem;
}
.chip:hover { border-color: var(--paars); color: var(--paars); }
.chip.active { background: var(--paars); border-color: var(--paars); color: var(--wit); }
/* Togglebare statusknoppen: aan = gevuld (.active), uit = uitgegrijsd. */
.chip-toggle.off { opacity: .5; }
.chip-toggle.off:hover { opacity: 1; }

/* Togglebare kanaal-logo's en bron-icoontjes. Aan = kleur, uit = uitgegrijsd. */
.toggles { gap: .4rem; }
.toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 5px;
  border: 1px solid var(--lijn); background: var(--wit); border-radius: 8px;
  cursor: pointer; text-decoration: none;
  transition: border-color .12s, opacity .12s, filter .12s;
}
.toggle svg { width: 100%; height: 100%; display: block; }
.toggle:hover { border-color: var(--paars); }
.toggle.off { filter: grayscale(1); opacity: .38; }        /* uitgetoggled = outgrey */
.toggle.off:hover { opacity: .62; }
.toggle-instagram svg { fill: #e1306c; }
.toggle-facebook svg { fill: #1877f2; }
/* Post = de gevulde tekstballon (het huisicoon), advertentie = gevulde megafoon. */
.toggle-post { color: var(--paars); }
.toggle-post svg { fill: currentColor; stroke: none; }
/* Advertentie = gevulde megafoon in rood, zodat 'ie goed opvalt. */
.toggle-ad { color: #e01b1b; }
.toggle-ad svg { fill: currentColor; stroke: none; }

.kbd-hint { font-size: .74rem; color: var(--grijs); line-height: 1.5; }
.kbd-hint div { padding: .13rem 0; }
.kbd-hint kbd {
  background: var(--wit); border: 1px solid var(--lijn); border-bottom-width: 2px;
  border-radius: 4px; padding: .05rem .3rem; font-family: inherit; font-size: .7rem;
  color: var(--tekst); margin: 0 .05rem;
}

/* ---------------- Twee panelen ---------------- */
.split {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.05fr);
  gap: 1rem;
  /* Beide panelen even hoog en samen passend binnen het scherm; scrollen doe je
     alleen ín een paneel. De hoogte = viewport minus de kop/zoekbalk/filters erboven. */
  align-items: stretch;
  flex: 1 1 auto; min-height: 0;
}
.pane-list { overflow-y: auto; min-height: 0; padding-right: .2rem; }
.pane-detail {
  overflow-y: auto; min-height: 0;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px;
  padding: .9rem 1rem;
}

/* Terugknop: alleen op smalle schermen, waar lijst en detail elkaar afwisselen. */
.detail-back { display: none; }

/* ---------------- Reactielijst (links) ---------------- */
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }

.load-more {
  display: block; margin: .7rem auto; padding: .45rem 1.3rem;
  border: 1px solid var(--lijn); border-radius: 999px; background: var(--wit);
  color: var(--paars); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.load-more:hover { border-color: var(--paars); background: var(--bg); }
.load-more:disabled { opacity: .5; cursor: default; }
.load-more[hidden] { display: none; }
.item {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px;
  padding: .5rem .6rem; cursor: pointer;
}
.item:hover { border-color: #cfc6e0; }
.item.selected { border-color: var(--paars); box-shadow: 0 0 0 2px rgba(91, 58, 139, .14); }
/* Aangevinkt voor de batchverwerking: lichtpaarse rij (los van .selected = de rij die
   rechts in het detailpaneel staat). */
.item.picked { background: #f4f0fb; border-color: #cbbbe6; }

/* ---------------- Batchverwerking ---------------- */
.row-pick { display: flex; align-items: center; padding-top: .1rem; cursor: pointer; }
.row-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--paars); cursor: pointer; }
/* Elke regel heeft een gewoon vakje. De batchactie raakt alleen de open reacties in de
   selectie; de balk zegt erbij hoeveel dat er zijn. */

.bulk-all { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-weight: 600; }
.bulk-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--paars); cursor: pointer; }
/* "Selecteer alle N die aan dit filter voldoen" — een link in de balk, geen knop-uiterlijk. */
.link-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  color: var(--paars); text-decoration: underline;
}
.link-btn[hidden] { display: none; }

/* Blijft bij het scrollen bovenaan de lijst staan, zodat je de selectie nooit kwijtraakt. */
.bulkbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  margin-bottom: .45rem; padding: .45rem .6rem;
  background: #f0eaf9; border: 1px solid var(--paars); border-radius: 8px;
  font-size: .8rem; color: var(--paars-donker);
}
.bulkbar[hidden] { display: none; }
/* Afvinken + negeren blijven als paar rechts staan, ook als de balk wrapt. Ze komen pas in
   beeld zodra er iets aangevinkt is (inbox.js zet het hidden-attribuut). */
.bulk-acties { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.bulk-acties[hidden] { display: none; }
.bulk-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 1px solid var(--paars); border-radius: 999px;
  background: var(--wit); color: var(--paars);
  font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.bulk-btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bulk-btn:hover { background: var(--paars); color: var(--wit); }
.bulk-btn:disabled { opacity: .5; cursor: default; }
.bulk-error { color: var(--rood); font-size: .76rem; }
.bulk-error:empty { display: none; }

.row-main { flex: 1 1 auto; min-width: 0; }
.row-top { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .15rem; }
.row-body { display: flex; align-items: flex-start; gap: .4rem; }
.row-text {
  flex: 1 1 auto; min-width: 0;
  font-size: .87rem; line-height: 1.35; color: var(--tekst); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Een getagde naam in de lijst. Zelfde bedoeling als .thread-mention rechts: Meta levert
   een mention als gewone tekst, dus zonder opmaak lees je hem als het begin van de zin. */
.row-mention { color: var(--paars); font-weight: 600; }
.row-attach {
  flex: 0 0 30px; width: 30px; height: 30px;
  object-fit: cover; border-radius: 4px; border: 1px solid var(--lijn); background: var(--bg);
}
.row-actions { display: flex; gap: .25rem; visibility: hidden; }
.item:hover .row-actions, .item.selected .row-actions { visibility: visible; }

.badge {
  font-size: .65rem; font-weight: 700; color: var(--wit);
  padding: .08rem .35rem; border-radius: 4px; letter-spacing: .3px;
}
.badge-instagram { background: #c13584; }
.badge-facebook { background: #1877f2; }
.badge-ad { background: var(--goud); color: #3a2f06; cursor: help; }

/* Kanaal-logo + bron-icoontje in de reactieregel. */
.row-logo { display: inline-flex; flex: 0 0 16px; width: 16px; height: 16px; cursor: help; }
.row-logo svg { width: 100%; height: 100%; display: block; }
.row-logo-instagram svg { fill: #e1306c; }
.row-logo-facebook svg { fill: #1877f2; }
/* Reactie op een post: de tekstballon in paars (zelfde icoon als in de filterbalk). */
.row-src { display: inline-flex; flex: 0 0 15px; width: 15px; height: 15px; color: var(--paars); cursor: help; }
.row-src svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
/* Advertentie in de regel: gevulde megafoon in rood (valt op). */
.row-src-ad { color: #e01b1b; }

.author { font-weight: 600; font-size: .84rem; }
.reply-mark { color: var(--goud); font-weight: 700; cursor: help; }
.when { color: var(--grijs); font-size: .74rem; }
.tag { font-size: .66rem; padding: .05rem .35rem; border-radius: 4px; }
.tag-done { background: #e8f5e9; color: var(--groen); }         /* afgehandeld = groen */
.tag-answered { background: #f7f0da; color: #8a6d0b; }          /* beantwoord = amber */
.tag-funnel { background: #e3edfb; color: #1c5aa8; }            /* funnel = blauw */
.tag-ignored { background: #eeecf1; color: var(--grijs); }      /* genegeerd = grijs */

/* ---------------- Detailpaneel (rechts) ---------------- */
.detail-empty { color: var(--grijs); font-size: .88rem; line-height: 1.5; }
.detail-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--paars); margin-bottom: .35rem;
}
/* Postgegevens: kleine media links, tekst + link ernaast rechts. */
/* Het postblok is precies zo hoog als de media (170px): tekst + de regel met de tellingen
   samen vullen die hoogte. Een langere posttekst scrollt binnen zijn eigen vak, zodat het
   detailpaneel niet uitdijt en op het scherm blijft passen. Zonder media geldt dezelfde
   hoogte, dus het blok is altijd even hoog. */
.detail-posthead {
  display: flex; gap: .7rem; align-items: stretch; margin-bottom: .2rem;
  height: 170px;
}
/* Uitzondering: de Facebook-videoplugin (reels) is staand en heeft zijn eigen hoogte nodig. */
.detail-posthead:has(.detail-embed) { height: 390px; }
.detail-thumb {
  flex: 0 0 170px; width: 170px; height: 170px; object-fit: cover;
  background: #000; border-radius: 8px; display: block;
}
/* Facebook-videoplugin (fallback als Meta geen speelbare video-URL geeft, bv. bij reels).
   220px is de minimumbreedte van de plugin; hoogte is op staand beeld (9:16) gezet, want
   dat is bij ads het gangbare formaat. */
.detail-embed {
  flex: 0 0 220px; width: 220px; height: 390px; border: 0;
  background: #000; border-radius: 8px; display: block;
}
.detail-postbody {
  flex: 1 1 auto; min-width: 0; min-height: 0;   /* min-height: 0 — anders krimpt de kolom niet */
  display: flex; flex-direction: column;
}
/* De posttekst vult de ruimte tussen het label en de regel met de tellingen: zo loopt de
   tekstkolom netjes door tot de onderkant van de foto/video. Past de tekst er niet in, dan
   scrollt hij binnen dat vak (min-height: 0 — anders krimpt een flex-item niet). */
.detail-posttext {
  font-size: .85rem; color: var(--tekst); line-height: 1.45; white-space: pre-wrap;
  margin: 0 0 .4rem; word-break: break-word;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
/* Onderste regel van de postcontext: tellingen (duimpje = likes — FB telt alle reactie-types
   mee; tekstballon = reacties, inclusief antwoorden) náást de link naar het platform. */
/* margin-top: auto duwt deze regel naar de onderkant van de tekstkolom (= onderkant media);
   de platform-link staat rechts (margin-left: auto), de tellingen links. */
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .9rem; margin-top: auto; }
.post-meta a.detail-open { margin-left: auto; }
.post-stat {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600; color: var(--grijs); cursor: help;
}
.post-stat svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* "Openen op Instagram/Facebook". Bewust op `a` gebonden: een kale .detail-open zou ook een
   toestand-klasse elders kunnen raken, en een text-decoration op een blok-element tekent
   dwars over al zijn nakomelingen heen (zie de klassenaam-botsing in milestone 26). */
a.detail-open {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--paars); text-decoration: none;
}
a.detail-open:hover { text-decoration: underline; }
a.detail-open svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.detail-thread, .detail-reply { margin-top: .9rem; border-top: 1px solid var(--lijn); padding-top: .7rem; }
.thread-msg {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .35rem 0; border-bottom: 1px solid var(--lijn);
}
.thread-msg:last-child { border-bottom: none; }
.thread-kolom { min-width: 0; flex: 1; }
.thread-indent { margin-left: 1rem; }

/* Bolletje links van het bericht, zoals Facebook. Meestal de eerste letter van de naam: een
   echte profielfoto hebben we alleen bij Pagina's (zie _avatar in blueprints/inbox.py). */
.thread-avatar {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; margin-top: .1rem;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--lijn); color: var(--grijs);
  font-size: .72rem; font-weight: 700; line-height: 1; user-select: none;
}
.thread-avatar.avatar-ons { background: var(--paars); color: var(--wit); }
.thread-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Een @-vermelding. Meta levert die als gewone tekst aan, dus zonder dit las de paginanaam
   vooraan een antwoord als het begin van de zin. */
.thread-mention { color: var(--paars); font-weight: 600; }
.thread-ours .thread-mention { color: var(--goud); }

.thread-link { display: inline-block; margin-top: .25rem; font-size: .78rem; color: var(--paars); }
.thread-head { font-size: .73rem; color: var(--grijs); font-weight: 600; margin-bottom: .1rem; }
.thread-body { font-size: .86rem; color: var(--tekst); white-space: pre-wrap; word-break: break-word; }
.thread-ours .thread-head { color: var(--paars); }
.thread-ours .thread-body { color: var(--paars-donker); }
.thread-current { background: var(--bg); border-left: 3px solid var(--goud); padding-left: .5rem; border-radius: 4px; }
.thread-attach {
  display: block; margin-top: .35rem; max-width: 220px; max-height: 200px;
  border-radius: 6px; border: 1px solid var(--lijn); object-fit: contain; background: var(--bg);
}

.reply-note {
  font-size: .77rem; color: #8a6d0b; background: #f7f0da;
  padding: .35rem .5rem; border-radius: 5px; margin: 0 0 .5rem;
}
.sr-picker { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.sr-chip {
  border: 1px dashed var(--lijn); background: var(--bg); color: var(--paars);
  border-radius: 999px; padding: .2rem .6rem; font-size: .76rem; cursor: pointer;
}
.sr-chip:hover { border-style: solid; border-color: var(--paars); background: var(--wit); }
.reply-text {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--lijn); border-radius: 6px;
  font-family: inherit; font-size: .9rem; resize: vertical;
}
.reply-text:focus { outline: none; border-color: var(--paars); }
.reply-row { display: flex; gap: .5rem; align-items: flex-end; margin-top: .1rem; }
.reply-row .reply-text { flex: 1 1 auto; width: auto; min-width: 0; }
/* Knoppen naast het antwoordvak: liken (alleen bij Facebook) boven versturen. */
.reply-btns { display: flex; flex-direction: column; gap: .35rem; }

/* ---------------- Emoji-kiezer en foto bij een antwoord ---------------- */
/* Werkbalk onder het tekstvak, zoals de composer van Facebook: emoji links, daarnaast de
   fotoknop met het voorbeeldje van wat je gekozen hebt. */
.reply-tools { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.detail-reply { position: relative; }
.emoji-vak, .foto-vak { position: relative; display: flex; align-items: center; gap: .4rem; }
.act-emoji:active, .act-foto:active { opacity: .72; }   /* terugkoppeling binnen de knop */

/* Het paneel klapt boven de knop open: onder het antwoordvak is vaak geen ruimte meer. */
.emoji-paneel {
  position: absolute; bottom: calc(100% + .35rem); left: 0; z-index: 20;
  width: min(19rem, calc(100vw - 2rem));
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12); padding: .35rem;
}
.emoji-tabs {
  display: flex; gap: .1rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--lijn); padding-bottom: .3rem; overflow-x: auto;
}
.emoji-tab {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .25rem .3rem; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.emoji-tab:hover { background: var(--bg); }
.emoji-tab:active { opacity: .72; }
.emoji-tab.actief { background: var(--bg); box-shadow: inset 0 -2px 0 var(--paars); }
.emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
  gap: .1rem; max-height: 13rem; overflow-y: auto;
}
.emoji-knop {
  border: none; background: none; cursor: pointer; border-radius: 6px;
  font-size: 1.25rem; line-height: 1.5; padding: .1rem;
  -webkit-tap-highlight-color: transparent;
}
.emoji-knop:hover { background: var(--bg); }
.emoji-knop:active { opacity: .72; }
.emoji-leeg { grid-column: 1 / -1; margin: .4rem; font-size: .78rem; color: var(--grijs); }

/* De gekozen foto: een miniatuur met een kruisje om hem weer weg te halen. */
.foto-voorbeeld { position: relative; display: inline-flex; }
.foto-voorbeeld img {
  width: 42px; height: 42px; object-fit: cover;
  border: 1px solid var(--lijn); border-radius: 6px; display: block;
}
.foto-weg {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border: 1px solid var(--lijn); border-radius: 50%; background: var(--wit);
  color: var(--grijs); font-size: .8rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.foto-weg:hover { color: var(--rood); border-color: var(--rood); }
.foto-weg:active { opacity: .72; }

.reply-hint { display: block; margin-top: .35rem; font-size: .76rem; color: var(--grijs); }
.reply-hint:empty { display: none; }
.reply-hint.reply-error { color: var(--rood); }

.placeholder {
  background: var(--wit); border: 1px solid var(--lijn); border-left: 4px solid var(--goud);
  border-radius: 8px; padding: 1rem 1.1rem; color: var(--grijs); line-height: 1.5;
}

/* ---------------- Beheerschermen ---------------- */
.beheer { max-width: 900px; }
.beheer h1 { margin: 0 0 .5rem; color: var(--paars-donker); }
.uitleg {
  background: var(--wit); border: 1px solid var(--lijn); border-left: 4px solid var(--goud);
  border-radius: 8px; padding: .8rem 1rem; color: var(--grijs); line-height: 1.5;
  font-size: .9rem; margin-bottom: 1rem;
}
.uitleg code { background: var(--bg); padding: .05rem .3rem; border-radius: 3px; }
.grip-demo { color: var(--paars); font-weight: 700; }

.add-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.add-form input {
  padding: .55rem .7rem; border: 1px solid var(--lijn); border-radius: 6px; font-size: .95rem;
}
.add-form input[name="keyword"] { flex: 0 0 220px; }
.add-form input[name="note"] { flex: 1 1 220px; }
.add-form button {
  padding: .55rem 1.1rem; background: var(--paars); color: var(--wit); border: none;
  border-radius: 6px; font-weight: 600; cursor: pointer;
}
.add-form button:hover { background: var(--paars-donker); }
.add-form-wide { align-items: flex-start; }
.add-form-wide input[name="title"] { flex: 0 0 240px; }
.add-form-wide textarea {
  flex: 1 1 320px; min-height: 2.4rem; padding: .55rem .7rem;
  border: 1px solid var(--lijn); border-radius: 6px; font-family: inherit; font-size: .95rem;
}

.sr-order-bar { min-height: 1.2rem; margin-bottom: .3rem; }
.sr-order-status { font-size: .8rem; color: var(--groen); }
.sr-order-status.sr-order-error { color: var(--rood); }
.sr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.sr-row { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: .7rem .8rem; }
.sr-row.dragging { opacity: .5; border-color: var(--paars); }
.sr-handle { flex: 0 0 auto; cursor: grab; color: var(--grijs); font-size: 1.05rem; padding: 0 .15rem; user-select: none; }
.sr-handle:active { cursor: grabbing; }
.sr-row-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.sr-num {
  flex: 0 0 1.5rem; text-align: center; font-weight: 700; font-size: .8rem;
  color: var(--wit); background: var(--paars); border-radius: 4px; padding: .1rem 0;
}
.sr-row-top input[name="title"] { flex: 1 1 auto; padding: .45rem .6rem; border: 1px solid var(--lijn); border-radius: 6px; font-weight: 600; }
.sr-row textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--lijn); border-radius: 6px;
  font-family: inherit; font-size: .92rem; resize: vertical;
}
.sr-row-actions { display: flex; gap: .5rem; margin-top: .45rem; }
.sr-row-actions button {
  padding: .35rem .9rem; border-radius: 6px; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--paars); color: var(--wit); border: 1px solid var(--paars);
}
.sr-row-actions button:hover { background: var(--paars-donker); }
.sr-row-actions .del { background: none; color: var(--rood); border-color: var(--lijn); font-weight: 500; }
.sr-row-actions .del:hover { background: #fbe9e7; border-color: var(--rood); }

.kw-table { width: 100%; border-collapse: collapse; background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.kw-table th, .kw-table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--lijn); }
.kw-table thead th { background: var(--bg); color: var(--grijs); font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; }
.kw-table tr:last-child td { border-bottom: none; }
.kw-table .kw { font-weight: 600; color: var(--paars); }
.kw-table .note { color: var(--grijs); }
.kw-table .num { text-align: right; color: var(--grijs); }
.kw-table .actie { text-align: right; }
.kw-table .del {
  background: none; border: 1px solid var(--lijn); color: var(--rood);
  padding: .3rem .6rem; border-radius: 5px; font-size: .82rem; cursor: pointer;
}
.kw-table .del:hover { border-color: var(--rood); background: #fbe9e7; }

/* ---------------- Kanalen (koppelbeheer) ---------------- */
.kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px;
  padding: 1rem 1.1rem; margin-bottom: 1.5rem;
}
.kaart-kop { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.kaart-kop h2 { margin: 0; font-size: 1.05rem; color: var(--paars-donker); }

/* Statuslabel: groen = werkt, rood = token aanwezig maar niet bruikbaar, grijs = nog niets. */
.stip {
  font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid transparent;
}
.stip-ok   { background: #e8f5e9; color: var(--groen); border-color: #b6dcb8; }
.stip-fout { background: #fbe9e7; color: var(--rood);  border-color: #f3c0ba; }
.stip-uit  { background: var(--bg); color: var(--grijs); border-color: var(--lijn); }
/* Amber: werkt nog, maar er komt een datum aan (data-toegang van Meta). */
.stip-let  { background: #fff6db; color: #7a5c00; border-color: #f0dda0; }
.waarschuwing { color: #7a5c00; }

.feiten { margin: 0 0 1rem; display: grid; gap: .5rem; }
.feiten > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: .5rem; }
.feiten dt { color: var(--grijs); font-size: .85rem; }
.feiten dd { margin: 0; font-size: .9rem; }

.zacht { color: var(--grijs); }
.klein { font-size: .82rem; margin: .5rem 0 0; }
.let-op { border-left: 3px solid var(--rood); padding-left: .7rem; }

.knop-primair {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--paars); color: var(--wit); border: 1px solid var(--paars);
  padding: .5rem 1.1rem; border-radius: 6px; font-size: .9rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;   /* geen rechthoekige highlight op touch */
}
.knop-primair:hover { background: var(--paars-donker); }
.knop-primair:active { opacity: .72; }        /* terugkoppeling binnen de vorm van de knop */

.sub-kop { font-size: 1.05rem; color: var(--paars-donker); margin: 0 0 .4rem; }
.scopes { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.scope {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px;
  padding: .4rem .7rem; font-size: .88rem;
}
.scope-naam { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
.scope-status { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.scope-ok   .scope-status { color: var(--groen); }
.scope-mist { border-color: #f3c0ba; background: #fdf5f4; }
.scope-mist .scope-status { color: var(--rood); }

/* ---------------- Mobiel (telefoon/tablet) ----------------
   Alle afwijkingen voor smalle schermen staan hier bij elkaar; boven het breekpunt
   verandert er dus niets aan de desktopweergave. Twee dingen zijn anders:
   1. Acties staan altijd zichtbaar (op touch bestaat hover niet) en zijn groter.
   2. Lijst en detail wisselen elkaar af i.p.v. naast elkaar (master-detail): tik een
      reactie aan → detail schuift erover, terugknop brengt je terug naar de lijst.
   De klasse .toont-detail wordt door inbox.js gezet; het breekpunt staat daar ook
   (MOBILE_MQ) en moet gelijk blijven aan de 1000px hieronder. */
@media (max-width: 1000px) {
  .content { margin: .6rem auto; padding: 0 .7rem; }

  /* Topbar: zonder merknaam. Links "Inbox", rechts het account-bolletje met de rest van de
     schermen erachter — meer past er op 390px niet naast. Hoogte blijft 56px (zie .inbox). */
  .topbar { padding: 0 .7rem; }
  .brand { display: none; }
  .avatar { width: 40px; height: 40px; }   /* tap-target */

  /* dvh houdt rekening met de adresbalk; browsers zonder dvh vallen terug op de
     100vh-regel bij .inbox (een ongeldige waarde wordt genegeerd). */
  .inbox { height: calc(100dvh - 56px - 1.2rem); }

  .topfilters { gap: .5rem; margin-bottom: .4rem; }
  /* De zoekbalk krijgt een eigen regel (met het datummenu erin). min-width:0 is nodig omdat
     een geneste flex-container anders op z'n min-content blijft staan en buiten beeld loopt. */
  .topfilters .searchbar { flex: 1 1 100%; min-width: 0; }
  .filters { margin-bottom: .5rem; }
  .filtergroup { flex-wrap: wrap; }     /* statusknoppen passen niet op één regel */

  /* De filterknop zelf. Gevuld (.actief) zodra er een filter aanstaat die van de
     standaardweergave afwijkt — anders zie je ingeklapt niet dát er gefilterd wordt. */
  .filter-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    height: 40px; padding: 0 .7rem;
    border: 1px solid var(--lijn); border-radius: 999px; background: var(--wit);
    color: var(--paars); font-family: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
  }
  .filter-btn svg {
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .filter-btn .sliders { width: 17px; height: 17px; }
  .filter-btn .chevron { width: 14px; height: 14px; transition: transform .15s; }
  .filter-btn.actief { background: var(--paars); border-color: var(--paars); color: var(--wit); }
  .inbox.filters-open .filter-btn .chevron { transform: rotate(180deg); }

  /* Ingeklapt: alleen de filterknop. Toggles, zoekbalk (met het datummenu erin) en de
     statusknoppen zitten er allemaal onder. */
  .inbox:not(.filters-open) .topfilters .toggles,
  .inbox:not(.filters-open) .topfilters .searchbar,
  .inbox:not(.filters-open) .filters { display: none; }

  /* minmax(0, 1fr) i.p.v. 1fr: een grid-track van 1fr laat z'n kind niet krimpen onder
     de min-content-breedte, waardoor het detailpaneel buiten het scherm zou lopen. */
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pane { min-width: 0; }

  /* Eén paneel tegelijk. In het detail zijn de filters niet nodig — weg ermee, dan heeft
     de post + het gesprek het hele scherm. */
  .pane-detail {
    display: none;
    border: none; border-radius: 0; padding: .2rem .1rem;
  }
  .inbox.toont-detail .pane-list,
  .inbox.toont-detail .topfilters,
  .inbox.toont-detail .filters { display: none; }
  .inbox.toont-detail .pane-detail { display: block; }

  .detail-back {
    position: sticky; top: 0; z-index: 5;
    display: inline-flex; align-items: center; gap: .4rem;
    width: 100%; margin-bottom: .5rem; padding: .6rem .2rem;
    border: none; border-bottom: 1px solid var(--lijn); background: var(--bg);
    color: var(--paars); font-family: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer;
  }
  .detail-back svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Acties zonder hover + tap-targets van ~44px. */
  .row-actions { visibility: visible; gap: .4rem; }
  .item { padding: .6rem .5rem .6rem .6rem; gap: .4rem; }
  .ico { width: 40px; height: 40px; }
  .ico svg { width: 19px; height: 19px; }
  .toggle { width: 40px; height: 40px; padding: 7px; }
  .chip { padding: .45rem .8rem; }
  .help { display: none; }                    /* sneltoetsen zijn er niet op touch */

  /* Lettergrootte 16px: kleiner laat iOS bij focus inzoomen. */
  .searchbar input[type="search"], .period-select, .reply-text { font-size: 16px; }
  /* min-width:0 — zonder dat krimpt een input niet onder z'n intrinsieke breedte en
     duwt hij de zoekbalk buiten het scherm. */
  .searchbar input[type="search"] { flex-basis: 140px; min-width: 0; }

  /* Tap-target: op touch moet het vakje ruimer zijn dan de 16px van de desktop. */
  .row-pick { padding: .25rem .3rem .25rem 0; }
  .row-pick input, .bulk-all input { width: 20px; height: 20px; }
  .bulk-btn { padding: .45rem .8rem; }

  .detail-thumb { flex-basis: 110px; width: 110px; height: 110px; }
  .detail-posthead { height: 110px; }             /* gelijk aan de kleinere thumbnail */
  /* De FB-plugin kan niet smaller dan 220px; op een telefoon krijgt hij de volle breedte
     onder de posttekst i.p.v. een kolom ernaast. */
  .detail-posthead:has(.detail-embed) { flex-direction: column; }
  .detail-embed { flex-basis: auto; width: 100%; max-width: 320px; height: 400px; }
  .reply-text { min-height: 4.5rem; }

  /* Emoji zijn op touch de tap-targets: ruimer raster, groter teken. */
  .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); max-height: 11rem; }
  .emoji-knop { font-size: 1.5rem; }
  .emoji-tab { font-size: 1.15rem; padding: .3rem .45rem; }
  .foto-weg { width: 22px; height: 22px; font-size: .95rem; }
}

/* ---------------- Login ---------------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--wit); border: 1px solid var(--lijn); border-top: 4px solid var(--goud);
  border-radius: 10px; padding: 2rem; width: 100%; max-width: 360px;
  box-shadow: 0 6px 24px rgba(66, 42, 102, .08);
}
.login-card h1 { margin: 0; color: var(--paars-donker); font-size: 1.5rem; }
.login-card .sub { margin: .1rem 0 1.25rem; color: var(--goud); font-weight: 600; }
.login-card label { display: block; margin-bottom: .9rem; font-size: .88rem; color: var(--grijs); }
.login-card input {
  width: 100%; margin-top: .3rem; padding: .6rem .7rem;
  border: 1px solid var(--lijn); border-radius: 6px; font-size: 1rem;
}
.login-card input:focus { outline: none; border-color: var(--paars); }
.login-card button {
  width: 100%; margin-top: .5rem; padding: .7rem; background: var(--paars); color: var(--wit);
  border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.login-card button:hover { background: var(--paars-donker); }

/* --- Keuzeknoppen: inloggen bij meerdere bedrijven, en de pagina-keuze bij koppelen ---- */
/* Een volle-breedte knop die als lijstitem leest. De :active-terugkoppeling blijft binnen
   de vorm van de knop; een rechthoekige tap-highlight hoort er niet omheen. */
.keuze {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px;
  padding: .7rem .9rem; margin-bottom: .5rem; font-size: .95rem; font-weight: 600;
  color: var(--paars-donker); -webkit-tap-highlight-color: transparent;
}
.keuze:hover { border-color: var(--paars); background: var(--paars-licht, #f7f5fd); }
.keuze:active { opacity: .72; }
.keuze .zacht { display: block; font-weight: 400; margin-top: .15rem; }

/* --- Gebruikersbeheer ----------------------------------------------------------------- */
.gebruikerslijst { list-style: none; margin: 0 0 .5rem; padding: 0; }
.gebruiker { border-top: 1px solid var(--lijn); padding: .75rem 0; }
.gebruiker:first-child { border-top: 0; }
.gebruiker.inactief { opacity: .6; }
.gebruiker-kop { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.rol-badge {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  background: var(--paars-licht, #f0ecfa); color: var(--paars-donker);
  border-radius: 4px; padding: .1rem .4rem;
}

.gebruiker-acties {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem;
}
.gebruiker-acties form { margin: 0; }
.inline-form { display: flex; gap: .3rem; align-items: center; }
.inline-form input { margin: 0; width: 12rem; }

.knop-klein {
  cursor: pointer; background: var(--wit); color: var(--paars-donker);
  border: 1px solid var(--lijn); border-radius: 6px;
  padding: .3rem .7rem; font-size: .82rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.knop-klein:hover:not(:disabled) { border-color: var(--paars); }
.knop-klein:active:not(:disabled) { opacity: .72; }
.knop-klein:disabled { opacity: .45; cursor: default; }