/* De hoofdpagina: je gesprekken op de computer. Drie vlakken naast elkaar, zoals een
   mailprogramma: links de gids (in te delen, alles, de mappen), in het midden de lijst die
   daar gekozen is, rechts het gesprek met samenvatting en tekst naast elkaar. Is het scherm
   daar te smal voor, dan delen gids en lijst één kolom (onderaan dit bestand).
   Tokens, knoppen, dialogen, de speler en het podium staan in stijl.css. Maten op een raster
   van 4; bediening 28 px met de muis; selectie in grijs, het accent alleen voor actie. */

.schil { display: grid; grid-template-columns: 232px 320px minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--figuur); }

/* ---- Gids ---- */
.gids { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 12px 8px 8px; border-right: 1px solid var(--lijn); background: var(--grond); }
.gids__top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 4px; min-height: 28px; padding-left: 8px; }
.gids__merk { flex: none; }
.gids__opneem { display: flex; flex: none; align-items: center; gap: 4px; margin: 0 4px; }
.gids .opneemknop { flex: 1; width: auto; }
.gids__bestand { position: relative; display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--zacht); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.gids__bestand::after { content: ""; position: absolute; inset: -8px 0; }
.gids__bestand:hover { background: var(--zweef); color: var(--tekst); }
.gids__bestand:has(input:disabled) { opacity: 0.4; pointer-events: none; }
.gids__rol { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; }
.gids__groep { display: flex; flex: none; flex-direction: column; gap: 1px; }
.gids__kop { padding: 0 8px 4px; color: var(--zacht); font: 600 var(--t12) var(--letter); }
.gids-rij, .gids-nieuw { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--hoogte); padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--tekst); font: 400 var(--t13) var(--letter); text-align: left; }
.gids-rij svg, .gids-nieuw svg { flex: none; color: var(--zacht); }
.gids-rij:hover, .gids-nieuw:hover { background: var(--zweef); }
.gids-rij--actief, .gids-rij--actief:hover { background: var(--keuze); font-weight: 500; }
.gids-rij--actief svg { color: var(--tekst); }
.gids-rij__naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gids-rij__tal { flex: none; color: var(--zacht); font: 400 var(--t12) var(--letter); }
.gids-rij--werk .gids-rij__tal { color: var(--tekst); font-weight: 600; }
.gids-rij--map svg { color: var(--mapkleur); }
.gids-rij--map svg path { fill: var(--mapvlak); }
.gids-rij.sleepdoel { background: var(--keuze); box-shadow: inset 0 0 0 1.5px var(--tekst); }
.gids-nieuw { color: var(--zacht); }
.gids-nieuw:hover { color: var(--tekst); }
.gids-drive { flex: none; height: var(--hoogte); margin: 0 4px; padding: 0 8px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--figuur); color: var(--tekst); font: 500 var(--t12) var(--letter); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gids-drive:hover { background: var(--zweef); }
/* Van wie dit is: naam en school, met uitloggen ernaast. */
.gids__voet { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 0 0 8px; border-top: 1px solid var(--lijn); }
.gids__wie { display: flex; flex-direction: column; min-width: 0; }
.gids__naam, .gids__school { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gids__naam { font: 500 var(--t13) var(--letter); }
.gids__school { color: var(--zacht); font: 400 var(--t12) var(--letter); }
.gids__uit { flex: none; }

/* ---- De lijst ---- */
.stapel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--lijn); background: var(--figuur); }
.stapel__kop { display: flex; flex: none; align-items: center; gap: 8px; height: 52px; padding: 4px 12px 0 16px; }
.stapel__titel { min-width: 0; overflow: hidden; font: 600 var(--t17) var(--letter); letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.stapel__tal { flex: 1; color: var(--zacht); }
.stapel__pen { width: 28px; height: 28px; }
.stapel__zoek { position: relative; flex: none; margin: 0 12px 4px; color: var(--zacht); }
.stapel__zoek svg { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); pointer-events: none; }
.stapel__veld { width: 100%; height: var(--hoogte); padding: 0 8px 0 28px; border: 0; border-radius: 8px; background: rgb(0 0 0 / 5%); color: var(--tekst); }
.stapel__veld::placeholder { color: var(--zacht); }
.stapel__veld:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--figuur); }
.stapel__lijst { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 16px; }
.stapel__leeg { padding: 24px 8px; color: var(--zacht); }
.lijst-dag { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 8px 4px; background: var(--figuur); color: var(--zacht); font: 600 var(--t12) var(--letter); }

