/* Flat dark planes and etched curves provide real scenery for the glass. */
#hub { position: relative; isolation: isolate; background: transparent; }
#hub .workspace-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #050505;
  contain: strict;
}
#hub .workspace-scene > svg { display: block; width: 100%; height: 100%; }
#hub .main-shell, #hub main { background: transparent; }
#hub .topbar { background: #101010a8; }
#hub aside { background: #090909c4; }
#hub .mobile-navigation { background: #101010c9; }
/* A glass header can read the scenery; app and terminal contents remain opaque. */
#hub .floating-window { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
#hub .window-body { background: #080808; }
#hub .window-titlebar { background: #18181886; }
#hub #dock { background: #1414149c; }
#hub #dock.glass-surface {
  position: fixed;
  --glass-radius: 16px;
  --glass-blur: 6px;
}
#hub .topbar.glass-surface.glass-surface {
  position: sticky;
  top: 0;
  --glass-radius: 2px;
  --glass-blur: 6px;
  border: 0;
  border-bottom: 1px solid #ffffff24;
  border-radius: 0;
}
#hub .floating-window .window-titlebar.glass-surface {
  --glass-radius: 14px;
  --glass-blur: 4px;
  border: 0;
  border-bottom: 1px solid #ffffff24;
  border-radius: 13px 13px 0 0;
}
#hub .floating-window:fullscreen .window-titlebar.glass-surface { border-radius: 0; }
#hub .app { background: #121212c9; }
#hub .app:hover { background: #1b1b1bdb; }
#hub .app.offline { background: #080808c4; }
#hub .app .icon,
#hub .machine-head > img,
#hub .connection-grid img,
#hub .window-titlebar > img,
#hub .command-result .icon { filter: none; opacity: 1; }
#hub .glass-action .btn-icon .ui-icon { width: 15px; height: 15px; }
#hub .glass-action .text { display: block; min-width: 0; }
/* Existing action selectors are more specific than the base material. */
#hub .machine-card .machine-actions button.glass-action.glass-action,
#hub #open-both.glass-action {
  border-radius: 999px;
  min-height: 44px;
  background-color: var(--glass-fill, #242424c2);
  border-color: var(--glass-edge, #ffffff24);
  border-top-color: var(--glass-highlight, #ffffff66);
  box-shadow: inset 0 1px 1px #ffffff21, inset 1px 0 1px #ffffff12,
    inset 0 -2px 2px #0000008c, 0 5px 13px #00000038;
}
@container machine (max-width: 440px) {
  #hub .machine-actions .glass-action > .btn-icon { display: none; }
}
@media (max-width: 800px) {
  #hub .workspace-scene > svg { width: 180%; transform: translateX(-34%); }
}
@media (prefers-reduced-transparency: reduce) {
  #hub .workspace-scene > svg { display: none; }
  #hub .floating-window { background: #0b0b0b; }
  #hub .app, #hub .app:hover { background: #111; }
}

/* Match the existing ID-based chrome selectors without changing its geometry. */
#hub #command.glass-action,
#hub .agent-controls button.glass-action.glass-action {
  border-radius: 999px;
  min-height: 44px;
  background-color: var(--glass-fill, #242424c2);
  border: 1px solid var(--glass-edge, #ffffff24);
  border-top-color: var(--glass-highlight, #ffffff66);
  padding: 8px 16px;
  box-shadow: inset 0 1px 1px #ffffff21, inset 1px 0 1px #ffffff12,
    inset 0 -2px 2px #0000008c, 0 5px 13px #00000038;
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  #hub #dock.glass-surface {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
@supports (backdrop-filter: url('#liquid-glass')) {
  .svg-glass #hub #dock.glass-surface {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px) var(--liquid-filter, blur(0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .svg-glass #hub #dock.glass-surface { backdrop-filter: blur(6px); }
}
@media (max-width: 800px) {
  #hub #command.glass-action { padding: 7px; gap: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  #hub #dock.glass-surface,
  .svg-glass #hub #dock.glass-surface {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}