/* chat-pdf-reader.css — v2: pixel-tro dokumentlæser (FUSION-SPEC).
   Dokumentet er ORIGINALEN — vores chrome er én stille kolonne der deler
   dokumentets 680px-akse: topbar · sider · svar-bånd · composer. */

/* ── Dokumentkort i samtalen (miniature = ægte side 1) ── */

.ss-pdf-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  align-items: flex-end;
}

/* The sent-message content wrapper becomes RTL on Arabic Chat. For a column
   flexbox, cross-start is then the physical right edge where user documents
   belong; cross-end would move them to the assistant side. */
html[dir="rtl"] .ss-pdf-cards {
  align-items: flex-start;
}

.ss-pdf-card {
  min-width: 240px;
  max-width: 320px;
  width: fit-content;
  background: var(--color-card, #FFFEFB);
  border: 1px solid var(--color-border, #E9E1D6);
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  gap: 11px;
}

/* Miniature: no own border (double-border artefact) — a print-style drop only. */
.ss-pdf-mini {
  width: 58px;
  height: 76px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-hover, rgba(0, 0, 0, 0.04));
  box-shadow: 1px 1px 0 0 rgba(58, 47, 38, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary, #8A8071);
}

.ss-pdf-mini-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-pdf-mini.is-shimmer {
  background: linear-gradient(90deg, var(--color-border, #E9E1D6) 25%, var(--color-card, #FFFEFB) 50%, var(--color-border, #E9E1D6) 75%);
  background-size: 200% 100%;
  animation: ss-pdf-shimmer 1.5s infinite;
}

@keyframes ss-pdf-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.ss-pdf-card-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ss-pdf-card-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--color-text-primary, #1f1f1e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-pdf-card-meta {
  font-size: 12px;
  color: var(--color-text-secondary, #646e78);
  margin-top: 1px;
}

.ss-pdf-card.is-loading .ss-pdf-card-meta {
  animation: ss-pdf-pulse 1.2s ease-in-out infinite;
}

@keyframes ss-pdf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Auto-width pill on the near-white card: one shade deeper so it reads.
   #chat-main-dubletter herunder: chat-ny-blod-bolge.css nulstiller
   '#chat-main button' (background none, color inherit) med ID-vægt —
   dubletten vinder farverne tilbage uden !important. */
.ss-pdf-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-pdf-card-open,
#chat-main .ss-pdf-card-open {
  align-self: flex-start;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: #2F4A38;
  background: #E2EBE2;
  cursor: pointer;
  transition: background 120ms ease;
  animation: ss-pdf-btn-in 200ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes ss-pdf-btn-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ss-pdf-card-open:hover,
#chat-main .ss-pdf-card-open:hover { background: #D6E2D6; }
.ss-pdf-card-open:active,
#chat-main .ss-pdf-card-open:active { background: #CBD9CB; }

/* Gem-knappen: den fyldte grønne (Mortens godkendte mockup 6/7) —
   samme #chat-main-dublet-mønster som Åbn-knappen. */
.ss-pdf-card-save,
#chat-main .ss-pdf-card-save {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: #F4F8F5;
  background: #4A6B5D;
  cursor: pointer;
  transition: background 120ms ease;
  animation: ss-pdf-btn-in 200ms cubic-bezier(0.2, 0, 0, 1);
}
.ss-pdf-card-save:hover,
#chat-main .ss-pdf-card-save:hover { background: #3E5C50; }
.ss-pdf-card-save:active,
#chat-main .ss-pdf-card-save:active { background: #365044; }
.ss-pdf-card-save:disabled,
#chat-main .ss-pdf-card-save:disabled { cursor: default; }
.ss-pdf-card-save.is-saving,
#chat-main .ss-pdf-card-save.is-saving { opacity: 0.75; }
.ss-pdf-card-save.is-saved,
#chat-main .ss-pdf-card-save.is-saved {
  color: #33544A;
  background: #E7EFEA;
}

/* ── Læseren: stage + delt kolonne ── */

body.ss-pdf-reader-open #chat-messages {
  display: none; /* the reader IS the stage; close returns the chat untouched
                    and scrolls to the newest content (answers arrive in the
                    band meanwhile — never lost, per FUSION-SPEC §6) */
}

body.ss-pdf-reader-open #bb-sidebar {
  display: none; /* nav-railen (z 100) ligger ellers OVER læseren (z 50) og
                    æder dokumentets venstre kant; luk gendanner den (Morten
                    4/7). Alle bredder — læseren ejer hele fladen. */
}

