/* Assistenten: panelet (samtaleliste, samtale, beskedtyper, fremdrift, input),
   knappen i topbaren, punktet i bundmenuen på telefon, og Opsætning > Assistenten
   (skydere, IQ, niveau, regler, måler, For øvede). Bygger på tokens.css og app.css:
   samme flader, samme radius. Desktop: panelet står fast til højre i 420 px og
   skubber resten af appen til venstre. Telefon: panelet fylder skærmen. Panelet er
   ét af de to steder i appen med rigtigt glas; ellers ingen effekter. */

/* ---- Knappen i topbaren ----
   Et rundt chatikon, ikke en pille med navnet: navnet står allerede yderst til venstre i
   topbaren, og to gange "Prometa" ved siden af hinanden lignede en fejl. Knappen står
   altid tændt i mærkets farve; lyskanten ånder, mens panelet er lukket, så det kan ses,
   at der er en at spørge, og står stille, når panelet er åbent. Den ånder mellem fuld
   styrke og lidt over halv, aldrig ned i ingenting: en kant, der forsvinder helt, ligner
   en fejl mere end en invitation. */
.assistent-knap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang);
  /* Styrken regnes her, hvor --glod-faktor er slået op for det tema, brugeren har.
     Den må ikke stå i tokens.css: en variabel med var(--glod-faktor) i sig ville blive
     slået op der og komme ud tom (samme fælde som prioriteringens ring i tavle.css). */
  --glod-basis: 0.9;
  --glod-styrke: calc(var(--glod-basis) * var(--glod-faktor));
  /* Bunden i åndedraget. Højere end kortenes --puls-bund, fordi knappen er lille:
     samme dæmpning ville få kanten til at blinke væk. */
  --knap-puls-bund: 0.6;
}
.assistent-knap svg { display: block; }
/* Ved musen: samme farve, lidt mere af den. */
.assistent-knap:hover { background: rgba(var(--accent-rgb), 0.2); }
/* Lyskanten ligger i sit eget lag uden for knappen, så den hverken flytter ikonet
   eller tager imod klik. */
.assistent-knap::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--accent), var(--glod-lag-1) var(--accent), var(--glod-lag-2) var(--accent);
  opacity: var(--glod-styrke);
  animation: assistent-puls 3.2s ease-in-out infinite;
}
.assistent-knap.aktiv::after { animation: none; }
@keyframes assistent-puls {
  0%, 100% { opacity: var(--glod-styrke); }
  50% { opacity: calc(var(--glod-styrke) * var(--knap-puls-bund)); }
}
/* Uden bevægelse lyser kanten stille. */
@media (prefers-reduced-motion: reduce) {
  .assistent-knap::after { animation: none; }
}
/* Med en finger frem for en mus skal knappen kunne rammes. */
@media (pointer: coarse) {
  .assistent-knap { width: 44px; height: 44px; }
}

/* ---- Telefon: assistenten som sidste punkt i bundmenuen, ved siden af Konto ----
   Den lå før som en flydende pille over indholdet og dækkede en linje tekst på hver
   skærm. Her ligger den i menuen og kan ikke komme oven på noget. */
.nav-assistent {
  display: none;
  border: none;
  background: none;
  color: var(--tekst-svag);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
}
.nav-assistent.aktiv { color: var(--accent); background: var(--accent-bg); }

/* ---- Panelet ---- */
.assistent-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  background: var(--flade);
  border-left: 1px solid var(--linje);
  display: flex;
  flex-direction: column;
  z-index: 12;
  padding-top: env(safe-area-inset-top);
}
.assistent-hoved {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 52px;
  padding: 0 0.75rem 0 1rem;
  border-bottom: 1px solid var(--linje);
  flex: 0 0 auto;
}
/* Panelet er det andet sted i appen med rigtigt glas (det første er kortpanelet
   i tavle.css, hvor begrundelsen står). Det ligger oven på arbejdsfladen, det er
   ét ad gangen, og fladen er næsten uigennemsigtig, så samtalen kan læses. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .assistent-panel {
    background: var(--glas-flade);
    -webkit-backdrop-filter: var(--glas-sloer);
    backdrop-filter: var(--glas-sloer);
  }
}
.assistent-hoved img { width: 22px; height: 22px; }
.assistent-navn { font-weight: 600; font-size: 1.05rem; }
.assistent-hoved .kryds { margin-left: auto; }
@media (min-width: 1000px) {
  [data-assistent="aaben"] .skal { padding-right: 420px; }
}
/* Med panelet åbent er topbaren smal; panelets eget hoved viser navnet, så knappen viger for søgefeltet. */
@media (min-width: 1000px) and (max-width: 1399px) {
  [data-assistent="aaben"] .assistent-knap { display: none; }
}
@media (max-width: 999px) {
  .assistent-panel { width: 100%; border-left: none; z-index: 30; }
}
@media (max-width: 720px) {
  .assistent-knap { display: none; }
  .nav-assistent { display: flex; }
  .assistent-panel { padding-bottom: env(safe-area-inset-bottom); }
  .assistent-hoved { height: 48px; }
}

