/* ANBUD — visuell identitet "Papper och bläck" (omdesign 2026-09).
   Varmt papper i bakgrunden, bläcksvart text och knappar, plommon som enda accentfärg.
   Grönt/gult/rött är reserverat för bedömning och status, så färg alltid betyder något.
   Rubriker i Instrument Serif, brödtext i Work Sans. Designkanvas: se tasks/todo.md. */

/* Typsnitten är självhostade, inte hämtade från Google Fonts CDN. Ett CDN-anrop
   skickar besökarens IP till Google innan hen gjort något val alls, och sidan är
   publik. Same-origin ger dessutom snabbare första rendering och en sida som inte
   slutar fungera för att en tredje part gör det. Licens: dashboard/static/fonts/OFL.txt

   latin-ext laddas bara när en sida faktiskt behöver tecknen (unicode-range styr
   det) — därför preloadas bara latin i mallarna. Work Sans är EN variabel fil för
   hela vikt-spannet, så 400/500/600 kostar inget extra. */

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;          /* variabel axel — en fil täcker alla vikter */
  font-display: swap;
  src: url("/static/fonts/work-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/work-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Deklarera schemat. Utan den här raden räknar webbläsaren sidan som "odeklarerad" och
     tar sig friheten att auto-invertera den — Brave och Chrome på mobil gör det aggressivt,
     och en kund mötte ANBUD i fel färger med tvättad text. Vårt mörka tema är opt-in via
     data-tema och ska INTE utlösas av systemets läge, så här står ljust. Raden styr också
     hur webbläsaren ritar sina egna kontroller: fält, rullister, kryssrutor. */
  color-scheme: light;
  --radius: .75rem;
  --background: oklch(96.5% .008 85);        /* papper */
  --foreground: oklch(22% .02 70);           /* bläck */
  --surface: oklch(93% .014 85);
  --surface-elevated: oklch(99% .004 85);
  --card: oklch(99% .004 85);
  --muted: oklch(52% .02 70);
  --primary: oklch(22% .02 70);              /* knappar: bläck */
  --primary-foreground: oklch(96.5% .008 85);
  --brand: oklch(42% .13 320);               /* plommon: länkar, aktiv meny, steg */
  --brand-hover: oklch(35% .13 320);
  --brand-foreground: oklch(98% .006 320);
  --accent: oklch(93% .03 320);              /* plommon-ton för markeringar */
  --border: oklch(88% .016 85);
  --go: oklch(52% .13 150);
  --go-bg: oklch(94% .045 150);
  --granska: oklch(60% .14 70);
  --granska-bg: oklch(95% .05 85);
  --nej: oklch(52% .17 28);
  --nej-bg: oklch(94% .04 28);
  --skugga: 0 1px 2px oklch(22% .02 70 / .06), 0 4px 16px oklch(22% .02 70 / .05);
}

/* Mörkt läge finns kvar som ett medvetet val via data-tema="morkt" på <html>;
   ingen automatisk växling — anbud.io är en ljus sajt. */
