/* A single action geometry replaces competing pill and card-specific sizing. */
#hub { --action-height: 38px; }
#hub .glass-action,
#hub .machine-card .machine-actions button.glass-action.glass-action,
#hub #open-both.glass-action,
#hub #command.glass-action,
#hub .agent-controls button.glass-action.glass-action {
  --glass-radius: 10px;
  --glass-fill: #1b1b1b;
  --glass-highlight: #ffffff42;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  width: auto;
  min-width: 0;
  min-height: var(--action-height);
  height: auto;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid #ffffff25;
  border-top-color: #ffffff42;
  border-radius: 10px;
  background: #1b1b1b;
  color: #e5e5e5;
  font: 500 12px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #ffffff0c, inset 0 -1px 0 #00000060, 0 2px 4px #00000030;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
#hub .glass-action > .text {
  white-space: nowrap;
  overflow-wrap: normal;
  text-wrap: nowrap;
  line-height: 1.25;
}
#hub .glass-action > .btn-icon,
#hub .machine-card .machine-actions button.glass-action > .btn-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#hub .glass-action > .btn-icon > .ui-icon { width: 15px; height: 15px; opacity: .85; }
#hub .glass-action::before { inset: 1px; border: 0; border-top: 1px solid #ffffff08; border-radius: inherit; }
#hub .glass-action::after, #hub .glass-action .circle-overlay { display: none; }
#hub .glass-action:not(:disabled):not([aria-disabled='true']):hover {
  background: #262626;
  border-color: #ffffff42;
  border-top-color: #ffffff62;
  color: #fff;
  transform: none;
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000060, 0 2px 4px #00000030;
}
#hub .glass-action:not(:disabled):not([aria-disabled='true']):active {
  background: #141414;
  transform: none;
  box-shadow: inset 0 1px 3px #00000055;
}
#hub .glass-action:disabled { opacity: .6; }

/* A footer can wrap as a unit; each label and icon remain visible. */
#hub .machine-bottom { flex-wrap: wrap; gap: 12px 18px; }
#hub .machine-actions { display: flex; flex-wrap: wrap; width: auto; gap: 7px; margin-left: auto; }
#hub .machine-card .machine-actions button.glass-action.glass-action { min-width: 98px; }
@container machine (max-width: 440px) {
  #hub .machine-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-left: 0; gap: 7px; }
  #hub .machine-card .machine-actions button.glass-action.glass-action { min-width: 0; width: 100%; padding-inline: 8px; font-size: 11px; }
}
@container machine (max-width: 320px) {
  #hub .machine-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hub .machine-actions button:last-child { grid-column: 1 / -1; }
}
@container machine (max-width: 220px) {
  #hub .machine-actions { grid-template-columns: minmax(0, 1fr); }
  #hub .machine-actions button:last-child { grid-column: auto; }
}

/* Primary toolbar and load controls share a quiet bezel, with intrinsic widths. */
#hub #command.glass-action { min-width: 156px; justify-content: space-between; padding-inline: 12px; gap: 16px; }
#hub #command kbd { flex-shrink: 0; }
#hub .agent-controls { gap: 8px; align-items: center; }
#hub .agent-controls button.glass-action.glass-action { min-width: 112px; }
#hub .agent-controls > a { border: 1px solid #ffffff1e; border-radius: 9px; min-width: var(--action-height); min-height: var(--action-height); }
#hub #open-both.glass-action { padding-inline: 12px; margin: 0; }
#hub .workspace-tip { gap: 9px; }
#hub .workspace-tip > span { display: flex; align-items: center; }

/* Header actions are measured controls, never oversized pills inside a titlebar. */
#hub .window-controls, #hub .window-layout-controls { align-items: center; gap: 3px; }
#hub .window-controls button,
#hub .window-layout-controls button,
#hub .window-layout-controls .move-control,
#hub .window-layout-controls .window-original {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 5px;
  border-radius: 7px;
  line-height: 1;
}
#hub .window-controls button .ui-icon,
#hub .window-layout-controls button .ui-icon,
#hub .window-layout-controls .window-original .ui-icon { width: 14px; height: 14px; }
#hub .window-controls button { background: #ffffff07; border: 1px solid #ffffff20; }
#hub .window-layout-controls button { border: 1px solid transparent; }
#hub .window-titlebar { gap: 9px; }
@container window (max-width: 340px) {
  #hub .window-titlebar { gap: 5px; padding-inline: 8px; }
  #hub .window-controls, #hub .window-layout-controls { gap: 2px; }
}

@media (max-width: 800px), (pointer: coarse) {
  #hub { --action-height: 44px; }
}
@media (max-width: 800px) {
  #hub #command.glass-action { width: 44px; min-width: 44px; height: 44px; padding: 8px; gap: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #hub .glass-action { transition: none; }
}
@media (forced-colors: active) {
  #hub .glass-action { box-shadow: none; }
  #hub .glass-action::before { display: none; }
}