/* Pinned headings include the panel's top padding in their own painted area.
   The wallet, brand form, and Skill dialogs have dedicated body scroll regions. */
.modal-card,
.tenant-dialog:not(.tenant-recharge-dialog),
.agent-memory-dialog,
.agent-memory-sheet,
.speech-modal,
.character-edit-dialog.character-create,
.cit {
  --dialog-head-gutter: 28px;
}

.modal-card.client-release-notes-dialog { --dialog-head-gutter: 26px; }
.modal-card.asset-delete-confirm-modal { --dialog-head-gutter: 24px; }
.modal-card.prompt-polish-modal,
.agent-memory-dialog,
.cit { --dialog-head-gutter: 22px; }
.tenant-dialog:not(.tenant-recharge-dialog) { --dialog-head-gutter: 30px; }
.agent-memory-sheet { --dialog-head-gutter: 24px; }
.speech-modal { --dialog-head-gutter: 25px; }
.character-edit-dialog.character-create { --dialog-head-gutter: 16px; }

:is(.modal-card, .tenant-dialog:not(.tenant-recharge-dialog), .speech-modal, .agent-memory-dialog, .agent-memory-sheet, .cit, .character-edit-dialog) {
  scroll-padding-block-start: min(135px, 32dvh);
}

.modal-card > .modal-head,
.tenant-dialog > .tenant-dialog-pinned-head,
:is(.speech-modal, .agent-memory-dialog, .agent-memory-sheet, .cit) > header,
.character-edit-dialog > .character-create-title,
.workflow-editor > header,
.announcement-user-dialog > .announcement-pinned-head {
  position: sticky;
  inset-block-start: var(--dialog-head-gutter, 0px);
  z-index: 5;
  background-color: inherit;
}

html .modal-card:not(.wallet-dialog, .brand-kit-dialog, .skill-fixed-modal, .prompt-guide-editor, .asset-delete-confirm-modal),
.tenant-dialog:has(> .tenant-dialog-pinned-head),
.speech-modal,
.agent-memory-dialog,
.agent-memory-sheet,
.cit,
.character-edit-dialog.character-create {
  padding-block-start: 0;
}

.modal-card:not(.wallet-dialog, .brand-kit-dialog, .skill-fixed-modal, .prompt-guide-editor, .asset-delete-confirm-modal) > .modal-head,
.tenant-dialog > .tenant-dialog-pinned-head,
:is(.speech-modal, .agent-memory-dialog, .agent-memory-sheet, .cit) > header,
.character-edit-dialog > .character-create-title {
  inset-block-start: 0;
  padding-block-start: var(--dialog-head-gutter);
}

.modal-card:not(.wallet-dialog, .brand-kit-dialog, .skill-fixed-modal, .prompt-guide-editor, .asset-delete-confirm-modal) > .modal-head {
  --dialog-head-cover-after: 24px;
}

.modal-card.prompt-polish-modal > .modal-head { --dialog-head-cover-after: 12px; }

.modal-card:not(.wallet-dialog, .brand-kit-dialog, .skill-fixed-modal, .prompt-guide-editor, .asset-delete-confirm-modal) > .modal-head::before,
.tenant-dialog > .tenant-dialog-pinned-head::before,
:is(.speech-modal, .agent-memory-dialog, .agent-memory-sheet, .cit) > header::before,
.character-edit-dialog > .character-create-title::before {
  content: "";
  position: absolute;
  inset: 0 calc(0px - var(--dialog-head-gutter)) calc(0px - var(--dialog-head-cover-after, 0px));
  z-index: -1;
  background-color: inherit;
  pointer-events: none;
}

.modal-card > .modal-head > div { min-width: 0; overflow-wrap: anywhere; }
.modal-card > .modal-head > .icon-btn { flex-shrink: 0; }

.tenant-dialog > .tenant-dialog-pinned-head,
.announcement-user-dialog > .announcement-pinned-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tenant-dialog-pinned-head h2,
.announcement-pinned-head h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.tenant-dialog-pinned-head > .icon-btn,
.announcement-pinned-head > .icon-btn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
}

