html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ======================================================================
   App-skal: header + minifierbar vänstermeny + innehåll
   ====================================================================== */
:root {
  --header-h: 58px;
  --sidebar-w: 240px;
  --sidebar-w-min: 66px;
  --brand: #5b45e0;
}
[data-bs-theme="dark"] { --brand: #9582ff; }

/* Primärknappar, länkar och badges följer varumärkesfärgen i stället för Bootstraps blå.
   Bootstrap ritar länkar och text-bg-primary ur -rgb-varianterna, så det räcker inte att
   sätta hex-värdena. */
:root {
  --bs-primary: #5b45e0; --bs-primary-rgb: 91, 69, 224;
  --bs-link-color: #5b45e0; --bs-link-color-rgb: 91, 69, 224;
  --bs-link-hover-color: #4a36c4; --bs-link-hover-color-rgb: 74, 54, 196;
}
[data-bs-theme="dark"] {
  --bs-link-color: #9582ff; --bs-link-color-rgb: 149, 130, 255;
  --bs-link-hover-color: #b1a3ff; --bs-link-hover-color-rgb: 177, 163, 255;
}
.btn-primary {
  --bs-btn-bg: #5b45e0; --bs-btn-border-color: #5b45e0;
  --bs-btn-hover-bg: #4a36c4; --bs-btn-hover-border-color: #4a36c4;
  --bs-btn-active-bg: #4330b3; --bs-btn-active-border-color: #4330b3;
  --bs-btn-disabled-bg: #5b45e0; --bs-btn-disabled-border-color: #5b45e0;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #5b45e0; --bs-btn-hover-border-color: #5b45e0;
  --bs-btn-active-bg: #4a36c4; --bs-btn-active-border-color: #4a36c4;
}
.form-check-input:checked { background-color: #5b45e0; border-color: #5b45e0; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "header header" "sidebar main";
  min-height: 100vh;
  min-height: 100dvh;
}
:root.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-w-min) 1fr; }

/* Mjuk in-/utfällning av menybredden (endast desktop där kollapsen sker). */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .app-shell { transition: grid-template-columns .2s ease; }
}

/* Header */
.app-header {
  grid-area: header;
  position: sticky; top: 0; z-index: 1035;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* Säkra ytor: i standalone-läge på iPhone ligger headern annars under klockan/notchen. */
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
/* Installerad app på datorn med "dölj namnlisten" (manifestets window-controls-overlay): headern
   ligger där namnlisten satt. Den går att dra fönstret i, och fönsterknapparna (minimera, stäng)
   som ligger ovanpå till höger hålls fria — env() säger var de sitter. Bara i det läget. */
@media (display-mode: window-controls-overlay) {
  .app-header {
    -webkit-app-region: drag; app-region: drag;
    padding-left: max(14px, env(titlebar-area-x, 0px));
    padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 10px);
  }
  .app-header a, .app-header button, .app-header input, .app-header .dropdown-menu { -webkit-app-region: no-drag; app-region: no-drag; }
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 6px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--bs-body-color); font-weight: 700; font-size: 18px; }
.brand-mark { display: inline-flex; }
.brand-mark img { display: block; border-radius: 7px; }
.brand:hover { color: var(--bs-body-color); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: 9px;
  background: transparent; color: var(--bs-body-color); cursor: pointer;
}
.icon-btn:hover { background: var(--bs-tertiary-bg); }

.profile-btn { border: 0; background: transparent; padding: 0; cursor: pointer; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; }
.profile-menu { min-width: 220px; }

/* Sidebar */
.app-sidebar {
  grid-area: sidebar;
  position: sticky; top: var(--header-h); align-self: start;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  padding: 10px 10px;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--bs-secondary-color); text-decoration: none; white-space: nowrap;
}
a.side-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.side-link.active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-weight: 600; }
.side-link.is-upcoming { opacity: .55; cursor: default; }
.side-soon {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--bs-border-color);
}
.side-ico { display: inline-flex; flex: 0 0 auto; }
:root.sidebar-collapsed .side-label,
:root.sidebar-collapsed .side-soon { display: none; }
:root.sidebar-collapsed .side-link { justify-content: center; padding: 10px; }

.sidebar-backdrop { display: none; }

/* Main */
.app-main { grid-area: main; min-width: 0; padding-bottom: env(safe-area-inset-bottom); }
.app-main .container-fluid { max-width: 1320px; }

/* Mobil: sidebar som off-canvas */
@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
  .app-sidebar {
    position: fixed; top: var(--header-h); left: 0; z-index: 1045;
    width: var(--sidebar-w); transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
  }
  .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-shell.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 1040; background: rgba(0,0,0,.4);
  }
  :root.sidebar-collapsed .app-shell { grid-template-columns: 1fr; }
  :root.sidebar-collapsed .side-label,
  :root.sidebar-collapsed .side-soon { display: inline; }
  :root.sidebar-collapsed .side-link { justify-content: flex-start; padding: 10px 12px; }
  /* 16px är iOS-gränsen för att slippa autozoom när ett fält får fokus. */
  .form-control, .form-select { font-size: 16px; }
}

/* Inloggningssidor (utan skal). dvh: 100vh räknar in mobilens adressfält och trycker annars
   innehållet ur bild. */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.auth-body { width: 100%; max-width: 420px; }
