/* openboard-dropdown.css — shared left-anchored slide-down dropdown used by
   both /viewer/ (3D) and /viewer2d/ (2D). Screen-edge panel that hosts the
   VSCode-style boards tree (shared/boards-browser.js). */

/* Username badge — pinned to the right end of the toolbar by
   mountUsernameBadge() (which appendChilds it to the parent). */
.tb-user{
  position:relative;
  font-size:12px; color:#e6e7ea; font-weight:500;
  padding:6px 12px; letter-spacing:0.3px; margin-left:6px;
  border:1px solid rgba(255,255,255,0.12); border-radius:6px;
  background:transparent;
  display:none;
  transition:background .15s, color .15s, border-color .15s;
}
.tb-user.visible{ display:inline-flex; align-items:center; }
.tb-user:hover{ background:rgba(211,32,39,0.12); color:#d32027; border-color:rgba(211,32,39,0.4); }
.tb-user::before{ content:''; width:7px; height:7px; border-radius:50%; background:#4ade80; margin-right:7px; box-shadow:0 0 10px rgba(74,222,128,.35); }
.tb-user::after{ content:'▾'; margin-left:7px; font-size:9px; opacity:.75; }
.tb-user-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:170px; padding:6px;
  background:rgba(20,22,28,.98);
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  box-shadow:0 12px 36px rgba(0,0,0,.55);
  display:none; z-index:80;
}
.tb-user.open .tb-user-menu{ display:block; }
.tb-user-menu a,
.tb-user-menu button{
  width:100%; display:block; text-align:left;
  padding:8px 9px; border:0; border-radius:6px;
  background:transparent; color:#e6e7ea;
  font:inherit; font-size:12px; text-decoration:none;
  cursor:pointer;
}
.tb-user-menu a:hover,
.tb-user-menu button:hover{ background:rgba(211,32,39,.14); color:#fff; }

/* Dropdown button wrapper sits inline with the brand — button inherits .tb-dropdown-btn */
.tb-dropdown{ position:relative; }

/* The panel itself — pinned to the top-left screen edge, slides down.
   User-resizable horizontally (drag the bottom-right corner): titles are
   often too long for the default 340px. Min/max keep it sane. */
.ob-menu{
  position:fixed; top:42px; left:0; right:auto;
  width:340px; min-width:260px; max-width:90vw;
  max-height:calc(100vh - 42px);
  background:rgba(20,22,28,0.98);
  border:1px solid rgba(255,255,255,0.25);
  border-top:none; border-left:none;
  border-radius:0 0 10px 0;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  backdrop-filter:blur(16px);
  z-index:30;
  display:flex; flex-direction:column; overflow:hidden;
  resize:horizontal;
  transform-origin:top left;
  opacity:0; visibility:hidden;
  transform:translateY(-4px) scale(.98);
  transition:opacity .18s ease-out,
             transform .18s ease-out,
             visibility 0s linear .18s;
  pointer-events:none;
}
/* Hint the resize handle so it's discoverable against the dark panel. */
.ob-menu::after{
  content:'';
  position:absolute; right:2px; bottom:2px;
  width:10px; height:10px;
  pointer-events:none;
  background:
    linear-gradient(135deg,
      transparent 0 45%,
      rgba(211,32,39,0.45) 45% 55%,
      transparent 55% 70%,
      rgba(211,32,39,0.35) 70% 80%,
      transparent 80% 100%);
  opacity:0; transition:opacity .18s ease-out;
}
.ob-menu.open::after{ opacity:1; }
.ob-menu.open{
  opacity:1; visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition:opacity .18s ease-out,
             transform .18s ease-out,
             visibility 0s;
}

.ob-menu-header{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.18);
  flex-shrink:0;
}
.ob-menu-title{
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.2px;
  color:#d32027; flex:1;
}
.ob-menu-add{
  display:flex; align-items:center; gap:5px;
  background:rgba(211,32,39,0.15); color:#d32027;
  border:1px solid rgba(211,32,39,0.25);
  font-size:11px; font-weight:600;
  padding:4px 9px; border-radius:6px;
  cursor:pointer; font-family:inherit;
  transition:background .15s ease-out, transform .15s ease-out;
}
.ob-menu-add:hover{
  background:rgba(211,32,39,0.22);
  transform:translateY(-1px);
}
.ob-menu-add .plus{ font-size:13px; line-height:1; }

.ob-menu-body{
  flex:1 1 auto; overflow-y:auto; min-height:0; padding:4px 0;
}
.ob-menu-empty{
  padding:14px 16px; color:#667790;
  font-size:11px; text-align:center;
}