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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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