/* ==========================================================================
   PROEF-VARIANTEN — ALLEEN OP test01 (21-10-2026, opdracht van de manager)

   Wat dit bestand doet: drie manieren om het scherm rustiger te maken, naast
   elkaar, zodat de eigenaar ze zelf kan bekijken en kiezen. Het staat LOS van de
   bestaande opmaak: alles hangt aan één eigenschap op het html-element
   (data-proef = "nu" | "A" | "B" | "C"). Zet die op "nu" en het scherm is precies
   zoals het was — dat is de terugweg. Zonder dit bestand (en zonder de twee regels
   in index.html) verandert er niets.

   A — INKLAPBARE ZIJBALK. De gesprekkenlijst is dezelfde lijst (zoeken,
       vastgezet, etiket, nieuw gesprek), maar staat standaard DICHT en gaat open
       met de knop linksboven. Het gesprek krijgt de volle breedte. De stand wordt
       onthouden. Op een telefoon is het de lade die over het gesprek schuift (dat
       deed hij al) en die zichzelf sluit als je een gesprek kiest.

   B — RUSTIGE LIJST, NIETS VERSTOPT. De lijst blijft altijd staan. Alleen de
       gespreksnaam is te zien; de tijd, het etiket, de pin en het kruisje komen
       pas als je met de muis op een regel staat (op een telefoon bij aanraken).
       Per dag een dunne scheiding in plaats van kopjes met randen.

   COMBI (21-10-2026, zijn keuze) — de rustige lijst van B, PLUS inklapbaar: links
       met de knop met de drie streepjes (zoals bij A) en rechts met een eigen knop
       voor het blok "Team en taken". BEIDE STAAN STANDAARD OPEN: bij binnenkomst is
       niets verstopt. Ingeklapt is de kolom echt weg (geen restje, geen tabstop) en
       gaat de gewonnen breedte naar het gesprek. Uitgeklapt ziet alles er precies zo
       uit als nu. De stand wordt per persoon en per apparaat onthouden.

   De keuzeschakelaar zelf staat in varianten.js (die maakt de knoppen); hier
   staat alleen zijn vorm.
   ========================================================================== */

/* ------------------------------------------------------- de keuzeschakelaar */

