@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Manrope:wght@400;500;600;700&display=swap');

/* Velvet — donker, sfeervol thema (naar het oorspronkelijke ontwerp) */
:root {
  --bg: oklch(0.17 0.02 30);
  --surface: oklch(0.235 0.02 30);
  --surface-2: oklch(0.28 0.02 30);
  --line: oklch(1 0 0 / 0.09);
  --ink: oklch(0.96 0.012 70);
  --ink-soft: oklch(0.7 0.02 40);
  --ink-faint: oklch(0.5 0.02 40);
  --rose: oklch(0.58 0.16 18);
  --rose-dark: oklch(0.5 0.16 18);
  --rose-ink: oklch(0.98 0.01 30);
  --gold: oklch(0.78 0.12 82);
  --success: oklch(0.74 0.14 145);
  --success-soft: oklch(0.3 0.06 145 / 0.35);
  --danger: oklch(0.68 0.18 22);
  --danger-soft: oklch(0.32 0.09 22 / 0.32);
  --radius: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root { color-scheme: dark; }

html, body {
  /* Vangnet tegen horizontaal scrollen/uitzoomen op mobiel, mocht een
     element ooit net iets te breed uitvallen. */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse 900px 520px at 50% -8%, oklch(0.32 0.07 20 / 0.55), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Manrope', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  /* Ruimte voor de notch/homebar als dit als app op het beginscherm staat */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--rose); }

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

h1, h2 { font-family: 'Italiana', serif; font-weight: 400; color: var(--ink); margin: 0 0 8px; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 20px 0;
}

.brand {
  font-family: 'Italiana', serif;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--ink);
}

.topbar nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; row-gap: 6px; }
.topbar nav a { font-size: 0.9rem; color: var(--ink-faint); padding-bottom: 4px; border-bottom: 2px solid transparent; }
.topbar nav a.active { color: var(--ink); border-bottom-color: var(--rose); font-weight: 600; }
.topbar nav a.muted { color: var(--ink-faint); }

/* ---------- flash messages ---------- */

.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.flash { padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; }
.flash-success { background: var(--success-soft); color: var(--success); }
.flash-error { background: var(--danger-soft); color: var(--danger); }

/* ---------- auth ---------- */

.auth-brand {
  text-align: center;
  font-family: 'Italiana', serif;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 20px 0 2px;
}
.auth-tagline {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.auth-card {
  padding: 12px 4px 32px;
  margin-top: 8px;
}

.auth-card h1 { margin: 0 0 6px; font-size: 1.5rem; text-align: center; }
.auth-card .sub { color: var(--ink-soft); margin: 0 0 20px; font-size: 0.92rem; text-align: center; }

form.stacked-form, .auth-card form { display: flex; flex-direction: column; gap: 14px; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
}

input, textarea, select {
  font-family: inherit;
  font-size: 0.98rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
input:hover, textarea:hover, select:hover { border-color: oklch(1 0 0 / 0.18); }

/* Sommige browsers/besturingssystemen negeren de achtergrond-/tekstkleur
   hierboven voor <select> en vallen terug op hun eigen (vaak lichte)
   systeemstijl, wat niet bij het donkere thema past. Door het native
   uiterlijk helemaal uit te zetten en zelf een pijltje te tekenen, ziet een
   dropdown er overal hetzelfde — en bij het thema passend — uit. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23c9a46a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 38px;
  cursor: pointer;
}
select:hover { border-color: var(--gold); }
/* Zodat lege/"Niet opgegeven" opties niet drukker ogen dan een echte keuze. */
select, select option { color-scheme: dark; }

.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 44px; }
.password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--ink-faint); cursor: pointer;
  padding: 0; border-radius: 8px;
}
.password-toggle:hover { color: var(--ink-soft); }
.password-toggle.active { color: var(--gold); }
.password-toggle .eye-slash { opacity: 0; }
.password-toggle.active .eye-slash { opacity: 1; }

.btn {
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 13px 18px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
}
.btn-primary { background: var(--rose); color: var(--rose-ink); }
.btn-primary:hover { background: var(--rose-dark); }
.btn-block { width: 100%; }

.switch { margin-top: 18px; font-size: 0.88rem; color: var(--ink-faint); text-align: center; }

