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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Per-field dictation mic: 32×32, top-right, sage wash ----
   SCOPE (#mikrofonfix): hver regel herunder er bundet til .calm-field-wrap.
   Uden den binding ramte `.calm-prompt-form-mode .cvm-mic` OGSAA AI-dokkens
   composer-mikrofon — samme klasse, anden komponent — og position:absolute
   !important rev den ud af composeren og op i panelets oeverste hoejre hjoerne
   (browser-maalt: 290px over composeren ved 700px viewport). Under
   .ss-mic--connecting er ikonet opacity:0, saa det eneste synlige var
   spinner-ringen, der svaevede midt i panelet. En <=640px-lap i
   chat-ny-blod-bolge.css (.cvm-composer .cvm-mic{position:static}) daekkede
   kun telefonbredder; baandet fra 641px og op var stadig i stykker.
   #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. */
/* (0,4,0) — den generiske .calm-field-wrap-regel nedenfor er nu ogsaa (0,3,0)
   og staar senere i filen; uden den ekstra klasse ville dens 8px vinde her. */
.calm-prompt-form-mode .calm-field-wrap.calm-field-wrap--textarea .cvm-mic {
  inset-inline-end: 20px !important;
}

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

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

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

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

/* ---- Connecting: muted sage wash ---- */
.calm-prompt-form-mode .calm-field-wrap .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 .calm-field-wrap .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 .calm-field-wrap .cvm-mic.ss-mic--error {
  background: rgba(194, 96, 63, 0.12) !important;
  color: #C2603F !important;
}

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

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

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

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

[data-theme="dark"] .calm-prompt-form-mode .calm-field-wrap .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 .calm-field-wrap .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 .calm-field-wrap .cvm-mic {
    transition: none !important;
  }

  .calm-prompt-form-mode .calm-field-wrap .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 .calm-field-wrap .cvm-mic {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
  }

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

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

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

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

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

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

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

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

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