/* HISTORIE-FLADEN — opslag der ikke handler om et produkt.
   Egen fil, fordi den er flowets ejendom: skal historie-opslagene se anderledes ud, rettes DER
   her, og produkt-flowets flade kan ikke maerke det. Husets variabler genbruges (--ink, --gold,
   --line, --muted), saa den ikke ligner et fremmedlegeme. */

/* Ankeret saettes HER og ikke i dashboard.html: fladen skal daekke Skab-visningen, og en regel i
   husets egen CSS ville vaere en aendring i en fil produkt-flowet ogsaa bruger. */
#view-build { position:relative; }

/* SCENEN FOELGER MED IND: forsidens historie-kort er tonet cyan (skabstart.css), og den samme
   tone ligger her som en vask over papiret — klikket ind i flowet lander i det rum kortet
   lovede. Kun en vask; kort og krom er stadig stille. */
#hi_flade { position:absolute; inset:0; z-index:5;
  background:radial-gradient(110% 62% at 50% -6%, rgba(61,225,255,.13) 0%, rgba(61,225,255,0) 58%), var(--papir,#F2F1EC);
  display:flex; flex-direction:column; overflow:hidden; }
#hi_flade[hidden] { display:none; }

.hi-top { display:flex; align-items:center; gap:12px; padding:16px 26px 14px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.hi-tilbage { border:1px solid var(--line); background:rgba(255,255,255,.7); border-radius: var(--r-knap);
  padding:7px 13px; font:inherit; font-size:13px; color:var(--ink-2,#3a423c); cursor:pointer; }
.hi-tilbage:hover { background:#fff; }
.hi-top h2 { font-family:'Poppins',sans-serif; font-size:19px; margin:0; font-weight:600; }
.hi-krumme { font-size:12.5px; color:var(--muted); margin-left:auto; }

.hi-krop { flex:1 1 auto; overflow-y:auto; padding:30px 26px 40px; }
.hi-midt { max-width:660px; margin:0 auto; }

/* --- Trin A: den frie linje --- */
.hi-h1 { font-family:'Poppins',sans-serif; font-weight:600; font-size:33px; letter-spacing:-.012em; line-height:1.18; margin:0 0 9px; }
.hi-sub { color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 26px; }
.hi-felt { width:100%; border:1px solid var(--line); border-radius: var(--r-kort); padding:15px 16px;
  font:inherit; font-size:15.5px; line-height:1.55; background:#fff; resize:vertical; min-height:104px;
  color:var(--ink); }
.hi-felt:focus { outline:none; border-color:var(--maerke); box-shadow:0 0 0 3px rgba(255,77,141,.13); }
/* Spoergsmaal i overskriftsskrift, ikke versal-etiketter — samme omlaegning som .b-fld>label og
   .ps-lab, saa de tre flows taler ens. */
.hi-lab { font-family:'Poppins',sans-serif; font-size:16px; letter-spacing:-.01em; color:var(--ink);
  font-weight:600; margin:26px 0 10px; }

.hi-plats { display:flex; gap:9px; flex-wrap:wrap; }
.hi-plat { border:1px solid var(--line); background:rgba(255,255,255,.75); border-radius: var(--r-knap);
  padding:9px 15px; font:inherit; font-size:13.5px; cursor:pointer; color:var(--ink-2,#3a423c); }
.hi-plat.on { border-color:var(--maerke); background:rgba(255,77,141,.09); color:var(--ink); font-weight:600; }

.hi-knap { border:0; border-radius: var(--r-knap); padding:12px 22px; font:inherit; font-size:14.5px;
  font-weight:600; cursor:pointer; background:var(--ink); color:#fff; }
.hi-knap:disabled { opacity:.35; cursor:default; }
/* Den primaere vej frem baerer knap-gradienten fra tokens.css, med ink-tekst — som produkt-
   flowets .b-btn, saa de to flows ikke har hver sin "go"-knap. */
.hi-knap.gron { background:var(--maerke-grad,var(--maerke)); color:var(--maerke-ink);
  font-weight:700; box-shadow:0 12px 26px -12px rgba(225,30,110,.5); }
.hi-bund { display:flex; justify-content:flex-end; gap:10px; margin-top:30px; align-items:center; }

/* --- Trin B: samtalen + kortet --- */
.hi-to { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px;
  max-width:1080px; margin:0 auto; align-items:start; }
@media (max-width:900px){ .hi-to { grid-template-columns:minmax(0,1fr); } }

.hi-kort-h { font-family:'Poppins',sans-serif; font-size:15px; letter-spacing:-.01em; color:var(--ink);
  font-weight:600; margin:0 0 11px; }

.hi-chat { background:#fff; border:1px solid var(--line); border-radius: var(--r-kort); padding:18px;
  box-shadow:0 22px 44px -32px rgba(20,16,24,.4); }
.hi-traad { display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.hi-besked { font-size:14.5px; line-height:1.6; }
.hi-besked.ai { color:var(--ink); }
.hi-besked.kunde { color:var(--ink-2,#3a423c); background:var(--maerke-svag); border-radius: var(--r-knap);
  padding:10px 13px; align-self:flex-end; max-width:88%; }
.hi-hvem { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  font-weight:600; margin-bottom:4px; }
.hi-skriv { display:flex; gap:9px; align-items:flex-end; border-top:1px solid var(--line); padding-top:14px; }
.hi-skriv textarea { flex:1 1 auto; border:1px solid var(--line); border-radius: var(--r-knap); padding:11px 13px;
  font:inherit; font-size:14.5px; line-height:1.5; resize:none; min-height:44px; max-height:150px; background:#fff; }
.hi-skriv textarea:focus { outline:none; border-color:var(--maerke); }
.hi-send { border:0; background:var(--ink); color:#fff; border-radius: var(--r-knap); padding:11px 17px;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; flex:0 0 auto; }
.hi-send:disabled { opacity:.35; cursor:default; }

/* Kortet: den SYNLIGE sandhed. Kunden skal kunne se praecis hvad modellen har faaet at vide,
   og rette det. Det er baade kvalitetsgrebet og kvitteringen. */
/* Den pink overkant er "det her er dit" — samme billet-greb som produkt-flowets rail. */
.hi-kort { background:#fff; border:1px solid var(--line); border-top:3px solid var(--maerke);
  border-radius: var(--r-kort); padding:18px; position:sticky; top:0;
  box-shadow:0 22px 44px -32px rgba(20,16,24,.4); }
.hi-raek { border-top:1px solid var(--line); padding:11px 0 0; margin-top:11px; }
.hi-raek:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.hi-rlab { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:5px; }
.hi-rin { width:100%; border:1px solid transparent; border-radius: var(--r-knap); padding:6px 8px; font:inherit;
  font-size:14px; line-height:1.5; background:transparent; color:var(--ink); resize:vertical; }
.hi-rin:hover { border-color:var(--line); }
.hi-rin:focus { outline:none; border-color:var(--maerke); background:#fff; }
.hi-rin::placeholder { color:#A9A1B0; }
/* PEGEPINDEN. Etiketten baerer et "valgfrit" saa feltet ikke laeses som endnu et krav foer man
   overhovedet maa se tre forslag — det er en genvej, ikke en port. */
.hi-valgfri { text-transform:none; letter-spacing:0; font-weight:400; color:#A9A1B0; margin-left:6px; }
/* Efter forslagene staar den NEDERST og adskilt: dér er den ikke laengere det foerste man goer,
   men vejen til tre andre bud. Oeverst i boksen ville den konkurrere med de tre kort. */
.hi-styring-igen { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }
.hi-vaelg { width:100%; border:1px solid var(--line); border-radius: var(--r-knap); padding:7px 9px; font:inherit;
  font-size:14px; background:#fff; color:var(--ink); cursor:pointer; }
.hi-vaelg:focus { outline:none; border-color:var(--maerke); }
.hi-gaet { font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.45; }

/* --- Trinviseren i toppen --- */
.hi-krumme span { color:var(--muted); }
.hi-krumme span.naa { color:var(--ink); font-weight:600; }
.hi-krumme i { color:var(--line); font-style:normal; margin:0 6px; }

/* --- Trin 3: DINE billeder. Ingen generator — upload + retouch. --- */
.hi-midt.bred { max-width:980px; }

/* De to veje. Eget foto staar FOERST og er det brede valg: kunden var der, og et rigtigt billede
   slaar et opdigtet hver gang. */
.hi-veje { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
@media (max-width:700px){ .hi-veje { grid-template-columns:minmax(0,1fr); } }
.hi-vej { text-align:left; border:1px solid var(--line); background:rgba(255,255,255,.75);
  border-radius: var(--r-kort); padding:15px 16px; cursor:pointer; font:inherit; color:var(--ink);
  display:flex; flex-direction:column; gap:4px; }
.hi-vej:hover { border-color:rgba(15,21,17,.2); background:#fff; }
.hi-vej.on { border-color:var(--maerke); background:rgba(255,77,141,.08); }
.hi-vej b { font-size:15px; }
.hi-vej span { font-size:13px; color:var(--muted); line-height:1.5; }

.hi-genboks { background:#fff; border:1px solid var(--line); border-radius: var(--r-kort); padding:16px; margin-bottom:20px; }

/* De tre retninger. Kunden vaelger HVAD billedet skal vise, foer vi bruger penge paa at lave det. */
.hi-retninger { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:8px; }
@media (max-width:820px){ .hi-retninger { grid-template-columns:minmax(0,1fr); } }
.hi-retning { text-align:left; border:1px solid var(--line); background:rgba(255,255,255,.7);
  border-radius: var(--r-knap); padding:13px 14px; cursor:pointer; font:inherit; color:var(--ink);
  display:flex; flex-direction:column; gap:4px; }
.hi-retning:hover { border-color:rgba(15,21,17,.2); background:#fff; }
.hi-retning.on { border-color:var(--maerke); background:rgba(255,77,141,.08); }
.hi-retning b { font-size:14px; }
.hi-retning span { font-size:12.5px; color:var(--muted); line-height:1.5; }

.hi-drop { width:100%; border:1.5px dashed rgba(15,21,17,.18); background:rgba(255,255,255,.5);
  border-radius: var(--r-kort); padding:26px; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; font:inherit; color:var(--ink); margin-bottom:20px; }
.hi-drop:hover { border-color:var(--maerke); background:rgba(255,77,141,.05); }
.hi-drop b { font-size:15px; }
.hi-drop span { font-size:13px; color:var(--muted); }

.hi-billeder { display:flex; flex-direction:column; gap:16px; }
.hi-bil { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; background:#fff;
  border:1px solid var(--line); border-radius: var(--r-kort); padding:14px; opacity:.55; transition:opacity .15s; }
.hi-bil.med { opacity:1; }
@media (max-width:700px){ .hi-bil { grid-template-columns:minmax(0,1fr); } }

.hi-bil-foto { position:relative; border-radius: var(--r-knap); overflow:hidden; background:var(--felt-dyb,#E9E7E1); }
.hi-bil-foto img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5; }
.hi-bil-over { position:absolute; inset:0; background:rgba(255,255,255,.82); display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--ink); }
.hi-bil-med { position:absolute; left:8px; bottom:8px; background:rgba(255,255,255,.94);
  border-radius: var(--r-knap); padding:5px 9px; font-size:12.5px; display:flex; align-items:center; gap:6px; cursor:pointer; }

.hi-bil-hoej { display:flex; flex-direction:column; gap:9px; }
.hi-omr { display:flex; flex-wrap:wrap; gap:6px 14px; }
.hi-omrv { font-size:13.5px; display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--ink-2,#3a423c); }
.hi-bil-knap { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.hi-lille { border:1px solid var(--line); background:var(--ink); color:#fff; border-radius: var(--r-knap);
  padding:7px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.hi-lille.let { background:rgba(255,255,255,.8); color:var(--ink-2,#3a423c); font-weight:400; }
.hi-lille:disabled { opacity:.35; cursor:default; }

/* --- Trin 4: teksterne --- */
.hi-tblok { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; background:#fff;
  border:1px solid var(--line); border-radius: var(--r-kort); padding:14px; margin-bottom:16px; }
@media (max-width:700px){ .hi-tblok { grid-template-columns:minmax(0,1fr); } }
.hi-tfoto { width:100%; border-radius: var(--r-knap); object-fit:cover; aspect-ratio:4/5; display:block; }
.hi-tkol { display:flex; flex-direction:column; gap:12px; }
.hi-traek { display:flex; flex-direction:column; }
.hi-rin.stor { border-color:var(--line); background:#fff; line-height:1.6; }

/* Lille afklaring under skrivefeltet i samtalen. Daempet: den skal kunne laeses naar man leder
   efter en upload, og ellers ikke tage plads fra traaden. */
.hi-note { font-size:12.5px; color:var(--muted); margin:7px 2px 0; }
.hi-status { font-size:13px; color:var(--muted); margin-right:auto; }
.hi-status.klar { color:var(--gold); font-weight:600; }
.hi-fejl { background:rgba(194,24,60,.06); border:1px solid rgba(194,24,60,.22); color:var(--status-fejl,#C2183C);
  border-radius: var(--r-knap); padding:11px 13px; font-size:13.5px; margin-bottom:14px; line-height:1.5; }
/* "AI TÆNKER": tre prikker der hopper, i agentens EGEN boble — præcis hvor svaret lander.
   Her stod før kun ordet "Tænker…" i kursiv, og et stykke tekst der ikke bevæger sig kan ikke
   skelnes fra en flade der er gået i stå. Målt 6. august 2026, og påpeget igen da resten var
   rettet: "det ligner at den er gået i stå."

   Samme greb som branding-samtalen (biSkriverBoble i brandinterview.js), men bevidst i CSS og
   ikke som den SVG/SMIL de bruger: de to flader er selvstændige filer med hver sit stylesheet,
   og et delt JS-modul for tre prikker ville binde dem sammen på noget rent kosmetisk.
   Keyframes har samme egenskab som SMIL — de kører af sig selv og skal ikke stoppes når
   fladen tegnes om, og tegn() bygger den her forfra ved hver tur. */
.hi-tanke { display:flex; flex-direction:column; }
.hi-prikker { display:inline-flex; align-items:flex-end; gap:4px; height:14px; padding-top:3px; }
.hi-prikker i { width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:hiHop .6s cubic-bezier(.33,.66,.66,1) infinite; }
/* Forskudt start, så de tre triller frem for at pulsere i takt. Samme 0,1 s-trin som samtalen. */
.hi-prikker i:nth-child(2) { animation-delay:.1s; }
.hi-prikker i:nth-child(3) { animation-delay:.2s; }
@keyframes hiHop { 0%,60%,100% { transform:translateY(0); opacity:.55; }
                   30% { transform:translateY(-5px); opacity:1; } }
/* Uden bevægelse for dem der har bedt om det: prikkerne bliver, faldende i styrke, så man stadig
   kan se AT der arbejdes. */
@media (prefers-reduced-motion:reduce){
  .hi-prikker i { animation:none; }
  .hi-prikker i:nth-child(1){ opacity:.45 } .hi-prikker i:nth-child(2){ opacity:.65 }
  .hi-prikker i:nth-child(3){ opacity:.85 }
}
/* Samme prikker inde i en knap der venter. `currentColor` arves fra knappen, så de følger dens
   farve i stedet for at have deres egen — en grøn knap og en let knap er ikke ens. */
.hi-prikker.sm { height:10px; gap:3px; padding:0 0 0 6px; vertical-align:middle; }
.hi-prikker.sm i { width:4px; height:4px; background:currentColor; }