/* SAMTALEN — brand-interviewets flade.
 *
 * Laa foer i brandbook.css. Da brandbogen blev slettet 30. juli 2026, roeg samtalens styling
 * med den, og fladen stod helt uden CSS: en sort blob og noegne knapper. Den bor her nu, hvor
 * den hoerer til — én fil pr. flade, som public/CLAUDE.md siger.
 *
 * Fladen er porteret 1:1 fra GamobaHub/ph's Samtale-agent (GenerationProfileComponent):
 * faner med understregning, samtale i midten, fremdrifts-panel i en 250px kolonne til hoejre,
 * bobler med rund avatar og afskaaret hjoerne mod afsenderen.
 *
 * --bb-accent saettes IKKE laengere pr. brand. bbBrandVars gjorde det, og den laa i brandbook.js.
 * Samtalen staar derfor i husets farve frem for kundens, indtil noget saetter variablen igen. */

#view-branding {
  --bb-accent: #D11A62;   /* fremhaevning: aktiv fane, send-knap, bekraeftede punkter */
}

/* ── SCENEN: TO PALETTER, ÉN OPSKRIFT (5. august 2026) ─────────────────────────────────────
   Samtalen gik moerk 4. august og blev for tung — den fylder hele siden, saa en moerk flade
   herinde farver hele appen. Den er LYS nu. Grøntonen er den samme; det er kun bunden der vender.

   BEGGE PALETTER STAAR HER, og fladen bruger KUN tokens — ingen farve staar hardkodet laengere
   nede i filen. Det er ikke pynt: den moerke udgave havde tolv hardkodede vaerdier spredt ud over
   filen (bobler, panel, bud-faner, skinnen i karrusellen), og hver enkelt var et sted den lyse
   udgave ville have knaekket i stilhed.

   SAADAN SKIFTES DER TILBAGE: saet class="moerk" paa #bi-root i dashboard.html. Én attribut.
   Det er hele forskellen, og det er derfor de to paletter staar side om side.

   HVAD DER GAAR IGEN I BEGGE: scenen er tre radiale fades over en gradient, samme lagdeling som
   kalenderen (.calstage i dashboard.html). Kundens boble er pink i begge — det er det ene sted
   farven skal baere, og den skal kunne kendes med det samme.

   --bi-paa-accent er tekst OVENPAA accentfarven, og den vender med paletten: paa moerk er accenten
   LYS (#FF4D8D), saa teksten skal vaere moerk; paa lys er accenten MOERK (#D11A62), saa teksten
   skal vaere hvid. Hvid paa kobber er ulaeseligt, og det var derfor tokenet blev til. */
#bi-root {
  /* LYS — standard. Bunden er hvid med et pink anstroeg, ikke ren hvid: en helt neutral hvid
     ved siden af den pink accent ser vasket ud, og huset er pink. */
  --bi-scene:
    radial-gradient(90% 70% at 12% 0%, rgba(255,77,141,.10), transparent 62%),
    radial-gradient(70% 60% at 100% 100%, rgba(255,77,141,.06), transparent 60%),
    linear-gradient(160deg,#FBF8F9 0%,#F7F2F4 58%,#F4EEF1 100%);
  --bi-ink: #141018;
  --bi-svag: rgba(20,16,24,.56);
  --bi-linje: rgba(20,16,24,.13);
  --bi-flade: rgba(255,255,255,.66);
  --bi-flade2: rgba(255,255,255,.92);
  /* #FF4D8D er husets pink til MOERKE flader og rammer kun ~3:1 paa lys. Den her er brandbogens
     tekst-pink (--maerke-tekst), saa den holder kontrast som tekst og stadig er genkendelig. */
  --bb-accent: #D11A62;
  --bi-paa-accent: #ffffff;
  --bi-paa-accent-svag: rgba(255,255,255,.72);

  --bi-boble-bg: rgba(255,255,255,.9);
  --bi-boble-linje: rgba(20,32,26,.10);
  --bi-du-bg: #D11A62;
  --bi-du-ink: #FDF2F7;
  --bi-du-linje: rgba(209,26,98,.3);
  /* Panelet skal ligge et plan DYBERE end samtalen, ligesom paa moerk hvor det var sortere end
     scenen. En hvidere flade paa en naesten hvid bund skiller sig ikke ud, og saa flyder de to
     kolonner sammen. Her er det den samme groenne bund, bare et nøk maettere. */
  --bi-panel-bg: rgba(20,16,24,.042);
  --bi-panel-linje: rgba(20,16,24,.11);
  --bi-bud-spor: rgba(20,16,24,.06);
  --bi-bud-fane: rgba(255,255,255,.9);
  --bi-bud-fane-linje: rgba(20,16,24,.12);
  --bi-kilde: #A81250;
  --bi-tk-ring: rgba(20,16,24,.24);
  --bi-lane-on-ink: #141018;
  --bi-rul: rgba(20,16,24,.18);
  --bi-fejl: #b3261e;
  --bi-halv: #8a5d15;
  --bi-halv-svag: rgba(138,93,21,.09);
  --bi-halv-linje: rgba(138,93,21,.2);
}

