/* Shared destructive action, using each skin's readable danger/surface tokens. */
body button[data-hold-delete],
body.ai-chat-page .ai-chat-history-item > button[data-hold-delete] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 5.75em;
  max-width: 100%;
  min-height: 44px;
  height: auto;
  padding: 8px 10px;
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  overflow: hidden;
  transform: none !important;
  text-shadow: none;
  box-shadow: none;
  opacity: 1;
  background: linear-gradient(
    var(--hold-fill-direction, to right),
    var(--danger) 0 var(--hold-progress, 0%),
    var(--bg-card) var(--hold-progress, 0%) 100%
  ) !important;
}
body button[data-hold-delete]::after {
  content: attr(data-hold-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: inherit;
  overflow: hidden;
  color: var(--bg-card);
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: inherit;
  clip-path: inset(0 calc(100% - var(--hold-progress, 0%)) 0 0);
  pointer-events: none;
}
/* The charge always enters from a short edge: left for wide controls, bottom for tall controls. */
body button[data-hold-delete][data-hold-axis="vertical"] {
  --hold-fill-direction: to top;
}
body button[data-hold-delete][data-hold-axis="vertical"]::after {
  clip-path: inset(calc(100% - var(--hold-progress, 0%)) 0 0 0);
}
body button[data-hold-delete]:focus-visible { outline: 2px solid var(--danger); outline-offset: 3px; }
body button[data-hold-delete]:disabled { opacity: .55; cursor: wait; }
body button[data-hold-charging] { outline: 2px solid var(--danger); outline-offset: 2px; }
.hold-delete-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Former icon-only slots need real space for their new text controls. */
body .sfxr-fav-slots { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
body .sfxr-fav-slot.filled { flex-direction: column; gap: 6px; padding: 8px; }
body .sfxr-fav-label { padding: 0; }
body .sfxr-fav-slot button[data-hold-delete] { position: relative; inset: auto; width: 100%; }
body .notes-doc-card:has([data-hold-delete]) { display: flex; flex-direction: column; }
body .notes-doc-card:has([data-hold-delete]) .notes-doc-actions { position: static; order: 2; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
body .notes-doc-card:has([data-hold-delete]) .notes-doc-link { padding-right: 0; flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) {
  body button[data-hold-delete] { transition: none; }
}
@media (forced-colors: active) {
  body button[data-hold-delete] {
    forced-color-adjust: none;
    color: ButtonText !important;
    background: linear-gradient(
      var(--hold-fill-direction, to right),
      Highlight 0 var(--hold-progress, 0%),
      ButtonFace var(--hold-progress, 0%) 100%
    ) !important;
    border-color: ButtonText !important;
  }
  body button[data-hold-delete]::after { color: HighlightText; }
}