/* GENERATED FILE — do not hand-edit.
 * Built by: node scripts/build-css-bundles.mjs
 * Output:   chat/css/dist/public-chat-tail.bundle.css
 * Sources (cascade order):
 *   - chat/css/sofia-reply-demo.css
 *   - chat/css/chat-tts-highlight.css
 *   - chat/css/chat-print.css
 *   - chat/css/kalender-card.css
 *   - chat/css/chat-pdf-reader.css
 *   - chat/css/calm/calm-prompt-shell.css
 *   - chat/css/calm/calm-prompt-header.css
 *   - chat/css/calm/calm-prompt-body.css
 *   - chat/css/calm/calm-prompt-footer.css
 *   - chat/css/public-chat-app-parity.css
 *   - chat/css/public-chat.css
 */

/* ==== source: chat/css/sofia-reply-demo.css ==== */
/* sofia-reply-demo.css - Sofia reply demo card for the public /chatgpt-dansk/ home.
   Ported BYTE-FOR-BYTE from the app chat/css/chat-ny-blod-bolge.css (the calm-brief2--reply
   card) so the marketing demo graphic is 100% identical to the app. Loaded only on the chat
   route. Demo is anon + firewalled: fake email content, no real data, gated send. */

/* === Base reply-card CSS (app chat-ny-blod-bolge.css L6829-7623) === */
/* Kicker, calm title, one-line reassurance */
.calm-kicker {
  margin: 0 0 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6E8A7E;
}

#chat-main .calm-brief2 .sofia-signal-title,
#chat-main .calm-brief2 .calm-title {
  margin: 0 0 8px;
  font-size: var(--calm-fs-title);
  line-height: 1.18;
  color: #3A2F26;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

#chat-main .calm-brief2 .sofia-signal-summary,
.calm-reassure {
  margin: 0 0 18px;
  font-size: var(--font-size-base, 15px);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
}

/* Subject context chip */
.calm-subject-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  color: var(--warm-text, #3D3028);
  background: rgba(110, 138, 126, 0.08);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calm-subject-key {
  font-weight: var(--font-weight-semibold);
  color: var(--warm-text-light, #8C7B6F);
}

/* Source-first: who wrote, their quote, and read-aloud of the visible quote */
.calm-source {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: rgba(253, 247, 243, 0.6);
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 14px;
}

.calm-source-from {
  margin: 0 0 8px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--warm-text, #3D3028);
}

.calm-source-quote {
  margin: 0 0 12px;
  padding: 0 0 0 12px;
  border-left: 3px solid rgba(110, 138, 126, 0.4);
  font-size: var(--font-size-base, 15px);
  line-height: 1.55;
  color: var(--warm-text, #3D3028);
  overflow-wrap: anywhere;
}

/* #3130: the source quote splits into the current/new message and a collapsed quoted
   history. The current block keeps the readable warm body text; the toggle is a quiet
   TEXT control (never a pill) scoped under #chat-main so the global `#chat-main button`
   reset cannot strip it; the history sits below a hairline divider and is muted. */
#chat-main .calm-source-quote .calm-quote-current {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--warm-text, #3D3028);
}

#chat-main .calm-source-quote button.calm-quote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0 0;
  padding: 2px 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: rgb(74, 122, 104);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

#chat-main .calm-source-quote button.calm-quote-toggle:hover {
  color: rgb(58, 47, 38);
}

#chat-main .calm-source-quote .calm-quote-chevron {
  display: inline-block;
  font-size: var(--font-size-base);
  line-height: 1;
  transition: transform 0.2s ease;
}

#chat-main .calm-source-quote button.calm-quote-toggle[aria-expanded="true"] .calm-quote-chevron {
  transform: rotate(90deg);
}

#chat-main .calm-source-quote .calm-quote-history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(228, 220, 212, 0.7);
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--warm-text-light, #8C7B6F);
}

/* #3130: reduced motion stills the source chevron */
@media (prefers-reduced-motion: reduce) {
  #chat-main .calm-source-quote .calm-quote-chevron { transition: none; }
}

#chat-main .calm-source-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.35);
  background: transparent;
  color: #5C7468;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#chat-main .calm-source-listen:hover {
  background: rgba(110, 138, 126, 0.1);
  color: #3D3028;
}

/* ── #3136: Message-body read-aloud. A distinct, keyboard-focusable control that reads the
   OUTGOING reply draft ([data-calm-body]) aloud through the shared /chat/ ChatTTS path
   (window.ChatTTS.playMessageTTS), so dyslexia users can hear the reply they are about to
   send. It lives in the Besked field header — visually tied to the body but OUTSIDE
   [data-calm-body], so it is never serialized into body_html / autosave. The pill shares the
   matched voice-pill geometry (source "Hør beskeden" / "Ret med stemmen"); it is disabled
   (no empty TTS) while the draft skeleton loads or the body is empty. Tokens only. ── */
.calm-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.calm-body-head .calm-task-field-label {
  margin-bottom: 0;
}

#chat-main .calm-body-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.35);
  background: transparent;
  color: #5C7468;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#chat-main .calm-body-listen:hover {
  background: rgba(110, 138, 126, 0.1);
  color: #3D3028;
}

#chat-main .calm-body-listen:disabled {
  opacity: 0.45;
  cursor: default;
}

#chat-main .calm-body-listen:disabled:hover {
  background: transparent;
  color: #5C7468;
}

.calm-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ── X close (Luk) on the reply card — ported byte-for-byte from the app
   chat/css/chat-ny-blod-bolge.css so the visitor can dismiss the card; the "Spring over"
   skip closes too (see sofia-demo.js). ── */
#chat-main .calm-brief2--reply {
  position: relative;
}
#chat-main .calm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--warm-text-light, #8C7B6F);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#chat-main .calm-close:hover {
  background: rgba(58, 47, 38, 0.06);
  color: var(--warm-text, #3A2F26);
}
#chat-main .calm-close:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}
.calm-close-ico {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
html[data-theme="dark"] #chat-main .calm-close {
  color: #A89B91;
}
html[data-theme="dark"] #chat-main .calm-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FAF5EF;
}
/* Calm fade-out when the card is dismissed (sofia-demo.js adds the class, then removes the panel). */
#sofia-signal-panel.sofia-signal-panel--dismissing {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

/* Compact progress row (data-driven from the reply-needed queue) */
.calm-progress {
  margin: 0 0 18px;
}

.calm-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}

.calm-step {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(110, 138, 126, 0.22);
}

.calm-step--done {
  background: #6E8A7E;
}

.calm-step--current {
  background: #6E8A7E;
  box-shadow: 0 0 0 4px rgba(110, 138, 126, 0.18);
}

.calm-step-line {
  flex: 1 1 auto;
  height: 2px;
  min-width: 8px;
  max-width: 28px;
  background: rgba(110, 138, 126, 0.2);
}

.calm-step-line--done {
  background: #6E8A7E;
}

/* ── "Dit svar": the visible, editable reply (not behind a start button) ── */
.calm-task {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(228, 220, 212, 0.6);
}

.calm-task[hidden] {
  display: none;
}

.calm-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.calm-answer-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm-text-light, #8C7B6F);
}

/* Voice-revision pill (progressive enhancement) */
/* #3137: the opener is a meaningful soft-sage AI action button (not a transparent
   ghost pill) — it opens the full type-or-speak revision dock. It is an OPENER only:
   it never owns a recording/listening state (the dock mic does). Scoped under
   #chat-main to beat the global button reset. */
#chat-main .calm-revise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110, 138, 126, 0.45);
  background: rgba(110, 138, 126, 0.14);
  color: #3D6B57;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#chat-main .calm-revise:hover {
  background: rgba(110, 138, 126, 0.22);
  border-color: rgba(110, 138, 126, 0.55);
  color: #2F5847;
}

.calm-task-field {
  margin-bottom: 12px;
}

.calm-task-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm-text-light, #8C7B6F);
}

.calm-letter {
  display: block;
  min-height: 1.5em;
  padding: 10px 14px;
  font-size: var(--font-size-base, 15px);
  line-height: 1.55;
  color: var(--warm-text, #3D3028);
  background: rgba(253, 247, 243, 0.5);
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  overflow-wrap: anywhere;
}

.calm-letter--body {
  min-height: 130px;
  padding: 16px 18px;
}

/* #3063: the Brief reply body holds real multi-paragraph email HTML, so it
   borrows the email compose editor rhythm (.ql-editor) — a generous inset, a
   blank line between paragraphs, and a first/last-child margin reset — so the
   draft reads like a real email instead of a flattened one-line blob. */
.calm-letter--body p {
  margin: 1em 0;
}

.calm-letter--body p:first-child {
  margin-top: 0;
}

.calm-letter--body p:last-child {
  margin-bottom: 0;
}

.calm-letter--body ul,
.calm-letter--body ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.calm-letter:empty::before {
  content: attr(data-placeholder);
  color: var(--warm-text-light, #8C7B6F);
  opacity: 0.7;
}

/* #3134: the Brief reply Besked field is now a .calm-letter--body container that holds
   the editable [data-calm-body] region plus an inline signature footer, so the box
   itself is never :empty. The inner editor draws no chrome of its own (the container
   draws the box) and just fills it so the whole field stays a click/focus target. */
.calm-letter--body [data-calm-body] {
  min-height: 96px;
  outline: none;
}

/* Re-home the empty-reply placeholder onto the inner editor (the base
   .calm-letter:empty::before still serves the To/Subject fields). */
.calm-letter--body [data-calm-body]:empty::before {
  content: attr(data-placeholder);
  color: var(--warm-text-light, #8C7B6F);
  opacity: 0.7;
}

/* ── #3067: calm skeleton shown inside .calm-letter--body while the Brief reply
   draft is loading (cache lookup / generation), so the Besked field never sits
   empty with only its "Skriv dit svar …" placeholder. While loading the body is
   [aria-busy="true"] and contenteditable="false"; prepareCalmDraft clears it the
   moment cached/generated content lands. The bars reuse the existing warm calm
   border/cream palette (no new colors); styling is source-only (no runtime style
   injection). The skeleton nodes make the body non-:empty, so the placeholder is
   naturally suppressed while loading. ── */
.calm-letter--loading {
  cursor: default;
}

.calm-letter--loading .calm-skel-line {
  display: block;
  height: 0.72em;
  margin: 0 0 0.66em;
  border-radius: 6px;
  background-color: rgba(228, 220, 212, 0.6);
  background-image: linear-gradient(
    90deg,
    rgba(228, 220, 212, 0) 0%,
    rgba(253, 247, 243, 0.9) 50%,
    rgba(228, 220, 212, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 180% 100%;
  animation: calm-skel-shimmer 1.5s ease-in-out infinite;
}

.calm-letter--loading .calm-skel-line:first-child {
  margin-top: 3px;
}

.calm-letter--loading .calm-skel-line:nth-child(1) { width: 94%; }
.calm-letter--loading .calm-skel-line:nth-child(2) { width: 82%; }
.calm-letter--loading .calm-skel-line:nth-child(3) { width: 64%; }

@keyframes calm-skel-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

.calm-task-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
/* #4406: the display:flex above is an author rule that beats the UA [hidden] style, so the
   row must hide explicitly when the undo window replaces it with the Fortryd. */
.calm-task-actions[hidden] {
  display: none;
}

#chat-main .calm-task-send {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: #6E8A7E;
  color: #FFFFFF;
  border: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s ease;
}

#chat-main .calm-task-send:hover {
  background: color-mix(in srgb, #6E8A7E 88%, black);
}

#chat-main .calm-task-send[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

#chat-main .calm-task-back {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: transparent;
  color: var(--warm-text-light, #8C7B6F);
  border: 1px solid rgba(228, 220, 212, 0.7);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#chat-main .calm-task-back:hover {
  color: var(--warm-text, #3D3028);
  border-color: rgba(228, 220, 212, 0.95);
}

/* #4406: send confirmation — a clear "Sendt" with the recipient quiet underneath
   (Morten: less text for dyslexia). Shown the moment the undo window opens and kept
   after the send settles. */
.calm-task-sent {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
}
.calm-task-sent[hidden] {
  display: none;
}
.calm-sent-head {
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--font-weight-semibold);
  color: #6E8A7E;
  line-height: 1.3;
}
.calm-sent-to {
  font-size: var(--font-size-sm, 13px);
  color: var(--warm-text-light, #8C7B6F);
  line-height: 1.4;
  word-break: break-word;
}

/* #4406: undo-send window — a calm Fortryd whose ring depletes over the 5s window.
   No countdown number (less text); the depleting ring carries the "time is running"
   signal on its own. */
.calm-undo-row {
  margin-top: 14px;
}
.calm-undo-row[hidden] {
  display: none;
}
#chat-main .calm-undo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 12px;
  border-radius: 14px;
  background: transparent;
  color: var(--warm-text, #3D3028);
  border: 1px solid rgba(228, 220, 212, 0.85);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#chat-main .calm-undo-btn:hover {
  border-color: #6E8A7E;
  background: rgba(110, 138, 126, 0.06);
}
#chat-main .calm-undo-btn:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}
.calm-undo-label {
  line-height: 1;
}
.calm-undo-ring {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: none;
}
.calm-undo-ring svg {
  width: 22px;
  height: 22px;
  transform: rotate(-90deg); /* depletion starts at 12 o'clock */
}
.calm-undo-ring__track {
  fill: none;
  stroke: rgba(110, 138, 126, 0.22);
  stroke-width: 3;
}
.calm-undo-ring__fill {
  fill: none;
  stroke: #6E8A7E;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100.53; /* circumference of r=16 */
  stroke-dashoffset: 0;
}
.calm-undo-row.is-counting .calm-undo-ring__fill {
  animation: calm-undo-deplete var(--calm-undo-dur, 5000ms) linear forwards;
}
@keyframes calm-undo-deplete {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100.53; }
}

/* While the send is held, the letter reads as committed — dimmed and non-interactive —
   so it is clear the reply is on its way (only Fortryd acts during the window). */
.calm-task--sending .calm-task-field {
  opacity: 0.5;
  pointer-events: none;
}

.calm-task-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #9B6050;
  background: rgba(155, 96, 80, 0.08);
  border: 1px solid rgba(155, 96, 80, 0.2);
  border-radius: 10px;
}

/* Voice-revision interruption notice, announced via the .calm-task-status live region.
   Collapses to zero footprint when empty so it never adds space on a normal card. */
.calm-task-note {
  margin: 12px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #6E8A7E;
}
.calm-task-note:empty {
  margin: 0;
}

/* Loading / all-caught-up variants stay single-column and centered */
.calm-brief2--pending,
.calm-brief2--done {
  text-align: center;
}

/* ── Focus rings: sage #6E8A7E ── */

#chat-main .calm-source-listen:focus-visible,
#chat-main .calm-source-quote button.calm-quote-toggle:focus-visible,
#chat-main .calm-body-listen:focus-visible,
#chat-main .calm-revise:focus-visible,
#chat-main .calm-task-send:focus-visible,
#chat-main .calm-task-back:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}

/* #3195: reply text fields (To / Subject / Besked) keep their neutral field
   chrome on click/focus; the text caret is enough affordance here, and the green
   ring read as an active outline around every clicked field. */
.calm-letter:focus-visible,
#chat-main .calm-brief2--reply .calm-letter--body:focus-within {
  outline: none;
  box-shadow: none;
  border-color: rgba(228, 220, 212, 0.7);
}

/* ── Dark mode: calm card keeps its warm/sage palette (no inversion) ── */
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2 {
  background: var(--white, #FFFEFB);
  border-color: rgba(228, 220, 212, 0.6);
}

html[data-theme="dark"] #chat-main .calm-brief2 .sofia-signal-title,
html[data-theme="dark"] #chat-main .calm-brief2 .calm-title {
  color: #3A2F26;
}

html[data-theme="dark"] #chat-main .calm-brief2 .sofia-signal-summary,
html[data-theme="dark"] .calm-reassure {
  color: var(--warm-text-light, #8C7B6F);
}

html[data-theme="dark"] .calm-empty-title {
  color: var(--color-text-primary, #FAF5EF);
}

/* Source block + subject chip stay legible (not the warm light palette) on dark */
html[data-theme="dark"] .calm-source {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .calm-source-from,
html[data-theme="dark"] .calm-source-quote {
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] .calm-source-quote {
  border-left-color: rgba(110, 138, 126, 0.6);
}

/* #3130: keep the current message, the quiet toggle, and the muted history legible on
   dark without turning the toggle into a pill (border/background stay absent). */
html[data-theme="dark"] #chat-main .calm-source-quote .calm-quote-current {
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .calm-source-quote button.calm-quote-toggle {
  color: #8FB3A2;
}

html[data-theme="dark"] #chat-main .calm-source-quote button.calm-quote-toggle:hover {
  color: #C2D6CC;
}

html[data-theme="dark"] #chat-main .calm-source-quote .calm-quote-history {
  color: var(--color-text-secondary, #A89B91);
  border-top-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] #chat-main .calm-source-listen,
html[data-theme="dark"] #chat-main .calm-body-listen {
  color: #B9CCC2;
  border-color: rgba(255, 255, 255, 0.16);
}

/* #3137: the AI opener keeps a soft-sage fill in dark mode too (not a ghost pill). */
html[data-theme="dark"] #chat-main .calm-revise {
  background: rgba(110, 138, 126, 0.24);
  border-color: rgba(110, 138, 126, 0.45);
  color: #CDE3D8;
}

html[data-theme="dark"] #chat-main .calm-revise:hover {
  background: rgba(110, 138, 126, 0.34);
  color: #FFFFFF;
}

html[data-theme="dark"] .calm-subject-chip {
  background: rgba(110, 138, 126, 0.18);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] .calm-subject-key {
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] .calm-task {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .calm-answer-title,
html[data-theme="dark"] .calm-task-field-label {
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] .calm-letter {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .calm-task-back {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] .calm-task-error {
  color: #E6B0A2;
  background: rgba(212, 144, 128, 0.12);
  border-color: rgba(212, 144, 128, 0.26);
}

/* #4406: undo window in dark mode — recipient and Fortryd adapt to the dark surface. */
html[data-theme="dark"] .calm-sent-to {
  color: var(--color-text-secondary, #A89B91);
}
html[data-theme="dark"] #chat-main .calm-undo-btn {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-text-primary, #FAF5EF);
}
html[data-theme="dark"] #chat-main .calm-undo-btn:hover {
  border-color: #6E8A7E;
  background: rgba(110, 138, 126, 0.14);
}
html[data-theme="dark"] .calm-undo-ring__track {
  stroke: rgba(255, 255, 255, 0.16);
}

/* ── Responsive: the card is already single-column; tighten padding + stack the footer ── */
@media (max-width: 720px) {
  #chat-main .sofia-signal--active.calm-brief2 {
    padding: 22px 20px;
  }

  .calm-task-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #chat-main .calm-task-send,
  #chat-main .calm-task-back {
    width: 100%;
  }

  /* #4406: the Fortryd matches the stacked footer width and centers its label + ring. */
  #chat-main .calm-undo-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── No horizontal scroll at 360px ── */
@media (max-width: 360px) {
  /* #2952: the chooser is now a fit-content segmented track with its own 3px
     padding, so it must not inherit the old loose-row side padding. */
  .calm-empty {
    padding-left: 14px;
    padding-right: 14px;
  }

  #chat-main .sofia-signal--active.calm-brief2 {
    padding: 18px 16px;
  }

  .calm-subject-chip {
    white-space: normal;
  }

  .calm-answer-head {
    align-items: flex-start;
  }
}

/* === Reply-only overrides + Fra select + dark + responsive (app L8440-8839) === */
/* Reduced header on the active reply card: only the literal "Svar på mail" shows.
   Scoped to .calm-brief2--reply so the pending + done states keep their own copy. */
#chat-main .calm-brief2--reply .calm-kicker,
#chat-main .calm-brief2--reply .calm-reassure,
#chat-main .calm-brief2--reply .sofia-signal-summary,
#chat-main .calm-brief2--reply .calm-subject-chip {
  display: none;
}

/* The reply-card title is the literal "Svar på mail" action label at the approved
   #3065 size/rhythm. Tokens keep the font-compliance guard happy
   (--font-size-2xl = 22px, --font-weight-semibold = 600); equal specificity to the
   base .calm-title rule but later in source, so it wins for the reply card only —
   the pending/done titles keep var(--calm-fs-title). */
#chat-main .calm-brief2--reply .sofia-signal-title,
#chat-main .calm-brief2--reply .calm-title {
  font-size: var(--font-size-2xl);
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
}

/* ── #3118: Sofia Brief reply card — neutral source, white letter fields, a visible
   "Fra" sender select + signature preview, and unified warm-white voice pills. All
   reply-scoped (.calm-brief2--reply) so the pending/done states keep their palette,
   and every light surface has a paired dark override so the near-white hexes never
   leak onto the dark card (the #3045 light-slab failure). Source-baked, fonts
   tokenised so the chat font-compliance guard holds. ── */

/* The compact step dots add noise to a single-reply approval card — hide them here
   (pending/done never emit .calm-progress, so this is reply-only). */
#chat-main .calm-brief2--reply .calm-progress {
  display: none;
}

/* Neutral source card (was the warm cream rgba(253,247,243,.6)) so the quoted email
   reads as context, not a second editable surface competing with the answer. */
#chat-main .calm-brief2--reply .calm-source {
  background: #FBFAF9;
}

/* White letter fields (From / To / Subject / Body) so the editable answer is the
   brightest, most inviting surface on the card. */
#chat-main .calm-brief2--reply .calm-letter {
  background: #FFFEFB;
}

/* The visible "Fra" sender select: a full-width field on the letter rhythm so long
   "Name <very.long@address>" labels clip inside the box (no 360px horizontal scroll)
   rather than forcing the card wider. */
#chat-main .calm-brief2--reply .calm-letter--from {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 38px 10px 14px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--warm-text, #3D3028);
  /* appearance:none + a custom chevron so the rounded corners, warm-white fill and
     padding actually render on iOS/Android (native <select> chrome ignores them),
     keeping the Fra field visually consistent with the To/Subject/Body fields. */
  appearance: none;
  -webkit-appearance: none;
  background-color: #FFFEFB;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C7B6F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  cursor: pointer;
}