#bi-root.moerk {
  /* MOERK — den scene samtalen havde 4.-5. august. Den dybe skovgroenne fra sidens bund. */
  --bi-scene:
    radial-gradient(90% 70% at 12% 0%, rgba(255,77,141,.07), transparent 62%),
    linear-gradient(160deg,#1A1620 0%,#141018 58%,#0E0B12 100%);
  --bi-ink: #F2EDF0;
  --bi-svag: rgba(242,237,240,.52);
  --bi-linje: rgba(255,255,255,.11);
  --bi-flade: rgba(255,255,255,.04);
  --bi-flade2: rgba(255,255,255,.07);
  --bb-accent: #FF4D8D;
  --bi-paa-accent: #141018;
  --bi-paa-accent-svag: rgba(20,16,24,.66);

  --bi-boble-bg: rgba(255,255,255,.055);
  --bi-boble-linje: rgba(255,255,255,.09);
  --bi-du-bg: #A81250;
  --bi-du-ink: #FBEFF5;
  --bi-du-linje: rgba(255,77,141,.28);
  --bi-panel-bg: rgba(0,0,0,.16);
  --bi-panel-linje: rgba(255,255,255,.09);
  --bi-bud-spor: rgba(0,0,0,.28);
  --bi-bud-fane: rgba(255,255,255,.13);
  --bi-bud-fane-linje: rgba(255,255,255,.16);
  --bi-kilde: #FFB3CE;
  --bi-tk-ring: rgba(255,255,255,.30);
  --bi-lane-on-ink: #ffffff;
  --bi-rul: rgba(255,255,255,.18);
  --bi-fejl: #ff9b95;
  --bi-halv: #e0b062;
  --bi-halv-svag: rgba(224,176,98,.12);
  --bi-halv-linje: rgba(224,176,98,.24);
}

/* ── Interviewet ──────────────────────────────────────────────────────────────────────────── */

/* Fladen er porteret 1:1 fra GamobaHub/ph's Samtale-agent (GenerationProfileComponent):
   faner med understregning, samtale i midten, fremdrifts-panel i en 250px kolonne til hoejre,
   bobler med rund avatar og afskaaret hjoerne mod afsenderen.
   ÉN bevidst afvigelse: deres accent er fast blaa. Vores er --bb-accent — husets groenne, ikke
   kundens: bbBrandVars satte den pr. brand, og den doede med brandbogen. Skal den skifte, er det
   den ene variabel. */
/* Paletterne (lys og moerk) staar oeverst i filen. De laa her indtil 4. august 2026. */

/* SAMTALEN ER SIDEN, IKKE EN WIDGET PAA DEN.
   Den laa foer i en kasse: max-width 1180, egen ramme, runde hjoerner og en fast
   height:min(74vh,760px). Resultatet var et vindue der svaevede midt paa en tom flade — den
   lignede noget der var lagt OVEN PAA appen frem for at vaere den.
   Praecis samme fejl blev fanget i kalenderen; se kommentaren ved #view-calendar .calstage i
   dashboard.html: "ellers stod kassen og scrollede i sit eget lille vindue med en tom groen
   flade under sig". Loesningen her er den samme som dér.
   Rammen beholdes til indstillings-fladen (.indstillinger), som ER en almindelig side. */
/* DEN FAERDIGE TILSTAND ER DEN SAMME FLADE. Den havde sin egen .bi-wrap udenom .bi-layout og blev
   derfor ikke malet med da samtalen gik moerk 4. august: overskriften stod paa sidens lyse bund, og
   broedteksten i --bi-svag (nu en LYS farve) var usynlig. Den fejl kunne kun ske fordi der var to
   veje. Nu er der én: den faerdige tilstand er en .bi-kol i .bi-layout, med panelet ved siden af —
   og panelet ER vejen tilbage til de emner der er svaret paa, saa den skal vaere der netop dér. */
.bi-layout { display:flex; align-items:stretch; gap:0; max-width:1180px; margin:0 auto;
  border:1px solid var(--bi-linje); border-radius: var(--r-kort); overflow:hidden;
  height:min(74vh,760px); color:var(--bi-ink);
  /* Scenen bor i et token, saa lys og moerk deler ÉN opskrift. Se paletterne oeverst. */
  background: var(--bi-scene); }
#view-branding:not([hidden]):not(.indstillinger) { display:flex; min-height:100%; }
#view-branding:not(.indstillinger) > .pad { flex:1; display:flex; padding:0; max-width:none; }
#view-branding:not(.indstillinger) > .pad > #bi-root { flex:1; display:flex; min-width:0; }
#view-branding:not(.indstillinger) .bi-layout { flex:1; max-width:none; margin:0; border:0;
  border-radius:0; height:auto; min-height:0; }
.bi-kol { display:flex; flex-direction:column; flex:1; min-width:0; }

/* Fanebar: understregede faner, som ph's tab bar. */
.bi-faner { display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  border-bottom:1px solid var(--bi-linje); flex:0 0 auto; }
.bi-faner .ff { display:flex; }
.bi-faner .fane { padding:13px 4px; margin-right:20px; border:0; border-bottom:2px solid transparent;
  background:none; font:inherit; font-size:13.5px; color:var(--bi-svag); cursor:pointer; transition:color .15s; }
.bi-faner .fane:hover { color:var(--bi-ink); }
.bi-faner .fane.on { border-bottom-color:var(--bb-accent); color:var(--bb-accent); font-weight:500; }
.bi-emne { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bi-svag); }

.bi-samtale { flex:1; min-height:0; overflow-y:auto; padding:20px; display:flex;
  flex-direction:column; gap:12px; scroll-behavior:smooth; }