.ss-pdf-reader {
  flex: 1 1 auto;
  /* The conversation panel centers its flex children (align-items: center) —
     without an explicit stretch the reader shrinks to content width (measured
     328px live). The reader owns the full row; the column caps at 680 inside. */
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  outline: none;
  background: transparent; /* ingen egen flade — siderne flyder på appens
                              creme med kun deres skygge (Morten 5/7: den
                              beige host læste som "grim mørk firkant") */
  animation: ss-pdf-reader-in 200ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes ss-pdf-reader-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ss-pdf-reader-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

.ss-pdf-col {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  box-sizing: border-box;
  /* Anker for den flydende Læs op-pill (ingen header — Morten 4/7). */
  position: relative;
}

.ss-pdf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Læs op: canonical ss-play grammar — flydende pill nederst på dokumentet
   (email-læserens Oplæs-mønster; headeren findes ikke længere). */
/* Læs op-pillen: eget tilstands-sprog (data-state på wrappen) — ALDRIG
   besked-knappens ss-play-klasser: deres spinner-geometri og farvekanon er
   bygget til 28px-kvadrater og malede pillen skævt (Mortens redesign-ordre
   4/7: spinner udenfor knappen, weird farve, ingen pause/stop). To felter:
   transport (Læs op/Henter/Pause/Fortsæt) + helt stop — stop-feltet findes
   kun mens noget er i gang. */
.ss-pdf-listen,
#chat-main .ss-pdf-listen {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  box-shadow: 0 6px 20px rgba(48, 42, 34, 0.16);
  display: inline-flex;
  align-items: stretch;
  white-space: nowrap;
  border: 1px solid var(--color-border, #E9E1D6);
  border-radius: 999px;
  background: var(--color-card, #FFFEFB);
  color: #2F4A38;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.ss-pdf-listen[data-state="playing"],
.ss-pdf-listen[data-state="paused"],
#chat-main .ss-pdf-listen[data-state="playing"],
#chat-main .ss-pdf-listen[data-state="paused"] {
  border-color: #C9C2B4; /* aktiv = kanten står en anelse fastere; baggrunden
                            forbliver rolig — amber-markøren i dokumentet er
                            læse-signalet, aldrig knap-inversion */
}

.ss-pdf-listen-main,
.ss-pdf-listen-stop,
#chat-main .ss-pdf-listen-main,
#chat-main .ss-pdf-listen-stop {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.ss-pdf-listen-main:hover,
.ss-pdf-listen-stop:hover,
#chat-main .ss-pdf-listen-main:hover,
#chat-main .ss-pdf-listen-stop:hover { background: var(--color-hover, rgba(0, 0, 0, 0.04)); }

.ss-pdf-listen-stop,
#chat-main .ss-pdf-listen-stop { padding: 8px 12px; color: #7A756B; }

.ss-pdf-listen-sep {
  width: 1px;
  align-self: stretch;
  background: var(--color-border, #E9E1D6);
}

.ss-pdf-listen[data-state="idle"] .ss-pdf-listen-sep,
.ss-pdf-listen[data-state="idle"] .ss-pdf-listen-stop,
#chat-main .ss-pdf-listen[data-state="idle"] .ss-pdf-listen-sep,
#chat-main .ss-pdf-listen[data-state="idle"] .ss-pdf-listen-stop { display: none; }
/* dubletterne: base-reglens #chat-main-arm (1,1,0) slår ellers state-reglen */

.ss-pdf-listen[data-state="loading"] .ss-pdf-listen-label { color: #7A756B; }

.ss-pdf-listen-ic {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* spinneren bor i SAMME slot som ikonet — pillens bredde
                     flytter sig aldrig mellem hvile og henter */
}

.ss-pdf-listen-ring {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(60, 56, 48, 0.15);
  border-top-color: #7A756B;
  animation: ss-pdf-spin 0.9s linear infinite;
}

@keyframes ss-pdf-spin { to { transform: rotate(360deg); } }

/* (Læserens egen ✕ er væk — chat-back-btn overtager lukningen, se JS.) */

.ss-pdf-listen-main:focus-visible,
.ss-pdf-listen-stop:focus-visible {
  outline: 2px solid var(--color-text-primary, #2C2A26);
  outline-offset: -2px; /* indenfor — wrappen klipper (overflow hidden) */
}

.ss-pdf-card-open:focus-visible,
.ss-pdf-band-link:focus-visible,
.ss-pdf-band-read:focus-visible {
  outline: 2px solid var(--color-text-primary, #2C2A26);
  outline-offset: 2px;
}

/* Stage: free scroll, contained overscroll, quiet scrollbar. */
.ss-pdf-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* pages are sized to fit (STAGE_CHROME-reserven i JS);
                         en vandret bar her er altid et rounding-artefakt og
                         må aldrig vises (Morten 4/7: "scrollers on all sides") */
  overscroll-behavior-y: contain;
  padding: 14px 4px 32px;
  touch-action: pan-x pan-y pinch-zoom !important; /* a global manipulation rule otherwise kills double-tap/pinch on the document */
}

/* Stage-scrollbar: blød flydende pill, intet track. De to standard-
   scrollbar-props (bredde/farve) må IKKE stå på stagen — i Chrome 121+
   slukker de ::-webkit-scrollbar-reglerne og efterlader Windows' rå gutter
   (Mortens fund 4/7); de bor kun i no-webkit-fallbacken (Firefox) nederst. */
.ss-pdf-stage::-webkit-scrollbar { width: 12px; }
.ss-pdf-stage::-webkit-scrollbar-track { background: transparent; }
.ss-pdf-stage::-webkit-scrollbar-button { display: none; height: 0; }
.ss-pdf-stage::-webkit-scrollbar-thumb {
  background-color: rgba(60, 56, 48, 0.16);
  border: 4px solid transparent; /* luft rundt om pillen = "inline"-looket */
  background-clip: padding-box;
  border-radius: 8px;
  min-height: 48px;
}
.ss-pdf-stage:hover::-webkit-scrollbar-thumb { background-color: rgba(60, 56, 48, 0.28); }

@supports not selector(::-webkit-scrollbar) {
  .ss-pdf-stage {
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 56, 48, 0.25) transparent;
  }
}

.ss-pdf-note {
  margin: 0 auto 12px;
  font-size: 12px;
  color: #8A8071;
  text-align: center;
}

/* Fejlkortets næste-skridt-linje ([c]): stille vejledning, aldrig alarm. */
.ss-pdf-card-next {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #8A8071;
}

[data-theme="dark"] .ss-pdf-card-next { color: #A79F92; }

/* Each page: its own sheet, pre-sized (scroll never jumps), 3-layer shadow.
   Far-laget har NEGATIV spread: plumen holdes stramt under arket (~13px)
   så to nabosider ALDRIG smelter sammen i 24px-gabet til én blok-skygge
   (Morten 5/7: "individual realistic shadows for each page"). */
.ss-pdf-pagewrap {
  position: relative;
  margin: 0 auto 24px;
  background: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(48, 42, 34, 0.10), 0 3px 8px rgba(48, 42, 34, 0.08), 0 14px 22px -12px rgba(48, 42, 34, 0.22);
  overflow: hidden;
}

.ss-pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 150ms ease;
}

.ss-pdf-canvas.is-in { opacity: 1; }

/* pdf.js text layer: invisible selectable truth on top of the pixels. */
.ss-pdf-textlayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.ss-pdf-textlayer span,
.ss-pdf-textlayer br {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0 0;
  z-index: 1; /* over endOfContent-elementet */
}

/* PDF.js-viewerens selection-kur (pdf_viewer.css-kanonen): KUN tekstlaget
   er markerbart — træk der starter/ender udenfor teksten kan ikke eskalere
   til "alt er markeret". endOfContent fanger selection-enden: normalt en
   usynlig stribe under teksten; under aktivt træk (is-selecting) dækker
   den hele laget bag glyf-spans. */
.ss-pdf-pagewrap {
  user-select: none;
  -webkit-user-select: none;
}

.ss-pdf-textlayer {
  user-select: text;
  -webkit-user-select: text;
}

.ss-pdf-eoc {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.ss-pdf-stage.is-selecting .ss-pdf-eoc { top: 0; }

/* Selection: OUR chrome, neutral warm translucent — never a hue that fights
   the document's own color world. */
.ss-pdf-textlayer ::selection { background: rgba(196, 183, 166, 0.30); }

/* TTS sentence-follow: amber reading marker (distinct from selection). */
.ss-pdf-hl {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ss-pdf-hl-rect {
  position: absolute;
  background: rgba(232, 168, 110, 0.26);
  box-shadow: inset 0 0 0 1px rgba(203, 138, 78, 0.40); /* kanten gør at
     markøren læses som ÉN bevidst boks — også på mørke dokumentflader,
     hvor ren amber-alpha blev gråt mudder (teal-sidebar-fundet 4/7) */
  border-radius: 4px;
  transition: opacity 120ms ease;
}

/* ── Markerings-toolbar: 1:1-GENBRUG af Skrivebordets hte-toolbar-kanon
   (kilde: robots/skrivebord/css/wow-features.css §.hte-toolbar — Morten 4/7:
   "steal, one source of truth"). Kopien er scoped med .ss-pdf-hte så den
   aldrig kolliderer, og button-farverne bærer #chat-main-dubletten mod
   chat-ny-blod-bolge-nulstillingen. Kun de knapper PDF-læseren har:
   Læs op (markering) + Forklar. ── */

.ss-pdf-hte.hte-toolbar {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 20000;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 252, 248, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid rgba(230, 225, 218, 0.5);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.15s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  font-family: var(--font-family);
}

.ss-pdf-hte.hte-toolbar.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ss-pdf-hte .hte-btn,
#chat-main .ss-pdf-hte .hte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgb(115, 113, 108);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.ss-pdf-hte .hte-btn:hover,
#chat-main .ss-pdf-hte .hte-btn:hover {
  background: rgba(200, 180, 160, 0.15);
  color: var(--color-text-primary);
}

.ss-pdf-hte .hte-btn:active,
#chat-main .ss-pdf-hte .hte-btn:active {
  transform: scale(0.93);
  background: rgba(200, 180, 160, 0.25);
}

.ss-pdf-hte .hte-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ss-pdf-hte .hte-btn--ai-star,
#chat-main .ss-pdf-hte .hte-btn--ai-star {
  width: auto;
  height: 30px;
  padding-block: 0; padding-inline: 8px 10px;
  gap: 5px;
  background: rgba(90, 88, 84, 0.08);
  font-weight: 500;
  color: var(--color-text-primary, #1a1a1a);
}

.ss-pdf-hte .hte-btn--ai-star:hover,
#chat-main .ss-pdf-hte .hte-btn--ai-star:hover {
  background: rgba(90, 88, 84, 0.14);
  color: var(--color-text-primary);
}

.ss-pdf-hte .calm-analyse-ico { display: inline-flex; align-items: center; }
.ss-pdf-hte .calm-analyse-ico svg { width: 16px; height: 16px; color: #5C4D43; }
.ss-pdf-hte .hte-btn--ai-star:hover .calm-analyse-ico svg { color: #3A2F26; }

.ss-pdf-hte .hte-btn-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}

.ss-pdf-hte .hte-divider {
  width: 1px;
  height: 16px;
  background: rgba(200, 180, 160, 0.3);
  margin: 0 3px;
  flex-shrink: 0;
}

.ss-pdf-hte .hte-btn:focus-visible {
  outline: 2px solid var(--color-text-primary, #2C2A26);
  outline-offset: 2px;
}

[data-theme="dark"] .ss-pdf-hte.hte-toolbar {
  background: rgba(43, 42, 39, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(20, 18, 15, 0.25), 0 1px 3px rgba(20, 18, 15, 0.15);
}

[data-theme="dark"] .ss-pdf-hte .hte-btn,
[data-theme="dark"] #chat-main .ss-pdf-hte .hte-btn { color: var(--color-text-secondary); }
[data-theme="dark"] .ss-pdf-hte .hte-btn:hover,
[data-theme="dark"] #chat-main .ss-pdf-hte .hte-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); }
[data-theme="dark"] .ss-pdf-hte .hte-btn:active,
[data-theme="dark"] #chat-main .ss-pdf-hte .hte-btn:active { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .ss-pdf-hte .hte-btn--ai-star,
[data-theme="dark"] #chat-main .ss-pdf-hte .hte-btn--ai-star { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); }
[data-theme="dark"] .ss-pdf-hte .hte-btn--ai-star:hover,
[data-theme="dark"] #chat-main .ss-pdf-hte .hte-btn--ai-star:hover { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .ss-pdf-hte .calm-analyse-ico svg { color: var(--color-text-secondary, #b0a89e); }
[data-theme="dark"] .ss-pdf-hte .hte-divider { background: rgba(163, 161, 155, 0.25); }

/* ── Svar-båndet: 3 læselige linjer + Læs op + Vis i chat ── */

.ss-pdf-band {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--color-card, #FFFEFB);
  border: 1px solid var(--color-border, #E9E1D6);
  border-radius: 14px;
  padding: 10px 13px;
  margin: 0 4px 10px;
  flex-shrink: 0;
}

.ss-pdf-band.is-in {
  animation: ss-pdf-band-in 250ms ease-out;
}

@keyframes ss-pdf-band-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ss-pdf-band-icon {
  color: #4A7A68;
  flex-shrink: 0;
  margin-top: 1px;
}

.ss-pdf-band-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #3A3226;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(3 * 1.5em);
}

.ss-pdf-band-read,
#chat-main .ss-pdf-band-read {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border, #E9E1D6);
  color: #4A7A68;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ss-pdf-band-read::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.ss-pdf-band-read.ss-play--loading,
.ss-pdf-band-read.ss-play--playing,
#chat-main .ss-pdf-band-read.ss-play--loading,
#chat-main .ss-pdf-band-read.ss-play--playing {
  background: #EAF0E9;
  border-color: #DCE9DA;
  color: #2F4A38;
}

.ss-pdf-band-link,
#chat-main .ss-pdf-band-link {
  border: none;
  background: none;
  font-size: 12px;
  color: #A79D8C;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 2px;
  flex-shrink: 0;
}

.ss-pdf-band.is-settled .ss-pdf-band-link,
#chat-main .ss-pdf-band.is-settled .ss-pdf-band-link {
  color: #8A8071;
  cursor: default;
}

/* ── Mobil: kant til kant, pinch-zoom på dokumentet alene ── */

@media (max-width: 640px) {
  .ss-pdf-col { max-width: none; }
  .ss-pdf-stage { padding: 10px 8px 24px; }
  .ss-pdf-card { min-width: 0; width: 100%; max-width: none; }

  /* Fingermål: læserens egne knapper skal være ≥44px høje (Apple HIG) på
     touch — desktop-padding gav kun ~29-32px. Ordblinde bruger ofte telefon;
     for små mål = svært at ramme. Kun højde/centrering ændres, ikke stil. */
  .ss-pdf-card-open,
  #chat-main .ss-pdf-card-open,
  .ss-pdf-card-save,
  #chat-main .ss-pdf-card-save {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ss-pdf-listen-main,
  .ss-pdf-listen-stop,
  #chat-main .ss-pdf-listen-main,
  #chat-main .ss-pdf-listen-stop {
    min-height: 44px;
  }
}

/* ── Split-view >=1100px: læseren = venstre flade i fuld højde, chatten =
   højre spalte. Dokumentet får top-til-bund; svar lander i chatten ved
   siden af (svar-båndet ville være dobbelt — slukket her). Breakpointen
   SKAL matche SPLIT_MIN_W i chat-pdf-reader.js. ── */

@media (min-width: 1100px) {
  body.ss-pdf-reader-open #chat-messages {
    display: flex; /* chatten er SYNLIG ved siden af dokumentet i split */
  }

  body.ss-pdf-reader-open #chat-conversation-panel {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    width: 30vw;
    padding: 12px 16px 16px;
    box-sizing: border-box;
    background: var(--color-bg, #FAF6F0);
    border-inline-start: 1px solid var(--color-border, #E9E1D6);
    z-index: 55;
  }

  body.ss-pdf-reader-open #chat-messages,
  body.ss-pdf-reader-open #chat-input {
    width: 100%;
    max-width: none;
  }

  /* maskheader-følgefix (Mortens regression 17/7): headeren bor nu UDE af panelet
     (#chat-main-række, maskheader-craft) — i split red dens X før med som panelets
     første barn og sad i chat-spaltens venstre hjørne. Genskab præcis dét: pin
     headeren fast oven på den fixed højre-spalte (z 56 > panelets 55, samme 30vw
     og inline-padding), og giv beskederne luft under X'et. Kun split — <1100px
     står headeren allerede rent SOM RÆKKE OVER læser-stagen. */
  body.ss-pdf-reader-open .chat-header {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: 30vw;
    margin-inline: 0;
    padding-inline: 16px;
    z-index: 56;
  }

  /* Toneren (Mortens 2. regression-fund 17/7): scroller-masken er :not(.ss-pdf-reader-open)-
     gatet (den ville fange den fixed læser som descendant), så spalten mistede sin fade og
     beskedernes toolbar stødte bart mod X'et. HER er den malede veil den KORREKTE teknik:
     spalten har en FLAD tokenflade (var(--color-bg) — ingen rampe, ingen glød), så en plade
     i samme farve matcher pr. definition. Genbruger samtale-craftens beviste form: solid til
     48px (X'ets underkant), blød i-bånd-ease til 0.91, + 44px monoton ::after-hale mod nul-
     hældning (gul linje-lærdommen). Literals = tokenVÆRDIERNE #FAFAF8/#1c1b18 (fallbacken
     #FAF6F0 i panel-reglen fyrer aldrig — var'en findes altid). !important + (0,3,1): skal
     slå maskheader-basens `background: none !important` (0,2,1). */
  body.chat-ny-in-conversation.ss-pdf-reader-open .chat-header {
    background: linear-gradient(to bottom,
      rgba(250, 250, 248, 1) 0%,
      rgba(250, 250, 248, 1) 83%,
      rgba(250, 250, 248, 0.975) 92%,
      rgba(250, 250, 248, 0.91) 100%) !important;
  }

  body.chat-ny-in-conversation.ss-pdf-reader-open .chat-header::after {
    content: '';
    position: absolute;
    top: 100%;
    inset-inline: 0;
    height: 44px;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(250, 250, 248, 0.91) 0%,
      rgba(250, 250, 248, 0.72) 20%,
      rgba(250, 250, 248, 0.48) 40%,
      rgba(250, 250, 248, 0.25) 60%,
      rgba(250, 250, 248, 0.07) 80%,
      rgba(250, 250, 248, 0) 100%);
  }

  [data-theme="dark"] body.chat-ny-in-conversation.ss-pdf-reader-open .chat-header {
    background: linear-gradient(to bottom,
      rgba(28, 27, 24, 1) 0%,
      rgba(28, 27, 24, 1) 83%,
      rgba(28, 27, 24, 0.975) 92%,
      rgba(28, 27, 24, 0.91) 100%) !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation.ss-pdf-reader-open .chat-header::after {
    background: linear-gradient(to bottom,
      rgba(28, 27, 24, 0.91) 0%,
      rgba(28, 27, 24, 0.72) 20%,
      rgba(28, 27, 24, 0.48) 40%,
      rgba(28, 27, 24, 0.25) 60%,
      rgba(28, 27, 24, 0.07) 80%,
      rgba(28, 27, 24, 0) 100%);
  }

  /* !important + (0,2,1): skal slå blod-bolges `padding: 52px 0 0 !important` (0,2,0). */
  body.chat-ny-in-conversation.ss-pdf-reader-open #chat-messages {
    padding-top: 72px !important;
  }

  body.ss-pdf-reader-open .ss-pdf-reader {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    bottom: 0;
    width: 70vw;
    z-index: 50;
    /* Fixed overlay SKAL være opak (chat-indhold ligger bagved) — samme
       token som chat-spalten til højre = én sømløs flade, kun border-left
       skiller. Transparent gælder kun i normal flow (<1100px). */
    background: var(--color-bg, #FAF6F0);
  }

  body.ss-pdf-reader-open .ss-pdf-col { max-width: 860px; }

  body.ss-pdf-reader-open .ss-pdf-band { display: none; }

  /* Split: pillen må være lidt større på den store flade. */
  body.ss-pdf-reader-open .ss-pdf-listen-main,
  body.ss-pdf-reader-open #chat-main .ss-pdf-listen-main {
    padding: 10px 18px;
    font-size: 13px;
  }

  body.ss-pdf-reader-open .ss-pdf-listen-stop,
  body.ss-pdf-reader-open #chat-main .ss-pdf-listen-stop { padding: 10px 14px; }
}