/* #3134: the read-only signature footer renders INLINE inside the .calm-letter--body
   message box, after the editable reply — quiet and lighter, exactly the footer
   appended once on send, so the card reads like one normal outgoing email. There is no
   separate labelled "Signatur" wrapper row. */
#chat-main .calm-brief2--reply .calm-sig-preview {
  margin-top: 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--warm-text-light, #8C7B6F);
  overflow-wrap: anywhere;
  outline: none;
}

/* The footer hides via its own [hidden] when the sender has no configured signature, so
   no blank footer ever shows. Explicit guard (mirrors .calm-task[hidden]) so no future
   display rule can defeat the native [hidden] attribute. */
#chat-main .calm-brief2--reply .calm-sig-preview[hidden] {
  display: none;
}

/* #3136/#3137: share one geometry (size/padding/gap) between the source-listen
   pill, the body read-aloud pill, and the "Forbedr med AI" opener so they line up;
   each keeps its own fill (the opener is a soft-sage AI button defined in its
   base #chat-main .calm-revise rule). */
#chat-main .calm-brief2--reply .calm-source-listen,
#chat-main .calm-brief2--reply .calm-body-listen,
#chat-main .calm-brief2--reply .calm-revise {
  min-height: 36px;
  padding: 6px 14px;
  gap: 8px;
}

/* Icon wrapper inside the source listen button: ChatTTS swaps THIS span's innerHTML
   for the play/pause icon during read-aloud, leaving the "Hør beskeden" label span
   beside it untouched. */
#chat-main .calm-brief2--reply .calm-listen-ico {
  display: inline-flex;
  align-items: center;
}

/* The Fra select also stays neutral on focus so the reply card does not draw a
   green active outline around clicked fields. */
#chat-main .calm-brief2--reply .calm-letter--from:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: rgba(228, 220, 212, 0.7);
}

/* Dark-mode equivalents (paired, reply-scoped). The reply-scoped light hexes above
   out-specify the base dark .calm-source/.calm-letter rules, so without these the
   near-white surfaces would paint a bright slab on the dark card. Values mirror the
   existing non-reply dark rules verbatim, so dark mode looks unchanged. */
html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-source {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-letter {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-letter--from {
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A89B91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-sig-preview {
  color: var(--color-text-secondary, #A89B91);
}

/* ── #3147: dark-safe "Fra" sender picker ──────────────────────────────────────
   The native <select> option popup is OS/browser-controlled and renders a white,
   low-contrast menu in dark mode (and appearance:none leaks a tiled native chevron).
   We keep the native <select.calm-from-native> as the send source of truth but hide
   it visually (still focusable for keyboard + tests) and paint a custom trigger +
   role=listbox panel we fully control. The single inline-SVG chevron on the trigger
   avoids the background-image tiling trap entirely. */
#chat-main .calm-brief2--reply .calm-from-control {
  position: relative;
}

/* Hide the native select without removing it from the layout focus order or making
   it un-targetable by tests (clip, not display:none — so .value get/set + keyboard
   focus still work). Same specificity as .calm-letter--from, placed later so it wins. */
#chat-main .calm-brief2--reply .calm-from-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#chat-main .calm-brief2--reply .calm-from-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--warm-text, #3D3028);
  background-color: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}

#chat-main .calm-brief2--reply .calm-from-trigger:hover {
  border-color: rgba(110, 138, 126, 0.4);
}

#chat-main .calm-brief2--reply .calm-from-trigger__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-main .calm-brief2--reply .calm-from-trigger--placeholder .calm-from-trigger__label {
  color: var(--warm-text-light, #8C7B6F);
}

#chat-main .calm-brief2--reply .calm-from-trigger__chevron {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #8C7B6F;
  transition: transform 160ms ease;
}

#chat-main .calm-brief2--reply .calm-from-trigger.is-open .calm-from-trigger__chevron {
  transform: rotate(180deg);
}

/* Keyboard focus lands on the hidden native select; keep the visible trigger
   neutral instead of surfacing a green active outline. */
#chat-main .calm-brief2--reply .calm-from-native:focus-visible ~ .calm-from-trigger {
  outline: none;
  box-shadow: none;
  border-color: rgba(228, 220, 212, 0.75);
}

/* The listbox panel is portaled to <body> (position set by JS), so it is NOT scoped
   under #chat-main — the class name is unique to this picker. */
.calm-from-panel {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(58, 47, 38, 0.12), 0 2px 6px rgba(58, 47, 38, 0.06);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.calm-from-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.calm-from-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #3D3028;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 100ms ease;
}

.calm-from-row__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calm-from-row__check {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #4A7A68;
  visibility: hidden;
}

.calm-from-row--selected {
  background: rgba(110, 138, 126, 0.12);
  color: #4A7A68;
}

.calm-from-row--selected .calm-from-row__check {
  visibility: visible;
}

.calm-from-row--focused,
.calm-from-row:hover {
  background: rgba(154, 142, 130, 0.12);
}

.calm-from-row--selected.calm-from-row--focused,
.calm-from-row--selected:hover {
  background: rgba(110, 138, 126, 0.16);
}

.calm-from-row--disabled {
  opacity: 0.55;
  cursor: default;
}

.calm-from-row--disabled:hover {
  background: transparent;
}

/* Dark mode: a fully controlled dark panel (no white native popup) + readable rows,
   mirroring the proven Email calm-account-select dark palette. */
html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger:hover {
  border-color: rgba(110, 138, 126, 0.45);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger__chevron {
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-trigger--placeholder .calm-from-trigger__label {
  color: var(--color-text-secondary, #A89B91);
}

html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-from-native:focus-visible ~ .calm-from-trigger {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .calm-from-panel {
  background: #2B2A27;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .calm-from-row {
  color: var(--color-text-primary, #FAF5EF);
}

html[data-theme="dark"] .calm-from-row--focused,
html[data-theme="dark"] .calm-from-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .calm-from-row--disabled:hover {
  background: transparent;
}

html[data-theme="dark"] .calm-from-row--selected {
  background: rgba(110, 138, 126, 0.22);
  color: #8FBFAE;
}

html[data-theme="dark"] .calm-from-row--selected.calm-from-row--focused,
html[data-theme="dark"] .calm-from-row--selected:hover {
  background: rgba(110, 138, 126, 0.28);
}

html[data-theme="dark"] .calm-from-row__check {
  color: #8FBFAE;
}

@media (prefers-reduced-motion: reduce) {
  .calm-from-panel {
    transform: none;
    transition: opacity 140ms ease;
  }
  #chat-main .calm-brief2--reply .calm-from-trigger__chevron {
    transition: none;
  }
}

/* The reply-card title stays light-on-dark in dark mode. The #3045 dark fix only
   covered the all-done card; without this the reply title inherits the light-mode
   #3A2F26 brown and reads as a low-contrast dark-on-dark heading. */
html[data-theme="dark"] #chat-main .calm-brief2--reply .sofia-signal-title,
html[data-theme="dark"] #chat-main .calm-brief2--reply .calm-title {
  color: #FAF5EF;
}

/* While the dock is open the active card gets a faint sage hairline (no ring, no
   layout shift — only the border colour changes). */
#chat-main .sofia-signal--active.calm-brief2.cvm-card-active {
  border-color: rgba(110, 138, 126, 0.30);
}

/* ===========================================================================
   MORGENOVERBLIK COVER (.morgen-card) — the app's calm default cover: time-of-day
   sky masthead + the few things that matter + "Se hele din uge". Ported
   BYTE-FOR-BYTE from the app chat-ny-blod-bolge.css (the "Din uge morgenoverblik
   (Mockup A)" block L6829-7116 + its dark-mode block L8009-8076 @ app HEAD), so
   the card is 100% the app's graphic. The demo holds this cover and the reply
   card and toggles via data-calm-stage (see the stage rules at the bottom).
   The old "Vigtigt i dag" flower cover (calm-brief2--today) was REPLACED by this
   on 2026-07-06 — the app's logged-in /chat/ no longer fronts the flower card.
   =========================================================================== */
/* ── Din uge morgenoverblik (Mockup A) + full Din uge view ──
   The calm "Ro i indbakken" flower card grows into the few things that matter. The card
   reuses the .calm-brief2 shell (warm #FFFEFB, light in both modes) but zeroes its padding
   so the gradient masthead runs edge-to-edge. */
#chat-main .sofia-signal--active.calm-brief2.morgen-card { padding: 0; }
#chat-main .morgen-head { position: relative; }
#chat-main .morgen-sky { display: block; width: 100%; height: auto; }
@keyframes morgenFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes morgenGlowIn { from { opacity: 0; } to { opacity: 1; } }
#chat-main .morgen-sky { animation: morgenFadeIn 0.5s ease-out both; }
#chat-main .morgen-sky .morgen-glow { animation: morgenGlowIn 0.8s ease-out 0.28s both; }
/* morgensky-dark bloom: on the dark card the glow is the brightest element, so finish it WITH the scene settle (not 0.58s later) — dark only, light timing untouched. */
html[data-theme="dark"] #chat-main .morgen-sky .morgen-glow { animation-duration: 0.6s; animation-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  #chat-main .morgen-sky, #chat-main .morgen-sky .morgen-glow { animation: none; }
}
#chat-main .morgen-body { padding: 10px 18px 12px; }
#chat-main .morgen-list { margin: 0 -10px; }
#chat-main .morgen-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  width: 100%;
  padding: 13px 10px;
  border-radius: 10px;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
}
/* Reply row = a clickable open-button (icon + sender + summary) + a per-item speaker on the right,
   so the user opens OR listens to just that item. Replaces the single full-width reply button. */
#chat-main .morgen-item--reply,
#chat-main .morgen-item--task,
#chat-main .morgen-item--cal { padding: 0; gap: 4px; align-items: center; border-radius: 12px; }
/* #4804 4-expert hover critique: the REPLY row is ONE hover surface — a single warm wash + a subtle
   1px lift (not two split buttons with a warm/green seam + dead gap). The open-button + speaker stay
   transparent; the speaker resolves by darkening its glyph only, never a competing green plate. */
/* Apple-tier hover critique: the warm cream read as a yellow plate (muddy under the sunset) and the
   lift had no shadow, so it looked like a glitch. Now a near-invisible warm tint + a real soft 2-layer
   shadow makes the row cleanly LIFT off a clean field; the press settles the lift back down (not a
   mid-air shrink); calmer 180ms bloom. */
/* The calm tint + soft shadow + 1px lift applies to BOTH rows (Morten: the task row "Løb i dag" felt
   dead — only the reply responded). cursor:pointer + the press-settle stay on the reply ONLY (its whole
   body opens the mail); the task body is not a click target (its actions are the check + listen), so its
   cursor stays neutral — the lift reads as "row active, controls live", not a false "click the body". */
#chat-main .morgen-item { position: relative; z-index: 0; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(.2, .6, .2, 1); }
#chat-main .morgen-item--reply { cursor: pointer; }
#chat-main .morgen-item:hover { background: #FBF8F3; box-shadow: 0 1px 2px rgba(58, 47, 38, .05), 0 2px 6px rgba(58, 47, 38, .06); transform: translateY(-1px); z-index: 1; }
#chat-main .morgen-item--reply:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(58, 47, 38, .05); transition-duration: 0.09s; }
#chat-main .morgen-item-open,
#chat-main .morgen-item-static {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 8px 13px 10px; border-radius: 12px;
  text-align: left; background: transparent; border: 0; font: inherit; color: inherit;
}
#chat-main .morgen-item-open { cursor: pointer; }
#chat-main .morgen-item-open:focus-visible { outline: 2px solid #6E8A7E; outline-offset: -2px; }
/* #deep-qa: a sub-less task is ONE line — center the check, title and speaker on that line (and drop the
   +2px the check carries to bias toward the title cap in the two-line case) so nothing hangs high. */
#chat-main .morgen-item--single { align-items: center; }
#chat-main .morgen-item--single .morgen-item-static { align-items: center; }
#chat-main .morgen-item--single .task-check { margin-top: 0; }
/* The calendar appointment is one line: the type icon carries a +5px bias for the two-line reply, so zero
   it here to center the icon on the single line (same posture as .task-check above). #deep-qa. */
#chat-main .morgen-item--single .morgen-typeicon { margin-top: 0; }
#chat-main .morgen-item-speak {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: 2px; border-radius: 10px;
  background: transparent; border: 0; color: #9A8E82; cursor: pointer;
  transition: color 0.14s ease-out, transform 0.06s ease-out;
}
/* 38px button → ≥44px hit area (inset -3px) so the listen control clears the touch-target minimum. */
#chat-main .morgen-item-speak::before { content: ""; position: absolute; inset: -3px; }
#chat-main .morgen-item-speak:hover { color: #5C4D43; }
#chat-main .morgen-item-speak:active { transform: scale(0.92); }
#chat-main .morgen-item-speak:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }
/* #4804 flow critique: the per-row speaker is "controls on demand" — hidden at rest on hover-capable
   devices, revealed when you hover/focus that row. On touch (no hover) it stays visible (otherwise
   it'd be unreachable). The resting card is then just meaning: type icon + headline + summary. */
@media (hover: hover) {
  #chat-main .morgen-item-speak { opacity: 0; transition: opacity 0.15s ease, color 0.14s ease-out, transform 0.06s ease-out; }
  #chat-main .morgen-item:hover .morgen-item-speak,
  #chat-main .morgen-item:focus-within .morgen-item-speak,
  #chat-main .morgen-item-speak:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #chat-main .morgen-item:hover, #chat-main .morgen-item--reply:active, #chat-main .morgen-item-speak:active { transform: none; }
}
#chat-main .morgen-item-speak [data-calm-lyt-ico] { display: inline-flex; align-items: center; }
#chat-main .morgen-item-speak [data-calm-lyt-ico] svg { display: block; width: 18px; height: 18px; }
/* "Åbn i kalenderen" (calendar rows): a second on-demand control — an <a> to /kalender/?event=<id>
   next to the speaker. It CARRIES .morgen-item-speak, so box, palette, hover-reveal (the
   @media (hover:hover) block above), focus ring and dark mode all come from the speaker's rules;
   only the anchor's own defaults need neutralizing + its bare svg sized like the speaker's. */
#chat-main a.morgen-item-goto { text-decoration: none; }
#chat-main .morgen-item-goto svg { display: block; width: 18px; height: 18px; }
/* The ±3px hit-halo would overlap the speaker's by 2px across the 4px gap (two adjacent 38px controls)
   — a right-edge tap on the goto could fire the speaker. Trim ONLY the speaker-facing side to 0;
   top/bottom/left keep the full 44px reach. */
#chat-main .morgen-item-goto::before { inset: -3px 0 -3px -3px; }
/* Task-check: the job's interactive checkbox (tap to complete it in kalender). Sits where the type
   icon does; calm sage, fills with a tick on done, then the row fades out. */
/* margin-top 2px (NOT -1) so the check's rendered center (2 + 12 = 14px) matches the envelope's
   (5 + 9 = 14px) — same optical center, biased to the title cap, not the two-line block. Do not
   "tidy" these to equal margins: the boxes are different sizes (24 vs 18). */
#chat-main .task-check { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6E8A7E; cursor: pointer; transition: color 0.15s, transform 0.15s; }
/* 24px glyph, but a ≥44px invisible hit area (inset -10px) — it's the one control that mutates data
   (completes a task), so it earns a full touch target without moving the icon. */
#chat-main .task-check::before { content: ""; position: absolute; inset: -10px; }
#chat-main .task-check:hover:not(:disabled) { color: #4A7A68; }
#chat-main .task-check:disabled { cursor: default; opacity: 0.5; }
#chat-main .task-check:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 2px; }
#chat-main .task-check-ico { display: inline-flex; }
#chat-main .task-check-ico svg { display: block; width: 18px; height: 18px; }
/* The "done" tick overshoots and settles (spring) — a small, satisfying confirmation beat. */
#chat-main .task-check--done { color: #5F8D6E; transform: scale(1.05); transition: color 0.15s, transform 0.22s cubic-bezier(.34, 1.4, .64, 1); }
#chat-main .morgen-item--leaving { opacity: 0; transition: opacity 0.4s ease; }
/* Full Din uge view: items are flush, so the open/static part owns the padding, wrapper stays zero. */
#chat-main .dinuge-view .morgen-item--reply,
#chat-main .dinuge-view .morgen-item--task { padding: 0; }
#chat-main .dinuge-view .morgen-item-open,
#chat-main .dinuge-view .morgen-item-static { padding: 12px 8px 12px 0; }
/* The envelope is a passive TYPE indicator, not an action — warm gray, so sage stays reserved for
   actions (speaker/check/chevron). 18px to match the icon family; optically centered on the title. */
/* width matches the 24px task-check so the title column lines up whether the leading slot is a type icon
   (reply/calendar) or a check (task) — the 18px icon stays 18px, centred in the 24px slot. #deep-qa
   (Morten: "Mød med søster" sat 6px right of the calendar item). */
#chat-main .morgen-typeicon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 18px; margin-top: 5px; flex: 0 0 auto; color: #9A8E82; }
#chat-main .morgen-typeicon svg { width: 18px; height: 18px; display: block; }
#chat-main .morgen-item-body { display: block; min-width: 0; }
#chat-main .morgen-item-title { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: #3A2F26; line-height: 1.4; overflow-wrap: anywhere; }
#chat-main .morgen-item-sub { display: block; font-size: var(--font-size-sm); color: #756D5F; line-height: 1.5; margin-top: 2px; }
/* Purpose-built "all clear" empty state (4-expert UI critique #4804): a centered DARK reassurance (the
   hero) over a small, quiet week link — no divider, no icon row, no collapsed footer, generous air. */
#chat-main .morgen-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 22px 24px; text-align: center; }
#chat-main .morgen-empty-text { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: #3A2F26; line-height: 1.4; }
#chat-main .morgen-empty .morgen-see { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: 2px 2px; }
/* The 5s "Færdig · Fortryd" row after completing a task (undo window). */
#chat-main .morgen-done { display: flex; align-items: center; gap: 10px; padding: 13px 10px; }
#chat-main .morgen-done-ico { display: inline-flex; align-items: center; color: #5F8D6E; flex: 0 0 auto; }
#chat-main .morgen-done-ico svg { width: 20px; height: 20px; display: block; }
#chat-main .morgen-done-text { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-base); color: #9A8E82; text-decoration: line-through; }
#chat-main .morgen-undo { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: #5F8D6E; font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: 4px 7px; border-radius: 8px; transition: color 0.14s ease, background 0.14s ease; }
#chat-main .morgen-undo:hover { color: #4A7A68; background: #FBF8F3; }
#chat-main .morgen-undo:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }
#chat-main .morgen-div { height: 1px; background: #F0ECE3; margin: 0 10px; }
#chat-main .morgen-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 4px; }
#chat-main .morgen-see {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 0; padding: 4px 2px;
  color: #5F8D6E; font: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
  cursor: pointer; border-radius: 8px;
}
#chat-main .morgen-see:hover { color: #4A7A68; }
#chat-main .morgen-chev { flex: 0 0 auto; }
#chat-main .morgen-lyt {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 4px 6px;
  color: #7E7668; font: inherit; font-size: var(--font-size-sm); cursor: pointer; border-radius: 8px;
}
#chat-main .morgen-lyt:hover { color: #5C4D43; }
/* Lyt icon vertically centered with its label (the icon span carries the swapped TTS icon) */
#chat-main .morgen-lyt [data-calm-lyt-ico],
#chat-main .dinuge-lyt [data-calm-lyt-ico] { display: inline-flex; align-items: center; }
#chat-main .morgen-lyt [data-calm-lyt-ico] svg,
#chat-main .dinuge-lyt [data-calm-lyt-ico] svg { display: block; }
#chat-main .morgen-see:focus-visible,
#chat-main .morgen-lyt:focus-visible,
#chat-main .dinuge-back:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }

#chat-main .sofia-signal--active.calm-brief2.dinuge-view { padding: 20px 22px 22px; }
#chat-main .dinuge-back {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; padding: 2px; margin: 0 0 12px;
  color: #7B7365; font: inherit; font-size: var(--font-size-sm); cursor: pointer; border-radius: 6px;
  transition: color 0.14s ease;
}
#chat-main .dinuge-back:hover { color: #5C4D43; }
/* The left chevron eases -2px on hover — a quiet "going back" nudge that matches the house motion. */
#chat-main .dinuge-back svg { transition: transform 0.18s cubic-bezier(.2, .6, .2, 1); }
#chat-main .dinuge-back:hover svg { transform: translateX(-2px); }
#chat-main .dinuge-h.sofia-signal-title { margin: 0 0 16px; }
#chat-main .dinuge-list { margin: 0 0 8px; }
#chat-main .dinuge-view .morgen-item { padding: 12px 0; border-radius: 0; }
#chat-main .dinuge-view .morgen-div { margin: 0; }
/* In the week view the rows are full-bleed + square (border-radius:0), so the inherited translateY lift
   + drop-shadow painted a shadow on a square edge (a "slipping plank"). Here the hover is tint-only with
   a soft inset radius — a calm list-row highlight; the row's action is the check, not the whole row. */
#chat-main .dinuge-view .morgen-item:hover { transform: none; box-shadow: none; background: #FBF8F3; border-radius: 10px; }
#chat-main .dinuge-empty { font-size: var(--font-size-base); color: #8C8A80; margin: 4px 0 8px; }
/* Section labels are now <h3>: same warm sage, AA-legible (#557E68, 4.6:1 — the old #6E9A82 was 3.15:1
   AND a 4th off-green); --first sits flush under the H2 (the H2's 16px gap does the spacing). */
#chat-main .dinuge-label { font-size: var(--font-size-sm); color: #557E68; font-weight: var(--font-weight-medium); margin: 24px 0 8px; }
#chat-main .dinuge-label--first { margin-top: 0; }
#chat-main .dinuge-cal { width: 100%; border-collapse: collapse; }
#chat-main .dinuge-cal td { padding: 12px 0; border-bottom: 1px solid #F0ECE3; vertical-align: top; font-size: var(--font-size-base); transition: background 0.14s ease; }
#chat-main .dinuge-cal tr:last-child td { border-bottom: 0; }
#chat-main .dinuge-cal tr:hover td { background: #FBF8F3; }
/* Round the hover band's ends so a calendar row hovers like a morgenoverblik card (12px), not a flat
   full-width strip (Morten: "more rounded, looks a bit better — do same across"). */
