/* Confirmations and notices use the same compact visual language as the workspace. */
@media screen {
  dialog.app-message-dialog.app-message-dialog {
    --app-message-font: var(--ui-font, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif);
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(620px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    height: fit-content;
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 1px solid #bdcbd7;
    border-radius: 3px;
    background: #fff;
    color: #263f53;
    font-family: var(--app-message-font);
    box-shadow: 0 12px 38px #1e35422e;
    box-sizing: border-box;
    overflow: hidden;
  }

  dialog.app-message-dialog::backdrop { background: #172b3a66; }
  dialog.app-message-dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); margin: 0; }
  dialog.app-message-dialog header { flex: none; max-width: none; margin: 0; padding: 12px 16px; background: #e8eff5; border-bottom: 1px solid #c5d2dd; }
  dialog.app-message-dialog h2 { margin: 0; color: #263f53; font: 600 16px/1.3 var(--app-message-font); }
  dialog.app-message-dialog .app-message-body { min-height: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px 16px; color: #263f53; font: 400 13px/1.5 var(--app-message-font); overscroll-behavior: contain; }
  dialog.app-message-dialog footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #f4f7f9; border-top: 1px solid #c5d2dd; }

  dialog.app-message-dialog button,
  body:has(#loginPanel) dialog.app-message-dialog button {
    padding: 7px 14px;
    border: 1px solid #aebfca;
    border-radius: 3px;
    background: #fff;
    color: #29475f;
    font: 500 13px/1.35 var(--app-message-font);
    cursor: pointer;
  }
  dialog.app-message-dialog button:hover:not(:disabled),
  body:has(#loginPanel) dialog.app-message-dialog button:hover:not(:disabled) { background: #edf3f7; }
  dialog.app-message-dialog [data-accept],
  body:has(#loginPanel) dialog.app-message-dialog [data-accept] { background: #3e5666; border-color: #3e5666; color: #fff; font-weight: 600; }
  dialog.app-message-dialog [data-accept]:hover:not(:disabled),
  body:has(#loginPanel) dialog.app-message-dialog [data-accept]:hover:not(:disabled) { background: #304b5d; border-color: #304b5d; }
  dialog.app-message-dialog button:disabled { cursor: not-allowed; opacity: .55; }
  dialog.app-message-dialog button:focus-visible { outline: 2px solid #526c83; outline-offset: 2px; }
}