/* assets/social-notifications.css */
.c-sn { min-height: 100vh; background: #0b0b0d; color: #fff; }

.c-sn__topbar{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; gap:10px;
  padding: 14px 14px;
  background: rgba(11,11,13,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.c-sn__btn{
  appearance:none; border:0; background:transparent; color:#fff;
  padding: 8px 10px; border-radius: 10px;
  display:inline-flex; align-items:center; gap:8px;
  font-size: 15px; cursor:pointer;
}
.c-sn__btn:active{ transform: translateY(1px); }

.c-sn__title{ flex:1; text-align:center; font-weight:700; font-size:18px; letter-spacing:.2px; }

.c-sn__filter{
  color:#9aa4ff;
}

.c-sn__wrap{
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 110px; /* место под таббар */
}

.c-sn__section{
  padding: 14px 14px 8px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-weight: 600;
}

.c-sn__item{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.c-sn__item:hover{ background: rgba(255,255,255,.03); }

.c-sn__avatars{ position:relative; width:42px; height:42px; flex:0 0 42px; }
.c-sn__ava{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.c-sn__ava--stack2{
  position:absolute; right:-10px; bottom:-8px;
  width:26px; height:26px;
  border-radius:50%;
  border: 2px solid #0b0b0d;
}

.c-sn__main{ flex:1; min-width: 0; }
.c-sn__text{ font-size: 14px; line-height: 1.25; color: rgba(255,255,255,.92); }
.c-sn__text b{ color:#fff; font-weight: 800; }
.c-sn__sub{
  margin-top: 4px;
  display:flex; align-items:center; gap:8px;
  color: rgba(255,255,255,.52);
  font-size: 12px;
}
.c-sn__time{ white-space:nowrap; }

.c-sn__thumb{
  width:46px; height:46px; border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  flex:0 0 46px;
}

.c-sn__followBtn{
  margin-left: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor:pointer;
}
.c-sn__followBtn--primary{
  border-color: rgba(122,132,255,.5);
  background: rgba(122,132,255,.18);
}

.c-sn__state{
  padding: 18px 14px;
  color: rgba(255,255,255,.7);
  font-size: 14px;
}

.c-sn__skeleton{
  padding: 12px 14px;
  display:flex; gap:12px; align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.c-sn__sk-ava{ width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.08); }
.c-sn__sk-lines{ flex:1; }
.c-sn__sk-line{ height:10px; border-radius: 8px; background: rgba(255,255,255,.08); margin: 8px 0; }
.c-sn__sk-line:nth-child(1){ width: 72%; }
.c-sn__sk-line:nth-child(2){ width: 45%; }

@media (min-width: 900px){
  .c-sn__wrap{ padding-top: 6px; }
}


@media (min-width: 0px) and (max-width: 20000000px) {
    body {
        margin-top: 0 !important;
    }
}
.c-sn__item { position: relative; }

.c-sn__item.is-unread{
  background: rgba(122,132,255,.10);
}
.c-sn__item.is-unread{
  border-color: rgba(244,211,125,.45);
  box-shadow: 0 0 0 1px rgba(244,211,125,.14) inset;
  background: rgba(244,211,125,.05);
}
.c-sn__item.is-unread:hover{
  background: rgba(122,132,255,.14);
}

.c-sn__item.is-unread::before{
  content:"";
  position:absolute;
  left:0; top:10px; bottom:10px;
  width:3px;
  border-radius: 999px;
  background: rgba(255,59,48,1);
}.c-social__bellDot { display: none !important; }

@media (min-width:0px) and (max-width: 1000000px) {
    :root {
        --social-top-shift: 0;
    }
}

.c-sn__btn--icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
}

.c-sn__btn--icon svg{
  display:block;
  width:20px;
  height:20px;
}

.c-sn__btn--icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
}

.c-sn__btn--icon svg{
  display:block;
  width:20px;
  height:20px;
}