/* ============================================================
   BYP NOTIFICATIONS — PANEL + HEADER BELL
   ------------------------------------------------------------
   A lightweight SERVER-BACKED notice feed rendered inside the EXISTING
   reusable side-panel shell (byp-panel.js / byp-panels.js). There is no
   second drawer, modal or overlay.

   Palette: BLACK base, WHITE text, ELECTRIC PINK for unread attention,
   ELECTRIC BLUE + PURPLE for kind identity. No navy, no banned hues.
   ============================================================ */

/* --- the header bell (signed-in members only) --- */
.byp-bell{
  position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;z-index:939;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--rim-soft,rgba(255,255,255,.13));
  background:transparent;color:var(--white,#fff);
  cursor:pointer;padding:0;flex:0 0 auto;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.byp-bell:hover{border-color:var(--blue,#00e5ff);box-shadow:0 0 14px rgba(0,229,255,.3)}
.byp-bell:focus-visible{outline:2px solid var(--blue,#00e5ff);outline-offset:2px}
.byp-bell svg{width:19px;height:19px;display:block}
.byp-bell-count{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--pink,#ff2ec4);color:#fff;
  font-size:10px;font-weight:900;line-height:17px;text-align:center;
  box-shadow:0 0 10px rgba(255,46,196,.55);
}
.byp-bell-count[hidden]{display:none}
.byp-bell[hidden]{display:none}

/* --- the panel list --- */
.byp-notif-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 12px;flex-wrap:wrap;
}
.byp-notif-count{
  font-size:11px;font-weight:900;letter-spacing:.14em;
  color:var(--softblue,#7ce9ff);
}
.byp-notif{
  border:1px solid var(--rim-soft,rgba(255,255,255,.13));
  border-radius:14px;padding:13px 14px;margin:0 0 10px;
  background:var(--grad-surface-2,linear-gradient(180deg,rgba(255,255,255,.065),rgba(0,0,0,0)));
}
.byp-notif.is-unread{
  border-color:var(--rim-pink,rgba(255,46,196,.46));
  background-image:linear-gradient(150deg,rgba(255,46,196,.10),transparent 62%);
}
.byp-notif.is-read{opacity:.82}
.byp-notif-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.byp-notif-kind{
  font-size:9.5px;font-weight:900;letter-spacing:.14em;
  padding:3px 8px;border-radius:999px;
  border:1px solid var(--rim-soft,rgba(255,255,255,.13));
  color:var(--dim,rgba(255,255,255,.7));
}
.byp-notif-kind.is-connection{color:var(--pink,#ff2ec4);border-color:var(--rim-pink,rgba(255,46,196,.46))}
.byp-notif-kind.is-announcement{color:var(--blue,#00e5ff);border-color:var(--rim-blue,rgba(0,229,255,.44))}
.byp-notif-kind.is-system{color:var(--purple,#a855ff);border-color:var(--rim-purple,rgba(168,85,255,.44))}
.byp-notif-dot{
  width:7px;height:7px;border-radius:50%;background:var(--pink,#ff2ec4);
  box-shadow:0 0 8px rgba(255,46,196,.7);flex:0 0 auto;
}
.byp-notif-title{
  font-size:13px;font-weight:900;letter-spacing:.02em;
  color:var(--white,#fff);margin-bottom:5px;line-height:1.35;
}
.byp-notif-body{
  font-size:12.5px;line-height:1.55;color:var(--dim,rgba(255,255,255,.7));
  white-space:pre-wrap;
}
/* The WHOLE image, never a crop or a stretch. */
.byp-notif-img{
  display:block;width:100%;height:auto;max-width:100%;
  margin-top:10px;border-radius:10px;
}
.byp-notif-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:11px;flex-wrap:wrap;
}
.byp-notif-when{font-size:11px;color:var(--dim2,rgba(255,255,255,.45))}

@media (max-width:520px){
  .byp-notif-head{flex-direction:column;align-items:stretch}
  .byp-notif-foot .cbtn{width:100%}
}

/* ============================================================
   BYP EVENTS / UNIVERSAL ROOM — OVERLAY CLEANUP
   ------------------------------------------------------------
   The old first-time checklist could remain pinned over the Events/Universal
   Room and show "YOUR BYP PROFILE" on top of active room controls. Events are
   now a direct-use experience: no large profile/checklist overlay belongs on
   this surface. Home/Match guidance outside Game Play is left untouched.

   Any floating room utility that CAN overlap content uses an opaque BYP-black
   surface so labels never visually collide with the page underneath.
   ============================================================ */
#gamePlayView:not(.hidden) ~ #bypGuideRoot,
body:has(#gamePlayView:not(.hidden)) #bypGuideRoot{
  display:none !important;
}

/* Host Announcement composer / reopen control */
.byp-announce-compose,
.byp-announce-reopen,
.byp-ann-reopen{
  background:#06080d !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-color:rgba(0,229,255,.44) !important;
  box-shadow:0 -10px 38px rgba(0,0,0,.92),0 0 18px rgba(0,229,255,.09) !important;
}
.byp-ann-input{
  background:#020308 !important;
  color:#fff !important;
  border-color:rgba(124,233,255,.28) !important;
}

/* Remaining reusable guide/intro surfaces elsewhere stay readable if opened. */
.bypguide-panel,
.bypguide-bar,
.byp-universal-intro{
  background:#06080d !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.bypguide-ctx,
.bypguide-ch{
  background:#0a0c13 !important;
}


/* --- profile/account required-close notification preview --- */
.byp-profile-alert{
  position:relative;margin:0 0 14px;padding:16px 16px 15px;
  border:1px solid rgba(255,46,196,.52);border-radius:16px;
  background:linear-gradient(145deg,rgba(255,46,196,.13),rgba(168,85,255,.08) 48%,rgba(0,229,255,.08));
  box-shadow:0 0 24px rgba(255,46,196,.10),0 0 28px rgba(0,229,255,.07);
}
.byp-profile-alert-x{
  position:absolute;right:9px;top:8px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:#08090f;color:#fff;
  font-size:23px;line-height:30px;cursor:pointer;
}
.byp-profile-alert-kind{
  padding-right:42px;font-size:10px;font-weight:900;letter-spacing:.16em;
  color:var(--pink,#ff2ec4);margin-bottom:6px;
}
.byp-profile-alert-title{
  padding-right:38px;font-size:15px;font-weight:900;line-height:1.35;color:#fff;
}
.byp-profile-alert-body{
  margin-top:7px;font-size:12.5px;line-height:1.55;color:var(--dim,rgba(255,255,255,.72));
  white-space:pre-wrap;
}
.byp-profile-alert-note{
  margin:9px 0 10px;font-size:10.5px;line-height:1.4;color:var(--dim2,rgba(255,255,255,.48));
}
.byp-panel-row.has-unread{
  border-color:rgba(255,46,196,.46);
  box-shadow:inset 0 0 0 1px rgba(255,46,196,.08),0 0 14px rgba(255,46,196,.08);
}
.byp-panel-row.has-unread .byp-panel-row-value{color:var(--pink,#ff2ec4);font-weight:900}
.byp-notif-kind.is-match{color:var(--pink,#ff2ec4);border-color:rgba(255,46,196,.46)}
.byp-notif-kind.is-meetup{color:var(--blue,#00e5ff);border-color:rgba(0,229,255,.44)}