/* ss-toast — ét toast-sprog for alle robotter (source of truth).
   Morten 2026-07-15: «we need to have a library with the toast designs, and
   then you always use from that» — næste robot arver, forker aldrig.

   Kanonen = translator-bundlens .st-toast glas-pille (lys) + robot-darkmode's
   dark-værdier (linje ~447). Denne fil ejer værdierne fremover; bundlen står
   urørt og cross-pinnes i tests/test-ss-toast-library-contract.js — driver
   værdierne fra hinanden, bliver CI rød.

   ADOPTION I EN ROBOT (ss-wait-mønstret):
   1) Link denne fil EFTER robottens egne stylesheets (og efter enhver fil der
      i dag styler robottens toast-klasser), med robottens egen ?v=-buster.
   2) Nye toasts: brug .ss-toast-pill (+ .ss-toast-show når synlig) og
      .ss-toast-action til knappen — ingen egen CSS.
   3) Eksisterende toasts: tilføj en ADAPTER-sektion herunder (doubled-class
      mod legacy-lys, [data-theme="dark"]+doubled mod legacy-dark) der kun
      omskriver OVERFLADEN (bg/farve/font/kant/radius/skygge) — aldrig
      show/hide-mekanikken (hver robot beholder sin egen synligheds-klasse).
   3a) Adapteren SKAL også neutralisere legacy-DIMENSIONER (min-width/
       min-height): «surface-only» betyder ikke «arv skelettet» — emailens
       min-width:260px gav en næsten tom pille om en ensom spinner
       (Morten-fund 15/7). Recept: min-width:0 + width:max-content +
       max-width:calc(100vw - 32px).
   3b) Scan legacy for VARIANT- og DESCENDANT-regler (`.x.variant .barn`)
       — de kan outranke doubled-class. Ties afgjort af link-orden er
       BANDLYST; eskalér specificiteten eksplicit (sent-fluebenet stod
       hvidt i lys på (0,3,0)-tie, fixet på (0,4,0)).
   3c) QA-recept pr. adapter: DOM-probe HVER variant med ÆGTE legacy-markup
       (variant-klasser + inner-elementer), begge temaer, transition:none
       før måling (baggrundsfaner fryser transitions i frame 0).
   4) Succes-flueben = den ENE bevidste semantik-farve på det neutrale glas:
      brug .ss-toast-check (herunder) — aldrig egen grøn.
   5) Ændres denne fil → bump ALLE forbrugeres busters (pt.: translator trNN
      + email-KVARTETTEN rNNN (6 tags) + ugeplan/kalender append-token-kæden
      + skrivebord skNNN + chat chatNNN).
   Census 15/7 — ALLE 5 robotter adopteret: translator (r1) · email (r2) ·
   ugeplan (r3) · skrivebord (r4) · chat (r7: .ss-stt-toast=hovedtoasten +
   .calm-toast). Nye robotter = egen runde + prod-deeptest. */

