/* ───────────────────────────────────────────────────────────
   prov.css — «Prøv chatboten på din egen nettside» (prov.html)
   Skjema øverst, så et ekte chatvindu bygget på de samme
   kortstilene som forsidens mock (.kd-chat i forside.css).
   ─────────────────────────────────────────────────────────── */
.pv-wrap { width: min(100% - 2 * var(--kant), 1120px); margin-inline: auto; }

body.kd-side .pv-hero {
  display: block;
  min-height: 0;
  padding: 150px var(--kant) 44px;
}
.pv-hero .ph-title { max-width: 17ch; }
.pv-hero .ph-lead { max-width: 54ch; }

.pv-form-wrap { position: relative; max-width: 600px; margin-top: 48px; }
.pv-form { display: flex; flex-wrap: wrap; gap: 10px; }
/* «Klar på 9 sekunder»: en liten merkelapp rett over feltet, venstrestilt.
   Satt først på kanten av feltet, men dekket toppen av det. Var et skjevt klistremerke som svevde, og feltet pulserte
   lime; begge deler så generert ut. Nå står det stille. */
.pv-merke {
  position: absolute; left: 0; top: -32px; z-index: 1;
  padding: 3px 9px; border-radius: 6px;
  background: var(--lime); color: var(--blekk);
  font-weight: 600; font-size: .74rem; letter-spacing: 0; white-space: nowrap; line-height: 1.5;
  pointer-events: none;
}
.pv-form input { border-color: var(--lime) !important; }
.pv-form input {
  flex: 1 1 260px; min-width: 0;
  font: inherit; font-size: 16px;
  padding: 14px 20px;
  border: 1px solid var(--strek); border-radius: 999px;
  background: #fff; color: var(--blekk);
}
.pv-form input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.pv-form button { font: inherit; cursor: pointer; border: 0; }
.pv-form button[disabled] { opacity: .55; cursor: wait; }
.pv-status { margin-top: 14px; min-height: 1.6em; color: var(--blekk-2); }
.pv-status.er-feil { color: #b3261e; }

.pv-demo { padding: 8px var(--kant) 88px; }
.pv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 32px;
  align-items: start;
}
/* Bedriftens farge settes av prov.js som --pv-farge/--pv-tekst på kortet.
   Uten farge: mørk avatar og hvite bobler, som forsidens mock. */
.pv-chat {
  border: 1px solid var(--strek);
  border-top: 4px solid var(--pv-farge, var(--blekk));
  box-shadow: 0 2px 6px rgba(12,13,14,.05), 0 24px 60px rgba(12,13,14,.10);
}
/* .pv-chat foran: forside.css lastes etter denne fila og setter
   .kd-chat-av til svart, så spesifisiteten må opp. */