#chat-main .dinuge-cal tr:hover td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
#chat-main .dinuge-cal tr:hover td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
#chat-main .dinuge-cal-day { color: #57564F; font-weight: var(--font-weight-medium); width: 84px; }
#chat-main .dinuge-cal-time { color: #7B7365; width: 56px; }
#chat-main .dinuge-cal-ev { color: #3A2F26; }
#chat-main .dinuge-cal-town { color: #7B7365; }
#chat-main .dinuge-cal-more { font-size: var(--font-size-sm); color: #7B7365; margin: 8px 0 0; }
/* Per-row Lyt for the week calendar — mirrors .morgen-item-speak so strong-dyslexia users can HEAR each
   appointment (Morten). Hidden at rest on hover devices, revealed on row hover/focus; on touch (no hover)
   it stays visible. The spoken text (with the natural "klokken 9" time) is prebuilt in data-speak. */
#chat-main .dinuge-cal-lyt-cell { width: 1%; white-space: nowrap; text-align: right; vertical-align: middle; padding-left: 6px; }
#chat-main .dinuge-cal-lyt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; background: transparent; border: 0;
  color: #9A8E82; cursor: pointer; transition: color 0.14s ease-out, transform 0.06s ease-out;
}
#chat-main .dinuge-cal-lyt::before { content: ""; position: absolute; inset: -6px; } /* ≥44px touch target */
#chat-main .dinuge-cal-lyt:hover { color: #5C4D43; }
#chat-main .dinuge-cal-lyt:active { transform: scale(0.92); }
#chat-main .dinuge-cal-lyt:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 1px; }
#chat-main .dinuge-cal-lyt [data-calm-lyt-ico] { display: inline-flex; align-items: center; }
@media (hover: hover) {
  #chat-main .dinuge-cal-lyt { opacity: 0; transition: opacity 0.15s ease, color 0.14s ease-out, transform 0.06s ease-out; }
  #chat-main .dinuge-cal tr:hover .dinuge-cal-lyt,
  #chat-main .dinuge-cal tr:focus-within .dinuge-cal-lyt,
  #chat-main .dinuge-cal-lyt:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #chat-main .dinuge-cal-lyt:active { transform: none; }
}
#chat-main .dinuge-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
/* Both pills carry a 1px border so they're the SAME height (send had border:0 → 41px, lyt 1px → 43px;
   the 2px wobble snagged the eye). The primary Send pill now uses the house motion (0.18s cubic lift +
   soft shadow + press-settle) instead of a flat 0.15s linear colour swap; the --done state never lifts. */
#chat-main .dinuge-send {
  display: inline-flex; align-items: center; gap: 8px;
  background: #DCE9D5; color: #3D6A4D; border: 1px solid transparent; border-radius: 999px;
  padding: 11px 22px; font: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
  cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(.2, .6, .2, 1);
}
#chat-main .dinuge-send:hover:not(.dinuge-send--done) { background: #D2E3C9; box-shadow: 0 1px 2px rgba(58, 47, 38, .05), 0 2px 6px rgba(58, 47, 38, .06); transform: translateY(-1px); }
#chat-main .dinuge-send:active:not(.dinuge-send--done) { transform: translateY(0); box-shadow: 0 1px 2px rgba(58, 47, 38, .05); transition-duration: 0.09s; }
#chat-main .dinuge-send:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 2px; }
#chat-main .dinuge-send--done { background: #CCE0C3; cursor: default; }
#chat-main .dinuge-lyt {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; color: #5F6B5E; border: 1px solid #ECE8DC; border-radius: 999px;
  padding: 11px 20px; font: inherit; font-size: var(--font-size-base); cursor: pointer; transition: background 0.18s ease, transform 0.09s ease;
}
#chat-main .dinuge-lyt:hover { background: #FBFAF6; }
#chat-main .dinuge-lyt:active { transform: translateY(0.5px); }
#chat-main .dinuge-lyt:focus-visible { outline: 2px solid #6E8A7E; outline-offset: 2px; }
/* #deep-qa: a clear, calm PLAYING state for the calm Lyt buttons (Morten: dinuge-lyt had no animation/
   pause). ChatTTS swaps the icon to the two pause-bars (TTS_ICONS.playing) + adds .tts-playing /
   .tts-paused / .loading to the icon span. The icon itself goes sage + its two bars animate as a gentle
   equalizer ("it's reading aloud"), and on pause it becomes the resume ▶. These are DESCENDANT selectors
   on the icon span (reliable) — we deliberately do NOT tint the whole pill via :has(), because :has()
   ancestor styling computes stale when a descendant's class is toggled dynamically (verified live). */
/* One size for EVERY state of a calm speaker icon — rest (MORGEN_VOL), loading, playing (pause-bars),
   default — so a used speaker doesn't shrink/grow when chat-tts swaps the SVG (their width attrs differ:
   16 vs 13). #deep-qa (Morten: "the speaker changes"). */