:root {
  --ss-toast-bg: rgba(255, 255, 255, 0.82);
  --ss-toast-bg-solid: rgba(255, 255, 255, 0.97);
  --ss-toast-ink: var(--color-text-primary, #131313);
  --ss-toast-border: rgba(0, 0, 0, 0.08);
  --ss-toast-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 12px 24px -4px rgba(0, 0, 0, 0.12);
  --ss-toast-blur: blur(16px) saturate(1.6);
  --ss-toast-radius: 100px;
  --ss-toast-action-bg: rgba(110, 138, 126, 0.12);
  --ss-toast-action-bg-hover: rgba(110, 138, 126, 0.18);
  --ss-toast-action-ink: #5F7A6E;
  --ss-toast-focus: #6E8A7E;
}

[data-theme="dark"] {
  --ss-toast-bg: rgba(43, 42, 39, 0.78);
  --ss-toast-bg-solid: rgba(43, 42, 39, 0.97);
  --ss-toast-ink: var(--color-text-primary, #E8E6E1);
  --ss-toast-border: rgba(255, 255, 255, 0.1);
  --ss-toast-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 12px 24px -4px rgba(0, 0, 0, 0.3);
  --ss-toast-action-bg: rgba(125, 168, 147, 0.16);
  --ss-toast-action-bg-hover: rgba(125, 168, 147, 0.22);
  --ss-toast-action-ink: #8FBCA4;
  --ss-toast-focus: #7DA893;
}

/* ── basen: nye toasts bygges med disse to klasser og INTET andet ── */
.ss-toast-pill {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-family: var(--font-family, Inter, system-ui, sans-serif);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  line-height: 1.4;
  padding: 10px 20px;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: max-content;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.ss-toast-pill.ss-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.ss-toast-action {
  height: 28px;
  border: 0;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: background-color 100ms ease-out;
}
.ss-toast-action:hover {
  background: var(--ss-toast-action-bg-hover);
}
.ss-toast-action:focus-visible {
  outline: 2px solid var(--ss-toast-focus);
  outline-offset: 1px;
}
/* succes-fluebenet: den ene bevidste semantik-farve (Morten 15/7, email-
   kamptestet). Sæt klassen på ikonet (svg/i) i en succes-toast. */
.ss-toast-check {
  color: var(--color-success, #22c55e);
  flex: none;
}
[data-theme="dark"] .ss-toast-check {
  color: var(--color-success, #4ade80);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ss-toast-pill {
    background: var(--ss-toast-bg-solid);
  }
}
@media (max-width: 767px) {
  .ss-toast-pill {
    bottom: calc(var(--mn-bar-height, 60px) + 12px);
  }
}

/* ── TRANSLATOR-adapter 1: gem/genbrug-toasten («Indsat · Fortryd»).
      Overlayet translator-saved-calm.js ejer mekanikken (.show, 4 s undo,
      aria) men ingen udseende-CSS længere — den bor HER. ── */
.ss-saved-toast {
  position: fixed;
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  line-height: 1.4;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  padding-block: 7px;
  padding-inline: 18px 7px;
  box-shadow: var(--ss-toast-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  max-width: calc(100vw - 32px);
}
.ss-saved-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.ss-saved-toast button {
  height: 28px;
  border: 0;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: background-color 100ms ease-out;
}
.ss-saved-toast button:hover {
  background: var(--ss-toast-action-bg-hover);
}
.ss-saved-toast button:focus-visible {
  outline: 2px solid var(--ss-toast-focus);
  outline-offset: 1px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ss-saved-toast {
    background: var(--ss-toast-bg-solid);
  }
}
@media (max-width: 767px) {
  .ss-saved-toast {
    bottom: calc(var(--mn-bar-height, 60px) + 12px);
  }
}

/* ── TRANSLATOR-adapter 2 + CHAT-hovedtoasten: .ss-stt-toast er BÅDE
      stt-fallbacken (vises kun hvis bundlens ST.ui.showToast mangler) OG
      chattens centrale window.showToast (chat-state.js genbruger klassen —
      gemt/oprettet/fejl på hele chat-fladen; runde 7, 15/7). Legacy i
      stt-tts-ui.css er en inverteret mørk boks — overfladen omskrives til
      kanonen; position (safe-area-bottom) og --visible-mekanikken er stt'ens
      egne og står urørt. Doubled-class slår legacy-lys (0,1,0); dark-
      tvillingen (0,3,0) slår legacy-dark (0,2,0) uanset link-rækkefølge —
      ss-wait-adapternes lærdom. Dimensions-værnet (3a + #5905-mobilkanonen):
      legacy har INGEN max-width, så en lang toast på 390px foldede ved 50%
      af skærmen (left:50%-klassen). ── */
.ss-stt-toast.ss-stt-toast {
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
}
[data-theme="dark"] .ss-stt-toast.ss-stt-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ss-stt-toast.ss-stt-toast,
  [data-theme="dark"] .ss-stt-toast.ss-stt-toast {
    background: var(--ss-toast-bg-solid);
  }
}

/* ── EMAIL-adapters (runde 2, Morten-godkendt mockup 15/7, semantik=helt
      neutral). Fabrikken window.showToast (.email-toast + -info/-error/
      -success) og de 5 specialer omskrives til kanonen — KUN overfladen:
      show/hide (.active), 5s-nedtællingen, spinneren og safe-area-bunden er
      emailens egne og står urørt. Doubled-class slår legacy-lys (0,1,0);
      dark-tvillinger (0,3,0) slår email-darkmode (0,2,0); sent-varianten
      neutraliseres på (0,3,0)/(0,4,0) fordi legacy selv er (0,2,0)/(0,3,0). ── */
.email-toast.email-toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  padding: 10px 20px;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
}
.email-toast--action.email-toast--action {
  padding-block: 7px;
  padding-inline: 18px 7px;
}
.email-toast-info.email-toast-info,
.email-toast-error.email-toast-error,
.email-toast-success.email-toast-success {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
}
[data-theme="dark"] .email-toast.email-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
[data-theme="dark"] .email-toast-info.email-toast-info,
[data-theme="dark"] .email-toast-error.email-toast-error,
[data-theme="dark"] .email-toast-success.email-toast-success {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
}
.email-toast-action.email-toast-action {
  height: 28px;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: background-color 100ms ease-out;
}
.email-toast-action.email-toast-action:hover {
  background: var(--ss-toast-action-bg-hover);
}
.email-toast-action.email-toast-action:focus-visible {
  outline: 2px solid var(--ss-toast-focus);
  outline-offset: 1px;
}
[data-theme="dark"] .email-toast-action.email-toast-action {
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
}

.email-undo-toast.email-undo-toast {
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  padding-block: 7px;
  padding-inline: 18px 7px;
  box-shadow: var(--ss-toast-shadow);
  /* legacy tvang min-width:260px — en ensom spinner fik en næsten tom
     pille (Morten live-catch 15/7). Pillen krammer indholdet i alle
     faser; nedtællingsbjælken er scaleX og er ligeglad med bredden. */
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
}
[data-theme="dark"] .email-undo-toast.email-undo-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
.email-undo-btn.email-undo-btn {
  height: 28px;
  border: 0;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font-size: 13px;
  font-weight: 550;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: background-color 100ms ease-out;
}
.email-undo-btn.email-undo-btn:hover {
  background: var(--ss-toast-action-bg-hover);
  color: var(--ss-toast-action-ink);
}
.email-undo-btn.email-undo-btn:focus-visible {
  outline: 2px solid var(--ss-toast-focus);
  outline-offset: 1px;
}
[data-theme="dark"] .email-undo-toast.email-undo-toast .email-undo-btn {
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
}
.email-undo-progress.email-undo-progress {
  background: var(--ss-toast-action-bg-hover);
  height: 2.5px;
  left: 14px;
  right: 14px;
  width: auto;
  border-radius: 3px;
}
/* de KNAP-løse faser (sending/sent): adapterens padding-inline 18px/7px er
   skåret til Fortryd-knappen (7px mod knappens egen flade) — uden knap gav
   den skæv luft (Morten 15/7: «padding need to be same on each side»).
   Symmetrisk 18px + kanon-blokken 10px. */
.email-undo-toast.email-undo-toast.email-sending-toast,
.email-undo-toast.email-undo-toast.email-sent-toast {
  padding-inline: 18px;
  padding-block: 10px;
}
.email-undo-toast.email-undo-toast.email-sending-toast .email-send-spinner {
  border-color: rgba(0, 0, 0, 0.2);
  border-right-color: transparent;
}
[data-theme="dark"] .email-undo-toast.email-undo-toast.email-sending-toast .email-send-spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-right-color: transparent;
}
.email-undo-toast.email-undo-toast.email-sent-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
}
[data-theme="dark"] .email-undo-toast.email-undo-toast.email-sent-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
}
/* Mortens 15/7-dom: fluebenet skal være KLART grønt («the green check
   mark, as before») — den ene bevidste semantik-farve på det neutrale glas.
   (0,4,0): legacy `.email-undo-toast.email-sent-toast .email-sent-check`
   er (0,3,0) og malede fluebenet HVIDT i lys (live-fanget på r180) —
   tie+order er bandlyst, så vi går én klasse over på begge temaer. */
