/* Keyzira v6.6.45 — Notification Center theme/opacity fix
   v6.6.44 referenced --card, which does not exist in Keyzira's theme tokens.
   This layer intentionally uses the real --surface / --surface-2 tokens and
   makes the notification UI fully opaque in both themes. */

.keyzira-notifications{
  position:relative;
  isolation:isolate;
}

.notification-trigger{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
  box-shadow:0 4px 14px color-mix(in srgb,var(--text) 5%,transparent);
}

.notification-trigger:hover,
.notification-trigger.has-unread{
  background:var(--surface-2) !important;
  border-color:color-mix(in srgb,var(--primary) 52%,var(--line)) !important;
  box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 12%,transparent);
}

.notification-badge{
  border-color:var(--surface) !important;
}

/* IMPORTANT: no transparency / backdrop bleed. */
.notification-panel{
  background:var(--surface) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:
    0 28px 70px rgba(40,25,90,.18),
    0 8px 24px rgba(40,25,90,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.notification-panel-head{
  background:var(--surface-2) !important;
  border-bottom-color:var(--line) !important;
}

.notification-panel-head strong{
  color:var(--text) !important;
}

.notification-panel-head button{
  color:var(--primary) !important;
}

.notification-list{
  background:var(--surface) !important;
  scrollbar-color:var(--line-strong) var(--surface);
}

/* Every row is an opaque card row; page content can never show through it. */
.notification-item{
  background:var(--surface) !important;
  border-bottom-color:var(--line) !important;
  color:var(--text) !important;
}

.notification-item:last-child{
  border-bottom:0 !important;
}

.notification-item.unread{
  background:color-mix(in srgb,var(--primary) 6%,var(--surface)) !important;
}

.notification-item.unread::before{
  border-radius:0 4px 4px 0;
}

.notification-item-icon{
  background:color-mix(in srgb,var(--primary) 10%,var(--surface-2)) !important;
  border:1px solid color-mix(in srgb,var(--primary) 13%,var(--line)) !important;
  color:var(--primary) !important;
}

.notification-item.level-success .notification-item-icon{
  background:color-mix(in srgb,var(--green) 10%,var(--surface-2)) !important;
  color:var(--green) !important;
  border-color:color-mix(in srgb,var(--green) 18%,var(--line)) !important;
}

.notification-item.level-warning .notification-item-icon{
  background:color-mix(in srgb,var(--orange) 11%,var(--surface-2)) !important;
  color:var(--orange) !important;
  border-color:color-mix(in srgb,var(--orange) 18%,var(--line)) !important;
}

.notification-item-top strong{
  color:var(--text) !important;
}

.notification-item-top time,
.notification-item p{
  color:var(--muted) !important;
}

.notification-action,
.notification-link{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
}

.notification-action:hover,
.notification-link:hover{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line)) !important;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface-2)) !important;
}

.notification-action.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 7px 18px var(--primary-shadow);
}

.notification-link{
  color:var(--primary) !important;
}

.notification-empty,
.notification-loading{
  background:var(--surface) !important;
  color:var(--muted) !important;
}

.notification-empty span{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--primary) !important;
}

/* Toasts also had the same undefined --card background problem. */
.notification-toast{
  background:var(--surface) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
  box-shadow:
    0 22px 55px rgba(40,25,90,.16),
    0 6px 18px rgba(40,25,90,.09) !important;
}

.notification-toast > span:first-child{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--primary) !important;
}

.notification-toast strong{
  color:var(--text) !important;
}

.notification-toast small{
  color:var(--muted) !important;
}

/* Explicit dark treatment rather than relying on opacity tricks. */
html[data-theme="dark"] .notification-trigger{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
  box-shadow:0 5px 18px rgba(0,0,0,.24);
}

html[data-theme="dark"] .notification-trigger:hover,
html[data-theme="dark"] .notification-trigger.has-unread{
  background:var(--surface-3) !important;
}

html[data-theme="dark"] .notification-badge{
  border-color:var(--surface-2) !important;
}

html[data-theme="dark"] .notification-panel{
  background:var(--surface) !important;
  border-color:var(--line-strong) !important;
  box-shadow:
    0 32px 76px rgba(0,0,0,.58),
    0 8px 26px rgba(0,0,0,.36) !important;
}

html[data-theme="dark"] .notification-panel-head{
  background:var(--surface-2) !important;
}

html[data-theme="dark"] .notification-item{
  background:var(--surface) !important;
}

html[data-theme="dark"] .notification-item.unread{
  background:color-mix(in srgb,var(--primary) 9%,var(--surface)) !important;
}

html[data-theme="dark"] .notification-action,
html[data-theme="dark"] .notification-link{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
}

html[data-theme="dark"] .notification-toast{
  background:var(--surface-2) !important;
  border-color:var(--line-strong) !important;
  box-shadow:
    0 28px 66px rgba(0,0,0,.52),
    0 8px 22px rgba(0,0,0,.34) !important;
}

/* Keep the dropdown visually separate from the server-clock bar below it. */
.notification-panel::before{
  content:"";
  position:absolute;
  top:-6px;
  right:17px;
  width:11px;
  height:11px;
  transform:rotate(45deg);
  background:var(--surface-2);
  border-left:1px solid var(--line-strong);
  border-top:1px solid var(--line-strong);
  z-index:2;
}

@media(max-width:980px){
  .notification-panel::before{display:none}
}

@media(max-width:620px){
  .notification-panel{
    border-radius:15px !important;
    box-shadow:0 22px 52px rgba(40,25,90,.16) !important;
  }
  html[data-theme="dark"] .notification-panel{
    box-shadow:0 26px 62px rgba(0,0,0,.52) !important;
  }
}