/* Beskederne skal ligge NEDE ved skrivefeltet, ikke klaebe til toppen. I starten er der kun tre
   bobler, og uden det her staar de oeverst med et stort hul under sig — hvilket var en stor del
   af foelelsen af at samtalen laa i et vindue frem for at vaere siden.
   margin-top:auto paa foerste barn og IKKE justify-content:flex-end: den sidste goer toppen
   uopnaaelig naar indholdet loeber over i flere browsere. Det her kollapser af sig selv saa snart
   samtalen er laengere end fladen. */
.bi-samtale > :first-child { margin-top:auto; }

/* Bobler. Agenten til venstre, kunden til hoejre — hjoernet mod avataren er skaaret af. */
.bi-rk { display:flex; gap:12px; }
.bi-rk.du { flex-direction:row-reverse; }
.bi-rk .av { flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; }
.bi-rk .av svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.bi-rk.agent .av { background:color-mix(in srgb, var(--bb-accent) 22%, transparent); color:var(--bb-accent); }
.bi-rk.du .av { background:var(--bi-flade2); color:var(--bi-svag); }
.bi-rk .bl { max-width:78%; padding:10px 16px; border-radius: var(--r-knap); font-size:13.5px; line-height:1.6; }
.bi-rk .bl.bred { flex:1; min-width:0; }
.bi-rk .bl p { margin:0; white-space:pre-wrap; }
.bi-rk.agent .bl { background:var(--bi-boble-bg); color:var(--bi-ink); border:1px solid var(--bi-boble-linje);
  border-top-left-radius:4px; }
.bi-rk.du .bl { background:var(--bi-du-bg); color:var(--bi-du-ink); border:1px solid var(--bi-du-linje);
  border-top-right-radius:4px; }

/* RAMMEN: husets ord om hvad der sker, ikke agentens spoergsmaal. Bevidst UDEN avatar og uden
   boble — faar den agentens udseende, laeser kunden den som noget der skal svares paa.
   Afdaempet frem for kraftigt: en skillelinje og lidt mindre tekst er nok til at markere skiftet. */
.bi-ramme.aabning { align-self:stretch; border:1px solid var(--bi-linje); border-left:2px solid var(--bb-accent);
  background:var(--bi-flade2); border-radius: var(--r-knap); padding:12px 16px; }
.bi-ramme.aabning p { margin:0; font-size:13px; line-height:1.65; color:var(--bi-svag); }
.bi-ramme.afsnit { align-self:stretch; display:flex; align-items:center; gap:12px; margin:6px 0 2px; }
.bi-ramme.afsnit .lin { flex:1; height:1px; background:var(--bi-linje); }
.bi-ramme.afsnit p { margin:0; flex:0 1 auto; text-align:center; font-size:12px; line-height:1.55;
  color:var(--bi-svag); max-width:78%; }

/* TRE BUD, i faner. Vist naar kunden trykker "Vis mig tre bud" — altsaa naar de er gaaet i staa.
   Ligger over skrivefeltet og ikke i traaden, fordi de ikke ER en del af samtalen: de er et
   vaerktoej til at komme videre, og de forsvinder naar der er valgt et.

   Den aktive fane markeres af ÉT element der glider (.pille), ikke af en klasse der taendes og
   slukkes. Bevaegelsen viser at det er den samme markering der flytter sig. Samme greb som
   limelight-navet i dashboard.html. */
.bi-bud { border:1px solid var(--bi-linje); border-radius: var(--r-knap); background:var(--bi-flade2);
  padding:10px; margin-bottom:10px; }
.bi-bud-hd { display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--bi-svag); padding:0 2px 8px; }
.bi-bud-luk { border:0; background:transparent; color:var(--bi-svag); cursor:pointer;
  font-size:12px; line-height:1; padding:2px 4px; border-radius: var(--r-lille); }
.bi-bud-luk:hover { background:var(--bi-flade); color:var(--bi-ink); }

/* Striben er en anelse moerkere end kortet, saa den HVIDE pille har noget at staa frem imod.
   --bi-flade er hvid og ville goere pillen usynlig. */
.bi-bud-faner { position:relative; display:flex; gap:4px; background:var(--bi-bud-spor);
  border-radius: var(--r-lille); padding:3px; }
.bi-bud-faner .pille { position:absolute; top:3px; bottom:3px; left:0; width:0; opacity:0;
  background:var(--bi-bud-fane); border:1px solid var(--bi-bud-fane-linje); border-radius: var(--r-lille);
  transition:left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), opacity .15s; }
.bi-bud-fane { position:relative; z-index:1; flex:1 1 0; min-width:0; border:0; background:transparent;
  font:inherit; font-size:11.5px; font-weight:500; color:var(--bi-svag); cursor:pointer;
  padding:6px 8px; border-radius: var(--r-knap); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .18s; }
.bi-bud-fane.on { color:var(--bi-ink); }
.bi-bud-fane:hover { color:var(--bi-ink); }

.bi-bud-krop { padding:12px 4px 4px; }
/* Indgangen: samme idé som framer-motion-varianten i forlaegget (opacity + scale + blur), men
   som en ren CSS-keyframe. prefers-reduced-motion respekteres — samme regel som skrivemaskinen. */
.bi-bud-krop.ind { animation:bi-bud-ind .34s cubic-bezier(.4,0,.2,1); }
@keyframes bi-bud-ind {
  from { opacity:0; transform:scale(.98) translateX(-6px); filter:blur(4px); }
  to   { opacity:1; transform:none; filter:none; }
}
@media (prefers-reduced-motion: reduce) {
  .bi-bud-krop.ind { animation:none; }
  .bi-bud-faner .pille { transition:opacity .15s; }
}