/* ---- Samtalelisten ---- */
.samtaleliste { flex: 1; overflow: auto; padding: 0.75rem 1rem; }
.samtaleliste-hoved { margin-bottom: 0.75rem; }
.samtaleliste .besked { margin-bottom: 0.75rem; }
.samtaleliste-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.samtaleliste-liste button {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
  cursor: pointer;
  transition: border-color var(--overgang), background-color var(--overgang);
}
.samtaleliste-liste button:hover { border-color: var(--accent); background: var(--accent-bg); }
.samtaleliste-titel { font-weight: 500; overflow-wrap: anywhere; }
.samtaleliste-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--tekst-svag); }
.samtale-tom { color: var(--tekst-svag); padding: 1rem 0.25rem; text-align: center; }

/* ---- Samtalen ---- */
.samtale { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.samtale-hoved {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--linje);
  flex: 0 0 auto;
}
.samtale-tilbage {
  width: 32px; height: 32px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tekst-svag);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.samtale-tilbage:hover { color: var(--tekst); background: var(--flade-2); }
.samtale-titel { font-size: 0.975rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.samtale-kort-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius);
  color: var(--accent);
  background: var(--accent-bg);
}
.samtale-beskeder { flex: 1; overflow: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.samtale-besked { display: flex; flex-direction: column; max-width: 88%; }
.samtale-besked-bruger { align-self: flex-end; align-items: flex-end; }
.samtale-besked-assistent { align-self: flex-start; align-items: flex-start; }
.samtale-type-handling, .samtale-type-fejl, .samtale-type-godkendelse { max-width: 100%; width: 100%; }
.samtale-boble {
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius);
  background: var(--flade-2);
  color: var(--tekst);
  overflow-wrap: anywhere;
}
.samtale-besked-bruger .samtale-boble { background: var(--accent); color: var(--accent-tekst); }
.samtale-boble p { margin: 0 0 0.5rem; }
.samtale-boble p:last-child { margin-bottom: 0; }
.samtale-boble ul, .samtale-boble ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.samtale-boble ul:last-child, .samtale-boble ol:last-child { margin-bottom: 0; }
.samtale-meta { font-size: 0.75rem; color: var(--tekst-svag); margin-top: 0.2rem; padding: 0 0.25rem; }

/* Spørgsmål: to til fire knapper plus et frit felt. */
.samtale-valg { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.samtale-valg .knap { padding: 0.4rem 0.75rem; font-size: 0.9rem; }
.samtale-frit { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.samtale-frit input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
}
.samtale-frit input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.samtale-frit .knap { padding: 0.4rem 0.75rem; font-size: 0.9rem; }
.samtale-svaret { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--tekst-svag); }

/* Godkendelse: ét kort med konsekvensen over knapperne. */
.samtale-type-godkendelse .samtale-boble {
  background: var(--flade);
  border: 1px solid var(--advar);
  width: 100%;
}
.samtale-godkendelse-hvad { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--advar); margin: 0 0 0.25rem; }
.samtale-godkendelse-tekst { font-weight: 500; margin: 0 0 0.25rem; }
.samtale-klasse { font-size: 0.8rem; color: var(--tekst-svag); margin: 0; }
.samtale-klasse-uigenkaldeligt { color: var(--fejl); font-weight: 500; }
.samtale-altid { font-size: 0.8rem; color: var(--tekst-svag); margin: 0.25rem 0 0; }
.samtale-boble:has(.samtale-godkendelse-ja), .samtale-boble:has(.samtale-godkendelse-nej) { border-color: var(--linje); }
.samtale-rettelse { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.samtale-rettelse textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
  resize: vertical;
}
.samtale-rettelse textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.samtale-rettelse .knap { align-self: flex-start; padding: 0.4rem 0.75rem; font-size: 0.9rem; }

