.agent { position: fixed; z-index: 15; top: 56px; right: 0; bottom: 0; width: 360px; display: flex; flex-direction: column;
         background: var(--flate); border-left: var(--kant-sterk); box-shadow: var(--skygge-2); }
.agent[hidden], .agent-start[hidden], .agent-av[hidden], .agent-forslag[hidden] { display: none; }
.agent-hode { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-1) var(--sp-4);
              border-bottom: var(--kant); }
.agent-hode-valg { flex-basis: 100%; display: flex; align-items: center; margin-left: calc(-1 * var(--sp-2)); }
.agent-tittel-blokk { flex: 1; min-width: 0; }
.agent-om { font-size: var(--fs-sm); color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-om[hidden] { display: none; }
.agent-tittel { white-space: nowrap; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); }
.agent-tittel .ikon { width: 20px; height: 20px; }
.agent-ikonknapp { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0;
                   border-radius: var(--r-1); background: transparent; color: var(--tekst); cursor: pointer; }
.agent-ikonknapp:hover { background: var(--flate-2); }
.agent-ikonknapp .ikon { width: 20px; height: 20px; }
.agent-ny { min-height: 44px; padding: 0 var(--sp-3); border: var(--kant); border-radius: var(--r-1); background: var(--flate);
            color: var(--tekst); font-size: var(--fs-sm); font-weight: var(--w-tung); cursor: pointer; }
.agent-ny:hover { background: var(--flate-2); }
.agent-ny:disabled { visibility: hidden; }

.agent-logg { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
              font-size: var(--fs-sm); }
.agent-melding { max-width: 100%; }
.agent-melding.fra-meg { align-self: flex-end; max-width: 85%; background: var(--flate-2); color: var(--tekst);
                         border: var(--kant); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); }
