/* ==========================================================================
   Sidekicken, siden #sidekick. Egne regler som hjerne.css og oppgaver.css,
   fordi lodd.css deles til to andre repoer. Ingen nye farger: segmentene er
   de som alt finnes, og tallene står i mono. Spesifikasjonen står i
   docs/helhet/spes-sidekick-v2.md del 2 og 3.1.

   Alt står under #skjerm-sidekick og #kompispanel, så Sidekicken ikke blir
   et nytt toppnivåbegrep i stilarket (tak.json). Panelet tegner samtalen
   med de samme delene som siden, og får de samme reglene. Knappen og
   panelet har bare id (steg B6), så de heller ikke blir nye begreper. Fram til 29. september 2026 sto
   det samme under .samtale, i chatpanelet. Sidekicken flyttet ut av det i
   steg B5, og de gamle reglene gikk med, så ingen blir stående døde.
   ========================================================================== */

/* Beholderen chat.js gir en registrert samtale. Sidekicken bruker den ikke
   lenger, men registrerSamtale i chat.js står (bygg-v2.md del 0), og da må
   beholderen fortsatt kunne vises og skjules. */
.samtale > .egen-samtale { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.samtale > .egen-samtale[hidden] { display: none; }

/* Raden i chatlista for en registrert samtale: AI i mono ytterst. */
.sf-rad > .sidekick-ai { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); }
.sf-rad[aria-current="true"] > .sidekick-ai { color: var(--brand-blekk); }

