/*
 * MEET-THEMA-20260828 — room.php en index.php verwijzen hier al sinds de bouw naar
 * (4 keer), maar het bestand heeft NOOIT bestaan: elke kamerlading gaf een 404 en tien
 * klassen stonden zonder enige opmaak. Gemeten 28-08 in kamer DNCMV5SP.
 *
 * Bewust klein gehouden: hier staat ALLEEN wat vandaag helemaal geen stijl had. Alles
 * wat room.php al inline zet blijft ongemoeid — inline wint toch van een stylesheet, en
 * zo kan dit bestand niets omver duwen wat het al deed. Kleuren komen uit de bestaande
 * tokens (--bg, --text, --brand-primary, --sidebar-border), met een nuchtere terugval.
 */

.meet-v2 {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.meet-room {
  min-height: 100dvh;
  background: var(--bg, #0b1220);
  color: var(--text, #e6edf7);
}

/* Sprekerslijst — gevuld door pollSpeakers() */
.speaker-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--sidebar-border, #24324a);
  border-radius: 12px;
  background: var(--input-bg, rgba(255, 255, 255, .04));
  font-size: 14px;
  line-height: 1.45;
}
.speaker-log > div { overflow-wrap: anywhere; }
.speaker-names {
  font-size: 12px;
  opacity: .72;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sidebar-border, #24324a);
  margin-bottom: 2px;
}

/* Regel in de taken/tickets-lijst */
.audit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--sidebar-border, #24324a);
}
.audit-row:last-child { border-bottom: 0; }

/* Balk boven de chat */
.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 10px;
}