/* ── Reduced motion: alt står stille — undtagen TTS-markørens blide fade
   (et hårdt flash er værre for målgruppen end en 120ms-overgang) ── */

@media (prefers-reduced-motion: reduce) {
  .ss-pdf-mini.is-shimmer { animation: none; }
  .ss-pdf-card.is-loading .ss-pdf-card-meta { animation: none; }
  .ss-pdf-card-open { animation: none; transition: none; }
  .ss-pdf-reader { animation: none; }
  .ss-pdf-band.is-in { animation: none; }
  .ss-pdf-hte.hte-toolbar { transition: none; }
  .ss-pdf-canvas { transition: none; }
  .ss-pdf-listen-ring { animation: none; opacity: 0.6; } /* "Henter…"-teksten bærer tilstanden */
}

/* ── Dark mode: dokumentet FORBLIVER lyst (originalen) — broen mod mørket
   er sidernes vignette-halo (nedenfor), ikke en egen host-flade: læseren
   arver appens mørke baggrund (samme ingen-firkant-princip som lys). Split
   (fixed) får var(--color-bg) fra reglen ovenfor = #1E1C1A i dark. ── */


/* The document STAYS LIGHT in dark mode (note above) and the read-aloud pill
   floats on that light paper — so in dark mode it keeps its LIGHT skin instead
   of inverting to a dark chip. A dark chip on the white page read as a glare
   "hole" (the luminance cliff the vignette-halo below guards against); Morten
   7/7 chose this paper-native look. The dark-mode tokens (--color-card /
   --color-border) would flip these dark, so the light values are pinned here.
   Over the rare dark scroll-gap the pill reads as a light control — legible by
   design. Old bug: a translucent-white fill (0.06) went invisible on the page. */