/* Handling: en dæmpet linje. Fejl: en rød linje. */
.samtale-type-handling .samtale-boble { background: transparent; padding: 0.2rem 0.25rem; }
.samtale-handling { font-size: 0.875rem; color: var(--tekst-svag); }
.samtale-handling a, .samtale-handling .link-knap { font-size: 0.875rem; margin-left: 0.25rem; }
.samtale-type-handling .samtale-meta, .samtale-type-fejl .samtale-meta { display: none; }
.samtale-type-fejl .samtale-boble { background: var(--fejl-bg); color: var(--fejl); width: 100%; }
.samtale-fejl { font-size: 0.925rem; }

/* Fremdrift, mens assistenten arbejder. */
.samtale-fremdrift {
  align-self: flex-start;
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  border: 1px dashed var(--linje);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--tekst-svag);
}
.samtale-fremdrift-hoved { display: flex; align-items: center; gap: 0.5rem; }
.samtale-fremdrift-hoved .link-knap { margin-left: auto; font-size: 0.85rem; }
.samtale-fremdrift ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.samtale-fremdrift li { margin-top: 0.15rem; }
.samtale-puls {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

/* Input nederst: Enter sender, Shift+Enter giver linjeskift. */
.samtale-besked-linje { padding: 0 1rem; }
.samtale-input {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.6rem 1rem 0.25rem;
  border-top: 1px solid var(--linje);
  flex: 0 0 auto;
}
.samtale-input textarea {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 160px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
  resize: none;
}
.samtale-input textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.samtale-hint { margin: 0; padding: 0 1rem 0.5rem; font-size: 0.75rem; color: var(--tekst-svag); }
@media (max-width: 720px) {
  .samtale-hint { display: none; }
  .samtale-input { padding-bottom: 0.6rem; }
}

/* ---- Opsætning > Assistenten ---- */
.assistent-opsaetning .boks h2 { margin-bottom: 0.25rem; }
.assistent-opsaetning form.boks { display: flex; flex-direction: column; gap: 1rem; }
.assistent-opsaetning form.boks > .hjaelp { margin-bottom: 0; }

/* De fire skydere med fem hak og et ord i hver ende. */
.skydere { display: flex; flex-direction: column; gap: 0.9rem; }
.skyder { display: flex; flex-direction: column; gap: 0.15rem; }
.skyder-ord { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 500; }
.skyder input[type="range"], .iq input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.skyder-hak { display: flex; justify-content: space-between; padding: 0 6px; }
.skyder-hak span { width: 6px; height: 6px; border-radius: 50%; background: var(--linje); }
.skyder-hak span.aktiv { background: var(--accent); }

/* IQ-skyderen med tre områder skrevet på. */
.iq-vaerdi { margin-left: auto; font-weight: 500; color: var(--accent); font-size: 0.875rem; }
.iq-omraader { display: grid; grid-template-columns: 3fr 4fr 3fr; gap: 3px; font-size: 0.75rem; text-align: center; }
.iq-omraader span {
  padding: 0.2rem 0.25rem;
  border-radius: 4px;
  background: var(--flade-2);
  color: var(--tekst-svag);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iq-omraader span.aktiv { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.iq-omraader.iq-laast .iq-grundig { opacity: 0.5; text-decoration: line-through; }
.iq-laast-tekst { color: var(--advar); }

/* Eksemplet på et svar. */
.eksempel {
  background: var(--flade-2);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.eksempel-hoved { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tekst-svag); margin: 0 0 0.35rem; }
.eksempel-spoergsmaal { font-style: italic; color: var(--tekst-svag); margin: 0 0 0.5rem; }
.eksempel-tekst p { margin: 0 0 0.5rem; }
.eksempel-tekst p:last-child { margin: 0; }

/* Hvor meget må den gøre selv: fire kort med én linje under hvert. */
.niveau-valg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.niveau-kort {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--overgang), background-color var(--overgang);
}
.niveau-kort:hover { background: var(--flade-2); }
.niveau-kort.valgt { border-color: var(--accent); background: var(--accent-bg); }
.niveau-kort input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.niveau-kort:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-bg); }
.niveau-titel { font-weight: 600; }
.niveau-kort.valgt .niveau-titel { color: var(--accent); }
.niveau-linje { font-size: 0.85rem; color: var(--tekst-svag); }
.niveau-advarsel { font-size: 0.85rem; color: var(--advar); margin-top: 0.2rem; }
@media (max-width: 720px) { .niveau-valg { grid-template-columns: 1fr; } }

