/* Meldknop (§8.11, 27 september 2026): knop in de kop en de dialoog
   "Melding doorgeven". Eigen bestand naast stijl.css, geladen ná stijl.css,
   met dezelfde tokens (Hero Blauw, Oranje, Exo). */

/* ----- Knop in de blauwe kop -----
   stijl.css duwt de gebruikersknop met margin-left:auto naar rechts. Deze
   knop staat daar direct vóór, dus hij neemt die ruimte over en de
   gebruikersknop sluit er zonder extra ruimte op aan. */
header .melding-knop{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:'Exo',Arial,sans-serif;font-weight:700;font-size:12.5px;line-height:1;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,box-shadow .15s}
header .melding-knop + .user{margin-left:0}
header .melding-knop svg{width:16px;height:16px;flex:none}
header .melding-knop:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
header .melding-knop:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
@media (prefers-reduced-motion:reduce){header .melding-knop{transition:none}}

/* ----- Dialoog ----- */
.dialoog.melding-dialoog{max-width:560px;max-height:92vh;overflow:auto}
.melding-soorten{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 6px}
.melding-soort{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;text-align:left;font-family:'Exo',Arial,sans-serif;background:#fff;color:var(--blauw-black);border:1.5px solid var(--grijs-thin);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.melding-soort svg{grid-row:1 / span 2;width:22px;height:22px;color:var(--blauw)}
.melding-soort-titel{font-weight:800;font-size:14px;color:var(--blauw)}
.melding-soort-uitleg{font-size:12px;color:var(--grijs);line-height:1.35}
.melding-soort:hover{border-color:var(--blauw-soft);box-shadow:0 2px 8px rgba(3,21,63,.08)}
.melding-soort.gekozen{border-color:var(--oranje);background:var(--oranje-bg);box-shadow:0 0 0 1px var(--oranje) inset}
.melding-soort.gekozen svg{color:var(--oranje)}
.melding-soort:focus-visible{outline:none;box-shadow:var(--focusring)}
.melding-dialoog textarea{min-height:120px;line-height:1.45}
.melding-hint{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--grijs);margin-top:4px;line-height:1.4}
.melding-teller{white-space:nowrap;font-variant-numeric:tabular-nums}
.melding-teller.te-kort{color:var(--rood);font-weight:700}

.melding-drop{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--blauw-soft);border-radius:12px;padding:12px 14px;background:var(--blauw-hairline);font-size:12.5px;color:var(--blauw-black);line-height:1.45;transition:border-color .15s,background-color .15s}
.melding-drop svg{width:22px;height:22px;flex:none;color:var(--blauw)}
.melding-drop.sleep{border-color:var(--oranje);background:var(--oranje-bg)}
.melding-drop[hidden]{display:none}
.melding-kies{font-family:inherit;font-size:inherit;font-weight:700;color:var(--oranje-donker);background:none;border:none;padding:0;text-decoration:underline;cursor:pointer}
.melding-kies:focus-visible{outline:none;box-shadow:var(--focusring);border-radius:4px}

.melding-voorbeeld{display:flex;gap:12px;align-items:center;border:1px solid var(--kaartrand);border-radius:12px;padding:10px;background:#fff}
.melding-voorbeeld[hidden]{display:none}
.melding-voorbeeld img{width:132px;max-height:110px;object-fit:contain;border-radius:6px;background:var(--blauw-hairline);flex:none}
.melding-voorbeeld img:not([src]){visibility:hidden}
.melding-voorbeeld-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--grijs);min-width:0}

.melding-privacy{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--blauw-hairline);border:1px solid var(--kaartrand);font-size:12px;color:var(--blauw-black);line-height:1.5}
.melding-privacy p + p{margin-top:6px}
.melding-privacy strong{color:var(--blauw)}

.melding-fout{margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--rood-rand);background:var(--rood-bg);color:var(--rood);font-size:13px;font-weight:600;line-height:1.45}
.melding-fout[hidden]{display:none}

/* ----- Telefoon: alleen het icoon in de kop, kaarten onder elkaar ----- */
@media (max-width:640px){
  header .melding-knop{padding:8px}
  header .melding-knop span{display:none}
  .dialoog.melding-dialoog{max-width:none}
}
/* Aanraakscherm: slepen en plakken zijn daar geen gewoonte; alleen
   "Kies een bestand" (de camera of fotobibliotheek). */
@media (hover:none) and (pointer:coarse){
  .melding-drop-extra{display:none}
  .melding-kies{display:inline-block}
  .melding-kies::first-letter{text-transform:uppercase}
}
@media (max-width:420px){
  .melding-soorten{grid-template-columns:1fr}
  .melding-hint{flex-direction:column;gap:2px}
  .melding-voorbeeld{flex-direction:column;align-items:flex-start}
  .melding-voorbeeld img{width:100%;max-height:180px}
}

/* ----- Na versturen: het meldnummer (punt 15 uit het rapport, UX-28) -----
   Eigen venstertje: het nummer in een alleen-lezen veld met een knop om het
   te kopiëren, en de uitleg dat je het noemt bij een vraag. */
.dialoog.melding-bedankt-dialoog{max-width:460px}
.melding-nummer-rij{display:flex;gap:8px;align-items:stretch}
.melding-nummer-rij input{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.melding-nummer-rij .btn{flex:none;white-space:nowrap}
.melding-bedankt-uitleg{margin-top:10px;font-size:13px;line-height:1.5;color:var(--blauw-black)}
.melding-kopieer-status{min-height:1.4em;margin-top:6px;font-size:12.5px;color:var(--grijs)}
@media (max-width:420px){.melding-nummer-rij{flex-direction:column}}