/* AI-REDIGERINGS-KORTET.  Hører til public/billedai.js.
 *
 * PORTERET fra den React/shadcn-komponent kunden valgte (AIMultiModalGeneration): kort med header,
 * faneblade, prompt-felt med tryllestav og forslags-popover, Advanced-switch, indstillingsrækker
 * med ikon til venstre og dropdown til højre, og en bred gradient-knap nederst. Ingen af de ni
 * pakker er taget med — Radix' Select, Switch, Tabs og Popover er få hundrede linjer CSS og et par
 * klik hver, og appen har hverken React, Tailwind eller et byggetrin.
 *
 * MÅLENE ER KOMPONENTENS, ikke husets: rounded-2xl (16px), rounded-xl (12px), zinc-paletten,
 * 4px-gitteret i afstandene, h-8 på dropdowns, h-10 på knappen, min-h-[600px] på kortet. Det er
 * dét kunden pegede på, og en "næsten samme" flade var netop problemet sidste gang.
 *
 * Farverne er literaler og ikke var(--…) fra dashboard.html: kortet vises OGSÅ af
 * public/billedtest.html (scene-siden scripts/scener/redigerkort.mjs kører imod), og den side har
 * ikke husets token-blok. En var(--green) dér ville falde tilbage til ingenting, og knappen ville
 * stå gennemsigtig i netop den flade der findes for at fange den slags.
 *
 * HUSETS FARVER, kopieret som literaler (10. august 2026). Kortet var porteret med komponentens
 * egen fuchsia→violet gradient, og den findes ikke ét andet sted i appen: knappen, spinneren og
 * fremdriftslinjen lyste lilla i en flade der ellers er grøn og creme. Værdierne er dashboard.html'
 * `--skov-900`, `--green` og `--kobber`. Ændres de dér, skal de ændres her — der er ingen port der
 * fanger det, fordi de to filer ikke kan se hinanden. */
:root {
  --ba-skov: #141018;       /* --skov-900. Husets primære handling, fx .b-btn */
  --ba-skov-2: #241E28;     /* --skov-700. Hover */
  --ba-groen: #D11A62;      /* --maerke-tekst. Accent: markering og fremdrift */
  --ba-groen-2: #FF4D8D;    /* --maerke. Den lyse ende af accenten */
  --ba-loft: 0 12px 24px -10px rgba(6, 14, 9, .5);
}

#ba_rod[hidden] { display: none; }
.ba-bag {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(14, 17, 15, .55); backdrop-filter: blur(3px);
}
body.ba-laast { overflow: hidden; }

/* Kortet: max-w-3xl (768px), rounded-2xl, min-h-[600px], flex-col justify-between gap-2 */
/* min-height er VÆK. Komponentens min-h-[600px] giver balance dér, fordi dens indstillingsblok har
   syv rækker; her blev det et hul på 250px mellem "Avanceret" og bunden. Set på skærmen 6. august
   2026 — kortet så uafsluttet ud. Højden følger nu indholdet, og handlingsknappen sidder i en fast
   bundlinje i stedet for at blive skubbet ned af tomrum. */
