.notification-button{position:relative;width:36px;height:36px;border:1px solid rgba(148,163,184,.22);border-radius:12px;background:rgba(255,255,255,.84);color:#334155;display:grid;place-items:center;cursor:pointer;font-size:1rem;box-shadow:0 5px 16px rgba(15,23,42,.04)}.notification-button:hover{background:#fff}.notification-bell-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}.notification-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:.58rem;font-weight:850;display:grid;place-items:center;border:2px solid #fff}.notification-badge[hidden]{display:none}.notification-panel{position:fixed;z-index:80;top:66px;right:24px;width:min(390px,calc(100vw - 28px));max-height:min(72vh,650px);display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;background:rgba(255,255,255,.97);border:1px solid rgba(148,163,184,.22);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.22);backdrop-filter:blur(20px)}.notification-panel[hidden]{display:none}.notification-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px 10px}.notification-head h3{margin:0;font-size:1rem}.notification-head small{display:block;color:#7d899a;font-size:.64rem;margin-top:2px}.notification-head-actions{display:flex;gap:6px}.notification-head-actions button{border:0;background:transparent;color:#2563eb;font-size:.66rem;font-weight:800;cursor:pointer;padding:6px}.notification-filters{display:flex;gap:7px;padding:0 16px 11px}.notification-filters button{border:1px solid rgba(148,163,184,.22);background:#f8fafc;color:#64748b;border-radius:999px;padding:5px 9px;font-size:.62rem;font-weight:750;cursor:pointer}.notification-filters button.active{background:#eaf2ff;border-color:#bfdbfe;color:#1d4ed8}.notification-list{overflow:auto;padding:0 9px 10px}.notification-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 9px;border-radius:13px}.notification-item:hover{background:rgba(148,163,184,.08)}.notification-item.unread{background:rgba(37,99,235,.055)}.notification-item-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;font-size:.86rem}.notification-item[data-severity='success'] .notification-item-icon{background:#f0fdf4;color:#15803d}.notification-item[data-severity='warning'] .notification-item-icon{background:#fffbeb;color:#b45309}.notification-item[data-severity='error'] .notification-item-icon,.notification-item[data-severity='critical'] .notification-item-icon{background:#fef2f2;color:#b91c1c}.notification-copy{min-width:0;display:grid;gap:3px}.notification-copy strong{font-size:.74rem}.notification-copy p{margin:0;color:#64748b;font-size:.65rem;line-height:1.35}.notification-copy time{color:#94a3b8;font-size:.57rem}.notification-read{border:0;background:transparent;color:#2563eb;font-size:.6rem;font-weight:800;cursor:pointer;padding:4px}.notification-empty,.notification-error{padding:34px 18px;text-align:center;color:#7d899a;font-size:.72rem}.notification-error{color:#b91c1c}@media(max-width:700px){.notification-panel{top:58px;left:10px;right:10px;width:auto;max-height:calc(100vh - 146px)}.notification-button{width:34px;height:34px}.notification-head{padding-top:14px}}:root[data-theme='dark'] .notification-button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:#e2e8f0}:root[data-theme='dark'] .notification-badge{border-color:#0f172a}:root[data-theme='dark'] .notification-panel{background:rgba(17,24,39,.98);border-color:#263244;color:#e8eef6}:root[data-theme='dark'] .notification-head small,:root[data-theme='dark'] .notification-copy p,:root[data-theme='dark'] .notification-empty{color:#9cabbd}:root[data-theme='dark'] .notification-filters button{background:#182231;border-color:#334155;color:#b7c4d5}:root[data-theme='dark'] .notification-filters button.active{background:rgba(37,99,235,.18);border-color:rgba(96,165,250,.32);color:#93c5fd}:root[data-theme='dark'] .notification-item:hover{background:rgba(255,255,255,.05)}:root[data-theme='dark'] .notification-item.unread{background:rgba(37,99,235,.1)}
/* HNAI 0.8.3-D2 – Notification Preferences */

.notification-preferences{
  margin:0 10px 10px;
  padding:13px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  background:#f8fafc;
  overflow:auto;
  max-height:360px;
}

.notification-preferences[hidden]{
  display:none!important;
}

.notification-preferences-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.notification-preferences-head>div{
  min-width:0;
}

.notification-preferences-head strong{
  display:block;
  font-size:.76rem;
}

.notification-preferences-head small{
  display:block;
  margin-top:3px;
  color:#7d899a;
  font-size:.61rem;
  line-height:1.35;
}

.notification-preferences-source{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:3px 8px;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
  font-size:.56rem;
  font-weight:800;
  white-space:nowrap;
}

.notification-preferences-source[data-source='user']{
  background:#dbeafe;
  color:#1d4ed8;
}

.notification-preferences-group{
  margin-top:13px;
}

.notification-preferences-label{
  display:block;
  margin-bottom:7px;
  color:#64748b;
  font-size:.61rem;
  font-weight:800;
}

.notification-preferences-severity,
.notification-preferences-categories{
  display:grid;
  gap:6px;
}

.notification-preferences-severity{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.notification-preferences-categories{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.notification-preferences-severity label,
.notification-preferences-categories label{
  position:relative;
  cursor:pointer;
}

.notification-preferences-severity input,
.notification-preferences-categories input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.notification-preferences-severity span,
.notification-preferences-categories span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 7px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:9px;
  background:#fff;
  color:#64748b;
  font-size:.58rem;
  font-weight:750;
  text-align:center;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.notification-preferences-severity input:checked+span,
.notification-preferences-categories input:checked+span{
  border-color:#93c5fd;
  background:#eaf2ff;
  color:#1d4ed8;
}

.notification-preferences-severity input:focus-visible+span,
.notification-preferences-categories input:focus-visible+span{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

.notification-preferences-critical{
  display:grid;
  gap:2px;
  margin-top:13px;
  padding:9px 10px;
  border-radius:10px;
  background:#fff7ed;
  color:#9a3412;
  font-size:.58rem;
  line-height:1.4;
}

.notification-preferences-critical strong{
  font-size:.6rem;
}

.notification-preferences-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}

.notification-preferences-actions button{
  border:1px solid rgba(148,163,184,.25);
  border-radius:9px;
  padding:7px 10px;
  background:#fff;
  color:#475569;
  font-size:.6rem;
  font-weight:800;
  cursor:pointer;
}

.notification-preferences-actions
.notification-preferences-save{
  border-color:#2563eb;
  background:#2563eb;
  color:#fff;
}

.notification-preferences-actions button:disabled{
  cursor:wait;
  opacity:.55;
}

.notification-preferences-status{
  min-height:15px;
  margin-top:7px;
  color:#64748b;
  font-size:.57rem;
}

.notification-preferences-status[data-state='success']{
  color:#15803d;
}

.notification-preferences-status[data-state='error']{
  color:#b91c1c;
  font-weight:700;
}

@media(max-width:700px){
  .notification-preferences{
    max-height:44vh;
  }

  .notification-preferences-severity{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .notification-preferences-categories{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:430px){
  .notification-preferences-head{
    flex-direction:column;
  }

  .notification-preferences-categories{
    grid-template-columns:1fr;
  }

  .notification-preferences-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .notification-preferences-actions button{
    width:100%;
  }
}

:root[data-theme='dark'] .notification-preferences{
  background:#111827;
  border-color:#263244;
}

:root[data-theme='dark'] .notification-preferences-head small,
:root[data-theme='dark'] .notification-preferences-label{
  color:#9cabbd;
}

:root[data-theme='dark'] .notification-preferences-source{
  background:#253244;
  color:#cbd5e1;
}

:root[data-theme='dark']
.notification-preferences-source[data-source='user']{
  background:rgba(37,99,235,.24);
  color:#93c5fd;
}

:root[data-theme='dark']
.notification-preferences-severity span,
:root[data-theme='dark']
.notification-preferences-categories span,
:root[data-theme='dark']
.notification-preferences-actions button{
  background:#182231;
  border-color:#334155;
  color:#b7c4d5;
}

:root[data-theme='dark']
.notification-preferences-severity input:checked+span,
:root[data-theme='dark']
.notification-preferences-categories input:checked+span{
  background:rgba(37,99,235,.18);
  border-color:rgba(96,165,250,.42);
  color:#93c5fd;
}

:root[data-theme='dark']
.notification-preferences-actions
.notification-preferences-save{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

:root[data-theme='dark']
.notification-preferences-critical{
  background:rgba(180,83,9,.16);
  color:#fdba74;
}


/* ==========================================================
   HNAI 0.8.3-D2 – Desktop notification panel correction
   ========================================================== */

/*
 * Desktop:
 * Das Notification-Center benötigt genügend Platz für
 * Einstellungen / Alle gelesen / Schließen und die
 * Notification-Texte.
 */
@media(min-width:701px){

  .notification-panel{
    width:min(560px,calc(100vw - 32px));
    max-width:560px;
  }

  .notification-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }

  .notification-head>div:first-child{
    flex:1 1 auto;
    min-width:0;
  }

  .notification-head-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
  }

  .notification-head-actions button{
    white-space:nowrap;
  }

  .notification-list{
    min-width:0;
    overflow-x:hidden;
  }

  .notification-item{
    min-width:0;
    max-width:100%;
  }

  .notification-item>div{
    min-width:0;
  }

  .notification-item strong,
  .notification-item p,
  .notification-item small{
    max-width:100%;
    overflow-wrap:anywhere;
  }

}


/*
 * Kleine Displays:
 * nahezu volle Breite, aber mit Abstand zum Bildschirmrand.
 */
@media(max-width:700px){

  .notification-panel{
    left:10px;
    right:10px;
    width:auto;
    max-width:none;
  }

  .notification-head{
    gap:8px;
  }

  .notification-head-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:5px;
  }

}


/*
 * Sehr kleine Displays:
 * Header-Aktionen unter die Überschrift setzen.
 */
@media(max-width:430px){

  .notification-head{
    flex-direction:column;
    align-items:stretch;
  }

  .notification-head-actions{
    width:100%;
    justify-content:flex-start;
  }

  .notification-head-actions button{
    flex:1 1 auto;
  }

}


/* ==========================================================
   HNAI 0.8.3-D2 – settings dedicated view
   ========================================================== */

/*
 * Während die Einstellungen geöffnet sind, wird die
 * Notification-Liste bewusst ausgeblendet.
 * Dadurch gibt es keinerlei Überlagerung mit Meldungen.
 */

.notification-list[hidden],
.notification-filters[hidden],
#notification-summary[hidden]{
  display:none!important;
}

.notification-panel.notification-settings-open{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.notification-panel.notification-settings-open
.notification-head{
  flex:0 0 auto;
}

.notification-panel.notification-settings-open
.notification-preferences{
  position:static!important;
  inset:auto!important;
  transform:none!important;

  display:block;
  flex:1 1 auto;

  width:auto;
  max-width:none;

  margin:8px 10px 12px;
  padding:16px;

  max-height:none;
  min-height:0;

  overflow-y:auto;
  overflow-x:hidden;

  z-index:auto;
}

.notification-panel.notification-settings-open
.notification-preferences-head{
  position:static;
}

.notification-panel.notification-settings-open
.notification-preferences-actions{
  position:static;
}


/*
 * Desktop: Settings dürfen nahezu die gesamte Höhe
 * des Notification Centers nutzen.
 */

@media(min-width:701px){

  .notification-panel.notification-settings-open{
    min-height:520px;
    max-height:min(720px,calc(100vh - 130px));
  }

}


/*
 * Tablet / Mobile:
 * verfügbare Bildschirmhöhe nutzen.
 */

@media(max-width:700px){

  .notification-panel.notification-settings-open{
    max-height:calc(100vh - 24px);
  }

  .notification-panel.notification-settings-open
  .notification-preferences{
    margin:6px 8px 10px;
    padding:14px;
  }

}