/* UnityPro Header Buttons — Facebook-like */
:root {
  --up-hdr-bg: #fff;
  --up-hdr-border: #e5e7eb;
  --up-hdr-muted: #6b7280;
  --up-hdr-shadow: 0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
}

.up-header-bar{z-index:9999;display:flex;gap:10px;align-items:center}
/* Modes */
.up-mode-fixed{position:fixed;top:10px;right:12px}
.up-mode-inline{position:static}

.up-hbtn{
  position: relative;
  display: inline-flex;        
  justify-content: center;
  align-items: center;
  color:#353535;
  width: 42px;
  aspect-ratio: 1 / 1;        
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 38px;             

  border-radius: 9999px;      
  background: #e4e5e9;
  line-height: 1;               
  overflow: hidden;             
}
.up-hbtn:hover{background: #e1e2e4;outline:2px solid #f3f4f6;color:#353535;outline-offset:2px}
.up-hbtn:focus{background: #e1e2e4;outline:2px solid #f5f5f5;color:#353535;outline-offset:2px}  
.up-hbtn .fa, .up-hbtn .fa-solid{font-size:18px;display:block}


/* AVATAR BUTTON WRAP */
.up-hbtn.avatar{
  /* size — tweak as needed */
  width:38px; 
  height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  border-radius:50%;
  background:#fff;
  line-height:0;                 /* prevents stray gap inside inline buttons */

  /* ring(s): inner white buffer + outer brand color */
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 4px var(--up-accent, #dcdcdc);
}

/* IMAGE */
.up-hbtn.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* Optional: hover focus state */
.up-hbtn.avatar:hover,
.up-hbtn.avatar:focus-visible{
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px var(--up-accent, #cdcdcd);
  transition: box-shadow .15s ease;
}


/* Dropdowns */
.up-dd{position:absolute;top:46px;right:0;background:var(--up-hdr-bg);border:1px solid var(--up-hdr-border);border-radius:12px;min-width:320px;max-width:92vw;box-shadow:var(--up-hdr-shadow);display:none}
.up-dd.open{display:block}
.up-dd .up-dd-head{padding:12px 14px;font-weight:600;border-bottom:1px solid var(--up-hdr-border)}
.up-dd .up-dd-body{max-height:70vh;overflow:auto}
.up-dd .item{display:flex;gap:10px;padding:10px 14px;align-items:center;}
.up-dd .item:hover{background:#f9fafb}
.up-dd .item .media{width:40px;height:40px;border-radius:9999px;overflow:hidden;background:#eef2ff;display:flex;align-items:center;justify-content:center}
.up-dd .item .media img{width:100%;height:100%;object-fit:cover}
.up-dd .item .text{flex:1;font-size:14px}
.up-dd .item .meta{font-size:12px;color:var(--up-hdr-muted)}

.up-dd .menu{display:flex;flex-direction:column;padding:8px}
.up-dd .menu .mitem{font-size:16px!important; font-weight:600 !important;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;text-decoration:none;color:inherit}
.up-dd .menu .mitem:hover{background:#f3f4f6}
.up-dd .menu .sep{height:1px;background:var(--up-hdr-border);margin:6px 8px}

/* "See all" button */
.up-dd .seeall{display:block;margin:10px 12px;padding:10px 12px;border-radius:8px;border:1px solid var(--up-hdr-border);text-align:center;text-decoration:none;color:#111;background:#f9fafb}
.up-dd .seeall:hover{background:#f3f4f6}

/* Mobile nudge so it doesn't overlap notches */
@media (max-width:640px){
  .up-header-bar{top:8px;right:8px;gap:8px}
  .up-dd{min-width:min(92vw,360px)}
}
/* Anchor each icon + dropdown so the menu isn't glued to the viewport */
.up-header-bar .up-hitem{position:relative;display:inline-flex}
/* When inline, align dropdown to the icon's left edge if you prefer */
.up-header-bar.up-mode-inline .up-hitem .up-dd{right:auto;left:0}
/* Open dropdown to the LEFT side of the icon */
#up-header-root .up-hitem .up-dd{
  top: 46;                 /* align panel's top to the icon's top */
  left: auto;
  right: calc(100% + -40px); /* panel sits to the left of the icon, 8px gap */
}

/* Optional: vertically center the panel beside the icon instead of top-aligning */
/* #up-header-root .up-hitem .up-dd{ top:50%; transform: translateY(-50%); left:auto; right:calc(100% + 8px); } */