/* Filterknoppen bij documenten */
.doc-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 0 10px;
}
.doc-filter {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--sidebar-border, #24324a);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  opacity: .75;
}
.doc-filter:hover { opacity: 1; }
.doc-filter.on {
  opacity: 1;
  border-color: var(--brand-primary, #00b87a);
  background: color-mix(in srgb, var(--brand-primary, #00b87a) 16%, transparent);
}

/* Kaart in het media-paneel */
.media-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.media-card video,
.media-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #000;
}

/* Melding als scherm delen nog een venster nodig heeft */
.share-need-display {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--sidebar-border, #24324a);
  background: var(--ai-bubble, rgba(255, 255, 255, .05));
}

/* Sleepgreep van de zijbalk */
.sidebar-grab {
  width: 36px;
  height: 4px;
  margin: 8px auto 4px;
  border-radius: 999px;
  background: var(--sidebar-border, #24324a);
  cursor: grab;
  flex: none;
}
.sidebar-grab:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .doc-filter { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * MEET-CONTRAST-20260828 — leesbaarheid. Toegevoegd ONDER het blok hierboven,
 * dat van een andere agent is (MEET-THEMA-20260828, beschermde reparatie).
 * Dat blok geeft opmaak aan klassen die er geen hadden; dit blok lost een
 * ander probleem op en raakt die selectors niet.
 *
 * Gemeten in een echte browser (Playwright, gast-weergave), mét menging van
 * doorschijnende lagen: 35 teksten onder contrast 3.0, waarvan 32 onder 2.0.
 * De titel "Mensen uitnodigen" en de vergadercode stonden op ratio 1.00 —
 * exact dezelfde kleur als hun achtergrond. De dock-knoppen onderin stonden
 * op 1.02: donkere iconen op een donkere balk, dus praktisch onzichtbaar.
 *
 * Oorzaak: de componenten zijn DONKER ontworpen (dock rgba(30,41,59,.92),
 * kaarten rgba(15,23,42,.55), uitnodigen-kaart #1e293b) maar staan in een
 * LICHTE schil (witte zijbalk, wit topbalkje, --text #1f2937). Een
 * doorschijnend donker vlak op wit wordt middengrijs (#7b7f8a) — daar valt
 * zowel donkere als lichte tekst weg.
 *
 * Aanpak: wat ín de lichte schil staat wordt licht (dan klopt de bestaande
 * donkere tekst); wat bewust donker is (de dock over het videovlak, het
 * laadscherm, de schermvullende tools) krijgt lichte tekst.
 *
 * 🪤 Meet doorschijnende vlakken door ze te MENGEN met wat eronder ligt. Een
 *    rgba(...,.55) als ondoorzichtig behandelen geeft het verkeerde oordeel:
 *    daardoor "repareerde" ik eerst plekken die niets mankeerden.
 * ───────────────────────────────────────────────────────────────────────── */

/* 1. Donker bedoeld → lichte tekst */
.dock-btn, .dock-btn i          { color: #e8edf5; }
.dock-menu, .dock-menu button   { color: #e8edf5; }
#meet-loading, #meet-loading *  { color: #cbd5e1; }
#tools-stage .tb-btn,
#tools-stage .tb-btn i          { color: #e8edf5; }
#tools-stage .tb-btn-end,
#tools-stage .tb-btn-end i      { color: #fca5a5; }

/* 2. Staat in de WITTE zijbalk → licht vlak, zodat de donkere tekst klopt */
.sidebar-tabs                   { background: rgba(15,23,42,.04); }
.tool-item, .doc-item           { background: rgba(15,23,42,.05); }
.ai-transcript-box              { background: rgba(15,23,42,.05); }
.ai-msg-user                    { background: rgba(15,23,42,.05); }
.chat-msg-body                  { background: rgba(15,23,42,.05); }
.chat-file-btn                  { background: rgba(15,23,42,.06); }
.participant-item               { background: rgba(15,23,42,.04); }
.tb-participants,
.tb-btn-sidebar                 { background: rgba(15,23,42,.06); }
.tb-btn-sidebar:hover           { background: rgba(15,23,42,.10); }

/* 3. De uitnodigen-kaart was donker mét donkere tekst (ratio 1.00) */
.sheet-card                     { background: #ffffff; border-top: 1px solid var(--sidebar-border); }
.invite-grid button             { background: rgba(15,23,42,.05); }

/* 4. Bleke donkere-thema-accenten op een licht vlak */
.notes-save-btn                        { color: #047857; }
.doc-actions button, .doc-actions label{ color: #3730a3; }
.tb-btn-wa                             { color: #047857; }
.tb-btn-ai                             { color: #3730a3; }
.tb-logo-text span                     { color: #047857; }
.tab-btn.active                        { color: #047857; }

/* 5. Alle zes panelen bereikbaar.
 * Op smalle schermen waren Leden, Docs en Tools verborgen (.tab-desk) én hun
 * dock-knop ontbrak of was verborgen — onbereikbaar op een telefoon. Zes tabs
 * à ~65px passen ruim binnen 390px. Op de desktop is de balk 319px terwijl 6
 * tabs à min-width 56px er 336px nodig hadden, waardoor TOOLS erbuiten viel. */
@media (max-width: 899px) {
    .tab-desk { display: flex !important; }
    .tab-btn  { min-width: 0; padding-left: 2px; padding-right: 2px; }
}
@media (min-width: 900px) {
    .tab-btn  { min-width: 0; padding-left: 3px; padding-right: 3px; }
}

/* ── 6. Kiezen wat groot in beeld staat + volledig scherm op mobiel ──────
 * Hoort bij MEET-CONTRAST-20260828.
 * Een klik op een tegel wisselt wie/wat groot staat (zie SCHERMTEGEL-EN-KIEZEN-20260828 in
 * meet-rtc.js), maar de tegels zagen er niet klikbaar uit: cursor stond op `auto`.
 * En #btn-fs zat in .dock-extra, dat op ≤899px volledig verborgen wordt — op een telefoon
 * was volledig scherm dus onbereikbaar, terwijl body.meet-fs daar wél nette opmaak heeft
 * (topbalk en zijbalk weg, layout op 100dvh). */
#video-grid .video-tile        { cursor: pointer; }
#video-grid .video-tile.is-stage { cursor: zoom-in; }

@media (max-width: 899px) {
    #btn-fs.dock-extra { display: flex !important; }
}