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