/* BuddyOnline — menu
   Strictly black / charcoal / neutral gray / red.
   One red edge light travels top -> bottom.
*/

.bol-menu{
  position:fixed;
  inset:0 auto 0 0;
  width:260px;
  padding:18px 14px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:#070707;
  color:#f2f2f3;
  border-right:1px solid rgba(205,205,210,.09);
  box-shadow:8px 0 32px rgba(0,0,0,.62);
  z-index:50;
  overflow-x:hidden;
  overflow-y:auto;
}

/* Keep menu content above the edge light */
.bol-menu > *{
  position:relative;
  z-index:1;
}

/* ONE red light moving down the right edge */
.bol-menu::after{
  content:"";
  position:absolute;
  top:-80px;
  right:-2px;
  width:3px;
  height:80px;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,48,72,.20) 20%,
    #ff3048 45%,
    #ff3048 55%,
    rgba(255,48,72,.20) 80%,
    transparent 100%
  );
  filter:drop-shadow(0 0 5px #ff3048);
  animation:bol-menu-edge-light 5s linear infinite;
  pointer-events:none;
  z-index:2;
}

@keyframes bol-menu-edge-light{
  0%{
    top:-80px;
    opacity:0;
  }
  10%{
    opacity:1;
  }
  90%{
    opacity:1;
  }
  100%{
    top:calc(100% - 80px);
    opacity:0;
  }
}

.bol-menu__brand{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bol-menu__logo{
  display:none;
  max-width:170px;
  height:auto;
}

.bol-menu__user{
  padding:12px 8px;
  text-align:center;
  border-top:1px solid rgba(205,205,210,.13);
  border-bottom:1px solid rgba(205,205,210,.13);
  font-weight:800;
}

.bol-menu__role{
  display:inline-block;
  margin-left:5px;
  padding:2px 6px;
  border:1px solid rgba(255,48,72,.48);
  color:#ff5264;
  font-size:10px;
}

.bol-menu__section{
  margin:7px 0 3px;
  color:#77777d;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.bol-menu__links{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.bol-menu__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:39px;
  padding:0 11px;
  color:#e9e9eb;
  text-decoration:none;
  border:1px solid transparent;
  border-left:2px solid transparent;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    padding-left .15s ease;
}

.bol-menu__link:hover,
.bol-menu__link.is-active{
  color:#fff;
  background:rgba(255,255,255,.035);
  border-color:rgba(205,205,210,.14);
  border-left-color:#ff3048;
  padding-left:15px;
}

.bol-menu__badge{
  color:#ff5062;
  font-size:10px;
  font-weight:900;
}

.bol-menu__spacer{flex:1}

.bol-menu__footer{
  color:#5e5e64;
  font-size:10px;
  text-align:center;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.bol-mobile-bar,
.bol-mobile-panel,
.bol-mobile-backdrop{
  display:none;
}

@media(max-width:899px){
  .bol-menu{display:none}

  .bol-mobile-bar{
    position:fixed;
    inset:0 0 auto 0;
    height:62px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#070707;
    border-bottom:1px solid rgba(205,205,210,.28);
    box-shadow:0 8px 28px rgba(0,0,0,.60);
    z-index:1100;
  }

  .bol-mobile-toggle{
    width:42px;
    height:42px;
    border:1px solid rgba(205,205,210,.25);
    background:#0d0d0e;
    color:#fff;
    cursor:pointer;
  }

  .bol-mobile-title{
    font-weight:900;
    letter-spacing:.04em;
  }

  .bol-mobile-panel{
    position:fixed;
    top:62px;
    left:0;
    bottom:0;
    width:min(88vw,340px);
    padding:16px;
    box-sizing:border-box;
    overflow:auto;
    background:#080808;
    border-right:1px solid rgba(205,205,210,.28);
    transform:translateX(-105%);
    transition:transform .22s ease;
    z-index:1099;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  body.bol-menu-open .bol-mobile-panel{transform:translateX(0)}

  .bol-mobile-backdrop{
    position:fixed;
    inset:62px 0 0;
    background:rgba(0,0,0,.68);
    z-index:1098;
  }

  body.bol-menu-open .bol-mobile-backdrop{display:block}

  .bol-mobile-panel .bol-menu__link{min-height:44px}

  .bol-mobile-close{
    min-height:40px;
    margin-top:8px;
    border:1px solid rgba(255,48,72,.36);
    background:rgba(255,48,72,.055);
    color:#fff;
  }
}

@media(prefers-reduced-motion:reduce){
  .bol-menu::after{
    animation:none;
    display:none;
  }
}