atlas-iac/dockerfiles/hermes-webui-hux/bootstrap.css

/* Floating fallback: only rendered when NO nav home exists (headless/degenerate
   DOMs). Pinned to the TOP-right corner — never the bottom — so it can never
   overlap, push, or reflow the message composer's bottom control row. In the
   real app both nav homes exist, so this never appears. */
.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;
  top: max(0.6rem, env(safe-area-inset-top));
  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;
}

/* Mobile top-app-bar Workspace toggle: an icon-only button beside the app's own
   new-chat/reload icons. Shown only below the rail breakpoint (where the rail —
   and its own toggle — is hidden), so exactly one Workspace entry is ever
   visible and nothing floats over the composer. */
.hux-workspace-titlebar-toggle {
  align-items: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--muted, #9fb0c0);
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
  -webkit-app-region: no-drag;
  -webkit-tap-highlight-color: transparent;
}

.hux-workspace-titlebar-toggle:hover {
  background: var(--hover-bg, rgb(94 231 215 / 12%));
  color: var(--text, #e7eef6);
}

.hux-workspace-titlebar-toggle[aria-expanded="true"] {
  background: var(--accent-bg, rgb(94 231 215 / 18%));
  color: var(--accent-text, var(--text, #e7eef6));
}

@media (max-width: 640px) {
  .hux-workspace-titlebar-toggle {
    display: inline-flex;
  }
}

.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-titlebar-toggle: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));
}

@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);
}