/* GRIP, de telefoon-app: Vastleggen, de Inbox en Vragen (#15898, #15899, #15903; B-098, B-099, ADR-0006). De vorm, de maten en
   het gedrag komen uit het prototype dat Arne koos (GRIP.Ideeën/04-ux/prototypes/telefoon-app). Alles hangt aan een eigen
   klasse tel…; de dienst Weergave zet de telefoonschil, dus hier staat geen breedtegrens.
   Regels (B-098): elke regel één regel met afkappen (een voorstelkaart twee), de hele regel tikbaar, niets tikbaars rechts
   onder de duim; paars is het enige accent en er staat hooguit één paarse knop; onbekend is grijs gestippeld; 44 px raakvlak. */

@layer telefoon {
    /* ── Een blad van onderen: Vastleggen (vol) en een keuze (half) ── */
    .telblad-achter { position: fixed; inset: 0; z-index: 70; background: var(--vlak-overlay); animation: verschijn var(--duur-kort) var(--beweging-in); }
    .telblad {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; display: flex; flex-direction: column;
        border-radius: var(--hoek-antwoord) var(--hoek-antwoord) 0 0; background: var(--vlak-blad); box-shadow: var(--schaduw-venster);
        animation: venster-omhoog var(--duur-middel) var(--beweging-in);
    }
    .telblad.is-vol { top: var(--ruimte-6); }
    .telblad.is-half { max-height: 88%; }
    .telblad-kop { display: grid; grid-template-columns: var(--raak) minmax(0, 1fr) var(--raak); align-items: center; min-height: 52px; padding: 0 6px; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .telblad-titel { margin: 0; overflow: hidden; color: var(--tekst); font: var(--rol-tekst); font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
    .telblad-ib {
        display: grid; place-items: center; width: var(--raak); height: var(--raak); padding: 0; border: 0; border-radius: var(--hoek-groep);
        background: none; color: var(--tekst-zacht); cursor: pointer; text-decoration: none;
    }
    .telblad-ib:hover { text-decoration: none; background: var(--vlak-hover); }
    .telblad-ib:not(a, button):hover { background: none; }
    .telblad-ib .icon { width: 20px; height: 20px; }
    .telblad-inhoud { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--ruimte-3) var(--marge); }
    .telblad-voet { padding: 10px var(--marge) calc(14px + env(safe-area-inset-bottom)); border-top: var(--lijn-dikte) solid var(--lijn); }
    .telblad-voet:empty { display: none; }
    /* Een lopende opname staat in het blad zelf; de balk eronder zou de knop bedekken. */
    .app-shell:has(.telvast) .opnamebalk { display: none; }
    .telblad-knop { width: 100%; min-height: 48px; border-radius: var(--hoek-antwoord); font-weight: 600; }
    /* Een geopend item: de titel voluit, over zoveel regels als nodig (Arne, 20 okt); alleen in lijsten één regel met … */
    .telblad-titel.is-voluit { margin: 0 0 var(--ruimte-3); overflow: visible; font: var(--rol-antwoord); text-align: left; white-space: normal; overflow-wrap: anywhere; }

    /* ── Wijzig (#15925): de velden van aanmaken, onder elkaar; wie met de pillen ── */
    .telvelden { min-width: 0; margin: 0; padding: 0; border: 0; }
    .telveld { display: grid; gap: var(--ruimte-1); min-width: 0; margin: 0 0 var(--ruimte-3); }
    .telveld-label { color: var(--tekst-zacht); font: var(--rol-label); }
    .telinvoer {
        display: block; width: 100%; min-height: var(--raak); padding: 0 var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn-sterk);
        border-radius: var(--hoek-groep); background: var(--vlak-blad); color: var(--tekst); font: var(--rol-tekst); font-size: var(--invoer);
    }
    /* een lange omschrijving staat er heel: het veld groeit mee, tot een derde van het scherm */
    textarea.telinvoer { max-height: 33vh; padding: var(--ruimte-2) var(--ruimte-3); resize: none; field-sizing: content; }
    .telinvoer:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
    .telvelden:disabled .telinvoer { background: var(--vlak-hover); color: var(--tekst-zacht); }
    .telsegment.is-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
    .telvelden:disabled .telsegment button { cursor: not-allowed; }

    /* ── Vastleggen: het veld, de microfoon en wat het wordt ── */
    .telvast-tekst {
        display: block; width: 100%; padding: var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-antwoord);
        background: var(--vlak-blad); color: var(--tekst); font: var(--rol-tekst); font-size: var(--invoer); resize: none;
    }
    .telvast-tekst:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
    .telvast-opname { display: flex; align-items: center; gap: 10px; margin-top: var(--ruimte-2); }
    .telvast-microfoon {
        display: grid; place-items: center; flex: none; width: var(--raak); height: var(--raak); padding: 0; border: 0; border-radius: 50%;
        background: var(--vlak-blad); box-shadow: inset 0 0 0 1px var(--lijn-sterk); color: var(--tekst-sterk); cursor: pointer;
    }
    .telvast-microfoon .icon { width: 20px; height: 20px; }
    .telvast-opname-tekst { color: var(--tekst-zacht); font: var(--rol-tekst); font-variant-numeric: tabular-nums; }
    .telvast-golf { display: none; align-items: center; gap: 3px; height: 24px; }
    .telvast-golf i { display: block; width: 3px; height: 6px; border-radius: 2px; background: var(--accent); animation: telgolf .8s ease-in-out infinite alternate; }
    .telvast-golf i:nth-child(2) { animation-delay: .1s; } .telvast-golf i:nth-child(3) { animation-delay: .3s; } .telvast-golf i:nth-child(4) { animation-delay: .15s; }
    .telvast-golf i:nth-child(5) { animation-delay: .4s; } .telvast-golf i:nth-child(6) { animation-delay: .2s; } .telvast-golf i:nth-child(7) { animation-delay: .35s; }
    @keyframes telgolf { to { height: 22px; } }
    .telvast-opname.is-aan .telvast-microfoon { background: var(--fout); box-shadow: none; color: var(--tekst-op-donker); }
    .telvast-opname.is-aan .telvast-golf { display: flex; }
    .telvast-opname.is-aan .telvast-opname-tekst { color: var(--fout); font-weight: 500; }
    .telvast-wordt { margin-top: 14px; padding-top: 10px; border-top: var(--lijn-dikte) solid var(--lijn); }
    .telvast-som { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 32px; margin: 0; overflow: hidden; color: var(--tekst); font: var(--rol-tekst); font-weight: 600; white-space: nowrap; }
    .telvast-som > span { overflow: hidden; text-overflow: ellipsis; }
    .telvast-som .icon { flex: none; width: 18px; height: 18px; color: var(--tekst-sterk); }
    .telvast-sep { flex: none; color: var(--lijn-hover); }
    /* Wat het wordt: soort, project en datum als drie chips, elk één tik om te wijzigen; de open chip met een omgekeerde pijl. */
    .telvast-keuzes { display: flex; flex-wrap: wrap; gap: 0 8px; }
    .telchip.is-wordt { max-width: 100%; color: var(--tekst); font-weight: 600; }
    .telchip.is-wordt > span:not(.telchip-stip) { overflow: hidden; text-overflow: ellipsis; }
    .telchip.is-wordt.is-leeg { color: var(--tekst-zacht); font-weight: 500; }
    .telchip.is-wordt.is-open { background: var(--vlak-hover); box-shadow: inset 0 0 0 1.5px var(--tekst-sterk); }
    .telchip .telchip-pijl { width: 14px; height: 14px; margin-right: -3px; color: var(--tekst-zacht); transition: transform var(--duur-kort) var(--beweging-standaard); }
    .telchip.is-open .telchip-pijl { transform: rotate(180deg); }
    .telvast-opties { margin-top: var(--ruimte-1); padding-top: var(--ruimte-1); border-top: var(--lijn-dikte) dashed var(--lijn); }
    /* Bij wie een wacht op ligt (#15939): één regel onder de chips, een duim hoog. */
    .telvast-bijwie { width: 100%; min-height: var(--raak); margin-top: var(--ruimte-2); }

    /* Een rij keuzes die doorloopt naar een volgende regel (8 px tussenruimte); de gekozen chip in het accent. */
    .telkeuzes { display: flex; flex-wrap: wrap; gap: 0 8px; }
    .telchip {
        position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; margin: 4px 0; padding: 0 11px;
        border: 0; border-radius: var(--hoek-rond); background: var(--vlak-blad); box-shadow: inset 0 0 0 1px var(--lijn-sterk);
        color: var(--tekst-sterk); font: var(--rol-klein); font-weight: 500; white-space: nowrap; cursor: pointer;
    }
    .telchip::after { content: ""; position: absolute; inset: -5px 0; }
    .telchip .icon { width: 14px; height: 14px; }
    .telchip.is-aan { background: var(--accent-zacht); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--actie-hoofd-hover); }
    .telchip-stip { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--pk); }
    /* De datumkiezer van het apparaat onder een chip: onzichtbaar, maar een tik opent hem. */
    .telchip-kiezer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

    .telregel-fout { display: flex; align-items: flex-start; gap: var(--ruimte-2); margin: var(--ruimte-3) 0 0; color: var(--fout); font: var(--rol-klein); }
    .telregel-fout .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }

    /* ── Een regel in een lijst: projectstreep, pictogram, titel, stand rechts ── */
    .tellijst { border-top: var(--lijn-dikte) solid var(--lijn); }
    .telrij {
        display: grid; grid-template-columns: 4px 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px;
        border-bottom: var(--lijn-dikte) solid var(--lijn); color: var(--tekst); text-decoration: none;
    }
    .telrij:hover { text-decoration: none; }
    .telrij:active { background: var(--vlak-hover); }
    .telrij:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
    .telrij-streep { width: 4px; height: 22px; border-radius: 2px; background: var(--pk); }
    .telrij-icoon { display: grid; place-items: center; color: var(--tekst-zacht); }
    .telrij-icoon .icon { width: 18px; height: 18px; }
    .telrij-titel { min-width: 0; overflow: hidden; font: var(--rol-tekst); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
    .telinbox-rij.is-klaar .telrij-titel { font-weight: 600; }
    /* De korte projectnaam achter de titel (#15938): klein en grijs, nooit meer dan ruim een derde van de regel. */
    .telrij-titel:has(.telrij-project) { display: flex; align-items: baseline; gap: var(--ruimte-2); }
    .telrij-tekst, .telrij-project { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .telrij-project { max-width: 40%; color: var(--tekst-zacht); font: var(--rol-klein); }
    .telrij-stand {
        display: flex; align-items: center; justify-content: flex-end; gap: 5px; max-width: 110px; overflow: hidden;
        color: var(--tekst-zacht); font: var(--rol-klein); white-space: nowrap; font-variant-numeric: tabular-nums;
    }
    .telrij-stand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
    .telrij-stand .icon { flex: none; width: 14px; height: 14px; }
    .telrij-stand.is-klaar { color: var(--accent); }
    .telrij-stand.is-mislukt { color: var(--fout); }

    .telspinner {
        display: inline-block; flex: none; width: 13px; height: 13px; border: 2px solid var(--lijn-sterk); border-top-color: var(--accent);
        border-radius: 50%; animation: draai .8s linear infinite;
    }
    .telregel-leeg.is-fout { color: var(--fout); }
    .telregel-leeg.is-fout .icon { color: var(--fout); }
    .telregel-link {
        display: inline-flex; align-items: center; min-height: var(--raak); margin-left: auto; padding: 0 4px; border: 0; background: none;
        color: var(--accent); font: var(--rol-tekst); font-weight: 500; cursor: pointer; white-space: nowrap;
    }
    .telregel-link:disabled { color: var(--tekst-uit); cursor: not-allowed; }
    .telstip-onbekend { flex: none; width: 12px; height: 12px; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); border-radius: 50%; }

    /* ── De segmentkeuze bovenaan een lijst ── */
    .telseg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: var(--ruimte-2) 0 var(--ruimte-3); padding: 2px; border-radius: var(--hoek-groep); background: var(--vlak-hover); }
    .telseg-knop {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--raak); padding: 0; border: 0; border-radius: var(--hoek-uitklap);
        background: none; color: var(--tekst-zacht); font: var(--rol-tekst); font-weight: 500; cursor: pointer;
    }
    .telseg-knop.is-aan { background: var(--vlak-blad); box-shadow: var(--schaduw-uitklap), 0 0 0 1px var(--lijn); color: var(--tekst); }
    .telseg-getal { color: var(--tekst-zacht); }
    .telseg-onbekend { width: 12px; height: 12px; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); border-radius: 50%; }

    /* ── Een vastlegging: de bron, het transcript en de voorstellen ── */
    .telbron { display: flex; align-items: center; gap: var(--ruimte-3); margin-top: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) var(--ruimte-2); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-antwoord); }
    .telbron-speel {
        display: grid; place-items: center; flex: none; width: var(--raak); height: var(--raak); padding: 0; border: 0; border-radius: 50%;
        background: var(--vlak-blad); box-shadow: inset 0 0 0 1px var(--lijn-sterk); color: var(--tekst); cursor: pointer;
    }
    .telbron-speel .icon { width: 18px; height: 18px; }
    .telbron-speel:not(.is-aan) .icon { fill: currentColor; }
    .telbron-spoor { flex: 1 1 auto; height: 6px; overflow: hidden; border-radius: 3px; background: var(--lijn); }
    .telbron-spoor i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--accent); }
    .telbron-spoor i.is-aan { animation-name: telafspelen; animation-timing-function: linear; animation-fill-mode: forwards; }
    @keyframes telafspelen { to { width: 100%; } }
    .telbron-duur { color: var(--tekst-zacht); font: var(--rol-klein); font-variant-numeric: tabular-nums; }
    .teltranscript { border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .teltranscript summary { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--tekst-sterk); font: var(--rol-tekst); font-weight: 500; list-style: none; cursor: pointer; }
    .teltranscript summary::-webkit-details-marker { display: none; }
    .teltranscript summary .icon { width: 18px; height: 18px; color: var(--tekst-zacht); }
    .teltranscript .teltranscript-pijl { width: 16px; height: 16px; margin-left: auto; transition: transform var(--duur-kort) var(--beweging-standaard); }
    .teltranscript[open] .teltranscript-pijl { transform: rotate(180deg); }
    .teltranscript p { margin: 0; padding: 0 0 var(--ruimte-3); color: var(--tekst-sterk); font: var(--rol-klein); }
    .telcitaat {
        display: flex; gap: 10px; margin: var(--ruimte-3) 0 0; padding: 10px var(--ruimte-3); border-left: 2px solid var(--lijn-sterk);
        border-radius: 0 var(--hoek-groep) var(--hoek-groep) 0; background: var(--vlak-zacht); color: var(--tekst-sterk); font: var(--rol-klein);
    }
    .telcitaat .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--tekst-zacht); }
    .telactie { margin-top: var(--ruimte-3); }
    /* Wat je verder met de vastlegging kunt (#15923, #15924): stille regels, de hele regel tikbaar; verwijderen in de foutkleur. */
    .telacties { margin-top: var(--ruimte-4); border-top: var(--lijn-dikte) solid var(--lijn); }
    .telrijknop {
        display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0; border: 0;
        border-bottom: var(--lijn-dikte) solid var(--lijn); background: none; color: var(--tekst); font: var(--rol-tekst); text-align: left; cursor: pointer;
    }
    .telrijknop .icon { flex: none; width: 20px; height: 20px; color: var(--tekst-zacht); }
    .telrijknop.is-fout, .telrijknop.is-fout .icon { color: var(--fout); }
    .telrijknop:disabled { color: var(--tekst-uit); cursor: not-allowed; }
    .telrijknop:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
    .telkop-groep { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 20px; margin: 22px 0 4px; color: var(--tekst-zacht); font: var(--rol-kop); }
    .telkop-groep-getal { color: var(--tekst-zacht); font-weight: 500; }
    .telalles {
        display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: var(--raak); padding: 0; border: 0; background: none;
        color: var(--accent); font: var(--rol-tekst); font-weight: 500; text-align: left; cursor: pointer;
    }
    .telalles .icon { width: 16px; height: 16px; }
    .telalles:disabled { color: var(--tekst-uit); cursor: not-allowed; }

    /* De voorstelkaart: vinkje, soort, tekst op hooguit twee regels, de chips. */
    .telkaart { display: flex; gap: 4px; margin-top: var(--ruimte-2); padding: 6px 10px 6px 0; border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-antwoord); background: var(--vlak-blad); }
    .telkaart.is-gekozen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    .telkaart-vink { display: grid; place-items: center; flex: none; align-self: stretch; width: var(--raak); padding: 0; border: 0; background: none; cursor: pointer; }
    .telkaart-vakje { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--lijn-hover); color: var(--tekst-op-donker); }
    .telkaart-vakje .icon { width: 14px; height: 14px; stroke-width: 2.4; opacity: 0; }
    .telkaart.is-gekozen .telkaart-vakje { background: var(--accent); box-shadow: none; }
    .telkaart.is-gekozen .telkaart-vakje .icon { opacity: 1; }
    .telkaart.is-gekozen .telkaart-vakje { animation: pop .3s var(--beweging-standaard); }
    .telkaart-vink:disabled { cursor: not-allowed; }
    .telkaart-vink:disabled .telkaart-vakje { background: var(--vlak-zacht); box-shadow: inset 0 0 0 1.5px var(--lijn); }
    .telkaart-inhoud { flex: 1 1 auto; min-width: 0; }
    .telkaart-soort {
        display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; border: 0; background: none;
        color: var(--tekst-zacht); font: var(--rol-label); font-weight: 600; cursor: pointer;
    }
    .telkaart-soort .icon { width: 14px; height: 14px; }
    /* Een wijziging van een bestaand item (#15185): de titel van dat item klein, en van een ander in de let-op-tint. */
    .telkaart-bestaand { margin: 0; overflow: hidden; color: var(--tekst-zacht); font: var(--rol-klein); text-overflow: ellipsis; white-space: nowrap; }
    .telkaart-chip.is-ander { background: var(--let-op-zacht); border-color: transparent; font-weight: 600; }
    /* Het teken en Waarom? van elk AI-voorstel (#15720). */
    .telkaart-soort .aiteken { width: 11px; height: 13px; margin-right: 2px; }
    .telkaart-waarom { padding-bottom: 2px; }
    .telkaart-waarom > summary { min-height: 32px; }
    .telkaart-tekst {
        display: -webkit-box; width: 100%; min-height: 32px; padding: 0; overflow: hidden; border: 0; background: none;
        color: var(--tekst); font: var(--rol-tekst); font-weight: 500; text-align: left; cursor: pointer;
        -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    }
    .telkaart-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
    .telkaart-chip {
        position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none; height: 30px; padding: 0 9px 0 7px;
        border: 0; border-radius: var(--hoek-rond); background: var(--vlak-blad); box-shadow: inset 0 0 0 1px var(--lijn-sterk);
        color: var(--tekst-sterk); font: var(--rol-klein); font-weight: 500; white-space: nowrap; cursor: pointer;
    }
    .telkaart-chip .icon { width: 13px; height: 13px; color: var(--tekst-zacht); }
    .telkaart-chip .avatar { width: 18px; height: 18px; }
    .telkaart-chip.is-vast { cursor: default; }
    .telkaart-chip.is-mist { box-shadow: inset 0 0 0 1.5px var(--let-op-stip); color: var(--let-op); }

    /* De vaste balk boven de onderbalk: wat er overgaat en Neem n over. */
    .telvoet {
        position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 40;
        display: flex; align-items: center; gap: 10px; padding: 10px var(--marge) 12px; border-top: var(--lijn-dikte) solid var(--lijn); background: var(--vlak-blad);
    }
    .telvoet-som { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--tekst-sterk); font: var(--rol-klein); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
    .telvoet-knop { flex: none; min-height: 48px; padding: 0 16px; border-radius: var(--hoek-antwoord); font-weight: 600; }
    .app-shell.is-telefoon .app-page:has(.telvoet) { padding-bottom: calc(var(--tel-onder) + 72px); }
    .app-shell.is-telefoon:has(.telvoet) .melding-plek { bottom: calc(140px + env(safe-area-inset-bottom)); }

    /* Een keuze in een blad: de hele regel, met een vinkje bij wat nu geldt. */
    .telkeus {
        display: flex; align-items: center; gap: var(--ruimte-3); width: 100%; min-height: var(--raak); padding: 0; border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn);
        background: none; color: var(--tekst); font: var(--rol-tekst); font-weight: 500; text-align: left; cursor: pointer;
    }
    .telkeus > span:not(.telkeus-streep) { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .telkeus .icon { flex: none; width: 18px; height: 18px; color: var(--tekst-zacht); }
    .telkeus .telkeus-vink { color: var(--accent); }
    .telkeus-streep { flex: none; width: 4px; height: 14px; border-radius: 2px; background: var(--pk); }

    /* ── Vragen: het gesprek ── */
    .telonderwerp {
        position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 60%; height: 32px; padding: 0 10px;
        border: 0; border-radius: var(--hoek-rond); background: var(--vlak-blad); box-shadow: inset 0 0 0 1px var(--lijn-sterk);
        color: var(--tekst-sterk); font: var(--rol-klein); font-weight: 500; white-space: nowrap; cursor: pointer;
    }
    .telonderwerp::after { content: ""; position: absolute; inset: -6px 0; }
    .telonderwerp-naam { overflow: hidden; text-overflow: ellipsis; }
    .telonderwerp .icon { flex: none; width: 14px; height: 14px; color: var(--tekst-zacht); }
    .telgesprek { display: flex; flex-direction: column; gap: var(--ruimte-3); margin: 0; padding: var(--ruimte-2) 0 calc(72px + var(--ruimte-3)); list-style: none; }
    .telgesprek-voorbeelden { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: 4px; }
    /* Welke bedoel je (#16370): de kandidaten als chips onder de wedervraag. */
    .telgesprek-keuzes { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: var(--ruimte-1); }
    .telgesprek-keuzes .telvoorbeeld { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
    .telgesprek-keuzes .icon { width: 14px; height: 14px; flex: none; }
    .telvoorbeeld {
        display: flex; align-items: center; min-height: var(--raak); padding: 0 14px; border: 0; border-radius: var(--hoek-rond);
        background: var(--vlak-blad); box-shadow: inset 0 0 0 1px var(--lijn-sterk); color: var(--tekst-sterk); font: var(--rol-tekst); font-weight: 500; cursor: pointer;
    }
    .telvoorbeeld:active { background: var(--vlak-hover); }
    .telvraag { align-self: flex-end; max-width: 85%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--vlak-hover); color: var(--tekst); font: var(--rol-tekst); }
    .telantwoord { align-self: stretch; color: var(--tekst); font: var(--rol-tekst); }
    .telantwoord-wie { display: block; margin-bottom: 3px; color: var(--logo); font: var(--rol-label); font-weight: 600; }
    .telantwoord-zin, .telantwoord-regel { margin: 0; }
    /* De stand per aspect: een stip vooraan elke regel; onbekend grijs gestippeld, nooit groen. */
    .telantwoord-regel:has(.telantwoord-stip) { padding-left: 16px; text-indent: -16px; }
    .telantwoord-stip { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; text-indent: 0; }
    .telantwoord-stip.is-groen { background: var(--goed); }
    .telantwoord-stip.is-oranje { background: var(--let-op-stip); }
    .telantwoord-stip.is-rood { background: var(--fout); }
    .telantwoord-stip.is-onbekend { box-sizing: border-box; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .telantwoord-lijst { margin-top: 6px; }
    .telbronregel { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; color: var(--tekst-zacht); font: var(--rol-label); font-weight: 400; }
    .telbronregel .icon { width: 12px; height: 12px; }
    .telantwoord .telregel-link { margin-left: -4px; }
    /* Wat opvalt (#16369): stille regels met een pictogram onder het antwoord; de volgende stap als vraag met een knop. */
    .telantwoord-opvallend { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; }
    .telantwoord-opmerking { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
    .telantwoord-opmerking .icon { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--let-op-stip); }
    .telantwoord-vervolg { margin: 6px 0 0; }
    .telantwoord-knop { margin: 0; }
    .telgesprek-invoer {
        position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 40;
        display: flex; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-2) var(--marge) 10px; border-top: var(--lijn-dikte) solid var(--lijn); background: var(--vlak-blad);
    }
    .telgesprek-veld {
        flex: 1 1 auto; min-width: 0; height: var(--raak); padding: 0 14px; border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: 22px;
        background: var(--vlak-blad); color: var(--tekst); font: var(--rol-tekst); font-size: var(--invoer);
    }
    .telgesprek-veld:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
    .telgesprek-stuur {
        display: grid; place-items: center; flex: none; width: var(--raak); height: var(--raak); padding: 0; border: 0; border-radius: 50%;
        background: var(--vlak-donker); color: var(--tekst-op-donker); cursor: pointer;
    }
    .telgesprek-stuur:disabled { background: var(--lijn-sterk); cursor: not-allowed; }
    .telgesprek-stuur .icon { width: 20px; height: 20px; }
    .app-shell.is-telefoon:has(.telgesprek-invoer) .melding-plek { bottom: calc(140px + env(safe-area-inset-bottom)); }
    /* Het gesprek in het paneel van Rixsi op de laptop (#15975): hetzelfde component, maar de berichten scrollen in het
       paneel en de invoer staat onderaan in het paneel, niet vast boven de onderbalk. De verzendknop is stil; met tekst
       erin is hij de volgende stap en paars. */
    .rixsipaneel .telgesprek { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--ruimte-3) var(--ruimte-4); }
    .rixsipaneel .telregel-fout { margin: 0; padding: 0 var(--ruimte-4) var(--ruimte-2); }
    .rixsipaneel .telgesprek-invoer { position: static; padding: var(--ruimte-2) var(--ruimte-3); border-radius: 0 0 var(--hoek-groep) var(--hoek-groep); }
    .rixsipaneel .telgesprek-veld { height: 36px; border-radius: 18px; font: var(--rol-tekst); }
    .rixsipaneel .telgesprek-stuur { width: 32px; height: 32px; background: var(--vlak-hover); color: var(--tekst-zacht); }
    .rixsipaneel .telgesprek-stuur:not(:disabled) { background: var(--actie-hoofd); color: var(--actie-hoofd-tekst); }
    .rixsipaneel .telgesprek-stuur .icon { width: 16px; height: 16px; }
    .rixsipaneel .telvoorbeeld { min-height: 32px; padding: 0 12px; font: var(--rol-klein); font-weight: 500; }
    .rixsipaneel .telvoorbeeld:hover { background: var(--vlak-hover); }
    @media (max-width: 720px) {
        .rixsipaneel .telgesprek-veld { height: var(--raak); font-size: var(--invoer); }
        .rixsipaneel .telgesprek-stuur { width: var(--raak); height: var(--raak); }
        .rixsipaneel .telvoorbeeld { min-height: var(--raak); }
    }

    @media (prefers-reduced-motion: reduce) {
        .telblad, .telblad-achter, .telvast-golf i, .telchip-pijl, .telspinner, .telkaart-vakje, .telbron-spoor i.is-aan, .teltranscript-pijl { animation: none; transition: none; }
    }
}