/* Innsiden-chat — widget i sidens eget designsprak:
   Brand Board-paletten, harde forskyvningsskygger pa innholdsblokker,
   Archivo, kontroller som kontroller. Nede til HOYRE (regboblen har venstre). */

/* Chat-elementene deler bunnavstand via variabel. Paa brede skjermer
   ligger samtykkebanneret nede til venstre (consent.js), saa chatten kan
   bli staaende i hoyre hjorne — paa mobil dekker banneret hele bredden,
   og da loftes chatten over det (se mobil-blokken nederst). */
:root { --chat-bunn: 28px; }
/* Cookiestripen ligger i full bredde helt nederst — loeft boten over den
   saa lenge den vises (fjernes naar valget er tatt) */
body:has(#hc-consent) { --chat-bunn: 84px; }

/* ---------- Apneknappen: bare snakkeboblen ----------
   Ingen sirkelflate, kant eller tekst — selve chat-ikonet i rust, fylt,
   med tre prikker og en myk fallskygge. Teksten baeres av teaseren. */
.chatknapp {
  /* Lik luft under og til hoeyre (28 px). Normalstoerrelse 50 px ikon. */
  position: fixed; right: 28px; bottom: var(--chat-bunn, 28px); z-index: 10000;
  display: inline-flex; align-items: center; justify-content: center;
  width: 86px; height: 86px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--rust-mork);
  filter: drop-shadow(0 3px 3px rgba(46, 50, 48, .30)) drop-shadow(0 9px 16px rgba(46, 50, 48, .24));
  /* 3 s paa stoerrelse gjelder ogsaa krympingen etter entreen */
  transition: width 3s ease, height 3s ease, transform .35s ease, filter .15s ease, opacity .25s ease;
}
/* Løftet boble mens boten står i entré-størrelse (dobbel klasse så den
   slår grunnregelen lenger ned i kaskaden) */
.chatteaser.chatteaser--hoy { bottom: calc(var(--chat-bunn, 28px) + 166px); }
/* Skjult til heroen er scrollet forbi (mobil, styres fra chat.js) */
.chatknapp--skjult { opacity: 0; transform: translateY(14px); pointer-events: none; }
.chatknapp:hover {
  /* Vokser ~30 % og loefter seg naar musen er over */
  transform: translateY(-4px) scale(1.3);
  filter: drop-shadow(0 6px 6px rgba(46, 50, 48, .28)) drop-shadow(0 16px 26px rgba(46, 50, 48, .30));
}
/* Entré på desktop (styres fra chat.js): starter bitteliten, vokser til
   100 px over 3 s mens hilseboblen står, og krymper så til normal (.6 s
   fra basen over). Overgangstiden her gjelder VEKSTEN. */
.chatknapp--liten { width: 0; height: 0; transform: translateY(150px); }
.chatknapp.chatknapp--liten svg { width: 0; height: 0; }
.chatknapp--entre,
.chatknapp--entre:hover {
  width: 156px; height: 156px; transform: none;
  transition: width 3s ease, height 3s ease, transform 3s ease, filter .15s ease;
}
.chatknapp.chatknapp--entre svg { width: 150px; height: 150px; transition: width 3s ease, height 3s ease; }
.chatknapp:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Lett pulsering paa selve figuren (ikke knappen — da kolliderer den
   ikke med skjult/hover-transformene). overflow synlig for sticker-kanten. */
.chatknapp svg {
  width: 80px; height: 80px; flex: none; overflow: visible;
  transition: width 3s ease, height 3s ease;
  animation: chatbot-puls 5s ease-in-out infinite;
}
@keyframes chatbot-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
.chatknapp span { display: none; }
.chatknapp[hidden] { display: none; }

/* ---------- Proaktiv teaser over knappen ---------- */
.chatteaser {
  position: fixed; right: 22px; bottom: calc(var(--chat-bunn, 28px) + 96px);
  z-index: 10000; max-width: 264px;
  display: flex; align-items: flex-start; gap: 4px;
  background: var(--cream-hi); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 6px 6px 6px 0;
  animation: chatteaser-inn .25s ease;
}
@keyframes chatteaser-inn { from { opacity: 0; transform: translateY(8px); } }
.chatteaser__tekst {
  font-family: 'Archivo', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1.45; text-align: left; color: var(--ink);
  background: none; border: 0; cursor: pointer; padding: 8px 2px 8px 14px;
}
.chatteaser__lukk {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 4px;
  background: none; cursor: pointer; color: rgba(46, 50, 48, .55);
  font-size: 18px; line-height: 1;
}
.chatteaser__lukk:hover { background: rgba(46, 50, 48, .08); color: var(--ink); }

