/* Scope Compass — stylesheet voor spoor VA (Vera als assistent).
   Laadt ná src/styles.css, zodat de tokens daaruit beschikbaar zijn en dit bestand ze kan
   overrulen. Geen nieuwe kleuren: het accent (--pri) voor de kop en de primaire knop, de
   statusfamilies (green, amber, red, slate) voor de standen. */

/* ---- VA2: de voorstelkaart "Vera stelt voor" (src/veraPanel.js, .va-*) ----------------------
   Eén kaart per voorstel in de thread: kop, per actie een regel (icoon, label, wat er verandert
   in mensentaal, Vera's toelichting), en een voet met Uitvoeren / Annuleren. Uitgevoerd wordt
   dezelfde kaart een rustige samenvatting met per actie het resultaat en Terugdraaien. */
.vera-msg.vera:has(.va-kaart) .bubble { max-width: 100%; }
.va-kaart { margin: 8px 0 2px; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; white-space: normal; }
.va-kaart-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; background: var(--pri-soft); color: var(--pri-text); font-weight: 600; font-size: 12.5px; }
.va-kaart-kop .ic { flex: none; font-size: 15px; }
.va-kaart-sub { font-weight: 400; color: var(--text-3); }
.va-kaart-kop.is-klaar { background: var(--green-soft); color: var(--green-strong); }
.va-kaart-kop.is-af { background: var(--slate-soft); color: var(--slate-text); }
.va-kaart.is-af { border-style: dashed; }
/* De korte verwijzing in de thread als het voorstel op de telefoon in de lade staat. */
.va-kaart-mini { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--text-2); border-style: dashed; }
.va-kaart-mini .ic { color: var(--pri); flex: none; }