/* Reset: een kale <fieldset>/<legend> oogt in elke browser anders (meestal
   een grijs randje met het label er dwars overheen) — we bouwen het uiterlijk
   zelf op via .checkbox-group hieronder, dus het eigen systeem-uiterlijk mag
   niet doorschemeren. */
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.checkbox-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: oklch(0.22 0.025 22 / 0.55);
}
.checkbox-group legend {
  padding: 0 2px;
  margin-bottom: 2px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Binnen een .checkbox-group (een lijst met meerdere opties om uit te
   kiezen, bijv. interesses of voorkeuren) tonen we elke optie als een
   los aan-/uit-tikbaar "chipje" naast elkaar (zoals bij veel vergelijkbare
   apps), in plaats van een verticale lijst met aparte selectievakjes --
   fijner om snel doorheen te tikken op een telefoon, en maakt in één
   oogopslag duidelijk wat je al gekozen hebt. Een los, op zichzelf staand
   keuzevakje (bijv. de akkoordvakjes bij registreren, of "Pushmeldingen
   aan" in instellingen) staat NIET in een .checkbox-group en behoudt dus
   gewoon het normale selectievakje-uiterlijk hieronder bij ".checkbox-field"
   zelf -- dit chip-uiterlijk is bewust alleen hierop (".checkbox-group
   .checkbox-field") van toepassing. */
.checkbox-group {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.checkbox-group legend { flex-basis: 100%; }

.checkbox-group .checkbox-field {
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.checkbox-group .checkbox-field:hover { border-color: var(--gold); }
/* :has() leest de staat van het (visueel verborgen) selectievakje erbinnen
   uit om het hele chipje te kunnen "vullen" zodra het aangevinkt is -- zonder
   :has() kan een label niet op de staat van zijn eigen kind-element
   reageren. De rest van de site steunt al op even moderne CSS (oklch()-
   kleuren), dus dit vraagt geen nieuwe ondergrens aan WebView-versie. */
.checkbox-group .checkbox-field:has(input:checked) {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--rose-ink);
  font-weight: 700;
}
.checkbox-group .checkbox-field input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.checkbox-group .checkbox-field:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.checkbox-field {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}
/* Eigen vinkje i.p.v. het systeemstandaard-selectievakje: ziet er zo altijd
   hetzelfde en passend bij het donkere, warme thema uit, ongeacht browser of
   besturingssysteem (sommige vallen anders terug op een fel systeem-blauw).
   Geldt voor een los, op zichzelf staand keuzevakje -- zie hierboven voor het
   chip-uiterlijk binnen een .checkbox-group. */
.checkbox-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checkbox-field input[type="checkbox"]:hover { border-color: var(--gold); }
.checkbox-field input[type="checkbox"]:checked {
  background: var(--rose);
  border-color: var(--rose);
}
.checkbox-field input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--rose-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-field input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.checkbox-field a { color: var(--gold); }

.site-footer {
  text-align: center;
  padding: 24px 20px 32px;
  font-size: 0.8rem;
}
.site-footer a { color: var(--ink-faint); }
.site-footer a:hover { color: var(--ink-soft); }

/* ---------- privacyverklaring ---------- */

.privacy-page { max-width: 640px; margin: 0 auto; }
.privacy-page h1 { margin-bottom: 4px; }
.privacy-page .sub { margin-bottom: 24px; }
.privacy-page h2 { font-size: 1.05rem; margin: 26px 0 8px; color: var(--rose-ink); }
.privacy-page p, .privacy-page li { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.privacy-page ul { padding-left: 20px; margin: 8px 0; }
.privacy-page strong { color: var(--ink); }

/* ---------- profile ---------- */

.profile-edit h1 { margin-bottom: 18px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.photo-tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: oklch(0.1 0.02 30 / 0.65); color: var(--rose-ink);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.photo-tile form { margin: 0; }
.photo-blur-badge {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 8px; border-radius: 100px;
  background: oklch(0.1 0.02 30 / 0.65); color: var(--ink);
  font-size: 0.68rem; font-weight: 700;
}
.photo-blur-toggle {
  position: absolute; bottom: 6px; left: 6px;
  padding: 3px 10px; border-radius: 100px; border: none;
  background: oklch(0.1 0.02 30 / 0.65); color: var(--rose-ink);
  font-size: 0.72rem; font-weight: 700; cursor: pointer;
}

/* Lege foto-vakjes met een "+" (zie profiel_bewerken.html) -- elk vakje is
   zelf een mini-formulier dat direct submit zodra er een bestand gekozen
   wordt, zodat toevoegen geen apart "Opslaan" meer kost. */
.photo-tile-plus {
  display: block; margin: 0; border: 2px dashed var(--line); background: transparent;
}
.photo-plus-label {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; cursor: pointer;
}
.photo-plus { font-size: 2rem; color: var(--ink-faint); line-height: 1; }

/* Kaart bovenaan Instellingen die doorlinkt naar de aparte Profiel-pagina
   (zie profiel_bewerken.html) -- de hele kaart is klikbaar. */
.profiel-link-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-decoration: none; color: inherit;
}
.profiel-link-card-pijl { font-size: 1.4rem; color: var(--gold); flex-shrink: 0; }

.empty-hint { color: var(--ink-faint); font-size: 0.92rem; }
.static-field { font-size: 0.88rem; color: var(--ink-faint); margin: 4px 0; }

.privacy-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

.profile-section {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-section h2 { font-size: 1.05rem; margin-bottom: 0; }
/* "display: flex" hierboven overschrijft anders stilletjes het "hidden"-
   attribuut (bv. op #vermomming-sectie in instellingen.html) -- de browser
   verbergt een element met [hidden] normaal via een user-agent-regel, maar
   een eigen CSS-regel met een expliciete "display" wint daarvan altijd,
   ongeacht specificiteit. Zonder deze regel blijft zo'n sectie dus altijd
   zichtbaar, zelfs als JS 'm bewust verborgen houdt/maakt. */
.profile-section[hidden] { display: none; }

/* JS bepaalt hierboven op wat wel/niet getoond wordt (profieltype,
   "anders"-toelichtingen); standaard verborgen zodat er geen ongewenste
   flits van velden is voordat het script draait. */
.profieltype-panel { display: none; flex-direction: column; gap: 14px; }
.anders-veld { display: none; }

.two-col { display: flex; gap: 10px; }
.two-col label { flex: 1; }

.partner-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.partner-block-header { display: flex; align-items: center; justify-content: space-between; }
.partner-block-header strong { color: var(--ink); font-size: 0.92rem; }
.partner-block-header .btn { padding: 6px 12px; font-size: 0.8rem; }

.discreet-note {
  background: var(--surface-2);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.discreet-note strong { color: var(--ink); }
.privacy-section h2 { font-size: 1.05rem; margin-bottom: 4px; }
.danger-zone { margin-top: 16px; }
.danger-zone summary { cursor: pointer; font-weight: 700; color: var(--danger); }
.danger-zone .stacked-form { margin-top: 12px; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: oklch(0.58 0.2 22); }

/* ---------- discover / swipe ---------- */

.discover-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }

.radius-filter {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.radius-filter-label {
  flex: 1;
  max-width: 220px;
}
.radius-filter select { padding: 10px 12px; width: 100%; }
.radius-hint { width: 100%; margin: 0 0 14px; }

.swipe-card {
  width: 100%;
  background: var(--surface);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -22px oklch(0 0 0 / 0.65);
}

.swipe-photo { position: relative; aspect-ratio: 3 / 4; background: var(--surface-2); overflow: hidden; }
.swipe-photo img.carousel-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: none;
}
.swipe-photo img.carousel-slide.active { display: block; }
.swipe-photo img.blurred-photo {
  /* Lichte uitvergroting voorkomt scherpe, onvertroebelde randjes waar de
     blur-filter de rand van de afbeelding in zou trekken. */
  filter: blur(26px) saturate(1.1);
  transform: scale(1.1);
}
.swipe-photo .blur-hint {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: oklch(0.1 0.02 30 / 0.7); color: var(--ink);
  padding: 6px 16px; border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  z-index: 3;
}
.no-photo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); }

/* ---------- meerdere foto's: carousel op de ontdekken-kaart ---------- */
.carousel-dots {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 6px; z-index: 4;
}
.carousel-dot {
  flex: 1; height: 3px; border-radius: 3px;
  background: oklch(1 0 0 / 0.35);
  cursor: pointer;
}
.carousel-dot.active { background: oklch(1 0 0 / 0.92); }
.carousel-nav {
  position: absolute; top: 0; bottom: 0; width: 50%;
  border: none; background: transparent; cursor: pointer; padding: 0; margin: 0;
  z-index: 2;
}
.carousel-nav-left { left: 0; }
.carousel-nav-right { right: 0; }

.swipe-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(to top, oklch(0.08 0.02 30 / 0.92), oklch(0.08 0.02 30 / 0.45) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.swipe-overlay h2 { font-size: 1.5rem; color: var(--rose-ink); margin: 0 0 4px; }
.swipe-overlay p { margin: 0; color: oklch(0.85 0.01 30); font-size: 0.88rem; }
.swipe-overlay .swipe-location { font-weight: 600; margin-bottom: 4px; }
.swipe-overlay .swipe-tag {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 2px 10px;
  border-radius: 100px;
  background: oklch(1 0 0 / 0.14);
  font-size: 0.78rem;
  font-weight: 600;
}

.swipe-actions { display: flex; gap: 22px; margin-top: 24px; }
.swipe-actions form { margin: 0; }

.round-btn {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.round-btn.pass { color: var(--ink-soft); }
.round-btn.like { background: var(--rose); border: none; color: var(--rose-ink); }
.round-btn:hover.pass { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.round-btn:hover.like { background: var(--rose-dark); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-faint); }
.empty-state h2 { color: var(--ink); }

/* ---------- matches list ---------- */

.match-list { display: flex; flex-direction: column; gap: 4px; }

.match-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px;
  border-radius: 16px;
  color: var(--ink);
}
.match-row:hover { background: var(--surface); }

/* Antwoord van de beheerder in het "Gesprek met de beheerder"-overzicht op
   Instellingen (zie instellingen.html) -- duidelijk onderscheiden van de
   eigen berichten van het lid zelf. */
.match-row.bericht-admin { background: var(--surface); border-left: 3px solid var(--gold); padding-left: 10px; }

.match-avatar { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.match-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--gold); }

/* .match-name-link wordt nu gebruikt voor de naam bovenin een chatgesprek
   (zie chat.html) -- die link je naar het profiel. Vanuit het overzicht
   zelf is de hele rij (.match-row) één link naar de chat. */
.match-name-link { color: inherit; text-decoration: none; }
.match-name-link:hover { color: var(--gold); }

.push-status { margin-top: 8px; min-height: 1.2em; }

/* ---------- app-vermomming (Android-beginscherm) ---------- */

.vermomming-opties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.vermomming-optie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  padding: 10px 6px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}
.vermomming-optie img { width: 48px; height: 48px; border-radius: 12px; }
.vermomming-optie:hover { background: var(--surface-2); }
.vermomming-optie.actief { border-color: var(--gold); color: var(--ink); }

/* Kleine variant van de vertroebel-filter (zie .swipe-photo img.blurred-photo
   hierboven), geschikt voor een klein rond avatarplaatje op "Wie vond mij
   leuk" in plaats van een hele kaart-foto. */
.match-avatar img.blurred-photo { filter: blur(6px) saturate(1.1); transform: scale(1.2); }

.match-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.match-meta strong { font-size: 0.98rem; }
.match-meta .muted { font-size: 0.85rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- chat ---------- */

/* Vast scherm op de chatpagina: alleen de berichtenlijst zelf scrollt, de
   header en het invoervak blijven altijd zichtbaar. Zonder dit schuift de
   hele pagina mee (met 100vh dat op mobiel niet goed meebeweegt met de
   adresbalk/toetsenbord), waardoor het invoervak onderaan het scherm uit
   beeld kan verdwijnen. Dit wordt aangezet via de "chat-vast-scherm" klasse
   die chat.html op <body> zet (zie base.html), in plaats van een
   ":has()"-selector -- sommige Android WebViews ondersteunen :has() niet,
   waardoor deze regels dan stilletjes niet toegepast werden en de hele
   pagina bleef scrollen (zichtbaar als "ik moet zelf naar beneden
   scrollen in een chat"). Een gewone klasse werkt altijd, overal. */
body.chat-vast-scherm {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.chat-vast-scherm .topbar { flex: 0 0 auto; }
body.chat-vast-scherm .flash-stack { flex: 0 0 auto; }
body.chat-vast-scherm .page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}

.chat-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-header { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.chat-header h2 { margin: 0; font-size: 1.05rem; font-family: 'Manrope', sans-serif; font-weight: 700; flex: 1 1 auto; }
.back-link { font-size: 1.3rem; color: var(--ink-soft); }
.back-link:hover { color: var(--gold); }

/* Unmatch-knopje rechts in de chatheader (zie chat.html/unmatch in app.py). */
.chat-header-unmatch { margin: 0; flex: 0 0 auto; }
.chat-header-unmatch-btn {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--ink-faint); display: flex; align-items: center; justify-content: center;
}
.chat-header-unmatch-btn:hover { color: var(--rose-ink); }

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 4px;
}

/* Foutmelding bij een mislukte foto-/video-upload (zie verstuurMedia/
   toonMediaFout in chat-gesprek.js) -- verschijnt vlak boven het gesprek,
   zelfde kleuren als de bestaande .flash-error, maar hier vast gepositioneerd
   (geen onderdeel van .chat-messages) zodat 'm niet verdwijnt bij de
   eerstvolgende poll()/render(). */
.media-fout-melding {
  flex: 0 0 auto;
  margin: 10px 4px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  background: var(--danger-soft);
  color: var(--danger);
}

.msg {
  max-width: 75%;
  padding: 11px 15px;
  border-radius: 18px 18px 18px 4px;
  font-size: 0.94rem;
  /* Zonder dit laat de flexbox-kolom hierboven (.chat-messages) elk bericht
     krimpen zodra de inhoud niet meer past (wat in een scrollend gesprek
     vrijwel altijd het geval is). Een normaal tekstbericht blijft daarbij
     toevallig overeind (de automatische minimumhoogte volgt de tekst), maar
     een foto-bel (.msg-photo) heeft ook "overflow: hidden" staan -- en
     dan telt de automatische minimumhoogte van zo'n flex-item als 0, dus
     die bel werd ingeklemd tot bijna onzichtbaar, los van of de foto al
     geladen was. flex-shrink: 0 zorgt dat elk bericht altijd zijn eigen,
     volledige hoogte behoudt. */
  flex-shrink: 0;
  /* Nodig als ankerpunt voor .msg-reactie (het tapback-bolletje) en
     .reactie-kiezer (de lang-drukken-kiezer), zie chat-gesprek.js. */
  position: relative;
}
.msg.theirs { align-self: flex-start; background: var(--surface); color: var(--ink); border-radius: 18px 18px 18px 4px; }
.msg.mine { align-self: flex-end; background: var(--rose); color: var(--rose-ink); border-radius: 18px 18px 4px 18px; }
.msg-sender {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 2px;
}

.chat-input-row {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
  /* Een paar millimeter extra ruimte onderaan, zodat het invoervak (met z'n
     gele rand bij focus) nooit tegen of achter het toetsenbord aan zit. */
  padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
  border-top: 1px solid var(--line);
}
.chat-input-row input[type="text"] { flex: 1; min-width: 0; border-radius: 100px; }

.photo-btn {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.photo-btn:hover { background: var(--surface-2); color: var(--gold); }

.send-btn { border-radius: 50%; width: 46px; height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--rose-ink); }

.msg-photo { padding: 0; overflow: hidden; background: transparent !important; border: none !important; position: relative; }
.msg-photo img { display: block; max-width: 220px; width: 100%; border-radius: 18px; }
/* Een <video> had hier nooit een eigen regel -- enkel de regel hierboven
   voor <img>. Zonder breedte/hoogte-sturing valt een <video> terug op het
   standaardgedrag van de browser (vaak een vaste 300x150-doos, los van de
   werkelijke afmetingen van het bestand), wat bij een rechtopstaande
   telefoonvideo (bijv. 720x1280 ná ons server-side verkleinen) juist he
   lemaal mis gaat: de video oogt dan uitgerekt/verkeerd geschaald, alsof
   "de resolutie van een mobiel device niet begrepen wordt". max-width +
   width:100% + height:auto laat 'm, net als een foto, meeschalen met de
   bel en zijn eigen beeldverhouding behouden (dus ook staand formaat
   wordt correct, smal en hoog, getoond i.p.v. verkeerd geschaald). De
   max-height is een extra vangnet tegen een uitzonderlijk extreme
   beeldverhouding (bijv. een heel smalle, hoge video) die anders de hele
   pagina zou kunnen vullen; object-fit: contain voorkomt dat zo'n video
   in dat geval alsnog uitgerekt wordt. */
.msg-photo video { display: block; max-width: 220px; width: 100%; height: auto; max-height: 360px; object-fit: contain; background: var(--surface-2); border-radius: 18px; }
/* In het groepsgesprek staat er soms een afzendernaam boven een fotobericht
   (in het 1-op-1-gesprek komt dat nooit voor, daar is de afzender altijd
   duidelijk) -- die heeft, in tegenstelling tot de foto zelf, wel wat ruimte
   nodig omdat .msg-photo hierboven alle padding op nul zet. Genoeg top/links
   padding zodat de tekst niet onder de afgeronde linkerbovenhoek (18px) van
   de bubbel wegvalt. */
.msg-photo .msg-sender { padding: 8px 12px 4px; margin-bottom: 0; }

.muted { color: var(--ink-faint); }

/* ---------- tijdstempels & dag-scheidingen in de chat ---------- */
.msg-time {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  color: oklch(1 0 0 / 0.5);
}
.msg.mine .msg-time { text-align: right; color: oklch(1 0 0 / 0.65); }
.msg.theirs .msg-time { text-align: left; color: var(--ink-faint); }
.msg-photo .msg-time { padding: 3px 4px 0; }

/* "Vinkjes"-status bij je eigen verstuurde berichten: 1 vinkje = verstuurd,
   2 (in het goud) = door iedereen anders in dit gesprek gelezen. Zie
   chat-gesprek.js (buildMsgEl) en _berichten_voor_weergave in app.py. */
.msg-vinkjes { letter-spacing: -3px; margin-left: -1px; }
.msg-vinkjes-gelezen { color: var(--gold); }

.day-separator { text-align: center; margin: 4px 0 2px; }
.day-separator span {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---------- tijdelijke/eenmalige foto's in de chat ---------- */
.reveal-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px dashed var(--line); color: var(--ink-soft);
  padding: 16px; border-radius: 18px; cursor: pointer; font-size: 0.82rem; font-family: inherit;
  width: 220px; max-width: 100%; text-align: left;
}
.reveal-btn:hover { border-color: var(--gold); color: var(--ink); }
.reveal-btn svg { flex-shrink: 0; }
.reveal-expired {
  padding: 16px; border-radius: 18px; background: var(--surface-2); color: var(--ink-faint);
  font-size: 0.82rem; width: 220px; max-width: 100%;
}
.reveal-countdown {
  position: absolute; top: 8px; right: 8px;
  background: oklch(0.1 0.02 30 / 0.75); color: var(--ink);
  padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 700;
}
.reveal-close {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: oklch(0.1 0.02 30 / 0.75); color: var(--ink); border: none; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.reveal-badge {
  position: absolute; bottom: 8px; left: 8px;
  background: oklch(0.1 0.02 30 / 0.7); color: var(--gold);
  padding: 3px 10px; border-radius: 100px; font-size: 0.68rem; font-weight: 700;
}

/* ---------- reactie ("tag") op een bericht van de ander: hart/perzik/
   aubergine, in de stijl van een WhatsApp/iMessage-tapback ---------- */

/* Het bolletje met de gekozen emoji, onderaan de bubbel overlappend -- ligt
   voor "theirs" rechts (richting het midden van het scherm) en voor "mine"
   links, zodat het nooit buiten de rand van het gesprek uitsteekt. */
.msg-reactie {
  position: absolute;
  bottom: -10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.3);
}
.msg.theirs .msg-reactie { right: -6px; }
.msg.mine .msg-reactie { left: -6px; }

/* Kiezer die verschijnt na lang drukken op een bericht van de ander (zie
   koppelLangDrukken/toonReactieKiezer in chat-gesprek.js) -- zweeft boven de
   bubbel waarop gedrukt is. */
.reactie-kiezer {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.35);
  z-index: 5;
}
.reactie-kiezer-optie {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s ease, background 0.1s ease;
}
.reactie-kiezer-optie:hover,
.reactie-kiezer-optie:active { background: var(--surface-2); transform: scale(1.15); }
.reactie-kiezer-optie.actief { background: var(--rose-dark); }

/* ---------- keuzepaneel: hoe een foto versturen ---------- */
.reveal-kiezer {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; margin-bottom: 10px;
}
.reveal-kiezer p { margin: 0 0 10px; font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.reveal-opties { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.reveal-optie {
  font-family: inherit; font-size: 0.82rem; padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); cursor: pointer;
}
.reveal-optie:hover { border-color: var(--gold); }
.reveal-optie.active { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); }
.reveal-kiezer-acties { display: flex; gap: 10px; }
.reveal-kiezer-acties .btn { width: auto; flex: 1; }

/* Voortgangsbalk tijdens het versturen van een foto/video, zie
   verstuurMedia in chat-gesprek.js. */
.media-voortgang { margin: 2px 0 12px; }
.media-voortgang-balk-achtergrond {
  height: 6px;
  border-radius: 100px;
  background: var(--surface-2);
  overflow: hidden;
}
.media-voortgang-balk {
  height: 100%;
  width: 0%;
  background: var(--rose);
  border-radius: 100px;
  /* Bij een bepaald percentage (tijdens de upload zelf) is een soepele
     overgang fijn; bij de onbepaalde "verwerken"-status hieronder zetten we
      'm juist uit, want dan springt de balk in één keer naar 100% en moet
     de knipper-animatie het werk doen in plaats van een vloeiende schuif. */
  transition: width 0.2s ease;
}
.media-voortgang.verwerken .media-voortgang-balk {
  width: 100%;
  transition: none;
  animation: media-voortgang-knipperen 1.1s ease-in-out infinite;
}
@keyframes media-voortgang-knipperen {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.media-voortgang-tekst {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

@media (max-width: 520px) {
  .page { padding-left: 16px; padding-right: 16px; padding-top: 14px; }
  .topbar { padding-left: 16px; padding-right: 16px; }

  /* Op een telefoon is de hoogte vaak het krappe onderdeel, niet de
     breedte: een vaste 3:4-foto plus alles eromheen (zoekstraal, hint,
     knoppen) kan dan net niet passen zonder te scrollen. Op smalle
     schermen laten we de foto meeschalen met de beschikbare hoogte (dvh =
     houdt rekening met de adresbalk van de mobiele browser) in plaats van
     strikt 3:4, en maken we de rest van de ontdekken-pagina compacter. */
  .swipe-photo { aspect-ratio: unset; height: 44dvh; min-height: 220px; }
  .swipe-actions { margin-top: 14px; gap: 18px; }
  .radius-filter { flex-wrap: wrap; margin-bottom: 8px; }
  .radius-filter-label { max-width: none; width: 100%; }
  .radius-hint { margin-bottom: 8px; font-size: 0.85rem; }
}

/* ---------- knoppen & badges ---------- */

.btn-outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.btn-outline:hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--ink-soft);
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* Interesse-/voorkeurtags onder een profielkaart (zie profiel_bekijken.html) --
   gewoon badges in een los blokje, elke groep met een eigen kopje. */
.profiel-tags-sectie { margin-top: 16px; }
.profiel-tags-label {
  margin: 14px 0 6px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
}
.profiel-tags-label:first-child { margin-top: 0; }
.profiel-tags-lijst { display: flex; flex-wrap: wrap; gap: 6px; }
.profiel-tags-lijst .badge { background: var(--surface-2); font-weight: 600; }

/* ---------- nu beschikbaar ---------- */

.event-titel { font-weight: 700; color: var(--ink); margin: 0 0 2px; }

.event-feed { display: flex; flex-direction: column; gap: 14px; }

.event-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-card-eigen { background: transparent; border: none; padding: 0; gap: 10px; }

.event-card-header { display: flex; align-items: center; gap: 12px; }
.event-card-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.event-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Kleinere variant voor in een aanmeldingsrij (zie nu.html) -- daar past een
   avatar ter grootte van de normale event-kaart (48px) niet lekker naast de
   naam en de knoppen. */
.event-card-avatar-klein { width: 32px; height: 32px; font-size: 0.85rem; }

/* Overzicht op de Nu-pagina (zie nu.html): klikbare rijen met links een
   kleine miniatuur (eigen plek, of de geuploade/profielfoto van een ander,
   zie _event_blok_foto_url in app.py) en rechts de uitleg -- wat er gevraagd
   wordt en wanneer -- in plaats van een grote foto bovenaan een losse tegel,
   zodat meer plekken tegelijk overzichtelijk onder elkaar passen. */
.nu-blokken-lijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nu-rij {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  min-height: 76px;
  text-decoration: none;
  color: inherit;
}
.nu-rij-eigen { border-color: var(--gold); }
.nu-rij-foto {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.nu-rij-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nu-rij-foto .avatar-fallback { width: 100%; height: 100%; border-radius: 0; font-size: 1.3rem; }
.nu-rij-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.nu-rij-titelregel { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nu-rij-titelregel strong { font-size: 0.92rem; line-height: 1.25; }
.nu-rij-bericht {
  margin: 0; font-size: 0.82rem; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nu-rij-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; color: var(--ink-faint); }
.nu-rij-meta span:not(:last-child)::after { content: "·"; margin-left: 6px; }
.nu-rij-info .badge { align-self: flex-start; margin-top: 2px; }

/* Optionele extra foto bij een "Nu"-plek (van de plek zelf, of van jezelf -
   zie EVENT_FOTO_DIR / nu_event_foto in app.py), los van de gewone
   profielfoto's. */
.nu-detail-foto {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 4px;
}

.event-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 9px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
}

.event-card-actie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.event-card-actie form { margin: 0; }

.event-aanmeldingen { display: flex; flex-direction: column; gap: 10px; }
.event-aanmelding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.event-aanmelding-naam { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.92rem; }
.event-aanmelding-acties { display: flex; gap: 8px; }
.event-aanmelding-acties form { margin: 0; }

/* ---------- verificatie ---------- */

.verify-card { text-align: center; }
.verify-icon {
  width: 84px; height: 84px; line-height: 84px;
  border-radius: 50%;
  margin: 0 auto 20px;
  font-size: 2.1rem;
  background: oklch(0.58 0.16 18 / 0.16);
}
.verify-icon-pending { background: oklch(0.78 0.12 82 / 0.16); }
.verify-icon-rejected { background: var(--danger-soft); }
.verify-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 16px; }
.verify-card .stacked-form { text-align: left; margin-top: 10px; }

/* Live cameraopname voor de selfie (zie selfie-opname.js) -- vervangt het
   gewone bestandsveld zodat verificatie altijd een live opname is. */
.selfie-widget { display: flex; flex-direction: column; gap: 10px; }
.selfie-live {
  aspect-ratio: 3 / 4;
  max-height: 340px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1.5px dashed var(--gold);
}
.selfie-live video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); /* spiegelen voelt natuurlijker aan bij een selfie */
}
.selfie-preview-img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 14px;
  border: 1.5px solid var(--line);
}
.selfie-fout {
  font-size: 0.85rem;
  color: var(--danger);
  background: var(--danger-soft);
  padding: 10px 12px;
  border-radius: 10px;
  margin: 0;
}
/* De globale "label { display: flex }"-regel hierboven wint normaal van de
   user-agent-regel achter [hidden] (zie ook .profile-section[hidden]
   verderop) -- zonder dit zou de "Maak een selfie"-knop (een <label>, voor
   de app-weergave) altijd zichtbaar blijven, ook als hij hidden is. */
