/* ===== Notification banners ===== */
#banners {
  position:fixed; top:calc(var(--topbar-h) + 8px); left:50%; transform:translateX(-50%);
  z-index:7000; display:flex; flex-direction:column; gap:9px; align-items:center;
  pointer-events:none; width:min(420px, calc(100vw - 24px));
}
.banner {
  pointer-events:auto; width:100%;
  background:color-mix(in srgb, var(--menu-bg) 94%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-radius:16px; box-shadow:0 10px 34px rgba(0,0,0,.4), inset 0 0 0 1px var(--border);
  padding:11px 13px; display:flex; gap:11px; cursor:pointer; position:relative;
  animation:banner-in .26s cubic-bezier(.3,1.1,.4,1);
}
@keyframes banner-in { from { opacity:0; transform:translateY(-14px) scale(.97); } }
.banner.out { animation:banner-out .18s ease forwards; }
@keyframes banner-out { to { opacity:0; transform:translateY(-12px) scale(.97); } }
.banner .b-icon { width:34px; height:34px; flex:none; margin-top:2px; }
.banner .b-icon img, .banner .b-icon svg { width:100%; height:100%; }
.banner .b-main { flex:1; min-width:0; }
.banner .b-title { font-size:13.5px; font-weight:700; padding-right:18px; }
.banner .b-body { font-size:12.5px; color:var(--fg-dim); line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; user-select:text; }
.banner .b-actions { display:flex; gap:8px; margin-top:8px; }
.banner .b-actions button {
  border:none; border-radius:99px; padding:5px 14px; font-size:12.5px; font-weight:700; cursor:pointer;
  background:color-mix(in srgb, var(--fg) 10%, transparent); color:var(--fg);
}
.banner .b-actions button:hover { background:color-mix(in srgb, var(--fg) 17%, transparent); }
.banner .b-close {
  position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:99px; border:none;
  background:transparent; color:var(--fg-dim); cursor:pointer; display:none; align-items:center; justify-content:center;
}
.banner:hover .b-close { display:flex; }
.banner .b-close:hover { background:var(--hover-row); color:var(--fg); }
.banner .b-close svg { width:11px; height:11px; fill:currentColor; }

/* critical banner accent strip */
.banner.critical { box-shadow:0 10px 34px rgba(0,0,0,.45), inset 0 0 0 1.5px var(--danger); }