.pv-keuze {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 2px 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.pv-keuze__kop {
  padding: 0 4px 0 5px;
  font-size: max(9.6px, .6rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pv-keuze button {
  min-width: 27px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: max(10px, .72rem);
  line-height: 1;
  cursor: pointer;
}

.pv-keuze button:hover { background: var(--surface-2); color: var(--ink); }

.pv-keuze button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
  font-weight: 600;
}

.pv-keuze button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Het plusje voor een nieuw gesprek in de balk: alleen bij A en Combi, want alleen
   daar kan de lijst dicht staan en dan is dat knopje anders onbereikbaar. */
#pv-nieuw { display: none; }
html[data-proef="A"] #pv-nieuw { display: grid; }
html[data-proef="C"] #pv-nieuw { display: grid; }

/* De knop voor het blok rechts: alleen bij Combi, en alleen op een breed scherm —
   op een telefoon staat het blok er niet (het is daar een venster met zijn eigen knop). */
#pv-rechts { display: none; }

/* Op een telefoon is de balk al vol: daar zet varianten.js de schakelaar niet in de
   balk maar onderin de gesprekkenlijst (die gaat met dezelfde knop open), en vervalt
   het plusje — daar opent dezelfde knop de lade, en daarin staat "Nieuw gesprek" al. */
.side__foot .pv-keuze { margin: 0 0 8px; width: fit-content; }

@media (max-width: 900px) {
  html[data-proef="A"] #pv-nieuw { display: none; }
  html[data-proef="C"] #pv-nieuw { display: none; }
}

/* ==========================================================================
   INKLAPPEN — de zijbalk (A en Combi) en het blok rechts (Combi)
   ========================================================================== */

@media (min-width: 901px) {
  /* De knop linksboven bestaat al (op een telefoon opent hij de lade); bij A en Combi
     is hij ook op een breed scherm te zien en klapt hij de lijst in en uit. */
  html[data-proef="A"] #menu { display: flex; }
  html[data-proef="C"] #menu { display: flex; }

  html[data-proef="C"] #pv-rechts { display: grid; }

  /* De indeling heeft op een breed scherm DRIE kolommen: gesprekken | gesprek |
     team en taken (272px 1fr 320px — zie nevaro.css bij "HET BLOK RECHTS"). In plaats
     van die maten vast te schrijven, geeft deze regel elke kolom een eigen maat met
     een naam (--pv-links / --pv-rechts). Ingeklapt zet de regel eronder die maat op
     nul; de andere kolommen blijven staan, anders valt het blok onder het gesprek. */
  html[data-proef="A"] .app,
  html[data-proef="C"] .app {
    grid-template-columns: var(--pv-links, 272px) minmax(0, 1fr) var(--pv-rechts, 320px);
    transition: grid-template-columns .18s ease;
  }

  html[data-proef="A"] .app.app--dicht,
  html[data-proef="C"] .app.app--dicht { --pv-links: 0px; }

  html[data-proef="C"] .app.app--rechts-dicht { --pv-rechts: 0px; }

  /* Ingeklapt is de kolom ECHT weg: geen breedte, geen rand, geen opvulling, en met
     visibility: hidden dus ook niet met de Tab-toets te bereiken en niet voor een
     schermlezer. */
  html[data-proef="A"] .app--dicht .side,
  html[data-proef="C"] .app--dicht .side {
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
    overflow: hidden;
    visibility: hidden;
  }

  html[data-proef="C"] .app--rechts-dicht .blok {
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* De twee knoppen zien eruit als een stand: ingedrukt (accent) = dat deel staat open. */
  html[data-proef="A"] #menu[aria-expanded="true"],
  html[data-proef="C"] #menu[aria-expanded="true"],
  html[data-proef="C"] #pv-rechts[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--accent);
  }
}

/* ==========================================================================
   DE RUSTIGE LIJST (B en Combi; breed en op de telefoon hetzelfde)
   ========================================================================== */

/* De tijd staat er wel, maar onzichtbaar: zo verspringt er niets als hij bij het
   aanwijzen tevoorschijn komt (geen seconde extra werk, geen sprongen). */
html[data-proef="B"] .chatitem__time,
html[data-proef="C"] .chatitem__time {
  opacity: 0;
  transition: opacity .12s;
}

html[data-proef="B"] .chatitem:hover .chatitem__time,
html[data-proef="B"] .chatitem:focus-within .chatitem__time,
html[data-proef="B"] .chatitem:focus .chatitem__time,
html[data-proef="C"] .chatitem:hover .chatitem__time,
html[data-proef="C"] .chatitem:focus-within .chatitem__time,
html[data-proef="C"] .chatitem:focus .chatitem__time { opacity: 1; }

/* Het etiket (bij een gesprek uit een ander kanaal) net als de rest: pas bij
   aanwijzen. */
html[data-proef="B"] .chatitem__badge,
html[data-proef="C"] .chatitem__badge { opacity: 0; transition: opacity .12s; }
html[data-proef="B"] .chatitem:hover .chatitem__badge,
html[data-proef="B"] .chatitem:focus-within .chatitem__badge,
html[data-proef="C"] .chatitem:hover .chatitem__badge,
html[data-proef="C"] .chatitem:focus-within .chatitem__badge { opacity: 1; }

/* Rustiger regels: geen kaartjes meer. De huisstijl "professioneel" zet om elke regel
   een witte kaart met een rand en een schaduw — 41 van die kaartjes onder elkaar is
   precies wat onrustig leest. Hier gaan ze weg: alleen de naam, en per dag één dunne
   scheiding. De regel van het gesprek dat open staat krijgt een smalle streep links
   in plaats van een gevuld blok. */
html[data-proef="B"] .chatitem,
html[data-proef="C"] .chatitem {
  padding: 8px 8px 8px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

html[data-proef="B"] .side__list,
html[data-proef="C"] .side__list { gap: 0; }

html[data-proef="B"] .chatitem:hover,
html[data-proef="C"] .chatitem:hover { background: var(--surface-2); }

html[data-proef="B"] .chatitem--active,
html[data-proef="C"] .chatitem--active {
  background: transparent;
  box-shadow: inset 2px 0 0 var(--accent);
}

html[data-proef="B"] .chatitem--active:hover,
html[data-proef="C"] .chatitem--active:hover { background: var(--surface-2); }

/* De kopjes boven de lijst: alleen "Vastgepind" blijft, en die wordt stil.
   "Gesprekken" valt weg — daar komen de dagen voor in de plaats. */
html[data-proef="B"] .side__group,
html[data-proef="C"] .side__group {
  padding: 10px 7px 2px;
  font-size: max(9.6px, .66rem);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink-faint);
}

/* De dag-scheiding: een regel met een dun streepje erachter. */
html[data-proef="B"] .pv-dagsep,
html[data-proef="C"] .pv-dagsep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 0 7px;
  font-size: max(9.6px, .66rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-faint);
  user-select: none;
}

html[data-proef="B"] .pv-dagsep::after,
html[data-proef="C"] .pv-dagsep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* De pin en het kruisje: pas bij aanwijzen (op een telefoon altijd, zie onderaan).
   Dit is dezelfde regel als die er al stond, maar dan gegarandeerd voor de rustige
   lijst — de bestaande regel hangt aan een mediavraag die niet elke browser even
   eerlijk beantwoordt. De regel van het vaste gesprek (is-vast) en een gezette pin
   (is-on) blijven altijd zichtbaar: daar mag niets aan veranderen. */
html[data-proef="B"] .chatitem__del,
html[data-proef="C"] .chatitem__del { opacity: 0; }
html[data-proef="B"] .chatitem:hover .chatitem__del,
html[data-proef="B"] .chatitem:focus-within .chatitem__del,
html[data-proef="C"] .chatitem:hover .chatitem__del,
html[data-proef="C"] .chatitem:focus-within .chatitem__del { opacity: 1; }
html[data-proef="B"] .chatitem__del.is-vast,
html[data-proef="C"] .chatitem__del.is-vast { opacity: 1; }

html[data-proef="B"] .chatitem__pin,
html[data-proef="C"] .chatitem__pin { opacity: 0; }
html[data-proef="B"] .chatitem:hover .chatitem__pin,
html[data-proef="B"] .chatitem:focus-within .chatitem__pin,
html[data-proef="C"] .chatitem:hover .chatitem__pin,
html[data-proef="C"] .chatitem:focus-within .chatitem__pin { opacity: 1; }
html[data-proef="B"] .chatitem__pin.is-on,
html[data-proef="B"] .chatitem__pin.is-vast,
html[data-proef="C"] .chatitem__pin.is-on,
html[data-proef="C"] .chatitem__pin.is-vast { opacity: 1; }

/* Op een telefoon is er geen zweven: daar is alles gewoon te zien (net als de pin
   en het kruisje nu al). varianten.js zet daarvoor de klasse "pv-geen-muis" op het
   html-element — dat is betrouwbaarder dan een mediavraag, want een browser zonder
   muis (een schermafdruk-programma bijvoorbeeld) meldt zich niet altijd hetzelfde. */
html[data-proef="B"].pv-geen-muis .chatitem__time,
html[data-proef="B"].pv-geen-muis .chatitem__badge,
html[data-proef="B"].pv-geen-muis .chatitem__pin,
html[data-proef="B"].pv-geen-muis .chatitem__del,
html[data-proef="C"].pv-geen-muis .chatitem__time,
html[data-proef="C"].pv-geen-muis .chatitem__badge,
html[data-proef="C"].pv-geen-muis .chatitem__pin,
html[data-proef="C"].pv-geen-muis .chatitem__del { opacity: 1; }

/* ==========================================================================
   TOETSENBORD — een regel in de lijst is met de Tab-toets te bereiken
   ========================================================================== */

html[data-proef="A"] .chatitem:focus-visible,
html[data-proef="B"] .chatitem:focus-visible,
html[data-proef="C"] .chatitem:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}