.selfie-native-label[hidden] { display: none; }
.selfie-native-label { justify-content: center; align-items: center; text-align: center; }

/* ---------- admin ---------- */

.admin-subhead { margin-top: 32px; }

.verify-queue { display: flex; flex-direction: column; gap: 18px; }

.verify-review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.verify-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.verify-compare-tile { display: flex; flex-direction: column; gap: 6px; }
.verify-compare-label { font-size: 0.75rem; color: var(--ink-faint); font-weight: 600; }
.verify-compare-tile img, .verify-compare-tile .no-photo {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--surface-2);
}
.verify-compare-tile .no-photo { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--ink-faint); }

.verify-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; font-size: 0.9rem; }

.verify-actions { display: flex; gap: 10px; }
.verify-actions form { flex: 1; margin: 0; }
.verify-actions .btn { width: 100%; }

/* ---------- admin: verzonden foto's ---------- */

.chat-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.chat-photo-tile {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.chat-photo-tile img, .chat-photo-tile video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-2); }
.chat-photo-caption {
  display: block;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--ink-faint);
  padding: 6px 8px;
}

/* ---------- admin: lid-detail (matches + chatgeschiedenis) ---------- */

.admin-chat-log { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.admin-chat-line { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---------- groter scherm (laptop/desktop) ---------- */
/* Tot hier was alles mobile-first opgebouwd, met één vaste 480px-kolom voor
   elk scherm. Op een laptop oogde dat als een smal, kaal strookje content in
   een verder lege, zwarte pagina. Vanaf hier krijgen de "drukke" pagina's
   (instellingen, matches, chat, privacy, admin) wat meer ademruimte; de
   aanvink-chips (zie .checkbox-group hierboven) blijven op elke breedte
   gewoon een los doorlopende, wrappende rij -- die vullen een breder scherm
   vanzelf met meer chips per rij, een aparte kolomindeling is daar niet voor
   nodig. De ontdekken-kaart blijft bewust in Tinder-achtige kaartverhouding
   in plaats van beeldvullend breed. */
@media (min-width: 860px) {
  .page { max-width: 680px; padding-top: 36px; }
  .topbar { max-width: 680px; padding-top: 28px; }

  .discover-wrap { max-width: 420px; margin-left: auto; margin-right: auto; }

  .auth-card { max-width: 420px; margin: 0 auto; }

  .checkbox-group {
    column-gap: 20px;
    row-gap: 10px;
  }

  .profile-section { padding-top: 22px; }

  .match-row { padding: 14px 16px; border-radius: 18px; }

  .btn-primary:hover, .round-btn:hover, .photo-blur-toggle:hover {
    filter: brightness(1.05);
  }
}
.admin-chat-line:last-child { border-bottom: none; }

/* ======================================================================
   v59: blokkeren/melden, typindicatie, laatst actief, bericht verwijderen,
   zoeken in gesprek, profiel pauzeren
   ====================================================================== */
.chat-header-titel { flex: 1 1 auto; min-width: 0; }
.chat-header-titel h2 { flex: none; }
.chat-status { display: block; font-size: 0.75rem; color: var(--ink-faint); min-height: 1em; line-height: 1.2; margin-top: 2px; }
.chat-status:empty { display: none; }

.chat-header-knop {
  background: none; border: none; padding: 4px; cursor: pointer; flex: 0 0 auto;
  color: var(--ink-faint); display: flex; align-items: center; justify-content: center;
  list-style: none;
}
.chat-header-knop::-webkit-details-marker { display: none; }
.chat-header-knop:hover { color: var(--gold); }

.chat-menu { position: relative; flex: 0 0 auto; }
.chat-menu-lijst {
  position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 170px; z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 6px 18px oklch(0 0 0 / 0.4);
  display: flex; flex-direction: column; gap: 2px;
}
.chat-menu-lijst a, .chat-menu-lijst button {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--ink); padding: 10px 12px; border-radius: 8px; text-decoration: none;
}
.chat-menu-lijst a:hover, .chat-menu-lijst button:hover { background: var(--surface-2); }
.chat-menu-lijst .gevaar { color: var(--danger); }
.chat-menu-lijst form { margin: 0; }

.chat-zoekbalk { flex: 0 0 auto; padding: 8px 0 4px; }
.chat-zoekbalk input { width: 100%; margin: 0; }
.chat-messages.zoeken-actief .msg-reactie { display: none; }
.zoek-verborgen { display: none !important; }

/* "... is aan het typen": visibility i.p.v. display, zodat de lijst niet verspringt. */
.chat-typt {
  flex: 0 0 auto; font-size: 0.78rem; color: var(--ink-faint); font-style: italic;
  padding: 2px 6px; height: 1.4em; visibility: hidden;
}
.chat-typt.aan { visibility: visible; }

.msg-verwijderd { background: transparent !important; border: 1px dashed var(--line); box-shadow: none; }
.msg-verwijderd-tekst { font-style: italic; color: var(--ink-faint); font-size: 0.85rem; }

.reactie-kiezer { flex-wrap: wrap; border-radius: 22px; max-width: 250px; }
.msg.mine .reactie-kiezer { left: auto; right: 0; }
.reactie-kiezer-actie {
  flex: 1 1 100%; display: block; text-align: center; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--ink-soft); padding: 8px 10px; border-radius: 14px;
  border-top: 1px solid var(--line); text-decoration: none;
}
.reactie-kiezer-actie:hover { background: var(--surface-2); }
.reactie-kiezer-actie.gevaar { color: var(--danger); font-weight: 600; }
.msg.mine .reactie-kiezer .reactie-kiezer-actie:first-child { border-top: none; }

