/* In-app notifications (notify.js): a frosted banner under the status bar, like a phone's push notification. */
/* Safari gives a popover `height: fit-content`, which it resolves to the whole screen below `top`: the
   banner then stretched to a full-screen frosted panel. Height and alignment are set here explicitly. */
.tm-ntf-host {
  position: fixed; inset: calc(env(safe-area-inset-top, 0px) + 8px) 8px auto; z-index: 2147483000;
  width: auto; height: auto; min-height: 0; max-height: none; max-width: 440px; margin: 0 auto; padding: 0; border: 0; background: transparent; overflow: visible;
  display: grid; align-items: start; align-content: start; pointer-events: none; color: #0B0F14;
}
.tm-ntf-host[popover]:not(:popover-open) { display: none; }
.tm-ntf {
  grid-area: 1 / 1; align-self: start; height: auto; box-sizing: border-box; pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 11px; min-height: 64px; padding: 11px 12px; padding-inline-start: 11px;
  border-radius: 22px; background: rgba(250, 250, 249, .84);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 12px 34px rgba(11, 15, 20, .2), 0 1px 3px rgba(11, 15, 20, .08), inset 0 0 0 .5px rgba(11, 15, 20, .08);
  font: 500 15px/1.3 "Manrope", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: default;
  opacity: 0; transform: translateY(calc(-100% - 24px));
  transition: transform .42s cubic-bezier(.2, .9, .25, 1.08), opacity .2s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tm-ntf { background: #FAFAF9; } }
.tm-ntf.in { opacity: 1; transform: none; }
.tm-ntf.out { opacity: 0; transform: translateY(calc(-100% - 24px)); transition: transform .28s cubic-bezier(.4, 0, .9, .6), opacity .22s ease .06s; }
.tm-ntf.out-fast { opacity: 0; transform: translateY(-14px) scale(.97); transition: transform .18s ease, opacity .16s ease; }
.tm-ntf-app { position: relative; flex: none; width: 38px; height: 38px; }
.tm-ntf-app img { width: 38px; height: 38px; display: block; border-radius: 10px; box-shadow: inset 0 0 0 .5px rgba(11, 15, 20, .1); }
.tm-ntf-badge {
  position: absolute; inset-block-end: -4px; inset-inline-end: -5px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; color: #FFF; font: 900 12px/1 "Manrope", system-ui, sans-serif;
  box-shadow: 0 0 0 2px rgba(250, 250, 249, .95);
}
.tm-ntf-badge ph-icon { display: inline-flex; }
.tm-ntf-success .tm-ntf-badge { background: #1F8F4A; }
.tm-ntf-error .tm-ntf-badge { background: #FF5400; }
.tm-ntf-tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tm-ntf-hd { display: flex; align-items: baseline; gap: 8px; }
.tm-ntf-hd b { flex: 1; min-width: 0; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-ntf-hd time { flex: none; font-size: 13px; font-weight: 500; color: rgba(11, 15, 20, .5); }
.tm-ntf-msg { font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tm-ntf-act {
  flex: none; align-self: center; min-height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px; border: 0; border-radius: 999px; background: rgba(11, 15, 20, .08); color: #0B0F14;
  font: 800 14px/1 "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tm-ntf-act:active { background: rgba(11, 15, 20, .16); }
.tm-ntf-act:focus-visible { outline: 3px solid #FF5400; outline-offset: 2px; }
/* A long action label goes on its own line, under the message. */
.tm-ntf-wide { flex-wrap: wrap; }
.tm-ntf-wide .tm-ntf-act { box-sizing: border-box; flex: 1 1 calc(100% - 49px); margin-inline-start: 49px; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 14px; }
html[lang="ar"] .tm-ntf, html[lang="ar"] .tm-ntf-act { font-family: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif; }
@media (min-width: 768px) { .tm-ntf-host { inset-inline: auto 16px; inset-block-start: 16px; width: 380px; margin: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tm-ntf, .tm-ntf.in, .tm-ntf.out, .tm-ntf.out-fast { transform: none; transition: opacity .2s ease; }
}