/* DM Automaat (public/dm.js). Zelfde vormen als de rest van de suite (ONTWERP.md): groepen zoals in Instellingen,
   één hoofdknop per scherm, schakelaars zoals op de iPhone. */
#dmBlok, #dmBlok ~ .sectie { max-width: 720px; }
#dmBlok .sectie { margin-bottom: 28px; }
#dmBlok .voetnoot { max-width: 62ch; }
/* een melding na koppelen of bewaren */
.dm-melding { margin-bottom: 20px; padding: 14px 16px; border-radius: 16px; background: var(--groep); color: var(--label);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--oranje) 70%, transparent); font-size: 0.9375rem; line-height: 1.333; overflow-wrap: anywhere; }
.dm-melding.ok { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--groen) 60%, transparent); }
.dm-melding .knop.tekst { min-height: 34px; padding: 0 8px; font-size: 0.9375rem; }
/* een account: logo, en daarnaast de tekst en de knop samen in één vak dat mag omlopen (app-bouwer les 147) */
.rij.dm-account { --inspring: 62px; align-items: center; }
.dm-logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; }
.dm-logo svg { width: 20px; height: 20px; }
.dm-logo.instagram { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); }
.dm-logo.facebook { background: #0866ff; }
.dm-logo.facebook svg { fill: #fff; stroke: none; }
.dm-binnen { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dm-binnen .rij-tekst { flex: 1 1 14rem; }
.dm-binnen .rij-tekst span { overflow-wrap: anywhere; }
.dm-binnen .rij-tekst strong strong, .dm-binnen .rij-tekst span strong { font-weight: 600; color: var(--label); }
/* een codewoord: de hele rij opent hem, de schakelaar zet hem aan of uit */
.rij.dm-cw { padding-block: 6px; gap: 10px; }
.dm-cw-open { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.dm-cw-open:hover .rij-tekst strong { color: var(--accent); }
.dm-cw-open .rij-tekst strong { overflow-wrap: anywhere; }
.dm-let { color: var(--label) !important; } /* een melding bij een codewoord: in de gewone tekstkleur, nooit alleen in grijs (ONTWERP 3.8) */
.pil.dm-pil.let { background: color-mix(in srgb, var(--oranje) 18%, transparent); color: var(--label); }
.dm-leeg { margin-bottom: 0; }
.dm-nieuw { margin: 14px 0 0; }
#dmFormVak:not(:empty) { margin-top: 16px; }
/* het formulier */
.dm-form { display: grid; gap: 14px; }
.blok.dm-form > * + * { margin-top: 0; }
.dm-form h3 { margin-bottom: 0; }
.dm-form textarea { min-height: 96px; padding: 11px 14px; resize: vertical; line-height: 1.38; }
.dm-form label textarea { margin-top: 6px; display: block; }
.dm-form .voetnoot.dm-onder { margin: -8px 4px 0; }
.dm-form .voetnoot.dm-onder:empty { display: none; }
.dm-form .cm-veld .voetnoot.dm-onder { margin: 0 4px; }
.dm-form .cm-veld .voetnoot.dm-onder:empty { display: none; }
.dm-form .fout:empty { min-height: 0; }
.dm-form .tabs { margin: 0; flex-wrap: wrap; }
.dm-eerste { display: grid; gap: 14px; }
.dm-eerste[hidden] { display: none; }
#dmKnopVeld[hidden], #dmVolgVeld[hidden], #dmNietVeld[hidden], .dm-let-op[hidden] { display: none !important; }
/* Volgen: drie keuzes onder elkaar met een vinkje, zoals een keuzelijst in Instellingen */
.dm-keuzes { display: grid; border-radius: 14px; background: var(--vulling-3); padding: 0 14px; }
.dm-keuze { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; border: 0; background: none; color: var(--label);
  font: inherit; text-align: left; cursor: pointer; }
.dm-keuze + .dm-keuze { border-top: 0.5px solid var(--scheiding); }
.dm-keuze .rij-tekst strong { font-weight: 500; }
.dm-vink { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.dm-keuze[aria-checked="true"] .dm-vink { visibility: visible; }
.dm-keuze:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
/* Zet hun naam erin en de teller op één regel onder de DM */
.dm-onder-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: -6px; }
.dm-onder-rij .voetnoot { margin: 0 4px; }
/* bij Alleen volgers: de waarschuwing in gewone tekst op een zacht oranje vlak, nooit alleen kleur (ONTWERP 3.7) */
.dm-form .cm-veld .voetnoot.dm-let-op { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; color: var(--label);
  background: color-mix(in srgb, var(--oranje) 16%, transparent); }
/* het voorbeeld: het gesprek zoals in Instagram, met de berichten van de klant links en de tik rechts (niet .uit: dat is in
   style.css half doorzichtig) */
.dm-chat { display: flex; flex-direction: column; gap: 6px; max-width: 26rem; padding: 14px; border-radius: 18px; background: var(--vlak); }
.dm-bel { max-width: 85%; padding: 9px 13px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.333; overflow-wrap: anywhere; }
.dm-bel p { margin: 0; white-space: pre-wrap; }
.dm-bel.in { align-self: flex-start; background: var(--groep); color: var(--label); box-shadow: inset 0 0 0 0.5px var(--scheiding); }
.dm-bel.tik { align-self: flex-end; background: var(--accent); color: #fff; }
.dm-bel-knop { display: block; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--vulling-3); text-align: center; font-weight: 600; }
.dm-bel-leeg { color: var(--label-3); }
.dm-chat-regel { margin: 4px 0 2px; text-align: center; font-size: 0.8125rem; line-height: 1.385; color: var(--label-2); overflow-wrap: anywhere; }
.dm-chat-regel strong { color: var(--label); font-weight: 600; }
.dm-schakels { display: grid; border-radius: 14px; background: var(--vulling-3); padding: 0 14px; }
.dm-schakels[hidden], #dmAntwoorden[hidden], #dmPosts[hidden] { display: none !important; }
.dm-schakelrij { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; }
.dm-schakelrij + .dm-schakelrij, .dm-schakels > label + .dm-schakelrij, #dmPosts + .dm-schakelrij { border-top: 0.5px solid var(--scheiding); }
.dm-schakelrij .rij-tekst strong { font-weight: 500; }
#dmAntwoorden { padding-bottom: 12px; }
#dmAntwoorden textarea { background: var(--groep); }
#dmPosts { padding-bottom: 12px; }
/* de eigen posts om uit te kiezen */
.dm-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 8px; }
.dm-post { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px; border: 0; border-radius: 12px; background: var(--groep); color: var(--label);
  font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--scheiding); }
.dm-post.gekozen { box-shadow: inset 0 0 0 2px var(--accent); }
.dm-post img, .dm-post-leeg { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--vulling-3); }
.dm-post .rij-tekst strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9375rem; line-height: 1.333; font-weight: 500; overflow-wrap: anywhere; }
.dm-post .rij-tekst span { font-size: 0.8125rem; line-height: 1.385; }
#dmBlok .knop[aria-busy="true"]:disabled { opacity: 1; cursor: progress; background: var(--vulling-2); color: var(--label); }
@media (max-width: 599px) {
  .dm-binnen .knop:not(.klein) { width: 100%; }
}
/* de DM-log: kop met Ververs, het oordeel bovenaan, en per DM wie, wat, van welk account en of het lukte */
.dm-log-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dm-log-kop .knop.tekst { margin-right: -10px; }
.rij.dm-oordeel, .rij.dm-logregel { align-items: flex-start; gap: 12px; padding-block: 12px; }
.rij.dm-logregel { --inspring: 56px; }
.rij.dm-logregel .dm-logo { margin-top: 2px; }
.dm-logregel .rij-tekst span, .dm-oordeel .rij-tekst span { overflow-wrap: anywhere; }
.dm-logregel .rij-tekst strong { overflow-wrap: anywhere; }
/* naam en stand op één regel, zodat de regels eronder de hele breedte hebben (ook op de telefoon) */
.rij-tekst .dm-log-boven { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: var(--label); font-size: inherit; line-height: inherit; }
.rij-tekst .dm-log-boven .pil { flex: none; margin-top: -1px; font-size: 0.8125rem; line-height: 1.385; }
.pil.dm-status.ok { background: color-mix(in srgb, var(--groen) 18%, transparent); color: var(--label); }
.pil.dm-status.mis { background: color-mix(in srgb, var(--rood) 16%, transparent); color: var(--label); }
.dm-oordeel .pil { margin-top: 1px; }
.dm-log-filter { margin: 14px 0 10px; }
#dmLog > .groep + .groep { margin-top: 0; }
.dm-log-boven strong { min-width: 0; }