/* Haven EthosOS - Notifications Bar
   Styles for the bell badge, right slide-out sidebar, and the
   glassmorphic announcement modal. All markup is created/verified by
   notifications-bar.js (self-injecting), so this file + that script are
   the complete feature. Loaded after global.css in launcher.php. */

#notifBell{ position: relative; }
.notif-badge{
  position:absolute; top:-6px; right:-8px;
  min-width:16px; height:16px; padding:0 4px;
  background:#eb5757; color:#fff; border-radius:99px;
  font-size:.62rem; font-weight:700; line-height:16px; text-align:center;
  display:flex; align-items:center; justify-content:center;
}

/* Dimmed backdrop behind the slide-out sidebar - click to close. */
.notif-overlay{
  position:fixed; inset:0; background:rgba(8,4,16,0.4);
  z-index:2999; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.notif-overlay.open{ opacity:1; pointer-events:auto; }

/* Slide-out sidebar - full height, right edge, glassmorphic. */
.notif-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:380px; max-width:100vw;
  background:rgba(20,10,40,0.6); backdrop-filter:blur(24px);
  border-left:1px solid rgba(255,255,255,0.12);
  box-shadow:-24px 0 56px rgba(0,0,0,0.5);
  z-index:3000; /* above .app-window-container (2000) and everything else */
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.notif-panel.open{ transform:translateX(0); }

.notif-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.3rem; font-size:.95rem; font-weight:600;
  color:#F8D878; border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.notif-panel-close{
  background:none; border:none; color:rgba(240,192,96,0.6);
  font-size:.9rem; cursor:pointer; transition:color .2s;
}
.notif-panel-close:hover{ color:#F8D878; }

.notif-panel-list{ flex:1; overflow-y:auto; padding:.6rem; }
.notif-empty{ padding:2.4rem 1rem; text-align:center; color:rgba(240,192,96,0.4); font-size:.8rem; }

.notif-item{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:.85rem .9rem; border-radius:10px; cursor:pointer;
  transition:background .2s;
}
.notif-item:hover{ background:rgba(255,255,255,0.06); }
.notif-item.read{ opacity:.72; }
.notif-item-icon{ font-size:1.25rem; line-height:1.4; }
.notif-item-body{ flex:1; min-width:0; }
.notif-item-title{ font-size:.86rem; font-weight:700; color:#FFE9A8; }
.notif-item-text{ font-size:.78rem; color:rgba(255,233,168,0.82); margin-top:.25rem; line-height:1.4; }
.notif-item-dot{
  width:8px; height:8px; border-radius:50%;
  background:#E8A020; margin-top:.35rem; flex-shrink:0;
}

/* ============================================================
   ANNOUNCEMENT MODAL
   Auto-popup glassmorphic card for high-priority notifications the
   user hasn't seen yet (see notifications-bar.js's
   showAnnouncementModal). The sidebar is a passive list you open
   yourself; this interrupts once for anything flagged urgent.
   ============================================================ */
.notif-modal-overlay{
  position:fixed; inset:0; background:rgba(10,5,20,0.55); backdrop-filter:blur(6px);
  z-index:4000; /* above the notif sidebar (3000) too */
  display:none; align-items:center; justify-content:center; padding:1.5rem;
}
.notif-modal-overlay.open{ display:flex; }

.notif-modal{
  width:100%; max-width:420px;
  background:rgba(35,18,60,0.7); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.14); border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
  padding:2.2rem 2rem; text-align:center;
  animation:notifModalIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes notifModalIn{
  from{ opacity:0; transform:scale(.9) translateY(10px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.notif-modal-icon{ font-size:2.6rem; margin-bottom:.8rem; }
.notif-modal-title{ font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:#F8D878; margin-bottom:.6rem; }
.notif-modal-body{ font-size:.88rem; color:rgba(240,192,96,0.75); margin-bottom:1.6rem; line-height:1.5; white-space:pre-line; }
.notif-modal-actions{ display:flex; gap:.8rem; justify-content:center; }

/* Browsers without backdrop-filter support (older Android WebView, some
   in-app browsers) would otherwise render a barely-visible sheer
   overlay - fall back to solid-enough panels so text stays readable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .notif-panel{ background:rgba(24,12,46,0.96); }
  .notif-modal{ background:rgba(38,20,64,0.97); }
  .notif-overlay,.notif-modal-overlay{ background:rgba(6,3,12,0.75); }
}

@media(max-width:768px){
  .notif-panel{
    width:100vw; border-left:none;
    box-shadow:0 -10px 40px rgba(0,0,0,0.4);
  }
  .notif-panel-header{
    padding:calc(1rem + env(safe-area-inset-top,0px)) 1.1rem .9rem;
  }
  .notif-panel-close{
    font-size:1.1rem; padding:.3rem .5rem; /* bigger tap target */
  }
  .notif-panel-list{
    padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px));
  }
  .notif-item{ padding:.8rem .7rem; gap:.65rem; }
  .notif-item-title{ font-size:.83rem; }
  .notif-item-text{ font-size:.74rem; }

  .notif-modal-overlay{ padding:1rem; }
  .notif-modal{
    max-width:100%; width:100%;
    padding:1.7rem 1.4rem;
    border-radius:16px;
    max-height:calc(100vh - 2rem);
    overflow-y:auto;
  }
  .notif-modal-icon{ font-size:2.2rem; margin-bottom:.6rem; }
  .notif-modal-title{ font-size:1.2rem; }
  .notif-modal-body{ font-size:.85rem; margin-bottom:1.3rem; }
  .notif-modal-actions{
    flex-direction:column-reverse; gap:.6rem;
  }
  .notif-modal-actions .btn-primary,
  .notif-modal-actions .btn-secondary{
    width:100%; justify-content:center;
  }
}

@media(max-width:380px){
  .notif-modal{ padding:1.4rem 1.1rem; }
  .notif-modal-title{ font-size:1.1rem; }
}