.docs-notify-photo{
  position:relative;
}

.notify-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.7rem;
}

.notify-scene{
  position:relative;
  --card-top-gap:4rem;
  --cat-height:4.1rem;
  --cat-width:8.75rem;
}

.notify-right{
  position:absolute;
  right:.34rem;
  top:calc(var(--card-top-gap) - var(--cat-height) - .7rem);
  display:flex;
  align-items:flex-start;
  gap:.52rem;
  z-index:10;
}

.notify-count #unreadCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3.8rem;
  min-height:4.75rem;
  border-radius:.18rem;
  background:#06112f;
  color:#fff;
  font-size:1.58rem;
  font-weight:700;
  box-shadow:0 14px 30px rgba(6,17,47,.14);
}

#notificationsList{
  position:relative;
}

#notificationsList > *:first-child{
  margin-top:var(--card-top-gap) !important;
  position:relative;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  border-radius:1.4rem;
  padding:2.05rem 1.75rem 1.4rem;
  box-shadow:
    0 16px 34px rgba(15,23,42,.13),
    0 3px 8px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  overflow:visible;
}

#notificationsList > *:first-child::before{
  content:'';
  position:absolute;
  top:-1px;
  right:5.55rem;
  width:8.95rem;
  height:.18rem;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 3px 12px rgba(255,255,255,.42);
  z-index:2;
}

.docs-cat-photo-wrap{
  position:relative;
  width:var(--cat-width);
  height:var(--cat-height);
  cursor:pointer;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.docs-cat-photo-wrap svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  transform:scaleX(1) translateY(-.7rem);
  filter:
    drop-shadow(0 9px 12px rgba(15,23,42,.16))
    drop-shadow(0 3px 5px rgba(15,23,42,.08));
}

.docs-cat-photo-wrap .docs-cat-sleep{
  position:absolute;
  left:1.22rem;
  top:-.88rem;
  display:flex;
  color:#cfd8eb;
  text-shadow:0 0 8px rgba(255,255,255,.7);
  font-weight:700;
  line-height:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}

.docs-cat-photo-wrap .docs-cat-sleep span{
  display:inline-block;
  animation:docsCatSleepLineV4 3.7s ease-in-out infinite;
}

.docs-cat-photo-wrap .docs-cat-sleep span:nth-child(2){
  margin-left:-.28rem;
  animation-delay:1s;
}

.docs-cat-photo-wrap .docs-cat-sleep span:nth-child(3){
  margin-left:-.28rem;
  animation-delay:2s;
}

.docs-cat-photo-wrap .cat-bed-shadow{
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:.55rem;
  height:.72rem;
  border-radius:999px;
  background:radial-gradient(
    circle at center,
    rgba(15,23,42,.18),
    rgba(15,23,42,.02) 70%,
    transparent 100%
  );
  filter:blur(6px);
  pointer-events:none;
}

.docs-cat-photo-wrap #lefteyelid,
.docs-cat-photo-wrap #righteyelid,
.docs-cat-photo-wrap #eyesdown,
.docs-cat-photo-wrap #longtail{
  visibility:hidden;
}

.docs-cat-photo-wrap #tail{
  visibility:visible;
  transform-box:fill-box;
  transform-origin:left center;
  animation:docsTailLineV4 3s ease-in-out infinite;
}

.docs-cat-photo-wrap.is-near #lefteyelid{
  visibility:visible;
}

.docs-cat-photo-wrap.is-sleeping #lefteyelid,
.docs-cat-photo-wrap.is-sleeping #righteyelid{
  visibility:visible;
}

.docs-cat-photo-wrap.is-sleeping .docs-cat-sleep{
  opacity:1;
}

.docs-cat-photo-wrap.is-sleeping #tail{
  visibility:hidden;
}

.docs-cat-photo-wrap.is-sleeping #longtail{
  visibility:visible;
  transform-box:fill-box;
  transform-origin:left center;
  animation:docsLongTailLineV4 1.1s ease-in-out infinite alternate;
}

.docs-cat-photo-wrap.is-awake #lefteyelid,
.docs-cat-photo-wrap.is-awake #righteyelid,
.docs-cat-photo-wrap.is-awake #eyesdown,
.docs-cat-photo-wrap.is-awake #longtail{
  visibility:hidden;
}

.docs-cat-photo-wrap.is-awake #tail{
  visibility:visible;
}

.docs-cat-photo-wrap .cat-eye-white{
  transition:transform .08s ease;
}

.docs-cat-photo-wrap .cat-pupil,
.docs-cat-photo-wrap .cat-highlight{
  transition:all .07s ease;
}

@keyframes docsCatSleepLineV4{
  0%{
    opacity:0;
    transform:translateY(.35rem) scale(.82);
  }
  20%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  65%{
    opacity:.9;
    transform:translate(-.2rem,-.95rem) scale(1.08);
  }
  100%{
    opacity:0;
    transform:translate(-.28rem,-1.75rem) scale(1.18);
  }
}

@keyframes docsTailLineV4{
  0%,100%{
    transform:rotate(0deg);
  }
  50%{
    transform:rotate(6deg);
  }
}

@keyframes docsLongTailLineV4{
  0%{
    transform:rotate(-2deg);
  }
  100%{
    transform:rotate(6deg);
  }
}

@media (max-width:640px){
  .notify-scene{
    --card-top-gap:2.45rem;
    --cat-height:2.95rem;
    --cat-width:6.35rem;
  }

  .notify-right{
    right:.1rem;
    gap:.32rem;
    top:calc(var(--card-top-gap) - var(--cat-height) - .1rem);
  }

  .notify-count #unreadCount{
    min-width:2.46rem;
    min-height:3rem;
    font-size:.98rem;
  }

  #notificationsList > *:first-child{
    padding:1.55rem 1rem 1rem;
    border-radius:1rem;
  }

  #notificationsList > *:first-child::before{
    right:4.05rem;
    width:5.35rem;
    height:.16rem;
  }

  .docs-cat-photo-wrap svg{
    transform:scaleX(1) translateY(-.1rem);
  }

  .docs-cat-photo-wrap .docs-cat-sleep{
    left:.72rem;
    top:-.55rem;
    font-size:.74rem;
  }

  .docs-cat-photo-wrap .cat-bed-shadow{
    left:.8rem;
    right:.8rem;
    bottom:.36rem;
  }
  }