/* Tre former: kun tekst, tekst + billede, kun billede. Serveren saetter kun et billede naar emnet
   er visuelt OG modellen pegede paa et rigtigt produkt, saa alle tre skal kunne baeres. */
.bi-bud-ind p { margin:0; font-size:13px; line-height:1.6; color:var(--bi-ink); white-space:pre-wrap; }
.bi-bud-ind .bil { display:block; width:100%; height:120px; object-fit:cover; border-radius: var(--r-kort);
  border:1px solid var(--bi-linje); background:var(--bi-flade); }
.bi-bud-ind.medbil { display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:start; }
.bi-bud-ind.kunbil .bil { height:170px; }
@media (max-width:560px) { .bi-bud-ind.medbil { grid-template-columns:1fr; } }

.bi-bud-fod { display:flex; align-items:center; gap:10px; padding:10px 2px 0; }
.bi-bud-brug { border:0; background:var(--bb-accent); color:var(--bi-paa-accent); font:inherit; font-size:12px;
  font-weight:500; padding:7px 14px; border-radius: var(--r-knap); cursor:pointer; }
.bi-bud-brug:hover { filter:brightness(1.06); }
.bi-bud-fod .note { font-size:11px; color:var(--bi-svag); }

/* Kvitteringen: hvad blev skrevet ned, hvor, med hvilken kilde. 'dig selv' er hoejeste rang i
   hele systemet — et svar herfra kan aldrig overskrives af et senere scrape. */
.bi-kvit { align-self:flex-end; max-width:78%; margin-right:40px; border:1px solid rgba(255,77,141,.28);
  background:rgba(255,77,141,.10); border-radius: var(--r-knap); padding:9px 12px; }
.bi-kvit .hd { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(143,230,183,.8);
  margin-bottom:7px; }
.bi-kvit .rk { display:flex; align-items:baseline; gap:9px; font-size:12px; padding:3px 0; }
.bi-kvit .hvad { color:var(--bi-svag); flex:0 0 auto; }
.bi-kvit .vaerdi { flex:1; min-width:0; color:var(--bi-ink); }
.bi-kvit .kilde { font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bi-kilde);
  font-weight:600; flex:0 0 auto; }

/* Variantkortene: to kolonner, bogstavbadge, citat i kursiv, "vaelg denne" i foden. */
.bi-varianter { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
@media (max-width:760px) { .bi-varianter { grid-template-columns:1fr; } }
.bi-variant { display:flex; flex-direction:column; text-align:left; border:1px solid var(--bi-linje);
  background:var(--bi-flade); border-radius: var(--r-knap); overflow:hidden; cursor:pointer; font:inherit;
  transition:border-color .15s; }
.bi-variant:hover { border-color:var(--bb-accent); }
.bi-variant .hd { display:flex; align-items:center; gap:8px; padding:11px 12px 7px; }
.bi-variant .bg { width:20px; height:20px; border-radius:50%; flex:0 0 auto; font-size:11px;
  font-weight:600; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bb-accent) 22%, transparent); color:var(--bb-accent); }
.bi-variant .pol { font-size:11.5px; font-weight:600; color:var(--bi-ink); }
.bi-variant .tx { display:block; padding:0 12px 11px; font-size:12px; font-style:italic;
  line-height:1.6; color:var(--bi-svag); flex:1; }
.bi-variant .fod { display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-top:1px solid var(--bi-linje); }
.bi-variant .brug { font-size:11.5px; font-weight:500; color:var(--bb-accent); }

/* Forslag: flervalg, saa kunden ikke skal svare paa det samme spoergsmaal fem gange. */
.bi-forslagblok { margin-top:10px; border:1px solid var(--bi-linje); border-radius: var(--r-knap); padding:11px 12px; }
.bi-forslagblok .hd { font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bi-svag); margin-bottom:9px; }
.bi-forslag { display:flex; flex-wrap:wrap; gap:6px; }
.bi-fchip { border:1px solid var(--bi-linje); background:var(--bi-flade); border-radius: var(--r-knap);
  font:inherit; font-size:12px; padding:6px 12px; cursor:pointer; color:var(--bi-ink);
  transition:border-color .15s, background .15s; }
.bi-fchip:hover { border-color:var(--bb-accent); }
.bi-fchip.valgt { background:var(--bb-accent); border-color:var(--bb-accent); color:var(--bi-paa-accent); }
.bi-forslagblok .tip { font-size:11.5px; line-height:1.5; color:var(--bi-svag); margin-top:9px; }
.bi-forslagblok .fod { display:flex; justify-content:flex-end; margin-top:10px; }
.bi-fsend { border:0; background:var(--bb-accent); color:var(--bi-paa-accent); border-radius: var(--r-knap); font:inherit;
  font-size:12px; padding:7px 14px; cursor:pointer; }

/* Beviserne fra scrapet. Citater er laengere end chips og skal laeses foer de godkendes, saa de
   staar som raekker og ikke som piller. Kunden siger god for at teksten maa i et opslag. */