.ba-kort {
  position: fixed; z-index: 9991; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(768px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid #e4e4e7; border-radius: var(--r-kort); overflow: hidden;
  box-shadow: 0 8px 30px rgb(0 0 0 / .12);
  font-family:'Nunito Sans',system-ui,sans-serif; color: #18181b;
}

/* Header: p-4, flex justify-between, border-b */
.ba-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; border-bottom: 1px solid #e4e4e7; flex: none;
}
.ba-head h3 { font-size: 14px; font-weight: 500; margin: 0; color: #18181b; }
.ba-head p { font-size: 12px; color: #71717a; margin: 2px 0 0; }
.ba-ikonknap {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: none; background: none; border-radius: var(--r-knap); cursor: pointer; color: #71717a;
}
.ba-ikonknap:hover { background: #f4f4f5; }
.ba-ikonknap svg { width: 16px; height: 16px; }

/* Faneblade: bg-muted p-1 rounded-md, aktiv = hvid med skygge.
   Kolonnerne er IKKE et fast tal: fanerne kommer fra serveren (/api/config), og et hårdkodet
   repeat(3,1fr) efterlod en tom tredjedel den dag niveauerne blev to. */
.ba-tabs { padding: 0 16px; flex: none; }
.ba-tablist {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  background: #f4f4f5; border-radius: var(--r-lille); padding: 4px; height: 40px;
}
.ba-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 500; color: #71717a;
  background: none; border: none; border-radius: var(--r-lille); cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s;
}
.ba-tab svg { width: 16px; height: 16px; flex: none; }
.ba-tab.valgt { background: #fff; color: #18181b; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
/* min-width:0 paa gitter-boern: uden den vokser en lang fane-etikette ud over sin kolonne og
   giver hele kortet en vandret rullebjaelke. */
.ba-tab { min-width: 0; }
.ba-tab span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .ba-tab span { display: none; } }

/* overflow-x:hidden — kortet ruller lodret, aldrig vandret. En vandret bjaelke i en dialog ser ud
   som om noget er gaaet i stykker. */
.ba-krop { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }

/* Fejl-stribe: m-4, rød, rounded-xl */
/* align-items:flex-start, ikke center. Beskeden er ikke laengere én linje men to-tre saetninger
   der siger hvad kunden kan GOERE (services/content/billedfejl.ts) — centreret ville ikonet svaeve
   midt ude i teksten. */
.ba-fejl {
  display: flex; align-items: flex-start; gap: 9px; margin: 16px 16px 0; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.5; color: #b91c1c; background: #fef2f2; border-radius: var(--r-knap);
}
.ba-fejl p { margin: 0; }
.ba-fejl svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Formularen. justify-between er væk sammen med min-height: uden syv indstillingsrækker at fylde
   med blev mellemrummet et hul. Indholdet flyder nu fra toppen. */
.ba-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ba-top { display: flex; flex-direction: column; gap: 12px; }
.ba-bund { display: flex; flex-direction: column; gap: 12px; }
/* Handlingen sidder FAST i bunden. Den lå før i rullefeltet, og i resultat-visningen betød det at
   "Redigér videre" og "Brug denne" lå under kanten — et rigtigt klik ramte baggrunden bagved og
   lukkede kortet. Fanget af scripts/skaerm.mjs, ikke af et menneske, og det er hele pointen. */
.ba-fod {
  position: sticky; bottom: 0; z-index: 1; flex: none;
  padding: 12px 16px; background: #fff; border-top: 1px solid #e4e4e7;
}

.ba-feltrk { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ba-feltlbl { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #71717a; }
.ba-feltlbl svg { width: 16px; height: 16px; }
.ba-wand {
  display: flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px;
  border: none; background: none; border-radius: var(--r-lille); cursor: pointer; color: #71717a;
}
.ba-wand:hover { background: #f4f4f5; }
.ba-wand svg { width: 14px; height: 14px; }

/* Prompt-feltet: min-h-[80px], bg-zinc-100, rounded-xl, fokus = mørk kant */
.ba-txt {
  width: 100%; min-height: 80px; height: 80px; padding: 12px; border: 1px solid transparent; border-radius: var(--r-knap);
  background: #f4f4f5; font-family: inherit; font-size: 14px; line-height: 1.5; color: #18181b;
  outline: none; resize: vertical;
}
.ba-txt::placeholder { color: #71717a; }
.ba-txt:focus { border-color: var(--ba-skov); }

/* HENVISNINGEN. Et RÅD, ikke en fejl — derfor sand/okker og ikke rød, og derfor ingen ramme om
   hele feltet. Den skal kunne overses af den der ved hvad hun laver, og ses af den der ikke gør. */
.ba-henvis {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; padding: 10px 12px;
  background: #fdf8ed; border: 1px solid #f0e2c4; border-radius: var(--r-knap);
}
.ba-henvis svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #a97b3c; }
.ba-henvis p { margin: 0; font-size: 12.8px; line-height: 1.5; color: #6b5836; }
.ba-henvisknap {
  margin-top: 7px; padding: 5px 11px; font: inherit; font-size: 12.2px; font-weight: 500;
  color: #5c4a2c; background: #fff; border: 1px solid #e2d2ae; border-radius: var(--r-knap); cursor: pointer;
}
.ba-henvisknap:hover { background: #faf3e6; border-color: #cdb682; }

/* Forslags-popoveren: w-72, p-2, border, shadow-md */
.ba-pop {
  position: absolute; z-index: 9992; width: 288px; padding: 8px;
  background: #fff; border: 1px solid #e4e4e7; border-radius: var(--r-kort); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.ba-pop h4 { font-size: 12px; font-weight: 500; color: #71717a; margin: 0 0 4px; padding: 0 4px; }
.ba-pop button {
  display: block; width: 100%; text-align: left; padding: 8px; font: inherit; font-size: 12px;
  color: #18181b; background: none; border: none; border-radius: var(--r-knap); cursor: pointer;
}
.ba-pop button:hover { background: #f4f4f5; }

/* Switch: h-6 w-11, knap h-5 w-5 der glider */
.ba-switchrk { display: flex; align-items: center; gap: 8px; }
.ba-switch {
  position: relative; width: 44px; height: 24px; flex: none; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--r-lille); background: #e4e4e7; transition: background .15s;
}
.ba-switch[aria-checked=true] { background: var(--ba-skov); }
.ba-switch i {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .15s;
}
.ba-switch[aria-checked=true] i { transform: translateX(20px); }
.ba-switchlbl { font-size: 12px; color: #71717a; cursor: pointer; }

/* Advanced-boksen: space-y-3 p-3 bg-zinc-50 rounded-xl */
.ba-av { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: #fafafa; border-radius: var(--r-knap); }
.ba-av label.lille { display: block; font-size: 12px; color: #71717a; margin-bottom: 8px; }
.ba-av .ba-txt { min-height: 60px; background: #fff; font-size: 12px; }
.ba-avrk { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.ba-avrk span:first-child { color: #71717a; }
.ba-avrk span:last-child { color: #3f3f46; }

/* Afkrydsningerne — samme kort-sprog som resten.
   Bruges af BÅDE <label> (Avanceret) og <button> (Retning). Derfor font:inherit: en <button> arver
   ikke sidens skrift af sig selv, og chippen ville stå i browserens systemskrift ved siden af en
   ellers ens <label>-chip. */
.ba-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ba-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font: inherit; font-size: 12px; color: #18181b;
  border: 1px solid #e4e4e7; border-radius: var(--r-knap); background: #fff; cursor: pointer; user-select: none;
}
.ba-chip:hover { border-color: #a1a1aa; }
.ba-chip.on { border-color: var(--ba-skov); background: var(--ba-skov); color: #fff; }
.ba-chip.on:hover { border-color: var(--ba-skov-2); background: var(--ba-skov-2); }
.ba-chip input { display: none; }

/* RETNINGEN på "Lys og farver". Den står hvor den grå indstillingsblok stod på det frie niveau,
   men uden boks om sig: én valgrække er ikke en gruppe af indstillinger. */
.ba-retning { display: flex; flex-direction: column; gap: 10px; }
.ba-retning .ba-note { margin-top: 2px; }

/* NY SCENE: det valgfrie "Hvad er det?". Ét linjefelt, ikke et tekstområde — feltet er et NAVN på
   højst 60 tegn, og et felt der ser ud som om der er plads til en beskrivelse, inviterer til en. */
.ba-hvad { display: flex; flex-direction: column; gap: 6px; }
.ba-hvad label.lille { display: block; font-size: 12px; color: #71717a; margin: 0; }
.ba-linje { min-height: 0; height: 38px; resize: none; }
.ba-valgfri {
  margin-left: 6px; padding: 1px 7px; font-size: 10.5px; letter-spacing: .02em;
  color: #71717a; background: #f4f4f5; border-radius: var(--r-lille);
}
.ba-hvad .ba-note { margin-top: 2px; }

/* GUIDEN. Foldet sammen som standard — knappen skal ligne et tilbud, ikke en advarsel, saa den
   baerer ingen ramme og ingen farve foer man peger paa den. */
.ba-guide { display: flex; flex-direction: column; gap: 10px; }
.ba-guideknap {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 5px 9px 5px 7px; margin-left: -7px;
  font: inherit; font-size: 12.5px; color: #71717a;
  background: none; border: none; border-radius: var(--r-knap); cursor: pointer;
}
.ba-guideknap:hover { background: #f4f4f5; color: #18181b; }
.ba-guideknap svg { width: 14px; height: 14px; flex: none; }
/* Pilen tegnes i CSS og ikke som et ikon mere: den skal DREJE, og et <svg> der byttes ud ved hvert
   klik kan ikke animere. */
.ba-pil {
  width: 7px; height: 7px; flex: none; margin-left: 1px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .18s;
}
.ba-pil.op { transform: rotate(225deg) translate(-1px, -1px); }
@media (prefers-reduced-motion: reduce) { .ba-pil { transition: none; } }

.ba-guidekrop {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; background: #fafafa; border-radius: var(--r-kort);
}
.ba-par { display: flex; flex-direction: column; gap: 4px; }
.ba-par + .ba-par { padding-top: 12px; border-top: 1px solid #ececee; }
.ba-parrk { display: flex; align-items: baseline; gap: 9px; font-size: 13px; line-height: 1.45; }
/* Fast bredde paa maerket, saa de to linjers tekst flugter lodret. Uden den hopper "Skriv ikke"
   og "Skriv i stedet" i forhold til hinanden, og parret laeses ikke som et par. Bredden er sat
   efter det LAENGSTE af de to: ved 84px ombroed "SKRIV I STEDET" til to linjer og skubbede sin
   egen raekke ud af flugt med den anden. */
.ba-mrk {
  flex: none; width: 104px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding-top: 1px; white-space: nowrap;
}
.ba-mrk.und { color: #a1a1aa; }
.ba-mrk.brug { color: var(--ba-groen); }
.ba-txtund { color: #a1a1aa; text-decoration: line-through; text-decoration-color: #d4d4d8; }
.ba-txtbrug { color: #18181b; }
.ba-parhv { margin: 3px 0 0 113px; font-size: 11.5px; line-height: 1.5; color: #a1a1aa; }
@media (max-width: 520px) {
  .ba-parrk { flex-direction: column; gap: 1px; }
  .ba-mrk { width: auto; }
  .ba-parhv { margin-left: 0; }
}

/* Indstillingerne: space-y-3 p-4 rounded-xl bg-zinc-50, rækker med ikon+label og select h-8 w-40 */
.ba-saet { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fafafa; border-radius: var(--r-kort); }
.ba-rk { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ba-rklbl { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #71717a; }
.ba-rklbl svg { width: 16px; height: 16px; flex: none; }
.ba-sel {
  width: 160px; height: 32px; padding: 0 10px; font: inherit; font-size: 13px; color: #18181b;
  background: #fff; border: 1px solid #e4e4e7; border-radius: var(--r-knap); cursor: pointer;
}
.ba-sel:disabled { color: #a1a1aa; cursor: default; }
.ba-note { font-size: 11.5px; line-height: 1.5; color: #a1a1aa; margin: 0; }

/* Handlingsknappen: w-full h-10. Formen er komponentens, farven er husets — samme fyld, radius og
   løft som .b-btn i dashboard.html, så den primære handling ser ens ud overalt i Skab. */
.ba-gen {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px; font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  border: none; border-radius: var(--r-knap); cursor: pointer;
  background: var(--ba-skov); box-shadow: var(--ba-loft);
  transition: background .15s, transform .15s;
}
.ba-gen:hover { background: var(--ba-skov-2); transform: translateY(-1.5px); }
/* Ingen løft-animation på den inaktive: en knap der rykker sig under musen lover et klik den
   ikke tager imod. */
.ba-gen[disabled] { opacity: .5; cursor: default; }
.ba-gen[disabled]:hover { background: var(--ba-skov); transform: none; }
.ba-gen svg { width: 16px; height: 16px; }

/* Ventetilstanden: spinner, roterende tekst, fremdriftslinje */
.ba-vent { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; margin: auto 0; }
.ba-spin {
  width: 64px; height: 64px; border: 4px solid #f4f4f5; border-top-color: var(--ba-groen);
  border-radius: 50%; animation: ba-snur 1s linear infinite;
}
@keyframes ba-snur { to { transform: rotate(360deg); } }
.ba-venttxt { font-size: 14px; font-weight: 500; color: #3f3f46; margin: 0; text-align: center; }
.ba-ventsub { font-size: 12px; color: #71717a; margin: 4px 0 0; text-align: center; }
.ba-bar { width: 100%; max-width: 420px; height: 8px; background: #e4e4e7; border-radius: 999px; overflow: hidden; }
.ba-barfyld { height: 100%; background: linear-gradient(to right, var(--ba-groen), var(--ba-groen-2)); transition: width .3s linear; }

/* Resultatet */
.ba-res { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ba-resbil { width: 100%; border-radius: var(--r-knap); overflow: hidden; background: #fafafa; }
.ba-resbil img { display: block; width: 100%; max-height: 36vh; object-fit: contain; }
.ba-info { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fafafa; border-radius: var(--r-knap); }
.ba-inforl { display: flex; justify-content: space-between; font-size: 14px; }
.ba-inforl span:first-child { color: #71717a; }
.ba-galh { font-size: 12px; font-weight: 500; color: #71717a; margin: 0 0 8px; }
.ba-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ba-galk { position: relative; aspect-ratio: 1; border-radius: var(--r-knap); overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: none; }
.ba-galk img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Groen er husets markeringsfarve (.b-opt.sel), ikke sort. */
.ba-galk.valgt { border-color: var(--ba-groen); box-shadow: 0 0 0 3px rgba(255, 77, 141, .18); }
.ba-galk span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 10px; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / .6), transparent);
}
.ba-toknap { display: flex; align-items: center; gap: 8px; }
/* svg SKAL have en størrelse. Uden den regner browseren et <svg> uden width/height til 300×150,
   og knappen blev en tom hvid flade med teksten skubbet udenfor. Set på skærmen 6. august 2026 —
   i koden så den helt rigtig ud. */
.ba-toknap button {
  flex: 1; height: 36px; font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--r-knap); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ba-toknap button svg { width: 16px; height: 16px; flex: none; }
.ba-tilbage { border: 1px solid #e4e4e7; background: #fff; color: #18181b; }
.ba-tilbage:hover { background: #fafafa; }
.ba-brug { border: none; background: var(--ba-skov); color: #fff; box-shadow: var(--ba-loft); }
.ba-brug:hover { background: var(--ba-skov-2); }

.ba-ikonknap[disabled] { opacity: .35; cursor: default; }
.ba-ikonknap[disabled]:hover { background: none; }