/* 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/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-left: -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-left: 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-left: 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/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-left: auto !important;
  margin-right: 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;
}

[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;
  right: 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-left: 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;
  }

  .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-right: 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-left: auto !important;
  margin-right: 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-left: auto !important;
  margin-right: 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-left: auto !important;
  margin-right: 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: 0 0 10px 2px !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-left: 12px !important;
    margin-right: 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-left: 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: 12px 46px 12px 14px !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-right: 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 {
  right: 20px !important;
}

.calm-prompt-form-mode .cvm-mic {
  position: absolute !important;
  top: 7px !important;
  right: 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-right: 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-right: 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 {
    right: 8px !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;
}