/* De zijbalk van het werkscherm in de vorm van het beheer-zijmenu (19-10-2026).

   Op verzoek gelijkgetrokken met _admin_nav.html / 93-admin-shell.css: één
   vlak in --beheer-nav-bg met een lijn rechts, over de volle hoogte onder de
   titelbalk; regels in plaats van pillen; kopjes ("Vandaag") in gewone grijze
   letters; het actieve gesprek als grijs vlak; onderin wie er is ingelogd.
   Eerder lag de zijbalk los op de pagina met een koperen kaart, twee pillen en
   koppen in kapitalen erin, en voelden werkscherm en beheer als twee apps.

   Dit blad staat ná de oude regels (50-remaining-ui.css, 92-calm-palette.css)
   en overschrijft ze; de breedte van de kolom (--conv-w) blijft gelijk, zodat
   het antwoord geen ruimte verliest. */

/* ── Het vlak ─────────────────────────────────────────────────────────── */
.conv-sidebar {
    gap: 4px;
    background: var(--beheer-nav-bg);
}

@media (min-width: 821px) {
    /* Het vlak loopt tot aan de titelbalk en de linkerrand, zoals het
       beheermenu, terwijl de pagina 18px marge rondom heeft (.app-main). Eerst
       met negatieve marges op de zijbalk; het grid van de chatpagina heeft
       overflow: hidden en knipte het vlak dan links en boven af. Nu tekent de
       pagina het vlak zelf, achter de kolom: marge plus kolombreedte. */
    .app-main--chat { position: relative; }
    .app-main--chat::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: calc(18px + var(--conv-w) + 4px);
        background: var(--beheer-nav-bg);
        border-right: 1px solid var(--border);
        /* Boven de vaste vraagbalk (z-index 100): die loopt over de volle
           breedte met een vervaging naar de paginakleur, die anders over de
           onderkant van het vlak lag. De zijbalk zelf ligt er weer boven. */
        z-index: 105;
        pointer-events: none;
    }
    .app-main--chat .conv-sidebar {
        /* Niet sticky: de kolom scrollt op de chatpagina niet (de lijst wel). */
        position: relative;
        top: 0;
        z-index: 110;
        background: none;
        /* Sinds ronde 3 (19-10-2026) heeft de chatpagina geen marge boven
           en onder meer; de zijbalk houdt zelf wat lucht. */
        padding: 12px 0 10px;
    }
}

@media (min-width: 821px) {
    /* "© 2026 VeraFlow" stond linksonder in de vraagbalk, precies waar nu het
       accountblok staat; op de telefoon stond hij al uit. */
    .ask-bar-fixed .ask-bar-credit { visibility: hidden; }
}

/* ── Nieuw gesprek: de eerste regel ──────────────────────────────────── */
.conv-sidebar .conv-new-rij {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 6px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.conv-sidebar .conv-new-rij svg { flex-shrink: 0; color: var(--text-2); }
/* Op een laptopbreedte verbergt 50-remaining-ui.css het label van .conv-new-btn. */
.conv-sidebar .conv-new-rij .conv-new-label { display: inline; }
.conv-sidebar .conv-new-rij:hover { background: var(--beheer-hover); color: var(--text); }
.conv-sidebar .conv-new-rij:focus-visible { outline: 2px solid var(--vf-orange-2); outline-offset: 1px; }

/* ── Dossierkaart: een licht kaartje, geen koperen rand of schaduw ────── */
.conv-sidebar .dossier-sidebar-card,
.conv-sidebar .dossier-sidebar-card--empty {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
    .conv-sidebar .dossier-sidebar-card:hover { box-shadow: none; border-color: var(--border-2); }
}
.conv-sidebar .dossier-kaart-alle { border-radius: 0 0 12px 12px; }

/* ── Zoeken ───────────────────────────────────────────────────────────── */
.conv-sidebar .conv-search {
    padding-top: 8px;
    padding-bottom: 8px;
    /* Minstens 3:1 tegen het vlak van de zijbalk (WCAG 1.4.11, 19-10-2026): met
       --border haalde de rand 1,2:1 en viel het veld alleen op door zijn witte
       vlak. #8A867E haalt 3,2:1 op #F1F0EB; het donkere thema hieronder 3,3:1. */
    border-color: var(--zoekveld-rand, #8A867E);
    border-radius: 10px;
    background: var(--surface);
    font-size: 0.82rem;
}
.conv-sidebar .conv-search:-webkit-autofill { box-shadow: 0 0 0 1000px var(--surface) inset; }
/* Een periode staat aan: een stip op de puntjes, anders zie je niet waarom
   de lijst korter is dan je verwacht. */
.conv-search-menu-btn.is-actief::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vf-orange);
}
/* Met de periodes erbij is het menu hoger dan de ruimte onder het zoekveld op
   een laptop; de zijbalk knipt af (overflow: hidden), dus het menu scrollt zelf.
   De periodes zijn korte woorden en mogen lager dan de opties met uitleg. */