.email-undo-toast.email-undo-toast .email-sent-check.email-sent-check {
  color: var(--color-success, #22c55e);
}
[data-theme="dark"] .email-undo-toast.email-undo-toast .email-sent-check.email-sent-check {
  color: var(--color-success, #4ade80);
}

.email-snooze-toast.email-snooze-toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
}
[data-theme="dark"] .email-snooze-toast.email-snooze-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
}

.email-undo-action-toast.email-undo-action-toast {
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
}
[data-theme="dark"] .email-undo-action-toast.email-undo-action-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
}

.email-compose-image-toast.email-compose-image-toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
}
[data-theme="dark"] .email-compose-image-toast.email-compose-image-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .email-toast.email-toast,
  .email-undo-toast.email-undo-toast,
  .email-snooze-toast.email-snooze-toast,
  .email-undo-action-toast.email-undo-action-toast,
  .email-compose-image-toast.email-compose-image-toast,
  [data-theme="dark"] .email-toast.email-toast,
  [data-theme="dark"] .email-undo-toast.email-undo-toast,
  [data-theme="dark"] .email-snooze-toast.email-snooze-toast,
  [data-theme="dark"] .email-undo-action-toast.email-undo-action-toast,
  [data-theme="dark"] .email-compose-image-toast.email-compose-image-toast {
    background: var(--ss-toast-bg-solid);
  }
}