#chat-main [data-calm-lyt-ico] svg { width: 18px; height: 18px; }
#chat-main [data-calm-lyt-ico].tts-playing,
#chat-main [data-calm-lyt-ico].tts-paused,
#chat-main [data-calm-lyt-ico].loading { color: #4A6157; }
#chat-main [data-calm-lyt-ico].tts-playing svg rect {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: calmLytEq 0.85s ease-in-out infinite;
}
#chat-main [data-calm-lyt-ico].tts-playing svg rect:nth-of-type(2) { animation-delay: 0.32s; }
@keyframes calmLytEq { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
/* Reduced motion: drop the transforms (pill lift/press, back-chevron nudge, check overshoot) + the
   equalizer, but keep the colour/state cues — same posture as the overview's reduced-motion rule. */
@media (prefers-reduced-motion: reduce) {
  #chat-main .dinuge-send:hover:not(.dinuge-send--done),
  #chat-main .dinuge-send:active:not(.dinuge-send--done),
  #chat-main .dinuge-lyt:active,
  #chat-main .dinuge-back:hover svg,
  #chat-main .task-check--done { transform: none; }
  #chat-main [data-calm-lyt-ico].tts-playing svg rect { animation: none; }
}

/* ── Dark mode for the morgenoverblik + "Se hele din uge" views (the calm-brief2 .morgen-card).
   In dark mode the shared --white/--cream tokens flip to dark surfaces (#232220 card on #1c1b18
   page), so this brief is a DARK card like the reply/done/today briefs. The morgen and dinuge
   redesign only shipped light-mode colours, so its text rendered dark-on-dark. These overrides
   complete the same dark-card + light-text pattern the sibling briefs already use: text→light,
   dividers→hairline white, sage accents→a readable dark-mode sage (#A8C5B8, matches .card-dot--sage).
   #chat-darkmode-brief ── */
/* Overview (compact) */
html[data-theme="dark"] #chat-main .morgen-item-title { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .morgen-item-sub { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .morgen-empty-text { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .morgen-typeicon { color: rgba(200, 190, 178, 0.62); }
html[data-theme="dark"] #chat-main .morgen-item-speak { color: rgba(200, 190, 178, 0.62); }
html[data-theme="dark"] #chat-main .morgen-item-speak:hover { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .morgen-div { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #chat-main .morgen-item:hover { background: rgba(255, 255, 255, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.22); }
html[data-theme="dark"] #chat-main .morgen-item--reply:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
html[data-theme="dark"] #chat-main .task-check { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .task-check:hover:not(:disabled) { color: #C2D6CC; }
html[data-theme="dark"] #chat-main .task-check--done { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-done-ico { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-done-text { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .morgen-undo { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-undo:hover { color: #C2D6CC; background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] #chat-main .morgen-see { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .morgen-see:hover { color: #C2D6CC; }
html[data-theme="dark"] #chat-main .morgen-lyt { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .morgen-lyt:hover { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .morgen-item-open:focus-visible,
html[data-theme="dark"] #chat-main .morgen-item-speak:focus-visible,
html[data-theme="dark"] #chat-main .task-check:focus-visible,
html[data-theme="dark"] #chat-main .morgen-undo:focus-visible,
html[data-theme="dark"] #chat-main .morgen-see:focus-visible,
html[data-theme="dark"] #chat-main .morgen-lyt:focus-visible { outline-color: #A8C5B8; }
/* Se hele din uge (full week) */
html[data-theme="dark"] #chat-main .dinuge-empty { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .dinuge-label { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .dinuge-view .dinuge-h.sofia-signal-title { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .dinuge-cal td { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #chat-main .dinuge-cal tr:hover td { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] #chat-main .dinuge-cal-day { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .dinuge-cal-time,
html[data-theme="dark"] #chat-main .dinuge-cal-town,
html[data-theme="dark"] #chat-main .dinuge-cal-more { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .dinuge-cal-ev { color: #FAF5EF; }
html[data-theme="dark"] #chat-main .dinuge-cal-lyt { color: rgba(200, 190, 178, 0.62); }
html[data-theme="dark"] #chat-main .dinuge-cal-lyt:hover { color: #E8DDD4; }
html[data-theme="dark"] #chat-main .dinuge-back { color: var(--color-text-secondary, #A89B91); }
html[data-theme="dark"] #chat-main .dinuge-back:hover { color: #E8DDD4; }
/* Week-view rows are full-bleed + square, so keep the hover FLAT in dark too (the light rule sets
   box-shadow:none; the generic dark .morgen-item:hover above would otherwise re-add the "slipping
   plank" shadow — higher specificity, no dinuge override). #chat-darkmode-brief */
html[data-theme="dark"] #chat-main .dinuge-view .morgen-item:hover { box-shadow: none; }
/* Primary "Send til email" pill — soft sage fill (mirrors the light soft-green pill) */
html[data-theme="dark"] #chat-main .dinuge-send { background: rgba(168, 197, 184, 0.16); color: #C7DDD1; }
html[data-theme="dark"] #chat-main .dinuge-send:hover:not(.dinuge-send--done) { background: rgba(168, 197, 184, 0.24); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.22); }
html[data-theme="dark"] #chat-main .dinuge-send:active:not(.dinuge-send--done) { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
html[data-theme="dark"] #chat-main .dinuge-send--done { background: rgba(168, 197, 184, 0.12); }
/* Secondary "Lyt" pill */
html[data-theme="dark"] #chat-main .dinuge-lyt { background: rgba(255, 255, 255, 0.05); color: var(--color-text-secondary, #A89B91); border-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] #chat-main .dinuge-lyt:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #chat-main [data-calm-lyt-ico].tts-playing,
html[data-theme="dark"] #chat-main [data-calm-lyt-ico].tts-paused,
html[data-theme="dark"] #chat-main [data-calm-lyt-ico].loading { color: #A8C5B8; }
html[data-theme="dark"] #chat-main .dinuge-cal-lyt:focus-visible,
html[data-theme="dark"] #chat-main .dinuge-send:focus-visible,
html[data-theme="dark"] #chat-main .dinuge-lyt:focus-visible { outline-color: #A8C5B8; }

/* Demo stage toggle — NOT in the app (the app's renderSignal returns ONE card at a
   time). The static demo holds both the cover (.morgen-card) and the reply card
   (calm-brief2--reply) in #sofia-signal-panel; show exactly one per stage, mirroring
   the app's cover -> reply flow. sofia-demo.js flips data-calm-stage when the reply
   row is opened (data-calm-see-draft) and back on close/skip. */
#sofia-signal-panel[data-calm-stage="cover"] .calm-brief2--reply { display: none; }
#sofia-signal-panel[data-calm-stage="reply"] .morgen-card { display: none; }

/* ==== source: chat/css/chat-tts-highlight.css ==== */
/* Approved amber active-line TTS highlight (#2760) */

.chat-message.received.ss-reading-active {
  background-color: transparent !important;
  background-image: none !important;
}

.chat-bubble.chat-tts-block-playing {
  background-color: transparent !important;
  background-image: none !important;
}

.chat-message.received .chat-tts-active-block {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 2px 8px !important;
  margin-inline-start: -8px !important;
  background-color: rgba(232, 168, 110, 0.18) !important;
  background-image: none !important;
  border-radius: 5px !important;
  box-shadow: inset 3px 0 0 rgba(212, 130, 60, 0.55) !important;
  transition:
    background-color 140ms ease,
    box-shadow       140ms ease !important;
}

.chat-message.received li.chat-tts-active-block {
  display: list-item !important;
  width: auto !important;
  max-width: 100% !important;
  margin-inline-start: 0 !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
}

@media (prefers-reduced-motion: reduce) {
  .chat-message.received .chat-tts-active-block {
    transition: none !important;
  }
}

/* ==== source: chat/css/chat-print.css ==== */
@media print {
  .app-sidebar, #chat-input-area, .chat-input, .chat-plus-menu,
  .blod-bolge-overlay, .chat-header-actions, .voice-overlay,
  #ss-scroll-bottom-fab, .sofia-sidebar, .chat-conv-header,
  .onboarding-overlay, .bb-mobile-nav,
  .chat-category-chips, .chat-msg-actions,
  .skip-link, #chat-profile {
    display: none !important;
  }

  #chat-messages {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .chat-message-bubble {
    break-inside: avoid;
  }

  body, html {
    height: auto !important;
    overflow: visible !important;
  }

  #chat-conversation-panel {
    overflow: visible !important;
    height: auto !important;
  }

  #chat-app, .chat-main, .chat-body {
    height: auto !important;
    overflow: visible !important;
  }

  /* ── Dark-mode print reset ──
     Force light backgrounds and dark text so print output is always readable. */
  html[data-theme="dark"] {
    --cream: #FAF7F3 !important;
    --white: #FFFEFB !important;
    --warm-text: #5C4D43 !important;
    --warm-text-light: #8A7E72 !important;
    --color-bg: #FAFAF8 !important;
    --color-bg-rgb: 250, 250, 248 !important;
    --color-card: #ffffff !important;
    --color-text: #384551 !important;
    --color-text-primary: #384551 !important;
    --color-text-secondary: #646e78 !important;
    --color-border: #e4e6e8 !important;
    color-scheme: light !important;
  }

  /* Beat the :has(#chat-app) dark rule in chat-ny-blod-bolge.css (higher specificity) */
  html[data-theme="dark"]:has(#chat-app) {
    --color-bg: #FAFAF8 !important;
    --color-bg-rgb: 250, 250, 248 !important;
    --app-dark-canvas: #FAFAF8 !important;
    background: #FAFAF8 !important;
  }

  [data-theme="dark"] body,
  [data-theme="dark"] body.chat-ny-in-conversation,
  [data-theme="dark"] .app,
  [data-theme="dark"] body.chat-ny-in-conversation .app {
    background: #FFFEFB !important;
    color: #5C4D43 !important;
  }

  [data-theme="dark"] .app::before {
    display: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-header {
    background: linear-gradient(to bottom,
      #FFFEFB 0%,
      #FFFEFB 72%,
      rgba(255, 254, 251, 0.82) 88%,
      rgba(255, 254, 251, 0) 100%) !important;
    color: #384551 !important;
  }

  [data-theme="dark"] .card,
  [data-theme="dark"] .input-card,
  [data-theme="dark"] .chat-input-box,
  [data-theme="dark"] .chat-prompt-item,
  [data-theme="dark"] .chat-bubble-file-chip,
  [data-theme="dark"] .chat-code-block {
    background: #ffffff !important;
    border-color: #e4e6e8 !important;
    color: #384551 !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.received .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.assistant .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message--assistant .chat-bubble,
  [data-theme="dark"] .chat-message.received .chat-bubble {
    color: #384551 !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.sent .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message.user .chat-bubble,
  [data-theme="dark"] body.chat-ny-in-conversation .chat-message--user .chat-bubble,
  [data-theme="dark"].v-voksen .chat-message.sent .chat-bubble {
    background: rgb(239, 238, 235) !important;
    color: #384551 !important;
  }

  [data-theme="dark"] body.chat-ny-in-conversation .chat-message-time,
  [data-theme="dark"] .chat-message-time {
    color: #8A7E72 !important;
  }

  [data-theme="dark"] .chat-message.sent .chat-bubble code,
  [data-theme="dark"].v-voksen .chat-message.sent .chat-bubble code {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgb(141, 37, 37) !important;
  }

  [data-theme="dark"] .chat-message.received .chat-bubble code {
    background: rgba(0, 0, 0, 0.05) !important;
  }
}

/* ==== source: chat/css/kalender-card.css ==== */
/* Kalender dashboard card — compact date tiles (#1576, #1602) */

.card--calendar .card-body {
  display: block;
  padding: 16px 20px;
}

.card--calendar .cal-event {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0;
  min-width: 0;
}

.card--calendar .cal-date {
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 5px;
  gap: 1px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(92, 77, 67, 0.10);
  border-radius: 9px;
  box-shadow: 0 1px 0 rgba(92, 77, 67, 0.03);
}

.card--calendar .cal-date__day {
  font-family: var(--font-family);
  font-size: var(--cal-tile-day-size, 17px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  letter-spacing: 0;
  color: #3a2f27;
  padding: 0;
  margin: 0;
}

.card--calendar .cal-date__month {
  font-family: var(--font-family);
  font-size: var(--cal-tile-month-size, 10px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  color: rgba(92, 77, 67, 0.65);
  padding: 0;
  margin: 0;
}

.card--calendar .cal-date--stack {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 9px;
  padding: 4px 0 5px;
  align-self: start;
  margin-top: 0;
}

.card--calendar .cal-date__count {
  font-family: var(--font-family);
  margin-top: 2px;
  font-size: var(--cal-count-size, 10.5px);
  color: #9A8E82;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
}

.card--calendar .cal-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.card--calendar .cal-title {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--warm-text, #5C4D43);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card--calendar .cal-sub {
  font-size: var(--cal-sub-size, 12.5px);
  line-height: 1.2;
  opacity: 0.75;
}

.card--calendar .cal-rel {
  font-family: var(--font-family);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--card-meta-neutral, rgba(92, 77, 67, 0.62));
  line-height: 1.3;
}

/* Urgency tints on relative chip */
.card--calendar .card-body[data-urgency="overdue"] .cal-rel {
  color: var(--rose-dark-strong, #8E5546);
  font-weight: var(--font-weight-semibold, 600);
}

.card--calendar .card-body[data-urgency="today"] .cal-event:first-child .cal-rel {
  color: var(--rose-dark-strong, #8E5546);
  font-weight: var(--font-weight-semibold, 600);
}

.card--calendar .cal-event:not(:last-child) {
  margin-bottom: 12px;
}

.card--calendar .cal-divider + .cal-event {
  margin-top: 12px;
}

.card--calendar .cal-divider {
  height: 1px;
  background: rgba(92, 77, 67, 0.08);
  margin: 2px 0;
}

/* Same-day stack list */
.card--calendar .cal-stack-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.card--calendar .cal-stack-list__item {
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 10px;
  align-items: baseline;
  padding: 0;
  margin: 0;
  line-height: 1.35;
}

.card--calendar .cal-stack-list__item:nth-child(n+3):not(.cal-stack-list__more) {
  display: none;
}

.card--calendar .cal-stack-list__time {
  color: #9A8E82;
  font-size: var(--cal-stack-time-size, 11.5px);
  font-weight: var(--font-weight-medium, 500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card--calendar .cal-stack-list__title {
  color: #3A2F26;
  font-size: var(--cal-stack-title-size, 13px);
  font-weight: var(--font-weight-medium, 500);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card--calendar .cal-stack-list__more {
  display: block;
  font-size: var(--cal-stack-time-size, 11.5px);
  color: #9A8E82;
  padding-inline-start: 78px;
  min-height: 24px;
  line-height: 24px;
  font-style: italic;
}

.card--calendar .cal-stack-list__more:hover {
  color: #4A7A68;
}

/* Dark mode */
html[data-theme="dark"] .card--calendar .cal-date {
  background: rgba(58, 47, 39, 0.35);
  border-color: rgba(232, 221, 212, 0.10);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .card--calendar .cal-date--stack {
  background: rgba(58, 47, 39, 0.35);
}

html[data-theme="dark"] .card--calendar .cal-date__day {
  color: #E8DDD4;
}

html[data-theme="dark"] .card--calendar .cal-date__month {
  color: rgba(200, 190, 178, 0.75);
}

html[data-theme="dark"] .card--calendar .cal-date__count {
  color: #A89E92;
}

html[data-theme="dark"] .card--calendar .cal-title {
  color: #E8DDD4;
}

html[data-theme="dark"] .card--calendar .cal-rel {
  color: var(--slate, #A8B0C4);
}

html[data-theme="dark"] .card--calendar .card-body[data-urgency="overdue"] .cal-rel {
  color: var(--rose, #D4A89A);
}

html[data-theme="dark"] .card--calendar .card-body[data-urgency="today"] .cal-event:first-child .cal-rel {
  color: var(--rose, #D4A89A);
}

html[data-theme="dark"] .card--calendar .cal-divider {
  background: rgba(168, 176, 196, 0.10);
}

html[data-theme="dark"] .card--calendar .cal-stack-list__item {
  color: #C8BEB2;
}

html[data-theme="dark"] .card--calendar .cal-stack-list__time {
  color: #A89E92;
}

html[data-theme="dark"] .card--calendar .cal-stack-list__title {
  color: #E8DDD4;
}

html[data-theme="dark"] .card--calendar .cal-stack-list__more {
  color: #8A8478;
}

/* ==== source: chat/css/chat-pdf-reader.css ==== */
/* 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;
  }
}


/* 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-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; }
}

/* Fase A chip-gate (Mortens ordre 19/7): læser åben ⇒ ingen skrive-chips og
   ingen proaktiv kalender-scan i den smalle kolonne — rækker mountet FØR
   åbningen skjules her og vender tilbage ved luk (JS-gaten i chat-tone-chips
   stopper NYE mounts). Funktionelle accept-kort (brugerens egne anmodninger)
   berøres bevidst IKKE. PDF-dokken (fase B/C) ejer læser-fladen. */
body.ss-pdf-reader-open .ss-tonechips,
body.ss-pdf-reader-open .ss-embed-card-calendar_scan { display: none; }

/* ==== source: chat/css/calm/calm-prompt-shell.css ==== */
/* Calm sage overlay — card shell and list-mode rows.
   Loads after chat-ny-blod-bolge.css, before calm header/body/footer. */

/* ---- Card envelope: neutral canvas for both modes ---- */
.calm-prompt-new-category,
.calm-prompt-list-mode {
  background: #FFFEFB !important;
  border: 1px solid rgba(58, 47, 38, 0.06) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(58, 47, 38, 0.04),
    0 1px 2px rgba(58, 47, 38, 0.04),
    0 12px 32px -8px rgba(58, 47, 38, 0.12) !important;
  padding: 4px !important;
  overflow: hidden !important;
}

[data-theme="dark"] .calm-prompt-new-category,
[data-theme="dark"] .calm-prompt-list-mode {
  background: var(--color-card, #1c1b18) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 12px 32px -8px rgba(0, 0, 0, 0.30) !important;
}

/* ---- Calm neutral base — keep subtle data-color accent on header icon ---- */
.calm-prompt-list-mode[data-color] {
  background: #FFFEFB !important;
  border-color: rgba(58, 47, 38, 0.06) !important;
  --calm-cat-color: currentColor;
}

[data-theme="dark"] .calm-prompt-list-mode[data-color] {
  background: var(--color-card, #1c1b18) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ---- Warm canon category color remap ---- */
.calm-prompt-list-mode[data-color="gray"]   { --calm-cat-color: #9A8E82; }
.calm-prompt-list-mode[data-color="red"]    { --calm-cat-color: #A6594B; }
.calm-prompt-list-mode[data-color="orange"] { --calm-cat-color: #C97C4F; }
.calm-prompt-list-mode[data-color="yellow"] { --calm-cat-color: #B8924A; }
.calm-prompt-list-mode[data-color="green"]  { --calm-cat-color: #6E8A7E; }
.calm-prompt-list-mode[data-color="blue"]   { --calm-cat-color: #5C7A8A; }
.calm-prompt-list-mode[data-color="purple"] { --calm-cat-color: #8A6E8A; }
.calm-prompt-list-mode[data-color="pink"]   { --calm-cat-color: #B07A8A; }
.calm-prompt-list-mode[data-color="sage"]   { --calm-cat-color: #4A7A68; }
.calm-prompt-list-mode[data-color="moss"]   { --calm-cat-color: #8FA593; }
.calm-prompt-list-mode[data-color="clay"]   { --calm-cat-color: #8C5A47; }
.calm-prompt-list-mode[data-color="sand"]   { --calm-cat-color: #C9B68A; }
.calm-prompt-list-mode[data-color="anchor"] { --calm-cat-color: #3A2F26; }
.calm-prompt-list-mode[data-color="plum"]   { --calm-cat-color: #6E4A5C; }

/* Custom hex data-color: --calm-cat-color set by bootstrap JS inline style */

/* ---- List-mode card sizing ---- */
.calm-prompt-list-mode {
  max-width: 640px !important;
  width: 100% !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}

/* ---- Prompt list cards ---- */
.calm-prompt-list-mode .chat-prompt-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 14px 18px;
}

@media (max-width: 600px) {
  .calm-prompt-list-mode .chat-prompt-list {
    grid-template-columns: 1fr;
  }
}

.calm-prompt-list-mode .chat-prompt-item {
  margin: 0;
  display: flex;
  min-width: 0;
  height: 48px;
  background: #FFFEFB;
  border: 1px solid rgba(58, 47, 38, 0.10);
  border-radius: 14px;
  /* !important holds the fixed-card geometry against the legacy blod-bolge
     mobile rule (.chat-prompt-panel .chat-prompt-item @max-width:767px injects
     padding:12px 14px !important, which otherwise shrinks the 48px card and
     pushes the suggestion button ~9px below the hairline on mobile). */
  padding: 0 !important;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.calm-prompt-list-mode .chat-prompt-item:hover {
  background: #FBFAF7;
  border-color: rgba(58, 47, 38, 0.10);
}

/* High-specificity override (#3175): the legacy chat-ny hover/focus wash in
   chat-ny-blod-bolge.css (`body:not(.chat-ny-in-conversation) .chat-prompt-panel
   .chat-prompt-list .chat-prompt-item:hover/:focus-within { border-color:
   transparent !important }`, specificity (0,5,1)) otherwise dissolves the card
   hairline exactly while the user interacts with the row. The .chat-prompt-list
   form below is (0,6,1) and beats it on specificity; the shorter
   .calm-prompt-list-mode .chat-prompt-item form is (0,5,1) and wins the !important
   tie by source order (this partial loads AFTER chat-ny-blod-bolge.css — locked by
   the calm-shell load-order contract). Either way the resting rgba(58,47,38,0.10)
   hairline is pinned with !important, so hover AND focus-within keep a stable,
   visible border instead of flickering to transparent. Background stays
   non-important so the legacy calm wash is unchanged. */
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-list .chat-prompt-item:hover,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-list .chat-prompt-item:focus-within,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-item:hover,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-item:focus-within {
  background: #FBFAF7;
  border-color: rgba(58, 47, 38, 0.10) !important;
}

.calm-prompt-list-mode .chat-prompt-item:last-child {
  margin-bottom: 0;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item:hover,
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item:focus-within {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-list .chat-prompt-item:hover,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-list .chat-prompt-item:focus-within,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-item:hover,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-item:focus-within {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Suggestion button in list cards ---- */
.calm-prompt-list-mode .chat-prompt-suggestion-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* !important so the blod-bolge mobile rule (.chat-prompt-suggestion-btn
     @max-width:767px: padding 12px 16px !important + min-height 44px !important)
     cannot reshape the in-card button on small screens. */
  padding: 11px 12px !important;
  color: #3A2F26;
  font-weight: 500;
  background: transparent;
  border: none;
}

.calm-prompt-list-mode .chat-prompt-suggestion-btn::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(110, 138, 126, 0.12)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%236E8A7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"/><path d="M9 13h6M9 17h4"/></svg>') center/15px no-repeat;
}

.calm-prompt-list-mode .chat-prompt-suggestion-btn > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calm-prompt-list-mode .chat-prompt-suggestion-btn:hover {
  background: transparent;
  color: #3A2F26;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-suggestion-btn {
  color: rgba(255, 254, 251, 0.92) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-suggestion-btn:hover {
  color: rgba(255, 254, 251, 0.92) !important;
}

/* ---- Suggestion button focus: inset ring ---- */
.calm-prompt-list-mode .chat-prompt-suggestion-btn:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
  border-radius: 8px !important;
}

/* ---- Chevron: visible, muted warm, static ---- */
.calm-prompt-list-mode .chat-prompt-arrow {
  flex: 0 0 auto;
  opacity: 0.45;
  color: #9A8E82 !important;
  transition: none !important;
}

.calm-prompt-list-mode .chat-prompt-item:hover .chat-prompt-arrow {
  opacity: 0.45;
  color: #9A8E82 !important;
  transform: none !important;
}

/* A prompt-row chevron communicates forward navigation. Keep that semantic
   direction in Arabic, including the higher-specificity static hover state. */
[dir="rtl"] .chat-prompt-arrow,
[dir="rtl"] .calm-prompt-list-mode .chat-prompt-item:hover .chat-prompt-arrow {
  transform: scaleX(-1) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-arrow {
  color: rgba(255, 254, 251, 0.35) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item:hover .chat-prompt-arrow {
  color: rgba(255, 254, 251, 0.35) !important;
}

/* ---- Row actions: positioned right of chevron, hidden at rest ---- */
.calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions {
  position: absolute !important;
  inset-inline-end: 38px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
  display: flex !important;
  gap: 2px !important;
}

.calm-prompt-list-mode .chat-prompt-item:hover > .chat-prompt-item-actions,
.calm-prompt-list-mode .chat-prompt-item:focus-within > .chat-prompt-item-actions {
  opacity: 1 !important;
}

/* ---- Edit/delete action buttons ---- */
.calm-prompt-list-mode .chat-prompt-item-edit,
.calm-prompt-list-mode .chat-prompt-item-delete {
  color: #9A8E82 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.calm-prompt-list-mode .chat-prompt-item-edit:hover {
  background: rgba(58, 47, 38, 0.06) !important;
  color: #5C4D43 !important;
}

.calm-prompt-list-mode .chat-prompt-item-delete:hover {
  background: rgba(166, 89, 75, 0.08) !important;
  color: #A6594B !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item-edit,
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item-delete {
  color: rgba(255, 254, 251, 0.40) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item-edit:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 254, 251, 0.85) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item-delete:hover {
  background: rgba(166, 89, 75, 0.16) !important;
  color: #E07B6B !important;
}

/* ---- Delete-confirm row: stable layout with always-visible actions (#3370) ----
   When a prompt row enters delete-confirm state the li gets [data-confirm-active]
   and its content becomes a confirm-text span + No/Yes actions div. Override the
   resting absolute/hidden action positioning to flow inline so the buttons stay
   visible without requiring hover. */
.calm-prompt-list-mode .chat-prompt-item[data-confirm-active] {
  align-items: center !important;
  padding: 0 12px !important;
  gap: 8px !important;
}

.calm-prompt-list-mode .chat-prompt-item[data-confirm-active] > .chat-prompt-delete-confirm {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #5C4D43;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calm-prompt-list-mode .chat-prompt-item[data-confirm-active] > .chat-prompt-item-actions {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  flex: 0 0 auto;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item[data-confirm-active] > .chat-prompt-delete-confirm {
  color: rgba(255, 254, 251, 0.70);
}

/* ---- Edit/delete action button focus ---- */
.calm-prompt-list-mode .chat-prompt-item-edit:focus-visible,
.calm-prompt-list-mode .chat-prompt-item-delete:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
}

/* ---- #3175: legible hover/focus actions over long titles ----
   On hover-capable devices the revealed edit/delete cluster overlays the title.
   Give it an opaque backing (above the title via z-index:2) with a soft left fade
   so a long title ellipsizes cleanly toward the icons instead of bleeding under
   them. Scoped with :has(.chat-prompt-item-edit) so the per-row delete-confirm
   (Nej/Ja) cluster — which reuses .chat-prompt-item-actions — is left untouched.
   Gated to @media (hover: hover): on touch the cluster renders inline (see the
   @media (hover: none) block below) and needs neither backing nor title reserve. */
@media (hover: hover) {
  .calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions:has(.chat-prompt-item-edit) {
    z-index: 2 !important;
    background: rgb(255, 254, 251) !important;
    border-radius: 8px !important;
    padding-inline-start: 6px !important;
    box-shadow: -8px 0 8px rgb(255, 254, 251) !important;
  }

  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions:has(.chat-prompt-item-edit) {
    background: var(--color-card, #1c1b18) !important;
    box-shadow: -8px 0 8px var(--color-card, #1c1b18) !important;
  }

  /* RTL: masken fader mod teksten (inline-start = hoejre) - fysisk skygge pegede off-screen. */
  [dir="rtl"] .calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions:has(.chat-prompt-item-edit) {
    box-shadow: 8px 0 8px rgb(255, 254, 251) !important;
  }
  [dir="rtl"][data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions:has(.chat-prompt-item-edit) {
    box-shadow: 8px 0 8px var(--color-card, #1c1b18) !important;
  }

  .calm-prompt-list-mode .chat-prompt-item:hover .chat-prompt-suggestion-btn > span,
  .calm-prompt-list-mode .chat-prompt-item:focus-within .chat-prompt-suggestion-btn > span {
    padding-inline-end: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---- Empty state: hide prose, keep add row ---- */
.calm-prompt-list-mode .chat-prompt-empty {
  padding: 0 !important;
  margin: 0 !important;
}

.calm-prompt-list-mode .chat-prompt-empty p {
  display: none !important;
}

/* ---- Touch: show actions when hover is unavailable ---- */
@media (hover: none) {
  .calm-prompt-list-mode .chat-prompt-suggestion-btn {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions {
    flex: 0 0 auto;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
  }
  .calm-prompt-list-mode .chat-prompt-arrow {
    display: none !important;
  }
}

/* ---- Full-row tap / focus feedback ---- */
.calm-prompt-list-mode .chat-prompt-item:active {
  background: rgba(228, 220, 212, 0.35) !important;
}
.calm-prompt-list-mode .chat-prompt-item:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
  border-radius: 10px !important;
}
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-item:active {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-list-mode .chat-prompt-list .chat-prompt-item,
  .calm-prompt-list-mode .chat-prompt-item,
  .calm-prompt-list-mode .chat-prompt-arrow,
  .calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions,
  .calm-prompt-list-mode .chat-prompt-item-edit,
  .calm-prompt-list-mode .chat-prompt-item-delete,
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn {
    transition: none !important;
  }

  .calm-prompt-list-mode .chat-prompt-item > .chat-prompt-item-actions {
    transform: translateY(-50%) !important;
  }
}

/* ---- Mobile (bottom-sheet fallback for 641–767px) ---- */
@media (max-width: 767px) and (min-width: 641px) {
  .chat-prompt-panel:has(.calm-prompt-list-mode) {
    bottom: calc(var(--mn-bar-height, 60px) + 8px) !important;
  }

  .calm-prompt-list-mode {
    max-width: none !important;
    width: auto !important;
    max-height: calc(100dvh - var(--mn-bar-height, 60px) - 40px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---- Mobile fullscreen list-mode (<=640px) ---- */
@media (max-width: 640px) {
  .chat-prompt-panel:has(.calm-prompt-list-mode) {
    position: fixed !important;
    inset: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    pointer-events: auto !important;
  }

  .calm-prompt-list-mode {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .chat-prompt-panel-inner.calm-prompt-list-mode {
    margin: 0 !important;
  }

  .calm-prompt-list-mode .chat-prompt-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px !important;
    align-content: start !important;
  }

  .calm-prompt-list-mode .chat-prompt-empty {
    flex: 1 1 auto !important;
  }

  .calm-prompt-list-mode .chat-prompt-arrow {
    display: none !important;
  }

  /* ---- Mobile fullscreen new-category (<=640px) #3628 ---- */
  .chat-prompt-panel:has(.calm-prompt-new-category) {
    position: fixed !important;
    inset: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    pointer-events: auto !important;
  }

  .calm-prompt-new-category {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .chat-prompt-panel-inner.calm-prompt-new-category {
    margin: 0 !important;
  }
}

/* ==== source: chat/css/calm/calm-prompt-header.css ==== */
/* Calm sage overlay — header zone for New Category and list-mode panels.
   Loads after calm-prompt-shell.css. */

/* ---- Header row ---- */
.calm-prompt-new-category .chat-prompt-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 18px 16px !important;
  border-bottom: 1px solid rgba(58, 47, 38, 0.06) !important;
}

/* List-mode header: tighter calm hierarchy, sage icon, visible subtitle (#2993) */
.calm-prompt-list-mode .chat-prompt-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 18px 14px !important;
  border-bottom: 1px solid rgba(58, 47, 38, 0.07) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-panel-header,
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Leading glyph → sage badge ---- */
.calm-prompt-new-category .chat-prompt-panel-header > svg:first-child {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(110, 138, 126, 0.10) !important;
  color: #4A7A68 !important;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* List-mode badge: always sage — category data colors never tint it gold/sand (#2993) */
.calm-prompt-list-mode .chat-prompt-panel-header > svg:first-child {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(110, 138, 126, 0.12) !important;
  color: #6E8A7E !important;
  box-sizing: border-box;
  flex-shrink: 0;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-panel-header > svg:first-child,
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-panel-header > svg:first-child {
  background: rgba(110, 138, 126, 0.16) !important;
  color: #8AAFA1 !important;
}

/* ---- Title/subtitle anchor ---- */
.calm-prompt-new-category .calm-prompt-anchor,
.calm-prompt-list-mode .calm-prompt-anchor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.calm-prompt-new-category .chat-prompt-panel-title,
.calm-prompt-list-mode .chat-prompt-panel-title {
  font-size: 1.3125rem !important;
  font-weight: 650 !important;
  color: #3A2F26 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-panel-title,
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-panel-title {
  color: rgba(255, 254, 251, 0.92) !important;
}

/* ---- List-mode subtitle: hidden (#3586 — header shows only icon + title) ---- */
.calm-prompt-list-mode .calm-prompt-subtitle[data-i18n="calm.listSubtitle"] {
  display: none !important;
}

/* ---- List-mode header icon trigger (#3586) ---- */
.calm-prompt-list-mode .chat-prompt-panel-header > svg[role="button"] {
  cursor: pointer;
  transition: background 0.15s ease;
}
.calm-prompt-list-mode .chat-prompt-panel-header > svg[role="button"]:hover {
  background: rgba(110, 138, 126, 0.2) !important;
}
.calm-prompt-list-mode .chat-prompt-panel-header > svg[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.25);
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-panel-header > svg[role="button"]:hover {
  background: rgba(110, 138, 126, 0.28) !important;
}
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-panel-header > svg[role="button"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(138, 175, 161, 0.30);
}

.calm-prompt-new-category .calm-prompt-subtitle {
  font-size: 0.8125rem;
  color: #9A8E82;
  line-height: 1.4;
  font-weight: 400;
}

[data-theme="dark"] .calm-prompt-new-category .calm-prompt-subtitle {
  color: rgba(255, 254, 251, 0.45);
}

/* ---- Close button: 32px, always visible ---- */
.calm-prompt-new-category .chat-prompt-panel-close,
.calm-prompt-list-mode .chat-prompt-panel-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  color: #9A8E82 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.calm-prompt-new-category .chat-prompt-panel-close:hover,
.calm-prompt-list-mode .chat-prompt-panel-close:hover {
  background: rgba(110, 138, 126, 0.10) !important;
  color: #5C4D43 !important;
}

.calm-prompt-new-category .chat-prompt-panel-close:focus-visible,
.calm-prompt-list-mode .chat-prompt-panel-close:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-panel-close,
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-panel-close {
  color: rgba(255, 254, 251, 0.45) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-panel-close:hover,
[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-panel-close:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 254, 251, 0.75) !important;
}

/* ---- Trash/delete header action: hidden at rest, reveal on header hover/focus ---- */
.calm-prompt-list-mode .chat-prompt-header-action {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  color: #9A8E82 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  opacity: 0 !important;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease !important;
  pointer-events: none;
}

.calm-prompt-list-mode .chat-prompt-panel-header:hover .chat-prompt-header-action,
.calm-prompt-list-mode .chat-prompt-panel-header:focus-within .chat-prompt-header-action {
  opacity: 1 !important;
  pointer-events: auto;
}

.calm-prompt-list-mode .chat-prompt-header-action:hover {
  background: rgba(166, 89, 75, 0.08) !important;
  color: #A6594B !important;
}

.calm-prompt-list-mode .chat-prompt-header-action:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
  opacity: 1 !important;
  pointer-events: auto;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-header-action {
  color: rgba(255, 254, 251, 0.45) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-header-action:hover {
  background: rgba(166, 89, 75, 0.12) !important;
  color: #E07B6B !important;
}

/* ---- Touch: close/trash active feedback ---- */
.calm-prompt-list-mode .chat-prompt-panel-close:active,
.calm-prompt-new-category .chat-prompt-panel-close:active {
  background: rgba(110, 138, 126, 0.16) !important;
}
.calm-prompt-list-mode .chat-prompt-header-action:active {
  background: rgba(166, 89, 75, 0.12) !important;
}

/* ---- Mobile header layout ---- */
@media (max-width: 767px) {
  .calm-prompt-new-category .chat-prompt-panel-header,
  .calm-prompt-list-mode .chat-prompt-panel-header {
    gap: 10px !important;
    padding: 12px 12px 10px !important;
  }

  .calm-prompt-new-category .chat-prompt-panel-title,
  .calm-prompt-list-mode .chat-prompt-panel-title {
    font-size: 1.125rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .calm-prompt-new-category .chat-prompt-panel-close,
  .calm-prompt-list-mode .chat-prompt-panel-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .calm-prompt-list-mode .chat-prompt-header-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* ---- Mobile new-category: hide duplicate header close, clean icon→title→subtitle (#3571) ---- */
@media (max-width: 640px) {
  .calm-prompt-new-category .chat-prompt-panel-close {
    display: none !important;
  }

  .calm-prompt-new-category .chat-prompt-panel-header {
    flex: 0 0 auto !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }

  .calm-prompt-new-category .chat-prompt-panel-header > svg:first-child {
    flex: 0 0 auto;
  }
}

/* ---- Mobile list-mode fullscreen: hide header close (footer Tilbage handles it) (#3576) ---- */
@media (max-width: 640px) {
  .calm-prompt-list-mode .chat-prompt-panel-close {
    display: none !important;
  }

  .calm-prompt-list-mode .chat-prompt-panel-header {
    flex: 0 0 auto !important;
    gap: 12px !important;
    padding: 22px 20px 12px !important;
    border-bottom: 1px solid rgba(58, 47, 38, 0.07) !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-new-category .chat-prompt-panel-close,
  .calm-prompt-list-mode .chat-prompt-panel-close,
  .calm-prompt-list-mode .chat-prompt-header-action {
    transition: none !important;
  }
}

/* ============================================================
   #2995 — Add/Edit prompt form (.calm-prompt-form-mode)
   Scoped hook rendered by calm-prompt-bootstrap.js on the
   #cpf-title / #cpf-text form. Matches the #2993 list-mode
   component family without touching list-mode / new-category
   rules. Envelope lives here (shell.css is owned by #2993).
   ============================================================ */

/* ---- Card envelope: 640px calm footprint (no horizontal sprawl) ---- */
.chat-prompt-panel-inner.calm-prompt-form-mode {
  max-width: 640px !important;
  width: 100% !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
  background: #FFFEFB !important;
  border: 1px solid rgba(58, 47, 38, 0.06) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(58, 47, 38, 0.04),
    0 1px 2px rgba(58, 47, 38, 0.04),
    0 12px 32px -8px rgba(58, 47, 38, 0.12) !important;
  padding: 4px !important;
  overflow: hidden !important;
}

[data-theme="dark"] .chat-prompt-panel-inner.calm-prompt-form-mode {
  background: var(--color-card, #1c1b18) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 12px 32px -8px rgba(0, 0, 0, 0.30) !important;
}

/* ---- Header row: #2993 rhythm ---- */
.calm-prompt-form-mode .chat-prompt-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 18px 14px !important;
  border-bottom: 1px solid rgba(58, 47, 38, 0.07) !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Leading glyph → sage tile (never the category color) ---- */
.calm-prompt-form-mode .chat-prompt-panel-header > svg:first-child,
.calm-prompt-form-mode[data-color] .chat-prompt-panel-header > svg:first-child {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(110, 138, 126, 0.12) !important;
  color: #4A7A68 !important;
  box-sizing: border-box;
  flex-shrink: 0;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-panel-header > svg:first-child {
  background: rgba(110, 138, 126, 0.16) !important;
  color: #8AAFA1 !important;
}

/* ---- Title: warm hero ---- */
.calm-prompt-form-mode .chat-prompt-panel-title {
  font-size: 1.3125rem !important;
  font-weight: 650 !important;
  color: #3A2F26 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-panel-title {
  color: rgba(255, 254, 251, 0.92) !important;
}

/* ---- Close button: 32px, calm hover/focus ---- */
.calm-prompt-form-mode .chat-prompt-panel-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  color: #9A8E82 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.calm-prompt-form-mode .chat-prompt-panel-close:hover {
  background: rgba(110, 138, 126, 0.10) !important;
  color: #5C4D43 !important;
}

.calm-prompt-form-mode .chat-prompt-panel-close:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-panel-close {
  color: rgba(255, 254, 251, 0.45) !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-panel-close:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 254, 251, 0.75) !important;
}

.calm-prompt-form-mode .chat-prompt-panel-close:active {
  background: rgba(110, 138, 126, 0.16) !important;
}

/* ---- Mobile: full-width, scrollable inside the docked panel ---- */
@media (max-width: 767px) {
  .chat-prompt-panel:has(.calm-prompt-form-mode) {
    bottom: calc(var(--mn-bar-height, 60px) + 8px) !important;
  }

  .chat-prompt-panel-inner.calm-prompt-form-mode {
    max-width: none !important;
    width: auto !important;
    max-height: calc(100dvh - var(--mn-bar-height, 60px) - 40px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .calm-prompt-form-mode .chat-prompt-panel-header {
    gap: 10px !important;
    padding: 12px 12px 10px !important;
  }

  .calm-prompt-form-mode .chat-prompt-panel-title {
    font-size: 1.125rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .calm-prompt-form-mode .chat-prompt-panel-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* ---- Mobile fullscreen form-mode with AI dock (#3579) ---- */
@media (max-width: 640px) {
  .chat-prompt-panel.chat-prompt-panel--with-ai-dock:has(.calm-prompt-form-mode) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    margin: 0 !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .chat-prompt-panel-header {
    flex: 0 0 auto !important;
    gap: 12px !important;
    padding: 12px 12px 10px !important;
    border-bottom: 1px solid rgba(58, 47, 38, 0.07) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .chat-prompt-panel-close {
    display: none !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-form-mode .chat-prompt-panel-close {
    transition: none !important;
  }
}

/* ============================================================
   #3016 — Top-level "Ny" action chooser (.calm-prompt-top-actions-mode)
   Compact 2-button picker (Byg med Sofia / Ny kategori) rendered by
   showTopLevelActions() and hooked by calm-prompt-bootstrap.js. Shares the
   #2993/#2995 calm card family but is a deliberately lighter variant: no
   header divider and a 16px chooser-label title. Envelope lives here
   (shell.css is owned by #2993 and pinned). Footer/buttons live in
   calm-prompt-footer.css. .chat-prompt-panel prefixes beat blod-bolge.
   ============================================================ */

/* ---- Card envelope: 640px calm footprint (matches #2995 form-mode) ---- */
.chat-prompt-panel-inner.calm-prompt-top-actions-mode {
  max-width: 640px !important;
  width: 100% !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
  background: #FFFEFB !important;
  border: 1px solid rgba(58, 47, 38, 0.06) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(58, 47, 38, 0.04),
    0 1px 2px rgba(58, 47, 38, 0.04),
    0 12px 32px -8px rgba(58, 47, 38, 0.12) !important;
  padding: 4px !important;
  overflow: hidden !important;
}

[data-theme="dark"] .chat-prompt-panel-inner.calm-prompt-top-actions-mode {
  background: var(--color-card, #1c1b18) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 12px 32px -8px rgba(0, 0, 0, 0.30) !important;
}

/* ---- Header row: calm rhythm, NO divider (lighter than list/form) ---- */
.calm-prompt-top-actions-mode .chat-prompt-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 18px 14px !important;
  border-bottom: none !important;
}

/* ---- Leading glyph → sage tile (PLUS20_SVG, fill: currentColor) ---- */
.calm-prompt-top-actions-mode .chat-prompt-panel-header > svg:first-child {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(110, 138, 126, 0.12) !important;
  color: #4A7A68 !important;
  box-sizing: border-box;
  flex-shrink: 0;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-panel-header > svg:first-child {
  background: rgba(110, 138, 126, 0.16) !important;
  color: #8AAFA1 !important;
}

/* ---- Title: calm 16px/600 chooser label. The id-scoped (2,2,1) selector
   out-specifies the global title-compliance rule (body:has(#chat-app)
   :is(... .chat-prompt-panel-title ...) at 2,1,2 !important → var(--font-size-2xl)
   /semibold). Same proven pattern as the calm builder's #calm-panel-title. ---- */
body:has(#chat-app) .chat-prompt-panel-inner.calm-prompt-top-actions-mode #calm-top-actions-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #3A2F26 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

[data-theme="dark"] body:has(#chat-app) .chat-prompt-panel-inner.calm-prompt-top-actions-mode #calm-top-actions-title {
  color: rgba(255, 254, 251, 0.92) !important;
}

/* Layout (flex/min-width/color) — not governed by the compliance rule; also a
   graceful fallback if the title id is ever absent. */
.calm-prompt-top-actions-mode .chat-prompt-panel-title {
  flex: 1 !important;
  min-width: 0 !important;
  color: #3A2F26 !important;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-panel-title {
  color: rgba(255, 254, 251, 0.92) !important;
}

/* ---- Close button: 32px, calm hover/focus (matches #2995) ---- */
.calm-prompt-top-actions-mode .chat-prompt-panel-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  color: #9A8E82 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.calm-prompt-top-actions-mode .chat-prompt-panel-close:hover {
  background: rgba(110, 138, 126, 0.10) !important;
  color: #5C4D43 !important;
}

.calm-prompt-top-actions-mode .chat-prompt-panel-close:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-panel-close {
  color: rgba(255, 254, 251, 0.45) !important;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-panel-close:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 254, 251, 0.75) !important;
}

.calm-prompt-top-actions-mode .chat-prompt-panel-close:active {
  background: rgba(110, 138, 126, 0.16) !important;
}

/* ---- Mobile: reset the 640px envelope so width:100% + the base 12px side
   margins (blod-bolge mobile panel-inner) cannot overflow at 375/390
   (copies the #2995 form-mode reset). ---- */
@media (max-width: 767px) {
  .chat-prompt-panel:has(.calm-prompt-top-actions-mode) {
    bottom: calc(var(--mn-bar-height, 60px) + 8px) !important;
  }

  .chat-prompt-panel-inner.calm-prompt-top-actions-mode {
    max-width: none !important;
    width: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .calm-prompt-top-actions-mode .chat-prompt-panel-header {
    gap: 10px !important;
    padding: 12px 12px 10px !important;
  }

  .calm-prompt-top-actions-mode .chat-prompt-panel-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-top-actions-mode .chat-prompt-panel-close {
    transition: none !important;
  }
}

/* ==== source: chat/css/calm/calm-prompt-body.css ==== */
/* Calm sage overlay — body zone for New/Edit Category panel.
   Scoped to .calm-prompt-new-category with .chat-prompt-panel prefix
   for specificity to beat blod-bolge dark-mode !important rules.
   #2996: 640px family footprint, calm landmark labels, solid sage selected
   icon tile, and button-level color selection ring with white gap. */

/* ---- Panel footprint: match the approved #2993/#2995 640px family ---- */
.calm-prompt-new-category {
  max-width: 640px !important;
  width: 100% !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}

/* ---- Form zone ---- */
.calm-prompt-new-category .chat-prompt-form {
  padding: 12px 16px 4px !important;
  border-top: none !important;
}

/* ---- Labels: uppercase muted landmarks ---- */
.calm-prompt-new-category .chat-prompt-form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #9A8E82 !important;
  margin-block: 0 10px!important; margin-inline: 2px 0!important;
}

.calm-prompt-new-category .chat-prompt-form-label:not(:first-child) {
  margin-top: 20px !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-label {
  color: rgba(255, 254, 251, 0.45) !important;
}

/* ---- Icon picker grid: 12 columns desktop ---- */
.calm-prompt-new-category .chat-prompt-icon-picker {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 2px 0 12px !important;
  width: 100% !important;
}

/* ---- Icon buttons: light sage tiles ---- */
.calm-prompt-new-category .chat-prompt-icon-btn {
  width: 100% !important;
  max-width: 38px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  justify-self: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(58, 47, 38, 0.10) !important;
  background: #FBF8F2 !important;
  color: #6E8A7E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

.calm-prompt-new-category .chat-prompt-icon-btn:hover {
  background: rgba(110, 138, 126, 0.10) !important;
  border-color: rgba(110, 138, 126, 0.35) !important;
  color: #6E8A7E !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.calm-prompt-new-category .chat-prompt-icon-btn:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: 2px !important;
}

.calm-prompt-new-category .chat-prompt-icon-btn.is-selected,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-icon-btn.is-selected {
  background: #6E8A7E !important;
  border-color: #6E8A7E !important;
  color: #FFFEFB !important;
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.10) !important;
  transform: none !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-icon-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 254, 251, 0.55) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-icon-btn:hover {
  background: rgba(110, 138, 126, 0.16) !important;
  border-color: rgba(110, 138, 126, 0.35) !important;
  color: rgba(255, 254, 251, 0.85) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-icon-btn.is-selected,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-icon-btn.is-selected {
  background: #6E8A7E !important;
  border-color: #6E8A7E !important;
  color: #FFFEFB !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}

/* ---- MORE trigger icon ---- */
.calm-prompt-new-category .chat-prompt-icon-more {
  color: #6E8A7E !important;
  border-style: dashed !important;
}

.calm-prompt-new-category .chat-prompt-icon-more.is-selected {
  border-style: solid !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-icon-more {
  color: #8AAFA1 !important;
}

/* ---- Color picker grid: 16 columns desktop ---- */
.calm-prompt-new-category .chat-prompt-color-picker {
  display: grid !important;
  grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 2px 0 12px !important;
  width: 100% !important;
}

/* ---- Color swatch buttons: ring lives on the button, not the dot ---- */
.calm-prompt-new-category .chat-prompt-color-btn {
  width: 100% !important;
  max-width: 26px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  justify-self: center !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.calm-prompt-new-category .chat-prompt-color-btn:hover {
  transform: translateY(-1px) !important;
}

/* ---- Selected + focused color: button-level sage ring with white gap ---- */
.calm-prompt-new-category .chat-prompt-color-btn:focus-visible,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-color-btn:focus-visible,
.calm-prompt-new-category .chat-prompt-color-btn.is-selected,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-color-btn.is-selected {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFFEFB, 0 0 0 4px #6E8A7E !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-color-btn:focus-visible,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-color-btn:focus-visible,
[data-theme="dark"] .calm-prompt-new-category .chat-prompt-color-btn.is-selected,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-color-btn.is-selected {
  box-shadow: 0 0 0 2px #1E1D1A, 0 0 0 4px #6E8A7E !important;
}

/* ---- Color dot: uniform circle with hairline border (fills preserved) ---- */
.calm-prompt-new-category .chat-prompt-color-dot {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: block !important;
  border: 1px solid rgba(58, 47, 38, 0.10) !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-color-dot {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---- No-color swatch: keep dashed-circle inner glyph ---- */
.calm-prompt-new-category .chat-prompt-color-none {
  border: 2px dashed #9A8E82 !important;
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-color-none {
  border-color: rgba(255, 254, 251, 0.25) !important;
}

/* ---- Custom color tile ---- */
.calm-prompt-new-category .chat-prompt-color-custom {
  position: relative !important;
}

.calm-prompt-new-category .chat-prompt-color-custom-dot {
  background: conic-gradient(from 0deg, #A6594B, #C97C4F, #B8924A, #6E8A7E, #5C7A8A, #8A6E8A, #B07A8A, #A6594B) !important;
  width: 100% !important;
  height: 100% !important;
}

.calm-prompt-new-category .chat-prompt-color-custom[data-calm-custom-color] .chat-prompt-color-custom-dot {
  background: var(--calm-custom-color) !important;
}

.calm-prompt-new-category .chat-prompt-color-native-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
}

/* Remove the old checkmark ::after on button level */
.calm-prompt-new-category .chat-prompt-color-btn.is-selected::after {
  display: none !important;
}

/* ---- Overflow popover ---- */
.calm-icon-overflow-popover {
  position: fixed;
  z-index: 100000;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 16px);
  background: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.60);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(92, 77, 67, 0.12), 0 2px 8px rgba(92, 77, 67, 0.06);
  padding: 12px;
  animation: calm-popover-in 0.15s ease;
}

@keyframes calm-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.calm-icon-overflow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.calm-icon-overflow-popover .chat-prompt-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(58, 47, 38, 0.10);
  background: #FBF8F2;
  color: #6E8A7E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.calm-icon-overflow-popover .chat-prompt-icon-btn:hover {
  background: rgba(110, 138, 126, 0.10);
  border-color: rgba(110, 138, 126, 0.35);
  color: #6E8A7E;
  transform: translateY(-1px);
}

.calm-icon-overflow-popover .chat-prompt-icon-btn.is-selected {
  background: #6E8A7E;
  border-color: #6E8A7E;
  color: #FFFEFB;
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.10);
  transform: none;
}

.calm-icon-overflow-popover .chat-prompt-icon-btn:focus-visible {
  outline: 2px solid #6E8A7E;
  outline-offset: 2px;
}

[data-theme="dark"] .calm-icon-overflow-popover {
  background: #1E1D1A;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .calm-icon-overflow-popover .chat-prompt-icon-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 254, 251, 0.55);
}

[data-theme="dark"] .calm-icon-overflow-popover .chat-prompt-icon-btn:hover {
  background: rgba(110, 138, 126, 0.16);
  border-color: rgba(110, 138, 126, 0.35);
  color: rgba(255, 254, 251, 0.85);
}

[data-theme="dark"] .calm-icon-overflow-popover .chat-prompt-icon-btn.is-selected {
  background: #6E8A7E;
  border-color: #6E8A7E;
  color: #FFFEFB;
}

/* ---- Name input ---- */
.calm-prompt-new-category .chat-prompt-form-input {
  border-radius: 14px !important;
  background: #FBF8F2 !important;
  border: 1px solid rgba(228, 220, 212, 0.60) !important;
  padding: 12px 14px !important;
  color: #3A2F26 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-input {
  background: #FBF8F2 !important;
  border-color: rgba(228, 220, 212, 0.60) !important;
  color: #3A2F26 !important;
}

.calm-prompt-new-category .chat-prompt-form-input:focus,
.calm-prompt-new-category .chat-prompt-form-input:focus-visible,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-input:focus,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-input:focus-visible {
  background: #FFFEFB !important;
  border-color: #6E8A7E !important;
  box-shadow: none !important;
  outline: none !important;
}

body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-input:focus,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-input:focus-visible {
  background: #FFFEFB !important;
  border-color: #6E8A7E !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Agent edit-ring on the prompt fields the AI dock writes (#cpf-title / #cpf-text). The fields'
   own focus rules set box-shadow:none !important (e.g. body:not(.chat-ny-in-conversation)
   .chat-prompt-panel .chat-prompt-form-input:focus, specificity 0,4,1), which would HIDE the sage
   ring whenever the field is focused at confirm time — the voice "ja" path can leave it focused.
   Re-assert the ring (full + fade-out, light + dark) under the field id (1,1,0 / 1,2,0 beats every
   class/attribute :focus rule) so it always shows. Values mirror HL_CSS in ss-dom-operator.js. */
#cpf-title.ss-agent-edited,
#cpf-text.ss-agent-edited {
  box-shadow: 0 0 0 2px rgba(110, 138, 126, 0.62), 0 0 0 5px rgba(110, 138, 126, 0.12) !important;
}
#cpf-title.ss-agent-edited.ss-agent-edited--out,
#cpf-text.ss-agent-edited.ss-agent-edited--out {
  box-shadow: 0 0 0 2px rgba(110, 138, 126, 0), 0 0 0 5px rgba(110, 138, 126, 0) !important;
}
[data-theme="dark"] #cpf-title.ss-agent-edited,
[data-theme="dark"] #cpf-text.ss-agent-edited {
  box-shadow: 0 0 0 2px rgba(166, 203, 187, 0.65), 0 0 0 5px rgba(166, 203, 187, 0.14) !important;
}
[data-theme="dark"] #cpf-title.ss-agent-edited.ss-agent-edited--out,
[data-theme="dark"] #cpf-text.ss-agent-edited.ss-agent-edited--out {
  box-shadow: 0 0 0 2px rgba(166, 203, 187, 0), 0 0 0 5px rgba(166, 203, 187, 0) !important;
}

.calm-prompt-new-category .chat-prompt-form-input::placeholder {
  color: #9A8E82 !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 254, 251, 0.92) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-input:focus,
[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-input:focus-visible,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-input:focus,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-input:focus-visible {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(110, 138, 126, 0.50) !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-input:focus,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-input:focus-visible {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(110, 138, 126, 0.50) !important;
  box-shadow: none !important;
}

/* ---- Dark mode input base: beat blod-bolge panel-inner scoped rules ---- */
[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-input,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-input,
[data-theme="dark"] .chat-prompt-panel-inner.calm-prompt-new-category .chat-prompt-form-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 254, 251, 0.92) !important;
}

[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 254, 251, 0.92) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-input::placeholder {
  color: rgba(255, 254, 251, 0.35) !important;
}

/* ============================================================
   #3586 — Category icon picker popover (.calm-cat-icon-popover)
   Opened from the list-mode header icon trigger. Compact 4×2
   grid with approved Phosphor icons.
   ============================================================ */
.calm-cat-icon-popover {
  position: fixed;
  z-index: 10000;
  width: 204px;
  padding: 12px;
  background: rgb(255, 254, 251);
  border: 1px solid rgba(58, 47, 38, 0.12);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(58, 47, 38, 0.16), 0 2px 6px rgba(58, 47, 38, 0.06);
  animation: calm-popover-in 0.15s ease;
}
.calm-cat-icon-popover[hidden] { display: none; }
.calm-cat-icon-pop-title {
  margin: 0 2px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13px;
  color: rgb(122, 110, 98);
}
.calm-cat-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.calm-cat-icon-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgb(122, 110, 98);
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.calm-cat-icon-opt:hover {
  background: rgba(58, 47, 38, 0.05);
  color: rgb(92, 77, 67);
}
.calm-cat-icon-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.25);
}
.calm-cat-icon-opt.is-active {
  background: rgba(110, 138, 126, 0.12);
  color: rgb(74, 122, 104);
  border-color: rgba(110, 138, 126, 0.4);
}
.calm-cat-icon-opt svg { width: 22px; height: 22px; fill: currentColor; }

[data-theme="dark"] .calm-cat-icon-popover {
  background: #1E1D1A;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .calm-cat-icon-pop-title {
  color: rgba(255, 254, 251, 0.55);
}
[data-theme="dark"] .calm-cat-icon-opt {
  color: rgba(255, 254, 251, 0.55);
}
[data-theme="dark"] .calm-cat-icon-opt:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 254, 251, 0.80);
}
[data-theme="dark"] .calm-cat-icon-opt.is-active {
  background: rgba(110, 138, 126, 0.18);
  color: #8AAFA1;
  border-color: rgba(110, 138, 126, 0.45);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-new-category .chat-prompt-icon-btn,
  .calm-prompt-new-category .chat-prompt-color-btn,
  .calm-prompt-new-category .chat-prompt-color-dot,
  .calm-prompt-new-category .chat-prompt-form-input {
    transition: none !important;
  }

  .calm-prompt-new-category .chat-prompt-icon-btn:hover,
  .calm-prompt-new-category .chat-prompt-color-btn:hover {
    transform: none !important;
  }

  .calm-icon-overflow-popover {
    animation: none !important;
  }

  .calm-icon-overflow-popover .chat-prompt-icon-btn {
    transition: none !important;
  }

  .calm-icon-overflow-popover .chat-prompt-icon-btn:hover {
    transform: none !important;
  }

  .calm-cat-icon-popover {
    animation: none !important;
  }

  .calm-cat-icon-opt {
    transition: none !important;
  }
}

/* ---- Mobile: 6 icon columns, 8 color columns ---- */
@media (max-width: 720px) {
  .calm-prompt-new-category .chat-prompt-icon-picker {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .calm-prompt-new-category .chat-prompt-color-picker {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  /* Keep tiles light: override the global 48px touch-target rule
     (min-width/min-height:48px !important) so the picker stays calm and
     the swatch/tile sizes match desktop instead of inflating. */
  .chat-prompt-panel .calm-prompt-new-category .chat-prompt-icon-btn,
  .chat-prompt-panel .calm-prompt-new-category .chat-prompt-color-btn {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 767px) and (min-width: 641px) {
  .chat-prompt-panel:has(.calm-prompt-new-category) {
    bottom: calc(var(--mn-bar-height, 60px) + 8px) !important;
  }

  .calm-prompt-new-category {
    max-width: none !important;
    width: auto !important;
    margin-inline-start: 12px !important;
    margin-inline-end: 12px !important;
    max-height: calc(100dvh - var(--mn-bar-height, 60px) - 40px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---- Mobile fullscreen new-category form scroll region (<=640px) #3628 ---- */
@media (max-width: 640px) {
  .calm-prompt-new-category .chat-prompt-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 18px 0 !important;
  }
}

/* ============================================================
   #2995 — Add/Edit prompt form body (.calm-prompt-form-mode)
   Calm field cards + per-field dictation mic. Scoped to the
   form hook so other prompt panels are untouched.
   ============================================================ */

/* ---- Form zone: clean prompt-editor rhythm ---- */
.calm-prompt-form-mode .chat-prompt-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 10px 18px 0 !important;
  margin-top: 8px !important;
  border-top: none !important;
}

/* ---- Labels: readable field labels, not loud uppercase landmarks ---- */
.calm-prompt-form-mode .chat-prompt-form-label {
  font-size: 0.90625rem !important; /* 14.5px */
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #5C4D43 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  padding-inline-start: 2px !important;
  display: block !important;
}

.calm-prompt-form-mode .chat-prompt-form-label:first-child {
  margin-top: 0 !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-label {
  color: rgba(255, 254, 251, 0.78) !important;
}

/* ---- #3519: tighten label-to-field pair inside the flat flex form ---- */
.calm-prompt-form-mode .chat-prompt-form-label + .calm-field-wrap {
  margin-top: -15px !important;
}

.calm-prompt-form-mode .calm-field-wrap + .chat-prompt-form-label {
  margin-top: 6px !important;
}

/* ---- Field wrapper: anchors the per-field mic ---- */
.calm-prompt-form-mode .calm-field-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ---- Warm-white field cards ---- */
.calm-prompt-form-mode .chat-prompt-form-input,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-input,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-input {
  width: 100% !important;
  border-radius: 12px !important;
  background: #FFFEFB !important;
  border: 1px solid rgba(58, 47, 38, 0.12) !important;
  /* right padding reserves space so the mic never covers typed text */
  padding-block: 12px!important; padding-inline: 14px 46px!important;
  font-size: 0.90625rem !important; /* 14.5px */
  color: #3A2F26 !important;
  transition: border-color 0.15s ease !important;
}

/* ---- Textarea: taller, top-anchored mic clearance ---- */
.calm-prompt-form-mode .calm-field-wrap--textarea .chat-prompt-form-textarea,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-textarea {
  min-height: 132px !important;
  max-height: min(42vh, 360px) !important;
  overflow-y: auto !important;
  resize: vertical !important;
  padding-inline-end: 46px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 138, 126, 0.32) transparent;
  scrollbar-gutter: stable;
}

.calm-prompt-form-mode .chat-prompt-form-textarea::-webkit-scrollbar {
  width: 6px;
}

.calm-prompt-form-mode .chat-prompt-form-textarea::-webkit-scrollbar-track {
  background: transparent;
}

.calm-prompt-form-mode .chat-prompt-form-textarea::-webkit-scrollbar-thumb {
  background: rgba(110, 138, 126, 0.30);
  border-radius: 999px;
}

.calm-prompt-form-mode .chat-prompt-form-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 138, 126, 0.42);
}

.calm-prompt-form-mode .chat-prompt-form-input:hover,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-input:hover,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-input:hover {
  border-color: rgba(58, 47, 38, 0.20) !important;
}

/* ---- Focus: quiet warm border, no glow ---- */
.calm-prompt-form-mode .chat-prompt-form-input:focus,
.calm-prompt-form-mode .chat-prompt-form-input:focus-visible,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-input:focus,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-input:focus-visible,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-input:focus,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-input:focus-visible {
  background: #FFFEFB !important;
  border-color: rgba(58, 47, 38, 0.32) !important;
  box-shadow: none !important;
  outline: none !important;
}

.calm-prompt-form-mode .chat-prompt-form-input::placeholder {
  color: #9A8E82 !important;
}

/* ---- Dark mode fields ---- */
[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-input,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-input,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 254, 251, 0.92) !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-input:focus,
[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-input:focus-visible,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-input:focus,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-input:focus-visible {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 254, 251, 0.32) !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-input::placeholder {
  color: rgba(255, 254, 251, 0.35) !important;
}

/* ---- Per-field dictation mic: 32×32, top-right, sage wash ----
   #3380 follow-up: the prompt-form mic reuses the /chat/ CVM Scribe affordance
   (cvm-mic ss-mic). Shared STT (button:) owns .ss-mic--connecting / --listening /
   --error + ARIA. These rules override the base .cvm-mic in chat-ny-blod-bolge.css
   to fit inside the field wrapper at a compact 32px. */
.calm-prompt-form-mode .calm-field-wrap--textarea .cvm-mic {
  inset-inline-end: 20px !important;
}

.calm-prompt-form-mode .cvm-mic {
  position: absolute !important;
  top: 7px !important;
  inset-inline-end: 8px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 9px !important;
  background: rgba(110, 138, 126, 0.12) !important;
  color: #4A7A68 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

.calm-prompt-form-mode .cvm-mic svg {
  width: 16px !important;
  height: 16px !important;
}

.calm-prompt-form-mode .cvm-mic:hover {
  background: rgba(110, 138, 126, 0.20) !important;
  color: #4A7A68 !important;
}

.calm-prompt-form-mode .cvm-mic:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: 2px !important;
}

/* ---- Connecting: muted sage wash ---- */
.calm-prompt-form-mode .cvm-mic.ss-mic--connecting {
  background: rgba(110, 138, 126, 0.18) !important;
  color: #5F7A6F !important;
}

/* ---- Listening: subtle sage border pulse (shared CVM visual language) ---- */
.calm-prompt-form-mode .cvm-mic.ss-mic--listening {
  background: rgba(110, 138, 126, 0.12) !important;
  color: #4A6B5C !important;
  box-shadow: inset 0 0 0 1.5px rgba(110, 138, 126, 0.45) !important;
  animation: cvmMicPulse 2s ease-in-out infinite !important;
}

/* ---- Error: warm rust wash ---- */
.calm-prompt-form-mode .cvm-mic.ss-mic--error {
  background: rgba(194, 96, 63, 0.12) !important;
  color: #C2603F !important;
}

/* ---- Speech unsupported: no mic → reclaim the reserved padding ----
   Must out-specify the body:not(...) field padding rule above. */
.calm-prompt-form-mode .calm-field-wrap--no-stt .chat-prompt-form-input,
.chat-prompt-panel .calm-prompt-form-mode .calm-field-wrap--no-stt .chat-prompt-form-input,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap--no-stt .chat-prompt-form-input {
  padding-inline: 14px !important;
}

[data-theme="dark"] .calm-prompt-form-mode .cvm-mic {
  background: rgba(110, 138, 126, 0.20) !important;
  color: #8AAFA1 !important;
}

[data-theme="dark"] .calm-prompt-form-mode .cvm-mic:hover {
  background: rgba(110, 138, 126, 0.30) !important;
  color: #A9C6BA !important;
}

[data-theme="dark"] .calm-prompt-form-mode .cvm-mic.ss-mic--connecting {
  background: rgba(125, 156, 142, 0.22) !important;
  color: #B7CDC1 !important;
}

[data-theme="dark"] .calm-prompt-form-mode .cvm-mic.ss-mic--listening {
  background: rgba(125, 156, 142, 0.14) !important;
  color: #B7CDC1 !important;
  box-shadow: inset 0 0 0 1.5px rgba(183, 205, 193, 0.40) !important;
}

[data-theme="dark"] .calm-prompt-form-mode .cvm-mic.ss-mic--error {
  background: rgba(225, 161, 132, 0.14) !important;
  color: #E1A184 !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-form-mode .chat-prompt-form-input,
  .calm-prompt-form-mode .cvm-mic {
    transition: none !important;
  }

  .calm-prompt-form-mode .cvm-mic.ss-mic--listening {
    animation: none !important;
  }
}

/* ---- Mobile: bigger tap target, keep mic clear of text ---- */
@media (max-width: 767px) {
  .calm-prompt-form-mode .chat-prompt-form {
    padding: 10px 14px 0 !important;
  }

  .calm-prompt-form-mode .cvm-mic {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
  }

  /* High specificity so the larger mobile mic clearance actually beats the
     (0,5,1) base field padding rule above. */
  body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-input {
    padding-inline-end: 50px !important;
  }
}

/* ---- Mobile fullscreen form-mode with AI dock (#3579) ---- */
@media (max-width: 640px) {
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .chat-prompt-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-top: 0 !important;
    padding: 10px 14px 14px !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .calm-field-wrap--textarea .cvm-mic {
    inset-inline-end: 8px !important;
  }
}

/* dir=auto belongs to the text, while the per-field mic belongs to the UI root.
   Keep the physical mic clearance tied to the root even when the field resolves
   to the opposite direction. These closure rules intentionally follow every
   desktop/mobile base rule so mixed-direction text cannot move the reserve. */
html[dir="ltr"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-title.chat-prompt-form-input[dir="auto"],
html[dir="ltr"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-text.chat-prompt-form-input[dir="auto"] {
  padding: 12px 46px 12px 14px !important;
}

html[dir="rtl"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-title.chat-prompt-form-input[dir="auto"],
html[dir="rtl"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-text.chat-prompt-form-input[dir="auto"] {
  padding: 12px 14px 12px 46px !important;
}

html .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap--no-stt > #cpf-title.chat-prompt-form-input[dir="auto"],
html .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap--no-stt > #cpf-text.chat-prompt-form-input[dir="auto"] {
  padding: 12px 14px !important;
}

@media (max-width: 767px) {
  html[dir="ltr"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-title.chat-prompt-form-input[dir="auto"],
  html[dir="ltr"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-text.chat-prompt-form-input[dir="auto"] {
    padding: 12px 50px 12px 14px !important;
  }

  html[dir="rtl"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-title.chat-prompt-form-input[dir="auto"],
  html[dir="rtl"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap:not(.calm-field-wrap--no-stt) > #cpf-text.chat-prompt-form-input[dir="auto"] {
    padding: 12px 14px 12px 50px !important;
  }

  html .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap--no-stt > #cpf-title.chat-prompt-form-input[dir="auto"],
  html .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .calm-field-wrap--no-stt > #cpf-text.chat-prompt-form-input[dir="auto"] {
    padding: 12px 14px !important;
  }
}

/* ==== source: chat/css/calm/calm-prompt-footer.css ==== */
/* Calm sage overlay — footer zone for New Category panel.
   Scoped to .calm-prompt-new-category with .chat-prompt-panel prefix
   for specificity to beat blod-bolge !important rules. */

/* ---- Action row with top divider ---- */
.calm-prompt-new-category .chat-prompt-form-actions {
  border-top: 1px solid rgba(228, 220, 212, 0.55) !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  padding-bottom: 4px !important;
  gap: 10px !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-actions {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Shared button base ---- */
.calm-prompt-new-category .chat-prompt-form-cancel,
.calm-prompt-new-category .chat-prompt-form-save {
  height: 44px !important;
  border-radius: 14px !important;
  padding: 0 22px !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  font-family: var(--font-family) !important;
  transition: all 0.15s ease !important;
}

/* ---- Annuller — ghost warm-neutral ---- */
.calm-prompt-new-category .chat-prompt-form-cancel {
  background: transparent !important;
  color: #5C4D43 !important;
  border: 1px solid rgba(228, 220, 212, 0.55) !important;
}

.calm-prompt-new-category .chat-prompt-form-cancel:hover {
  background: rgba(92, 77, 67, 0.04) !important;
  border-color: rgba(228, 220, 212, 0.70) !important;
  color: #3A2F26 !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-cancel,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-cancel {
  color: rgba(255, 254, 251, 0.60) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-cancel:hover,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-cancel:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 254, 251, 0.80) !important;
}

/* ---- Opret — sage primary ---- */
.calm-prompt-new-category .chat-prompt-form-save,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-save {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(110, 138, 126, 0.25) !important;
  filter: none !important;
}

body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-save {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(110, 138, 126, 0.25) !important;
  filter: none !important;
}

.calm-prompt-new-category .chat-prompt-form-save:hover,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-save:hover {
  background: #4A7A68 !important;
  box-shadow: 0 6px 18px rgba(74, 122, 104, 0.35) !important;
  transform: scale(1.02) !important;
  filter: none !important;
}

body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-save:hover {
  background: #4A7A68 !important;
  box-shadow: 0 6px 18px rgba(74, 122, 104, 0.35) !important;
  filter: none !important;
}

.calm-prompt-new-category .chat-prompt-form-save:active,
.chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-save:active {
  transform: scale(0.97) !important;
  box-shadow: 0 2px 6px rgba(110, 138, 126, 0.20) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-save,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-save {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30) !important;
}

[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-save {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30) !important;
}

[data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-save:hover,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form-save:hover {
  background: #8AAFA1 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40) !important;
}

[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-new-category .chat-prompt-form .chat-prompt-form-save:hover {
  background: #8AAFA1 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40) !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-new-category .chat-prompt-form-cancel,
  .calm-prompt-new-category .chat-prompt-form-save {
    transition: none !important;
  }

  .calm-prompt-new-category .chat-prompt-form-save:hover {
    transform: none !important;
  }

  .calm-prompt-new-category .chat-prompt-form-save:active {
    transform: none !important;
  }
}

/* ============================================================
   #2995 — Add/Edit prompt form footer (.calm-prompt-form-mode)
   No redundant divider; sage Gem primary; quiet Annuller
   secondary. .chat-prompt-panel / body:not(...) prefixes beat
   the blod-bolge rose-dark !important rules.
   ============================================================ */

/* ---- Action row: list-screen family divider ---- */
.calm-prompt-form-mode .chat-prompt-form-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  border-top: 1px solid rgba(58, 47, 38, 0.08) !important;
  margin-top: 4px !important;
  padding: 16px 18px 18px !important;
  gap: 10px !important;
}

/* ---- Shared button base ---- */
.calm-prompt-form-mode .chat-prompt-form-cancel,
.calm-prompt-form-mode .chat-prompt-form-save {
  height: 46px !important;
  border-radius: 12px !important;
  padding: 0 22px !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  font-family: var(--font-family) !important;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Keep Gem motion scoped to visual affordances; never transition all. */
.calm-prompt-form-mode .chat-prompt-form-save {
  min-width: 100px !important;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
}

/* ---- Annuller — quiet outlined secondary ---- */
.calm-prompt-form-mode .chat-prompt-form-cancel {
  background: transparent !important;
  color: #5C4D43 !important;
  border: 1px solid rgba(228, 220, 212, 0.55) !important;
  box-shadow: none !important;
}

.calm-prompt-form-mode .chat-prompt-form-actions > button:first-child {
  height: 46px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

.calm-prompt-form-mode .chat-prompt-form-cancel:hover {
  background: rgba(247, 242, 233, 0.80) !important;
  border-color: rgba(58, 47, 38, 0.18) !important;
  color: #3A2F26 !important;
}

.calm-prompt-form-mode .chat-prompt-form-cancel:focus-visible,
.calm-prompt-form-mode .chat-prompt-form-actions > button:first-child:focus-visible {
  outline: 2px solid #5C4D43 !important;
  outline-offset: 2px !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-cancel,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-cancel {
  color: rgba(255, 254, 251, 0.60) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-cancel:hover,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-cancel:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 254, 251, 0.80) !important;
}

/* ---- Gem — sage primary (never rose/brown/destructive) ---- */
.calm-prompt-form-mode .chat-prompt-form-save,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-save,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-save {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.06) !important;
  filter: none !important;
}

.calm-prompt-form-mode .chat-prompt-form-save:hover,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-save:hover,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-save:hover {
  background: #5F7A6F !important;
  box-shadow: 0 2px 8px rgba(110, 138, 126, 0.20) !important;
  transform: none !important;
  filter: none !important;
}

.calm-prompt-form-mode .chat-prompt-form-save:active,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-save:active,
.calm-prompt-form-mode .chat-prompt-form-actions > button:first-child:active {
  transform: scale(0.985) !important;
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.06) !important;
}

.calm-prompt-form-mode .chat-prompt-form-save:focus-visible {
  outline: 2px solid #5C4D43 !important;
  outline-offset: 2px !important;
}

/* ---- Disabled Gem: muted sage, never lifts ---- */
.calm-prompt-form-mode .chat-prompt-form-save:disabled,
.chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-save:disabled,
body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-save:disabled {
  background: rgba(110, 138, 126, 0.45) !important;
  color: rgba(255, 254, 251, 0.85) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: default !important;
}

.calm-prompt-form-mode .chat-prompt-form-save:disabled:hover {
  background: rgba(110, 138, 126, 0.45) !important;
  box-shadow: none !important;
  transform: none !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-save,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-save,
[data-theme="dark"] body:not(.chat-ny-in-conversation) .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form .chat-prompt-form-save {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-save:hover,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-form-mode .chat-prompt-form-save:hover {
  background: #5F7A6F !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="dark"] .calm-prompt-form-mode .chat-prompt-form-save:disabled {
  background: rgba(110, 138, 126, 0.30) !important;
  color: rgba(255, 254, 251, 0.55) !important;
}

/* ---- Mobile fullscreen form-mode with AI dock (#3579) ---- */
@media (max-width: 640px) {
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode > .chat-prompt-form-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-top: 1px solid rgba(58, 47, 38, 0.08) !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
    background: #FFFEFB !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode > .chat-prompt-form-actions {
    background: var(--color-card, #1c1b18) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode > .chat-prompt-form-actions .chat-prompt-form-cancel,
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode > .chat-prompt-form-actions .chat-prompt-form-save {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-form-mode .chat-prompt-form-cancel,
  .calm-prompt-form-mode .chat-prompt-form-save,
  .calm-prompt-form-mode .chat-prompt-form-actions button {
    transition: none !important;
  }

  .calm-prompt-form-mode .chat-prompt-form-save:hover,
  .calm-prompt-form-mode .chat-prompt-form-save:active {
    transform: none !important;
  }
}

/* ============================================================
   Saved category (list-mode) footer — primary/secondary actions (#2993)

   .chat-prompt-add-row holds, in order:
     .chat-prompt-build-btn       → "Byg med AI"     (filled sage primary)
     .chat-prompt-add-prompt-btn  → "Skriv selv"     (quiet outlined secondary;
                                                       intrinsic look lives in
                                                       calm-prompt-shell.css)
   Scoped to .calm-prompt-list-mode so the root chips panel footer is untouched.
   ============================================================ */

.calm-prompt-list-mode .chat-prompt-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 18px;
  margin-top: 0;
  border-top: 1px solid rgba(58, 47, 38, 0.07);
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-row {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Primary: Byg med AI — filled sage (overrides blod-bolge rose) ---- */
.calm-prompt-list-mode .chat-prompt-build-btn,
.chat-prompt-panel .calm-prompt-list-mode .chat-prompt-build-btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  /* fill/color/border/shadow are !important to beat the blod-bolge
     #chat-main button reset (background:none / border:none / color:inherit,
     specificity 1,0,1) — on desktop this panel mounts inside #chat-main, so a
     scoped class rule alone cannot win. Mirrors the .calm-prompt-top-actions-mode
     primary. Layout props (flex/height/gap/font-weight) face no #chat-main reset
     and stay clean. */
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border: 1px solid #6E8A7E !important;
  padding: 0 14px;
  box-shadow: 0 4px 12px rgba(110, 138, 126, 0.22) !important;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.calm-prompt-list-mode .chat-prompt-build-btn svg,
.calm-prompt-list-mode .chat-prompt-build-btn svg path {
  color: currentColor !important;
  fill: currentColor !important;
}

.calm-prompt-list-mode .chat-prompt-build-btn:hover,
.chat-prompt-panel .calm-prompt-list-mode .chat-prompt-build-btn:hover {
  background: #5F7A6F !important;
  border-color: #5F7A6F !important;
}

.calm-prompt-list-mode .chat-prompt-build-btn:focus-visible {
  outline: 2px solid #5C4D43 !important;
  outline-offset: 2px !important;
}

.calm-prompt-list-mode .chat-prompt-build-btn:active {
  transform: scale(0.985);
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-build-btn,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-build-btn {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border-color: #6E8A7E !important;
  box-shadow: 0 4px 12px rgba(110, 138, 126, 0.22) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-build-btn:hover,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-list-mode .chat-prompt-build-btn:hover {
  background: #5F7A6F !important;
  color: #FFFEFB !important;
  border-color: #5F7A6F !important;
  box-shadow: 0 4px 12px rgba(110, 138, 126, 0.22) !important;
}

/* ---- Secondary: Skriv selv — sits beside the primary, stays quiet outlined ---- */
.calm-prompt-list-mode .chat-prompt-add-prompt-btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* !important beats the legacy .chat-prompt-manual-btn rose/neutral !important
     base in chat-ny-blod-bolge.css (background/border/color); the secondary
     button carries that class, so source order + specificity alone cannot win. */
  border: 1px solid rgba(58, 47, 38, 0.14) !important;
  border-radius: 12px;
  padding: 0 14px;
  background: transparent !important;
  color: #5C4D43 !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.calm-prompt-list-mode .chat-prompt-add-prompt-btn svg,
.calm-prompt-list-mode .chat-prompt-add-prompt-btn svg path {
  color: #9A8E82 !important;
  fill: #9A8E82 !important;
}

.calm-prompt-list-mode .chat-prompt-add-prompt-btn:hover {
  background: #F7F2E9 !important;
  border-color: rgba(58, 47, 38, 0.22) !important;
  color: #5C4D43 !important;
}

.calm-prompt-list-mode .chat-prompt-add-prompt-btn:focus-visible {
  outline: 2px solid #5C4D43 !important;
  outline-offset: 2px !important;
}

.calm-prompt-list-mode .chat-prompt-add-prompt-btn:active {
  transform: scale(0.985);
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-prompt-btn {
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 254, 251, 0.65) !important;
}

[data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-prompt-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 254, 251, 0.85) !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-list-mode .chat-prompt-add-row button,
  .calm-prompt-list-mode .chat-prompt-build-btn,
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn {
    transition: none !important;
  }
  .calm-prompt-list-mode .chat-prompt-build-btn:hover,
  .calm-prompt-list-mode .chat-prompt-build-btn:active,
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn:hover,
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn:active {
    transform: none !important;
  }
}

/* ============================================================
   #3576 — Mobile fullscreen list-mode footer (<=640px)

   Sticky footer at bottom of the fullscreen flex container.
   Two buttons: Tilbage (ghost outlined, first-child) + Ny prompt
   (sage primary, white plus icon). Desktop unchanged.
   ============================================================ */

/* ---- Tilbage button: base styles (hidden on desktop, visible mobile only) ---- */
.calm-prompt-list-mode .chat-prompt-listmode-back {
  display: none;
}

@media (max-width: 640px) {
  .calm-prompt-list-mode .chat-prompt-add-row {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(58, 47, 38, 0.08) !important;
    background: #FFFEFB !important;
  }

  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-row {
    background: var(--color-card, #1c1b18) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* ---- Tilbage: ghost outlined secondary (first-child) ---- */
  .calm-prompt-list-mode .chat-prompt-listmode-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 46px !important;
    border: 1px solid rgba(58, 47, 38, 0.14) !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    background: transparent !important;
    color: #5C4D43 !important;
    font-weight: 600 !important;
    font-size: var(--font-size-base, 0.9375rem) !important;
    font-family: var(--font-family) !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
  }

  .calm-prompt-list-mode .chat-prompt-listmode-back:hover {
    background: #F7F2E9 !important;
    border-color: rgba(58, 47, 38, 0.22) !important;
    color: #3A2F26 !important;
  }

  .calm-prompt-list-mode .chat-prompt-listmode-back:focus-visible {
    outline: 2px solid #6E8A7E !important;
    outline-offset: 2px !important;
  }

  .calm-prompt-list-mode .chat-prompt-listmode-back:active {
    background: rgba(228, 220, 212, 0.35) !important;
  }

  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-listmode-back {
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 254, 251, 0.65) !important;
  }

  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-listmode-back:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 254, 251, 0.85) !important;
  }

  /* ---- Ny prompt: sage primary with white plus ---- */
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    background: #6E8A7E !important;
    color: #FFFEFB !important;
    border: 1px solid #6E8A7E !important;
    padding: 0 14px !important;
    box-shadow: 0 4px 12px rgba(110, 138, 126, 0.22) !important;
    font-weight: 600 !important;
    font-size: var(--font-size-base, 0.9375rem) !important;
    font-family: var(--font-family) !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
  }

  .calm-prompt-list-mode .chat-prompt-add-prompt-btn svg,
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn svg path {
    color: #FFFEFB !important;
    fill: #FFFEFB !important;
  }

  .calm-prompt-list-mode .chat-prompt-add-prompt-btn:hover {
    background: #5F7A6F !important;
    border-color: #5F7A6F !important;
    color: #FFFEFB !important;
  }

  .calm-prompt-list-mode .chat-prompt-add-prompt-btn:focus-visible {
    outline: 2px solid #5C4D43 !important;
    outline-offset: 2px !important;
  }

  .calm-prompt-list-mode .chat-prompt-add-prompt-btn:active {
    transform: scale(0.985) !important;
  }

  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-prompt-btn {
    background: #6E8A7E !important;
    color: #FFFEFB !important;
    border-color: #6E8A7E !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30) !important;
  }

  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-prompt-btn svg,
  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-prompt-btn svg path {
    color: #FFFEFB !important;
    fill: #FFFEFB !important;
  }

  [data-theme="dark"] .calm-prompt-list-mode .chat-prompt-add-prompt-btn:hover {
    background: #5F7A6F !important;
    border-color: #5F7A6F !important;
    color: #FFFEFB !important;
  }
}

/* ---- Reduced motion (mobile fullscreen) ---- */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .calm-prompt-list-mode .chat-prompt-listmode-back,
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn {
    transition: none !important;
  }
  .calm-prompt-list-mode .chat-prompt-add-prompt-btn:active {
    transform: none !important;
  }
}

/* ============================================================
   #3016 — Top-level "Ny" action chooser footer (.calm-prompt-top-actions-mode)

   .chat-prompt-add-row.chat-prompt-top-actions holds, in order:
     .chat-prompt-build-btn                              → "Byg med AI" (filled sage, full-width)
     .chat-prompt-add-prompt-btn.chat-prompt-manual-btn  → "Ny kategori"   (quiet outlined, hugs label)
   Scoped to .calm-prompt-top-actions-mode so the legacy chips-panel footer is
   untouched. The secondary carries .chat-prompt-manual-btn whose base
   color/background/border are !important (chat-ny-blod-bolge.css:1073-1090), so the
   calm overrides here MUST also be !important (mirrors the list-mode "Skriv selv"
   pattern in calm-prompt-shell.css). The primary's base is non-!important so it
   wins by specificity + source order, but carries !important for family parity.
   ============================================================ */

.calm-prompt-top-actions-mode .chat-prompt-top-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  margin-top: 0 !important;
  border-top: none !important;
}

/* ---- Primary: Byg med AI — filled sage (overrides blod-bolge rose) ---- */
.calm-prompt-top-actions-mode .chat-prompt-build-btn,
.chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-build-btn {
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(110, 138, 126, 0.22) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.calm-prompt-top-actions-mode .chat-prompt-build-btn svg,
.calm-prompt-top-actions-mode .chat-prompt-build-btn svg path {
  color: currentColor !important;
  fill: currentColor !important;
}

.calm-prompt-top-actions-mode .chat-prompt-build-btn:hover,
.chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-build-btn:hover {
  background: #4A7A68 !important;
  box-shadow: 0 6px 18px rgba(74, 122, 104, 0.30) !important;
  transform: translateY(-1px) !important;
}

.calm-prompt-top-actions-mode .chat-prompt-build-btn:focus-visible {
  outline: 2px solid #4A7A68 !important;
  outline-offset: 2px !important;
}

.calm-prompt-top-actions-mode .chat-prompt-build-btn:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 2px 6px rgba(110, 138, 126, 0.20) !important;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-build-btn,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-build-btn {
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30) !important;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-build-btn:hover,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-build-btn:hover {
  background: #8AAFA1 !important;
  color: #1c1b18 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40) !important;
}

/* ---- Secondary: Ny kategori — quiet outlined; !important beats .chat-prompt-manual-btn ---- */
.calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn,
.chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn {
  flex: 0 0 auto !important;
  min-height: 44px !important;
  border: 1px solid rgba(58, 47, 38, 0.12) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  color: #5C4D43 !important;
  background: transparent !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Icon inherits the button colour — kills the legacy coral var(--rose) glyph */
.calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn svg,
.calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn svg path {
  color: currentColor !important;
  fill: currentColor !important;
}

.calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn:hover,
.chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn:hover {
  background: rgba(58, 47, 38, 0.04) !important;
  border-color: rgba(58, 47, 38, 0.18) !important;
  color: #3A2F26 !important;
}

.calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn {
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 254, 251, 0.65) !important;
}

[data-theme="dark"] .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn:hover,
[data-theme="dark"] .chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 254, 251, 0.85) !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .calm-prompt-top-actions-mode .chat-prompt-build-btn,
  .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn {
    transition: none !important;
  }
  .calm-prompt-top-actions-mode .chat-prompt-build-btn:hover,
  .calm-prompt-top-actions-mode .chat-prompt-build-btn:active {
    transform: none !important;
  }
}

/* ---- Mobile fullscreen new-category sticky footer (<=640px) #3628 ---- */
@media (max-width: 640px) {
  .calm-prompt-new-category .chat-prompt-form-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    margin: auto -18px 0 !important;
    width: calc(100% + 36px) !important;
    box-sizing: border-box !important;
    background: var(--color-card, rgb(255, 254, 251)) !important;
    border-top: 1px solid rgba(228, 220, 212, 0.55) !important;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }

  [data-theme="dark"] .calm-prompt-new-category .chat-prompt-form-actions {
    background: var(--color-card, rgb(42, 38, 34)) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* ---- Mobile: stack both actions full width so neither clips at 375/390 ---- */
@media (max-width: 767px) {
  .calm-prompt-top-actions-mode .chat-prompt-top-actions {
    gap: 8px !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .calm-prompt-top-actions-mode .chat-prompt-build-btn,
  .chat-prompt-panel .calm-prompt-top-actions-mode .chat-prompt-build-btn,
  .calm-prompt-top-actions-mode .chat-prompt-add-prompt-btn {
    flex: 1 1 100% !important;
  }
}

/* ==== source: chat/css/public-chat-app-parity.css ==== */
/* Public Chat App Parity
   App-derived shared chat primitive styles from app origin/main chat/css/chat-ny-blod-bolge.css.
   Scope: public-safe CalmAiDock/CVM prompt surface only; keep API/model/history limits in JS. */
/* While the dock is open the active card gets a faint sage hairline (no ring, no
   layout shift — only the border colour changes). */
#chat-main .sofia-signal--active.calm-brief2.cvm-card-active {
  border-color: rgba(110, 138, 126, 0.30);
}

.cvm-dock {
  position: fixed;
  z-index: 9000;
  top: 0;
  left: 0;
  width: 374px;
  max-width: calc(100vw - 16px);
  max-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FBF8F2;
  border: 1px solid #ECE7DF;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(58, 47, 38, 0.10);
  color: #3A2F26;
  animation: cvmDockIn 0.2s ease;
}

@keyframes cvmDockIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.cvm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #ECE7DF;
}

.cvm-head-icon .calm-ico {
  width: 20px;
  height: 20px;
}

.cvm-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(110, 138, 126, 0.12);
  color: #6E8A7E;
}

.cvm-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cvm-title {
  margin: 0;
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-semibold);
  color: #3A2F26;
}

.cvm-subtitle {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: #8C7B6F;
}

.cvm-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8C7B6F;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cvm-close:hover {
  background: rgba(58, 47, 38, 0.06);
  color: #3A2F26;
}

.cvm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cvm-dock .ask-ai-welcome {
  margin: 0 0 2px;
}

.cvm-dock:not(.cvm-dock--inline) .cvm-body:has(.ask-ai-welcome) {
  padding-bottom: 10px;
}

.cvm-dock .ask-ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cvm-dock .ask-ai-suggestion {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(110, 138, 126, 0.24);
  border-radius: 10px;
  background: #FFFEFB;
  color: #4A6157;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cvm-dock .ask-ai-suggestion svg {
  flex: 0 0 auto;
  color: #6E8A7E;
}

.cvm-dock .ask-ai-suggestion:hover,
.cvm-dock .ask-ai-suggestion:focus-visible {
  background: rgba(110, 138, 126, 0.10);
  border-color: rgba(110, 138, 126, 0.42);
  color: #3D3028;
}

.cvm-dock .ask-ai-suggestion--primary {
  background: #6E8A7E;
  border-color: #6E8A7E;
  color: #FFFEFB;
}

.cvm-dock .ask-ai-suggestion--primary svg {
  color: #FFFEFB;
}

.cvm-dock .ask-ai-suggestion--primary:hover,
.cvm-dock .ask-ai-suggestion--primary:focus-visible {
  background: #5F7B70;
  border-color: #5F7B70;
  color: #FFFEFB;
}

/* #3146 — calm, thin, scoped scrollbar for the revise dock body. Scoped to .cvm-body
   (unique to the dock) so it never touches the main chat (.chat-ny-conversation) or
   email scrollbars. Light mode uses a soft warm-dark thumb; dark mode uses a soft
   light thumb so it stays visible on the dark dock surface. Firefox gets the standard
   properties via the @supports fallback (matches the .chat-ny-conversation convention). */
.cvm-body::-webkit-scrollbar {
  width: 7px;
}
.cvm-body::-webkit-scrollbar-track {
  background: transparent;
}
.cvm-body::-webkit-scrollbar-thumb {
  background: rgba(58, 47, 38, 0.18);
  border-radius: 999px;
}
.cvm-body::-webkit-scrollbar-thumb:hover {
  background: rgba(58, 47, 38, 0.30);
}
html[data-theme="dark"] .cvm-body::-webkit-scrollbar-thumb {
  background: rgba(232, 224, 216, 0.24) !important;
}
html[data-theme="dark"] .cvm-body::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 224, 216, 0.36) !important;
}
@supports not selector(::-webkit-scrollbar) {
  .cvm-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(58, 47, 38, 0.18) transparent;
  }
  html[data-theme="dark"] .cvm-body {
    scrollbar-color: rgba(232, 224, 216, 0.24) transparent;
  }
}

.cvm-bubble {
  max-width: 88%;
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  border-radius: 12px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cvm-bubble--bot {
  align-self: flex-start;
  background: rgba(58, 47, 38, 0.05);
  color: #3D3028;
}

.cvm-bubble--user {
  align-self: flex-end;
  background: #6E8A7E;
  color: #FFFEFB;
}

/* #3394: shared action row for BOTH inline and fixed CVM docks. The primitive renders
   .chat-msg-actions[data-cvm-actions] for both variants (no more .ask-ai-msg-actions
   for fixed). Scoped via [data-cvm-actions] so main chat action rows are unaffected. */
.cvm-dock [data-cvm-actions] {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -6px;
  margin-left: 2px;
}

.cvm-dock [data-cvm-opening-actions] {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  margin-left: 2px;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgb(58, 47, 38);
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgb(58, 47, 38);
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn svg {
  width: 15px;
  height: 15px;
}

.cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn svg {
  width: 15px;
  height: 15px;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn:hover,
.cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  opacity: 1;
  background: rgba(58, 47, 38, 0.06);
  border-color: transparent;
  color: rgb(58, 47, 38);
}
.cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  opacity: 1 !important;
  background: rgba(58, 47, 38, 0.06) !important;
  border-color: transparent !important;
  color: rgb(58, 47, 38) !important;
  outline: 1.5px solid rgba(58, 47, 38, 0.28) !important;
  outline-offset: -1.5px !important;
}
body:has(#chat-app):has(#chat-app) .cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  opacity: 1 !important;
  background: rgba(58, 47, 38, 0.06) !important;
  border-color: transparent !important;
  color: rgb(58, 47, 38) !important;
  outline: 1.5px solid rgba(58, 47, 38, 0.28) !important;
  outline-offset: -1.5px !important;
}

.cvm-dock [data-cvm-actions] .chat-msg-action-btn.done,
.cvm-dock [data-cvm-actions] .chat-msg-action-btn.tts-playing,
.cvm-dock [data-cvm-actions] .chat-msg-action-btn.active {
  opacity: 1;
  color: rgb(58, 47, 38);
  border-color: transparent;
}
.cvm-dock .ask-ai-action-btn.done {
  background: rgba(58, 47, 38, 0.06);
}

/* #3374: when ChatTTS exposes an active stop control inside either CVM variant,
   keep it as visible as the play/pause state under the shared dock action row. */
.cvm-dock [data-cvm-actions] .chat-msg-action-btn.ss-tts-stop {
  opacity: 1;
}

.cvm-thinking {
  margin: 0;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  color: #8C7B6F;
}

.cvm-suggestion {
  align-self: stretch;
  padding: 12px 14px;
  background: #FFFEFB;
  border: 1px solid #ECE7DF;
  border-radius: 12px;
}

.cvm-label {
  margin: 0 0 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6E8A7E;
}

/* #3146 — the suggestion label + a single quiet read-aloud control share one calm row;
   the label drops its own bottom margin so the row owns the spacing. */
.cvm-suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}
.cvm-suggestion-head .cvm-label {
  margin: 0;
}
.cvm-listen,
#chat-main .cvm-dock .cvm-listen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(110, 138, 126, 0.10);
  color: #6E8A7E;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cvm-listen:hover,
#chat-main .cvm-dock .cvm-listen:hover {
  background: rgba(110, 138, 126, 0.20);
}
.cvm-listen svg,
#chat-main .cvm-dock .cvm-listen svg {
  width: 18px;
  height: 18px;
}
.cvm-listen.loading,
#chat-main .cvm-dock .cvm-listen.loading {
  background: rgba(110, 138, 126, 0.14);
  color: #4A6157;
  pointer-events: none;
}
.cvm-listen.loading .cvm-listen-ico,
#chat-main .cvm-dock .cvm-listen.loading .cvm-listen-ico {
  display: none;
}
.cvm-listen.loading > svg,
.cvm-listen.loading .spin-icon,
#chat-main .cvm-dock .cvm-listen.loading > svg,
#chat-main .cvm-dock .cvm-listen.loading .spin-icon {
  display: none;
}
.cvm-listen.loading::after,
#chat-main .cvm-dock .cvm-listen.loading::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(110, 138, 126, 0.30);
  border-top-color: #6E8A7E;
  border-radius: 50%;
  animation: cvmListenSpin 0.7s linear infinite;
}
.cvm-listen.tts-playing,
.cvm-listen.active,
#chat-main .cvm-dock .cvm-listen.tts-playing,
#chat-main .cvm-dock .cvm-listen.active {
  background: rgba(110, 138, 126, 0.26);
  color: #4A6157;
}
@keyframes cvmListenSpin {
  to { transform: rotate(360deg); }
}

.cvm-old {
  display: none;
  text-decoration: line-through;
}

.cvm-new {
  margin: 0 0 12px;
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: #3A2F26;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cvm-new--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  white-space: normal;
}
.cvm-new--clamped.cvm-new--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: pre-wrap;
}
.cvm-new-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 8px;
  padding: 0;
  border: none;
  background: none;
  color: #6E8A7E;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color 0.15s ease;
}
.cvm-new-toggle:hover {
  color: #4A6157;
}
.cvm-new-toggle:focus-visible {
  outline: 2px solid #6E8A7E;
  outline-offset: 2px;
  border-radius: 4px;
}
.cvm-new-toggle-chevron {
  display: inline-block;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}
.cvm-new-toggle[aria-expanded="true"] .cvm-new-toggle-chevron {
  transform: rotate(180deg);
}

.cvm-confirm {
  display: flex;
  gap: 8px;
}

.cvm-yes,
#chat-main .cvm-dock .cvm-yes {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #6E8A7E;
  border-radius: 999px;
  background: #6E8A7E;
  color: #FFFEFB;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s ease;
}

.cvm-yes:hover,
#chat-main .cvm-dock .cvm-yes:hover {
  background: #5F7A6F;
}

.cvm-no,
#chat-main .cvm-dock .cvm-no {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(58, 47, 38, 0.18);
  border-radius: 999px;
  background: #FFFEFB;
  color: #5C4D43;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s ease;
}

.cvm-no:hover,
#chat-main .cvm-dock .cvm-no:hover {
  background: rgba(58, 47, 38, 0.05);
}

.cvm-result {
  margin: 0;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #6E8A7E;
}

.cvm-error {
  margin: 0;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  color: #B08068;
}

/* #3137: one native composer bar — mic (shared ss-mic STT state) + text field +
   send — replaces the old mic + hint. The rounded bar is the bordered surface; the
   controls inside are flat. .cvm-foot keeps its 12px 16px padding. */
.cvm-foot {
  padding: 12px 16px;
  border-top: 1px solid #ECE7DF;
}

.cvm-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 8px;
  border: 1px solid #DAD2C6;
  border-radius: 24px;
  background: #FFFEFB;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cvm-composer:focus-within {
  /* #3137 follow-up: a quiet 1px sage ring for visible keyboard focus, not the fat
     3px green halo that glowed around the whole pill on every click. */
  border-color: #6E8A7E;
  box-shadow: 0 0 0 1px rgba(110, 138, 126, 0.35);
}

.cvm-mic,
#chat-main .cvm-dock .cvm-mic {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #6E8A7E;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cvm-mic:hover,
#chat-main .cvm-dock .cvm-mic:hover {
  background: rgba(110, 138, 126, 0.16);
}

/* #3137: the dock mic carries the SAME ss-mic--* state classes as #chat-direct-mic-btn
   (createStt(button) owns them) — these replace the old local listening class. */
.cvm-mic.ss-mic--connecting,
#chat-main .cvm-dock .cvm-mic.ss-mic--connecting {
  background: rgba(110, 138, 126, 0.18);
  color: #5F7A6F;
}

/* #3334: subtle listening state — transparent fill with a soft sage border instead
   of the solid filled circle that dominated the tiny dock composer. */
.cvm-mic.ss-mic--listening,
#chat-main .cvm-dock .cvm-mic.ss-mic--listening {
  background: rgba(110, 138, 126, 0.12);
  color: #4A6B5C;
  box-shadow: inset 0 0 0 1.5px rgba(110, 138, 126, 0.45);
  animation: cvmMicPulse 2s ease-in-out infinite;
}

.cvm-mic.ss-mic--error,
#chat-main .cvm-dock .cvm-mic.ss-mic--error {
  background: rgba(194, 96, 63, 0.12);
  color: #C2603F;
}

@keyframes cvmMicPulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(110, 138, 126, 0.45); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(110, 138, 126, 0.25); }
}

.cvm-type-field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  height: 24px;
  max-height: min(24vh, 112px);
  border: none;
  background: transparent;
  outline: none;
  padding: 3px 2px;
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: 18px;
  color: #3D3028;
  overflow-y: hidden;
  overflow-x: hidden;
  resize: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 138, 126, 0.24) transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cvm-type-field::placeholder {
  color: #A89B8C;
}

.cvm-type-field::-webkit-scrollbar {
  width: 5px;
}

.cvm-type-field::-webkit-scrollbar-track {
  background: transparent;
}

.cvm-type-field::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.cvm-type-field::-webkit-scrollbar-thumb {
  background: rgba(110, 138, 126, 0.24);
  border-radius: 999px;
}

.cvm-type-field::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 138, 126, 0.34);
}

.cvm-type-send,
#chat-main .cvm-dock .cvm-type-send {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #6E8A7E;
  color: #FFFEFB;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.cvm-type-send:hover,
#chat-main .cvm-dock .cvm-type-send:hover {
  background: #5F7A6F;
}

.cvm-type-send:disabled,
#chat-main .cvm-dock .cvm-type-send:disabled {
  background: rgba(110, 138, 126, 0.30);
  color: #FBF8F2;
  cursor: default;
}

.cvm-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Visually-hidden polite live region for proposal/confirm announcements. */
.cvm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* #3448: the dock dialog receives programmatic focus on mobile open (tabindex=-1)
   so screen readers announce it, but must never paint a visible ring. */
.cvm-dock:focus {
  outline: none;
}

/* Focus rings for the dock controls (sage, matching the calm card). */
.cvm-close:focus-visible,
.cvm-mic:focus-visible,
.cvm-listen:focus-visible,
.cvm-type-send:focus-visible,
.cvm-trigger:focus-visible,
.cvm-quick-chip:focus-visible,
.cvm-yes:focus-visible,
.cvm-no:focus-visible {
  outline: 3px solid #6E8A7E;
  outline-offset: 2px;
}

/* =====================================================================
 * #3202 follow-up — shared INLINE dock variant. The saved-prompt "Ny prompt"
 * form mounts the SAME .cvm-dock (via window.CalmAiDock) beside the form, in its
 * inline (panel-contained) form — replacing the old bespoke prompt-only dock.
 * It reuses every .cvm-* child rule above (head / body / bubble / suggestion /
 * composer / mic / scrollbar / dark-mode / reduced-motion); only positioning, the
 * collapsible trigger and the quick-reply chips are surface-specific. Font tokens
 * only (no raw font-size/weight) to satisfy the chat font-compliance guard. (#3202)
 * =================================================================== */
.cvm-inline-host {
  margin: 4px 0 2px;
}

.cvm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(110, 138, 126, 0.30);
  border-radius: 999px;
  background: rgba(110, 138, 126, 0.10);
  color: #4A6157;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cvm-trigger:hover {
  background: rgba(110, 138, 126, 0.16);
  border-color: rgba(110, 138, 126, 0.45);
}
.cvm-trigger-ico {
  display: inline-flex;
  color: #6E8A7E;
}
.cvm-is-open .cvm-trigger {
  display: none;
}

/* Inline placement: NOT the fixed viewport float Brief uses — a panel-contained
   card beside the saved-prompt form. Overrides .cvm-dock's fixed position + width;
   the themed surface, head, body and composer all come from the shared .cvm-* rules. */
.cvm-dock--inline {
  position: static;
  z-index: auto;
  width: auto;
  max-width: none;
  max-height: var(--cvm-master-h, 380px);
  margin-top: 8px;
  cursor: default;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cvmInlineDockIn 0.18s ease;
}
.cvm-dock--inline .cvm-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.cvm-dock--inline[hidden] {
  display: none;
}
.cvm-dock--inline .cvm-body:empty {
  display: none;
}
.cvm-dock--inline .cvm-head {
  border-bottom: none;
}
.cvm-dock--inline .cvm-foot {
  padding: 14px 16px;
  border-top: none;
}
.cvm-dock:not(.cvm-dock--inline) .cvm-body:empty {
  display: none;
}
.cvm-dock:not(.cvm-dock--inline):has(> .cvm-body:empty) .cvm-head {
  border-bottom: none;
}
.cvm-dock:not(.cvm-dock--inline):has(> .cvm-body:empty) .cvm-foot {
  border-top: none;
  padding: 14px 16px;
}

@keyframes cvmInlineDockIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quick-reply chips (conversational follow-ups offered after a turn). */
.cvm-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
}
.cvm-quick-chip {
  padding: 6px 12px;
  border: 1px solid rgba(110, 138, 126, 0.34);
  border-radius: 999px;
  background: rgba(110, 138, 126, 0.08);
  color: #4A6157;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cvm-quick-chip:hover {
  background: rgba(110, 138, 126, 0.16);
}

html[data-theme="dark"] .cvm-dock,
html[data-theme="dark"] .cvm-dock--inline {
  background: #2A2520 !important;
  border-color: rgba(232, 224, 216, 0.16) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-head,
html[data-theme="dark"] .cvm-foot {
  border-color: rgba(232, 224, 216, 0.12) !important;
}
html[data-theme="dark"] .cvm-head-icon {
  background: rgba(125, 156, 142, 0.18) !important;
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-title,
html[data-theme="dark"] .cvm-new,
html[data-theme="dark"] .cvm-type-field {
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-subtitle,
html[data-theme="dark"] .cvm-close,
html[data-theme="dark"] .cvm-thinking,
html[data-theme="dark"] .cvm-old,
html[data-theme="dark"] .cvm-type-field::placeholder {
  color: #B8ADA3 !important;
}
html[data-theme="dark"] .cvm-close:hover {
  background: rgba(232, 224, 216, 0.08) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-bubble--bot {
  background: rgba(232, 224, 216, 0.08) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-bubble--user {
  background: #6F8D80 !important;
  color: #FFFEFB !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion {
  background: #322C26 !important;
  border-color: rgba(232, 224, 216, 0.14) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion svg {
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion:hover,
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion:focus-visible {
  background: rgba(232, 224, 216, 0.08) !important;
  border-color: rgba(183, 205, 193, 0.34) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion--primary {
  background: #6F8D80 !important;
  border-color: #6F8D80 !important;
  color: #FFFEFB !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-suggestion--primary svg {
  color: #FFFEFB !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn {
  border-color: transparent !important;
  color: rgba(232, 224, 216, 0.82) !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn {
  border-color: transparent !important;
  color: rgba(232, 224, 216, 0.82) !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn:hover,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn.done,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn.tts-playing,
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn.active {
  background: rgba(232, 224, 216, 0.06) !important;
  border-color: transparent !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-actions] .chat-msg-action-btn:focus-visible {
  outline: 1.5px solid rgba(232, 224, 216, 0.32) !important;
  outline-offset: -1.5px !important;
}
html[data-theme="dark"] .cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn:hover,
html[data-theme="dark"] .cvm-dock [data-cvm-opening-actions] .chat-msg-action-btn:focus-visible {
  background: rgba(232, 224, 216, 0.06) !important;
  border-color: transparent !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-dock .ask-ai-action-btn.done {
  background: rgba(232, 224, 216, 0.06) !important;
}
html[data-theme="dark"] .cvm-suggestion {
  background: #322C26 !important;
  border-color: rgba(232, 224, 216, 0.12) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-label,
html[data-theme="dark"] .cvm-listen,
html[data-theme="dark"] .cvm-result,
html[data-theme="dark"] .cvm-mic {
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-listen:hover,
html[data-theme="dark"] .cvm-mic:hover {
  background: rgba(125, 156, 142, 0.20) !important;
}
html[data-theme="dark"] .cvm-listen.loading {
  background: rgba(125, 156, 142, 0.16) !important;
}
html[data-theme="dark"] .cvm-listen.tts-playing,
html[data-theme="dark"] .cvm-listen.active {
  background: rgba(125, 156, 142, 0.26) !important;
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-listen.loading::after {
  border-color: rgba(183, 205, 193, 0.30) !important;
  border-top-color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-new-toggle {
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-new-toggle:hover {
  color: #FAF5EF !important;
}
html[data-theme="dark"] .cvm-no {
  background: #241F1B !important;
  border-color: rgba(232, 224, 216, 0.14) !important;
  color: #F5EEE7 !important;
}
html[data-theme="dark"] .cvm-no:hover {
  background: rgba(232, 224, 216, 0.08) !important;
}
html[data-theme="dark"] .cvm-error {
  color: #E1A184 !important;
}
html[data-theme="dark"] .cvm-composer {
  background: #241F1B !important;
  border-color: rgba(232, 224, 216, 0.18) !important;
}
html[data-theme="dark"] .cvm-composer:focus-within {
  border-color: #B7CDC1 !important;
  box-shadow: 0 0 0 1px rgba(183, 205, 193, 0.32) !important;
}
html[data-theme="dark"] .cvm-mic.ss-mic--connecting {
  background: rgba(125, 156, 142, 0.22) !important;
  color: #B7CDC1 !important;
}
html[data-theme="dark"] .cvm-mic.ss-mic--listening {
  background: rgba(125, 156, 142, 0.14) !important;
  color: #B7CDC1 !important;
  box-shadow: inset 0 0 0 1.5px rgba(183, 205, 193, 0.40) !important;
}
html[data-theme="dark"] .cvm-mic.ss-mic--error {
  background: rgba(225, 161, 132, 0.14) !important;
  color: #E1A184 !important;
}
html[data-theme="dark"] .cvm-type-send {
  background: #7D9C8E !important;
  color: #1F1B17 !important;
}
html[data-theme="dark"] .cvm-type-send:hover {
  background: #8EAD9F !important;
}
html[data-theme="dark"] .cvm-type-send:disabled {
  background: rgba(125, 156, 142, 0.28) !important;
  color: rgba(250, 245, 239, 0.68) !important;
}

/* Dark mode for inline-only trigger/chips; the shared dock surface is themed above. */
html[data-theme="dark"] .cvm-trigger {
  background: rgba(125, 156, 142, 0.16);
  border-color: rgba(125, 156, 142, 0.34);
  color: #B7CDC1;
}
html[data-theme="dark"] .cvm-trigger:hover {
  background: rgba(125, 156, 142, 0.24);
}
html[data-theme="dark"] .cvm-quick-chip {
  background: rgba(125, 156, 142, 0.14);
  border-color: rgba(125, 156, 142, 0.30);
  color: #B7CDC1;
}
html[data-theme="dark"] .cvm-quick-chip:hover {
  background: rgba(125, 156, 142, 0.22);
}

/* Mobile: the inline dock is panel-contained, so it just fills the form width with a
   shorter scroll cap — no overlap with Titel / Prompt / Annuller / Gem. */
@media (max-width: 600px) {
  .cvm-dock--inline {
    max-height: 60vh;
  }
}

/* Desktop sidecar: dock is a SIBLING of .chat-prompt-panel-inner on the PANEL,
   so each card has its own background/border. Grid lives on the panel, not the form.
   Mobile (<=640px) keeps the dock INSIDE the form for #3579 fullscreen integration. */
@media (min-width: 769px) {
  .chat-prompt-panel.chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) {
    display: grid !important;
    grid-template-columns: minmax(0, 640px) minmax(300px, 360px);
    grid-template-areas: "prompt dock";
    column-gap: 16px;
    align-items: start;
    justify-content: center;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) > .chat-prompt-panel-inner {
    grid-area: prompt;
    min-width: 0;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) > [data-calm-ai-dock] {
    grid-area: dock;
    align-self: start;
    margin: 0;
    min-width: 0;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) .cvm-dock--inline {
    max-height: var(--cvm-master-h, 440px);
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock].cvm-is-open) .cvm-dock--inline .cvm-body {
    flex: 0 1 auto;
  }
  .chat-prompt-panel--with-ai-dock:has(> [data-calm-ai-dock]:not(.cvm-is-open)) > [data-calm-ai-dock] {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  /* #3448: mobile CVM bottom-sheet layout — replaces the old display:none guard.
     The fixed dock (Brief "Forbedr med AI") becomes a full-width bottom sheet
     above the mobile nav; the inline dock (prompt-builder) fills the panel width.
     The !important overrides reposition()'s inline style.left/top on the fixed
     dock so CSS owns the mobile layout without JS changes to the primitive. */
  .cvm-dock {
    position: fixed !important;
    top: auto !important;
    bottom: var(--mn-bar-height, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(60dvh, 400px);
    border-radius: 18px 18px 0 0;
    animation: cvmDockInMobile 0.2s ease;
  }
  body.chat-ny-in-conversation .cvm-dock {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cvm-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .chat-prompt-panel.chat-prompt-panel--with-ai-dock {
    max-height: calc(100dvh - var(--mn-bar-height, 60px) - 10px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* #3579: dock is now inside .chat-prompt-form */
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode [data-calm-ai-dock] {
    margin: 0 !important;
  }
  .chat-prompt-panel.chat-prompt-panel--with-ai-dock .cvm-dock--inline {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(42dvh, 320px);
  }

  /* #3448: hide mobile nav while ANY CVM dock is visible — one active task
     surface at a time. Fixed dock only exists in DOM while open; inline
     dock toggles [hidden]. */
  body:has(.cvm-dock:not(.cvm-dock--inline)) :is(#bb-mobile-nav, .mn-fab-group, .mn-more-sheet, .mn-more-backdrop),
  body:has(.cvm-dock--inline:not([hidden])) :is(#bb-mobile-nav, .mn-fab-group, .mn-more-sheet, .mn-more-backdrop) {
    display: none !important;
  }
  /* Nav hidden → dock claims the full bottom edge (conversation mode already
     has bottom: 0 via body.chat-ny-in-conversation above). */
  body:not(.chat-ny-in-conversation):has(.cvm-dock:not(.cvm-dock--inline)) .cvm-dock:not(.cvm-dock--inline) {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body:not(.chat-ny-in-conversation):has(.cvm-dock--inline:not([hidden])) .chat-prompt-panel {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  body:not(.chat-ny-in-conversation):has(.cvm-dock--inline:not([hidden])) .chat-prompt-panel.chat-prompt-panel--with-ai-dock {
    max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 10px);
  }
}

/* ---- Mobile fullscreen form-mode CVM integrated section (#3579) ---- */
@media (max-width: 640px) {
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .chat-prompt-form > [data-calm-ai-dock] {
    margin: 20px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgb(236, 231, 223) !important;
    background: transparent !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .chat-prompt-form > [data-calm-ai-dock] {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-dock--inline {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    animation: none !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-dock--inline .cvm-body {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-close {
    display: none !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer {
    gap: 6px !important;
    border-color: #DAD2C6 !important;
    background: #FFFEFB !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-type-field {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 3px 2px !important;
    font-size: var(--font-size-sm) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-type-field:focus,
  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-type-field:focus-visible {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer:focus-within {
    border-color: #6E8A7E !important;
    box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.12) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer .cvm-mic {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    background: rgba(110, 138, 126, 0.12) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-type-send {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-type-send:disabled {
    background: rgba(110, 138, 126, 0.35) !important;
  }

  .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-type-send:not(:disabled) {
    background: rgb(110, 138, 126) !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-dock--inline {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer {
    border-color: rgba(232, 224, 216, 0.16) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }

  [data-theme="dark"] .chat-prompt-panel--with-ai-dock .calm-prompt-form-mode .cvm-composer:focus-within {
    border-color: rgba(110, 138, 126, 0.50) !important;
    box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.12) !important;
  }
}
@keyframes cvmDockInMobile {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Flash the field that just changed on "Ja, ret det" — a fading sage ring, so it
   never clobbers the field's themed background. */
.calm-letter--flash {
  animation: calmLetterFlash 0.9s ease;
}

@keyframes calmLetterFlash {
  0% { box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.35); }
  100% { box-shadow: 0 0 0 3px rgba(110, 138, 126, 0); }
}

/* Dark mode: the card's active hairline needs a slightly stronger sage so it reads
   on the dark card. */
html[data-theme="dark"] #chat-main .sofia-signal--active.calm-brief2.cvm-card-active {
  border-color: rgba(110, 138, 126, 0.40);
}

/* #3101 — "+ Ny" add chip reduced-motion rule. Kept here, before the calm-brief
   reduced-motion block, so it is NOT the file's last `@media (prefers-reduced-
   motion: reduce)` — test-chat-calm-brief-view-contract.js targets that last one
   via lastIndexOf. */
@media (prefers-reduced-motion: reduce) {
  .chat-prompt-chip.chat-prompt-add {
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cvm-dock,
  .cvm-mic.ss-mic--listening,
  .calm-letter--flash,
  .cvm-listen.loading::after {
    animation: none;
  }

  .cvm-new-toggle-chevron,
  .cvm-listen,
  .cvm-yes,
  .cvm-no,
  .cvm-new-toggle {
    transition: none;
  }
}

/* ==== source: chat/css/public-chat.css ==== */
.ss-public-chat .onboarding-overlay,
.ss-public-chat #onboarding-modal {
  display: none !important;
}

.ss-public-chat .content {
  padding-bottom: 28px;
}

.ss-public-chat-gate {
  position: fixed;
  z-index: 10050;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid rgba(58, 47, 38, 0.08);
  border-radius: 14px;
  background: #ffffff;
  color: rgb(92, 77, 67);
  box-shadow: 0 8px 24px rgba(40, 30, 20, 0.12), 0 2px 6px rgba(40, 30, 20, 0.06);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.ss-public-chat-gate.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ss-public-chat-gate__top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ss-public-chat-gate__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(110, 138, 126, 0.12);
  color: #6E8A7E;
  flex: 0 0 auto;
}

.ss-public-chat-gate__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.ss-public-chat-gate__title {
  margin: 0;
  color: #3A2F26;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: 0;
}

.ss-public-chat-gate__body {
  margin: 4px 0 0;
  color: rgb(92, 77, 67);
  font-size: 13.5px;
  line-height: 1.45;
}

.ss-public-chat-gate__close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgb(120, 105, 95);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .15s ease, background .15s ease;
}

.ss-public-chat-gate__close:hover {
  background: rgba(92, 77, 67, 0.06);
  color: rgb(60, 50, 42);
}

.ss-public-chat-gate__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ss-public-chat-gate__action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ss-public-chat-gate__action--primary {
  background: #6E8A7E;
  color: #FFFEFB;
  border: 1px solid #6E8A7E;
}

.ss-public-chat-gate__action--primary:hover,
.ss-public-chat-gate__action--primary:focus-visible {
  background: #5F7B70;
  border-color: #5F7B70;
}

.ss-public-chat-gate__action--secondary {
  border: 1px solid rgba(92, 77, 67, 0.18);
  color: rgb(92, 77, 67);
  background: transparent;
}

.ss-public-chat-gate__action--secondary:hover,
.ss-public-chat-gate__action--secondary:focus-visible {
  background: rgba(92, 77, 67, 0.06);
  border-color: rgba(92, 77, 67, 0.18);
}

.ss-public-chat-gate__example {
  display: none;
  margin: 2px 0 0;
  color: rgb(92, 77, 67);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ss-public-chat-gate__example.is-active {
  display: inline-block;
}

.ss-public-chat-gate__example:hover,
.ss-public-chat-gate__example:focus-visible {
  color: #6E8A7E;
}

.ss-public-chat-gate__close:focus-visible,
.ss-public-chat-gate__action:focus-visible,
.ss-public-chat-gate__example:focus-visible {
  outline: 2px solid #6E8A7E;
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .ss-public-chat-gate__close {
    min-width: 44px;
    min-height: 44px;
  }
  .ss-public-chat-gate__action {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-public-chat-gate,
  .ss-public-chat-gate__close,
  .ss-public-chat-gate__action {
    transition: none;
  }
}

@media (max-width: 640px) {
  .ss-public-chat-gate {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
    top: auto !important;
    width: auto;
  }
}

/* === Dark theme gate === */

[data-theme="dark"] .ss-public-chat-gate {
  background: rgb(38, 36, 34);
  color: rgb(232, 230, 225);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .ss-public-chat-gate__title {
  color: rgb(248, 246, 242);
  font-weight: 600;
}

[data-theme="dark"] .ss-public-chat-gate__body {
  color: rgb(232, 230, 225);
}

[data-theme="dark"] .ss-public-chat-gate__icon {
  background: rgba(110, 138, 126, 0.18);
  color: #8FBAAA;
}

[data-theme="dark"] .ss-public-chat-gate__example {
  color: rgb(232, 230, 225);
}

[data-theme="dark"] .ss-public-chat-gate__example:hover,
[data-theme="dark"] .ss-public-chat-gate__example:focus-visible {
  color: #8FBAAA;
}

[data-theme="dark"] .ss-public-chat-gate__close {
  color: rgb(184, 181, 173);
}

[data-theme="dark"] .ss-public-chat-gate__close:hover,
[data-theme="dark"] .ss-public-chat-gate__close:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: rgb(248, 246, 242);
}

[data-theme="dark"] .ss-public-chat-gate__action--primary {
  background: #6E8A7E;
  color: #FFFEFB;
  border-color: #6E8A7E;
}

[data-theme="dark"] .ss-public-chat-gate__action--primary:hover,
[data-theme="dark"] .ss-public-chat-gate__action--primary:focus-visible {
  background: #5F7B70;
  color: #FFFEFB;
  border-color: #5F7B70;
}

[data-theme="dark"] .ss-public-chat-gate__action--secondary {
  background: transparent;
  color: rgb(232, 230, 225);
  border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .ss-public-chat-gate__action--secondary:hover,
[data-theme="dark"] .ss-public-chat-gate__action--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgb(232, 230, 225);
}

/* Premium demo card design — dark-mode differentiated gradients (#254)
   Overrides [data-theme="dark"] .card { background: rgb(42,38,34) !important }
   in chat-ny-blod-bolge.css with per-card-type tinted surfaces. */

[data-theme="dark"] .ss-public-chat .card--todo {
  background: linear-gradient(135deg, #312924 0%, #2A2420 100%) !important;
  border-color: rgba(212, 168, 154, 0.18) !important;
}

[data-theme="dark"] .ss-public-chat .card--email {
  background: linear-gradient(135deg, #252E28 0%, #232A24 100%) !important;
  border-color: rgba(168, 197, 184, 0.18) !important;
}

[data-theme="dark"] .ss-public-chat .card--calendar {
  background: linear-gradient(135deg, #25272F 0%, #21232A 100%) !important;
  border-color: rgba(168, 176, 196, 0.18) !important;
}

[data-theme="dark"] .ss-public-chat .card--todo:hover,
[data-theme="dark"] .ss-public-chat .card--todo:focus-within {
  border-color: rgba(212, 168, 154, 0.28) !important;
}

[data-theme="dark"] .ss-public-chat .card--email:hover,
[data-theme="dark"] .ss-public-chat .card--email:focus-within {
  border-color: rgba(168, 197, 184, 0.28) !important;
}

[data-theme="dark"] .ss-public-chat .card--calendar:hover,
[data-theme="dark"] .ss-public-chat .card--calendar:focus-within {
  border-color: rgba(168, 176, 196, 0.28) !important;
}

/* ── Magnet-parity C: page-4 login page inside the public PDF reader ──
   The gate shell reuses .ss-pdf-pagewrap (paper + shadow from the app CSS);
   these rules only lay out the two elements inside: headline + button. */
.ss-pdf-public-gate {
  /* Not document text: unselectable, so the Forklar selection chip can never
     offer to "explain" our own UI copy (L1 lens finding). */
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 22px;
  padding: 32px;
  box-sizing: border-box;
  text-align: center;
}
.ss-pdf-public-gate h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  color: #2f2c28;
}
.ss-pdf-public-gate-cta {
  padding: 11px 28px;
  background: #6E8A7E;
  color: #ffffff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.ss-pdf-public-gate-cta:hover,
.ss-pdf-public-gate-cta:focus-visible {
  background: #5f796e;
}
/* Dark mode: the pagewrap keeps its white paper (app rule - the document
   stays light), so the headline keeps its ink color in both themes. */

/* Reader-focus: the fixed home logo (bb-sidebar's .sidebar-home-logo, z-index
   1100) sits on top of the open PDF paper and pulls the eye away from the
   document (Morten 2026-07-06: "very disturbing"). The reader toggles
   body.ss-pdf-reader-open (chat-pdf-reader.js openReader/closeReader), so the
   logo returns the moment the reader closes. display:none also drops the
   link from tab-order while hidden. */
/* Specificity: skrivsikkert-shared.css draws the logo via
   :is(.app-layout.has-bb-sidebar, .app-layout, .app) > .sidebar-home-logo
   { display:flex } = (0,3,0), which beats a plain body-class descendant
   (0,2,1) - live-proven on developapplication (computed stayed flex).
   Mirror the source selector under the reader body class instead. */
body.ss-pdf-reader-open :is(.app-layout.has-bb-sidebar, .app-layout, .app) > .sidebar-home-logo,
body.ss-pdf-reader-open .sidebar-home-logo {
  display: none;
}