.conv-search-menu {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}
.conv-search-menu [data-periode] { min-height: 0; padding-top: 6px; padding-bottom: 6px; }
.conv-search-menu .conv-search-menu-kop {
    padding: 6px 12px 2px;
    color: var(--text-3);
    font-size: 0.74rem;
    font-weight: 500;
}

/* "Dossier: …  Alle gesprekken" als rustige regel onder het zoekveld. */
.conv-sidebar .conv-scope { padding: 6px 10px 2px; font-size: 0.78rem; }
.conv-sidebar .conv-scope-label { font-weight: 500; letter-spacing: 0; }
.conv-sidebar .conv-scope-link { color: var(--text-2); }
.conv-sidebar .conv-scope-link:hover { color: var(--text); }

/* ── Kopjes zoals "Account" in het beheermenu ────────────────────────── */
.conv-sidebar .conv-group-label {
    padding: 14px 10px 4px;
    margin-top: 0;
    color: var(--text-3);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.conv-sidebar .conv-group-label:first-child { padding-top: 6px; }

/* ── Gesprekken als menu-items ───────────────────────────────────────── */
.conv-sidebar .conv-item {
    gap: 10px;
    padding: 4px 6px 4px 10px;
    border: 0;
    border-radius: 10px;
}
.conv-sidebar .conv-item:hover { background: var(--beheer-hover); }
html .conv-sidebar .conv-item--active,
[data-theme="dark"] .conv-sidebar .conv-item--active {
    background: var(--beheer-actief);
    border: 0;
    box-shadow: none;
}
.conv-sidebar .conv-item-icoon { color: var(--text-3); line-height: 0; }
.conv-sidebar .conv-item-name { font-size: 0.86rem; font-weight: 400; color: var(--text); }
html .conv-sidebar .conv-item--active .conv-item-name { color: var(--text); font-weight: 600; }
/* De tijd alleen bij aanwijzen (of als de rij focus heeft): dan past de titel
   er bijna helemaal in. Uit beeld en niet weg, zodat de rij niet verspringt
   en een schermlezer hem gewoon voorleest. */
@media (hover: hover) and (pointer: fine) {
    .conv-sidebar .conv-item-context { opacity: 0; transition: opacity 0.12s; }
    .conv-sidebar .conv-item:hover .conv-item-context,
    .conv-sidebar .conv-item:focus-visible .conv-item-context { opacity: 1; }
    .conv-sidebar .conv-item:not(:hover):not(:focus-within) .conv-item-context { width: 0; overflow: hidden; }
}

/* ── Exporteren als regel ────────────────────────────────────────────── */
.conv-sidebar .conv-sidebar-footer {
    position: static;
    margin-top: 6px;
    padding-top: 6px;
    background: none;
}
.conv-sidebar .conv-export-btn {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 0.86rem;
}
.conv-sidebar .conv-export-btn .conv-export-label { display: inline; }
.conv-sidebar .conv-export-btn::after { display: none; }
.conv-sidebar .conv-export-btn:hover { background: var(--beheer-hover); color: var(--text); }

/* ── Wie er is ingelogd, met het accountmenu ─────────────────────────── */
.conv-sidebar .conv-wie {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
/* Staat er een exportregel, dan sluit die aan op dit blok (geen tweede lijn). */
.conv-sidebar .conv-sidebar-footer + .conv-wie { margin-top: 0; }
.conv-sidebar .conv-sidebar-footer { margin-top: auto; }
/* "html body" erbij: 92-calm-palette.css geeft .nav-avatar-btn in de kopbalk
   een wit vlak met rand, met !important en een html-selector ervoor. */
html body .conv-sidebar .conv-wie-knop {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-2) !important;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
html body .conv-sidebar .conv-wie-knop:hover,
html body .conv-sidebar .conv-wie-knop[aria-expanded="true"] { background: var(--beheer-hover) !important; color: var(--text-2) !important; }
.conv-sidebar .conv-wie-knop:focus-visible { outline: 2px solid var(--vf-orange-2); outline-offset: 1px; }
.conv-sidebar .conv-wie-knop .beheer-wie-initialen { width: 34px; height: 34px; border-radius: 10px; }
.conv-sidebar .conv-wie-knop .nav-avatar-menu-indicator { flex-shrink: 0; margin-left: auto; color: var(--text-3); }
/* Het menu klapt naar boven open, zo breed als het blok. De naam staat al in
   de knop; de kop met naam en kantoor in het menu is hier dubbel. */
.conv-sidebar .conv-wie .nav-dropdown-menu {
    position: absolute;
    top: auto;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
    max-height: none;
}
.conv-sidebar .conv-wie .nav-dropdown-wie { display: none; }

/* ── Telefoon: dezelfde lade, hetzelfde vlak ─────────────────────────── */
@media (max-width: 820px) {
    .conv-sidebar { background: var(--beheer-nav-bg); padding: 14px 12px 12px; }
    .conv-sidebar .conv-wie .nav-dropdown-menu { position: absolute; top: auto; right: 0; left: 0; }
    /* Zonder menu rechtsboven moet de lade het account altijd laten zien. */
    .conv-sidebar .conv-wie { padding-bottom: env(safe-area-inset-bottom, 0); }
}