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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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