.hux-workspace-toggle {
  background: color-mix(in srgb, var(--bg-primary, #0a101b) 88%, #174653);
  border: 1px solid rgb(94 231 215 / 45%);
  border-radius: 999px;
  bottom: max(5.8rem, calc(env(safe-area-inset-bottom) + 4.5rem));
  box-shadow: 0 10px 32px rgb(0 0 0 / 32%);
  color: var(--text-primary, #e7eef6);
  cursor: pointer;
  font: inherit;
  padding: 0.55rem 0.9rem;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  z-index: 115;
}

.hux-workspace-drawer {
  background: color-mix(in srgb, var(--bg-primary, #0a101b) 97%, #102f3a);
  border-left: 1px solid rgb(118 181 193 / 30%);
  bottom: 0;
  box-shadow: -18px 0 48px rgb(0 0 0 / 34%);
  color: var(--text-primary, #e7eef6);
  max-width: 100%;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: min(42rem, 94vw);
  z-index: 160;
}

.hux-workspace-drawer[hidden] {
  display: none !important;
}

.hux-workspace-drawer__header {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgb(10 16 27 / 88%);
  border-bottom: 1px solid rgb(118 181 193 / 24%);
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.hux-workspace-drawer__header h2 {
  font-size: 0.92rem;
  margin: 0;
}

.hux-workspace-drawer__header button {
  background: transparent;
  border: 1px solid rgb(118 181 193 / 30%);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0.4rem 0.7rem;
}

.hux-workspace-drawer__content {
  display: grid;
  gap: 0.8rem;
  padding: 0.8rem;
}

.hux-workspace-wave {
  min-width: 0;
}

.hux-workspace-toggle:focus-visible,
.hux-workspace-toggle-rail:focus-visible,
.hux-workspace-drawer button:focus-visible {
  outline: 2px solid #5ee7d7;
  outline-offset: 2px;
}

/* Rail-mounted Workspace toggle: the upstream .rail-btn/.has-tooltip rules
   own its look and tooltip; only the open-drawer state is marked here. */
.hux-workspace-toggle-rail[aria-expanded="true"] {
  background: var(--accent-bg, rgb(94 231 215 / 18%));
  color: var(--accent-text, var(--text, #e7eef6));
}

/* Where the rail is visible (upstream shows it from 641px up) the floating
   fallback toggle disappears; below that the rail itself is hidden and the
   floating button remains the only entry point, so no width loses access. */
@media (min-width: 641px) {
  .hux-workspace-toggle--railed {
    display: none;
  }
}

@media (max-width: 640px) {
  .hux-workspace-drawer {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hux-workspace-toggle {
    transition: background-color 120ms ease, border-color 120ms ease;
  }
}

@media (forced-colors: active) {
  .hux-workspace-drawer,
  .hux-workspace-toggle {
    border-color: CanvasText;
  }
}

/* ── Theme bridge for the Workspace chrome ─────────────────────────────── */
/* The pinned upstream WebUI theme (and hermes-brand.css on top of it) defines
   --bg/--text but never --bg-primary/--text-primary, so every color-mix()
   surface above resolved its fallback constant (#0a101b): with the drawer
   open that painted a large flat dark rectangle that visibly broke the page's
   themed background. Bridge the tokens to the app theme so the drawer, its
   toggle and the shell inherit the real page background (light and dark) —
   layout and component styling are deliberately untouched. */
.hux-workspace-toggle,
.hux-workspace-drawer,
.hux-shell {
  --bg-primary: var(--bg, #0a101b);
  --text-primary: var(--text, #e7eef6);
}

/* The header previously painted a hard-coded dark wash and sampled the page
   through backdrop-filter; blurring the backdrop of a sticky header inside a
   fixed overflow scroller is also a known Chromium compositor hazard on this
   app's gradient background (see the stale-tile note in hermes-brand.css).
   Track the theme instead and let the opaque drawer carry the surface. */
.hux-workspace-drawer__header {
  backdrop-filter: none;
  background: color-mix(in srgb, var(--bg, #0a101b) 92%, transparent);
}