.agent-melding.fra-ai { align-self: stretch; }
.agent-tekst p + p, .agent-tekst p + ul, .agent-tekst ul + p { margin-top: var(--sp-2); }
.agent-tekst ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
.agent-tekst li + li { margin-top: var(--sp-1); }
.agent-verktoy { display: flex; align-items: center; gap: var(--sp-2); color: var(--tekst-2); font-size: var(--fs-sm); }
.agent-verktoy.feilet { text-decoration: line-through; }
.agent-verktoy.ferdig::after { content: "✓"; font-weight: var(--w-tung); }
.agent-prikk { width: 8px; height: 8px; flex: none; border: var(--strek) solid var(--tekst-2); border-radius: 50%; }
.agent-verktoy.ferdig .agent-prikk { background: var(--tekst-2); }
.agent-verktoy:not(.ferdig) .agent-prikk { animation: agent-puls 1s var(--ease) infinite alternate; }
@keyframes agent-puls { from { opacity: 1; } to { opacity: .25; } }
.agent-lenke { position: relative; display: inline-block; min-width: 44px; padding: 0 var(--sp-1); border: 0; background: none;
               color: var(--tekst); font: inherit; font-weight: var(--w-tung); text-decoration: underline;
               text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.agent-lenke::after { content: ""; position: absolute; inset: -12px 0; }
.agent-lenke:hover { background: var(--flate-2); }

.agent-kort { border: var(--kant-sterk); border-radius: var(--r-2); padding: var(--sp-3); background: var(--flate);
              box-shadow: inset 4px 0 0 var(--signal); display: flex; flex-direction: column; gap: var(--sp-3); }
.agent-kort-tekst { font-weight: var(--w-tung); font-size: var(--fs-base); }
.agent-kort-knapper { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.agent-kort-knapper .knapp { min-height: 48px; }
.agent-kort-svar:empty { display: none; }
.agent-kort.utfort { box-shadow: inset 4px 0 0 var(--grafitt); }
.agent-kort.utfort .agent-kort-svar::before { content: "✓\00a0"; font-weight: var(--w-tung); }
.agent-kort.avbrutt { box-shadow: none; border-color: var(--linje); }
.agent-kort.avbrutt .agent-kort-tekst { color: var(--tekst-2); text-decoration: line-through; }
.agent-kort.feil .agent-kort-svar, .agent-feil { color: var(--feil); }
.agent-kort-svar .knapp { margin-left: var(--sp-2); }

.agent-av { margin: 0 var(--sp-4) var(--sp-3); padding: var(--sp-3); border: var(--kant); border-radius: var(--r-2);
            background: var(--flate-2); font-size: var(--fs-sm); }
.agent-forslag { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) 0; }
.agent-chip { min-height: 44px; padding: var(--sp-2) var(--sp-3); text-align: left; border: var(--kant-sterk); border-radius: var(--r-1);
              background: var(--flate); color: var(--tekst); font-size: var(--fs-sm); cursor: pointer; }
.agent-chip:hover { background: var(--flate-2); }

.agent-skriv { display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: var(--kant); }
.agent-felt { flex: 1; min-height: 48px; max-height: 160px; resize: none; padding: var(--sp-3); border: var(--kant-sterk);
              border-radius: var(--r-1); background: var(--flate); font-size: var(--fs-base); line-height: 1.35; }
.agent-felt:disabled { background: var(--flate-2); cursor: not-allowed; }
.agent-send { width: 48px; height: 48px; min-height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.agent-send:disabled { opacity: .45; cursor: not-allowed; }

.agent-start { position: fixed; z-index: 15; right: var(--sp-6); bottom: var(--sp-6); min-height: 56px; display: inline-flex;
               align-items: center; gap: var(--sp-2); padding: 0 var(--sp-5); border: var(--strek) solid var(--grafitt);
               border-radius: var(--r-2); background: var(--grafitt); color: var(--tekst-lys); font-weight: var(--w-tung);
               font-size: var(--fs-sm); box-shadow: var(--skygge-2); cursor: pointer; }
.agent-start:hover { background: var(--grafitt-2); }

.agent-topp { border: 1px solid var(--grafitt-3); }
.agent-topp .ikon { width: 20px; height: 20px; }
.agent-topp[aria-expanded="true"] { background: var(--tekst-lys); color: var(--grafitt); border-color: var(--tekst-lys); }
.agent-topp[aria-expanded="true"] .agent-start-tast { color: var(--tekst-2); border-color: var(--linje); }

@media (min-width: 900px) {
  .agent-start { display: none; }
  body.agent-apen .ramme { margin-right: 360px; }
  body.agent-apen .agent { box-shadow: none; }
}

@media (min-width: 900px) and (max-width: 1599px) {
  body.agent-apen .ramme { grid-template-columns: 72px minmax(0, 1fr); }
  body.agent-apen .meny-ord { display: none; }
  body.agent-apen .meny-knapp { justify-content: center; padding: 0; }
  body.agent-apen .arbeidsflate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.agent-apen .kol-tid { display: none; }
}

@media (max-width: 899px) {
  .agent-topp { display: none; }
}

@media (max-width: 899px) {
  .agent { top: 0; left: 0; width: auto; height: 100dvh; border-left: 0; z-index: 25; box-shadow: none; }
  body.agent-ark { overflow: hidden; }
  .agent-skriv { padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }
  .agent-felt { font-size: var(--fs-base); }
  body:not(.agent-apen) .innhold { padding-bottom: 72px; }
}

.agent-start-tast { font: inherit; font-size: var(--fs-xs); padding: 2px var(--sp-1); border: 1px solid var(--grafitt-3);
                    border-radius: var(--r-1); color: var(--tekst-lys-2); }

.agent-utfort { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
                border: var(--kant); border-radius: var(--r-2); background: var(--flate-2); }
.agent-utfort .ikon { width: 18px; height: 18px; }
.agent-utfort-tekst { flex: 1 1 180px; }
.agent-utfort.angret .agent-utfort-tekst { text-decoration: line-through; color: var(--tekst-2); }
.agent-utfort.feil .agent-kort-svar { color: var(--feil); }
.agent-angre { min-height: 44px; padding: 0 var(--sp-3); border: var(--kant-sterk); border-radius: var(--r-1); background: var(--flate);
               color: var(--tekst); font: inherit; font-weight: var(--w-tung); font-variant-numeric: tabular-nums; cursor: pointer; }
.agent-angre:hover { background: var(--flate-2); }

.agent-utkast-fakta { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.agent-utkast-fakta dt { color: var(--tekst-2); }
.agent-utkast-fakta dd { margin: 0; overflow-wrap: anywhere; }
.agent-utkast-emne, .agent-utkast-tekst { width: 100%; padding: var(--sp-2) var(--sp-3); border: var(--kant); border-radius: var(--r-1);
                                          background: var(--flate-2); font: inherit; font-size: var(--fs-sm); color: var(--tekst); }
.agent-utkast-emne { min-height: 44px; font-weight: var(--w-tung); }
.agent-utkast-tekst { resize: vertical; line-height: 1.45; }
.agent-utkast.redigeres .agent-utkast-emne, .agent-utkast.redigeres .agent-utkast-tekst { background: var(--flate); border: var(--kant-sterk); }
.agent-kort-knapper.like .knapp { flex: 1 1 0; min-width: 0; }

.agent-sporsmal { display: flex; flex-direction: column; gap: var(--sp-2); }
.agent-valg { display: flex; flex-direction: column; gap: var(--sp-2); }

@media (max-width: 899px) {
  .agent-start { left: 0; right: 0; bottom: 0; width: auto; min-height: 56px; border-radius: 0; justify-content: center;
                 padding: 0 var(--sp-4) env(safe-area-inset-bottom); box-shadow: none; border-width: var(--strek) 0 0; }
  .agent-start-ord { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .agent-start-tast { display: none; }
}

.agent-bryter { min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); border: 0;
                border-radius: var(--r-1); background: transparent; color: var(--tekst); font: inherit; font-size: var(--fs-sm);
                font-weight: var(--w-tung); white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .agent-bryter:hover { background: var(--flate-2); } }
.agent-bryter[hidden] { display: none; }
.agent-bryter:disabled { opacity: .45; cursor: not-allowed; }
.agent-bryter-spor { position: relative; width: 34px; height: 20px; flex: none; border: var(--kant-sterk); border-radius: 10px;
                     background: var(--flate); transition: background var(--mo-fast) var(--ease); }
.agent-bryter-spor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
                            background: var(--grafitt); transition: transform var(--mo-fast) var(--ease); }
.agent-bryter[aria-checked="true"] .agent-bryter-spor { background: var(--signal); }
.agent-bryter[aria-checked="true"] .agent-bryter-spor::after { transform: translateX(14px); }

.agent-mik { width: 48px; height: 48px; min-height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
             flex: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.agent-mik .ikon { width: 22px; height: 22px; }
.agent .agent-mik.aktiv, .agent .agent-mik.aktiv:hover { background: var(--signal); border-color: var(--grafitt); color: var(--signal-pa); }
.agent-mik:disabled { opacity: .45; cursor: not-allowed; }
.agent.lytter .agent-mik { animation: agent-lytt 1.1s var(--ease) infinite alternate; }
@keyframes agent-lytt { from { box-shadow: 0 0 0 0 var(--signal); } to { box-shadow: 0 0 0 6px var(--signal-svak); } }
.agent-felt.hores { border-color: var(--signal); background: var(--signal-svak); }

.agent-tale { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-4) 0 var(--sp-4);
              border-top: var(--kant); }
.agent-tale-tilstand { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--w-tung); }
.agent-tale-tilstand.feil { color: var(--feil); font-weight: var(--w-normal); }
.agent.lytter .agent-tale-tilstand::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--sp-2);
                                             border-radius: 50%; background: var(--signal); border: var(--strek) solid var(--grafitt);
                                             vertical-align: -1px; animation: agent-puls .8s var(--ease) infinite alternate; }
