/* agentdemo/stil.css — BERRE agentvindauget.
 *
 * ── KVA FILA ER, ETTER 13.10.2026 ─────────────────────────────────────────
 * Roger: «Sidene må og ha samme formatet som dei andre sporlaus sidene.»
 * Ordren: gjenbruk felles stilark og malar i staden for eigne kopiar, men
 * «agentvindauget kan behalde eiga form inni seg».
 *
 * So denne fila er krympa frå 141 linjer til dette. Det som er BORTE, og kven
 * som gjev det i staden:
 *
 *   `:root` med eigen palett, og mørk-blokka  →  `stil.css` og `tema.js`
 *   `* { box-sizing }`, `body`, `main`        →  `hub.css` og `stil.css`
 *   `h1`, `h2`, `h3`, `.ingress`              →  `.tekstside`
 *   `form label`, `textarea`                  →  `.skjema`
 *   `button`, `#send`, `#ny`, `:disabled`     →  `.knapp` og `.knapp-kant`
 *   `:focus-visible`                          →  nettstaden sin fokusring
 *   `.etter`, `.etter p`                      →  avsnitta er `.tekstside p` no
 *   `.heim`                                   →  menyen har «Velkomen»
 *
 * TO PALETTAR PÅ SAME SIDA var det verkelege problemet. Fila definerte
 * `--bakgrunn`, `--tekst`, `--kant` og fem andre, og nettstaden definerer
 * `--papir`, `--blekk`, `--linje`. Dei generelle reglane her TAPTE på
 * spesifisitet fordi `<body>` har klassen `sporlaus` — altså verka dei ikkje,
 * men dei stod der og såg ut som om dei gjorde. Reglane under brukar
 * nettstaden sine tokens, så lys og mørk følgjer knappen i toppen.
 *
 * ── KVA SOM STÅR, OG KVIFOR ───────────────────────────────────────────────
 * Samtalen, «Ikkje sendt»-boksen og statuslina. Det er
 * agentvindauget. `app.js` finn dei på id (`#logg`, `#avslutning`, `#melding`,
 * `#send`, `#ny`, `#status`), og den fila er kundeservice-1013 sin — ingen av
 * desse namna kan byte. */

/* BERRE TOKENS SOM SNUR I MOERK DRAKT. Fyrste utgaava bruka `--tint-bla` og
 * `--tint-gul` av di dei saag rette ut i lys drakt. Dei er lyse pastellar som
 * IKKJE blir definerte om i moerk blokk, medan `--blekk` snur til lys tekst —
 * so eg malte aatte par under kravet, ned til 1,02. Praktisk talt usynleg
 * tekst.
 *
 * Dei som snur: `--papir`, `--sand`, `--blekk`, `--dempa`, `--linje`,
 * `--lenke`, `--fokus`, `--knapp-tekst`. Berre dei blir bruka her.
 *
 * Eg greip etter eit token fordi det saag rett ut i den eine drakta. Same
 * feilen som alt anna i dag: maale ein tilstand og bruke svaret paa ein annan.
 */

/* ÉI LINJEAVSTAND FRÅ INGRESSEN NED TIL CHATBOKSEN (Roger, 14.10.2026).
 *
 * Målt før: 92 px, og ei line i ingressen er 32. Dei 92 var botnmargen på
 * ingressen (12), sida sin `gap` (32), den TOMME samtalen (0 høg, men med 16
 * i botnmarg) og `gap` ein gong til (32).
 *
 * Ingressen eig ikkje avstanden ned. Sida sin eigen `gap` gjer det, og då
 * følgjer demoen same rytmen som resten av sida. */
.tekstside .ingress { margin-bottom: 0; }

/* EIN TOM SAMTALE TEK INGA PLASS, MEN BLIR VÆRANDE I SIDA.
 *
 * `display: none` hadde vore enklare og er feil her. `#logg` er `aria-live`:
 * det er feltet som les opp nye svar for den som brukar skjermlesar. Eit
 * område som går frå `display: none` til synleg i same augeblinken teksten
 * kjem, blir ofte ikkje lese opp — skjermlesaren følgjer berre område som
 * alt var teikna. `position: absolute` tek elementet ut av flex-oppstillinga,
 * og dermed ut av `gap`-rekninga, utan å fjerne det frå teikninga.
 *
 * `:empty` sluttar å passe i det første bobla kjem, så samtalen går tilbake i
 * flyten av seg sjølv. `app.js` set `textContent = ""` ved «Ny samtale», så
 * han blir verkeleg tom att — med eitt mellomrom inni ville `:empty` ikkje
 * slege til. */
#logg:empty {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* Samtalen. `overflow-wrap: anywhere` på sjølve meldinga og ikkje på bobla: ei
 * lang adresse i eit svar skal bryte, men ramma skal ikkje flyte. */
#logg { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.boble {
  border: 1px solid var(--linje);
  border-radius: var(--r-flate);
  padding: 0.5rem 0.8rem;
  max-width: 92%;
}
.boble p { margin: 0.2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.boble.kunde { background: var(--sand); align-self: flex-end; }
.boble.agent { background: var(--papir); align-self: flex-start; }

/* «Du» og «Assistenten». Eit `span` over eit `p` — etiketten står på eiga line
 * fordi avsnittet er blokk, og ein biletdommar stadfesta det 13.10 etter at
 * `textContent` fekk det til å sjå ut som om dei rann saman. */
.hvem { font-size: 0.8rem; color: var(--dempa); font-weight: 600; }

/* «Ikkje sendt». Stipla kant med vilje: boksen viser noko som IKKJE vart sendt,
 * og ei stipla ramme les som eit utkast. */
#avslutning {
  background: var(--sand);
  border: 1px dashed var(--linje);
  border-radius: var(--r-flate);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
#avslutning p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
#avslutning .merk { color: var(--dempa); margin-bottom: 0; }

/* OVERSKRIFTENE I KORTET EIG AVSTANDEN SIN SJOELV.
 *
 * Ein biletdommar saag at «E-post eigaren kan sende deg» laag klistra til
 * bolken over, medan «Varsel til eigaren» hadde god luft: 40 px over den eine
 * og 24 over den andre. Maalt: alle margane paa overskriftene var 0, og
 * skilnaden kom frae ELEMENTET FOER — `.merk` har ein botnmarg, dei vanlege
 * avsnitta har ingen.
 *
 * Naar avstanden ligg paa det som staar FOER, blir han ulik kvar gong
 * innhaldet over er ulikt. Legg han paa overskrifta, og han er den same
 * uansett kva som kjem foer. Difor er botnmargen paa `.merk` null no. */
#avslutning h3 { margin: 0.9rem 0 0.25rem; }
.emne { font-weight: 600; }

.knappar { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }

/* Statuslina. `min-height` held plassen når ho er tom, så ingenting hoppar når
 * teksten kjem og går.
 *
 * `:not(:empty)` gjev ramme og bakgrunn BERRE når det står noko der. Ein
 * biletdommar (runde 3) fann at linja var grå som dempa brødtekst og låg
 * klistra til overskrifta under, så ho las som ein undertittel i staden for eit
 * svar på det du nett sende. `app.js` set `textContent = ""`, så elementet er
 * verkeleg tomt — med eitt mellomrom inni ville `:empty` ikkje slått til. */
#status { color: var(--dempa); min-height: 1.5em; margin: 0.75rem 0 0; }
#status:not(:empty) {
  color: var(--blekk);
  background: var(--sand);
  border: 1px solid var(--linje);
  border-radius: var(--r-flate);
  padding: 0.4rem 0.6rem;
}