[data-theme="dark"] .ss-pdf-listen,
[data-theme="dark"] #chat-main .ss-pdf-listen {
  background: #FFFEFB;
  border-color: #E9E1D6;
  color: #2F4A38;
  box-shadow: 0 6px 20px rgba(48, 42, 34, 0.16);
}

[data-theme="dark"] .ss-pdf-listen[data-state="playing"],
[data-theme="dark"] .ss-pdf-listen[data-state="paused"],
[data-theme="dark"] #chat-main .ss-pdf-listen[data-state="playing"],
[data-theme="dark"] #chat-main .ss-pdf-listen[data-state="paused"] {
  border-color: #C9C2B4;
}

/* Cream chip: hover DARKENS (dark-mode --color-hover is a white overlay that
   would wash the cream out); the #chat-main dublet beats the blod-bølge reset. */
[data-theme="dark"] .ss-pdf-listen-main:hover,
[data-theme="dark"] .ss-pdf-listen-stop:hover,
[data-theme="dark"] #chat-main .ss-pdf-listen-main:hover,
[data-theme="dark"] #chat-main .ss-pdf-listen-stop:hover { background: rgba(0, 0, 0, 0.04); }

[data-theme="dark"] .ss-pdf-listen-stop,
[data-theme="dark"] #chat-main .ss-pdf-listen-stop { color: #7A756B; }