.pv-chat .pv-av {
  background: var(--pv-farge, var(--blekk));
  color: var(--pv-tekst, #fff);
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  font-family: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
}
.pv-chat .kd-b-deg {
  background: var(--pv-farge, #fff);
  color: var(--pv-tekst, var(--blekk));
  border-color: transparent;
}
.pv-chat .kd-chat-flate {
  height: 480px;
  overflow-y: auto;
  justify-content: flex-start;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  overflow-x: hidden;
}
.pv-chat .kd-b { max-width: 88%; min-width: 0; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-chat .kd-b a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.pv-chat .kd-b-deg a { color: inherit; }
.pv-send { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--strek); background: #fff; }
.pv-send input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 16px;
  padding: 11px 16px;
  border: 1px solid var(--strek); border-radius: 999px;
  background: var(--ark-2); color: var(--blekk);
}
.pv-send input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.pv-send button { font: inherit; cursor: pointer; border: 0; }

.pv-side { display: grid; gap: 10px; align-content: start; padding-top: 6px; }
.pv-lab { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blekk-3); margin-top: 10px; }
.pv-sider { list-style: none; display: grid; gap: 6px; }
.pv-s { font-size: .92rem; color: var(--blekk-2); overflow-wrap: anywhere; }
.pv-del { overflow-wrap: anywhere; }
.pv-del a { font-weight: 600; color: var(--blekk); text-decoration: underline; text-underline-offset: 3px; }
.pv-fot { font-size: .92rem; line-height: 1.55; color: var(--blekk-2); }
.pv-side .kd-pill { justify-self: start; margin-top: 6px; }

@media (max-width: 900px) {
  .pv-grid { grid-template-columns: 1fr; gap: 24px; }
  .pv-chat .kd-chat-flate { height: 400px; }
}
@media (max-width: 760px) {
  body.kd-side .pv-hero { padding-top: 120px; }
  .pv-form button { width: 100%; justify-content: center; }
}

/* ── Byggeanimasjonen ──
   Kortet vises med en gang adressen er sendt. Et overlegg dekker det,
   og en flate fyller seg langsomt nedenfra mens tekstene skifter. Når
   svaret kommer, fylles resten raskt i bedriftens farge, overlegget
   toner ut, og boblene kommer inn én og én. */
.pv-chat { position: relative; }
.pv-bygger {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: #fff;
  overflow: hidden;
  transition: opacity .55s var(--letthet), visibility 0s linear .55s, background-color .4s;
}
/* Den ufylte delen over fyllet er en lys tone av fyllfargen. Den var
   grå som chatflaten, og da så det ut som chatten skinte gjennom rett
   før «Klar». Et eget lag med lav dekkevne gir tonen uten color-mix. */
.pv-bygger::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pv-farge, var(--lime)); opacity: .16;
  transition: background-color .4s;
}
/* Når svaret er klart, får hele overlegget bedriftens farge, ikke bare
   fyllet. Da er det ingen lys stripe å se øverst mens det toner ut. */
.pv-bygger.er-ferdig { background: var(--pv-farge, var(--lime)); }
.pv-bygger.er-ferdig::before { opacity: 1; }
.pv-bygger.er-klar { opacity: 0; visibility: hidden; pointer-events: none; }
.pv-fyll {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: var(--pv-farge, var(--lime));
  transition: height 11s cubic-bezier(.15, .6, .25, 1), background-color .4s;
}
.pv-bygger.er-ferdig .pv-fyll { transition: height .6s cubic-bezier(.22, 1, .36, 1), background-color .4s; height: 100%; }
.pv-bygger-tekst {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--blekk);
  font-weight: 600; font-size: 1rem;
  box-shadow: 0 10px 30px rgba(12,13,14,.10);
}
.pv-puls { width: 9px; height: 9px; border-radius: 50%; background: var(--blekk); animation: pv-puls 1.2s ease-in-out infinite; }
@keyframes pv-puls { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }
.pv-chat .kd-b { animation: pv-inn .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes pv-inn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pv-fyll, .pv-bygger.er-ferdig .pv-fyll { transition: none; }
  .pv-chat .kd-b { animation: none; }
  .pv-puls { animation: none; }
}