/* Det spørger den altid om. */
.altid-liste { margin: 0; padding-left: 1.25rem; }
.altid-liste li { margin-bottom: 0.25rem; }

/* Regler: klar tekst, en kontakt og Slet. */
.regler-udkast-linje {
  font-size: 0.875rem;
  color: var(--advar);
  background: var(--advar-bg);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.regel-liste { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.regel-liste li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--linje);
}
.regel-liste li:last-child { border-bottom: 1px solid var(--linje); }
.regel-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.regel-fra .regel-tekst { color: var(--tekst-svag); }
.regel-slet { color: var(--fejl); font-size: 0.875rem; white-space: nowrap; }
.regel-ny { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--linje); }
.kontakt { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; }
.kontakt input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kontakt-skinne {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--linje);
  position: relative;
  transition: background-color var(--overgang);
}
.kontakt-skinne::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--flade);
  transition: transform var(--overgang);
}
.kontakt input:checked + .kontakt-skinne { background: var(--ok); }
.kontakt input:checked + .kontakt-skinne::after { transform: translateX(16px); }
.kontakt input:focus-visible + .kontakt-skinne { box-shadow: 0 0 0 3px var(--accent-bg); }
.kontakt input:disabled + .kontakt-skinne { opacity: 0.55; }

/* Måleren for AI-forbrug: et <progress>, fordi CSP forbyder en bredde sat inline. */
.maaler {
  display: block;
  width: 100%;
  height: 10px;
  border: none;
  border-radius: 999px;
  background: var(--flade-2);
  overflow: hidden;
  margin: 0.25rem 0 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  color: var(--accent);
}
.maaler::-webkit-progress-bar { background: var(--flade-2); border-radius: 999px; }
.maaler::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.maaler::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.maaler-advarsel { color: var(--advar); }
.maaler-advarsel::-webkit-progress-value { background: var(--advar); }
.maaler-advarsel::-moz-progress-bar { background: var(--advar); }
.maaler-loft { color: var(--fejl); }
.maaler-loft::-webkit-progress-value { background: var(--fejl); }
.maaler-loft::-moz-progress-bar { background: var(--fejl); }
.besked-efter { margin-top: 0.75rem; }
.besked-foer { margin-bottom: 0.75rem; }
.maaler-tekst { margin-bottom: 0.5rem; }
.loft {
  background: var(--fejl-bg);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  margin-top: 0.5rem;
}
.loft-tekst { color: var(--fejl); font-weight: 500; }
.loft .handlinger .knap { font-size: 0.9rem; }

/* For øvede: motor, nøgle, model og trinnene fra testen. */
.for-oevede .soegenoegle { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linje); }
.for-oevede h3 { margin-bottom: 0.25rem; }
.trin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.trin-liste li { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.trin-liste .status-prik.fejl { background: var(--fejl); }
.trin-navn { font-weight: 500; }
.trin-ok .trin-navn { color: var(--ok); }
.trin-fejl .trin-navn { color: var(--fejl); }
.trin-besked { color: var(--tekst-svag); }
.regel-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 720px) { .regel-filter { grid-template-columns: 1fr; } }

/* ---- Rettelser efter kontrollen af trin 2 og 3: grå linjer i tråden og fortrudte handlinger ---- */
/* Én linje uden boble: "Du bad Prometa om hjælp med ..." og "Prometa venter på dit svar ovenfor." */
.samtale-linje { margin: 0.25rem 0 0.5rem; font-size: 0.85rem; color: var(--tekst-svag); text-align: center; }
.samtale-venter { padding: 0.4rem 0.6rem; background: var(--flade-2); border-radius: var(--radius); }
.samtale-handling-fortrudt > span:first-child { text-decoration: line-through; }