.bi-beviser { margin-top:10px; border:1px solid var(--bi-linje); border-radius: var(--r-knap); padding:11px 12px; }
.bi-beviser .hd { font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bi-svag); margin-bottom:9px; }
.bi-bevis { display:flex; gap:9px; width:100%; text-align:left; border:1px solid var(--bi-linje);
  background:var(--bi-flade); border-radius: var(--r-knap); font:inherit; font-size:12.5px; line-height:1.55;
  padding:9px 11px; margin-bottom:6px; cursor:pointer; color:var(--bi-ink);
  transition:border-color .15s, background .15s; }
.bi-bevis:hover { border-color:var(--bb-accent); }
.bi-bevis .mk { flex:0 0 auto; width:14px; height:14px; margin-top:3px; border-radius: var(--r-lille);
  border:1.5px solid var(--bi-linje); transition:border-color .15s, background .15s; }
.bi-bevis.valgt { border-color:var(--bb-accent); }
.bi-bevis.valgt .mk { background:var(--bb-accent); border-color:var(--bb-accent); }
.bi-bevis .tx { flex:1; }
.bi-bevis em { display:block; margin-top:4px; font-style:normal; font-size:11px; color:var(--bi-svag); }
.bi-beviser .fod { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }

/* Indstillinger: samme chip-sprog som forslagene, fordi det ER samme handling — peg paa noget
   frem for at skrive det. Den ene forskel er markoeren "sat nu", saa kunden kan se hvad der
   gaelder i dag foer de aendrer det. Bevidst uden ringe og etiketter; det mindste greb der
   goer forskellen synlig. */
.bi-indst { margin-top:10px; }
.bi-indst .hj { font-size:11.5px; color:var(--bi-svag); line-height:1.55; margin-bottom:9px; }
.bi-valg { display:flex; flex-wrap:wrap; gap:6px; }
.bi-vchip { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--bi-linje);
  background:var(--bi-flade); border-radius: var(--r-knap); font:inherit; font-size:12px; padding:6px 12px;
  cursor:pointer; color:var(--bi-ink); transition:border-color .15s, background .15s; }
.bi-vchip:hover { border-color:var(--bb-accent); }
.bi-vchip.valgt { background:var(--bb-accent); border-color:var(--bb-accent); color:var(--bi-paa-accent); }
/* "sat nu" er den nuvaerende vaerdi, ikke et valg kunden har truffet. Derfor kun en svag ramme:
   den skal kunne ses, men maa ikke ligne det primaere svar. */
.bi-vchip.nu { border-color:var(--bi-ink); }
.bi-vchip .mrk { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bi-svag); }
.bi-vchip.valgt .mrk { color:var(--bi-paa-accent-svag); }

/* TO VALG DER VISER SIG SELV. "Nederst til venstre" kraever at kunden oversaetter fire ord til et
   sted paa et billede, og "overskrift i billedet" kraever at de forestiller sig resultatet.
   LOGOETS HJOERNE er TEGNET (.bi-hj): spoergsmaalet er ren placering, og et rigtigt motiv ville
   love noget om udseendet som stilarterne allerede svarer paa.
   TEKST I BILLEDET er FOTO (.bi-btt): dér er spoergsmaalet netop hvordan det SER UD naar et opslag
   baerer en overskrift, og to graa bjaelker paa en tegnet flade svarede ikke paa det (6. aug. 2026). */
.bi-hjgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:4px;
  max-width:460px; }
.bi-bttogrid { display:grid; grid-template-columns:repeat(2,minmax(0,200px)); gap:12px; margin-top:4px; }
.bi-hj, .bi-btt { border:1px solid var(--bi-linje); background:var(--bi-flade); border-radius: var(--r-knap);
  padding:9px 8px 8px; cursor:pointer; font:inherit; color:var(--bi-ink);
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.bi-hj:hover, .bi-btt:hover { border-color:var(--bb-accent); }
.bi-hj.valgt, .bi-btt.valgt { border-color:var(--bb-accent); background:var(--bi-flade2); }
.bi-hj .ram { position:relative; width:100%; aspect-ratio:4/3; border-radius: var(--r-lille);
  background:var(--bi-flade2); border:1px solid var(--bi-linje); }
.bi-hj .ram i { position:absolute; width:26%; height:20%; border-radius: var(--r-lille); background:var(--bi-svag); }
.bi-hj.valgt .ram i { background:var(--bb-accent); }
.bi-hj .ram i.top-left { top:11%; left:9%; }
.bi-hj .ram i.top-right { top:11%; right:9%; }
.bi-hj .ram i.bottom-left { bottom:11%; left:9%; }
.bi-hj .ram i.bottom-right { bottom:11%; right:9%; }
.bi-hj .tx, .bi-btt .tx { font-size:11.5px; line-height:1.3; color:var(--bi-svag); }
.bi-hj.valgt .tx, .bi-btt.valgt .tx { color:var(--bb-accent); font-weight:600; }
.bi-btt { padding:8px; gap:6px; }
.bi-btt .ram { width:100%; display:block; }
/* 4:5 er opslagets eget format, saa eksemplet staar som det ville staa i feedet. object-fit:cover,
   fordi de to filer ikke har helt samme hoejde-forhold og kortene skal vaere lige hoeje. */
.bi-btt .ram img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius: var(--r-knap); border:1px solid var(--bi-linje); background:var(--bi-flade2); }
.bi-btt .tx { font-weight:600; color:var(--bi-ink); }
.bi-btt .hjx { font-size:10.5px; line-height:1.35; color:var(--bi-svag); }
@media (max-width:900px) { .bi-hjgrid { grid-template-columns:repeat(2,1fr); } }
/* Stilart-karrusellen ER introduktionens: markup'en i brandinterview.js bruger .ob-*-klasserne
   fra dashboard.html, saa udseendet kun er defineret ét sted. Her staar KUN det der skal til for
   at den kan sidde i en chatboble frem for paa en hel onboarding-skaerm — den er ellers for høj
   og skubber spoergsmaalet ud over kanten. */