/* ── KALENDER-adapter (runde 3, Morten-godkendt mockup 15/7). /kalender/ =
      ugeplan-koden; ÉN fabrik (toast.js → #toast.toast) med tre faser i
      SAMME element (info · Fortryd · Vis — ingen fase-klasser, deraf :has).
      Mekanik bevares 1:1 og RØRES IKKE her: 9s/4s-timere, hover-pause,
      .is-leaving-klik-skjoldet, rail-centrering (left-calc), min-height:44,
      max-width, transitions. Kun overfladen omskrives. Legacy = (0,2,0)
      lys / (0,3,0) dark → adapter (0,3,0)/(0,4,0). ── */
.ugeplan-main .toast.toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  padding-block: 8px;
  padding-inline: 18px;
}
/* knap-fasen: knappens egen flade bærer højre-luften (8px mod kanten) —
   regel 3a-varianten for faser UDEN fase-klasser: :has(.btn) */
.ugeplan-main .toast.toast:has(.btn) {
  padding-inline: 18px 8px;
}
[data-theme="dark"] .ugeplan-main .toast.toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
/* Fortryd/Vis inde i toasten: salvie-vask-pillen (kun i toast-kontekst —
   robottens .btn.ghost lever sit eget liv udenfor) */
.ugeplan-main .toast.toast .btn.ghost {
  min-height: 28px;
  height: 28px;
  border: 0;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font-size: 13px;
  font-weight: 550;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  position: relative;
}
.ugeplan-main .toast.toast .btn.ghost:hover {
  background: var(--ss-toast-action-bg-hover);
  border-color: transparent;
  color: var(--ss-toast-action-ink);
}
.ugeplan-main .toast.toast .btn.ghost::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: var(--ss-toast-radius);
}
[data-theme="dark"] .ugeplan-main .toast.toast .btn.ghost {
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
}
[data-theme="dark"] .ugeplan-main .toast.toast .btn.ghost:hover {
  background: var(--ss-toast-action-bg-hover);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ugeplan-main .toast.toast,
  [data-theme="dark"] .ugeplan-main .toast.toast {
    background: var(--ss-toast-bg-solid);
  }
}

