/*----------------  Alerts button animation and style ----------------------------- */



/* ===== Alerts: scoped tokens + readable text + better buttons ===== */

/* panel-local palette (doesn't touch the rest of the app) */
.alert-panel{
  --ap-surface:#ffffff;
  --ap-text:#0f172a;
  --ap-muted:#6b7280;
  --ap-border:#e6e9ee;
  --ap-primary: var(--primary, #7159F5);
  --ap-primary-600: var(--primary-600, #5b40d6);
  color: var(--ap-text);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--ap-border);
}

/* head text contrast */
.alert-panel .ap-head .ttl{ color: var(--ap-text); }
.alert-panel .ap-head .meta{ color: var(--ap-muted); }

/* list area contrast */
.alert-panel #apList{ color: var(--ap-text); }

/* alert cards */
.ap-item{
  background: linear-gradient(180deg, #fff 0%, #fff9f9 100%);
  border: 1px solid #f7caca;
  box-shadow: 0 8px 20px rgba(239,68,68,.07);
}
.ap-item .title{ color: var(--ap-text); }
.ap-item .desc{ color: var(--ap-text); opacity: .92; }
.ap-item .meta{ color: var(--ap-muted); }
.ap-item::before{
  /* slimmer, crisp left stripe (fixes the “half circles” look) */
  width: 4px; left: -1px; border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, #ef4444, #f59e0b);
}

/* -------- Buttons: neutral base, blue only when active -------- */
.pill-mini,
#apRefresh,
#apReadAll{
  position: relative;
  overflow: hidden;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--ap-border);
  background: #fff;
  color: var(--ap-text);
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.pill-mini:hover,
#apRefresh:hover,
#apReadAll:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(2,6,23,.10);
}
.pill-mini:active,
#apRefresh:active,
#apReadAll:active{
  transform: translateY(0) scale(.98);
}

/* active/selected look = brand blue */
.pill-mini.active{
  background: linear-gradient(90deg, var(--ap-primary), var(--ap-primary-600));
  color:#fff;
  border-color: transparent;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--ap-primary) 30%, transparent);
}

/* “Mark all read” and “Refresh” become primary only when you add .is-primary (optional) */
#apReadAll.is-primary,
#apRefresh.is-primary{
  background: linear-gradient(90deg, var(--ap-primary), var(--ap-primary-600));
  color:#fff; border-color: transparent;
}

/* press ripple (centered, no JS) */
.pill-mini::after,
#apRefresh::after,
#apReadAll::after{
  content:"";
  position:absolute; inset:auto;
  left:50%; top:50%;
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.55);
  transform: translate(-50%,-50%) scale(0);
  opacity: 0; pointer-events:none;
}
.pill-mini:active::after,
#apRefresh:active::after,
#apReadAll:active::after{
  animation: ap-ripple .45s ease-out;
}
@keyframes ap-ripple{
  0%{ transform: translate(-50%,-50%) scale(0); opacity:.5; }
  100%{ transform: translate(-50%,-50%) scale(22); opacity:0; }
}

/* badge/bell keep your theme; make sure unread pop stays visible over glass */
#alertBadge{
  background: var(--ap-primary);
  color:#fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 8px 18px rgba(2,6,23,.12);
}

/* panel open animation stays subtle (no blur wash-out) */
#alertPanel{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform-origin: top right;
  transform: translateY(-6px) scale(.985);
  opacity: 0; visibility: hidden;
  transition: transform .18s ease, opacity .18s ease, visibility 0s .18s;
}
#alertPanel.open{
  transform: translateY(0) scale(1);
  opacity: 1; visibility: visible;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.pill-mini.active{ background-size:200% 100%; background-image: linear-gradient(90deg, var(--ap-primary), var(--ap-primary-600)); }
/* ===== Alerts: shiny splash only on active/flagged buttons ===== */
/* Apply to: .pill-mini.active  OR add .is-shiny to any button you want */
.pill-mini.active,
#apRefresh.is-primary.is-shiny,
#apReadAll.is-primary.is-shiny,
.ap-btn.is-shiny{
  position: relative;
  overflow: hidden;           /* contains the shine */
  background: linear-gradient(90deg, var(--ap-primary), var(--ap-primary-600));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--ap-primary) 30%, transparent);
}

/* the moving shine */
.pill-mini.active::before,
#apRefresh.is-primary.is-shiny::before,
#apReadAll.is-primary.is-shiny::before,
.ap-btn.is-shiny::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 45%,
    rgba(255,255,255,.55) 50%,
    transparent 55%,
    transparent 100%);
  transform: translateX(-130%);
  animation: btn-shine 1.9s linear infinite;
  mix-blend-mode: screen;     /* bright but subtle on any color */
  pointer-events: none;
}