.bi-carou { margin-top:10px; grid-template-columns:232px 1fr; gap:18px; min-height:0; }
.bi-carou .ob-lane { height:44px; padding:0 12px; gap:9px; }
.bi-carou .ob-lane .nm { font-size:13px; }

/* HOEJDEN. Scenen var 364px fast — bred og lav, saa et staaende produktfoto blev klemt ned til en
   smal stribe midt i to brede, slørede kanter (.ob-cardbg fylder resten). Man vaelger stilart paa
   BILLEDET, saa det er dét der skal have pladsen.
   vh og ikke et fast tal: den oprindelige bekymring var at karrusellen skubber spoergsmaalet ud
   over kanten paa en lav skaerm, og den er reel. Med et loft i vh vokser den paa en stor skaerm og
   skrumper paa en lille, saa boblen bliver i traaden begge steder.
   Skinnen er lidt lavere end scenen — samme forhold som foer, saa de to kolonner flugter. */
.bi-carou .ob-rail { height:min(48vh,460px); }
.bi-carou .ob-stage { min-height:min(52vh,500px); }

/* ── PALETTEN. Delt markup, men IKKE delt baggrund ────────────────────────────────────────
   At laane .ob-*-klasserne sparer én definition af udseendet, men de er skrevet til
   onboarding-skaermens LYSE flade. Alt der peger paa husets lyse tokens, var derfor usynligt her
   fra 4. august, hvor samtalen gik moerk:

     .ob-lane .nm   color:var(--ink)              #101511 — naesten sort paa naesten sort.
                                                  Stilarternes NAVNE. Maalt 5. august 2026: man
                                                  kunne se at der stod noget, men ikke hvad, og
                                                  skulle altsaa vaelge stilart efter billedet alene.
     .ob-lane .tk   border:rgba(15,21,17,.22)     den tomme cirkel. Vaek.
     .ob-lane:hover background:rgba(15,21,17,.04) ingen respons paa at pege.
     scrollbar-thumb                              vaek, saa listen saa faerdig ud selv om der var
                                                  flere baner under kanten.

   Det er SAMME fejl som filens hoved advarer om, bare spejlvendt: dér arvede lyse kort scenens
   lyse tekst, her arver moerke flader onboardings moerke tekst. Retter du noget i .ob-* i
   dashboard.html, saa kig herned — bloekken er den eneste der oversaetter dem til moerk. */
.bi-carou .ob-lane .nm { color:var(--bi-ink); }
.bi-carou .ob-lane .tk { border-color:var(--bi-tk-ring); }
.bi-carou .ob-lane:hover { background:var(--bi-flade); }
/* Fluebenet: husets pink til MOERKE flader, og et moerkt maerke ovenpaa. Tekst-pinken (#D11A62)
   er valgt til hvid bund, og hvidt paa lys pink er ulaeseligt — se paletten oeverst i filen. */
.bi-carou .ob-lane.sel .tk { background:var(--bb-accent); border-color:var(--bb-accent); }
.bi-carou .ob-lane.sel .tk svg { stroke:var(--bi-paa-accent); }
/* Den bane man KIGGER paa. Originalen laegger et solidt hvidt kort her; paa den moerke scene ville
   det vaere en lysende klat, og filens hoved har allerede fanget hvad solide lyse kort koster her.
   Samme greb som .rk.nu i panelet: en daempet flade og en accent-streg, ikke et lys. */
.bi-carou .ob-lane.on { background:var(--bi-flade2); border-color:var(--bi-linje); box-shadow:none; }
.bi-carou .ob-lane.on .nm { color:var(--bi-lane-on-ink); }
.bi-carou .ob-rail::-webkit-scrollbar-thumb { background:var(--bi-rul); }