/* ── SKRIVEBORD-adapters (runde 4, Morten-godkendt mockup 15/7; dotten i
      scratch-restore DØR — A-reglen (ingen dots) gælder alle flader; download
      flyttes TOP→BUND (Mortens valg: ét slot for øjet). Mekanik urørt:
      gb-fabrikkens 4 typer + roller, sk-undo's mobil-only-regel, timere.
      Ikon-semantik BEVARES men i sitets toner (grøn/rust/jord-amber/neutral —
      tailwind-fladerne og de røde flader dør). ── */
.toast-notification.toast-notification {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  padding: 10px 18px;
}
/* robot-darkmode.css maler .toast-notification-dark M. !important (delt fil,
   5 forbrugere — rettes ikke herfra) → dark-tvillingen SKAL matche styrken.
   Ét af de to dokumenterede !important-undtagelsestilfælde i biblioteket. */
[data-theme="dark"] .toast-notification.toast-notification {
  background: var(--ss-toast-bg) !important;
  color: var(--ss-toast-ink) !important;
  border: 0.5px solid var(--ss-toast-border) !important;
  box-shadow: var(--ss-toast-shadow) !important;
}
.toast-notification.success .toast-icon svg { color: var(--color-success, #22c55e); }
.toast-notification.info .toast-icon svg { color: var(--color-text-secondary, #73716d); }
.toast-notification.warning .toast-icon svg { color: #9A6A2E; }
.toast-notification.error .toast-icon svg { color: #A6594B; }
[data-theme="dark"] .toast-notification.success .toast-icon svg { color: var(--color-success, #4ade80); }
[data-theme="dark"] .toast-notification.info .toast-icon svg { color: var(--color-text-secondary, #A3A19B); }
[data-theme="dark"] .toast-notification.warning .toast-icon svg { color: #C99A5B; }
[data-theme="dark"] .toast-notification.error .toast-icon svg { color: #D4816F; }

.sk-undo-toast.sk-undo-toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  padding-block: 7px;
  padding-inline: 18px 7px;
}
[data-theme="dark"] .sk-undo-toast.sk-undo-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
.sk-undo-btn.sk-undo-btn {
  height: 28px;
  border: 0;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font-size: 13px;
  font-weight: 550;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  display: inline-flex;
  align-items: center;
  flex: none;
  position: relative;
}
.sk-undo-btn.sk-undo-btn:active { background: var(--ss-toast-action-bg-hover); }
.sk-undo-btn.sk-undo-btn::before { content: ""; position: absolute; inset: -8px; border-radius: var(--ss-toast-radius); }
[data-theme="dark"] .sk-undo-btn.sk-undo-btn { background: var(--ss-toast-action-bg); color: var(--ss-toast-action-ink); }

.scratch-restore-toast.scratch-restore-toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  padding-block: 7px;
  padding-inline: 18px 7px;
}
/* Mortens dom 15/7: «do not have the green dot … we agreed not to use green
   dot in the other design too» — status-prikken dør på tværs af flader. */
.scratch-restore-toast.scratch-restore-toast::before { content: none; }
[data-theme="dark"] .scratch-restore-toast.scratch-restore-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
.scratch-restore-undo.scratch-restore-undo {
  height: 28px;
  border: 0;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font-size: 13px;
  font-weight: 550;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  display: inline-flex;
  align-items: center;
  flex: none;
  position: relative;
}
.scratch-restore-undo.scratch-restore-undo:hover { background: var(--ss-toast-action-bg-hover); color: var(--ss-toast-action-ink); border-color: transparent; }
.scratch-restore-undo.scratch-restore-undo::before { content: ""; position: absolute; inset: -8px; border-radius: var(--ss-toast-radius); }
[data-theme="dark"] .scratch-restore-undo.scratch-restore-undo { background: var(--ss-toast-action-bg); color: var(--ss-toast-action-ink); }

.hte-toast.hte-toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  padding-block: 7px;
  padding-inline: 18px 7px;
}
[data-theme="dark"] .hte-toast.hte-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
.hte-toast-link.hte-toast-link {
  height: 28px;
  background: var(--ss-toast-action-bg);
  color: var(--ss-toast-action-ink);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  padding: 0 13px;
  border-radius: var(--ss-toast-radius);
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 0;
  position: relative;
}
.hte-toast-link.hte-toast-link:hover { background: var(--ss-toast-action-bg-hover); text-decoration: none; }
.hte-toast-link.hte-toast-link::before { content: ""; position: absolute; inset: -8px; border-radius: var(--ss-toast-radius); }
[data-theme="dark"] .hte-toast-link.hte-toast-link { background: var(--ss-toast-action-bg); color: var(--ss-toast-action-ink); }

/* download: TOP→BUND (Mortens valg — ét slot for øjet) + glas; den røde
   error-FLADE dør (A-reglen), teksten bærer fejlen. */
.sk-download-toast.sk-download-toast {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 32px);
  top: auto;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  padding: 10px 18px;
}
.sk-download-toast.sk-download-toast.sk-download-toast--visible {
  transform: translateX(-50%) translateY(0);
}
.sk-download-toast.sk-download-toast.sk-download-toast--error {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
}
[data-theme="dark"] .sk-download-toast.sk-download-toast,
[data-theme="dark"] .sk-download-toast.sk-download-toast.sk-download-toast--error {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}

/* voice: legacy-regelsættet er selv ALT-!important (skrivebord-v2-skinnet) →
   adapteren SKAL matche styrken her. Andet af de to dokumenterede
   !important-undtagelsestilfælde — brug det ALDRIG andre steder. */
.sk-voice-toast.sk-voice-toast {
  background: var(--ss-toast-bg) !important;
  -webkit-backdrop-filter: var(--ss-toast-blur) !important;
  backdrop-filter: var(--ss-toast-blur) !important;
  color: var(--ss-toast-ink) !important;
  font-size: var(--font-size-sm, 13px) !important;
  font-weight: 500 !important;
  border: 0.5px solid var(--ss-toast-border) !important;
  border-radius: var(--ss-toast-radius) !important;
  box-shadow: var(--ss-toast-shadow) !important;
  padding: 10px 18px !important;
}
[data-theme="dark"] .sk-voice-toast.sk-voice-toast {
  background: var(--ss-toast-bg) !important;
  color: var(--ss-toast-ink) !important;
  border-color: var(--ss-toast-border) !important;
}
/* tænker-pillen (runde 5, Mortens fund + variant-B-valg 15/7): editor-lockens
   boble («Tænker… × Annuller») på glas-kanonen. KUN lock-konteksten —
   sidebar-boblen (robottens tale-boble uden backdrop) står urørt. Prikkerne
   males af ss-wait.css (gradient-loader-adapteren); Annuller er ss-wait-
   neutral i forvejen. 18/8-mønstret: knappens flade bærer højre-luften. */
.loader-backdrop .hamdan-speech-bubble.hamdan-speech-bubble {
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
  padding-block: 8px;
  padding-inline: 18px;
  gap: 12px;
}
.loader-backdrop .hamdan-speech-bubble.hamdan-speech-bubble:has(.ai-cancel-btn) {
  padding-inline: 18px 8px;
}
/* bundlens hvide gradient-glans-pseudos læses som snavs på glasset */
.loader-backdrop .hamdan-speech-bubble.hamdan-speech-bubble::before,
.loader-backdrop .hamdan-speech-bubble.hamdan-speech-bubble::after {
  content: none;
}
/* robot-darkmode.css (delt fil) maler .hamdan-speech-bubble-dark M.
   !important → tvillingen SKAL matche styrken. 3. og sidste dokumenterede
   !important-undtagelse — samme kilde-fil som gb-toastens (hostile r1
   havde ret her; proben viste !important på alle boble-props). */
[data-theme="dark"] .loader-backdrop .hamdan-speech-bubble.hamdan-speech-bubble {
  background: var(--ss-toast-bg) !important;
  color: var(--ss-toast-ink) !important;
  border: 0.5px solid var(--ss-toast-border) !important;
  box-shadow: var(--ss-toast-shadow) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .loader-backdrop .hamdan-speech-bubble.hamdan-speech-bubble,
  [data-theme="dark"] .loader-backdrop .hamdan-speech-bubble.hamdan-speech-bubble,
  .toast-notification.toast-notification,
  .sk-undo-toast.sk-undo-toast,
  .scratch-restore-toast.scratch-restore-toast,
  .hte-toast.hte-toast,
  .sk-download-toast.sk-download-toast,
  [data-theme="dark"] .toast-notification.toast-notification,
  [data-theme="dark"] .sk-undo-toast.sk-undo-toast,
  [data-theme="dark"] .scratch-restore-toast.scratch-restore-toast,
  [data-theme="dark"] .hte-toast.hte-toast,
  [data-theme="dark"] .sk-download-toast.sk-download-toast {
    background: var(--ss-toast-bg-solid);
  }
  .sk-voice-toast.sk-voice-toast,
  [data-theme="dark"] .sk-voice-toast.sk-voice-toast {
    background: var(--ss-toast-bg-solid) !important;
  }
}

/* ── RUNDE 6 (Mortens fund #3, 15/7): de to sidste AI-vente-piller —
      markerings-pillen (.sk-selection-ai-loading) og editor-lockens
      «Tænker…»-række (.loader-text) — på kanonerne. Begge ejes af
      v2-skinnets ALT-!important-lag (creme/brun/rose-ring/gradient-
      shimmer/statisk brun prik) → adapterne SKAL matche styrken; laget
      er den dokumenterede undtagelses-KILDE. Prikkerne kommer fra
      .gradient-loader-elementet (JS-indsat, ss-wait-adapteren maler).
      Mekanik (Esc, fokus, scroll-følge, cancel-flow) urørt. ── */
.sk-selection-ai-loading.sk-selection-ai-loading {
  background: var(--ss-toast-bg) !important;
  -webkit-backdrop-filter: var(--ss-toast-blur) !important;
  backdrop-filter: var(--ss-toast-blur) !important;
  border: 0.5px solid var(--ss-toast-border) !important;
  border-radius: var(--ss-toast-radius) !important;
  box-shadow: var(--ss-toast-shadow) !important;
}
[data-theme="dark"] .sk-selection-ai-loading.sk-selection-ai-loading {
  background: var(--ss-toast-bg) !important;
  border: 0.5px solid var(--ss-toast-border) !important;
  box-shadow: var(--ss-toast-shadow) !important;
}
.sk-selection-ai-loading .sk-sel-status-row {
  padding-block: 7px !important;
  padding-inline: 18px 7px !important;
  gap: 11px !important;
}
/* labelens gradient-shimmer og den statiske brune prik dør — prikkerne
   bærer bevægelsen nu (A-reglen: ingen dots/effekter udenpå teksten) */
.sk-selection-ai-loading .sk-sel-label {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ss-toast-ink) !important;
  font-size: var(--font-size-sm, 13px) !important;
  font-weight: 500 !important;
  animation: none !important;
}
.sk-selection-ai-loading .sk-sel-label::before {
  content: none !important;
}
[data-theme="dark"] .sk-selection-ai-loading .sk-sel-label {
  color: var(--ss-toast-ink) !important;
}
/* rose-ringen på lock-rækken dør — .gradient-loader-prikkerne overtager */
.sk-editor-ai-loading-lock .loader-text::before {
  content: none !important;
  animation: none !important;
}
.sk-editor-ai-loading-lock .loader-text[data-calm-cancel-row="1"] {
  background: var(--ss-toast-bg) !important;
  -webkit-backdrop-filter: var(--ss-toast-blur) !important;
  backdrop-filter: var(--ss-toast-blur) !important;
  color: var(--ss-toast-ink) !important;
  border: 0.5px solid var(--ss-toast-border) !important;
  border-radius: var(--ss-toast-radius) !important;
  box-shadow: var(--ss-toast-shadow) !important;
  font-size: var(--font-size-sm, 13px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding-block: 7px !important;
  padding-inline: 18px 7px !important;
  gap: 11px !important;
}
[data-theme="dark"] .sk-editor-ai-loading-lock .loader-text[data-calm-cancel-row="1"] {
  background: var(--ss-toast-bg) !important;
  color: var(--ss-toast-ink) !important;
  border: 0.5px solid var(--ss-toast-border) !important;
  box-shadow: var(--ss-toast-shadow) !important;
}
.sk-editor-ai-loading-lock .loader-text .calm-cancel-label {
  color: var(--ss-toast-ink) !important;
  font-weight: 500 !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sk-selection-ai-loading.sk-selection-ai-loading,
  [data-theme="dark"] .sk-selection-ai-loading.sk-selection-ai-loading,
  .sk-editor-ai-loading-lock .loader-text[data-calm-cancel-row="1"],
  [data-theme="dark"] .sk-editor-ai-loading-lock .loader-text[data-calm-cancel-row="1"] {
    background: var(--ss-toast-bg-solid) !important;
  }
}

/* ── CHAT-adapter (runde 7, Morten-godkendt mockup 15/7): Sofia-panelets
      kvitterings-toast .calm-toast («Udkast gemt», «Sendt til din mail»,
      fejl-kvitteringer — sofia-signals calmShowToast, 6 kaldesteder).
      Legacy i chat-ny-blod-bolge.css:7869 er et cream-kort (warm-surface,
      radius 12, sage-kant, egen skygge) — overfladen omskrives til kanonen.
      Position (fixed, bottom:28, z 100002 over mobile-panelet), is-visible-
      mekanikken og reduced-motion-reglen er robottens egne og står urørt.
      Doubled-class (0,2,0) slår legacy-lys (0,1,0); dark-tvillingen (0,3,0)
      slår html[data-theme] (0,1,1). Dimensions-værnet: legacy's
      max-width:min(86vw,360px) erstattes af kanon-værnet (100vw - 32px). ── */
.calm-toast.calm-toast {
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--ss-toast-bg);
  -webkit-backdrop-filter: var(--ss-toast-blur);
  backdrop-filter: var(--ss-toast-blur);
  color: var(--ss-toast-ink);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  border: 0.5px solid var(--ss-toast-border);
  border-radius: var(--ss-toast-radius);
  box-shadow: var(--ss-toast-shadow);
}
[data-theme="dark"] .calm-toast.calm-toast {
  background: var(--ss-toast-bg);
  color: var(--ss-toast-ink);
  border: 0.5px solid var(--ss-toast-border);
  box-shadow: var(--ss-toast-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .calm-toast.calm-toast,
  [data-theme="dark"] .calm-toast.calm-toast {
    background: var(--ss-toast-bg-solid);
  }
}

/* ── 44px-touch (Apple HIG) via usynlig halo — visuel højde forbliver 28px.
      Bærerne SKAL være position:relative, ellers ankrer halo'en til nærmeste
      positionerede forfader og tæpper fladen (stjerne-halo-lærdommen 15/7). ── */
.ss-toast-action,
.ss-saved-toast button,
.email-toast-action.email-toast-action,
.email-undo-btn.email-undo-btn {
  position: relative;
}
.ss-toast-action::before,
.ss-saved-toast button::before,
.email-toast-action.email-toast-action::before,
.email-undo-btn.email-undo-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: var(--ss-toast-radius);
}

@media (prefers-reduced-motion: reduce) {
  .ss-toast-pill,
  .ss-toast-action,
  .ss-saved-toast,
  .ss-saved-toast button,
  .ss-stt-toast.ss-stt-toast {
    transition: none;
  }
}