.veiligheid-links { display: flex; justify-content: center; gap: 18px; margin: 14px 0 4px; }
.veiligheid-links a, .veiligheid-links button {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.8rem;
  color: var(--ink-faint); text-decoration: underline;
}
.veiligheid-links form { margin: 0; }
.veiligheid-links a:hover, .veiligheid-links button:hover { color: var(--danger); }

.melden-kaart { max-width: 460px; margin-left: auto; margin-right: auto; }
.melden-redenen { border: none; padding: 0; margin: 0 0 14px; }
.melden-redenen legend { font-weight: 600; margin-bottom: 8px; }
.melden-bericht { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.melden-bericht p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; }

.btn-small { padding: 6px 12px; font-size: 0.82rem; }
.geblokkeerd-lijst { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.geblokkeerd-lijst li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.geblokkeerd-lijst form { margin: 0; }

.match-zoek { width: 100%; margin: 0 0 14px; }

.meldingen-lijst { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.melding-kaart { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.melding-kaart.afgehandeld { opacity: 0.6; }
.melding-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Voorkomt dat de chatpagina breder wordt dan het scherm (invoerrij met
   foto-, video- en verstuurknop duwde de pagina op smalle telefoons net
   buiten beeld). */
.chat-wrap, .chat-header { min-width: 0; max-width: 100%; }
/* .page heeft margin: 0 auto, waardoor 'ie in de kolom-flex van de chatpagina
   niet meer uitrekt maar zo breed wordt als z'n inhoud -- expliciet 100%. */
body.chat-vast-scherm .page { width: 100%; }

/* v60: lichaamsmaten in profiel */
.maten-rij [hidden] { display: none !important; }
.profiel-maten { align-self: stretch; width: 100%; }
.profiel-maten-regel { margin: 4px 0; font-size: 0.92rem; color: var(--ink-soft); }
.profiel-maten-regel strong { color: var(--ink); font-weight: 600; }

/* v61: no-go's en discretie */
.badge-gedeeld { outline: 1px solid var(--gold); color: var(--gold); }
.aanmelding-nogos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.82rem; margin: 6px 0; }
.discretie-optie { align-items: flex-start; }
.discretie-optie .muted { font-size: 0.82rem; }


/* ---------- v63: ongelezen-bolletjes (nav + gesprekslijst) ---------- */
.teller-bolletje {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 100px;
  background: var(--danger, #d94452); color: #fff;
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.teller-bolletje[hidden] { display: none; }
.match-ongelezen { margin-left: auto; flex-shrink: 0; min-width: 24px; height: 24px; font-size: 0.82rem; }
.match-row.heeft-ongelezen .match-meta strong { color: var(--ink); }
.match-row.heeft-ongelezen .match-meta .muted { color: var(--ink); font-weight: 600; }


/* ---------- v64: Instellingen als menu met aparte schermen ---------- */
.instellingen-menu { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.instellingen-kaart {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink); text-decoration: none;
}
.instellingen-kaart[hidden] { display: none; }
.instellingen-kaart:hover { border-color: var(--gold); }
.instellingen-icoon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--surface-2); color: var(--gold);
}
.instellingen-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.instellingen-tekst strong { font-size: 1rem; }
.instellingen-tekst .muted { font-size: 0.85rem; }
.instellingen-status { font-size: 0.8rem; color: var(--gold); margin-top: 2px; }
.instellingen-sectie h1 { margin-top: 4px; }

/* v65: groepsgesprek-kop (zelfde vaste kop als de gewone chat); lange ledenlijst op één regel afkappen */
.chat-header-leden { margin: 2px 0 0; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v70: eerste-bericht-melding, scene-badges, vergelijking */
.chat-opener-melding {
  margin: 0; padding: 10px 14px; font-size: 0.88rem;
  background: var(--surface-2); color: var(--ink-soft);
  border-top: 1px solid var(--line); text-align: center;
}
.chat-input-geblokkeerd { opacity: 0.55; }
.chat-input-geblokkeerd .plus-btn, .chat-input-geblokkeerd .mic-btn { pointer-events: none; opacity: 0.5; }
.scene-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.badge-scene { background: oklch(0.58 0.16 18 / 0.22); color: var(--ink); border: 1px solid oklch(0.58 0.16 18 / 0.6); }
.overeenkomsten-lijst { margin: 6px 0 0; padding: 0; list-style: none; }
.overeenkomsten-lijst li { margin: 0 0 8px; }
.overeenkomsten-lijst .overeenkomsten-label { display: block; font-size: 0.78rem; opacity: 0.75; margin-bottom: 3px; }
.spanning-lijst { margin: 8px 0 0; padding-left: 18px; font-size: 0.88rem; }

/* v72: stel met twee logins */
.partner-code {
  font-size: 1.9rem; letter-spacing: 0.18em; font-weight: 700; margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gold);
}
.stel-voorstel-balk {
  display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius);
  background: oklch(0.58 0.16 18 / 0.2); border: 1px solid oklch(0.58 0.16 18 / 0.6);
  color: var(--ink); font-size: 0.9rem; text-align: center;
}
.stel-voorstel-rij { flex-wrap: wrap; }
.stel-voorstel-acties { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.stel-voorstel-acties form { margin: 0; }

/* v73: evenwicht-velden onder elkaar, alle invulvelden even hoog en breed */
.evenwicht-blok {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin: 14px 0; display: flex; flex-direction: column; gap: 12px;
}
.evenwicht-blok .evenwicht-titel {
  margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.evenwicht-blok .static-field { margin: 0; }
.evenwicht-blok label { display: block; margin: 0; }
.evenwicht-blok input[type="number"] { width: 100%; box-sizing: border-box; }

/* ---------- v75: foto's schermvullend + grijs vlak voor eenmalig/tijdelijk ---------- */
.msg-photo img.foto-klikbaar { cursor: zoom-in; -webkit-touch-callout: none; }
.reveal-btn, .reveal-expired { min-height: 120px; align-items: center; justify-content: center; text-align: center; }
.reveal-btn { background: var(--surface-2); border: 1px solid var(--line); flex-direction: column; gap: 10px; }
.reveal-btn svg { width: 28px; height: 28px; opacity: 0.7; }
.reveal-expired { display: flex; background: var(--surface-2); }
body.media-viewer-open { overflow: hidden; }
.media-viewer {
  position: fixed; inset: 0; z-index: 9999; background: #000;
  display: flex; flex-direction: column;
}
.media-viewer[hidden] { display: none; }
.media-viewer-balk {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px; flex-shrink: 0;
}
.media-viewer-terug {
  background: oklch(1 0 0 / 0.14); color: #fff; border: none; cursor: pointer;
  padding: 10px 16px; border-radius: 100px; font-size: 0.95rem; font-family: inherit; font-weight: 600;
}
.media-viewer-teller {
  background: oklch(1 0 0 / 0.14); color: #fff; padding: 6px 14px; border-radius: 100px;
  font-size: 0.9rem; font-weight: 700;
}
.media-viewer-voortgang { height: 3px; background: oklch(1 0 0 / 0.15); flex-shrink: 0; }
.media-viewer-voortgang-balk { height: 100%; width: 100%; background: var(--gold); }
.media-viewer-vlak {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom);
}
.media-viewer-vlak img, .media-viewer-vlak video {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* ---------- v76: chat-uitbreidingen ---------- */
.chat-input-row[hidden] { display: none; }

/* Fotoraster: foto's uit één verzending samen in één blok */
.foto-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 240px; max-width: 78%;
  flex-shrink: 0; border-radius: 18px; overflow: hidden; position: relative;
}
.foto-raster.mine { align-self: flex-end; }
.foto-raster.theirs { align-self: flex-start; }
.foto-raster .msg { max-width: none; width: auto; margin: 0; border-radius: 0 !important; }
.foto-raster .msg img { width: 100%; max-width: none; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.foto-raster.oneven .msg:last-child { grid-column: 1 / -1; }
.foto-raster.oneven .msg:last-child img { aspect-ratio: 2 / 1; }
.foto-raster .msg:not(:last-child) .msg-time { display: none; }
.foto-raster .msg:not(:first-child) .msg-sender { display: none; }
.foto-raster .msg-time { position: absolute; right: 6px; bottom: 4px; padding: 2px 8px; border-radius: 100px;
  background: oklch(0.1 0.02 30 / 0.55); color: #fff !important; font-size: 0.62rem; margin: 0; }

/* Spraakbericht */
.msg-voice audio { display: block; width: 230px; max-width: 100%; height: 40px; }
.msg-voice .reveal-btn { background: transparent; border: 1px dashed currentColor; min-height: 0; padding: 12px; flex-direction: row; width: 230px; }
.msg-voice .reveal-expired { background: transparent; min-height: 0; width: auto; padding: 4px 0; }
.msg-voice .reveal-badge { position: static; display: inline-block; margin-top: 6px; background: oklch(0.1 0.02 30 / 0.35); }

/* Citaat (reactie op een bericht) */
.msg-citaat {
  display: flex; flex-direction: column; gap: 1px; margin: 0 0 6px; padding: 5px 9px;
  border-left: 3px solid var(--gold); border-radius: 6px; background: oklch(0 0 0 / 0.18);
  font-size: 0.78rem; cursor: pointer; max-width: 100%; overflow: hidden;
}
.msg-citaat strong { font-size: 0.74rem; color: var(--gold); font-weight: 700; }
.msg-citaat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.msg-citaat-weg { font-style: italic; opacity: 0.7; cursor: default; }
.msg-photo .msg-citaat { margin: 6px 6px 4px; background: var(--surface-2); color: var(--ink); }
.msg-flits { animation: msgFlits 1.5s ease-out; }
@keyframes msgFlits { 0%, 40% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Balk "Reageren op ..." boven het invoerveld */
.antwoord-balk {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 6px 4px 0; padding: 8px 12px;
  background: var(--surface-2); border-left: 3px solid var(--gold); border-radius: 10px; font-size: 0.82rem;
}
.antwoord-balk[hidden] { display: none; }
.antwoord-balk-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.antwoord-balk-tekst strong { color: var(--gold); font-size: 0.76rem; }
.antwoord-balk-tekst span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.antwoord-balk-sluit, .vastgezet-balk-sluit { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 1rem; padding: 4px 6px; }

/* Vastgezet bericht bovenaan het gesprek */
.vastgezet-balk {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; padding: 4px 6px 4px 12px;
  background: var(--surface-2); border-radius: 10px; font-size: 0.82rem;
}
.vastgezet-balk[hidden] { display: none; }
.vastgezet-balk-tekst {
  flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--ink-soft);
  cursor: pointer; font-family: inherit; font-size: inherit; padding: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Opnamebalk voor een spraakbericht */
.spraak-balk {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px; flex-wrap: wrap;
}
.spraak-balk[hidden] { display: none; }
.spraak-stip { width: 12px; height: 12px; border-radius: 50%; background: #e0414a; animation: spraakKnip 1s infinite; }
@keyframes spraakKnip { 50% { opacity: 0.25; } }
.spraak-tijd { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 42px; }
.spraak-eenmalig { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--ink-soft); margin-right: auto; }
.photo-btn.opnemen { color: #e0414a; }
.chat-gedempt { font-size: 0.8rem; opacity: 0.7; margin-left: 4px; }

/* Viewer: pijltjes + audio */
.media-viewer-pijl {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: none; cursor: pointer;
  background: oklch(1 0 0 / 0.14); color: #fff; font-size: 2rem; line-height: 1; border-radius: 12px;
}
.media-viewer-pijl[hidden] { display: none; }
.media-viewer-vorige { left: 8px; }
.media-viewer-volgende { right: 8px; }
.media-viewer-audio { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; padding: 24px; }
.media-viewer-audio-icoon { font-size: 3.5rem; }
.media-viewer-audio audio { width: min(320px, 90vw); }

/* Screenshots/bewaren zoveel mogelijk tegengaan (in de Android-app is dit
   echt geblokkeerd via FLAG_SECURE; in een gewone browser kan een webpagina
   dat niet afdwingen). */
img, video { -webkit-user-drag: none; -webkit-touch-callout: none; }
img { -webkit-user-select: none; user-select: none; }
@media print { body { display: none !important; } }


/* ---------- v77: nieuwe chat-invoerbalk (plusmenu + grote pil + mic/verstuur) ---------- */
.chat-input-row { position: relative; gap: 8px; padding-top: 10px; }
.chat-input-row input[type="text"] {
  min-height: 54px; border-radius: 28px; padding: 0 20px; font-size: 1rem;
  background: var(--surface); border: 1.5px solid oklch(1 0 0 / 0.12);
}
.chat-input-row input[type="text"]:focus { border-color: var(--gold); }
.plus-btn, .mic-btn, .send-btn {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-family: inherit;
  transition: transform 0.12s ease, background 0.12s ease;
}
.plus-btn[hidden], .mic-btn[hidden], .send-btn[hidden] { display: none; }
.plus-btn { background: var(--surface-2); color: var(--gold); }
.plus-btn.open { transform: rotate(45deg); background: var(--surface); }
.mic-btn { background: var(--surface-2); color: var(--gold); }
.mic-btn.opnemen { color: #e0414a; }
.send-btn { background: var(--rose); color: var(--rose-ink); box-shadow: 0 3px 12px oklch(0.58 0.16 18 / 0.4); }
.send-btn:hover { background: var(--rose-dark); }
.plus-btn:hover, .mic-btn:hover { background: var(--surface); }
.bijlage-menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 6px;
  box-shadow: 0 8px 28px oklch(0 0 0 / 0.5);
}
.bijlage-menu[hidden] { display: none; }
.bijlage-item {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: none; background: none;
  color: var(--ink); font: inherit; font-size: 0.95rem; text-align: left; border-radius: 12px; cursor: pointer;
}
.bijlage-item:hover, .bijlage-item:active { background: var(--surface-2); }
.bijlage-item svg { color: var(--gold); flex-shrink: 0; }
.chat-input-row input[type="text"]:focus { box-shadow: 0 0 0 3px oklch(0.78 0.12 82 / 0.18); outline: none; }
.bijlage-item { flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; }
.bijlage-item span { flex: 1; }