/* ═══════════════════════════════════════════
   WORKSPACE MENU — HUD theme
   Sits at the top of #workspace, above
   docPanel | divider | chatPanel.
   ═══════════════════════════════════════════ */

#workspaceMenu {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 32px;                        /* fixed, predictable bar height */
  padding: 0 12px 0 0;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  user-select: none;
  position: relative;
  z-index: 30;
  overflow: visible;                   /* submenus must escape */
}

/* ── Menu group ──────────────────────── */
#workspaceMenu .menu-group {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}

#workspaceMenu .menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

#workspaceMenu .menu-btn {
  /* Explicit reset — no `all: unset` so font-size is respected */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  text-decoration: none;

  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 100%;

  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;

  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  transition: color .12s, background .12s;
}

#workspaceMenu .menu-btn:hover {
  color: var(--text);
  background: rgba(37, 99, 235, .04);
}

#workspaceMenu .menu-btn.active {
  color: var(--accent);
  background: rgba(255, 255, 255, .9);
  border-left-color: var(--line);
  border-right-color: var(--line);
}

#workspaceMenu .menu-btn.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  height: 1px;
  background: var(--accent);
}

/* ── Submenu dropdown ────────────────── */
#workspaceMenu .submenu {
  position: absolute;
  top: 100%;
  left: -1px;
  min-width: 180px;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-top: none;
  padding: 3px 0;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 20px rgba(11, 18, 32, .08);
  z-index: 50;
}

#workspaceMenu .submenu.open {
  display: flex;
  animation: submenuIn .1s ease-out;
}

@keyframes submenuIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

#workspaceMenu .submenu-item {
  display: block;
  padding: 7px 14px 7px 12px;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .2px;
  cursor: pointer;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: color .1s, background .1s, border-color .1s;
}

#workspaceMenu .submenu-item:hover {
  color: var(--accent);
  background: rgba(37, 99, 235, .05);
  border-left-color: var(--accent);
}

#workspaceMenu .menu-item:has(.submenu.open) {
  z-index: 51;
}

/* ── Right meta strip ────────────────── */
#workspaceMenu .workspace-menu-spacer {
  flex: 1 1 auto;                     /* critical — eats all remaining space */
  min-width: 0;
}

#workspaceMenu .workspace-menu-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .8px;
}

#workspaceMenu .wm-label {
  color: var(--muted);
  opacity: .6;
  text-transform: uppercase;
}

#workspaceMenu .wm-val {
  color: var(--text);
  text-transform: uppercase;
  font-weight: 500;
}

#workspaceMenu .wm-sep {
  color: var(--line);
  margin: 0 3px;
}