/** Mail terminal notices, light Contacts feedback and shared routine activity.
 * Native stack placement, timers, live-region semantics and dismissal remain
 * upstream-owned. Uploading and dialogs are excluded. Compact chrome
 * stays native; only long notice text gets a non-regression wrapping guard.
 */
body.task-mail #messagestack > .content.ui.alert:is(.notice, .confirmation, .warning, .error) > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media screen and (min-width: 769px) {
  /* Contacts search/group feedback uses the same native message structure.
     Keep mixed severity, loading/uploading and dark/compact notices native. */
  body.task-mail #messagestack > .content.ui.alert:is(.notice, .confirmation, .warning, .error),
  html:not(.iframe):not(.dark-mode) body.task-addressbook #messagestack > .content.ui.alert:is(.notice, .confirmation):not(.loading, .uploading, .warning, .error) {
    box-sizing: border-box;
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px !important;
    border: 1px solid var(--cm-color-border) !important;
    border-radius: var(--cm-radius-control) !important;
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface) !important;
    box-shadow: 0 4px 16px rgb(15 23 42 / 10%);
    font: 500 13px/20px var(--cm-font-sans) !important;
    text-align: left;
    overflow-wrap: anywhere;
  }

  body.task-mail #messagestack > .content.ui.alert:is(.notice, .confirmation, .warning, .error) > span,
  html:not(.iframe):not(.dark-mode) body.task-addressbook #messagestack > .content.ui.alert:is(.notice, .confirmation):not(.loading, .uploading, .warning, .error) > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Elastic inserts this native icon slot on its message event. Replace only
     its paint; no extra control, label or close handler is introduced. */
  body.task-mail #messagestack > .content.ui.alert:is(.notice, .confirmation, .warning, .error) > i.icon,
  html:not(.iframe):not(.dark-mode) body.task-addressbook #messagestack > .content.ui.alert:is(.notice, .confirmation):not(.loading, .uploading, .warning, .error) > i.icon {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 1px 0 0 !important;
    color: var(--cm-color-accent-strong);
  }

  body.task-mail #messagestack > .content.ui.alert:is(.notice, .confirmation, .warning, .error) > i.icon::before,
  html:not(.iframe):not(.dark-mode) body.task-addressbook #messagestack > .content.ui.alert:is(.notice, .confirmation):not(.loading, .uploading, .warning, .error) > i.icon::before {
    display: block;
    width: 18px;
    height: 18px;
    content: "" !important;
    /* Late Elastic alert pseudo-rules otherwise keep white icon-font paint. */
    color: inherit !important;
    background: currentColor;
    -webkit-mask: url("../assets/icons/ui/lucide/regular/info.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/regular/info.svg") center / contain no-repeat;
  }

  body.task-mail #messagestack > .confirmation.content.ui.alert > i.icon::before,
  html:not(.iframe):not(.dark-mode) body.task-addressbook #messagestack > .confirmation.content.ui.alert:not(.loading, .uploading, .warning, .error) > i.icon::before {
    -webkit-mask-image: url("../assets/icons/ui/lucide/regular/check.svg");
    mask-image: url("../assets/icons/ui/lucide/regular/check.svg");
  }

  body.task-mail #messagestack > :is(.warning, .error).content.ui.alert > i.icon::before {
    -webkit-mask-image: url("../assets/icons/ui/lucide/regular/triangle-alert.svg");
    mask-image: url("../assets/icons/ui/lucide/regular/triangle-alert.svg");
  }

  /* Amber is decorative at this token's light contrast; retain a readable
     warning symbol instead of using it for essential graphical information. */
  body.task-mail #messagestack > .warning.content.ui.alert > i.icon {
    color: var(--cm-color-text);
  }

  body.task-mail #messagestack > .error.content.ui.alert {
    background: var(--cm-color-danger-soft) !important;
  }

  body.task-mail #messagestack > .error.content.ui.alert > i.icon {
    color: var(--cm-color-danger);
  }

  html.dark-mode body.task-mail #messagestack > .content.ui.alert:is(.notice, .confirmation, .warning, .error) {
    box-shadow: 0 4px 16px rgb(0 0 0 / 28%);
  }

  /* Task redirects create loading in the outgoing shell; initial lists create
     it in the incoming shell. Cover both without touching login/plugin tasks.
     Upload progress also receives .loading from Elastic: keep it separate. */
  body:is(.task-mail, .task-addressbook, .task-settings) #messagestack > .content.ui.alert.loading:not(.uploading, .notice, .confirmation, .warning, .error) {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    margin-inline-start: auto;
    padding: 8px 12px !important;
    border: 1px solid var(--cm-color-border) !important;
    /* Half the single-line height; fixed corners also protect wrapped labels. */
    border-radius: 17px !important;
    color: var(--cm-color-text-muted) !important;
    background: var(--cm-color-surface-subtle) !important;
    box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
    font: 500 12px/16px var(--cm-font-sans) !important;
    text-align: start;
  }

  body:is(.task-mail, .task-addressbook, .task-settings) #messagestack > .content.ui.alert.loading:not(.uploading, .notice, .confirmation, .warning, .error) > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Retain the native spinner and its normal animation, only reduce its paint. */
  body:is(.task-mail, .task-addressbook, .task-settings) #messagestack > .content.ui.alert.loading:not(.uploading, .notice, .confirmation, .warning, .error) > i.icon {
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    color: inherit !important;
  }

  body:is(.task-mail, .task-addressbook, .task-settings) #messagestack > .content.ui.alert.loading:not(.uploading, .notice, .confirmation, .warning, .error) > i.icon::before {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px !important;
    line-height: 16px;
    color: inherit !important;
  }

  html.dark-mode body:is(.task-mail, .task-addressbook, .task-settings) #messagestack > .content.ui.alert.loading:not(.uploading, .notice, .confirmation, .warning, .error) {
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
  }
}

@media screen and (min-width: 769px) and (prefers-reduced-motion: reduce) {
  body:is(.task-mail, .task-addressbook, .task-settings) #messagestack > .content.ui.alert.loading:not(.uploading, .notice, .confirmation, .warning, .error) > i.icon::before {
    animation: none !important;
  }
}