.auth-card { border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
[data-bs-theme="dark"] .auth-card { background: #12162a; border-color: #242a45; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }

/* Mörkt tema: djupt blåsvart med dragning åt violett, i stället för Bootstraps neutralgrå. */
[data-bs-theme="dark"] {
  --bs-body-bg: #0c0f1a;
  --bs-body-color: #dfe3f0;
  --bs-tertiary-bg: #161a2b;
  --bs-border-color: #242a40;
}
[data-bs-theme="dark"] .card { --bs-card-bg: #111527; }

.btn:focus-visible, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem color-mix(in srgb, var(--brand) 60%, transparent);
  border-color: var(--brand);
}

/* ---- Översikten: kom igång-listan ---- */
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--bs-border-color);
}
.setup-item:last-child { border-bottom: 0; }
.setup-dot {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bs-border-color); color: transparent;
}
.setup-item.done .setup-dot { background: #16a34a; border-color: #16a34a; color: #fff; }
.setup-item.later { opacity: .6; }
.setup-title { font-weight: 600; }

/* ---- Uppdrag: instruktionsrutan växer med texten (tasks.js), men aldrig förbi skärmen ---- */
.task-instruction-input { min-height: 10rem; max-height: 70vh; resize: vertical; }

/* ---- Översikten: rapporter, kalender, mejl ---- */
/* Rapporten ärver chattens markdownstilar via .ai-bubble, men utan bubblans bakgrund. */
.ai-bubble.overview-report-body { padding: 0; border-radius: 0; background: none; max-height: 18rem; overflow: hidden; }
/* mask i stället för en färgtoning: fungerar i båda temana utan att känna till kortets bakgrund. */
.overview-report-body.clamped { -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.overview-report-body.clamped.expanded { max-height: none; -webkit-mask-image: none; mask-image: none; }
.overview-day { font-weight: 600; margin-top: 8px; }
.overview-day:first-child { margin-top: 0; }
.overview-row { display: flex; gap: 10px; padding: 3px 0; }
.overview-time { flex: 0 0 5.5rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.overview-what { min-width: 0; overflow-wrap: anywhere; }
.overview-mail { padding: 6px 0; border-bottom: 1px solid var(--bs-border-color); min-width: 0; }
.overview-mail:last-child { border-bottom: 0; padding-bottom: 0; }
.overview-mail:first-child { padding-top: 0; }
.overview-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ======================================================================
   Översikten som instrumentpanel (overview.js)
   ====================================================================== */
.ov { max-width: 1400px; margin: 0 auto; }
.ov-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.ov-date { text-transform: capitalize; }
.ov-head .btn { display: inline-flex; align-items: center; gap: 6px; }

/* Frågerutan: det första man ser, och det första tangentbordet hamnar i (/ eller Ctrl+K). */
.ov-ask {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px; margin-bottom: 10px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px -12px color-mix(in srgb, var(--brand) 45%, transparent);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ov-ask:focus-within { border-color: color-mix(in srgb, var(--brand) 60%, var(--bs-border-color)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.ov-ask-icon { color: var(--brand); flex: none; }
.ov-ask-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--bs-body-color); font-size: 1.05rem; padding: 8px 0; }
.ov-ask-kbd { flex: none; font-size: 12px; padding: 1px 7px; border-radius: 6px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }
.ov-ask:focus-within .ov-ask-kbd { display: none; }
.ov-ask-send { flex: none; border-radius: 11px; width: 42px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ov-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ov-chip {
  border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-secondary-color);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.ov-chip:hover { color: var(--bs-body-color); border-color: color-mix(in srgb, var(--brand) 50%, var(--bs-border-color)); background: color-mix(in srgb, var(--brand) 6%, transparent); }

/* Rutnätet: 8 px höga rader som korten spänner över efter sitt innehåll (murverk, se span() i
   overview.js). Kolumnerna är minst 300 px; en bred widget tar två när det får plats. */
.ov-grid-wrap { container-type: inline-size; container-name: ov; }
.ov-grid {
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  grid-auto-rows: 8px; grid-auto-flow: row dense;
}
@container ov (min-width: 640px) { .ov-card.size-wide { grid-column: span 2; } }
.ov-card { min-width: 0; }
.ov-card-inner {
  margin-bottom: 16px; padding: 14px 16px 16px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 14px;
}
[data-bs-theme="dark"] .ov-card-inner { background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 3%); }
.ov-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 24px; }
.ov-icon { display: inline-flex; color: var(--brand); flex: none; }
.ov-card-title { font-size: .95rem; font-weight: 600; margin: 0; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-updated { font-size: 11px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; flex: none; }
.ov-card-body { min-width: 0; }
/* Långa widgets (rapporterna, nyheterna) rullar inom sig själva i liten och bred storlek — Hög visar allt. */
.ov-card:not(.size-tall)[data-type="reports"] .ov-card-body,
.ov-card:not(.size-tall)[data-type="task"] .ov-card-body { max-height: 520px; overflow-y: auto; scrollbar-width: thin; }
.ov-source { font-size: 11px; color: var(--bs-secondary-color); margin-top: 10px; }
.ov-empty { padding: 24px; text-align: center; border: 1px dashed var(--bs-border-color); border-radius: 14px; grid-column: 1 / -1; grid-row: span 8; }

/* Laddningsytor: tre grå rader — kortet har ungefär rätt höjd redan innan innehållet kommit. */
.ov-skeleton { display: grid; gap: 8px; }
.ov-skeleton span { display: block; height: 12px; border-radius: 6px; background: var(--bs-tertiary-bg); animation: ov-shimmer 1.4s ease-in-out infinite; }
.ov-skeleton span:nth-child(2) { width: 85%; }
.ov-skeleton span:nth-child(3) { width: 60%; }
@keyframes ov-shimmer { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ov-skeleton span { animation: none; } }

/* Anpassningsläget: verktyg i varje korts rubrik, dra och släpp, och ett kort för att lägga till. */
.ov-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.ov-tool { border: 0; background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-radius: 7px; width: 28px; height: 28px; font-size: 12px; line-height: 1; cursor: pointer; }
.ov-tool:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 18%, var(--bs-tertiary-bg)); }
.ov-tool:disabled { opacity: .35; cursor: default; }
.ov-size { width: auto; padding-top: 2px; padding-bottom: 2px; font-size: 12px; }
.ov-grid.editing .ov-card:not(.ov-add) .ov-card-inner { border-style: dashed; cursor: grab; }
.ov-grid.editing .ov-card .ov-updated { display: none; }
.ov-card.dragging { opacity: .45; }
.ov-card.drop .ov-card-inner { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.ov-add .ov-card-inner { border-style: dashed; background: transparent; }
.ov-settings { margin: -2px 0 12px; padding: 10px; border-radius: 10px; background: var(--bs-tertiary-bg); }
.ov-settings[hidden] { display: none; }
.ov-place-hits { display: grid; gap: 2px; margin-top: 6px; }
.ov-place-hit { display: flex; gap: 8px; align-items: baseline; text-align: left; border: 0; background: transparent; padding: 5px 6px; border-radius: 7px; color: var(--bs-body-color); font-size: 13px; }
.ov-place-hit:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.ov-feeds .form-check { margin-bottom: 2px; }

/* Listor (väntar, senaste samtal, kommande körningar). */
.ov-list { display: grid; gap: 2px; }
.ov-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; min-width: 0; }
.ov-row a { color: var(--bs-body-color); text-decoration: none; min-width: 0; }
.ov-row a:hover { color: var(--brand); }
.ov-sub { padding-left: 16px; font-size: 12px; }
.ov-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.ov-dot.warn { background: var(--bs-warning); }
.ov-dot.off { background: transparent; border: 1px solid var(--bs-border-color); }

/* Uppdragsrapporterna i widgeten: avdelade med en linje i stället för kort i kortet. */
.ov-report { padding: 10px 0; border-top: 1px solid var(--bs-border-color); }
.ov-report:first-child { border-top: 0; padding-top: 0; }
#overview-reports .alert { font-size: 13px; }
/* Redan lästa rapporter, hopfällda under de olästa. */
.ov-older { margin-top: 10px; border-top: 1px solid var(--bs-border-color); padding-top: 8px; }
.ov-older > summary { cursor: pointer; font-size: 13px; color: var(--bs-secondary-color); list-style-position: inside; }
.ov-older > summary:hover { color: var(--bs-body-color); }
.ov-older[open] > summary { margin-bottom: 4px; }
.ov-older .ov-report:first-of-type { border-top: 0; }
.ai-bubble.overview-report-body.expanded { max-height: none; }

/* Väder. */
.ov-wx-now { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ov-wx-icon { font-size: 44px; line-height: 1; }
.ov-wx-temp { display: flex; flex-direction: column; }
.ov-wx-deg { font-size: 2.1rem; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.ov-wx-text { font-size: 13px; color: var(--bs-secondary-color); }
.ov-wx-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(34px, 1fr); gap: 2px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--bs-border-color); }
.ov-wx-hour { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ov-wx-small-icon { font-size: 16px; line-height: 1.2; }
.ov-wx-rain { font-size: 10px; color: #3b82f6; min-height: 12px; }
.ov-wx-days li { display: grid; grid-template-columns: 3.2em 1.6em 1fr auto; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ov-wx-day { text-transform: capitalize; }
.ov-wx-precip { font-size: 12px; }

/* Nyheter. */
.ov-news { display: grid; gap: 0; }
.ov-news-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-top: 1px solid var(--bs-border-color); min-width: 0; }
.ov-news-item:first-child { border-top: 0; padding-top: 0; }
.ov-news-title { font-size: 14px; line-height: 1.35; color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; }
a.ov-news-title:hover { color: var(--brand); }
.ov-news-meta { font-size: 11.5px; color: var(--bs-secondary-color); }
.ov-new { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: #dc2626; color: #fff; font-weight: 600; font-size: 10.5px; }
.ov-news-item.is-new .ov-news-title { font-weight: 600; }

/* Utvalt åt dig, överst i nyhetswidgeten. */
.ov-picks { margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--bs-border-color)); }
.ov-picks-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin-bottom: 4px; }
.ov-pick { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; }
.ov-pick + .ov-pick { border-top: 1px solid var(--bs-border-color); }
.ov-pick-why { font-size: 11.5px; color: var(--bs-secondary-color); }

/* Dagens läge. */
.ai-bubble.ov-brief-text { padding: 0; background: none; border-radius: 0; font-size: 14px; }
.ov-brief-text ul { margin-bottom: 0; padding-left: 1.1rem; }
.ov-brief-text li { margin-bottom: 4px; }
.ov-brief-foot { margin-top: 8px; font-size: 11.5px; color: var(--bs-secondary-color); }
.ov-link-btn { border: 0; background: none; padding: 0; color: var(--bs-link-color); font-size: inherit; }
.ov-link-btn:hover { text-decoration: underline; }

/* Pågående. */
.ov-ongoing { display: grid; gap: 0; }
.ov-ongoing-item { padding: 8px 0; border-top: 1px solid var(--bs-border-color); font-size: 13.5px; }
.ov-ongoing-item:first-child { border-top: 0; padding-top: 0; }
.ov-ongoing-kind { font-size: 11px; color: var(--brand); white-space: nowrap; }
.ov-ongoing-summary { font-size: 12.5px; color: var(--bs-secondary-color); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-ongoing-meta { font-size: 11.5px; color: var(--bs-secondary-color); margin-top: 3px; }

/* Nyhetsnotiserna: på/av i inställningarna, och dygnets notiser överst i widgeten. */
.ov-alerts-toggle { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--bs-border-color); }
.ov-alerts-help { font-size: 11.5px; line-height: 1.35; }
.ov-alerts { margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 8%, transparent); }
.ov-alerts-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin-bottom: 4px; }
.ov-alert { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.ov-alert-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; }
.ov-alert-text a { color: var(--bs-body-color); text-decoration: none; }
.ov-alert-text a:hover { color: var(--brand); }
.ov-alert-why { display: block; font-size: 11.5px; color: var(--bs-secondary-color); }
.ov-alert.dismissed { opacity: .5; }

