/* All in-page action windows in the cabinet share the same right edge. */
body.authenticated-app dialog,
body.authenticated-app dialog[open]:modal {
  box-sizing: border-box;
  position: fixed;
  inset: 0 0 0 auto;
  width: min(var(--vseok-drawer-width, 580px), 100vw);
  min-width: 0;
  max-width: 100vw;
  height: var(--wh-viewport-height, 100dvh);
  max-height: var(--wh-viewport-height, 100dvh);
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-left: 1px solid #dbe4f0;
  border-radius: 0;
  background: #fff;
  box-shadow: -12px 0 50px rgba(34, 56, 79, .1);
}

body.authenticated-app dialog[open]:modal {
  animation: vseok-drawer-in .18s ease-out;
}

body.authenticated-app dialog::backdrop,
body.authenticated-app dialog[open]:modal::backdrop {
  background: rgba(30, 47, 69, .24);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

html:has(body.authenticated-app dialog:modal),
body.authenticated-app:has(dialog:modal) {
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(body.authenticated-app dialog:modal) { scrollbar-gutter: auto; }

/* Document comparisons and tables need more room, but remain drawers. */
body.authenticated-app dialog:is(
  .director-project-dialog, .sourcing-invoice-preview-dialog,
  .sourcing-attachment-viewer, .sourcing-alternative-review-dialog,
  .sourcing-reply-source-dialog, .commerce-review-dialog, .commerce-reply-dialog
) {
  --vseok-drawer-width: 1040px;
}

body.authenticated-app .wh-dialog.is-category { --vseok-drawer-width: 820px; }
body.authenticated-app .wh-dialog.is-category.with-assistant { --vseok-drawer-width: 1160px; }
body.authenticated-app .wh-dialog.is-settings { --vseok-drawer-width: 720px; }
body.authenticated-app .wh-dialog.is-chat { --vseok-drawer-width: 620px; }

/* Keep the existing header/body/footer layouts and scroll inside them. */
body.authenticated-app dialog[open]:modal:is(.wi-dialog, .director-project-dialog),
body.authenticated-app dialog[open]:modal.chat-dialog.is-picker,
body.authenticated-app dialog[open]:modal.wh-dialog:is(.is-chat, .is-category, .is-settings, .is-mobile-picker),
body.authenticated-app dialog[open]:modal:is(
  .mail-compose-dialog, .mail-drafts-dialog, .support-report-dialog,
  .sourcing-invoice-preview-dialog, .sourcing-attachment-viewer,
  .sourcing-reply-source-dialog, .commerce-review-dialog, .commerce-reply-dialog
) {
  overflow: hidden;
}

body.authenticated-app dialog > .dialog-card {
  box-sizing: border-box;
  height: 100%;
  max-height: none;
  align-content: start;
  border-radius: 0;
}

body.authenticated-app dialog > .premium-dialog-card {
  min-height: 100%;
  border-radius: 0;
}

body.authenticated-app .sourcing-reply-source-shell {
  height: 100%;
  max-height: none;
}

body.authenticated-app :is(.mail-compose-form, .support-report-form) {
  height: 100%;
  max-height: none;
  min-height: 0;
}

body.authenticated-app :is(.mail-compose-form, .support-report-form) > :is(header, footer) {
  flex: 0 0 auto;
}

body.authenticated-app .mail-compose-fields,
body.authenticated-app .support-report-body {
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
}

body.authenticated-app .support-report-body {
  grid-template-columns: minmax(0, 1fr);
}

body.authenticated-app .mail-drafts-dialog[open] {
  display: flex;
  flex-direction: column;
}

body.authenticated-app .mail-drafts-dialog > header { flex: 0 0 auto; }
body.authenticated-app .mail-drafts-dialog > [data-drafts-list] {
  flex: 1;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
}

@keyframes vseok-drawer-in {
  from { opacity: .75; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 600px) {
  body.authenticated-app dialog[open]:modal { border-left: 0; }
  body.authenticated-app dialog .wi-header {
    padding-top: max(16px, env(safe-area-inset-top));
  }
  body.authenticated-app dialog .wi-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.authenticated-app dialog[open]:modal { animation: none; }
}