/* Euklides-chatvinduet. All stil, egne klassenavn med prefiks ek-.
 * Samme språk som euklides.no: svart på hvitt, hårstreker, Agipo i versaler
 * for etiketter og knapper, Rhymes for det som skal kjennes menneskelig.
 * Skriftene lastes av nettsiden selv (/build/fonts); her står bare navnene.
 */
/* Skriftstørrelsene er nettsidens egne trinn (main.css på euklides.no, line-height 130 %):
 *   brødtekst  Rhymes, text-base 16 px (sidens brødtekst er 16 / 20 / 24 etter skjermbredde; vinduet er smalt,
 *              og skal etter hvert vise bilder og produktkort, så det bruker det minste trinnet)
 *   felt       Rhymes, text-base 16 px (som nyhetsbrevfeltet på store skjermer)
 *   overskrift Agipo, versaler, text-base 16 px og sperring .04em (tracking-2, som merkenavn og meny)
 *   knapper    Agipo, versaler, text-xs 12 px og .04em (som skjemaknappene)
 * Under 768 px går overskriften ned til 14, slik siden gjør.
 *
 * Bevegelsene er nettsidens (main.js og main.css på euklides.no): siden toner inn på 0,25 s, knapper
 * bytter farge på 0,2 s (cubic-bezier .4 0 .2 1), og menyknappen blir et kryss ved at strekene legger
 * seg sammen på 0,15 s (sine.out) og vrir seg ±45° på 0,2 s (circ.out). Ingen sprett, ingen vridning ved pekeren.
 */
.ek { --ek-kort: .15s; --ek-middels: .2s; --ek-lang: .25s;
  --ek-sine: cubic-bezier(.61, 1, .88, 1); --ek-circ: cubic-bezier(0, .55, .45, 1); --ek-std: cubic-bezier(.4, 0, .2, 1);
  --ek-brod: 16px; --ek-felt: 16px; --ek-overskrift: 16px; --ek-liten: 12px; --ek-sperring: .04em; --ek-linje: 1.3;
  --ek-fg: #000; --ek-bg: #fff; --ek-gra: #f5f5f5; --ek-demp: #8a8d92; --ek-kant: 16px; --ek-strek: 3.2;
  font-family: Agipo, system-ui, sans-serif; color: var(--ek-fg); -webkit-font-smoothing: antialiased; }
.ek *, .ek *::before, .ek *::after { box-sizing: border-box; margin: 0; }
.ek :where(button) { font: inherit; color: inherit; }

