/* ===========================
   wb-cio — Account popover
   Small, theme-aware panel
   =========================== */

.wbc-pop[hidden]{ display:none !important; }

/* Anchor the popover to the header */
.wbc-header{ position:sticky; z-index:70; } /* already sticky = positioned */
.wbc-pop--account{
  position:absolute;
  right:24px;
  top:100%;
  margin-top:8px;
  z-index:80;
}

.wbc-pop__inner{
  background:var(--surface,#fff);
  color:var(--text);
  border:1px solid var(--border,#eaeaea);
  border-radius:14px;
  box-shadow:0 18px 38px rgba(0,0,0,.12);
  min-width:220px;
  overflow:hidden;
}

/* Little arrow */
.wbc-pop--account .wbc-pop__inner::before{
  content:"";
  position:absolute;
  right:28px; top:-7px;
  width:12px; height:12px;
  background:var(--surface,#fff);
  border-left:1px solid var(--border,#eaeaea);
  border-top:1px solid var(--border,#eaeaea);
  transform:rotate(45deg);
}

/* Menu list */
.wbc-menu{ list-style:none; margin:0; padding:6px; }
.wbc-menu li{ margin:0; }
.wbc-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
}
.wbc-menu a:hover{
  background:color-mix(in srgb, var(--bg) 84%, #fff);
}

/* Mobile: if you prefer click-only, keep positioning but it still works fine */
@media (max-width: 600px){
  .wbc-pop--account{ right:14px; }
}