.workflow-editor { scroll-padding-block: 75px 80px; }
.announcement-user-dialog { scroll-padding-block-start: 100px; }
.announcement-pinned-head { padding: 12px 22px; border-bottom: 1px solid var(--oa-border, #8885); }
.announcement-pinned-head h2 { font-size: 19px; line-height: 1.35; }

@media (max-width: 700px) {
  .modal-card.asset-delete-confirm-modal { --dialog-head-gutter: 20px; }
  .modal-card.elevator-short-modal.skill-fixed-modal { --dialog-head-gutter: 16px; }
  .agent-memory-sheet { --dialog-head-gutter: 18px; }
  .cit { --dialog-head-gutter: 16px; }
}

/* The member recharge list is also embedded in other dialogs. Pin only its
   standalone header, where it has its own close control. */
.tenant-dialog.member-credit-history { padding-block-start: 0; }
.tenant-dialog.member-credit-history > .member-credit-history {
  display: flow-root;
  background-color: inherit;
}
.tenant-dialog.member-credit-history > .member-credit-history > .tenant-heading {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  padding-block-start: var(--dialog-head-gutter);
  background-color: inherit;
}

@media (max-width: 800px) {
  .tenant-dialog:not(.tenant-recharge-dialog) { --dialog-head-gutter: 22px; }
}

@media (max-width: 760px) {
  .speech-modal { --dialog-head-gutter: 20px; }
}

/* This body wrapper is already rendered by the shared dialog. Its own scroll
   region keeps brand form controls out of the header's stacking context. */
.modal-card.brand-kit-dialog {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100dvh - 48px);
}

.modal-card.brand-kit-dialog > .modal-head { flex: none; min-width: 0; }
.modal-card.brand-kit-dialog > .brand-kit-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 700px) {
  .modal-card.brand-kit-dialog { max-height: calc(100dvh - 24px); }
}
@media (max-width: 1100px) {
  .skill-package-list > article > .skill-package-workflow {
    display: block;
    grid-column: 2 / -1;
    justify-self: start;
  }
}
.actor-market-detail,
.actor-market-publish {
  --actor-dialog-gutter: 26px;
  scroll-padding-block-start: min(92px, 28dvh);
}

:is(.actor-market-detail, .actor-market-publish) > .actor-market-pinned-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  padding-block-start: var(--actor-dialog-gutter);
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: inherit;
}

.actor-market-pinned-head::before {
  content: "";
  position: absolute;
  inset: 0 calc(0px - var(--actor-dialog-gutter));
  z-index: -1;
  background-color: inherit;
  pointer-events: none;
}

.actor-market-pinned-head > h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.actor-market-pinned-head > .actor-market-close {
  position: static;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  background: transparent;
}

@media (max-width: 700px) {
  .actor-market-detail { --actor-dialog-gutter: 18px; }
  .actor-market-publish { --actor-dialog-gutter: 20px; }
  .actor-market-detail > .actor-market-pinned-head { margin-bottom: 14px; }
}

.actor-market-detail,
.actor-market-publish { padding-block-start: 0; }

/* The summary sits outside the clipped ledger, including during period changes. */
.modal-card.wallet-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.wallet-dialog > :is(.modal-head, .wallet-balance-card) {
  position: relative;
  inset-block-start: auto;
  flex: none;
}

.wallet-dialog > .wallet-ledger {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-height: 600px) {
  .modal-card.wallet-dialog {
    max-height: calc(100dvh - 32px);
    padding: 18px;
  }

  .wallet-dialog > .modal-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .wallet-dialog > .wallet-balance-card {
    min-height: 0;
    padding: 12px;
  }

  .wallet-dialog .wallet-balance-card b {
    margin-block: 3px;
    font-size: clamp(20px, 5vw, 28px);
  }

  .wallet-dialog .wallet-bill-shortcut {
    top: 10px;
    right: 10px;
  }

  .wallet-dialog > .wallet-ledger { margin-top: 12px; }
}

@media (max-height: 440px) {
  .modal-card.wallet-dialog {
    max-height: calc(100dvh - 24px);
    padding: 12px;
  }

  .wallet-dialog > .modal-head :is(.kicker, p) { display: none; }
}