:is(#skjerm-sidekick, #kompispanel) [hidden] { display: none !important; }

/* --- kompisen (3.1, figuren tatt tilbake 1. oktober 2026) ---------------
   En rund kropp i --brand med øyne og smil i --brand-blekk, paret som
   alltid står mot hverandre, så figuren synes i begge temaene. Antennen er
   det gamle loddet: en hårstrek med et lite lodd på toppen. Theodor likte
   den, og ville ha den tilbake etter gnisten i ringen fra versjon 2.

   Tre tilstander på den som bærer data-tilstand (feltet, margen, knappen):
   rolig blunker av og til, tenker ser opp, åpner munnen, svinger antennen
   og gir loddet amber, fargen for noe som er i gang, og lander (har noe)
   er et lite hopp når svaret kom. Ingen av dem flytter noe man leser.
   Bevegelsene er CSS-animasjoner, som går av seg selv også når siden er
   travel med strømmen. Gnisten uten flate (kompis-naken) er ikonet i det
   store feltet og i den tomme lista. */
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis { display: block; flex: 0 0 auto; overflow: visible; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-20 { width: 20px; height: 20px; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-32 { width: 32px; height: 32px; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-48 { width: 48px; height: 48px; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-kropp { fill: var(--brand); }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-stilk { stroke: var(--brand); stroke-width: 1.4; stroke-linecap: round; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-lodd { fill: var(--brand); transition: fill var(--tid-2) var(--kurve); }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-oye { fill: var(--brand-blekk); transform-box: fill-box; transform-origin: center; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-smil {
  fill: none;
  stroke: var(--brand-blekk);
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: opacity var(--tid-2) var(--kurve);
}
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-munn { fill: var(--brand-blekk); opacity: 0; transition: opacity var(--tid-2) var(--kurve); }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-figur { transform-box: view-box; transform-origin: 16px 31px; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-antenne { transform-box: view-box; transform-origin: 16px 7px; }
:is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-oyne { transition: translate var(--tid-3) var(--kurve); }

/* Rolig: blunker omtrent hvert femte sekund. Ingen sving i ro. */
:is(#skjerm-sidekick, #kompispanel) [data-tilstand="rolig"] .kompis-oye,
#kompisknapp[data-tilstand="rolig"] .kompis-oye { animation: kompis-blunk 5.2s linear infinite; }
/* Tenker: antennen svinger, øynene ser opp mot høyre, munnen blir en o. */
:is(#skjerm-sidekick, #kompispanel) [data-tilstand="tenker"] .kompis-antenne,
#kompisknapp[data-tilstand="tenker"] .kompis-antenne { animation: kompis-svinger var(--tid-6) ease-in-out infinite; }
:is(#skjerm-sidekick, #kompispanel) [data-tilstand="tenker"] .kompis-oyne,
#kompisknapp[data-tilstand="tenker"] .kompis-oyne { translate: .9px -1.1px; }
:is(#skjerm-sidekick, #kompispanel) [data-tilstand="tenker"] .kompis-smil,
#kompisknapp[data-tilstand="tenker"] .kompis-smil { opacity: 0; }
:is(#skjerm-sidekick, #kompispanel) [data-tilstand="tenker"] .kompis-munn,
#kompisknapp[data-tilstand="tenker"] .kompis-munn { opacity: 1; }
:is(#skjerm-sidekick, #kompispanel) [data-tilstand="tenker"] .kompis-lodd,
#kompisknapp[data-tilstand="tenker"] .kompis-lodd { fill: var(--amber); }
@keyframes kompis-blunk {
  0%, 94%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(.1); }
}
@keyframes kompis-svinger {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}

/* Gnisten uten flate, i merkets tekstfarge. Tenker: den puster og vrir
   seg litt (feltet på siden). */
:is(#skjerm-sidekick, #kompispanel) .kompis-naken .kompis-gnist { fill: var(--brand-tekst); transform-box: fill-box; transform-origin: center; }
:is(#skjerm-sidekick, #kompispanel) [data-tilstand="tenker"] .kompis-naken .kompis-gnist { animation: kompis-tenker var(--tid-6) ease-in-out infinite; }
@keyframes kompis-tenker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(.8) rotate(30deg); }
}

/* --- rammen: margen til venstre for loddlinja, saken til høyre ---------- */
:is(#skjerm-sidekick, #kompispanel) .sidekick-blokk { display: flex; align-items: flex-start; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-marg {
  flex: 0 0 var(--marg);
  width: var(--marg);
  padding: var(--s-2) var(--s-4) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
/* Versjon 2: på forsiden er margen ingen spalte lenger, men en linje over
   hilsenen, «Uke 40 · 20:00». Spalten var det Theodor kalte submenyen, og
   den bar tre ord (spes-design-v2.md 1.1). Uka og klokka står fortsatt. */
#skjerm-sidekick .sidekick-forside > .sidekick-blokk { flex-direction: column; align-items: stretch; }
#skjerm-sidekick .sidekick-forside .sidekick-marg {
  flex: 0 0 auto;
  width: auto;
  flex-direction: row;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 0 var(--s-2);
}
#skjerm-sidekick .sidekick-forside .sidekick-klokka { font-family: var(--font-mono); }
#skjerm-sidekick .sidekick-forside .sidekick-klokka::before { content: '·'; margin-right: var(--s-2); font-family: var(--font-ui); }
#skjerm-sidekick .sidekick-forside .sidekick-sak { padding-left: 0; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-side { min-height: 100%; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-uke { color: var(--ink-2); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-klokka { color: var(--ink-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-sak { flex: 1 1 auto; min-width: 0; max-width: 72ch; padding-left: var(--inn); }

/* --- forsiden (2.2), nærmere Shopify fra 29. september 2026 --------------
   Hilsenen, det store feltet med kompisen og brikkene står samlet i en
   midtstilt spalte til høyre for loddlinja, og samtalene under. Hilsenen
   står likevel der sidetittelen står på alle andre skjermer, rett under
   spaltens egen luft: nettleserprøven (Ø11) stopper en tittel som hopper
   ned når man bytter fane. Lufta ligger derfor mellom delene, ikke over. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-hilsen { margin: 0; }
/* Hilsenen er det ene stedet serifen blir i versjon 2: den er det fineste
   på siden (spes-design-v2.md 1.1 og 5). Alle andre h1 står i Geist. */
:is(#skjerm-sidekick, #kompispanel) h1.sidekick-hilsen { font-family: var(--font-display); font-weight: 400; font-size: var(--t-8); line-height: var(--t-8-h); letter-spacing: 0; }
#skjerm-sidekick .sidekick-forside .sidekick-sak {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-ingress {
  margin: var(--s-2) 0 var(--s-6);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  color: var(--ink-3);
}
#skjerm-sidekick .sidekick-forside .sidekick-ingress { max-width: 56ch; }

/* Det store feltet er ÉN flate: et .kort, hvitt og rundt med kortets
   skygge og ingen indre kant (spes-design-v2.md 1.1, som Shopify). Gnisten
   står rett på flaten, og Send er en rund pil ytterst. I mørkt er skyggen
   en kant, som på alle kort. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-felt-stor {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  border-radius: var(--r-4);
  text-align: left;
  transition: border-color var(--tid-2) var(--kurve);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-felt-stor:focus-within { border-color: var(--line-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-stortfelt {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: calc(var(--t-5-h) * 5);
  padding: var(--s-2) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-5);
  line-height: var(--t-5-h);
  resize: none;
  overflow-y: auto;
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-stortfelt:focus { outline: none; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-stortfelt::placeholder { color: var(--ink-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-felt-stor .knapp { flex: 0 0 auto; }
/* SEND. Rund pil på 36, stille i --flate-3 når feltet er tomt eller et svar
   er i gang, merkets fyll så snart det står noe der. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-send {
  flex: 0 0 auto;
  width: var(--kompis);
  height: var(--kompis);
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-blekk);
  transition: background var(--tid-1) var(--kurve), color var(--tid-1) var(--kurve);
}
/* 36 med mus på siden, som i prøven. Med en finger, på smal skjerm og i
   panelet er den 44, gulvet for en trykkflate. */
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  #skjerm-sidekick .sidekick-send { width: var(--menypunkt); height: var(--menypunkt); }
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-send:disabled { background: var(--flate-3); color: var(--ink-3); opacity: 1; cursor: default; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-send:not(:disabled):active { transform: scale(.94); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-pil { width: var(--ikon); height: var(--ikon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Feltet i samtalen er tomt før man skriver: da er pila stille. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-skjema:has(.skrivefelt:placeholder-shown) .sidekick-send { background: var(--flate-3); color: var(--ink-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-teller { font-size: var(--t-1); color: var(--ink-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-teller:empty { display: none; }

:is(#skjerm-sidekick, #kompispanel) .sidekick-brikker,
:is(#skjerm-sidekick, #kompispanel) .sidekick-sporsmal { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
#skjerm-sidekick .sidekick-forside .sidekick-brikker { justify-content: center; margin-top: var(--s-5); }
#skjerm-sidekick .sidekick-forside .sidekick-sporsmal { justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
/* Brikkene er tall som går et sted: hvite med kortets skygge, ikon, navn og
   tallet i en fylt pille (amber når noe venter). Spørsmålene er noe man
   spør Sidekicken om: stille tekstknapper uten kant. To slag, to former
   (spes-design-v2.md 1.1). */
#skjerm-sidekick .sidekick-brikker .tallbrikke { border-radius: 999px; padding: 0 var(--s-2) 0 var(--s-4); }
#skjerm-sidekick .sidekick-brikker .tallbrikke .menyikon { color: var(--ink-3); }
#skjerm-sidekick .sidekick-brikker .tallbrikke .mono { min-width: 24px; padding: var(--s-1) var(--s-3); border-radius: 999px; }
#skjerm-sidekick .sidekick-brikker .tallbrikke .mono.venter { background: var(--amber-svak); color: var(--amber); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-sporsmal .knapp { border-color: transparent; background: none; border-radius: 999px; color: var(--ink-2); font-size: var(--t-3); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  :is(#skjerm-sidekick, #kompispanel) .sidekick-sporsmal .knapp:hover { background: var(--flate-3); color: var(--ink); }
}

:is(#skjerm-sidekick, #kompispanel) .sidekick-samtaler { margin-top: var(--s-8); }
/* Samtalene er et kort som bolkene på Hjem: hodet med overskrift, antall og
   Arkiverte, og radene inni. */
#skjerm-sidekick .sidekick-samtaler.kort { padding: 0 var(--s-2) var(--s-2); }
#skjerm-sidekick .sidekick-samtaler > .seksjon { margin: 0; padding: var(--s-4) var(--s-3) var(--s-3); }
#skjerm-sidekick .sidekick-samtaler > .seksjon > .knapp { margin-left: auto; }
#skjerm-sidekick .sidekick-antall:empty { display: none; }
#skjerm-sidekick .sidekick-samtaler .sidekick-liste > .rad:first-child { border-top: 0; }
#skjerm-sidekick .sidekick-samtaler .sidekick-liste > .rad:last-child { border-bottom: 0; }
#skjerm-sidekick .sidekick-samtaler .sidekick-rad { border-radius: var(--r-2); }
/* Tom: gnisten i en rund flate, en setning, og hva som kommer her. */
:is(#skjerm-sidekick, #kompispanel) div.sidekick-tom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-5);
  text-align: center;
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-tomring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kompis);
  height: var(--kompis);
  margin-bottom: var(--s-1);
  border-radius: 50%;
  background: var(--brand-svak);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-tomtittel { margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); font-weight: 600; color: var(--ink); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-tomhva { margin: 0; max-width: 44ch; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-liste { min-height: 48px; }
:is(#skjerm-sidekick, #kompispanel) p.sidekick-tom { margin: 0; padding: var(--s-4) 0 var(--s-4) calc(var(--marg) + var(--inn)); color: var(--ink-3); font-size: var(--t-4); line-height: var(--t-4-h); }

/* Raden i samtalelista. Knappene kommer fram ved hover, og står alltid på
   berøring og på smal skjerm, der det ikke finnes noen hover. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-rad { transition: opacity var(--tid-2) var(--kurve-ut); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-rad.ut { opacity: 0; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-rad .inn { padding-top: var(--s-2); padding-bottom: var(--s-2); gap: var(--s-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-apne { display: block; min-height: 44px; color: inherit; text-decoration: none; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-rad.arkivert .tittel { color: var(--ink-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-radknapper { display: flex; flex: 0 0 auto; gap: var(--s-1); opacity: 0; transition: opacity var(--tid-2) var(--kurve); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-rad:hover .sidekick-radknapper,
:is(#skjerm-sidekick, #kompispanel) .sidekick-rad:focus-within .sidekick-radknapper { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  :is(#skjerm-sidekick, #kompispanel) .sidekick-rad:hover { background: var(--flate-3); }
}
@media (hover: none), (pointer: coarse), (max-width: 599px) {
  :is(#skjerm-sidekick, #kompispanel) .sidekick-radknapper { opacity: 1; }
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-navnfelt {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--brand-tekst);
  border-radius: var(--r-2);
  background: var(--flate);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-4);
  font-weight: 500;
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-navnfelt:focus { outline: none; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-angre {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding-left: calc(var(--marg) + var(--inn));
  font-size: var(--t-3);
  color: var(--ink-2);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-listefot { padding: var(--s-3) 0 0 calc(var(--marg) + var(--inn)); }

/* --- samtalen (2.3) ------------------------------------------------------ */
:is(#skjerm-sidekick, #kompispanel) .sidekick-samtalen { display: flex; flex-direction: column; min-height: 100%; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-tittelrad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-tittelrad h1 { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-tittelrad .sidekick-navnfelt { flex: 1 1 16ch; width: auto; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-tittelknapper { display: flex; gap: var(--s-1); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-strom { flex: 1 1 auto; padding: var(--s-4) 0; }
/* Meldingene står på loddlinja som radene: margen til venstre for streken
   med kompisen eller initialen helt inntil, teksten --inn til høyre for den.
   Chattens egen .melding sentrerer margen, og da la teksten seg oppå
   streken. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-strom .melding .marg { justify-content: flex-end; padding: var(--s-1) var(--s-4) 0 0; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-strom .melding .sak { padding-left: var(--inn); max-width: 72ch; }

/* Din avatar i margen er den runde fra Lodd (.avatar.person), i din farge.
   Sidekickens egne meldinger har kompisen. */

/* Stegene mens svaret lages (5.3), og linja de blir til når det er ferdig. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-steg { margin: var(--s-1) 0 0; padding: 0; list-style: none; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-steg li,
:is(#skjerm-sidekick, #kompispanel) .sidekick-verktoy {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  color: var(--ink-3);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-steg li { animation: sidekick-inn var(--tid-2) var(--kurve); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-verktoy { margin: var(--s-1) 0 0; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-merknad { margin: var(--s-1) 0 0; font-size: var(--t-2); line-height: var(--t-2-h); color: var(--ink-3); }

/* Forslagskortet: en .rad med loddlinja, ikke et kort med skygge. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-forslag { margin: var(--s-3) 0; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-forslag .inn { display: block; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-felt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-2) 0 var(--s-3);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-felt dt { color: var(--ink-3); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-felt dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-avgjort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-2) 0 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-2);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-avgjort:focus { outline: none; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-lenke { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-tekst); }

/* Feltet i samtalen er chattens, festet nederst med papiret bak, så det
   står når lista ruller. Papiret og ikke --flate: det er fargen bak siden,
   og et felt med en annen farge bak ville sett ut som et panel. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-skjema {
  position: sticky;
  bottom: 0;
  padding: var(--s-2) 0 var(--s-3) calc(var(--marg) + var(--inn));
  background: var(--paper);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-skjema .skrivbunn { justify-content: flex-end; }
/* Versjon 2: feltet i samtalen er ÉN flate, et .kort med rund Send, like
   bredt som meldingene over det, ikke en ramme over hele spalten. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-skjema .skriveboks.kort { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border: 1px solid var(--kort-strek); border-radius: var(--r-4); background: var(--flate); }
#skjerm-sidekick .sidekick-skjema .skriveboks.kort { max-width: calc(72ch - var(--inn)); }
/* Teksten står rett på kortet, uten en fylt flate i flaten. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-skjema .skriveboks.kort .skrivefelt { background: none; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-skjema .sidekick-teller { margin-right: auto; }
/* Statusfeltet er bare for skjermlesere fra 4. oktober 2026: det synlige
   er tenkelinja i strømmen, og to linjer som sa det samme ble støy. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-varsel { margin: var(--s-2) 0 0; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-samtalen .sidekick-varsel { padding-left: calc(var(--marg) + var(--inn)); }
/* Tenkelinja fra Lodd (.tenkelinje): prikkene, steget som går og tiden.
   Litt større og mørkere enn de ferdige stegene over, fordi det er den
   som lever. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-tenk {
  display: flex;
  margin: var(--s-2) 0 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-tenk .tenk-tekst { color: var(--ink-2); }

/* --- uten nøkkel --------------------------------------------------------- */
:is(#skjerm-sidekick, #kompispanel) .sidekick-av { margin: 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-av-tittel { margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); color: var(--ink); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-av-hvor {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* Overgangen fra forsiden til samtalen: bare opacity, ingen bevegelse.
   Den ses mange ganger om dagen. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-forside { transition: opacity var(--tid-2) var(--kurve-ut); }
:is(#skjerm-sidekick, #kompispanel) .sidekick-forside.ut { opacity: 0; }
:is(#skjerm-sidekick, #kompispanel) .sidekick-samtalen.inn { animation: sidekick-inn var(--tid-2) var(--kurve); }
@keyframes sidekick-inn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  :is(#skjerm-sidekick, #kompispanel) [data-tilstand] .kompis-gnist,
  :is(#skjerm-sidekick, #kompispanel) .sidekick-steg li,
  :is(#skjerm-sidekick, #kompispanel) .sidekick-samtalen.inn { animation: none; }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-forside,
  :is(#skjerm-sidekick, #kompispanel) .sidekick-rad { transition: none; }
}

/* --- telefon ------------------------------------------------------------- */
@media (max-width: 599px) {
  :is(#skjerm-sidekick, #kompispanel) .sidekick-felt-stor { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); gap: var(--s-2); }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-stortfelt { font-size: var(--t-4); line-height: var(--t-4-h); }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-felt { grid-template-columns: 1fr; gap: 0; }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-felt dd { margin-bottom: var(--s-2); }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-forslag .knapperad .knapp { flex: 1 1 0; }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-rad .inn { flex-wrap: wrap; }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-tittelknapper { width: 100%; }
  :is(#skjerm-sidekick, #kompispanel) .sidekick-ukedag { display: none; }
}

/* --- kompisen i hjørnet (3.3, figuren igjen fra 1. oktober 2026) ------
   Figuren er knappen: ingen pille og ingen sirkel rundt, bare kompisen
   selv, på --kompis (44) i begge retninger, på alle bredder. En kant i
   papirets farge rundt kroppen skiller den fra det den står over, som et
   klistremerke, i stedet for en skygge (Lodd: kant, ikke skygge). Navnet
   står i aria-label og title. Et trykk åpner siden #sidekick. Laget er rett
   under panelene. Knappen skjules mens kompispanelet er åpent (os.js), så
   den aldri ligger over Send. */
#kompisknapp {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: 23;
  width: var(--kompis);
  height: var(--kompis);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--tid-1) var(--kurve);
}
#kompisknapp[hidden] { display: none; }
#kompisknapp .kompis { width: var(--kompis); height: var(--kompis); }
#kompisknapp .kompis-kropp { stroke: var(--paper); stroke-width: 1.5; }
#kompisknapp .kompis-stilk { stroke-width: 1.6; }
#kompisknapp:focus-visible { outline: 2px solid var(--brand-tekst); outline-offset: 2px; }
/* Trykk: tilbakemelding, ikke pynt. Står også med redusert bevegelse. */
#kompisknapp:active { transform: scale(.94); }
/* Tomgang: svever en halv piksel opp og ned, så den ser levende ut uten å
   ta øyet. Bare i hjørnet, aldri i lista der man leser. */
#kompisknapp[data-tilstand="rolig"] .kompis-figur { animation: kompis-svev 3.6s ease-in-out infinite; }
/* Svaret kom (har noe): et lite hopp med antennen som dirrer etter, én
   gang. os.js setter rolig igjen på animationend for kompis-lander. */
#kompisknapp[data-tilstand="lander"] .kompis-figur { animation: kompis-lander var(--tid-5) var(--kurve-ut); }
#kompisknapp[data-tilstand="lander"] .kompis-antenne { animation: kompis-vipp var(--tid-5) ease-out; }
@media (hover: hover) and (pointer: fine) {
  #kompisknapp .kompis-antenne { transition: transform var(--tid-2) var(--kurve-ut); }
  #kompisknapp[data-tilstand="rolig"]:hover .kompis-antenne { transform: rotate(14deg); }
  #kompisknapp[data-tilstand="rolig"]:hover .kompis-oyne { translate: 0 -.8px; }
}
/* Luften nederst (lodd.css, body[data-kompis]) holdt bare når man rullet
   helt ned. Før det lå kompisen oppå tallet for «Returnerte ordrer» på
   Lager, 1280 px, og tallkolonnene står alltid ytterst til høyre. På en
   bred skjerm får spalten en marg til høyre som kompisen står i, like bred
   som kompisen tar, så ingenting ligger under den. Ikke rundt en modul:
   rammen skal fylle flaten. Her og ikke i lodd.css, fordi kompisen bare
   finnes i OS-et. */
@media (min-width: 900px) {
  :root:not(.modus-modul) body[data-kompis] .innhold { padding-right: calc(var(--s-6) + var(--kompis) + var(--s-3)); }
}
@keyframes kompis-svev {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.8px); }
}
@keyframes kompis-lander {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-3px) scale(.96, 1.04); }
  60% { transform: translateY(0) scale(1.06, .94); }
  80% { transform: translateY(0) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes kompis-vipp {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-14deg); }
  65% { transform: rotate(8deg); }
  85% { transform: rotate(-3deg); }
}

/* --- kompispanelet (del 4) -------------------------------------------------
   Over innholdet, inntil høyre kant som chatpanelet, på den samme bredden.
   Kant og ingen skygge: det ligger mot kanten, det flyter ikke. Inn på
   --tid-3, ut raskere på --tid-2. Inn bruker --kurve-mot og ikke --kurve-ut
   som spesifikasjonen sa: Lodd sier at det som flytter seg over skjermen har
   --kurve-mot, og --kurve-ut er for det som forsvinner. */
#kompispanel {
  position: fixed;
  top: calc(var(--topplinje) + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  z-index: 22;
  width: var(--chat-bredde);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-3);
  background: var(--flate);
  overscroll-behavior: contain;
  --marg: 56px;
  transform: translateX(100%);
  transition: transform var(--tid-2) var(--kurve-ut);
}
#kompispanel[hidden] { display: none; }
#kompispanel[data-apen] { transform: none; transition: transform var(--tid-3) var(--kurve-mot); }
/* Cmd og J: uten overgang, begge veier. */
#kompispanel[data-stille] { transition: none; }

/* Kompisknappen er skjult mens panelet står, så det trenger ingen plass
   til den nederst. Kompisen står i stedet ved tittelen. */
#kompispanel .sidekick-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-4) var(--s-4);
}
#kompispanel .sidekick-panel-topp { padding: var(--s-2) 0; border-bottom: 1px solid var(--line-2); }
#kompispanel .sidekick-panel-rad { display: flex; align-items: center; gap: var(--s-2); }
#kompispanel .sidekick-panel-rad h2 { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-5); line-height: var(--t-5-h); }
/* Lukk er en ekte flate på 44 i panelet, ikke 32 med et lag utenpå. */
#kompispanel [data-sk="lukk"] { width: 44px; height: 44px; }
#kompispanel .sidekick-panel-knapper { display: flex; align-items: center; gap: var(--s-1); }
#kompispanel .sidekick-panel-samtaletittel {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
#kompispanel .sidekick-ingress { margin: var(--s-3) 0 0; font-size: var(--t-3); line-height: var(--t-3-h); }
#kompispanel .sidekick-panelsamtale,
#kompispanel .sidekick-panelliste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#kompispanel .sidekick-strom { padding: var(--s-3) 0; }
#kompispanel .sidekick-strom .melding .sak { max-width: none; }
#kompispanel .sidekick-sporsmal {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding-left: calc(var(--marg) + var(--inn));
}
#kompispanel .sidekick-skjema { position: static; padding: var(--s-2) 0 0; background: none; }
#kompispanel .sidekick-apne {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
#kompispanel .sidekick-apne[aria-current="true"] .tittel { font-weight: 600; }
#kompispanel .sidekick-listefot { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Ingen sving, ingen svev, ingen landing og ingen blunk. Tenker vises
     som øynene som ser opp og munnen som blir en o, uten bevegelse, og den
     nakne gnisten i feltet blir blekere. Panelet kommer og går med
     opacity. */
  :is(#skjerm-sidekick, #kompispanel) [data-tilstand] .kompis-oye,
  :is(#skjerm-sidekick, #kompispanel) [data-tilstand] .kompis-antenne,
  #kompisknapp[data-tilstand] .kompis-oye,
  #kompisknapp[data-tilstand] .kompis-figur,
  #kompisknapp[data-tilstand] .kompis-antenne { animation: none; }
  :is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-oyne,
  :is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-smil,
  :is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-munn,
  :is(#skjerm-sidekick, #kompispanel, #kompisknapp) .kompis-lodd,
  #kompisknapp .kompis-antenne { transition: none; }
  #kompisknapp[data-tilstand="rolig"]:hover .kompis-antenne { transform: none; }
  #kompisknapp[data-tilstand="rolig"]:hover .kompis-oyne { translate: none; }
  :is(#skjerm-sidekick, #kompispanel) [data-tilstand="tenker"] .kompis-naken .kompis-gnist { opacity: .55; }
  #kompispanel { transform: none; opacity: 0; transition: opacity var(--tid-2) var(--kurve-ut); }
  #kompispanel[data-apen] { opacity: 1; transition: opacity var(--tid-2) var(--kurve); }
  #kompispanel[data-stille] { transition: none; }
}

/* Under 900 px tar panelet hele flaten, som chatten. Under 600 px står
   kompisen over streken nederst på iPhone. */
@media (max-width: 899px) {
  #kompispanel { left: 0; width: auto; border-left: 0; }
}
@media (max-width: 599px) {
  #kompisknapp { right: var(--s-5); bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
  #kompispanel .sidekick-panel { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
}

/* Stedet (spes-sidekick-kontekst.md 3.4 og 5.3). Skilleraden er stille:
   den sier bare at systemet er byttet. Byttet er én knapp og en merknad. */
:is(#skjerm-sidekick, #kompispanel) .sidekick-skille {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-bytte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 var(--s-3);
}
:is(#skjerm-sidekick, #kompispanel) .sidekick-bytte .sidekick-merknad { margin: 0; }