/* ---------- Panelet ---------- */
.chatpanel {
  position: fixed; right: 22px; bottom: 22px; z-index: 10001;
  width: min(392px, calc(100vw - 44px));
  height: min(600px, calc(100dvh - 44px));
  display: flex; flex-direction: column;
  background: var(--cream-hi); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px;
  box-shadow: 8px 8px 0 var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
}
.chatpanel[hidden] { display: none; }

.chatpanel__topp {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--ink); color: var(--cream);
  border-bottom: 1.5px solid var(--ink); flex: none;
}
.chatpanel__topp b {
  font-size: 16px; letter-spacing: -0.02em; display: block; line-height: 1.2;
}
.chatpanel__topp small {
  display: block; font-size: 12px; opacity: .75; font-weight: 500;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .02em;
}
.chatpanel__lukk {
  margin-left: auto; flex: none;
  width: 34px; height: 34px; border: 0; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--cream); font-size: 24px; line-height: 1;
}
.chatpanel__lukk:hover { background: rgba(239, 230, 212, .14); }
.chatpanel__lukk:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* ---------- Meldingsfeltet ---------- */
.chatlogg {
  flex: 1; overflow-y: auto; padding: 18px 16px 10px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
.chatboble {
  max-width: 86%; padding: 11px 14px; border-radius: 3px;
  font-size: 15px; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: break-word;
}
.chatboble--bot {
  align-self: flex-start;
  background: #FFFDF7; border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(46, 50, 48, .16);
}
.chatboble--bruker {
  align-self: flex-end;
  background: var(--sand); border: 1.5px solid var(--ink);
}
.chatboble a { color: var(--rust-mork); font-weight: 600; }

/* «Skriver …»-indikatoren */
.chatboble--venter { color: rgba(46, 50, 48, .55); }
.chatboble--venter::after {
  content: '…'; display: inline-block; animation: chatprikker 1.2s steps(4) infinite;
}
@keyframes chatprikker { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 -8% 0 0); } }

/* ---------- Hurtigsporsmal ved start ---------- */
.chatforslag { display: flex; flex-wrap: wrap; gap: 8px; }
.chatforslag button {
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 13px; border-radius: 999px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
  transition: background .12s ease, color .12s ease;
}
.chatforslag button:hover { background: var(--ink); color: var(--cream); }

/* ---------- Skrivefeltet ---------- */
.chatskriv {
  flex: none; display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 14px; border-top: 1.5px solid var(--ink); background: var(--cream);
}
.chatskriv textarea {
  flex: 1; resize: none; max-height: 96px;
  font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--ink);
  padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 3px;
  background: #FFFDF7;
}
.chatskriv textarea:focus-visible { outline: 2px solid var(--rust-mork); outline-offset: 1px; }
.chatskriv button {
  flex: none; cursor: pointer;
  width: 42px; height: 42px; border: 0; border-radius: 6px;
  background: var(--rust-mork); color: #FFF8EE;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(46, 50, 48, .28);
  transition: background .15s ease, transform .12s ease;
}
.chatskriv button:hover { background: #B84A26; transform: translateY(-1px); }
.chatskriv button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.chatskriv button svg { width: 18px; height: 18px; }
.chatskriv button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.chatfot {
  flex: none; padding: 7px 14px 10px; background: var(--cream);
  font-size: 10.5px; line-height: 1.4; color: rgba(46, 50, 48, .55); text-align: center;
}
.chatfot a { color: inherit; }

/* ---------- Mobil: panelet tar hele skjermen ---------- */
@media (max-width: 640px) {
  :root { --chat-bunn: 12px; }
  /* Stripen bryter over flere linjer paa mobil — litt hoeyere loeft */
  body:has(#hc-consent) { --chat-bunn: 132px; }
  /* Full stoerrelse ogsaa paa mobil — men knappen er skjult til heroen
     er scrollet forbi (chat.js), saa den aldri kolliderer med hero-CTA-en */
  .chatknapp { right: 10px; bottom: var(--chat-bunn, 12px); width: 76px; height: 76px; }
  .chatknapp svg { width: 70px; height: 70px; }
  .chatteaser { right: 16px; max-width: calc(100vw - 96px); bottom: calc(var(--chat-bunn, 18px) + 70px); }
  .chatpanel {
    right: 0; bottom: 0; width: 100vw; height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatknapp, .chatskriv button, .chatforslag button { transition: none; }
  .chatknapp svg { animation: none; }
  .chatboble--venter::after { animation: none; }
  .chatteaser { animation: none; }
  .chatlogg { scroll-behavior: auto; }
}