/* ==========================================================================
   Sidekicken, panelet. 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 (seg-venter, seg-gjort, seg-info), og tallene står i mono.
   Spesifikasjonen står i docs/helhet/spes-sidekick.md del 3.
   ========================================================================== */

/* Alt står under .samtale, beholderen i chatten, så Sidekicken ikke blir
   et nytt toppnivåbegrep i stilarket (tak.json). */

/* Beholderen chat.js gir en registrert samtale. Den tar plassen strømmen
   ellers har, og står skjult når en kanal er valgt. */
.samtale > .egen-samtale { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.samtale > .egen-samtale[hidden] { display: none; }

.samtale .sidekick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.samtale .sidekick [hidden] { display: none; }

.samtale .sidekick-hode { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 0 var(--s-2); }

.samtale .sidekick-strom { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-2) 0 var(--s-4); }
.samtale .sidekick-strom .ingress { margin: var(--s-2) var(--s-4) var(--s-4) 0; }
.samtale .sidekick-tom { margin: var(--s-2) var(--s-4) 0 var(--marg); color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); max-width: 60ch; }

/* Initialen i margen: S for Sidekicken, din for deg. */
.samtale .sidekick-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--ink-2);
}

.samtale .sidekick-verktoy {
  margin: var(--s-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  color: var(--ink-3);
}
.samtale .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 ------- */
.samtale .sidekick-forslag { margin: var(--s-3) var(--s-4) var(--s-3) 0; }
.samtale .sidekick-forslag .inn { display: block; }
.samtale .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);
}
.samtale .sidekick-felt dt { color: var(--ink-3); }
.samtale .sidekick-felt dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.samtale .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);
}
.samtale .sidekick-avgjort:focus { outline: none; }
.samtale .sidekick-lenke { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-tekst); }

/* --- uten nøkkel --------------------------------------------------------- */
.samtale .sidekick-av { margin: var(--s-4) var(--s-4) 0 var(--marg); }
.samtale .sidekick-av-tittel { margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); color: var(--ink); }
.samtale .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;
}

/* --- under strømmen ------------------------------------------------------ */
.samtale .sidekick-varsel { flex: 0 0 auto; margin: 0; padding: 0 var(--s-4) 0 var(--s-2); }
.samtale .sidekick-hurtig { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
.samtale .sidekick-hurtig .knapp { border-color: var(--line-3); font-size: var(--t-3); }
.samtale .sidekick-teller { margin-right: auto; font-size: var(--t-1); color: var(--ink-3); }
.samtale .sidekick-skjema .skrivbunn { justify-content: flex-end; }

.samtale .sidekick-status {
  flex: 0 0 auto;
  min-height: var(--t-2-h);
  margin: 0;
  padding: 0 var(--s-4) var(--s-2);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
.samtale .sidekick-prikker { display: inline-flex; gap: var(--s-1); margin-left: var(--s-2); vertical-align: middle; }
.samtale .sidekick-prikker span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: sidekick-puls 1.2s ease-in-out infinite;
}
.samtale .sidekick-prikker span:nth-child(2) { animation-delay: .2s; }
.samtale .sidekick-prikker span:nth-child(3) { animation-delay: .4s; }
@keyframes sidekick-puls { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .samtale .sidekick-prikker span { animation: none; opacity: .6; }
}

/* Raden i chatlista: AI i mono ytterst, aldri et ulest-tall. */
.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); }

/* --- telefon og smalt panel ---------------------------------------------- */
@media (max-width: 899px) {
  .samtale .sidekick-felt { grid-template-columns: 1fr; gap: 0; }
  .samtale .sidekick-felt dd { margin-bottom: var(--s-2); }
  .samtale .sidekick-forslag .knapperad .knapp { flex: 1 1 0; }
  .samtale .sidekick-hurtig .knapp { flex: 1 1 auto; }
}