/* USER PILL TRIGGER */
.user-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:5px 14px 5px 6px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
}
.user-pill-av{width:26px;height:26px;border-radius:50%;background:#e8dccb;display:inline-flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-size:12px;color:#25221d;letter-spacing:0}
.user-pill-chev{font-size:10px;color:#aaa;margin-left:2px;transition:transform .2s}
.user-pill[aria-expanded="true"] .user-pill-chev{transform:rotate(180deg)}
.nav-post-work{flex:0 0 auto}
.nav-post-work .inner-content{height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:999px}
.nav-post-work .border-gradient-bottom,
.nav-post-work .border-gradient-top{
  visibility:hidden;
  animation-play-state:paused;
  opacity:.18;
}
.nav-post-work:hover .border-gradient-bottom,
.nav-post-work:hover .border-gradient-top,
.nav-post-work:focus-visible .border-gradient-bottom,
.nav-post-work:focus-visible .border-gradient-top{
  visibility:visible;
  animation-play-state:running;
}
.nav-notification{position:relative;padding:10px 16px}
.nav-notification-dot{width:8px;height:8px;border-radius:50%;background:#b9a7d8;box-shadow:0 0 0 4px rgba(185,167,216,.14);display:inline-block}
.nav-notification[aria-expanded="true"]{background:white}

/* DROPDOWN PANEL */
.bubble-menu-overlay{
  position:fixed;
  display:none;
  flex-direction:column;
  padding:10px;
  background:rgba(255,255,255,.9);
  border-radius:18px;
  box-shadow:0 8px 40px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.06);
  backdrop-filter:blur(18px);
  z-index:300;
  pointer-events:none;
  min-width:220px;
}
.bubble-menu-overlay.show{display:flex;pointer-events:auto;}

/* PILL LIST */
.pill-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%;}
.pill-list li{width:100%;}

.bubble-menu-overlay .star-border-container{
  display:block;width:100%;border-radius:12px;
  padding:2px;
  text-decoration:none;color:#25221d;
}
.bubble-menu-overlay .border-gradient-bottom,
.bubble-menu-overlay .border-gradient-top{
  visibility:hidden;
  animation-play-state:paused;
}
.bubble-menu-overlay .star-border-container:hover .border-gradient-bottom,
.bubble-menu-overlay .star-border-container:hover .border-gradient-top,
.bubble-menu-overlay .star-border-container:focus-visible .border-gradient-bottom,
.bubble-menu-overlay .star-border-container:focus-visible .border-gradient-top{
  visibility:visible;
  animation-play-state:running;
}

.bubble-menu-overlay .inner-content{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:11px 16px;border-radius:10px;
  border:1px solid rgba(20,20,20,.07);
  background:#fbfaf7;
  color:#25221d;
  font-family:'Lora',serif;font-size:17px;font-weight:400;letter-spacing:-.02em;
  text-transform:lowercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.bubble-menu-overlay .star-border-container:hover .inner-content,
.bubble-menu-overlay .star-border-container:focus-visible .inner-content{
  background:#fff;
  border-color:rgba(185,167,216,.24);
  box-shadow:0 8px 20px rgba(185,167,216,.12),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-1px);
}

.bubble-menu-overlay .inner-content em{font-style:italic;opacity:1;}
.bubble-menu-overlay .pill-label{display:inline-block;}
.bubble-menu-overlay .pill-arrow{font-family:'Manrope',sans-serif;font-size:13px;opacity:.35;}

/* divider before sign out */
.bubble-menu-overlay li:last-child{border-top:1px solid #f0f0ee;margin-top:2px;padding-top:8px;}

/* NOTIFICATIONS */
.notification-overlay{
  position:fixed;
  display:none;
  flex-direction:column;
  width:316px;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 40px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.06);
  backdrop-filter:blur(18px);
  z-index:300;
  pointer-events:none;
}
.notification-overlay.show{display:flex;pointer-events:auto;}
.notification-pill-list{gap:6px;}
.notification-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 8px 10px;
  margin-bottom:2px;
  border-bottom:1px solid #f0f0ee;
}
.notification-head span{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#aaa;
}
.notification-head strong{
  font-family:'Manrope',sans-serif;
  font-size:11px;
  font-weight:500;
  color:#6d5aa8;
  background:#d8cfbf80;
  border-radius:20px;
  padding:4px 8px;
}
.notification-overlay .star-border-container{
  display:block;
  width:100%;
  border-radius:12px;
  padding:2px;
  text-decoration:none;
  color:#25221d;
}
.notification-overlay .border-gradient-bottom,
.notification-overlay .border-gradient-top{
  visibility:hidden;
  animation-play-state:paused;
}
.notification-overlay .star-border-container:hover .border-gradient-bottom,
.notification-overlay .star-border-container:hover .border-gradient-top,
.notification-overlay .star-border-container:focus-visible .border-gradient-bottom,
.notification-overlay .star-border-container:focus-visible .border-gradient-top{
  visibility:visible;
  animation-play-state:running;
}
.notification-overlay .inner-content{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:58px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(20,20,20,.07);
  background:#fbfaf7;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.notification-overlay .star-border-container:hover .inner-content,
.notification-overlay .star-border-container:focus-visible .inner-content{
  background:#fff;
  border-color:rgba(185,167,216,.2);
  box-shadow:0 8px 20px rgba(185,167,216,.1),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-1px);
}
.notification-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#cfe8df;
  box-shadow:0 0 0 4px rgba(200,232,222,.22);
}
.notification-overlay .pill-label{min-width:0;}
.notification-overlay .pill-label strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:'Lora',serif;
  font-size:18px;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.08;
  color:#25221d;
}
.notification-overlay .pill-label small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:'Manrope',sans-serif;
  font-size:12px;
  line-height:1.35;
  color:#999;
}
.notification-overlay .pill-arrow{
  font-family:'Manrope',sans-serif;
  font-size:13px;
  opacity:.35;
}

@media(max-width:680px){
  .nav-actions{display:flex!important;width:100%;gap:8px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .nav-actions::-webkit-scrollbar{display:none}
  .nav-post-work .inner-content{padding:10px 14px;font-size:13px}
  .nav-notification{padding:9px 12px}
  .nav-notification-label{display:none}
  .notification-overlay,.bubble-menu-overlay{right:20px!important;left:auto!important;width:min(300px,calc(100vw - 40px))}
}