/* Feiltilstand: rød tekst i kortet, ingen chat, ingen sidekolonne. */
.pv-bygger-tekst { max-width: 82%; text-align: center; }
.pv-bygger.er-feil .pv-bygger-tekst { color: #b3261e; }
.pv-bygger.er-feil .pv-puls { background: #b3261e; animation: none; }
/* Sidekolonnen skjules, men kortet blir stående der det var. */
.pv-demo.er-feil .pv-side { visibility: hidden; }

/* Send-knappen og fokusrammen i skrivefeltet følger også bedriftens farge. */
.pv-chat .pv-send .kd-pill,
.pv-chat .pv-send .kd-pill:hover { background: var(--pv-farge, var(--lime)); color: var(--pv-tekst, var(--blekk)); }
.pv-chat .pv-send input:focus-visible { outline: 2px solid var(--pv-farge, var(--lime)); outline-offset: 2px; }

/* Navnet i toppen kan rettes: klikk, skriv, Enter. */
#pv-navn { cursor: text; border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
#pv-navn:hover { background: var(--ark-2); }
#pv-navn[contenteditable="true"] { outline: 2px solid var(--pv-farge, var(--lime)); outline-offset: 1px; background: #fff; }

/* ── Bestilling etter demoen ── */
.pv-bestill { padding: 22px 22px 20px; border-radius: 18px; background: var(--blekk); color: #fff; }
.pv-bestill-h { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.pv-bestill-p { margin-top: 8px; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.72); }
.pv-bestill-form { display: grid; gap: 6px; margin-top: 16px; }
.pv-bestill-form label { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 6px; }
.pv-bestill-form label span { text-transform: none; letter-spacing: 0; }
.pv-bestill-form input,
.pv-bestill-form textarea {
  font: inherit; font-size: 16px; padding: 11px 14px; min-width: 0; width: 100%;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  background: rgba(255,255,255,.08); color: #fff;
}
.pv-bestill-form textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.pv-bestill-form textarea::placeholder, .pv-bestill-form input::placeholder { color: rgba(255,255,255,.4); }
.pv-bestill-form input:focus-visible, .pv-bestill-form textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.pv-bestill-form button { margin-top: 12px; justify-content: center; font: inherit; cursor: pointer; border: 0; }
.pv-bestill-form button[disabled] { opacity: .6; cursor: wait; }
.pv-bestill-status { min-height: 1.4em; font-size: .9rem; color: #ffb4a8; }
.pv-bestill-takk { margin-top: 14px; font-size: .95rem; line-height: 1.55; color: var(--lime); }
/* Alternativet til skjemaet: et møte. Lys kant på mørkt, lime ved hover. */
.pv-eller { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.pv-eller > span { font-size: .85rem; color: rgba(255,255,255,.5); }
.pv-book {
  flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  padding: 13px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-weight: 600; transition: background .2s, color .2s, border-color .2s;
}
.pv-book:hover { background: var(--lime); border-color: var(--lime); color: var(--blekk); }
/* Dyttet i chatten: en boble med knapp, etter andre svar. */
.pv-dytt { display: grid; gap: 8px; }
.pv-dytt button { justify-self: start; font: inherit; cursor: pointer; border: 0; }

/* Tre spørsmål å trykke på under hilsenen. */
.pv-forslag { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; animation: pv-inn .45s cubic-bezier(.16, 1, .3, 1) both; }
.pv-forslag-k {
  font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--pv-farge, var(--strek));
  background: #fff; color: var(--blekk);
  transition: background-color .18s, color .18s;
}
.pv-forslag-k:hover { background: var(--pv-farge, var(--lime)); color: var(--pv-tekst, var(--blekk)); }
.pv-forslag-k:focus-visible { outline: 2px solid var(--pv-farge, var(--lime)); outline-offset: 2px; }

/* Merkelapp i chattens topp: ingen skal tro at dette er bedriftens
   egen chatbot, heller ikke om skjermbildet deles videre. */
.pv-chat .kd-chat-topp { position: relative; padding-right: 150px; }
.pv-merkelapp {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  padding: 5px 10px; border-radius: 7px;
  background: var(--ark-2); color: var(--blekk-2);
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.pv-merkelapp strong { color: var(--blekk); font-weight: 700; }
@media (max-width: 560px) {
  .pv-chat .kd-chat-topp { padding-right: 14px; padding-bottom: 30px; }
  .pv-merkelapp {
    top: auto; bottom: 7px; right: auto; left: 14px; transform: none;
    font-size: .56rem; letter-spacing: .06em; padding: 4px 8px;
  }
}

/* ── Fast demoside (/demo/<id>): hele siden er chatten. På PC står kortet
   sentrert i nesten full høyde, på telefon fyller det skjermen uten
   ramme. Merkelappen sitter nederst i kortet, under feltet. ── */
body.pv-hel { margin: 0; background: var(--ark-2); min-height: 100dvh; }   /* body.kd setter hvit; denne må veie like mye */
.pv-hel-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; }
.pv-hel .pv-demo { width: min(100%, 720px); padding: 0; }   /* prov.html-seksjonen har sidekanter og bunnluft; ikke her */
.pv-hel .pv-chat { display: flex; flex-direction: column; height: min(84dvh, 780px); }
.pv-hel .pv-chat .kd-chat-flate { flex: 1 1 auto; height: auto; min-height: 0; }
.pv-hel .kd-chat-topp { padding: 14px 16px; }   /* ingen merkelapp i toppen, så ingen ekstra bunnluft på telefon */
.pv-hel-lapp {
  margin: 0; padding: 8px 14px 10px; text-align: center;
  font-size: .74rem; letter-spacing: .02em; color: var(--blekk-3);
  background: #fff; border-top: 1px solid var(--strek);
}
.pv-hel-lapp a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .pv-hel-wrap { padding: 0; display: block; }
  .pv-hel .pv-demo { width: 100%; }
  .pv-hel .pv-chat { height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
  .pv-hel-lapp { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
/* Avataren viser bedriftens eget ikon når demoen har ett. */
.pv-chat .pv-av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pv-chat .pv-av:has(img) { background: #fff; overflow: hidden; }

/* «Om denne chatboten» på faste demoer: i-knapp i toppen, panel som
   legger seg over chatten. Knappen finnes bare i demo/mal.html. */
.pv-hel .pv-chat { position: relative; }
.pv-hel .kd-chat-topp { padding-right: 56px; }
.pv-info-knapp {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--strek); background: #fff; color: var(--blekk-2);
  font: 700 13px/1 'Geist', system-ui, sans-serif; cursor: pointer;
}
.pv-info-knapp:hover, .pv-info-knapp[aria-expanded="true"] { border-color: var(--pv-farge, var(--blekk)); color: var(--blekk); }
.pv-info-knapp:focus-visible { outline: 2px solid var(--pv-farge, var(--lime)); outline-offset: 2px; }
.pv-info {
  position: absolute; inset: 0; z-index: 5; overflow: auto;
  padding: 18px 20px 24px; background: #fff; color: var(--blekk);
  font-size: 14.5px; line-height: 1.55;
}
.pv-info-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--strek); font-size: 16px; }
.pv-info-lukk { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--strek); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--blekk); }
.pv-info-lukk:focus-visible { outline: 2px solid var(--pv-farge, var(--lime)); outline-offset: 2px; }
.pv-info h3 { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blekk-3); margin: 18px 0 4px; }
.pv-info p { margin: 0; color: var(--blekk); }
.pv-info .pv-info-fot { margin-top: 20px; font-size: 13px; color: var(--blekk-2); }

/* ═══ Faste demosider med tema ═══
   demo/[id].js setter --pv-farge, --pv-aksent, --pv-bakgrunn, --pv-lys og
   eventuelt --pv-font på body fra demoposten. Alt under gjelder bare
   .pv-hel, så prov.html står urørt. Kortet ligner bedriftens egne kort:
   hvitt, myk skygge, aksentstripe øverst. */
body.pv-hel { background: var(--pv-bakgrunn, var(--ark-2)); font-family: var(--pv-font, inherit); }
.pv-hel .pv-chat, .pv-hel .pv-chat input, .pv-hel .pv-chat button, .pv-hel .pv-info, .pv-hel .pv-info-knapp { font-family: var(--pv-font, inherit); }
.pv-hel-wrap { min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; align-content: start; padding: 18px 16px 14px; }
.pv-hel-topp { width: min(100%, 720px); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 2px 10px; }
.pv-hel-merke { display: inline-flex; align-items: center; gap: 10px; color: var(--pv-farge, var(--blekk)); text-decoration: none; font-weight: 600; font-size: 20px; letter-spacing: -.015em; line-height: 1; }
.pv-hel-merke:hover .pv-hel-merke-navn { text-decoration: underline; text-underline-offset: 3px; }
.pv-hel-merke-bilde { height: 30px; width: auto; display: block; }
.pv-hel-under { width: min(100%, 720px); margin: 0 0 12px; padding: 0 2px; font-size: 13px; color: var(--blekk-2); }
.pv-hel .pv-demo { align-self: start; }
.pv-hel .pv-info-knapp {
  position: static; transform: none; width: auto; height: 34px; padding: 0 14px 0 9px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--pv-farge, var(--blekk));
  border: 1px solid rgba(0,0,0,.14); background: #fff;
}
.pv-hel .pv-info-knapp .pv-info-i { width: 18px; height: 18px; border-radius: 50%; background: var(--pv-farge, var(--blekk)); color: var(--pv-tekst, #fff); display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; }
.pv-hel .pv-info-knapp:hover, .pv-hel .pv-info-knapp[aria-expanded="true"] { border-color: var(--pv-farge, var(--blekk)); background: var(--pv-lys, #f2f3f1); color: var(--pv-farge, var(--blekk)); }
.pv-hel .pv-chat {
  border: 1px solid rgba(0,0,0,.06);
  border-top: 4px solid var(--pv-aksent, var(--pv-farge, var(--blekk)));
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.08);
  background: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.pv-hel .kd-chat-topp { padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.06); }
.pv-hel .kd-chat-navn { font-size: 1rem; }
.pv-hel .kd-live { background: var(--pv-aksent, var(--gronn)); }
.pv-hel .pv-chat .pv-av { background: #fff; border: 1px solid rgba(0,0,0,.08); }
.pv-hel .pv-chat .pv-av img { object-fit: contain; padding: 3px; border-radius: 0; box-sizing: border-box; }
.pv-hel .pv-chat .kd-chat-flate { background: var(--pv-lys, var(--ark-2)); }
.pv-hel .kd-b { border-radius: 14px; font-size: .92rem; line-height: 1.5; padding: 10px 14px; }
.pv-hel .kd-b-dem { background: #fff; border-color: rgba(0,0,0,.07); }
.pv-hel .pv-chat .kd-b-deg { background: var(--pv-farge, var(--blekk)); color: var(--pv-tekst, #fff); border-color: transparent; }
.pv-hel .pv-forslag-k { background: #fff; border: 1px solid var(--pv-farge, var(--blekk)); color: var(--pv-farge, var(--blekk)); font-weight: 500; }
.pv-hel .pv-forslag-k:hover { background: var(--pv-farge, var(--blekk)); color: var(--pv-tekst, #fff); }
.pv-hel .pv-send { border-top: 1px solid rgba(0,0,0,.06); }
.pv-hel .pv-chat .pv-send .kd-pill, .pv-hel .pv-chat .pv-send .kd-pill:hover { background: var(--pv-farge, var(--blekk)); color: var(--pv-tekst, #fff); }
.pv-hel .pv-chat .pv-send input:focus-visible { outline-color: var(--pv-aksent, var(--pv-farge, var(--blekk))); }
.pv-hel .pv-info { border-radius: 0 0 14px 14px; }
.pv-hel .pv-info h3 { color: var(--pv-farge, var(--blekk-3)); }
@media (max-width: 560px) {
  .pv-hel-wrap { padding: 0; display: block; }
  .pv-hel-topp { padding: 12px 14px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); }
  .pv-hel-merke { font-size: 18px; }
  .pv-hel-merke-bilde { height: 26px; }
  .pv-hel-under { display: none; }
  .pv-hel .pv-info-knapp .pv-info-tekst { display: none; }
  .pv-hel .pv-info-knapp { padding: 0 8px; }
  /* 59 px sidetopp over, 36 px merkelapp under: kortet tar resten, så lappen alltid er synlig. */
  .pv-hel .pv-chat { height: calc(100dvh - 59px - 36px); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
}
/* Merkelappen står under kortet på temasidene: ren tekst, ingen boks. */
.pv-hel .pv-hel-lapp { background: transparent; border: 0; padding: 12px 0 0; }
@media (max-width: 560px) {
  /* Navnet står alt i kortets topp; sidetoppen holder seg til merket og knappen. */
  .pv-hel-merke-bilde + .pv-hel-merke-navn { display: none; }
  .pv-hel .pv-hel-lapp { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
}

/* Inter, Health2B sin skrift, fra eget domene (SIL OFL, latin-delsettet
   fra Google Fonts v20). Ingen tredjepart kontaktes for skriften. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonter/inter.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ «Om denne chatboten» under chatten på faste demosider ═══
   Ren informasjon: overskrift og sammenleggbare deler, ingen pynt. */
a.pv-info-knapp { text-decoration: none; }
.pv-om { width: min(100%, 720px); margin: 30px auto 0; padding: 0 2px 8px; color: var(--blekk); font-family: var(--pv-font, inherit); }
.pv-om h2 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; color: var(--pv-farge, var(--blekk)); margin: 0 0 8px; }
.pv-om-del { border-top: 1px solid rgba(0,0,0,.11); }
.pv-om-del:last-of-type { border-bottom: 1px solid rgba(0,0,0,.11); }
.pv-om-del summary { list-style: none; cursor: pointer; position: relative; padding: 14px 34px 14px 0; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--blekk); }
.pv-om-del summary::-webkit-details-marker { display: none; }
.pv-om-del summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--pv-farge, var(--blekk)); border-bottom: 2px solid var(--pv-farge, var(--blekk)); transform: translateY(-70%) rotate(45deg); }
.pv-om-del[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.pv-om-del summary:hover { color: var(--pv-farge, var(--blekk)); }
.pv-om-del summary:focus-visible { outline: 2px solid var(--pv-aksent, var(--pv-farge)); outline-offset: 2px; border-radius: 4px; }
.pv-om-inn { padding: 0 0 16px; font-size: 15.5px; line-height: 1.6; }
.pv-om-inn p { margin: 0 0 10px; }
.pv-om-inn ul { margin: 0 0 10px; padding-left: 20px; }
.pv-om-inn li { margin: 0 0 7px; }
.pv-om-inn a { color: var(--pv-farge, var(--blekk)); text-decoration: underline; text-underline-offset: 2px; }
.pv-hel .pv-om + .pv-hel-lapp { padding-top: 18px; }
@media (max-width: 560px) {
  .pv-om { margin-top: 22px; padding: 0 16px 8px; }
  .pv-om h2 { font-size: 20px; }
  .pv-om-inn { font-size: 15px; }
}

/* Personvernlenken nederst i chatkortet på faste demosider. Følger med
   chatboten ved overlevering (personvernUrl på demoposten). */
.pv-hel .pv-kort-fot { padding: 0 16px 10px; text-align: center; background: #fff; font-size: 12px; line-height: 1.4; }
.pv-hel .pv-personvern { color: var(--blekk-2); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; cursor: pointer; }
.pv-hel .pv-personvern:focus-visible { outline: 2px solid var(--pv-aksent, var(--pv-farge)); outline-offset: 2px; border-radius: 3px; }
.pv-hel .pv-personvern:hover { color: var(--pv-farge, var(--blekk)); }
.pv-hel .pv-om-del:target { scroll-margin-top: 16px; }

/* Popupen «Personvern og databehandling» i kortet: alle delene åpne,
   scrollbar. Samme tekst som seksjonen under og personvernsiden. */
.pv-hel .pv-info { display: flex; flex-direction: column; padding: 0; }
.pv-hel .pv-info .pv-info-topp { flex: none; margin: 0; padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.08); }
.pv-hel .pv-info-kropp { flex: 1 1 auto; overflow: auto; padding: 6px 18px 20px; font-size: 14.5px; line-height: 1.6; }
.pv-hel .pv-info-del { padding: 12px 0 4px; border-bottom: 1px solid rgba(0,0,0,.07); }
.pv-hel .pv-info-del:last-of-type { border-bottom: 0; }
.pv-hel .pv-info-del h3 { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-farge, var(--blekk-3)); }
.pv-hel .pv-info-del p { margin: 0 0 8px; color: var(--blekk); }
.pv-hel .pv-info-del ul { margin: 0 0 8px; padding-left: 18px; }
.pv-hel .pv-info-del li { margin: 0 0 6px; }
.pv-hel .pv-info-del a { color: var(--pv-farge, var(--blekk)); text-decoration: underline; text-underline-offset: 2px; }


/* Ansvarsfraskrivelse i chatkortet: uoffisiell demo, ikke tilknyttet
   bedriften, svarene kan være feil. Alltid synlig, rett under navnet. */
.pv-ansvar {
  margin: 0; padding: 8px 14px;
  font-size: 12px; line-height: 1.4; font-weight: 500;
  background: #fff6dc; color: #5a4300;
  border-bottom: 1px solid rgba(90,67,0,.14);
  width: 100%; max-width: none !important; box-sizing: border-box;
}