[data-theme="dark"] .ss-pdf-listen-sep { background: #E9E1D6; }

[data-theme="dark"] .ss-pdf-listen[data-state="loading"] .ss-pdf-listen-label { color: #7A756B; }


/* Vignette-halo: bleeds the document's light into the dark surround so the
   luminance cliff never lands as glare (dyslexia: glare = reading fatigue). */
[data-theme="dark"] .ss-pdf-pagewrap {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.18), 0 12px 36px rgba(0, 0, 0, 0.28), 0 0 80px 20px rgba(30, 28, 24, 0.35);
}

[data-theme="dark"] .ss-pdf-textlayer ::selection { background: rgba(110, 138, 126, 0.25); }

[data-theme="dark"] .ss-pdf-band {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ss-pdf-band-text { color: #D8D3C8; }
[data-theme="dark"] .ss-pdf-band-read { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .ss-pdf-band-link,
[data-theme="dark"] #chat-main .ss-pdf-band-link { color: #7A756B; }
[data-theme="dark"] .ss-pdf-note { color: #A79F92; }

[data-theme="dark"] .ss-pdf-card {
  background: var(--color-card, #2a2a2a);
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .ss-pdf-card-open,
[data-theme="dark"] #chat-main .ss-pdf-card-open { background: #2E3A31; color: #BFD4C4; }
[data-theme="dark"] .ss-pdf-card-open:hover,
[data-theme="dark"] #chat-main .ss-pdf-card-open:hover { background: #35443A; }
[data-theme="dark"] .ss-pdf-card-save,
[data-theme="dark"] #chat-main .ss-pdf-card-save { background: #4A6B5D; color: #EAF2ED; }
[data-theme="dark"] .ss-pdf-card-save:hover,
[data-theme="dark"] #chat-main .ss-pdf-card-save:hover { background: #557A6B; }
[data-theme="dark"] .ss-pdf-card-save.is-saved,
[data-theme="dark"] #chat-main .ss-pdf-card-save.is-saved { background: #2E3A31; color: #BFD4C4; }
[data-theme="dark"] .ss-pdf-mini { background: rgba(255, 255, 255, 0.06); }

/* Dark: kun thumb-farven skifter — background-color (ALDRIG background-
   shorthand: den nulstiller background-clip og pillen bliver en klods);
   scrollbar-color kun i no-webkit-fallbacken, jf. kill-switch-noten oppe
   ved stage-scrollbar-blokken. */
[data-theme="dark"] .ss-pdf-stage::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .ss-pdf-stage:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.28); }

@supports not selector(::-webkit-scrollbar) {
  [data-theme="dark"] .ss-pdf-stage { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
}