@media (max-width:900px) {
  .bi-carou { grid-template-columns:1fr; }
  .bi-carou .ob-rail { height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .bi-carou .ob-stage { min-height:300px; }
}

/* Sproglisten: de valgte som pills, vaelgeren under. Samme form som "Oversæt godkendte opslag
   til" i Indstillinger — kunden skal moede ét billede begge steder. */
.bi-sprpills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.bi-sprpills .pil { display:inline-flex; align-items:center; gap:7px; font-size:13px;
  border:1px solid var(--bi-linje); background:var(--bi-flade2); border-radius: var(--r-knap); padding:5px 12px; }
.bi-sprpills .pil b { cursor:pointer; opacity:.5; font-weight:700; }
.bi-sprpills .pil b:hover { opacity:1; color:var(--bi-fejl); }
.bi-sprpills .tom { font-size:12.5px; color:var(--bi-svag); }

.bi-indst .fod { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.bi-indst .fod .bi-fsend { order:2; }
.bi-spring { border:0; background:none; font:inherit; font-size:11.5px; padding:4px 0;
  color:var(--bi-svag); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.bi-spring:hover { color:var(--bi-ink); }
.bi-indst .kraev { font-size:11.5px; color:var(--bi-svag); }

/* "Agenten skriver": tre prikker i agentens egen boble, samme sted som svaret lander. Boblen er
   trukket ind til prikkernes bredde, saa den ikke ligner en tom besked mens man venter. */
.bi-skriver .bl.skriver { display:inline-flex; align-items:center; padding:13px 15px; }
.bi-prikker { width:26px; height:13px; display:block; color:var(--bi-svag); }

/* Samme prikker INDE i en knap der venter (biKnapVenter). Knapper der henter noget — "Vis mig tre
   bud", "Tag emnet op igen" — skiftede foer kun deres tekst, og det er let at overse paa en lille
   spoegelsesknap: fladen ser doed ud mens modelkaldet loeber. `currentColor` arves fra knappen, saa
   prikkerne foelger dens farve i BEGGE paletter frem for at have deres egen. */
.bi-kventer { display:inline-flex; align-items:center; gap:2px; }
.bi-prikker.sm { width:18px; height:9px; color:currentColor; }

/* Inputfeltet. */
.bi-felt { flex:0 0 auto; padding:0 20px 16px; }
.bi-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.bi-chip { border:1px solid var(--bi-linje); background:var(--bi-flade); border-radius: var(--r-knap);
  font:inherit; font-size:12.5px; padding:7px 14px; cursor:pointer; color:var(--bi-ink);
  transition:border-color .15s, background .15s; }
.bi-chip:hover { border-color:var(--bb-accent); }
.bi-chip.primaer { background:var(--bb-accent); border-color:var(--bb-accent); color:var(--bi-paa-accent); }
.bi-chip:disabled { opacity:.55; cursor:default; }
.bi-input { display:flex; gap:8px; align-items:flex-end; border:1px solid var(--bi-linje);
  border-radius: var(--r-knap); background:var(--bi-flade); padding:8px; transition:border-color .15s; }
.bi-input:focus-within { border-color:var(--bb-accent); }
/* Feltet er slaaet fra mens et valg venter: fritekst her ville kraeve et modelkald for at blive
   oversat til en vaerdi, og serveren afviser det. Et aabent felt ville vaere en faelde. */
.bi-input.laast { opacity:.5; }
.bi-input.laast, .bi-input.laast textarea, .bi-input.laast .bi-send { cursor:not-allowed; }
.bi-input textarea { flex:1; border:0; outline:0; resize:none; font:inherit; font-size:13.5px;
  line-height:1.6; background:transparent; color:var(--bi-ink); min-height:36px; max-height:120px;
  padding:6px 4px; }
.bi-send { flex:0 0 auto; width:32px; height:32px; border-radius: var(--r-knap); border:0; cursor:pointer;
  background:var(--bb-accent); color:var(--bi-paa-accent); display:flex; align-items:center; justify-content:center; }
.bi-send svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
/* Tomt felt: knappen daemper sig frem for at love en handling der ikke sker. Kun visuelt —
   klikket er stadig lovligt, og biSend afviser selv tom tekst. */
.bi-send.tom { background:var(--bi-flade2); color:var(--bi-svag); }
.bi-hint { font-size:11px; color:var(--bi-svag); margin-top:7px; padding:0 4px; }

/* Fremdrifts-panelet: man skal kunne SE bogen fylde sig mens man snakker. */
.bi-panel { flex:0 0 250px; border-left:1px solid var(--bi-panel-linje); background:var(--bi-panel-bg);
  display:flex; flex-direction:column; overflow-y:auto; font-size:12px; }
@media (max-width:1000px) { .bi-panel { display:none; } }
.bi-panel .hd { display:flex; justify-content:space-between; align-items:baseline; padding:15px 16px 9px;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--bi-svag); }
.bi-panel .hd b { color:var(--bb-accent); font-size:12px; letter-spacing:0; }
.bi-panel .bar { height:5px; margin:0 16px 12px; border-radius:99px; background:var(--bi-flade2);
  overflow:hidden; }
.bi-panel .bar i { display:block; height:100%; border-radius:99px; background:var(--bb-accent);
  transition:width .5s ease; }
.bi-panel .grp { padding:8px 16px; }
.bi-panel .grp-hd { display:flex; justify-content:space-between; margin-bottom:6px; font-size:11.5px;
  font-weight:600; color:var(--bi-ink); }
.bi-panel .grp-hd .tal { color:var(--bi-svag); font-weight:400; }
.bi-panel .rk { display:flex; align-items:center; gap:8px; padding:3px 0; color:var(--bi-svag); }
.bi-panel .rk .mk { width:12px; text-align:center; flex:0 0 auto; }
.bi-panel .rk.ja { color:var(--bi-ink); }
.bi-panel .rk.ja .mk { color:var(--bb-accent); }
/* Det emne der spoerges om lige nu skal kunne findes med oejnene med det samme. */
/* Sprunget over: taeller med i fremdriften (ellers laaser bogen aldrig op), men skal kunne ses
   som noget andet end et svar. Derfor den daempede farve — ikke accentfarven som ✓ faar. */
/* HALVT BESVARET. Skal kunne skelnes fra baade ✓ og ○ uden at raabe: det er ikke en fejl, det er
   det emne der giver mest hvis man gaar tilbage til det. Rav frem for groen, saa oejet finder dem. */
.bi-panel .rk.tyndt { color:var(--bi-ink); }
.bi-panel .rk.tyndt .mk { color:var(--bi-halv); }
.bi-panel .rk.sprunget { color:var(--bi-svag); }
.bi-panel .rk.sprunget .mk { color:var(--bi-svag); opacity:.8; }
.bi-panel .rk.nu { color:var(--bi-ink); font-weight:600; }
.bi-panel .rk.nu .nv { box-shadow:inset 0 -2px 0 var(--bb-accent); }
.bi-panel .fod { margin-top:auto; padding:12px 16px; border-top:1px solid var(--bi-linje);
  font-size:10px; color:var(--bi-svag); line-height:1.6; }

/* ── VEJEN TILBAGE ────────────────────────────────────────────────────────────────────────
   Et gennemgaaet emne er en KNAP. Fluebenet sagde foer kun AT emnet var besvaret; hvad der blev
   skrevet ned, og om det stadig passer et halvt aar senere, kunne man ikke komme til.

   Afdaempet med vilje (se public/CLAUDE.md): ingen ramme, ingen ring. Raekken faar en flade paa
   hover, og pilen — den eneste faste forskel paa en knap og en linje — staar svagt fremme, saa man
   kan SE hvilke emner der kan aabnes uden at skulle pege paa dem én ad gangen. */
.bi-panel button.rk { width:calc(100% + 12px); margin-left:-6px; padding:3px 6px; border:0;
  border-radius: var(--r-lille); background:transparent; font:inherit; font-size:12px; text-align:left;
  cursor:pointer; }
.bi-panel button.rk:hover, .bi-panel button.rk:focus-visible { background:var(--bi-flade2); outline:0; }
.bi-panel .rk .nv { flex:1; min-width:0; }
.bi-panel .rk .pil { flex:0 0 auto; color:var(--bi-svag); opacity:.45; font-size:13px; line-height:1; }
.bi-panel button.rk:hover .pil, .bi-panel button.rk:focus-visible .pil { opacity:1; color:var(--bi-ink); }

/* Detaljen: hvad vi fik ud af samtalen om ét emne. Panelet BYTTES ud frem for at faa en rude
   ovenpaa — kunden kigger allerede paa listen naar de trykker, og et lag over samtalen ville
   flytte dem et sted hen de ikke bad om. */
.bi-panel.detalje { padding-bottom:16px; }
.bi-panel .dt-hd { padding:13px 16px 8px; }
.bi-tilbage { border:0; background:transparent; font:inherit; font-size:11px; color:var(--bi-svag);
  cursor:pointer; padding:0; }
.bi-tilbage:hover { color:var(--bi-ink); }
.bi-panel .dt { padding:0 16px; }
.bi-panel .dt h4 { font-family:'Poppins',sans-serif; font-size:16.5px; font-weight:600; line-height:1.25;
  margin:0 0 5px; color:var(--bi-ink); }
.bi-panel .dt .mrk { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bi-svag); margin-bottom:11px; }
.bi-panel .dt .mrk.ja { color:var(--bb-accent); }
.bi-panel .dt .dt-tip { margin:0 0 12px; padding:9px 11px; border-radius: var(--r-knap); font-size:12px;
  line-height:1.5; color:var(--bi-halv); background:var(--bi-halv-svag);
  border:1px solid var(--bi-halv-linje); }
.bi-panel .dt p { margin:0 0 13px; padding:10px 12px; border-radius: var(--r-knap); font-size:12.5px;
  line-height:1.6; color:var(--bi-ink); background:var(--bi-flade); border:1px solid var(--bi-linje); }
.bi-panel .dt p.tom { color:var(--bi-svag); }
.bi-dt-ret { width:100%; border:1px solid var(--bi-linje); border-radius: var(--r-knap); background:var(--bi-flade2);
  color:var(--bi-ink); font:inherit; font-size:12.5px; padding:8px 14px; cursor:pointer; }
.bi-dt-ret:hover { border-color:var(--bb-accent); color:var(--bb-accent); }
.bi-dt-ret[disabled] { opacity:.55; cursor:progress; }
.bi-panel .dt .note { margin-top:9px; font-size:10.5px; line-height:1.55; color:var(--bi-svag); }
.bi-panel .dt .bi-fejl { margin-top:9px; font-size:11.5px; }

.bi-fejl { font-size:12.5px; color:var(--bi-fejl); }
.bi-kol.midt { align-items:center; justify-content:center; overflow-y:auto; }
.bi-faerdig { text-align:center; padding:70px 20px; max-width:60ch; }
.bi-faerdig h2 { font-family:'Poppins',sans-serif; font-size:26px; font-weight:600; margin:0 0 10px; }
.bi-faerdig p { font-size:13.5px; line-height:1.65; color:var(--bi-svag); max-width:44ch; margin:0 auto 20px; }
/* Vejen tilbage staar dæmpet under beskeden: den er ikke en handling man skal tage NU, den er en
   oplysning om at fladen stadig kan bruges naar noget aendrer sig om et halvt aar. */
.bi-faerdig p.senere { font-size:12.5px; margin-bottom:22px; }
.bi-igen { border:1px solid var(--bi-linje); background:var(--bi-flade2); border-radius: var(--r-knap); font:inherit;
  font-size:12.5px; padding:8px 17px; cursor:pointer; color:var(--bi-ink); }
.bi-faerdig .knapper { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }

/* Bogens gamle laase-flade (.bb-laast, .bb-gaa, .bb-stage, .bb-arrow, .bb-wrap) og .bi-aabn er
   FJERNET 4. august 2026. Brandbogen blev slettet 30. juli, og klasserne havde nul forekomster i
   baade brandinterview.js og dashboard.html — de blev kun malet om ved hver stilaendring. */