/* =============================================================================
   WORKSPACE HEADER — the landing page's look for the header of the design
   workspace (index.html: Practice, Learn, Evaluate). Header only: the navbar,
   the action bar under it, and the interview toolbar. Panels, canvas and the
   page background are untouched. Scoped by <html class="ws-header">.
============================================================================= */
.ws-header {
  --wh-bg: #0e1626;
  --wh-surface: #141e31;
  --wh-line: rgba(255,255,255,0.08);
  --wh-text: #e8edf5;
  --wh-text-2: #a9b6c9;
  --wh-accent: #5cc8f2;
  --wh-primary: #3b82f6;
  --wh-primary-hover: #2563eb;
  --wh-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── One continuous slate header ──────────────────────────────────────────── */
.ws-header .an-toolbar,
.ws-header #workspace-action-bar,
.ws-header #im-toolbar {
  background: var(--wh-bg) !important;
  font-family: var(--wh-font);
}
.ws-header .an-toolbar { border-bottom: 0 !important; box-shadow: none !important; }
.ws-header #workspace-action-bar,
.ws-header #im-toolbar {
  /* both are position: sticky already, which anchors the light line below */
  border-bottom: 1px solid var(--wh-line) !important;
  box-shadow: none !important;
}
/* A slow line of light along the bottom edge: the landing page's light, in one hairline */
.ws-header #workspace-action-bar::after,
.ws-header #im-toolbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(92,200,242,0) 20%, rgba(92,200,242,0.85) 50%, rgba(37,99,235,0) 80%, transparent 100%);
  background-size: 200% 100%;
  animation: wh-light 9s ease-in-out infinite alternate;
}
.ws-header #im-toolbar::before { display: none; }
@keyframes wh-light { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ─── Navbar ───────────────────────────────────────────────────────────────── */
.ws-header .an-toolbar .an-tab { font-family: var(--wh-font); }
.ws-header .an-tab.active::after,
.ws-header .an-tab.tsw-active::after {
  width: 24px;
  height: 2px;
  background: var(--wh-accent);
  box-shadow: 0 0 10px rgba(92,200,242,0.7);
}
.ws-header .an-toolbar .button,
.ws-header .an-toolbar .an-feedback-btn {
  border-radius: 999px;
  font-family: var(--wh-font);
}
.ws-header .an-toolbar .button.ghost,
.ws-header .an-toolbar .an-feedback-btn {
  background: transparent;
  border: 1px solid var(--wh-line);
  color: var(--wh-text-2);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ws-header .an-toolbar .button.ghost:hover,
.ws-header .an-toolbar .an-feedback-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: var(--wh-text);
}
.ws-header .an-toolbar .button.primary { background: var(--wh-primary); border-color: var(--wh-primary); box-shadow: none; }
.ws-header .an-toolbar .button.primary:hover { background: var(--wh-primary-hover); }
.ws-header .an-avatar { background: var(--wh-surface); color: var(--wh-accent); border-color: rgba(92,200,242,0.4); }
.ws-header .an-avatar:hover { border-color: var(--wh-accent); box-shadow: 0 0 0 3px rgba(92,200,242,0.15); transform: none; }

/* ─── Problem selector: a quiet field ──────────────────────────────────────── */
.ws-header #wab-question-selector .custom-select-trigger {
  background: var(--wh-surface) !important;
  border: 1px solid var(--wh-line) !important;
  border-radius: 999px !important;
  color: var(--wh-text) !important;
  font-family: var(--wh-font);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ws-header #wab-question-selector .custom-select-trigger:hover {
  border-color: rgba(92,200,242,0.45) !important;
  background: #172338 !important;
}

/* ─── Simulate / Run / Submit: one pill group ──────────────────────────────── */
.ws-header .wab-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  /* background: var(--wh-surface); */
  /* box-shadow: inset 0 0 0 1px var(--wh-line); */
}
.ws-header .wab-actions .wab-btn {
  height: 30px;
  padding: 0 16px;
  gap: 7px;
  border-radius: 999px;
  font-family: var(--wh-font);
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ws-header .wab-actions .wab-btn:active:not(:disabled) { transform: none; }
.ws-header #wab-simulate-btn { background: transparent; color: var(--wh-text-2); }
.ws-header #wab-simulate-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: var(--wh-text); }
.ws-header #wab-run-btn { background: var(--wh-primary); color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,0.35); }
.ws-header #wab-run-btn:hover:not(:disabled) { background: var(--wh-primary-hover); }
.ws-header #wab-submit-btn { background: rgba(34,197,94,0.14); color: #86efac; box-shadow: inset 0 0 0 1px rgba(34,197,94,0.35); }
.ws-header #wab-submit-btn:hover:not(:disabled) { background: rgba(34,197,94,0.22); color: #bbf7d0; }
.ws-header #wab-submit-btn.wab-btn--success { background: #15803d; color: #fff; box-shadow: none; }
/* Learn / Design your own: Simulate is the only action, so it leads */
.ws-header body.learn-mode-active #wab-simulate-btn,
.ws-header body.practice-custom-mode #wab-simulate-btn { background: var(--wh-primary); color: #fff; }
.ws-header .wab-stopwatch-btn { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .ws-header #workspace-action-bar::after,
  .ws-header #im-toolbar::after { animation: none; background-position: 50% 0; }
}

/* Learn / Design your own: Simulate is the only action, so no group pill around it */
.ws-header body.learn-mode-active .wab-actions,
.ws-header body.practice-custom-mode .wab-actions { background: transparent; box-shadow: none; padding: 0; }
/* Right edge lines up with the navbar's avatar */
.ws-header #workspace-action-bar { padding-right: 24px !important; }
/* Practice: Simulate keeps its blue identity (same hue as the solo Simulate in
   Learn) as a soft tint, so Run stays the primary action next to it */
.ws-header #wab-simulate-btn { background: rgba(59,130,246,0.14); color: #93c5fd; }
.ws-header #wab-simulate-btn:hover:not(:disabled) { background: rgba(59,130,246,0.24); color: #dbeafe; }