/* Sidan Ämnen. */
.topic-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); align-items: start; }
.topic-card .card-body { padding: 14px 16px; }
.topic-card.is-active { border-color: color-mix(in srgb, var(--brand) 35%, var(--bs-border-color)); }
.topic-kind { font-weight: 600; }
.topic-kind.kind-idea { background: color-mix(in srgb, #f59e0b 22%, transparent); color: var(--bs-body-color); }
.topic-kind.kind-project { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--bs-body-color); }
.topic-kind.kind-interest { background: color-mix(in srgb, #10b981 22%, transparent); color: var(--bs-body-color); }
.topic-kind.kind-lifearea { background: color-mix(in srgb, #3b82f6 22%, transparent); color: var(--bs-body-color); }
.topic-activity { height: 6px; border-radius: 3px; background: var(--bs-tertiary-bg); overflow: hidden; margin-bottom: 6px; }
.topic-activity span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.topic-card:not(.is-active) .topic-activity span { background: var(--bs-secondary-color); }
.topic-actions form { margin: 0; }
.topic-edit { flex: 1 0 100%; }
.topic-edit > summary { list-style: none; display: inline-block; }
.topic-edit > summary::-webkit-details-marker { display: none; }
.topic-edit[open] > summary { margin-bottom: 0; }

/* Elpris. */
.ov-el-now { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ov-el-price { font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.ov-el-unit { font-size: 13px; color: var(--bs-secondary-color); }
.ov-bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin-bottom: 8px; }
.ov-bars span { flex: 1 1 0; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--brand) 45%, transparent); }
.ov-bars span.past { background: var(--bs-tertiary-bg); }
.ov-bars span.now { background: var(--brand); }

/* ---- Temaväljare i profilen ---- */
.theme-choice { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; }
.theme-choice button {
  border: 0; background: transparent; color: var(--bs-body-color);
  padding: 7px 16px; font-size: 14px; cursor: pointer;
}
.theme-choice button + button { border-left: 1px solid var(--bs-border-color); }
.theme-choice button:hover { background: var(--bs-tertiary-bg); }
.theme-choice button.active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-weight: 600; }

/* ===== AI-chatten ====================================================================
   Konversationsvy: användarens bubblor till höger, modellens till vänster i full bredd.
   Höjden låses mot viewporten så inmatningsraden alltid står still och bara historiken
   rullar — som i en meddelandeapp, inte som en sida som växer nedåt. */
.ai-chat {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; height: 100%;
}
/* min-height: 0 — annars vägrar flexbarnet krympa under sitt innehåll och rullningen uteblir. */
.ai-chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ai-chat-messages { display: flex; flex-direction: column; gap: 12px; }

.ai-msg { display: flex; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.assistant { flex-direction: column; align-items: stretch; }
.ai-bubble {
  border-radius: 14px; padding: 8px 12px;
  font-size: 14px; line-height: 1.45; overflow-wrap: break-word;
}
.ai-msg.user .ai-bubble {
  background: var(--bs-primary-bg-subtle);
  max-width: 85%; white-space: pre-wrap;
}
.ai-msg.assistant .ai-bubble { background: var(--bs-tertiary-bg); }

/* Markdown-innehållet i modellens bubblor */
.ai-bubble p { margin: 0 0 8px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul, .ai-bubble ol { margin: 0 0 8px; padding-left: 20px; }
.ai-bubble li { margin-bottom: 2px; }
.ai-bubble code {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 4px; padding: 0 4px; font-size: 12.5px;
}
.ai-bubble pre {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 8px; padding: 8px 10px; margin: 0 0 8px;
  font-size: 12.5px; overflow-x: auto;
}
.ai-bubble pre code { background: none; border: none; padding: 0; }
.ai-md-h { font-weight: 700; margin: 6px 0 2px; }
.ai-md-table { overflow-x: auto; }
.ai-md-table table { width: auto; margin: 0 0 8px; font-size: 13px; }

/* Bilder i svaret. En ensam bild får bredd; flera efter varandra blir ett rutnät med lika höga rutor. */
.ai-figure { display: inline-flex; flex-direction: column; gap: 3px; max-width: 100%; vertical-align: top; }
.ai-img {
  display: block; max-width: min(100%, 420px); max-height: 320px;
  border-radius: 10px; border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); cursor: zoom-in;
}
.ai-figcaption { font-size: 11.5px; line-height: 1.3; color: var(--bs-secondary-color); max-width: 420px; }
.ai-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; margin: 4px 0 8px;
}
.ai-gallery .ai-figure { display: flex; min-width: 0; }
.ai-gallery .ai-img { width: 100%; max-width: none; height: 140px; max-height: none; object-fit: cover; }
.ai-gallery .ai-figcaption {
  max-width: none; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Ett galleri med en enda bild ska inte bli en smal ruta. */
.ai-gallery:has(.ai-figure:only-child) { display: block; }
.ai-gallery:has(.ai-figure:only-child) .ai-figure { display: inline-flex; }
.ai-gallery:has(.ai-figure:only-child) .ai-img { width: auto; height: auto; max-width: min(100%, 420px); max-height: 320px; object-fit: contain; }
.ai-img-pending, .ai-img-missing {
  display: inline-block; font-size: 12px; color: var(--bs-secondary-color);
  border: 1px dashed var(--bs-border-color); border-radius: 8px; padding: 2px 8px; margin: 2px 4px 2px 0;
}
/* Bilagor: brickorna som väntar ovanför inmatningen, och det som sitter under användarens bubbla */
.ai-attach-tray { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-attach-tray[hidden] { display: none; }
.ai-attach-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
  border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 3px 6px 3px 4px;
  font-size: 12.5px; background: var(--bs-tertiary-bg);
}
.ai-attach-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.ai-attach-chip .ai-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }
.ai-attach-chip .btn-close { font-size: 9px; flex: none; }
.ai-attach-chip.uploading { opacity: .6; }
.ai-attach-chip.uploading .ai-attach-name::after { content: " …"; }
.ai-msg.user.has-attachments { flex-direction: column; align-items: flex-end; gap: 4px; }
.ai-attachments { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 6px; max-width: 85%; }
.ai-attachments .ai-img { width: 120px; height: 120px; max-width: none; object-fit: cover; }
.ai-doc {
  display: inline-block; font-size: 13px; text-decoration: none; max-width: 100%;
  border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 4px 10px;
  background: var(--bs-primary-bg-subtle); color: var(--bs-body-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Rutan där du ger agenten en engångskod. 16px i fältet: annars zoomar iOS in när det får fokus. */
.ai-input-card .ai-input-value { width: 170px; flex: none; font-size: 16px; letter-spacing: .08em; }

/* "Ta över webbläsaren": agentens webbläsare som levande bild */
.takeover { max-width: 1320px; margin: 0 auto; }
.takeover-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.takeover-url {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 4px 10px; border-radius: 8px;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
}
.takeover-screen {
  border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden;
  background: var(--bs-tertiary-bg); text-align: center; min-height: 160px;
}
.takeover-screen img { display: block; width: 100%; height: auto; cursor: pointer; user-select: none; -webkit-user-drag: none; touch-action: manipulation; }
.takeover-screen img[hidden] { display: none; }
.takeover-empty { padding: 28px 16px; font-size: 14px; }
/* Skrivfältet och tangenterna sitter fast i nederkanten: bilden är hög, och de ska alltid vara nåbara. */
.takeover-controls {
  position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color);
}
.takeover-input { display: flex; gap: 8px; }
.takeover-input .form-control { font-size: 16px; } /* annars zoomar iOS in vid fokus */
.takeover-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ai-takeover-link { display: inline-block; margin: 6px 4px 0; }

/* Webbagentens webbläsare, som den ser ut just nu */
.ai-live-view { max-width: min(100%, 360px); max-height: 260px; margin: 6px 4px 0; object-fit: contain; }
.ai-live-view[hidden] { display: none; }
.ai-lightbox {
  border: none; border-radius: 12px; padding: 8px; max-width: 96vw; max-height: 96vh;
  background: var(--bs-body-bg); color: var(--bs-body-color); cursor: zoom-out;
}
.ai-lightbox::backdrop { background: rgba(0, 0, 0, .75); }
.ai-lightbox img { display: block; max-width: calc(96vw - 16px); max-height: calc(96vh - 60px); border-radius: 8px; margin: 0 auto; }
.ai-lightbox p { margin: 6px 4px 0; font-size: 13px; text-align: center; }
.ai-lightbox p:empty { display: none; }

/* Statusraden medan modellen tänker eller ett verktyg kör */
.ai-status {
  display: flex; align-items: center; gap: 7px;
  margin: 6px 4px 0; font-size: 12px; color: var(--bs-secondary-color);
}
.ai-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bs-secondary-color);
  animation: ai-pulse 1.1s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-status::before { animation: none; }
}

.ai-error { margin-top: 6px; font-size: 13px; color: var(--bs-danger); }

/* Skrivrutan: en ram runt textfältet och knappraden, så att de läses som EN sak. Fältet självt är
   ramlöst; fokusringen sitter på rutan. Taket (max-height) läses av chat.js när fältet växer. */
.ai-composer {
  position: relative; margin-top: 12px;
  border: 1px solid var(--bs-border-color); border-radius: 14px; background: var(--bs-body-bg);
  transition: border-color .15s, box-shadow .15s;
}
.ai-composer:focus-within { border-color: color-mix(in srgb, var(--brand) 60%, var(--bs-border-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.ai-composer-input.form-control {
  border: 0; background: transparent; box-shadow: none; resize: none;
  padding: 10px 14px 4px; max-height: min(40dvh, 18rem); overflow-y: auto;
}
/* Mobil: lägre tak — ansiktet tar redan en tredjedel, och samtalet ska synas medan man skriver. */
@media (max-width: 991.98px) { .ai-composer-input.form-control { max-height: min(25dvh, 12rem); } }
.ai-composer-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; }
.ai-composer-bar .btn { padding: 5px 9px; }
/* Ikonknapparna i chattens rubrikrad (Konversationer, Ny): kvadratiska, lika höga som de andra. */
.chat-head-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 31px; padding: 0; flex: none; }

/* Gemet bara där man inte kan dra filer (pekskärm). */
@media (hover: hover) and (pointer: fine) { .ai-attach-btn { display: none; } }
/* Medan en fil dras över chatten: rutan lyser upp och säger vad som händer. */
.ai-composer-drop {
  position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center;
  border: 2px dashed var(--brand); border-radius: inherit; font-weight: 600; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg)); pointer-events: none;
}
.ai-chat.dragging .ai-composer-drop { display: flex; }

/* Chattsidan: konversationslista + samtal. Höjden låses mot viewporten så inmatningsraden alltid
   står still och bara historiken rullar — som i en meddelandeapp, inte en sida som växer nedåt. */
.chat-layout {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  /* minmax(0, 1fr), inte auto: en auto-rad växer med innehållet, och då tänjs hela sidan av en
     lång konversation i stället för att meddelandeytan rullar. */
  grid-template-rows: minmax(0, 1fr);
  max-width: 1180px; margin: 0 auto;
  height: calc(100dvh - var(--header-h) - 40px - env(safe-area-inset-bottom)); min-height: 380px;
}
@media (min-width: 992px) {
  .chat-layout { grid-template-columns: 250px minmax(0, 1fr); }
  /* offcanvas-lg blir en vanlig kolumn här — den ska rulla för sig, inte tänja sidan. */
  .chat-list { min-height: 0; }
  .chat-list .offcanvas-body { height: 100%; overflow: hidden; }
  .chat-list-items { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
}
.chat-list-items { display: flex; flex-direction: column; gap: 2px; }
/* Sökträffarna ersätter listan medan något står i sökrutan. */
@media (min-width: 992px) {
  .chat-search-results { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
}
.chat-search-results { display: flex; flex-direction: column; gap: 2px; }
.chat-search-results[hidden] { display: none; }
.chat-search-hit { flex: none; display: block; padding: 7px 10px; border-radius: 8px; color: var(--bs-body-color); text-decoration: none; }
.chat-search-hit:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.chat-search-hit-title { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-search-hit-meta { display: block; font-size: 12px; color: var(--bs-secondary-color); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-search-hit mark { padding: 0 1px; background: color-mix(in srgb, var(--brand) 22%, transparent); color: inherit; border-radius: 2px; }
.chat-search-empty { font-size: 13px; color: var(--bs-secondary-color); padding: 6px 10px; }
.chat-list-item {
  /* flex: none — raderna har overflow: hidden, och då får en flexkolumn krympa dem under sin
     egen höjd. Med många konversationer trycktes de ihop till halva rader i stället för att listan rullade. */
  flex: none;
  display: block; padding: 7px 10px; border-radius: 8px; font-size: 14px;
  color: var(--bs-body-color); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Blänkaren före rubriken: fylld = ett svar du inte har sett, pulserande = agenten arbetar. */
.chat-list-item.unread::before, .chat-list-item.running::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; background: var(--brand);
}
.chat-list-item.unread { font-weight: 600; }
.chat-list-item.running::before { background: var(--bs-secondary-color); animation: ai-pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chat-list-item.running::before { animation: none; } }
.chat-list-item:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.chat-list-item.active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-weight: 600; }
/* Datumrubrikerna (chat.js) stannar överst i listan medan dess rader rullar förbi — nästa rubrik
   knuffar undan den. Ogenomskinlig bakgrund, annars syns raderna igenom. */
.chat-list-group {
  position: sticky; top: 0; z-index: 1; flex: none;
  padding: 10px 10px 4px; background: var(--bs-body-bg);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.chat-list-section { display: flex; flex-direction: column; gap: 2px; flex: none; }
.chat-list-section:first-child .chat-list-group { padding-top: 2px; }
@media (max-width: 991.98px) {
  /* I lådan på mobil rullar annars hela lådkroppen, och en sticky rubrik fastnar då en padding
     ner med rader synliga ovanför. Listan rullar för sig, knappen "Ny konversation" står kvar. */
  .chat-list .offcanvas-body { display: flex; overflow: hidden; }
  .chat-list-items { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
}

.ai-msg.user .ai-bubble { background: color-mix(in srgb, var(--brand) 18%, transparent); }

/* En uppdragskörning i tråden: en tunn tidsmarkör med linjer åt sidorna, i stället för hela
   instruktionen som en användarbubbla. Instruktionen fälls ut vid klick. */
.ai-run-marker { margin: 6px 0 -2px; font-size: 12.5px; color: var(--bs-secondary-color); }
.ai-run-marker > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.ai-run-marker > summary::-webkit-details-marker { display: none; }
.ai-run-marker > summary::before, .ai-run-marker > summary::after {
  content: ""; flex: 1 1 auto; border-top: 1px solid var(--bs-border-color);
}
.ai-run-label { flex: 0 1 auto; text-align: center; }
.ai-run-label strong { color: var(--bs-body-color); font-weight: 600; }
.ai-run-marker[open] .ai-run-label::after { content: " ▴"; }
.ai-run-marker:not([open]) .ai-run-label::after { content: " ▾"; }
.ai-run-instruction {
  margin: 8px auto 0; max-width: 85%; max-height: 16rem; overflow-y: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px;
  padding: 8px 12px; border-radius: 10px; background: var(--bs-tertiary-bg); color: var(--bs-body-color);
}
/* 16px i inmatningen även på dator hade varit onödigt stort; på mobil sätts det av regeln för
   .form-control ovan, så att iOS inte zoomar in när fältet får fokus. */

/* ---- AI-inställningar: en rad per syfte ---- */
.purpose-row { padding: 12px 0; border-bottom: 1px solid var(--bs-border-color); }
.purpose-row:first-of-type { padding-top: 0; }
.purpose-row:last-of-type { border-bottom: 0; }

/* ---- Aktivitetsloggen under ett svar: vad agenterna gjorde på vägen dit ---- */
.ai-activity { margin: 0 4px 6px; font-size: 12px; color: var(--bs-secondary-color); }
.ai-activity summary { cursor: pointer; width: max-content; list-style-position: inside; }
.ai-activity summary:hover { color: var(--bs-body-color); }
.ai-activity ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--bs-border-color); }
.ai-activity li { padding: 2px 0; overflow-wrap: anywhere; }
.ai-activity-agent { font-weight: 600; color: var(--brand); }

/* ---- Agentsidan ---- */
.agent-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; padding-right: 12px; }
.agent-model code { font-size: 12px; }
[data-bs-theme="dark"] .accordion {
  --bs-accordion-bg: #111527;
  --bs-accordion-active-bg: #161a2b;
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 35%, transparent);
}
.accordion { --bs-accordion-active-bg: color-mix(in srgb, var(--brand) 8%, transparent); --bs-accordion-active-color: var(--bs-body-color); }

/* ---- Minnesnotisen under ett svar: något agenten just lärde sig ---- */
.ai-memory-note { margin: 6px 4px 0; font-size: 12px; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.ai-memory-note::before { content: "◆ "; color: var(--brand); }

/* Granskaren under ett svar: "Dubbelkolla", "Granskar …" eller märket med utfallet (chat.js). */
.ai-review { margin: 6px 4px 0; font-size: 12.5px; color: var(--bs-secondary-color); }
.ai-review-check { border: 0; background: none; padding: 0; color: var(--bs-secondary-color); font-size: 12px; text-decoration: underline dotted; cursor: pointer; }
.ai-review-check:hover { color: var(--brand); }
.ai-review-details > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; list-style: none;
  border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.ai-review-details > summary::-webkit-details-marker { display: none; }
.ai-review-details > summary::before { content: "✓"; font-weight: 700; color: #16a34a; }
.ai-review.has-doubt .ai-review-details > summary::before { content: "≈"; color: #d97706; }
.ai-review.has-contradicted .ai-review-details > summary { border-color: color-mix(in srgb, #dc2626 50%, var(--bs-border-color)); }
.ai-review.has-contradicted .ai-review-details > summary::before { content: "✗"; color: #dc2626; }
.ai-review-claims { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.ai-claim { padding: 8px 10px; border-radius: 10px; background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-left: 3px solid var(--bs-border-color); }
.ai-claim.status-supported { border-left-color: #16a34a; }
.ai-claim.status-partial { border-left-color: #d97706; }
.ai-claim.status-contradicted { border-left-color: #dc2626; }
.ai-claim.status-unsupported, .ai-claim.status-not_checked { border-left-color: var(--bs-secondary-color); }
.ai-claim-head { display: flex; gap: 8px; align-items: baseline; }
.ai-claim-badge { flex: none; font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-supported .ai-claim-badge { color: #16a34a; }
.status-partial .ai-claim-badge { color: #d97706; }
.status-contradicted .ai-claim-badge { color: #dc2626; }
.status-unsupported .ai-claim-badge, .status-not_checked .ai-claim-badge { color: var(--bs-secondary-color); }
.ai-claim-text { font-size: 13px; }
.ai-claim-quote { margin: 6px 0 0; padding-left: 8px; border-left: 2px solid var(--bs-border-color); font-size: 12px; font-style: italic; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.ai-claim-note { margin-top: 4px; font-size: 12px; }
.ai-claim-source { display: inline-block; margin-top: 4px; font-size: 11.5px; }
.ai-review-foot { margin-top: 6px; font-size: 11.5px; }

/* ---- Minnessidan ---- */
.memory-group {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bs-secondary-color); margin: 18px 0 4px;
}
.memory-row { border-bottom: 1px solid var(--bs-border-color); }
.memory-row summary {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 2px; cursor: pointer; list-style: none;
}
.memory-row summary::-webkit-details-marker { display: none; }
.memory-row summary:hover { background: var(--bs-tertiary-bg); }
.memory-row[open] summary { font-weight: 600; }
.memory-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.memory-edit { padding: 4px 2px 14px; }
.memory-summary { white-space: pre-line; }

/* ---- Frågan om notiser: en rad som svävar under headern ----
   Fast placerad i stället för i flödet: chattsidan låser sin höjd mot viewporten, och en rad i
   flödet hade tryckt inmatningsfältet ur bild tills man svarat. */
.push-prompt {
  position: fixed; top: calc(var(--header-h) + 10px); left: 50%; transform: translateX(-50%);
  z-index: 1030; width: min(720px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 12px; font-size: 14px;
  background: var(--bs-body-bg); border: 1px solid var(--brand);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.push-prompt svg { flex: 0 0 auto; color: var(--brand); }
.push-prompt-text { flex: 1 1 260px; min-width: 0; }
.push-prompt .btn-link { text-decoration: none; color: var(--bs-secondary-color); }

/* ---- Godkännandekortet: agenten vill göra något utåt och väntar på ett ja ---- */
.ai-approval {
  margin-top: 8px; padding: 12px 14px; border-radius: 12px; font-size: 14px;
  border: 1px solid var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.ai-approval-head { font-weight: 600; margin-bottom: 8px; }
.ai-approval dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 10px; }
.ai-approval dt { font-weight: 600; color: var(--bs-secondary-color); font-size: 12px; padding-top: 2px; }
/* pre-wrap: mejltexten ska visas med SINA radbrytningar — det är den som skickas. */
.ai-approval dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.ai-approval-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-approval-note { font-size: 12px; color: var(--bs-secondary-color); }
.ai-approval.is-approved { border-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, transparent); }
.ai-approval.is-closed { border-color: var(--bs-border-color); background: transparent; opacity: .75; }

/* ---- Integrationssidan ---- */
.integration-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--bs-border-color);
}

/* ---- Uppdragssidan ---- */
.task-instruction { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow-y: auto; }

/* ---- Röstläget: ansiktet i en egen kolumn till höger (dator), ett band överst (mobil) ---- */
.voice-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg);
  /* Mjukt ljus bakom huvudet — samma kort i ljust och mörkt tema. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    var(--bs-tertiary-bg);
  padding: 10px 12px 14px;
}
/* Ett porträttformat (4:5) i stället för hela den höga kolumnen — huvudet hamnar i mitten, inte utsträckt. */
.voice-face { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 78%; flex: 0 1 auto; min-height: 0; }
.voice-face .va3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* SVG-ansiktet (utan WebGL) hålls kvadratiskt och centrerat i samma yta. */
.voice-face:not(.is-3d) .va-face { position: absolute; inset: 0; margin: auto; max-width: 220px; max-height: 220px; }
.voice-side { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
/* Fast höjd (tre rader): undertexten växer och krymper med meningarna, och med en flytande höjd
   centrerades ansiktet om varje gång — det hoppade upp och ned. Längre text klipps (början kapas i JS). */
.voice-status {
  color: var(--bs-secondary-color); max-width: 260px; line-height: 1.4;
  height: 4.2em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.voice-hush.is-off { visibility: hidden; }
.voice-name { font-weight: 600; letter-spacing: .02em; }
.voice-stage { position: relative; }
.voice-tools { position: absolute; top: 6px; right: 6px; z-index: 2; }
.voice-tool { color: var(--bs-secondary-color); border: 0; background: transparent; padding: 4px 6px; }
.voice-tool:hover, .voice-tool[aria-expanded="true"] { color: var(--bs-body-color); background: var(--bs-secondary-bg); }
.voice-volume-pop {
  position: absolute; right: 0; top: calc(100% + 4px); width: 210px;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.voice-volume-pop[hidden] { display: none; }
.voice-volume-value { color: var(--bs-secondary-color); min-width: 3.2em; text-align: right; }
.voice-volume-pop { flex-wrap: wrap; }
.voice-volume-pop .form-range { flex: 1 1 0; min-width: 0; }
.voice-audio-info { flex: 1 0 100%; font-size: .7rem; color: var(--bs-secondary-color); line-height: 1.3; }

/* Dator: tredje kolumn i chattens rutnät. Bredare sida när den finns, så samtalet inte trycks ihop. */
@media (min-width: 992px) {
  .chat-layout.voice-on { grid-template-columns: 250px minmax(0, 1fr) 320px; max-width: 1500px; }
}
/* Mobil och platta: rubrikraden överst, sedan bandet (ungefär en tredjedel av höjden), samtalet får resten.
   Rubriken ligger i .ai-chat men ska stå OVANFÖR ansiktet — display: contents gör chattens delar till
   egna rader i rutnätet. Varje del får en fast rad: dolda delar (bannern, bilagorna) faller annars ur
   och knuffar de andra en rad upp. row-gap 0 — avstånden kommer från delarnas egna marginaler. */
@media (max-width: 991.98px) {
  .chat-layout.voice-on {
    grid-template-rows: auto minmax(150px, 32vh) auto minmax(0, 1fr) auto auto auto;
    row-gap: 0;
    transition: grid-template-rows .7s cubic-bezier(.4, 0, .2, 1);
  }
  /* Viloläget (livevyn syns, inget samtal): ansiktet krymper och ger livevyn plats för fler notiser.
     Samma antal rader och samma form (minmax) — då glider rutnätet mellan lägena i stället för att hoppa. */
  .chat-layout.voice-on.is-idle { grid-template-rows: auto minmax(96px, 17vh) auto minmax(0, 1fr) auto auto auto; }
  .chat-layout.voice-on .ai-chat { display: contents; }
  .chat-layout.voice-on .ai-chat > * { min-width: 0; }
  .chat-layout.voice-on .chat-head { grid-row: 1; }
  .chat-layout.voice-on .voice-stage { grid-row: 2; margin-bottom: .5rem; }
  .chat-layout.voice-on .incognito-banner { grid-row: 3; }
  .chat-layout.voice-on .ai-chat-scroll { grid-row: 4; }
  .chat-layout.voice-on .ai-attach-tray { grid-row: 5; }
  .chat-layout.voice-on .ai-composer { grid-row: 6; }
  .chat-layout.voice-on .ai-chat > p { grid-row: 7; }
  .chat-layout.voice-on .voice-stage { flex-direction: row; padding: 6px 10px; }
  .chat-layout.voice-on .voice-face { height: 100%; width: auto; max-height: none; flex: 0 0 auto; }
  .chat-layout.voice-on .voice-side { flex: 0 0 38%; align-items: flex-start; text-align: left; }
}
.va-face {
  width: 100%; height: 100%; display: block; overflow: visible;
  --va-head-a: #8f7dff; --va-head-b: #4330b3;
  --va-eye: #f7f5ff; --va-pupil: #1b1640; --va-mouth: #1b1640; --va-tongue: #ff8fa3;
}
[data-bs-theme="dark"] .va-face { --va-head-a: #a796ff; --va-head-b: #5b45e0; }
.va-ring { fill: none; stroke: var(--brand); opacity: .2; }
.va-plate { fill: #fff; opacity: .07; }
.va-cheek { fill: #ff8fa3; opacity: .18; }
.va-brow { fill: none; stroke: var(--va-eye); stroke-width: 3.5; stroke-linecap: round; opacity: .85; }
.va-eye { fill: var(--va-eye); }
.va-pupil { fill: var(--va-pupil); }
.va-glint { fill: #fff; }
.va-mouth { fill: var(--va-mouth); stroke: color-mix(in srgb, var(--va-mouth) 70%, #fff); stroke-width: 1; }
.va-teeth { fill: #fff; opacity: .9; }
.va-tongue { fill: var(--va-tongue); }
.va-face[data-state="listening"] .va-ring { stroke: #16a34a; }

.voice-mode-btn.active { --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-active-color: #fff; }
/* touch-action/user-select: håll-inne-och-prata får inte bli en markering eller en meny på mobilen. */
.ai-mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ai-mic.recording { color: #fff; background: #dc2626; border-color: #dc2626; }
.ai-mic.busy { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .ai-mic.recording { animation: ai-mic-pulse 1.2s ease-in-out infinite; }
}
@keyframes ai-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Samtalsläget: knappen lyser grönt så länge sidan lyssnar av sig själv. */
.ai-talk { touch-action: manipulation; }
.ai-talk.active { color: #fff; background: #16a34a; border-color: #16a34a; }
.ai-talk.busy { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .ai-talk.active { animation: ai-talk-pulse 2.4s ease-in-out infinite; }
}
@keyframes ai-talk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .4); }
  50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* ---------------------------------------------------------------- Förtroende och Aktivitet */
.trust-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.trust-stop.is-paused { border-color: var(--bs-danger); box-shadow: 0 0 0 1px var(--bs-danger) inset; }
.trust-rules { display: grid; gap: .75rem; }
.trust-rule { display: grid; gap: .5rem 1rem; grid-template-columns: 1fr minmax(9rem, 12rem); align-items: center;
    padding-bottom: .75rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.trust-rule:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 575.98px) { .trust-rule { grid-template-columns: 1fr; } }
.trust-actions li { padding: .4rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.trust-actions li:last-child { border-bottom: 0; }
.trust-providers dt { font-weight: 600; margin-top: .5rem; }
.trust-providers dt:first-child { margin-top: 0; }
.trust-providers dd { margin-bottom: 0; }
.activity-list { display: grid; gap: .5rem; }
.activity-run > summary { list-style: none; cursor: pointer; padding: .75rem 1rem; }
.activity-run > summary::-webkit-details-marker { display: none; }
.activity-run[open] > summary { border-bottom: 1px solid var(--bs-border-color-translucent); }
.activity-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 12rem; }
.activity-calls { padding: .5rem 1rem .75rem 2.25rem; }
.activity-calls li { padding: .4rem 0; }
.activity-args code, .activity-result { word-break: break-word; white-space: pre-wrap; }
.activity-result { max-height: 6.5em; overflow: hidden; }

/* ---------------------------------------------------------------- Puls (fas 4) */
.ov-pulse { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ov-pulse-week { grid-column: 1 / -1; }
.ov-pulse-card { border: 1px solid var(--bs-border-color-translucent); border-left: 3px solid var(--bs-secondary-color);
    border-radius: .5rem; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ov-pulse-card.kind-conflict, .ov-pulse-card.kind-headsup { border-left-color: var(--bs-danger); }
.ov-pulse-card.kind-agenda, .ov-pulse-card.kind-week { border-left-color: var(--bs-warning); }
.ov-pulse-card.kind-mail, .ov-pulse-card.kind-promise { border-left-color: var(--bs-info); }
.ov-pulse-card.kind-project, .ov-pulse-card.kind-offer { border-left-color: var(--bs-primary); }
.ov-pulse-head { display: flex; flex-direction: column; gap: .1rem; }
.ov-pulse-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }
.ov-pulse-title { font-size: 14px; line-height: 1.3; }
.ov-pulse-body { font-size: 13px; margin: 0; color: var(--bs-body-color); }
.ov-pulse-why { font-size: 12px; color: var(--bs-secondary-color); }
.ov-pulse-why summary { cursor: pointer; width: fit-content; }
.ov-pulse-why p { margin: .2rem 0 0; }
.ov-pulse-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: auto; padding-top: .2rem; }
.ov-pulse-hide { margin-left: auto; font-size: 12px; padding: 0 .25rem; color: var(--bs-secondary-color); }
.ov-headsup { display: grid; gap: .35rem; margin: 0 0 .75rem; }
.ov-headsup-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: .5rem;
    background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); font-size: 14px; }
.ov-headsup-row .btn-link { padding: 0 .25rem; font-size: 13px; }
.ov-headsup-row .btn-close { margin-left: auto; }
.ov-headsup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-warning); flex: none; }
.ov-headsup-text { min-width: 0; }

/* ---------------------------------------------------------------- Arbetssätt (fas 5) */
.playbook-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.playbook-card.is-new { border-color: var(--bs-info); }
.playbook-text { white-space: pre-wrap; font-size: 13px; background: var(--bs-tertiary-bg); border-radius: .4rem; padding: .5rem .65rem; max-height: 22rem; overflow: auto; }
.playbook-diff { font-size: 12.5px; background: var(--bs-tertiary-bg); border-radius: .4rem; padding: .5rem .65rem; max-height: 24rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.playbook-diff .add { display: block; background: rgba(25, 135, 84, .18); }
.playbook-diff .del { display: block; background: rgba(220, 53, 69, .18); text-decoration: line-through; text-decoration-color: rgba(220, 53, 69, .5); }
.playbook-edit > summary { list-style: none; }
.playbook-edit > summary::-webkit-details-marker { display: none; }
.playbook-edit[open] { flex-basis: 100%; }

/* ---------------------------------------------------------------- Minnets historik */
.memory-history ol { border-left: 2px solid var(--bs-border-color-translucent); padding-left: .6rem !important; }
.memory-version { padding: .25rem 0; }
.memory-version form { display: inline; }

/* ---------------------------------------------------------------- Varför? under svaren */
.ai-why { font-size: 12px; color: var(--bs-secondary-color); margin: 6px 4px 0; }
.ai-why > summary { cursor: pointer; width: fit-content; }
.ai-why ul { list-style: none; padding: .3rem 0 0 .1rem; margin: 0; display: grid; gap: .15rem; }
.ai-why-label { font-weight: 600; }
.ai-why a { color: inherit; text-decoration: underline dotted; }

/* ---------------------------------------------------------------- Inkognito */
.incognito-banner { font-size: 13px; padding: .45rem .75rem; margin-bottom: .5rem; border-radius: .5rem;
    background: var(--bs-secondary-bg); border: 1px dashed var(--bs-border-color); color: var(--bs-body-color); }
#incognito-toggle.active { background: var(--bs-body-color); color: var(--bs-body-bg); border-color: var(--bs-body-color); }
.chat-list-item.incognito::after { content: "inkognito"; font-size: 10px; margin-left: .35rem; padding: 0 .3rem; border-radius: .25rem;
    border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); vertical-align: middle; }

/* ---------------------------------------------------------------- Aktivitetskartan runt avataren (agent-orbit.js) */
.agent-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.agent-orbit.is-active { opacity: 1; }
.agent-orbit.is-fading { opacity: 0; transition: opacity 1.5s ease; }
.agent-orbit svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ao-ring { fill: none; stroke: var(--brand); stroke-width: 1.2; opacity: .35; }
.ao-ring-dash { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-dasharray: 3 9; opacity: .55; }
.ao-pulse { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; }
.ao-hub.is-working .ao-spin { animation: ao-spin 9s linear infinite; }
.ao-hub.is-working .ao-pulse { animation: ao-pulse 2.2s ease-out infinite; }
.ao-line { fill: none; stroke: var(--brand); stroke-width: 1.3; opacity: .6; stroke-dasharray: 4 5; }
.ao-branch.is-working .ao-line { animation: ao-flow 1.1s linear infinite; }
.ao-branch.is-done .ao-line { opacity: .25; stroke-dasharray: none; }
.ao-spark { fill: var(--brand); filter: drop-shadow(0 0 3px var(--brand)); }
.ao-node { fill: var(--brand); stroke: var(--bs-body-bg); stroke-width: 1.5; }
.ao-branch.is-done .ao-node { fill: var(--bs-secondary-color); }
.ao-node-halo { fill: var(--brand); opacity: .25; animation: ao-halo 1.6s ease-out infinite; }
.ao-name, .ao-leaf { font-family: inherit; paint-order: stroke; stroke: var(--bs-tertiary-bg); stroke-width: 3px; stroke-linejoin: round; }
.ao-name { font-size: 10.5px; font-weight: 600; fill: var(--bs-body-color); }
.ao-leaf { font-size: 10px; fill: var(--bs-secondary-color); }
.ao-leaf.is-old { opacity: .55; }
.ao-hub-leaf { fill: var(--bs-body-color); opacity: .85; }
.ao-hub-leaf.is-old { opacity: .45; }
@keyframes ao-spin { to { transform: rotate(360deg); } }
@keyframes ao-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes ao-flow { to { stroke-dashoffset: -18; } }
@keyframes ao-halo { 0% { opacity: .45; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .ao-hub.is-working .ao-spin, .ao-hub.is-working .ao-pulse, .ao-branch.is-working .ao-line, .ao-node-halo { animation: none; }
}

/* Puls döljer sig när den är tom (overview.js) — hidden måste vinna över kortets display. */
.ov-card[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Livevyn i en tom chatt (ambient.js)
   En radar med agenten som kärna, notiser som skrivs ut och en nyhetslist som rullar. Ligger över den
   tomma samtalsytan och glider undan när samtalet börjar. Färgerna följer temat — samma violett som
   aktivitetskartan runt avataren, med cyan för nyheter och grönt för det som kör. */
.ai-chat-scroll { position: relative; }
.ambient {
  --amb-brand: var(--brand);
  --amb-cyan: #22d3ee; --amb-green: #34d399; --amb-amber: #fbbf24; --amb-pink: #f472b6; --amb-red: #fb7185; --amb-x: #e2e8f0; --amb-violet: #c084fc; --amb-teal: #2dd4bf; --amb-orange: #fb923c;
  --amb-line: color-mix(in srgb, var(--amb-brand) 45%, transparent);
  --amb-dim: var(--bs-secondary-color);
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  container-type: size;
  opacity: 0; transform: scale(.985); filter: blur(6px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
[data-bs-theme="light"] .ambient { --amb-cyan: #0891b2; --amb-green: #059669; --amb-amber: #b45309; --amb-pink: #db2777; --amb-red: #e11d48; --amb-x: #334155; --amb-violet: #9333ea; --amb-teal: #0d9488; --amb-orange: #c2410c; }
.ambient.is-on { opacity: 1; transform: none; filter: none; }
/* Samtalet tar över: vyn växer förbi och löses upp. */
.ambient.is-leaving { opacity: 0; transform: scale(1.06); filter: blur(10px); transition-duration: .6s; }
.ambient.is-on.is-dim { opacity: .3; }
.ambient[hidden] { display: none; }
.amb-frame { position: relative; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 0; }

/* Bakgrunden: ett punktrutnät som tonar ut mot kanterna och en skanningslinje som sveper nedåt. */
.amb-bg { position: absolute; inset: 0; pointer-events: none; }
.amb-grid {
  position: absolute; inset: -40px;
  background-image: radial-gradient(color-mix(in srgb, var(--amb-brand) 38%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 10%, transparent 75%);
  animation: amb-drift 40s linear infinite; opacity: .55;
}
.amb-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 36%, color-mix(in srgb, var(--amb-brand) 16%, transparent), transparent 70%);
}
.amb-scan {
  position: absolute; left: 0; right: 0; height: 90px; top: -90px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--amb-cyan) 5%, transparent) 80%, color-mix(in srgb, var(--amb-cyan) 16%, transparent));
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  animation: amb-scan 9s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* Överst: klockan, datumet, vädret och av-knappen. */
.amb-hud { position: relative; display: flex; align-items: flex-start; gap: 12px; flex: none; }
.amb-clock { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 4px; min-width: 0; }
.amb-time { font-size: 1.9rem; font-weight: 200; letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; }
.amb-sec { font-size: .8rem; color: var(--amb-brand); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.amb-date { flex-basis: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--amb-dim); margin-top: 3px; }
.amb-weather { margin-left: auto; display: flex; align-items: baseline; gap: 5px; font-size: 13px; white-space: nowrap; }
.amb-wx-icon { font-size: 1.1rem; }
.amb-wx-temp { font-size: 1.25rem; font-weight: 300; }
.amb-wx-place { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--amb-dim); }
.amb-off {
  margin-left: auto; flex: none; border: 1px solid transparent; background: transparent; color: var(--amb-dim);
  border-radius: 8px; padding: 3px 5px; line-height: 0; opacity: .6; transition: opacity .2s, color .2s, border-color .2s;
}
.amb-weather:not([hidden]) + .amb-off { margin-left: 0; }
.amb-off:hover, .amb-off:focus-visible { opacity: 1; color: var(--bs-body-color); border-color: var(--bs-border-color); }

/* Radarn: kärnan i mitten, ringar som snurrar åt var sitt håll, ett svep och källorna runt om. */
/* Radarns storlek beror bara på ytans höjd (cqh), aldrig på notiserna under — annars hoppade den
   varje gång en notis kom in eller gick ut. Notisytan tar det som blir över. */
.amb-core { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.amb-orbit { position: relative; flex: none; height: clamp(130px, 34cqh, 360px); aspect-ratio: 260 / 210; max-width: 100%; }
.amb-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.amb-sweep {
  position: absolute; top: 50%; left: 50%; width: 73.8%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, color-mix(in srgb, var(--amb-cyan) 6%, transparent) 330deg, color-mix(in srgb, var(--amb-cyan) 30%, transparent) 360deg);
  animation: amb-sweep 6s linear infinite;
}
.amb-ring { fill: none; stroke: var(--amb-brand); stroke-width: .8; opacity: .28; }
.amb-ring-outer { opacity: .18; stroke-dasharray: 1 5; }
.amb-ring-dash { stroke-width: 1.1; stroke-dasharray: 14 6 2 6; opacity: .5; }
.amb-ring-dash2 { stroke: var(--amb-cyan); stroke-dasharray: 3 8; opacity: .45; }
.amb-ring-inner { opacity: .35; }
.amb-rot { animation: amb-spin 38s linear infinite; }
.amb-rot-rev { animation: amb-spin 24s linear infinite reverse; }
.amb-particle { fill: var(--amb-cyan); filter: drop-shadow(0 0 2px var(--amb-cyan)); }
.amb-stop-core { stop-color: #fff; stop-opacity: .95; }
.amb-stop-mid { stop-color: var(--amb-brand); stop-opacity: .9; }
.amb-stop-edge { stop-color: var(--amb-brand); stop-opacity: 0; }
.amb-orb { animation: amb-breathe 4s ease-in-out infinite; transform-origin: 0 0; }
.amb-orb-pulse { fill: none; stroke: var(--amb-brand); stroke-width: 1.5; opacity: 0; transform-origin: 0 0; }
.amb-core.is-hit .amb-orb-pulse { animation: amb-hit 1s ease-out; }
.amb-beam { stroke: var(--amb-line); stroke-width: .8; stroke-dasharray: 2 4; }
.amb-node-dot { fill: var(--amb-brand); }
.amb-node-halo { fill: none; stroke: var(--amb-brand); stroke-width: 1; opacity: 0; animation: ao-halo 3.2s ease-out infinite; }
.amb-node[data-group="news"] .amb-node-dot { fill: var(--amb-cyan); }
.amb-node[data-group="news"] .amb-node-halo { stroke: var(--amb-cyan); }
.amb-node[data-group="tasks"] .amb-node-dot { fill: var(--amb-green); }
.amb-node[data-group="tasks"] .amb-node-halo { stroke: var(--amb-green); }
.amb-node[data-group="pulse"] .amb-node-dot { fill: var(--amb-pink); }
.amb-node[data-group="pulse"] .amb-node-halo { stroke: var(--amb-pink); }
.amb-node[data-group="waiting"] .amb-node-dot { fill: var(--amb-amber); }
.amb-node[data-group="waiting"] .amb-node-halo { stroke: var(--amb-amber); }
.amb-node[data-group="x"] .amb-node-dot { fill: var(--amb-x); }
.amb-node[data-group="x"] .amb-node-halo { stroke: var(--amb-x); }
.amb-node[data-group="trends"] .amb-node-dot { fill: var(--amb-violet); }
.amb-node[data-group="trends"] .amb-node-halo { stroke: var(--amb-violet); }
.amb-node[data-group="travel"] .amb-node-dot { fill: var(--amb-teal); }
.amb-node[data-group="travel"] .amb-node-halo { stroke: var(--amb-teal); }
.amb-node[data-group="parcels"] .amb-node-dot { fill: var(--amb-orange); }
.amb-node[data-group="parcels"] .amb-node-halo { stroke: var(--amb-orange); }
.amb-node.is-hit .amb-node-dot { animation: amb-blip .8s ease-out; transform-box: fill-box; transform-origin: center; }
.amb-node-label { font-size: 7.5px; letter-spacing: .16em; fill: var(--bs-body-color); opacity: .8; font-family: inherit; }
.amb-node-count { font-size: 7px; fill: var(--amb-dim); font-family: inherit; font-variant-numeric: tabular-nums; }
.amb-spark { fill: #fff; filter: drop-shadow(0 0 3px var(--amb-cyan)) drop-shadow(0 0 6px var(--amb-brand)); }
.amb-status {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amb-dim);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}

/* Notiserna: den nyaste överst, äldre bleknar och glider ut. Ytan fyller resten av höjden och klipper —
   en notis som kommer in eller går ut ändrar aldrig något ovanför den. */
.amb-flashes {
  position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-top: 4px;
  /* Den nedersta notisen, som kapas av kanten, tonar ut i stället för att klippas hårt. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.amb-flash {
  --amb-accent: var(--amb-brand);
  display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; font: inherit;
  padding: 7px 12px 8px 14px; margin-bottom: 6px; max-height: 150px; border-radius: 10px; position: relative; flex: none;
  border: 1px solid color-mix(in srgb, var(--amb-accent) 28%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--amb-accent) 13%, transparent), color-mix(in srgb, var(--amb-accent) 3%, transparent) 70%);
  backdrop-filter: blur(3px);
  /* Höjden glider (max-height, utfyllnad, marginal) — så att de andra notiserna skjuts mjukt i stället för att hoppa. */
  transition: opacity .55s ease, transform .55s ease, filter .55s ease, border-color .2s,
    max-height .5s cubic-bezier(.2, .8, .2, 1), padding .5s cubic-bezier(.2, .8, .2, 1), margin .5s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease;
}
/* Kulan från kärnan har slagit in: kanten lyser upp och klingar av. */
.amb-flash.is-hit { box-shadow: 0 0 0 1px var(--amb-accent), 0 0 22px -2px var(--amb-accent); transition-duration: .55s, .55s, .55s, .2s, .5s, .5s, .5s, 0s; }
.amb-flash.is-hit::before { animation: amb-impact .7s ease-out; }
.amb-flash::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: var(--amb-accent); box-shadow: 0 0 8px var(--amb-accent);
}
a.amb-flash:hover, button.amb-flash:hover { border-color: color-mix(in srgb, var(--amb-accent) 65%, transparent); color: inherit; }
/* Äldre notiser bleknar steg för steg — hur många som syns avgörs av utrymmet (ambient.js pruneHidden). */
.amb-flash:nth-child(2) { opacity: .8; }
.amb-flash:nth-child(3) { opacity: .64; }
.amb-flash:nth-child(4) { opacity: .5; }
.amb-flash:nth-child(n+5) { opacity: .38; }
.amb-flash.is-entering { opacity: 0; transform: scale(.97); filter: blur(4px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.amb-flash.is-leaving { opacity: 0 !important; filter: blur(3px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }

/* Kulan: kärnan skjuter iväg den till den nya notisen. Huvud och svans är samma bana med fördröjning. */
.amb-bolts { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.amb-bolt {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 3px var(--amb-glow, var(--amb-brand)), 0 0 26px 8px var(--amb-glow, var(--amb-brand));
}
.amb-bolt.is-tail { background: var(--amb-glow, var(--amb-brand)); box-shadow: 0 0 10px 3px var(--amb-glow, var(--amb-brand)); }
.amb-flash.kind-news, .amb-flash.kind-next { --amb-accent: var(--amb-cyan); }
.amb-flash.kind-run, .amb-flash.kind-task { --amb-accent: var(--amb-green); }
.amb-flash.kind-report, .amb-flash.kind-waiting { --amb-accent: var(--amb-amber); }
.amb-flash.kind-pulse { --amb-accent: var(--amb-pink); }
.amb-flash.kind-x { --amb-accent: var(--amb-x); }
.amb-flash.kind-trend, .amb-flash.kind-xtrend { --amb-accent: var(--amb-violet); }
.amb-flash.kind-trend.is-live { --amb-accent: var(--amb-red); }
.amb-flash.kind-transit { --amb-accent: var(--amb-teal); }
.amb-flash.kind-transit.is-live { --amb-accent: var(--amb-red); }
.amb-flash.kind-parcel { --amb-accent: var(--amb-orange); }
.amb-flash-why { font-size: 12.5px; line-height: 1.4; margin-top: 3px; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amb-why-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--amb-accent); font-weight: 600; margin-right: 2px; }
.amb-flash-head { display: flex; align-items: baseline; gap: 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.amb-tag { color: var(--amb-accent); font-weight: 600; white-space: nowrap; }
.amb-flash.is-live .amb-tag::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: var(--amb-accent); box-shadow: 0 0 6px var(--amb-accent); animation: amb-live 1.4s ease-in-out infinite;
}
.amb-src { color: var(--amb-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-transform: none; letter-spacing: .02em; }
/* Hur länge en trend pågått — längst till höger, krymper aldrig bort (källan före den kapas i stället). */
.amb-age { margin-left: auto; flex: none; color: var(--amb-dim); white-space: nowrap; text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.amb-flash-title { font-size: 14px; line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amb-flash-sub { font-size: 12px; color: var(--amb-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amb-caret { display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--amb-accent); animation: amb-caret .8s steps(1) infinite; }
.amb-calm { font-size: 13px; color: var(--amb-dim); text-align: center; padding: 8px 0; letter-spacing: .02em; }

/* Nyhetslisten längst ned. */
.amb-ticker {
  position: relative; flex: none; margin: 4px -14px 0; padding: 6px 0; overflow: hidden; white-space: nowrap;
  font-size: 12px; color: var(--amb-dim); border-top: 1px solid color-mix(in srgb, var(--amb-brand) 22%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.amb-ticker[hidden] { display: none; }
.amb-ticker-track { display: inline-flex; animation: amb-ticker 90s linear infinite; }
.amb-ticker-track span { white-space: pre; }
.amb-ticker:hover .amb-ticker-track { animation-play-state: paused; }

/* Avstängd: en diskret knapp mitt i den tomma ytan. */
.amb-restore {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-secondary-color);
  font-size: 12px; border-radius: 999px; padding: 3px 12px; opacity: .55; transition: opacity .2s;
}
.amb-restore:hover { opacity: 1; }
.amb-restore[hidden] { display: none; }

/* Låg yta (mobil med ansiktet uppe): en liten radar till vänster, klockan och läget bredvid, notisen
   under. Radarn ska vara kvar — den är det som gör vyn levande — men källornas namn blir för små att läsa. */
@container (max-height: 430px) {
  .amb-frame {
    /* Notisraden (1fr) tar det som blir över — raderna ovanför beror bara på klockan, läget och radarn. */
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, auto) minmax(0, 1fr) auto;
    grid-template-areas: "orbit hud" "orbit status" "flash flash" "ticker ticker"; column-gap: 12px; row-gap: 6px;
  }
  .amb-core { display: contents; }
  .amb-orbit { grid-area: orbit; height: 118px; align-self: center; }
  .amb-node-label, .amb-node-count { display: none; }
  .amb-hud { grid-area: hud; flex-wrap: wrap; row-gap: 2px; align-self: end; }
  .amb-status { grid-area: status; align-self: start; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; letter-spacing: .05em; line-height: 1.45; }
  .amb-flashes { grid-area: flash; padding-top: 0; }
  .amb-ticker { grid-area: ticker; }
  .amb-time { font-size: 1.6rem; }
  .amb-wx-place { display: none; }
}
@container (max-height: 320px) {
  .amb-date { display: none; }
}

@keyframes amb-spin { to { transform: rotate(360deg); } }
@keyframes amb-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes amb-drift { to { transform: translate(22px, 22px); } }
@keyframes amb-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(calc(100cqh + 90px)); opacity: 0; } }
@keyframes amb-breathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
@keyframes amb-hit { 0% { opacity: .9; transform: scale(1); stroke-width: 2.5; } 100% { opacity: 0; transform: scale(2.6); stroke-width: .5; } }
@keyframes amb-blip { 0% { transform: scale(1); } 30% { transform: scale(2.2); } 100% { transform: scale(1); } }
@keyframes amb-live { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes amb-caret { 50% { opacity: 0; } }
@keyframes amb-impact { 0% { width: 2px; box-shadow: 0 0 8px var(--amb-accent); } 25% { width: 5px; box-shadow: 0 0 18px 4px var(--amb-accent); } 100% { width: 2px; box-shadow: 0 0 8px var(--amb-accent); } }
@keyframes amb-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .amb-grid, .amb-scan, .amb-sweep, .amb-rot, .amb-rot-rev, .amb-orb, .amb-node-halo, .amb-ticker-track, .amb-tag::before { animation: none !important; }
  .amb-scan { display: none; }
}