/* ── Figuren (tegnes i SVG av chatvindu.js) ─────── */
.ek-fig { display: block; width: 100%; height: 100%; overflow: visible; }
.ek-fig .t-kant, .ek-fig .t-strek, .ek-fig .k-linje { fill: none; stroke: currentColor; stroke-width: var(--ek-strek); stroke-linecap: round; }
.ek-fig .t-flate { fill: var(--ek-fig-bg, #000); stroke: currentColor; stroke-width: var(--ek-strek); stroke-linejoin: round; }
.ek-fig .f-punkt { fill: currentColor; }
.ek-fig .f-gry { fill: none; stroke: currentColor; stroke-width: var(--ek-strek); stroke-linecap: round; }
.ek-fig .f-iris { display: none; }
.ek-fig .f-ring, .ek-fig .f-puls { display: none; }
.ek-fig .k-hjelp { fill: none; stroke: currentColor; stroke-width: calc(var(--ek-strek) * .45); stroke-opacity: .6; }
.ek-fig .k-grunn { stroke: currentColor; stroke-width: calc(var(--ek-strek) * .5); stroke-opacity: .35; }
.ek-fig .t, .ek-fig .ek-kule, .ek-fig .f-punkt { transition: opacity .6s ease; }

/* Mini-Otto ved lenker som «Spør Otto»: 20 px, lukket, strek 3 (Nikolai 08.10), i tekstens farge (--ek-mini overstyrer).
   Flatene er gjennomsiktige (09.10): de bakre kantene er skjult uansett, og på et mørkt bilde ble hvit fyll en hvit klump. */
.ek-mini { --ek-fig-bg: var(--ek-mini-bg, transparent); display: inline-block; width: var(--ek-mini, 20px); height: var(--ek-mini, 20px);
  /* Midten av figuren på midten av versalene (Agipo har versalhøyde 0,77em, målt) */
  vertical-align: calc(0.385em - var(--ek-mini, 20px) / 2); margin-left: .4em; overflow: visible; color: inherit; }

/* ── Startknappen ──────────────────────────────── */
.ek-start { position: fixed; right: 24px; bottom: 24px; z-index: 9998; width: 64px; height: 64px; padding: 4px;
  border-radius: 50%; border: 1px solid #fff; background: #000; color: #fff; --ek-fig-bg: #000;
  cursor: pointer; display: grid; place-items: center; transition: opacity var(--ek-lang) var(--ek-sine); }
.ek-start:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
.ek.er-apen .ek-start { opacity: 0; pointer-events: none; }

/* Snakkeboblen ved siden av Otto, med en liten trekant som peker mot ham */
.ek-teaser { position: fixed; right: 102px; bottom: 34px; z-index: 9998; max-width: 270px; display: flex; align-items: flex-start;
  background: #fff; border: 1px solid #000; opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity var(--ek-lang) var(--ek-sine), transform var(--ek-lang) var(--ek-sine), visibility 0s var(--ek-lang); }
.ek-teaser.vis { opacity: 1; visibility: visible; transform: none; transition: opacity var(--ek-lang) var(--ek-sine), transform var(--ek-lang) var(--ek-sine); }
.ek-teaser::after { content: ""; position: absolute; right: -6px; bottom: 15px; width: 10px; height: 10px; background: #fff;
  border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); }
.ek-teaser__tekst { flex: 1; border: 0; background: none; text-align: left; cursor: pointer; padding: 10px 4px 11px 14px;
  font-family: Rhymes, Georgia, serif; font-size: var(--ek-felt); line-height: var(--ek-linje); }
.ek-teaser__lukk { flex: none; width: 30px; height: 30px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; color: #000; opacity: .55; }
.ek-teaser__lukk:hover, .ek-teaser__lukk:focus-visible { opacity: 1; outline: none; }
.ek-teaser__lukk svg { width: 10px; height: 10px; }
.ek.er-apen .ek-teaser { display: none; }

/* ── Panelet ───────────────────────────────────── */
.ek-panel { position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: 392px;
  height: min(640px, calc(100vh - 48px)); display: flex; flex-direction: column;
  background: var(--ek-bg); border: 1px solid var(--ek-fg);
  transform: translateY(8px); opacity: 0; visibility: hidden;
  transition: transform var(--ek-lang) var(--ek-sine), opacity var(--ek-lang) var(--ek-sine), visibility 0s var(--ek-lang); }
.ek.er-apen .ek-panel { transform: none; opacity: 1; visibility: visible; transition: transform var(--ek-lang) var(--ek-sine), opacity var(--ek-lang) var(--ek-sine); }

/* Innebygd: panelet står i flyten (demosiden og kontaktarket), uten startknapp */
.ek--innebygd .ek-start { display: none; }
.ek--innebygd .ek-panel { position: relative; right: auto; bottom: auto; width: 100%; height: 100%; z-index: auto; }

/* Hodet: Otto til venstre, tittelen i midten, handlingene til høyre (tre like kolonner holder tittelen midt i) */
.ek-hode { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  background: #fff; color: #000; --ek-fig-bg: #fff; border-bottom: 1px solid #000; }
.ek-hode__figur { width: 52px; height: 52px; justify-self: start; }
.ek-hode__tekst { min-width: 0; text-align: center; }
.ek--tittel-venstre .ek-hode { grid-template-columns: auto 1fr auto; }
.ek--tittel-venstre .ek-hode__tekst { text-align: left; }
.ek-hode__navn { font-size: var(--ek-overskrift); line-height: var(--ek-linje); letter-spacing: var(--ek-sperring); text-transform: uppercase; white-space: nowrap; }
/* Tilstanden vises av Otto selv; teksten finnes bare for skjermlesere */
.ek-hode__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* «…» og krysset vises bare når pekeren er over toppen (eller noe der har fokus, eller menyen er åpen).
 * På berøringsskjerm, der det ikke finnes peker, står de alltid. */
.ek-hode__handlinger { justify-self: end; display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity var(--ek-middels) var(--ek-std); }
.ek-hode:hover .ek-hode__handlinger, .ek-hode__handlinger:focus-within, .ek-hode.er-meny-apen .ek-hode__handlinger { opacity: 1; }
@media (hover: none) { .ek-hode__handlinger { opacity: 1; } }
.ek-lukk, .ek-mer, .ek-tom { position: relative; width: 28px; height: 28px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.ek-lukk span { position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: currentColor; }
.ek-lukk span:first-child { transform: rotate(45deg); }
.ek-lukk span:last-child { transform: rotate(-45deg); }
/* Tre punkter, samme punkt som Ottos øyne */
.ek-mer { display: flex; align-items: center; justify-content: center; gap: 3px; }
.ek-mer span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ek-tom { display: flex; align-items: center; justify-content: center; }
.ek-tom svg { width: 18px; height: 18px; }
.ek-tom[hidden], .ek-meny[hidden] { display: none; }
.ek-tom:disabled { opacity: .35; cursor: default; }
.ek-lukk:focus-visible, .ek-mer:focus-visible, .ek-tom:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
/* Menyen: en hvit boks med hårstrek, valgene som sidens knapper */
.ek-meny { position: relative; }
.ek-meny__liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 2; min-width: 168px; background: #fff; color: #000; border: 1px solid #000; animation: ek-inn var(--ek-lang) var(--ek-sine); }
.ek-meny__liste[hidden] { display: none; }
.ek-meny__valg { display: block; width: 100%; text-align: left; border: 0; background: #fff; color: #000; cursor: pointer; padding: 12px; font-size: var(--ek-liten); line-height: 1; letter-spacing: var(--ek-sperring); text-transform: uppercase;
  transition: background-color var(--ek-middels) var(--ek-std), color var(--ek-middels) var(--ek-std); }
.ek-meny__valg + .ek-meny__valg { border-top: 1px solid #e5e6e8; }
.ek-meny__valg[hidden] { display: none; }
.ek-meny__valg:hover:not(:disabled), .ek-meny__valg:focus-visible { background: #000; color: #fff; outline: none; }
.ek-meny__valg:disabled { color: #b3b6bb; cursor: default; }
/* Mørk topp: svart hode uten strek under */
.ek--mork-topp .ek-hode { background: #000; color: #fff; --ek-fig-bg: #000; border-bottom: 0; }

/* ── Samtalen ──────────────────────────────────── */
.ek-logg { flex: 1; overflow-y: auto; padding: 20px var(--ek-kant); display: flex; flex-direction: column; gap: 18px; overscroll-behavior: contain; }
/* Løpende tekst i Rhymes, som på nettsiden (der er html-skriften Rhymes); etiketter og knapper i Agipo */
.ek-mld { max-width: 88%; font-family: Rhymes, Georgia, serif; font-size: var(--ek-brod); line-height: var(--ek-linje); padding: 10px 14px; overflow-wrap: anywhere; }
/* Rhymes finnes bare i lett vekt; utheving blir kursiv i stedet for en falsk fet */
.ek-mld strong { font-weight: 400; font-style: italic; }
/* Otto svarer i ren tekst på hvitt; kunden i en svart blokk */
.ek-mld--bot { align-self: stretch; max-width: none; padding: 0; }
.ek-mld--kunde { background: #000; color: #fff; align-self: flex-end; white-space: pre-wrap; }
.ek-mld p + p, .ek-mld p + ul, .ek-mld ul + p, .ek-mld p + ol, .ek-mld ol + p { margin-top: 8px; }
.ek-mld ul, .ek-mld ol { padding-left: 20px; }
.ek-mld li + li { margin-top: 3px; }
.ek-mld .ek-tekst a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ek-mld .ek-tekst a:hover { text-decoration-thickness: 2px; }
/* Bilder fra boten inne i teksten: hele bildet på hvit bunn, aldri beskåret (Nikolai 08.10) */
.ek-bilde { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; margin: 8px 0; background: #fff; }
.ek-ny { animation: ek-inn var(--ek-lang) var(--ek-sine); }
@keyframes ek-inn { from { opacity: 0; transform: translateY(6px); } }

/* Otto i samtalen: toppen uten figur, og én Otto der samtalen skjer (se plasserMerke i chatvindu.js) */
.ek--otto-ute .ek-hode__figur { visibility: hidden; }
/* Venstrestilt tittel uten Otto i toppen: tittelen står på samme linje som teksten under */
.ek--otto-ute.ek--tittel-venstre .ek-hode__figur { display: none; }
.ek--otto-ute.ek--tittel-venstre .ek-hode { padding: 14px 10px 14px var(--ek-kant); }
.ek { --ek-otto-str: 20px; }
.ek-merke { display: block; width: var(--ek-otto-str); height: var(--ek-otto-str); margin: 0 0 8px; color: #000; --ek-fig-bg: #fff; }
.ek-merke svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* I feltet: en fast plass til venstre for markøren */
.ek-felt-otto { display: none; }
.ek--otto-felt .ek-felt-otto { display: flex; align-items: center; justify-content: center; flex: none; align-self: stretch; padding: 0 6px 0 9px; }
.ek--otto-felt .ek-felt-otto .ek-merke { margin: 0; }
.ek--otto-felt .ek-felt { padding-left: 4px; }
/* Følger teksten: inne i siste linje, midt på bokstavene */
.ek--otto-tekst .ek-tekst .ek-merke { display: inline-block; margin: 0 0 0 .3em; vertical-align: calc(0.35em - var(--ek-otto-str) / 2); }

/* Venter på første bit: et punkt som blir en linje og tilbake (punkt, linje) */
.ek-venter { display: block; width: 28px; height: 22px; position: relative; }
.ek-venter::before { content: ""; position: absolute; left: 0; top: 9px; height: 4px; width: 4px; border-radius: 2px;
  background: currentColor; animation: ek-linje 1.8s ease-in-out infinite; }
@keyframes ek-linje { 0%, 100% { width: 4px; } 50% { width: 28px; } }

/* Eksemplene under hilsenen: rolige linjer med hårstrek, pila som på nettsiden */
.ek-eksempler { margin-top: auto; padding-top: 12px; }
/* Den første kundeboblen legger seg nederst, der eksemplene sto (1.4) */
.ek-mld--forste { margin-top: auto; }
/* Otto i feltet: klikk gir et triks; han vokser fram når det første svaret kommer */
.ek--otto-felt .ek-felt-otto .ek-merke { cursor: pointer; }
@keyframes ek-otto-fram { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.18); opacity: 1; } 78% { transform: scale(.94); } 100% { transform: none; } }
.ek--felt-inn .ek-felt-otto .ek-merke { animation: ek-otto-fram .6s cubic-bezier(.3, .6, .35, 1) both; }
/* Store Otto over hilsenen: fast høyde øverst, og tomrommet samles over eksemplene */
/* Otto i rommet har fast størrelse og krymper aldri, så ingenting over eller under ham hopper når samtalen vokser;
   blir det trangt, ruller samtalen i stedet (1.4) */
.ek--stor-over .ek-velkomst { flex: none; }
/* Over hilsenen står rommet øverst i loggen, og loggen klipper alt over sin egen kant: bare loggens padding (20 px)
   kan brukes som luft. Han flyttes 12 px ned, så han har hele luften til triksene (1.2.7). */
.ek--stor-over .ek-velkomst { margin-top: -20px; }
/* Den store Otto i det tomme rommet før samtalen begynner. Krymper, og forsvinner helt, når vinduet er lavt. */
/* Luft over ham til triksene (han strekker seg og spretter): rommet når 32 px opp uten at noe flytter seg */
.ek-velkomst { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #000; --ek-fig-bg: #fff;
  padding-top: 32px; margin-top: -32px; pointer-events: none; }
.ek-velkomst .ek-fig { width: 136px; height: 136px; max-height: 100%; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
/* Mens den store Otto er ute, venter Otto i feltet: de er samme figur */
/* Ny samtale: ingen plass til Otto i feltet, markøren står helt til venstre som i et vanlig felt (Nikolai 09.10).
   Plassen åpner seg mykt når det første svaret kommer (feltet er da tomt), så tekst i feltet glir i stedet for å hoppe. */
.ek--otto-felt .ek-felt-otto { max-width: 64px; transition: max-width var(--ek-middels) var(--ek-std), padding var(--ek-middels) var(--ek-std); }
.ek--otto-felt .ek-felt { transition: padding-left var(--ek-middels) var(--ek-std); }
.ek--velkomst .ek-felt-otto { max-width: 0; padding-left: 0; padding-right: 0; visibility: hidden; overflow: hidden; }
.ek--velkomst .ek-felt { padding-left: 14px; }
.ek--felt-inn .ek-felt-otto { overflow: hidden; }
.ek-eksempel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid #e5e6e8;
  background: none; text-align: left; cursor: pointer; font-family: Rhymes, Georgia, serif; font-size: var(--ek-brod); line-height: var(--ek-linje); }
.ek-eksempel span { font-family: Agipo, system-ui, sans-serif; font-size: var(--ek-felt); opacity: 0; transition: opacity var(--ek-middels) var(--ek-std); }
.ek-eksempel:hover span, .ek-eksempel:focus-visible span { opacity: 1; }
.ek-eksempel:focus-visible { outline: none; border-bottom-color: #000; }

/* Kildene under svaret: korte navn, aldri lange adresser */
/* Kildene og «Prøv igjen» som nettsidens knapper: versaler, hårstrek, «+» foran, delt kant, fargebytte på 0,2 s.
 * De kommer til slutt i svaret og toner inn. */
.ek-kilder, .ek-igjen, .ek-kort-rad { font-family: Agipo, system-ui, sans-serif; }
.ek-kilder { margin-top: 12px; display: flex; flex-wrap: wrap; animation: ek-inn var(--ek-lang) var(--ek-sine); }
.ek-kilde { font-size: var(--ek-liten); line-height: 1; letter-spacing: var(--ek-sperring); text-transform: uppercase; color: #000; text-decoration: none;
  border: 1px solid #000; padding: 9px 10px; margin: 0 -1px -1px 0; background: #fff; transition: background-color var(--ek-middels) var(--ek-std), color var(--ek-middels) var(--ek-std); }
.ek-kilde::before { content: "+ "; }
.ek-kilde:hover, .ek-kilde:focus-visible { background: #000; color: #fff; outline: none; }

/* Artikler og guider: en stille linje i mindre skrift, ikke knapper */
.ek-lesmer { margin-top: 10px; font-size: 14px; line-height: var(--ek-linje); animation: ek-inn var(--ek-lang) var(--ek-sine); }
.ek-lesmer a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Produktkort: som produktlistene på siden, bilde på lys flate og navnet i versaler under */
.ek-kort-rad { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; animation: ek-inn var(--ek-lang) var(--ek-sine); }
.ek-kort { color: #000; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.ek-kort__bilde { aspect-ratio: 1; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ek-kort__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--ek-middels) var(--ek-std); }
.ek-kort:hover .ek-kort__bilde img { opacity: .85; }
.ek-kort__navn { font-size: var(--ek-liten); letter-spacing: var(--ek-sperring); text-transform: uppercase; line-height: 1.3; }
.ek-kort__under { font-family: Rhymes, Georgia, serif; font-size: 14px; line-height: 1.3; margin-top: -4px; }

/* Et menneske tar over: feltet inne i svaret, samme form som skrivefeltet */
.ek-kontakt { margin-top: 12px; display: flex; border: 1px solid #000; background: #fff; }
.ek-kontakt__felt { flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 0; padding: 0 12px; font-family: Rhymes, Georgia, serif; font-size: var(--ek-felt); background: none; outline: none; }
.ek-kontakt__felt::placeholder { color: #000; opacity: .45; }
.ek-kontakt__send { width: 44px; border: 0; background: none; cursor: pointer; font-family: Agipo, system-ui, sans-serif; font-size: var(--ek-brod); }
.ek-kontakt--feil { border-style: dashed; }
.ek-kontakt__takk { margin-top: 10px; font-style: italic; }
/* CAD-skjemaet i samtalen: samme valg som CAD-delen på produktsiden */
.ek-cad { margin-top: 12px; border: 1px solid #000; background: #fff; padding: 12px; display: grid; gap: 10px; animation: ek-inn var(--ek-lang) var(--ek-sine); }
.ek-cad__tittel { margin: 0; font-family: Agipo, system-ui, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: var(--ek-sperring); }
.ek-cad__formater { display: flex; flex-wrap: wrap; gap: 6px; }
.ek-cad__fmt { border: 1px solid #000; background: #fff; color: #000; padding: 6px 10px; font-family: Agipo, system-ui, sans-serif; font-size: 13px; cursor: pointer; }
.ek-cad__fmt[aria-pressed="true"] { background: #000; color: #fff; }
.ek-cad__skjema { display: grid; gap: 4px; margin: 0; }
.ek-cad__felt { height: 40px; border: 0; border-bottom: 1px solid #000; border-radius: 0; padding: 0 2px; font-family: Rhymes, Georgia, serif; font-size: var(--ek-felt); background: none; outline: none; }
.ek-cad__felt::placeholder { color: #000; opacity: .45; }
.ek-cad__felle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ek-cad__robot:not(:empty) { margin-top: 6px; }
.ek-cad__send { justify-self: start; margin-top: 8px; border: 1px solid #000; background: #000; color: #fff; padding: 8px 14px; font-family: Agipo, system-ui, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: var(--ek-sperring); cursor: pointer; }
.ek-cad__send:disabled { opacity: .5; cursor: default; }
.ek-cad__feil { margin: 0; font-size: 14px; }
.ek-cad__info { margin: 0; font-size: 13px; opacity: .7; }
.ek-cad__info a { color: inherit; }
.ek-cad__svar { margin-top: 12px; }

/* Feil: rolig, ingen rødt, alltid en vei videre */
.ek-mld--feil { background: #fff; border: 1px solid #000; padding: 12px 14px; }
.ek-mld--feil .ek-feiltekst { font-family: Rhymes, Georgia, serif; }
.ek-igjen { margin-top: 10px; border: 1px solid #000; background: #fff; padding: 7px 10px; cursor: pointer;
  font-size: var(--ek-liten); letter-spacing: var(--ek-sperring); text-transform: uppercase; }
.ek-igjen::before { content: "+ "; }
.ek-igjen:hover, .ek-igjen:focus-visible { background: #000; color: #fff; outline: none; }

/* ── Forslag, skjema, fot ──────────────────────── */
.ek-forslag { display: flex; flex-wrap: wrap; padding: 0 var(--ek-kant) 12px; }
.ek-forslag:empty { display: none; }
.ek-chip { border: 1px solid #000; background: #fff; font-size: var(--ek-liten); letter-spacing: var(--ek-sperring); text-transform: uppercase;
  padding: 8px 10px; cursor: pointer; margin: 0 -1px -1px 0; }
.ek-chip::before { content: "+ "; }
.ek-chip:hover, .ek-chip:focus-visible { background: #000; color: #fff; outline: none; }

/* Skrivefeltet som nettsidens egne felt: hårstrek, Rhymes, ingen fylte flater */
.ek-skjema { display: flex; align-items: flex-end; margin: 0 var(--ek-kant) var(--ek-kant); border: 1px solid #000; }
.ek-felt { flex: 1; min-width: 0; height: 48px; min-height: 48px; border: 0; border-radius: 0; padding: 13px 0 13px 14px; resize: none; overflow-y: auto;
  font-family: Rhymes, Georgia, serif; font-size: var(--ek-felt); line-height: 21px; background: none; color: inherit; outline: none; -webkit-appearance: none; appearance: none; }
.ek-felt::placeholder { color: #000; opacity: .45; }
.ek-send { flex: none; width: 48px; height: 46px; border: 0; background: none; color: #000; cursor: pointer; padding: 0; display: grid; place-items: center;
  font-family: Agipo, system-ui, sans-serif; font-size: var(--ek-brod); line-height: 1; transition: color var(--ek-middels) var(--ek-std); }
.ek-send:focus-visible { outline: 1px solid #000; outline-offset: -6px; }
.ek-send:disabled { color: #c4c6ca; cursor: default; }
/* Stopp: et lite kvadrat der pila var */
.ek-stopp { display: block; width: 9px; height: 9px; background: currentColor; }

/* Til siste melding: en liten pil som bare dukker opp når kunden har rullet opp */
.ek-panel { --ek-ned-bunn: 82px; }
.ek-ned { position: absolute; left: 50%; bottom: var(--ek-ned-bunn); transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #000; background: #fff; color: #000; cursor: pointer; display: grid; place-items: center; padding: 0;
  font-family: Agipo, system-ui, sans-serif; font-size: 14px; animation: ek-inn var(--ek-lang) var(--ek-sine); }
.ek-ned[hidden] { display: none; }
.ek-fot { font-size: var(--ek-liten); letter-spacing: var(--ek-sperring); text-transform: uppercase; color: var(--ek-demp); padding: 8px var(--ek-kant) 12px; }

/* ── Mobil ─────────────────────────────────────── */
@media (max-width: 767px) { .ek { --ek-overskrift: 14px; } }

@media (max-width: 640px) {
  .ek:not(.ek--innebygd) .ek-panel { right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; border: 0; }
  .ek-start { right: 16px; bottom: 16px; width: 58px; height: 58px; }
  .ek-teaser { right: 86px; bottom: 24px; max-width: calc(100vw - 110px); }
  .ek-mld { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .ek--felt-inn .ek-felt-otto .ek-merke, .ek-panel, .ek-start, .ek-ny, .ek-teaser, .ek-kilder, .ek-kort-rad, .ek-ned { animation: none !important; transition: none !important; }
  .ek-venter::before { animation-duration: 4s; }
}