.agent-tale + .agent-skriv { border-top: 0; }

.vis-peker { position: fixed; z-index: 40; top: 0; left: 0; width: 28px; height: 28px; margin: -6px 0 0 -6px; pointer-events: none;
             border: 3px solid var(--signal); border-radius: 50% 50% 50% 0; background: var(--grafitt);
             box-shadow: 0 0 0 2px var(--flate), var(--skygge-2);
             transition: transform 520ms var(--ease); }
.vis-peker[hidden], .vis-merkelapp[hidden], .vis-banner[hidden] { display: none; }
.vis-merkelapp { position: fixed; z-index: 40; top: 0; left: 0; max-width: 272px; padding: var(--sp-2) var(--sp-3); pointer-events: none;
                 border-radius: var(--r-2); background: var(--grafitt); color: var(--tekst-lys); font-size: var(--fs-sm);
                 font-weight: var(--w-tung); box-shadow: var(--skygge-2); transition: transform 520ms var(--ease); }
.vis-markert { outline: 3px solid var(--signal) !important; outline-offset: 3px; border-radius: var(--r-2);
               transition: outline-color var(--mo-base) var(--ease); }
.vis-trykk-her { outline: 3px solid var(--grafitt) !important; outline-offset: 3px; box-shadow: 0 0 0 9px var(--signal) !important;
                 animation: vis-puls 1.2s var(--ease) infinite alternate; }
@keyframes vis-puls { from { box-shadow: 0 0 0 6px var(--signal); } to { box-shadow: 0 0 0 11px var(--signal-svak); } }
.vis-banner { position: fixed; z-index: 41; left: 50%; top: 64px; transform: translateX(-50%); display: flex; align-items: center;
              gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: var(--r-2);
              background: var(--grafitt); color: var(--tekst-lys); font-size: var(--fs-sm); font-weight: var(--w-tung); box-shadow: var(--skygge-2);
              max-width: calc(100vw - 2 * var(--sp-4)); }
.vis-prikk { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--signal); animation: agent-puls .8s var(--ease) infinite alternate; }
.vis-ta-over { min-height: 44px; background: var(--signal); border-color: var(--signal); color: var(--signal-pa); }
.vis-ta-over:hover { background: var(--signal-hover); }

@media (min-width: 900px) {
  body.agent-apen .vis-banner { left: calc((100vw - 360px) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  .vis-peker, .vis-merkelapp { transition: none; }
  .vis-trykk-her, .agent.lytter .agent-mik, .vis-prikk, .agent.lytter .agent-tale-tilstand::before { animation: none; }
}