:root[data-tema="morkt"] {
  color-scheme: dark;
  --background: oklch(16% .012 70);
  --foreground: oklch(95% .008 85);
  --surface: oklch(21% .014 70);
  --surface-elevated: oklch(25% .014 70);
  --card: oklch(21% .014 70);
  --muted: oklch(70% .015 70);
  --primary: oklch(95% .008 85);
  --primary-foreground: oklch(16% .012 70);
  --brand: oklch(72% .12 320);
  --brand-hover: oklch(80% .11 320);
  --brand-foreground: oklch(16% .012 70);
  --accent: oklch(30% .06 320);
  --border: oklch(100% 0 0 / .12);
  --go-bg: oklch(26% .05 150);
  --granska-bg: oklch(28% .06 85);
  --nej-bg: oklch(26% .06 28);
  --skugga: 0 1px 2px oklch(0% 0 0 / .3), 0 4px 16px oklch(0% 0 0 / .25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* hidden-attributet ska ALLTID dölja. Webbläsarens egen stilmall gör det redan, men den
   ligger först av alla — vilken senare regel som helst som sätter display på samma element
   vinner över den. Det har hänt två gånger här: chattpanelen stod alltid öppen, och
   bilage-chippet blev kvar efter att filen skickats. Båda gångerna syntes felet bara i en
   webbläsare, aldrig i koden. Regeln nedan tar bort hela den felkällan för framtida
   komponenter. `!important` är befogat: `hidden` betyder att elementet inte ska visas, och
   det ska inget annat kunna åsidosätta av misstag. */
[hidden] { display: none !important; }

body {
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1, h2 { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.015em; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.dampad { color: var(--muted); font-size: .88em; }
.hoger { text-align: right; }

/* ── Ordmärke ──────────────────────────────────────────────────────────── */
.ordmarke { display: inline-flex; align-items: center; text-decoration: none; }
.ordmarke:hover { text-decoration: none; }
/* Bilden bär både märket och ordet. width/height står i markupen så att raden inte
   hoppar medan bilden laddas; här styrs bara den renderade bredden. */
.ordmarke img { width: 176px; height: auto; display: block; }
.ordmarke img.med-slogan { width: 208px; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.skal { display: flex; min-height: 100vh; }

.sidopanel {
  width: 240px; flex: 0 0 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column;
}
.sidopanel .logga { display: block; margin: 0 0 1.75rem .25rem; }

.meny { list-style: none; margin: 0; padding: 0; flex: 1; }
.meny li { margin-bottom: .15rem; }
.meny a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: .5rem; min-height: 42px;
  color: var(--foreground); font-size: .92rem; font-weight: 500;
}
.meny a:hover { background: var(--accent); text-decoration: none; color: var(--foreground); }
.meny a.aktiv { background: var(--brand); color: var(--brand-foreground); }
.meny a.aktiv svg { stroke: var(--brand-foreground); }
.meny svg { width: 17px; height: 17px; stroke: var(--muted); stroke-width: 2; fill: none; flex: 0 0 auto; }
.meny a.lugn { color: var(--muted); font-size: .88rem; }

/* Utloggningen är en POST — en främmande sajt ska inte kunna tvinga fram den via en
   länk eller <img>. Knappen ligger uppe till höger i innehållets topprad. */
.topprad { display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
           margin: -.5rem 0 1.25rem; font-size: .85rem; color: var(--muted); }
.topprad-foretag { font-weight: 600; color: var(--foreground); }
.topprad form { margin: 0; }
.knapp.liten { min-height: 34px; padding: .3rem .75rem; font-size: .85rem; }

.innehall { flex: 1; padding: 2rem 2.5rem 3rem; max-width: 1200px; min-width: 0; }
.sidhuvud { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.sidhuvud p { color: var(--muted); margin: 0; }
.sidhuvud .knappar { display: flex; gap: .6rem; align-items: center; flex: 0 0 auto; }
.tillbaka { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; margin-bottom: .6rem; }
.tillbaka svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ── Kort ──────────────────────────────────────────────────────────────── */
.kort {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  box-shadow: var(--skugga); margin-bottom: 1.1rem;
}
.kort.markerad { border-color: var(--brand); }
.kort-rubrik { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.kort-rubrik h2 { margin: 0; }
.kort-rubrik .under { display: flex; flex-direction: column; gap: .15rem; }

.rutnat { display: grid; gap: 1.1rem; }
.rutnat.tre { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rutnat.tva { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rutnat.fyra { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rutnat > .kort { margin-bottom: 0; }

.nyckeltal { text-align: left; display: flex; flex-direction: column; gap: .15rem; }
.nyckeltal .tal { font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; display: block; }
.nyckeltal .tal.go { color: var(--go); } .nyckeltal .tal.granska { color: var(--granska); } .nyckeltal .tal.dampad { color: var(--muted); font-size: 2.1rem; }
.nyckeltal .etikett { font-size: .92rem; font-weight: 600; }
.nyckeltal .forklaring { font-size: .82rem; color: var(--muted); }

/* ── Märken ────────────────────────────────────────────────────────────── */
.marke {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.marke svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.marke.go { background: var(--go-bg); color: var(--go); }
.marke.granska { background: var(--granska-bg); color: var(--granska); }
.marke.no_go, .marke.nej { background: var(--nej-bg); color: var(--nej); }
.marke.neutral { background: var(--surface); color: var(--muted); }
.marke.brand { background: var(--accent); color: var(--brand); }
.marke.ska { background: var(--accent); color: var(--brand); }   /* ska-krav är blått/plommon, inte rött — rött betyder "något saknas" */
.marke.bor { background: var(--surface); color: var(--muted); }

/* Bedömning: poängen står aldrig naken — alltid märke + stapel + N/100. */
.bedomning { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; min-width: 150px; }
.bedomning .rad { display: flex; align-items: center; gap: .5rem; width: 100%; }
.stapel { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; flex: 1; }
.stapel > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.stapel.go > span { background: var(--go); } .stapel.granska > span { background: var(--granska); } .stapel.no_go > span { background: var(--nej); }

/* ── Flikar ────────────────────────────────────────────────────────────── */
.flikar { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: .25rem; background: var(--card); border: 1px solid var(--border); border-radius: .65rem; padding: .25rem; margin-bottom: 1rem; }
.flik {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: .5rem; min-height: 40px;
  font-size: .9rem; font-weight: 500; color: var(--foreground); border: 1px solid transparent;
}
.flik:hover { background: var(--surface); text-decoration: none; color: var(--foreground); }
.flik.aktiv { background: var(--primary); color: var(--primary-foreground); }
.flik .antal { font-size: .75rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: oklch(22% .02 70 / .08); }
.flik.aktiv .antal { background: oklch(100% 0 0 / .22); }

/* ── Sök och sidindelning på upphandlingsfliken ────────────────────────── */
.sok { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.sok > svg { width: 18px; height: 18px; stroke: var(--muted); stroke-width: 2; fill: none; flex: 0 0 auto; }
.sok input[type=search] { flex: 1; min-width: 0; }
.sokresultat { margin: -.25rem 0 1rem; }
.sidor { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.marke.dampad { color: var(--muted); }
.notis.jobb svg { animation: snurr 1s linear infinite; }

/* ── Admin ─────────────────────────────────────────────────────────────── */
.admin-fast { font-size: .78rem; color: var(--granska); font-weight: 600; }
.admin-klar { font-size: .78rem; color: var(--go); font-weight: 600; }
.admin-trad { display: flex; flex-direction: column; gap: .6rem; }
.admin-trad .m { max-width: 720px; padding: .6rem .85rem; border-radius: .6rem; white-space: pre-wrap; font-size: .92rem; line-height: 1.5; }
.admin-trad .m.user { align-self: flex-end; background: var(--brand); color: var(--brand-foreground); }
.admin-trad .m.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
.admin-innehall { white-space: pre-wrap; font-size: .88rem; color: var(--muted); max-height: 12em; overflow: auto; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Tabeller ──────────────────────────────────────────────────────────── */
.tabellskal { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: .5rem .7rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: .75rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
td.titel { min-width: 280px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface); }

/* ── Upphandlingsrader ─────────────────────────────────────────────────── */
.upph { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.1rem 1.25rem; border: 1px solid var(--border);
        border-radius: var(--radius); background: var(--card); margin-bottom: .7rem; color: inherit; }
.upph:hover { text-decoration: none; color: inherit; border-color: var(--brand); box-shadow: var(--skugga); }
.upph .vanster { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.upph .hoger-kolumn { flex: 0 0 190px; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.upph-titel { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.upph-meta { font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.upph-motiv { font-size: .92rem; margin: 0; }
.signal { font-size: .86rem; color: var(--muted); margin: 0; padding-left: .8rem; border-left: 2px solid var(--border); }

/* ── Steg (var är jag?) ────────────────────────────────────────────────── */
.steg { display: flex; align-items: center; gap: .75rem; width: 100%; }
.steg .punkt { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.cirkel, .steg .cirkel { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; flex: 0 0 auto; border: 2px solid var(--border); color: var(--muted); }
.cirkel svg, .steg .cirkel svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.steg .klar .cirkel, .cirkel.klar { background: var(--go); border-color: var(--go); }
.steg .aktiv .cirkel, .cirkel.aktiv { background: var(--brand); border-color: var(--brand); color: var(--brand-foreground); }
.steg .namn { font-size: .88rem; font-weight: 500; white-space: nowrap; }
.steg .aktiv .namn { color: var(--brand); font-weight: 600; }
.steg .kommande .namn { color: var(--muted); }
.steg .under { display: block; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.steg .linje { flex: 1; height: 2px; background: var(--border); min-width: 18px; }
.steg .linje.klar { background: var(--go); }

/* ── Krav ──────────────────────────────────────────────────────────────── */
.krav { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: .7rem; background: var(--card); }
.krav.behover { border-left: 3px solid var(--nej); }
.krav.klar { border-left: 3px solid var(--go); }
.krav.delvis { border-left: 3px solid var(--granska); }
.krav-topp { display: flex; gap: .6rem; align-items: center; margin-bottom: .45rem; flex-wrap: wrap; }
.krav-topp .status { margin-left: auto; font-size: .84rem; color: var(--muted); }
.krav-id { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--muted); }
.citat {
  margin: .55rem 0 0; padding: .55rem .8rem; background: var(--surface);
  border-left: 3px solid var(--brand); border-radius: 0 .35rem .35rem 0;
  font-size: .86rem; color: var(--muted); font-style: italic;
}
.citat .kalla { display: block; font-style: normal; font-size: .78rem; margin-top: .3rem; }

.granskruta { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem;
              color: var(--muted); cursor: pointer; user-select: none; }
.granskruta input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; margin: 0; }
.granskruta:hover { color: var(--foreground); }
.granskrad { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
             position: sticky; bottom: 1rem; box-shadow: var(--skugga); }
@media (max-width: 820px) { .granskrad { flex-direction: column; align-items: stretch; position: static; } }

/* ── Formulär ──────────────────────────────────────────────────────────── */
label { display: block; font-size: .86rem; font-weight: 500; margin-bottom: .3rem; }
.falt { margin-bottom: 1rem; }
.hjalp { font-size: .82rem; color: var(--muted); margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], textarea, select {
  width: 100%; padding: .6rem .75rem; font: inherit; font-size: .93rem; min-height: 42px;
  color: var(--foreground); background: var(--surface-elevated);
  border: 1px solid var(--border); border-radius: .5rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }  /* ledtexten grå i båda teman, aldrig svart */
textarea { min-height: 110px; resize: vertical; }
.kryssrad { display: flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 400; }
.kryssrad input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.valkort { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.valkort label { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: .5rem; font-weight: 400; margin: 0; cursor: pointer; }
.valkort label:has(input:checked) { border-color: var(--brand); background: var(--accent); }
.valkort input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--brand); flex: 0 0 auto; }
.valkort strong { display: block; }

.knapp {
  display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
  padding: .58rem 1.1rem; border-radius: .5rem; border: 1px solid transparent; min-height: 40px;
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.knapp svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.knapp.primar { background: var(--primary); color: var(--primary-foreground); }
.knapp.primar:hover { background: var(--brand); color: var(--brand-foreground); text-decoration: none; }
.knapp.sekundar { background: var(--surface-elevated); color: var(--foreground); border-color: var(--border); }
.knapp.sekundar:hover { background: var(--accent); text-decoration: none; color: var(--foreground); }
.knapp.lugn { background: transparent; color: var(--brand); padding-left: .5rem; padding-right: .5rem; }
.knapp.lugn:hover { text-decoration: underline; }
.knapp.farlig { color: var(--nej); }
.knapp:disabled, .knapp.last { background: var(--surface); color: var(--muted); border-color: var(--border); cursor: not-allowed; }
.knapprad { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* ── Meddelanden ───────────────────────────────────────────────────────── */
.notis { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: .5rem; margin-bottom: 1rem; font-size: .9rem; border: 1px solid var(--border); background: var(--accent); }
.notis svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; flex: 0 0 auto; margin-top: .1rem; }
.notis.info { background: var(--accent); border-color: var(--accent); }
.notis.info svg { stroke: var(--brand); }
.notis.varning { background: var(--granska-bg); border-color: var(--granska); color: oklch(36% .1 70); }
.notis.fel { background: var(--nej-bg); border-color: var(--nej); color: oklch(38% .14 28); }
.notis.bra { background: var(--go-bg); border-color: var(--go); color: oklch(36% .1 150); }
.notis p { margin: 0; }
.notis ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* Pågående bakgrundsjobb: förlopp i stället för "ladda om sidan". */
.jobb { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); margin-bottom: 1rem; }
.jobb svg { width: 20px; height: 20px; stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; flex: 0 0 auto; animation: snurr 1s linear infinite; }
.jobb .text { display: flex; flex-direction: column; gap: .3rem; flex: 1; font-size: .9rem; }
.jobb .stapel { height: 5px; }
.jobb .stapel > span { animation: puls 1.6s ease-in-out infinite; width: 40%; }
@keyframes snurr { to { transform: rotate(360deg); } }
@keyframes puls { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* Bekräftelse uppe till höger efter att något sparats. */
.toast { position: fixed; right: 1.5rem; top: 1.25rem; z-index: 20; display: flex; align-items: center; gap: .55rem;
         background: var(--primary); color: var(--primary-foreground); padding: .65rem 1rem; border-radius: .5rem;
         font-size: .9rem; font-weight: 500; box-shadow: 0 8px 24px oklch(22% .02 70 / .25); }
.toast svg { width: 18px; height: 18px; stroke: var(--go-bg); stroke-width: 2.5; fill: none; }

.tomt { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.tomt h3 { color: var(--foreground); }

/* Guiden på översikten: tre saker som krävs för ett första anbud. */
.guide { display: flex; flex-direction: column; }
.guide .rad { display: flex; align-items: center; gap: .9rem; padding: .75rem 0; border-top: 1px solid var(--border); }
.guide .rad .text { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.guide .rad .text strong { font-weight: 600; }
.guide .rad.klar .text strong { color: var(--muted); text-decoration: line-through; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem 1.2rem; }
.legend .rad { display: flex; gap: .75rem; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.legend .rad strong { color: var(--foreground); }

/* ── Uppladdning ───────────────────────────────────────────────────────── */
.slappyta {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; text-align: center; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.slappyta svg { width: 22px; height: 22px; stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.slappyta.over { border-color: var(--brand); background: var(--accent); }
.slappyta input[type=file] { display: none; }
.fil { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: .5rem; font-size: .9rem; margin-bottom: .4rem; }
.fil svg { width: 18px; height: 18px; stroke: var(--muted); stroke-width: 2; fill: none; flex: 0 0 auto; }
.fil span { flex: 1; }

/* ── Landningssida ─────────────────────────────────────────────────────── */
.topp { border-bottom: 1px solid var(--border); background: var(--card); }
.topp .rad { max-width: 1120px; margin: 0 auto; padding: .9rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.topp nav { display: flex; gap: 1.4rem; align-items: center; font-size: .92rem; font-weight: 500; }
.topp nav a { color: var(--foreground); }
.hjalte { max-width: 1120px; margin: 0 auto; padding: 4.5rem 2rem 3.5rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.hjalte h1 { font-size: clamp(2.6rem, 5.2vw, 3.9rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.hjalte h1 .accent { color: var(--brand); }
.hjalte .ingress { font-size: 1.12rem; color: var(--muted); max-width: 36em; }
.hjalte form { display: flex; gap: .6rem; max-width: 520px; margin-top: 1.4rem; }
.hjalte form input { min-height: 48px; font-size: 1rem; }
.hjalte form .knapp { min-height: 48px; padding: 0 1.4rem; font-size: 1rem; }
.hjalte .liten { font-size: .88rem; color: var(--muted); margin-top: .8rem; }
.forhandsbild { width: 100%; max-width: 520px; justify-self: center; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
                box-shadow: 0 20px 50px oklch(22% .02 70 / .14); padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; transform: rotate(-1.5deg); }
.forhandsbild .rad { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; }
.forhandsbild .rad .titel { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forhandsbild .rad .meta { font-size: .8rem; color: var(--muted); }
.forhandsbild .rad > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sektion { max-width: 1120px; margin: 0 auto; padding: 3.5rem 2rem; }
.sektion h2 { font-size: 2.35rem; }
.sektion.vit { max-width: none; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; }
.sektion.vit > .rad { max-width: 1120px; margin: 0 auto; padding: 3.5rem 2rem; }
.sektion.black { max-width: none; background: var(--primary); color: var(--primary-foreground); padding: 0; }
.sektion.black > .rad { max-width: 1120px; margin: 0 auto; padding: 3.5rem 2rem; }
.sektion.black h2 { color: var(--primary-foreground); }
.sektion.black .dampad { color: oklch(96.5% .008 85 / .7); font-size: 1rem; }
.sektion.black .nyckeltal .tal { font-size: 2.5rem; }
.sektion.black .nyckeltal .etikett { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; color: oklch(96.5% .008 85 / .7); }
.stegkort { display: flex; flex-direction: column; gap: .6rem; }
.stegkort .nummer { width: 36px; height: 36px; border-radius: 999px; background: var(--brand); color: var(--brand-foreground); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.stegkort h3 { font-size: 1.15rem; margin: 0; }
.stegkort p { color: var(--muted); margin: 0; }
.tvakolumn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.slut { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 4rem 2rem; }
.slut h2 { font-size: 2.6rem; margin: 0; }
.slut form { display: flex; gap: .6rem; width: 100%; max-width: 520px; }
.slut form input { min-height: 48px; font-size: 1rem; }
.slut form .knapp { min-height: 48px; padding: 0 1.4rem; font-size: 1rem; }
.sidfot { border-top: 1px solid var(--border); }
.sidfot .rad { max-width: 1120px; margin: 0 auto; padding: 1.5rem 2rem; color: var(--muted); font-size: .86rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Avtalslänkarna (_avtalslankar.html) och avtalssidorna (/villkor m.fl., juridik.html) */
.avtalslankar { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .86rem; }
.avtalslankar a { color: var(--muted); }
.centrerat .avtalslankar { justify-content: center; }
.avtal { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; line-height: 1.6; overflow-wrap: anywhere; }
.avtal h1 { font-size: 2.1rem; margin-bottom: 1rem; }
.avtal h2 { margin-top: 2rem; }
.avtal h3 { margin-top: 1.5rem; }
/* Tabellerna i texterna är breda. På mobil scrollar tabellen i sig, aldrig hela sidan. */
.avtal table { display: block; overflow-x: auto; margin: 1rem 0; }
.avtal th, .avtal td { vertical-align: top; min-width: 8rem; }
.villkorsruta label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .88rem; line-height: 1.45; cursor: pointer; }
.villkorsruta input { width: 18px; height: 18px; margin: .1rem 0 0; accent-color: var(--brand); flex: 0 0 auto; }

/* Inloggning / registrering / avregistrering: centrerat kort */
.centrerat { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; gap: 1.5rem; }
.centrerat .kort { width: 100%; max-width: 420px; }
.centrerat h1 { font-size: 1.9rem; }

/* ── Chattbubblan ──────────────────────────────────────────────────────── */
/* Markup, id:n och klassnamn kommer ur skillen ai007-dashboard. Färgerna är ANBUD:s
   egna: plommon mot papper, inte dashboardens guld mot mörkt.
   Bubblan ligger ovanför bottennavigeringen (z-index 10) och under toasten (20).
   Toasten visas uppe till höger och bubblan nere — de krockar aldrig i praktiken. */
#agent-widget { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 15; }

.aw-toggle { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: grab;
             background: var(--brand); color: var(--brand-foreground);
             display: flex; align-items: center; justify-content: center;
             box-shadow: 0 6px 20px oklch(22% .02 70 / .22); transition: transform .15s, background .15s;
             touch-action: none; }   /* pekar-drag ska flytta bubblan, inte skrolla sidan */
.aw-toggle:hover { transform: translateY(-2px); background: var(--brand-hover); }
.aw-toggle:active { cursor: grabbing; }
.aw-toggle span { display: flex; }
/* Märket är en plommonplatta med vita former. Knappen ÄR plattan i stängt läge — ingen
   cirkel runt, bilden fyller knappen. Öppet läge: samma form i plommon med krysset.

   Knappen var förut 64×42, förhållande 1,524 — praktiskt taget exakt den dåvarande
   bildfilens 1,518. Gränssnittet var alltså måttanpassat efter en trasig fil. Nu följer
   den basregelns 52×52 ovan; här sätts bara den rundade formen. Märkets duk är kvadratisk
   (512×512) medan själva plattan är 512×487, så `contain` lämnar drygt en pixel luft över
   och under — avsiktligt, hellre det än en beskuren platta. */
.aw-toggle { border-radius: 14px; overflow: hidden; }
.aw-toggle:not(.open) { background: none; padding: 0; }
/* contain, inte cover: märket ska aldrig beskäras av knappen. Den gamla filen var utklippt
   ur lockupen och bar fyra kolumner opakt grått längs högerkanten (x=161–164) plus ett
   avskuret märke — den fjärde staven i kvarnen saknades. Filen är ombyggd: formen ur
   anbud-logo.png, färgen ur lockupens egen gradient. Se issue #90 och PR #93. */
.aw-toggle .aw-ico-chat img { width: 100%; height: 100%; display: block; object-fit: contain; }
.aw-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.aw-toggle .aw-ico-close { display: none; }
.aw-toggle.open .aw-ico-chat { display: none; }
.aw-toggle.open .aw-ico-close { display: flex; }

/* 380×600, inte helskärm: poängen med bubblan är att man ska kunna stanna kvar på sidan
   man står på. Skyms sidan helt är det en modal, inte en bubbla. */
.aw-panel { position: absolute; right: 0; bottom: 64px;
            width: 380px; max-width: calc(100vw - 3rem);
            height: 600px; max-height: calc(100vh - 7rem);
            display: flex; flex-direction: column; overflow: hidden;
            background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
            box-shadow: 0 12px 40px oklch(22% .02 70 / .18); }
.aw-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
             padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.aw-title { font-weight: 600; font-size: .9rem; }
.aw-actions { display: flex; gap: .2rem; }
.aw-icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
               border-radius: .4rem; background: none; border: 0; cursor: pointer; color: var(--muted); }
.aw-icon-btn:hover { background: var(--accent); color: var(--brand); }
.aw-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Tidigare trådar. En <button> bär annars webbläsarens eget utseende — vit bakgrund, egen
   kant, eget typsnitt — mitt i vår palett, så allt det nollställs här. */
.aw-threads { max-height: 45%; overflow-y: auto; padding: .35rem;
              border-bottom: 1px solid var(--border); background: var(--surface); }
.aw-trad-rad { display: flex; align-items: center; gap: .15rem; }
.aw-trad-bort { flex: none; display: flex; align-items: center; justify-content: center;
                width: 30px; height: 30px; border: 0; border-radius: .4rem; cursor: pointer;
                background: none; color: var(--muted); }
.aw-trad-bort svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none;
                    stroke-linecap: round; stroke-linejoin: round; }
.aw-trad-bort:hover { background: var(--nej-bg); color: var(--nej); }
/* På touch finns ingen hovring — en knapp som bara syns vid hovring finns då inte alls. */
@media (hover: none) { .aw-trad-bort { width: 44px; height: 44px; } }
.aw-trad { display: block; width: 100%; text-align: left; font: inherit; font-size: .82rem;
           color: var(--foreground); background: none; border: 0; border-radius: .4rem;
           padding: .45rem .55rem; cursor: pointer;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-trad:hover { background: var(--accent); }
.aw-trad.aktiv { background: var(--accent); color: var(--brand); font-weight: 600; }
/* Låsta medan agenten svarar (#111). Samma nedtoning som skicka-knappen. */
.aw-trad:disabled, .aw-trad-bort:disabled, .aw-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.aw-trad:disabled:not(.aktiv):hover, .aw-trad-bort:disabled:hover, .aw-icon-btn:disabled:hover { background: none; }
.aw-icon-btn:disabled:hover, .aw-trad-bort:disabled:hover { color: var(--muted); }

.aw-messages { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.aw-welcome { margin: auto 0; padding: 1rem; color: var(--muted); font-size: .86rem; line-height: 1.5; text-align: center; }
.aw-welcome-liten { margin: 0; padding: .5rem; font-size: .8rem; }

.aw-msg { display: flex; gap: .55rem; align-items: flex-start; max-width: 100%; }
.aw-msg-assistant { align-self: flex-start; }
.aw-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.aw-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
             display: flex; align-items: center; justify-content: center;
             font-size: .7rem; font-weight: 700; }
.aw-msg-user .aw-avatar { background: var(--brand); color: var(--brand-foreground); }
.aw-msg-assistant .aw-avatar { background: var(--accent); color: var(--brand); }
/* pre-wrap: agentens stycken och radbrytningar ska överleva en omladdning av tråden. */
.aw-bubbla { padding: .55rem .8rem; border-radius: .6rem; font-size: .87rem; line-height: 1.55;
             max-width: 255px; white-space: pre-wrap; overflow-wrap: anywhere; }
.aw-msg-user .aw-bubbla { background: var(--brand); color: var(--brand-foreground); border-bottom-right-radius: .2rem; }
.aw-msg-assistant .aw-bubbla { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: .2rem; }
.aw-bubbla-fel { background: var(--nej-bg); border-color: var(--nej-bg); color: var(--nej); }

.aw-prickar span::before { content: "."; }
.aw-prickar span { opacity: 0; animation: aw-blink 1.2s infinite; }
.aw-prickar span:nth-child(2) { animation-delay: .2s; }
.aw-prickar span:nth-child(3) { animation-delay: .4s; }
@keyframes aw-blink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .aw-prickar span { animation: none; opacity: 1; }
  .aw-toggle { transition: none; }
}

.aw-form { padding: .65rem; border-top: 1px solid var(--border); background: var(--surface); }

/* Bifogad fil: chip ovanför inmatningsraden, gem-knapp i raden. */
.aw-bilaga-fel { margin: 0 0 .4rem; font-size: .78rem; color: var(--nej); }
.aw-bilaga-chip { display: flex; align-items: center; gap: .35rem; width: fit-content;
                  max-width: 100%; margin: 0 0 .45rem;
                  background: var(--accent); border: 1px solid var(--border); border-radius: .4rem;
                  padding: .25rem .45rem; font-size: .78rem; color: var(--foreground); }
.aw-bilaga-chip svg { width: 14px; height: 14px; flex: 0 0 auto; stroke: var(--brand); stroke-width: 2; fill: none; }
.aw-bilaga-namn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.aw-bilaga-ta-bort { display: flex; background: none; border: 0; cursor: pointer; padding: 0 0 0 .15rem; color: var(--muted); }
.aw-bilaga-ta-bort svg { width: 12px; height: 12px; stroke: currentColor; }
.aw-bilaga-ta-bort:hover svg { stroke: var(--nej); }
.aw-bifoga { flex: none; width: 38px; height: 38px; border-radius: .5rem; border: 0; cursor: pointer;
             background: none; color: var(--muted);
             display: flex; align-items: center; justify-content: center; }
.aw-bifoga:hover { background: var(--accent); color: var(--brand); }
.aw-bifoga svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.aw-input-row { display: flex; gap: .45rem; align-items: flex-end; }
/* min-height nollställs med flit: husets globala textarea-regel sätter 110px, vilket är rätt
   för ett formulärfält på en sida men gör chattrutan till ett stort tomt block. Höjden växer
   i stället med innehållet (se chatt.js), upp till max-height. */
.aw-textarea { flex: 1; resize: none; min-height: 38px; max-height: 100px;
               font: inherit; font-size: .87rem; line-height: 1.45;
               padding: .5rem .65rem; border-radius: .5rem;
               background: var(--surface-elevated); color: var(--foreground); border: 1px solid var(--border); }
.aw-send { flex: none; width: 38px; height: 38px; border-radius: .5rem; border: 0; cursor: pointer;
           background: var(--brand); color: var(--brand-foreground);
           display: flex; align-items: center; justify-content: center; }
.aw-send:hover { background: var(--brand-hover); }
.aw-send:disabled { opacity: .45; cursor: default; }
.aw-send svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Bara för skärmläsare: statusraden som säger att agenten svarar. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Mobil ─────────────────────────────────────────────────────────────── */
.bottennav { display: none; }
@media (max-width: 820px) {
  .skal { flex-direction: column; padding-bottom: 72px; }
  .sidopanel { width: 100%; flex: none; flex-direction: row; align-items: center; justify-content: space-between; padding: .8rem 1rem; }
  .sidopanel .logga { margin: 0; }
  .meny, .topprad { display: none; }
  .ordmarke img { width: 150px; } .ordmarke img.med-slogan { width: 168px; }
  .innehall { padding: 1.25rem 1rem 2rem; }
  h1 { font-size: 1.7rem; }
  .sidhuvud { flex-direction: column; }
  .upph { flex-direction: column; gap: .8rem; }
  .upph .hoger-kolumn { flex: none; align-items: flex-start; width: 100%; }
  .bedomning { align-items: flex-start; width: 100%; }
  .steg .under, .steg .namn { display: none; }
  /* En knapp med lång text ("Skriv om från uppdaterad företagshjärna") stack ut ur kortet
     på 390 px: nowrap gör texten obrytbar (#144). I appens kort får den bryta rad i stället.
     Bara .kort: landningssidans knappar har egna regler och rörs inte. */
  .kort .knapp { white-space: normal; max-width: 100%; text-align: center; }
  /* ── Landningssidan på mobil ──────────────────────────────────────────
     Sidan är publik och är det första en kund ser. Den saknade nästan allt
     härunder: toppraden ensam blev bredare än en telefonskärm (logotypen plus
     tre navposter), och eftersom ingenting krympte växte HELA dokumentet med
     den — därför klipptes rubriken, ingressen, formuläret och korten i högerkant
     fast de i sig var lagom breda. Det var alltså ett fel, inte sex. */
  .topp .rad { flex-wrap: wrap; justify-content: center; gap: .6rem 1rem; padding: .75rem 1.25rem; }
  .topp nav { gap: 1rem; font-size: .88rem; flex-wrap: wrap; justify-content: center; }
  .topp nav a { white-space: nowrap; }

  /* minmax(0, 1fr), inte 1fr: ett ensamt `1fr` betyder minmax(AUTO, 1fr), och auto-golvet
     är innehållets minsta bredd. Förhandsbilden innehåller en rad med white-space: nowrap,
     så kolumnen vägrade krympa under 470 px — och drog med sig hela dokumentet. Det var
     detta som gjorde landningssidan bredare än telefonen. Skrivbordsregeln ovan har redan
     minmax(0, …) av precis samma skäl; mobilregeln tappade det. */
  .hjalte, .tvakolumn { grid-template-columns: minmax(0, 1fr); }
  .hjalte { padding: 2.5rem 1.25rem 2.5rem; gap: 2rem; }
  /* clamp-golvet på 2.6rem är för högt här: "Vinn offentliga upphandlingar."
     blir bredare än skärmen och kapas mitt i ordet. */
  .hjalte h1 { font-size: 2rem; }
  .hjalte .ingress { font-size: 1rem; }
  .hjalte form, .slut form { flex-direction: column; }
  .forhandsbild { transform: none; }

  .sektion { padding: 2.5rem 1.25rem; }
  .sektion h2, .slut h2 { font-size: 1.8rem; }
  .sektion.vit > .rad, .sektion.black > .rad { padding: 2.5rem 1.25rem; }
  .sektion.black .nyckeltal .tal { font-size: 2rem; }
  .slut { padding: 2.5rem 1.25rem; }
  .sidfot .rad { padding: 1.25rem; }
  .bottennav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--card); border-top: 1px solid var(--border); padding: .25rem .4rem calc(.4rem + env(safe-area-inset-bottom));
  }
  .bottennav form { flex: 1; display: flex; }
  .bottennav a, .bottennav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .1rem; min-height: 44px;
                   font: inherit; font-size: .66rem; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; }
  .bottennav a.aktiv { color: var(--brand); font-weight: 600; }
  .bottennav svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
  /* Lyft bubblan ovanför bottennavigeringen så den aldrig parkeras ovanpå en flik.
     Måste stå EFTER #agent-widget-regeln ovan i källordning — en mediaregel som ligger
     före en vanlig regel med samma selektor förlorar oavsett skärmbredd. */
  #agent-widget { right: 1rem; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .aw-panel { width: calc(100vw - 2rem); height: calc(100vh - 12rem); }
}