/* nicer on hover: slightly faster sweep */
.pill-mini.active:hover::before,
#apRefresh.is-primary.is-shiny:hover::before,
#apReadAll.is-primary.is-shiny:hover::before,
.ap-btn.is-shiny:hover::before{
  animation-duration: 1.6s;
}

@keyframes btn-shine{
  to { transform: translateX(130%); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .pill-mini.active::before,
  #apRefresh.is-primary.is-shiny::before,
  #apReadAll.is-primary.is-shiny::before,
  .ap-btn.is-shiny::before{ animation: none; }
}

/* ===== Alerts: bell icon + badge only (clean + premium) ===== */

/* Bell container */
#alertBell{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: #fff;                           /* stays neutral */
  border: 1px solid #e6e9ee;
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
#alertBell:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(2,6,23,.16);
  filter: saturate(1.04);
}
#alertBell:active{ transform: translateY(0) scale(.98); }

/* Icon sizing + color */
#alertBell .bell, #alertBell svg{
  width: 22px; height: 22px; display:block;
  color: var(--primary, #7159F5);             /* brand hint */
  stroke: currentColor; fill: none;
}

/* Badge (count) */
#alertBadge{
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; line-height: 1;
  color: #fff;
  background: linear-gradient(90deg, var(--primary, #7159F5), var(--primary-600, #5b40d6));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),           /* white ring so it stands over glass */
    0 10px 22px rgba(113,89,245,.28);          /* soft glow */
}

/* When unread count changes, pop (your JS toggles .pop) */
#alertBadge.pop{
  animation: badgePop .32s cubic-bezier(.2,.9,.2,1);
}
@keyframes badgePop{
  0%{ transform: scale(.6); opacity:.6; }
  60%{ transform: scale(1.15); opacity:1; }
  100%{ transform: scale(1); }
}

/* Subtle attention state on the whole bell (your JS adds .attn) */
#alertBell.attn{
  box-shadow: 0 12px 28px rgba(2,6,23,.18);
}
#alertBell.attn::before{
  content:"";
  position:absolute; inset:-6px; border-radius:16px;
  background: radial-gradient(closest-side, rgba(113,89,245,.20), transparent 70%);
  animation: bellHalo 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bellHalo{
  0%,100%{ transform: scale(.98); opacity:.5 }
  50%    { transform: scale(1.03); opacity:.85 }
}

/* Light theme tweaks so it still looks crisp */
body.light #alertBell{ background:#fff; border-color:#e6e9ee; box-shadow: 0 8px 18px rgba(2,6,23,.08); }
body.light #alertBadge{ box-shadow: 0 0 0 2px #fff, 0 10px 22px rgba(113,89,245,.24); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #alertBell.attn::before, #alertBadge.pop{ animation: none !important; }
}


/* ===== Bell icon + count: tidy, black icon, blue badge (final overrides) ===== */

/* keep it near the header’s top-right */
#alertBell{
  position: fixed;
  top: 10px;              /* little higher */
  right: 22px;
  z-index: 120;           /* above sticky header */
  width: 44px; height: 44px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  border: 1px solid #e6e9ee;
  box-shadow: 0 10px 22px rgba(2,6,23,.12);

  color: #0f172a !important;   /* BLACK icon */
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
#alertBell:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(2,6,23,.16); }
#alertBell:active{ transform: translateY(0) scale(.98); }

/* make sure any svg/ico inside follows the black color and sits centered */
#alertBell .bell,
#alertBell svg{
  width: 22px; height: 22px;
  display: block;
  color: currentColor;       /* inherits the black above */
  stroke: currentColor;
  fill: none;                /* avoids solid blue fills */
  line-height: 1;
}

/* badge = BLUE (only the count is blue) */
#alertBadge{
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;

  font-weight: 800; font-size: 12px; line-height: 1;
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  box-shadow: 0 0 0 2px #fff, 0 10px 22px rgba(59,130,246,.28);
}

/* keep the gentle halo when there are unread items (JS toggles .attn) */
#alertBell.attn::before{
  content:"";
  position:absolute; inset:-6px; border-radius:16px;
  background: radial-gradient(closest-side, rgba(59,130,246,.20), transparent 70%);
  animation: bellHalo 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bellHalo{
  0%,100%{ transform: scale(.98); opacity:.5 }
  50%    { transform: scale(1.03); opacity:.85 }
}