.gesprek-houder { position: relative; }
.gesprek-houder--sleept { opacity: 0.5; }
.gesprek-rij { display: block; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--tekst); text-align: left; }
.gesprek-rij:hover { background: var(--zweef); }
.gesprek-rij--actief, .gesprek-rij--actief:hover { background: var(--keuze); }
.gesprek-rij__titel { display: block; overflow: hidden; font: 500 var(--t13) var(--letter); text-overflow: ellipsis; white-space: nowrap; }
.gesprek-rij__feiten { display: flex; align-items: center; gap: 6px; margin-top: 2px; overflow: hidden; color: var(--zacht); font: 400 var(--t12) var(--letter); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gesprek-rij__map { display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin-left: 2px; overflow: hidden; text-overflow: ellipsis; }
.gesprek-rij__feiten--fout { color: var(--gevaar); }
.gesprek-rij__puls { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: samen-puls 1200ms ease-in-out infinite; }
.gesprek-houder__meer { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--zacht); opacity: 0; transition: opacity 120ms ease; }
.gesprek-houder__meer:hover { background: var(--keuze); color: var(--tekst); }
.gesprek-houder:hover .gesprek-houder__meer, .gesprek-houder__meer:focus-visible { opacity: 1; }
.gesprek-houder:hover .gesprek-rij__titel { padding-right: 24px; }
.gesprek-houder--bewerk .gesprek-houder__meer { display: none; }
.gesprek-houder--bewerk .gesprek-rij__titel { visibility: hidden; }
.titel-veld--lijst { top: 6px; left: 4px; width: calc(100% - 8px); height: 22px; font: 500 var(--t13) var(--letter); }
@media (hover: none) {
  .gesprek-houder__meer { opacity: 1; }
  .gesprek-rij__titel { padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { .gesprek-rij__puls { animation: none; } }

/* ---- Het gesprek ---- */
.werk { container: werk / inline-size; }
.gkop { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 24px 8px; }
.gkop__titel { flex: 1; min-width: 0; }
.gkop__titel h1 { font: 600 var(--t22) var(--letter); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.gkop__regel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }
.gkop__knoppen { display: flex; flex: none; gap: 4px; margin-right: -6px; }
.map-keuze { height: 24px; margin: 0; padding: 0 8px; border: 1px solid var(--lijn); background: var(--figuur); }
.map-keuze:hover { background: var(--grond); }
.map-keuze svg { color: var(--zacht); }
.map-keuze--map svg { color: var(--mapkleur); }
.map-keuze--map svg path { fill: var(--mapvlak); }
.map-keuze--leeg, .map-keuze--leeg:hover { border-color: rgb(0 0 0 / 22%); background: var(--figuur); color: var(--tekst); }
.map-keuze--leeg:hover { background: var(--grond); }
.werk .speler { min-height: 56px; padding: 4px 24px 8px; }
.werk .speler__geen { padding: 0 24px 8px; }

.leesvlak { flex: 1; min-height: 0; overflow-y: auto; background: var(--figuur); }
.paneel { min-width: 0; }
.paneel + .paneel { border-top: 1px solid var(--lijn); }
.paneel__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 24px 0; }
.paneel__kop h2 { color: var(--zacht); font: 600 var(--t12) var(--letter); }
.paneel__kop .icoonknop { width: 28px; height: 28px; }
.paneel__rol { padding: 8px 24px 40px; }
.paneel--samen .verslag { max-width: 68ch; animation: podium-in 200ms ease-out; }
.paneel--samen .verslag > * { max-width: none; }
.paneel--samen .verslag p, .paneel--samen .verslag li { font: 400 15px/22px var(--letter); }
.paneel--samen .verslag h2, .paneel--samen .verslag h3 { margin: 20px 0 4px; color: var(--tekst); font: 600 var(--t15) var(--letter); }
.paneel--samen .verslag > :first-child { margin-top: 0; }
.paneel--gesprek .gesprek { max-width: 76ch; }
.paneel--gesprek .gesprek .beurt__tekst { font: 400 15px/22px var(--letter); }

/* ---- De samenvatting bewerken: de kop wordt de werkbalk, de tekst het veld ---- */
.paneel__kop { gap: 4px; }
.paneel__kop .samen__links { flex: 1; }
.schrijf-balk, .schrijf-knoppen { display: none; flex: none; align-items: center; gap: 2px; }
.schrijf-knoppen { gap: 4px; }
.schrijf-balk .icoonknop { border-radius: 6px; }
.schrijf-balk .icoonknop[aria-pressed="true"] { background: var(--keuze); color: var(--tekst); }
.paneel--schrijft .schrijf-balk, .paneel--schrijft .schrijf-knoppen { display: flex; }
.paneel--schrijft :is(.versies, #bewerkSamenvatting, #kopieerSamenvatting, #samenStatus, #samenEigen) { display: none !important; }
.paneel--schrijft .paneel__kop { position: sticky; top: 0; z-index: 2; padding-bottom: 8px; border-bottom: 1px solid var(--lijn); background: var(--figuur); }
.paneel--schrijft .paneel__rol { padding-top: 16px; }
.schrijf { min-height: 160px; outline: 0; caret-color: var(--accent); cursor: text; }
.schrijf > * { max-width: none; }
.schrijf > :first-child { margin-top: 0; }
.schrijf .tijdlink { user-select: none; }
.schrijf-fout { color: var(--gevaar); }

/* Breed genoeg: samenvatting en gesprek naast elkaar, elk met een eigen rol. Een tijd in de
   samenvatting aanklikken laat dan rechts het gesprek zien zonder dat de samenvatting wegschuift. */
@container werk (min-width: 920px) {
  .leesvlak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-top: 1px solid var(--lijn); }
  .paneel { display: flex; flex-direction: column; min-height: 0; }
  .paneel + .paneel { border-top: 0; border-left: 1px solid var(--lijn); }
  .paneel__rol { flex: 1; min-height: 0; overflow-y: auto; }
  .werk .speler { border-bottom: 0; }
}

/* ---- Minder breed: gids en lijst delen één kolom ----
   Met drie kolommen blijft er onder 1472 px te weinig over om samenvatting en gesprek naast
   elkaar te zetten (920 px). Daarom delen gids en lijst dan één kolom: je ziet de lijst, de pijl
   in de kop gaat naar de mappen, en een map kiezen brengt je terug bij de lijst
   (`schil--lijst`, gezet in mijn.js). Logo, opnemen en wie er is ingelogd blijven staan. */
.stapel__terug { display: none; width: 28px; height: 28px; margin-left: -4px; }
@media (max-width: 1471px) {
  .schil { grid-template-columns: 288px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  /* De delen van de gids doen zelf mee in het raster, zodat de lijst op de plek van de mappen kan staan. */
  .schil::before { content: ""; grid-column: 1; grid-row: 1 / -1; border-right: 1px solid var(--lijn); background: var(--grond); }
  .gids { display: contents; }
  .gids__top, .gids__opneem, .gids__rol, .gids-drive, .gids__voet, .stapel { grid-column: 1; }
  .gids__top { grid-row: 1; padding: 12px 8px 0 16px; }
  .gids__opneem { grid-row: 2; margin: 0; padding: 12px; }
  .gids__rol, .stapel { grid-row: 3; }
  .gids__rol { padding: 0 8px; }
  .gids-drive { grid-row: 4; margin: 8px 12px 0; }
  .gids__voet { grid-row: 5; margin: 8px 8px 0; padding-bottom: 8px; }
  .werk { grid-column: 2; grid-row: 1 / -1; background: var(--figuur); }
  .schil--lijst .gids__rol, .schil:not(.schil--lijst) .stapel { display: none; }
  .stapel { border-right: 0; background: transparent; }
  .stapel__kop { height: 36px; padding: 0 8px 0 12px; }
  .stapel__terug { display: grid; }
  .lijst-dag { background: var(--grond); }
  .stapel__veld:focus { background: var(--figuur); }
}

/* ---- Smal scherm: alles onder elkaar, met dezelfde wissel tussen mappen en lijst ---- */
@media (max-width: 860px) {
  .schil { display: flex; flex-direction: column; height: auto; min-height: 100dvh; background: var(--grond); }
  .schil::before { display: none; }
  .gids__top { order: 1; }
  .gids__opneem { order: 2; }
  .gids__rol, .stapel { order: 3; }
  .werk { order: 4; flex: 1; border-top: 1px solid var(--lijn); }
  .gids-drive { order: 5; margin-bottom: 8px; }
  .gids__voet { order: 6; }
  .gids__rol { flex: none; max-height: 40vh; padding-bottom: 12px; }
  .stapel__lijst { flex: none; max-height: 40vh; }
  .gkop { padding: 12px 16px 4px; }
  .werk .speler { padding: 8px 16px; }
  .leesvlak { overflow: visible; }
  .paneel__kop { padding: 8px 16px 0; }
  .paneel__rol { padding: 8px 16px 32px; }
}

@media print {
  .gids, .stapel, .gkop__knoppen, .paneel__kop .icoonknop, .schrijf-knoppen, #samenEigen, #schrijfFout { display: none !important; }
  .schil { display: block; height: auto; }
  .leesvlak { display: block; overflow: visible; border: 0; }
  .paneel { display: block; }
  .paneel + .paneel { border: 0; }
  .paneel__kop, .paneel__rol { padding-right: 0; padding-left: 0; overflow: visible; }
  .gkop { padding: 0 0 8px; }
}