.banner-root {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(88px + var(--safe-b));
  z-index: 1150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
body[data-searching="true"] .banner-root { bottom: auto; top: 118px; }
.banner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  animation: banner-in 240ms ease;
}
.banner.is-leaving { animation: banner-out 200ms ease forwards; }
.banner-glyph { flex: 0 0 auto; opacity: 0.9; }
.banner-message { flex: 1; font-size: var(--fs-14); line-height: 1.35; }
.banner-action {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-12);
  font-weight: 600;
}
.banner-action:hover { background: var(--mist); }
.banner-dismiss { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; color: var(--paper); opacity: 0.75; }
.banner-dismiss:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.banner-warn { background: var(--amber); }
@keyframes banner-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes banner-out { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } }
@media (min-width: 900px) {
  .banner-root { left: auto; right: 424px; bottom: 110px; max-width: 360px; }
}