/* ---- de actieregels ---- */
.va-actie { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-top: 1px solid var(--border); }
.va-acties > .va-actie:first-child { border-top: 0; }
.va-actie-vink { display: flex; align-items: center; flex: none; margin-top: 1px; }
.va-actie-vink input { width: 16px; height: 16px; margin: 0; accent-color: var(--pri); cursor: pointer; }
.va-actie-ic { flex: none; margin-top: 2px; color: var(--pri); font-size: 16px; }
.va-actie-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.va-actie-lbl { font-weight: 600; line-height: 1.4; }
.va-actie-wat { color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.va-actie-sub { font-size: 12px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.va-actie-why { font-size: 12px; color: var(--text-3); font-style: italic; line-height: 1.45; }
.va-actie-fout { font-size: 12px; color: var(--amber-strong); line-height: 1.45; overflow-wrap: anywhere; }
.va-actie-edit { flex: none; align-self: flex-start; }
/* Ongeldig (de validatie keurde de regel al af): grijs, met de reden; Aanpassen blijft mogelijk.
   Uitgevinkt: alleen gedempt, de tekst blijft leesbaar. */
.va-actie.is-ongeldig .va-actie-ic { color: var(--amber-strong); }
.va-actie.is-ongeldig .va-actie-lbl, .va-actie.is-ongeldig .va-actie-wat, .va-actie.is-ongeldig .va-actie-sub { color: var(--text-3); }
.va-actie.is-uit .va-actie-main, .va-actie.is-uit .va-actie-ic { opacity: .55; }
.va-kaart-voet { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); }

/* ---- de editor (Aanpassen) ---- */
.va-edit { padding: 10px 12px 12px; border-top: 1px dashed var(--border-2); background: var(--surface-2); }
.va-edit-kop { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.va-edit-velden { display: flex; flex-direction: column; gap: 8px; }
.va-veld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.va-veld-lbl { color: var(--text-2); }
.va-veld-lbl em { color: var(--red-strong); font-style: normal; }
.va-veld .input, .va-veld .select, .va-veld .textarea { width: 100%; box-sizing: border-box; font-size: 13px; }
.va-veld.is-vink { flex-direction: row; align-items: center; gap: 8px; min-height: 28px; }
.va-veld.is-vink input { width: 16px; height: 16px; margin: 0; accent-color: var(--pri); }
.va-edit-voet { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- uitgevoerd: de samenvatting met per actie het resultaat ---- */
.va-res { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-top: 1px solid var(--border); }
.va-acties > .va-res:first-child { border-top: 0; }
.va-res-ic { flex: none; margin-top: 2px; color: var(--green-strong); font-size: 16px; }
.va-res.is-fout .va-res-ic { color: var(--red-strong); }
.va-res.is-terug .va-res-ic { color: var(--text-3); }
.va-res.is-terug .va-res-main { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-3); }
.va-res-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.va-res-wat { font-weight: 400; color: var(--text-2); }
.va-res-melding { font-size: 12px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.va-res-undo { flex: none; align-self: flex-start; }
.va-res-note { flex: none; align-self: flex-start; max-width: 40%; font-size: 12px; color: var(--text-3); line-height: 1.4; text-align: right; }
.va-res-note.is-terug { display: inline-flex; align-items: center; gap: 4px; max-width: none; text-align: left; }

/* ---- wedervraag: een invoerveld onder het bericht ---- */
.va-wedervraag { display: flex; gap: 8px; align-items: center; margin-top: 10px; white-space: normal; }
.va-wedervraag .input { flex: 1; min-width: 0; font-size: 13px; }
.va-wedervraag .btn { flex: none; }

/* ---- telefoon: het open voorstel als lade van onderen ------------------------------------
   Op ≤640px is de thread te smal voor een kaart met vinkjes, knoppen én een editor. Het open
   voorstel komt dan als lade over de onderkant van het paneel (boven het invoerveld), met een
   greep om hem in te klappen; de thread erachter blijft scrollbaar (veraPanel zet zoveel
   paddingBottom als de lade hoog is). Zelfde knoppen, zelfde handlers, tikdoelen 44px. */
@media (max-width: 640px) {
  .va-lade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 62%;
    display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border-2);
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -8px 24px rgba(16, 24, 40, .12);
    padding-bottom: var(--safe-b, env(safe-area-inset-bottom, 0px)); animation: dzSheetUp .18s ease; }
  .va-lade-greep { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px 4px; border: 0; background: transparent;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--pri-text); cursor: pointer; text-align: left; position: relative; }
  .va-lade-streep { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: var(--r-pill, 999px); background: var(--border-3); }
  .va-lade-kort { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; margin-top: 8px; }
  .va-lade-kort .ic { flex: none; }
  .va-lade-chev { flex: none; margin-top: 8px; color: var(--text-3); }
  /* Alleen de actielijst scrolt; de voet met Uitvoeren/Annuleren blijft in beeld, ook bij
     acht acties. Daarom is de kaart hier een flexkolom met min-height 0 op elke laag. */
  .va-lade-body { display: flex; flex-direction: column; min-height: 0; padding: 0 10px 10px; }
  .va-lade.is-dicht .va-lade-body { display: none; }
  .va-lade .va-kaart { margin: 0; display: flex; flex-direction: column; min-height: 0; }
  .va-lade .va-acties { overflow-y: auto; min-height: 0; }
  .va-lade .va-kaart-kop { display: none; }
  .va-lade .va-kaart-voet { flex: none; }
  /* Tikdoelen en leesbare invoer: 44px voor elke knop en elk vinkje, 16px op elk invoerveld
     (anders zoomt iOS in). De .btn-regel uit de shell zet 44px al, hier ook voor de kaart in de thread. */
  .va-kaart .btn, .va-lade .btn { min-height: 44px; font-size: 14px; }
  .va-kaart-voet .btn-primary { flex: 1; justify-content: center; }
  .va-actie-vink { min-width: 28px; min-height: 44px; margin-top: -10px; justify-content: center; }
  .va-actie-vink input, .va-veld.is-vink input { width: 22px; height: 22px; }
  .va-actie { flex-wrap: wrap; }
  .va-actie-edit { width: 100%; justify-content: center; }
  .va-veld .input, .va-veld .select, .va-veld .textarea, .va-wedervraag .input { font-size: 16px; }
  .va-wedervraag { flex-wrap: wrap; }
  .va-wedervraag .input { flex-basis: 100%; }
  .va-wedervraag .btn { flex: 1; justify-content: center; }
  .va-res { flex-wrap: wrap; }
  .va-res-note { max-width: none; text-align: left; flex-basis: 100%; }
  .va-res-undo { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .va-lade { animation: none; } }