/* Колокольчик уведомлений */
.bell-root{
  position:fixed; right:24px; top:76px; z-index:450;
  font-family:var(--font-body, Inter, sans-serif);
}
.bell-btn{
  position:relative; width:44px; height:44px; border-radius:50%;
  background:var(--surface, #141315); border:1px solid var(--border, #2B2830);
  color:var(--grey, #93909A); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.8);
  transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.bell-btn:hover{ color:var(--white, #F4F2ED); border-color:var(--grey-dim, #5B5760); transform:translateY(-2px); }
.bell-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bell-btn.has-new{ color:var(--red-hi, #FF5A45); border-color:var(--red-dim, #7A1A14); }

.bell-dot{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--red, #E8342A); color:#120503;
  font-family:var(--font-mono, monospace); font-size:.62rem; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--black, #0A0A0B);
}

.bell-panel{
  position:absolute; right:0; top:54px; width:360px; max-width:calc(100vw - 32px);
  background:var(--surface, #141315); border:1px solid var(--border, #2B2830);
  border-radius:16px; overflow:hidden;
  box-shadow:0 28px 64px -20px rgba(0,0,0,.92);
  animation:bell-in .16s ease;
}
@keyframes bell-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.bell-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--border-soft, #211F26);
}
.bell-head b{ font-size:.92rem; color:var(--white, #F4F2ED); }
.bell-link{
  background:none; border:0; cursor:pointer; padding:0;
  font-family:var(--font-mono, monospace); font-size:.72rem; color:var(--grey-dim, #5B5760);
}
.bell-link:hover{ color:var(--red-hi, #FF5A45); }

.bell-list{ max-height:min(420px, 60vh); overflow-y:auto; }
.bell-item{
  display:flex; gap:12px; padding:12px 16px; text-decoration:none;
  border-bottom:1px solid var(--border-soft, #211F26);
}
.bell-item:last-child{ border-bottom:0; }
.bell-item:hover{ background:var(--surface-2, #1C1B1E); }
.bell-item.unread{ background:rgba(232,52,42,.06); }
.bell-item.unread:hover{ background:rgba(232,52,42,.1); }

.bell-ico{
  width:30px; height:30px; flex-shrink:0; border-radius:9px; display:grid; place-items:center;
  background:var(--black, #0A0A0B); border:1px solid var(--border, #2B2830); color:var(--grey, #93909A);
}
.bell-ico svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.bell-item.unread .bell-ico{ color:var(--red-hi, #FF5A45); border-color:var(--red-dim, #7A1A14); }

.bell-text{ flex:1; min-width:0; }
.bell-text b{ display:block; font-size:.86rem; color:var(--white, #F4F2ED); line-height:1.4; font-weight:600; }
.bell-body{
  display:block; font-size:.79rem; color:var(--grey, #93909A); line-height:1.5; margin-top:3px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.bell-text time{
  display:block; font-family:var(--font-mono, monospace); font-size:.66rem;
  color:var(--grey-dim, #5B5760); margin-top:5px;
}
.bell-empty{ padding:30px 20px; text-align:center; font-size:.83rem; color:var(--grey-dim, #5B5760); line-height:1.6; }
.bell-foot{ padding:10px 16px; border-top:1px solid var(--border-soft, #211F26); text-align:center; }

@media (max-width: 640px){
  .bell-root{ right:16px; top:68px; }
  .bell-btn{ width:40px; height:40px; }
  .bell-panel{ right:-4px; width:calc(100vw - 24px); }
}