/* Final workspace alignment with the public homepage visual system. */
:root {
  --workspace-canvas: #F5F6F2;
  --workspace-surface: #FFFFFF;
  --workspace-sunken: #EEF0EA;
  --workspace-soft: #F8F9F6;
  --workspace-line: #DEE3DE;
  --workspace-line-strong: #CDD5CE;
  --workspace-text: #151A19;
  --workspace-muted: #59615F;
  --workspace-faint: #858D8A;
  --workspace-blue: #2864DC;
  --workspace-blue-hover: #1F55C5;
  --workspace-blue-soft: #EAF1FF;
  --workspace-danger: #C83B3B;
  --workspace-danger-soft: #FCEEEE;
  --workspace-success: #168B7D;
  --workspace-radius: 8px;
  --workspace-shadow: 0 1px 2px rgba(21, 26, 25, 0.04), 0 10px 30px rgba(21, 26, 25, 0.05);

  /* Legacy workspace modules consume three historical token sets. Keep every
     alias on the same visual system so old component CSS cannot reintroduce
     green surfaces, blue shadows, or sharp corners. */
  --ws-bg: var(--workspace-canvas);
  --ws-bg-soft: var(--workspace-sunken);
  --ws-surface: var(--workspace-surface);
  --ws-surface-solid: var(--workspace-surface);
  --ws-line: var(--workspace-line);
  --ws-line-soft: #E8ECE8;
  --ws-text: var(--workspace-text);
  --ws-muted: var(--workspace-muted);
  --ws-faint: var(--workspace-faint);
  --ws-brand: var(--workspace-blue);
  --ws-brand-dark: var(--workspace-blue-hover);
  --ws-brand-soft: var(--workspace-blue-soft);
  --ws-radius-sm: 8px;
  --ws-radius-md: 8px;
  --ws-radius-lg: 10px;
  --ws-radius-xl: 12px;
  --ws-shadow-sm: 0 1px 2px rgba(21, 26, 25, 0.04), 0 8px 20px rgba(21, 26, 25, 0.04);
  --ws-shadow-md: 0 14px 36px rgba(21, 26, 25, 0.08);

  --ui-bg: var(--workspace-canvas);
  --ui-bg-2: var(--workspace-sunken);
  --ui-surface: var(--workspace-surface);
  --ui-surface-2: var(--workspace-soft);
  --ui-text: var(--workspace-text);
  --ui-text-2: var(--workspace-muted);
  --ui-text-3: var(--workspace-faint);
  --ui-border: var(--workspace-line-strong);
  --ui-border-soft: var(--workspace-line);
  --ui-brand: var(--workspace-blue);
  --ui-brand-2: var(--workspace-blue-hover);
  --ui-brand-soft: var(--workspace-blue-soft);
  --ui-radius-sm: 8px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 10px;
  --ui-radius-xl: 12px;
  --ui-shadow-xs: 0 1px 2px rgba(21, 26, 25, 0.04);
  --ui-shadow-sm: 0 8px 22px rgba(21, 26, 25, 0.05);
  --ui-shadow-md: 0 16px 42px rgba(21, 26, 25, 0.10);

  --ds-bg: var(--workspace-canvas);
  --ds-bg-soft: var(--workspace-sunken);
  --ds-surface: var(--workspace-surface);
  --ds-surface-soft: var(--workspace-soft);
  --ds-text: var(--workspace-text);
  --ds-muted: var(--workspace-muted);
  --ds-faint: var(--workspace-faint);
  --ds-border: var(--workspace-line-strong);
  --ds-border-soft: var(--workspace-line);
  --ds-brand: var(--workspace-blue);
  --ds-brand-hover: var(--workspace-blue-hover);
  --ds-brand-soft: var(--workspace-blue-soft);
  --ds-radius-sm: 8px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 12px;
  --ds-shadow-sm: 0 8px 22px rgba(21, 26, 25, 0.05);
  --ds-shadow-md: 0 16px 42px rgba(21, 26, 25, 0.10);
  --ds-font: var(--font-sans);
  --ui-font: var(--font-sans);
  --ws-font: var(--font-sans);
  --ds-board-radius: 10px;
  --ds-card-radius: 8px;
  --ds-nav-item-radius: 8px;
  --ds-hairline: var(--workspace-line);
}

/* Final workspace brand lockup override. */
.workspace .side-brand-main,
.workspace .sub-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workspace .side-logo img,
.workspace .side-logo .header-logo,
.workspace .sub-brand img {
  flex: 0 0 50px;
  width: 50px;
  height: 34px;
  max-width: 50px;
  aspect-ratio: 955 / 613;
  padding: 2px;
  object-fit: contain;
  object-position: center;
}

body,
.workspace,
.content,
.app-content {
  background: var(--workspace-canvas);
  color: var(--workspace-text);
}

.workspace,
.workspace button,
.workspace input,
.workspace textarea,
.workspace select,
.workspace dialog,
.workspace [role="button"] {
  font-family: var(--font-sans);
}

.workspace {
  --ds-font: "WSR Noto Sans SC Core", "WSR Noto Sans SC Full", system-ui, sans-serif;
  --ui-font: "WSR Noto Sans SC Core", "WSR Noto Sans SC Full", system-ui, sans-serif;
  --ws-font: "WSR Noto Sans SC Core", "WSR Noto Sans SC Full", system-ui, sans-serif;
}

.sidebar,
.sub-sidebar,
.agent-thread-sidebar,
.workspace.agent-detail-open .agent-thread-sidebar {
  border-right-color: var(--workspace-line);
  background: var(--workspace-soft);
  color: var(--workspace-text);
}

.sidebar button,
.sub-sidebar button,
.manual-entry,
.side-home-link {
  color: var(--workspace-muted);
}

.sidebar > button:hover,
.sidebar > button.active,
.sub-sidebar button:hover,
.sub-sidebar button.active,
.side-home-link:hover,
.manual-entry:hover {
  border-color: var(--workspace-line);
  background: var(--workspace-sunken);
  color: var(--workspace-text);
  box-shadow: none;
}

.sidebar > button.active,
.sub-sidebar button.active {
  border-color: var(--workspace-line);
  background: var(--workspace-sunken);
  color: var(--workspace-text);
  box-shadow: inset 3px 0 0 var(--workspace-text);
}

.workspace-card,
.model-workspace,
.agent-info-panel,
.tool-card,
.agent-department-card,
.department-head,
.settings-group,
.user-profile-btn,
.settings-menu {
  border-color: var(--workspace-line);
  background: var(--workspace-surface);
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-shadow);
}

/* The old UI wrapped every section and row in a box. Large workspace regions
   now use spacing and surface contrast; borders remain only on true controls,
   menus, dialogs, and independent repeated cards. */
.workspace .workspace-card,
.workspace .model-workspace,
.workspace .agent-info-panel,
.workspace .settings-group,
.workspace .agent-workspace .workspace-card-head,
.workspace .skill-manager-shell,
.workspace .official-skill-panel,
.workspace .agent-builder-panel,
.workspace .tool-section,
.workspace .chat-history,
.workspace .agent-chat-shell,
.workspace .model-chat-shell {
  border: 0;
  box-shadow: none;
}

.workspace .workspace-card,
.workspace .model-workspace,
.workspace .agent-info-panel,
.workspace .settings-group,
.workspace .agent-builder-panel {
  background: var(--workspace-surface);
}

.workspace .workspace-card-head,
.workspace .skill-manager-head,
.workspace .tool-section-head,
.workspace .hardware-detail-head {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace .sub-brand,
.workspace .sub-fixed-actions,
.workspace .sub-user,
.workspace .agent-workspace-settings {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace .side-logo img,
.workspace .side-logo .header-logo,
.workspace .sub-brand img,
.workspace .sub-user .avatar {
  border: 0;
  padding: 0;
}

.workspace-card-head h2,
.model-workspace h2,
.tool-section-head h2,
.dashboard-welcome h1,
.dashboard-section h2 {
  color: var(--workspace-text);
  letter-spacing: 0;
}

.workspace-card-head p,
.model-workspace p,
.dashboard-welcome p,
.dashboard-section p {
  color: var(--workspace-muted);
}

.user-profile-btn:hover {
  border-color: #CDD5CE;
  background: var(--workspace-sunken);
  color: var(--workspace-text);
}

.user-profile-btn .avatar,
.sub-user .avatar {
  background: var(--workspace-text);
}

.settings-menu .settings-item:hover,
.workspace-menu button:hover,
.workspace-switcher-current:hover,
.workspace-switcher-current[aria-expanded="true"] {
  background: var(--workspace-sunken);
  color: var(--workspace-text);
}

/* Unified controls */
.workspace button,
.workspace a,
.workspace input,
.workspace textarea,
.workspace select {
  letter-spacing: 0;
}

.workspace button,
.workspace a,
.workspace [role="button"] {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.workspace button:focus-visible,
.workspace a:focus-visible,
.workspace input:focus-visible,
.workspace textarea:focus-visible,
.workspace select:focus-visible,
.workspace [role="button"]:focus-visible {
  outline: 3px solid rgba(40, 100, 220, 0.18);
  outline-offset: 2px;
}

.workspace input,
.workspace textarea,
.workspace select,
.workspace .form-control,
.workspace .agent-form input,
.workspace .agent-form textarea,
.workspace .agent-form select {
  border-color: var(--workspace-line-strong);
  border-radius: var(--workspace-radius);
  background: var(--workspace-surface);
  color: var(--workspace-text);
  box-shadow: none;
}

.workspace input:hover,
.workspace textarea:hover,
.workspace select:hover {
  border-color: #B7C0BA;
}

.workspace input:focus,
.workspace textarea:focus,
.workspace select:focus {
  border-color: var(--workspace-blue);
  box-shadow: 0 0 0 3px rgba(40, 100, 220, 0.10);
}

.workspace .btn,
.workspace .primary-btn,
.workspace .dashboard-ghost-btn,
.workspace .dashboard-section-title button,
.workspace .agent-action-btn,
.workspace .tool-action,
.workspace .model-action {
  min-height: 42px;
  border-radius: var(--workspace-radius);
  box-shadow: none;
}

.workspace .btn.primary,
.workspace .btn-primary,
.workspace .primary-btn,
.workspace button.primary,
.workspace .agent-action-btn.primary {
  border-color: var(--workspace-text);
  background: var(--workspace-text);
  color: #FFFFFF;
}

.workspace .btn.primary:hover,
.workspace .btn-primary:hover,
.workspace .primary-btn:hover,
.workspace button.primary:hover,
.workspace .agent-action-btn.primary:hover {
  border-color: #2C3331;
  background: #2C3331;
  color: #FFFFFF;
}

.workspace .btn.secondary,
.workspace .btn.ghost,
.workspace .secondary-btn,
.workspace .dashboard-ghost-btn,
.workspace .dashboard-section-title button {
  border-color: var(--workspace-line-strong);
  background: var(--workspace-surface);
  color: var(--workspace-text);
}

.workspace .btn.secondary:hover,
.workspace .btn.ghost:hover,
.workspace .secondary-btn:hover,
.workspace .dashboard-ghost-btn:hover,
.workspace .dashboard-section-title button:hover {
  border-color: var(--workspace-line-strong);
  background: var(--workspace-sunken);
  color: var(--workspace-text);
}

/* Dashboard */
.dashboard-home {
  gap: 20px;
}

.dashboard-overview {
  overflow: hidden;
  border-radius: var(--workspace-radius);
  background: var(--workspace-surface);
  box-shadow: 0 8px 26px rgba(21, 26, 25, 0.045);
}

.dashboard-overview-cell {
  min-width: 0;
  padding: 20px 22px;
}

.dashboard-overview-cell + .dashboard-overview-cell {
  border-left: 1px solid var(--workspace-line);
}

.dashboard-overview-cell .dashboard-card-head {
  margin-bottom: 10px;
}

.dashboard-overview-cell p {
  margin: 0;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.65;
}

.dashboard-agents-card,
.dashboard-todo-card {
  align-self: start;
}

.dashboard-hero,
.dashboard-card {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-shadow);
}

.dashboard-card {
  border: 0;
  box-shadow: 0 8px 26px rgba(21, 26, 25, 0.045);
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  border: 0;
  background: #E8EDF2;
  box-shadow: 0 14px 36px rgba(44, 58, 68, 0.08);
}

.dashboard-hero::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
  border-left: 1px solid rgba(72, 91, 105, 0.12);
  background: rgba(255, 255, 255, 0.22);
  content: "";
  pointer-events: none;
}

.dashboard-hero > * {
  position: relative;
  z-index: 1;
}

.dashboard-kicker {
  color: var(--workspace-blue);
  letter-spacing: 0;
}

.dashboard-hero h2,
.dashboard-card-head strong,
.dashboard-section-title h3,
.dashboard-agent-item,
.dashboard-todo strong {
  color: var(--workspace-text);
}

.dashboard-hero h2 {
  color: #202B31;
}

.dashboard-hero p,
.dashboard-card p,
.dashboard-section-title p,
.dashboard-card-head span,
.dashboard-agent-item small,
.dashboard-todo span,
.dashboard-empty,
.dashboard-loading {
  color: var(--workspace-muted);
}

.dashboard-hero p {
  color: #58686F;
}

.workspace .dashboard-hero .dashboard-ghost-btn {
  border-color: rgba(42, 60, 70, 0.16);
  background: rgba(255, 255, 255, 0.58);
  color: #26343A;
}

.workspace .dashboard-hero .dashboard-ghost-btn:hover {
  border-color: rgba(42, 60, 70, 0.24);
  background: #FFFFFF;
  color: #202B31;
}

.dashboard-meta-row span {
  border-color: var(--workspace-line);
  border-radius: 999px;
  background: var(--workspace-sunken);
  color: var(--workspace-text);
}

.dashboard-agent-item,
.dashboard-todo,
.dashboard-empty,
.dashboard-loading {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-soft);
}

.dashboard-agent-item:hover {
  border-color: var(--workspace-line-strong);
  background: var(--workspace-sunken);
}

.dashboard-agent-item svg {
  stroke: var(--workspace-blue);
}

/* Dynamic workspace surfaces */
.model-workspace,
.workspace-card,
.agent-info-panel,
.agent-department-card,
.department-head,
.tool-card,
.tool-section,
.skill-card,
.knowledge-card,
.cron-job-card,
.chat-composer,
.chat-history,
.agent-chat-shell,
.model-chat-shell,
.agent-builder-panel {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-shadow);
}

.agent-row,
.official-agent-row,
.openclaw-agent-row,
.tool-row,
.skill-list-item,
.knowledge-list-item,
.attachment-item,
.cron-run-item {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-soft);
  color: var(--workspace-text);
  box-shadow: none;
}

.workspace .agent-row,
.workspace .official-agent-row,
.workspace .openclaw-agent-row,
.workspace .tool-row,
.workspace .skill-list-item,
.workspace .knowledge-list-item,
.workspace .cron-run-item,
.workspace .dashboard-agent-item,
.workspace .dashboard-todo,
.workspace .setting-row,
.workspace .notification-item {
  border: 0;
  box-shadow: none;
}

.workspace .agent-row + .agent-row,
.workspace .official-agent-row + .official-agent-row,
.workspace .openclaw-agent-row + .openclaw-agent-row,
.workspace .tool-row + .tool-row,
.workspace .skill-list-item + .skill-list-item,
.workspace .knowledge-list-item + .knowledge-list-item,
.workspace .setting-row + .setting-row,
.workspace .notification-item + .notification-item {
  border-top: 1px solid var(--workspace-line);
  border-radius: 0;
}

.workspace .dashboard-agent-list,
.workspace .dashboard-todo-list {
  gap: 0;
  overflow: hidden;
  border-radius: var(--workspace-radius);
  background: var(--workspace-soft);
}

.workspace .dashboard-agent-item,
.workspace .dashboard-todo {
  border-radius: 0;
  background: transparent;
}

.workspace .dashboard-agent-item + .dashboard-agent-item,
.workspace .dashboard-todo + .dashboard-todo {
  border-top: 1px solid var(--workspace-line);
}

.agent-row:hover,
.official-agent-row:hover,
.openclaw-agent-row:hover,
.tool-row:hover,
.skill-list-item:hover,
.knowledge-list-item:hover {
  border-color: var(--workspace-line-strong);
  background: var(--workspace-sunken);
}

.agent-badge,
.status-chip,
.plan-badge,
.tool-tag,
.skill-tag,
.model-tag,
.department-badge {
  border-color: var(--workspace-line);
  border-radius: 999px;
  background: var(--workspace-sunken);
  color: var(--workspace-text);
}

.workspace .muted,
.workspace .empty-state,
.workspace .agent-empty-hint,
.workspace .empty-hint {
  color: var(--workspace-muted);
}

/* Blue communicates selection or a link; green is reserved for live/success status. */
.sub-item.active,
.sub-conversation.active,
.sub-agent-row.active,
.agent-thread-list button.active,
.workspace .is-selected,
.workspace [aria-selected="true"] {
  border-color: transparent;
  background: var(--workspace-blue-soft);
  color: var(--workspace-blue);
  box-shadow: none;
}

.workspace .success,
.workspace .online,
.workspace .is-online,
.workspace .status-success,
.workspace .status-online {
  color: var(--workspace-success);
}

/* Menus and dialogs */
.settings-menu,
.workspace-menu,
.modal,
.modal-card,
.confirm-card,
.app-confirm-card,
.agent-modal,
.agent-builder-modal,
.skill-detail-modal,
.toast,
.app-toast {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-surface);
  color: var(--workspace-text);
  box-shadow: 0 18px 54px rgba(21, 26, 25, 0.14);
}

.modal-overlay,
.confirm-overlay,
.app-confirm-overlay,
.agent-modal-overlay,
.agent-builder-overlay {
  background: rgba(21, 26, 25, 0.46);
}

.app-confirm-card h3,
.app-confirm-card p,
.app-toast-text {
  color: var(--workspace-text);
}

.app-toast-dot {
  background: var(--workspace-blue);
}

.app-toast.success .app-toast-dot {
  background: var(--workspace-success);
}

.app-toast.error .app-toast-dot {
  background: var(--workspace-danger);
}

/* Agent configuration pickers */
.mcp-dropdown-option,
.openclaw-skill-item,
.skill-detail-step,
.knowledge-library-page .knowledge-base-card-meta {
  color: var(--workspace-text);
}

.mcp-dropdown-option em,
.openclaw-skill-item span,
.agent-builder-status {
  border-radius: 999px;
  background: var(--workspace-blue-soft);
  color: var(--workspace-blue);
}

/* Floating Agent builder */
.agent-builder-panel,
.agent-builder-draft,
.agent-builder-composer,
.agent-builder-composer > textarea,
.agent-builder-voice-btn,
.agent-builder-close {
  border-color: var(--workspace-line);
  background: var(--workspace-surface);
  color: var(--workspace-text);
}

.agent-builder-panel {
  border-radius: var(--workspace-radius);
  box-shadow: 0 18px 54px rgba(21, 26, 25, 0.14);
}

.agent-builder-head,
.agent-builder-composer {
  border-color: var(--workspace-line);
  background: var(--workspace-soft);
}

.agent-builder-draft,
.agent-builder-draft dd,
.agent-builder-draft p,
.agent-builder-notice,
.agent-builder-close,
.agent-builder-voice-btn {
  color: var(--workspace-muted);
}

.agent-builder-composer > textarea:focus,
.agent-builder-voice-btn:hover,
.agent-builder-voice-btn.active {
  border-color: var(--workspace-blue);
  background: var(--workspace-blue-soft);
  box-shadow: 0 0 0 3px rgba(40, 100, 220, 0.10);
}

/* Chat and model workspace */
.composer,
.chat-composer,
.chat-bubble,
.prompt-chip,
.selected-agent,
.model-reply,
.generated-image,
.generated-video {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
}

.workspace .chat-history,
.workspace .chat-message.assistant .chat-bubble,
.workspace .model-reply {
  border: 0;
}

.composer,
.chat-composer,
.chat-message.assistant .chat-bubble,
.model-reply {
  background: var(--workspace-surface);
  box-shadow: var(--workspace-shadow);
}

.composer-actions {
  border-top-color: var(--workspace-line);
}

.composer select,
.selected-agent,
.prompt-chip,
.model-reply {
  background: var(--workspace-soft);
}

.prompt-chip:hover {
  border-color: var(--workspace-line-strong);
  background: var(--workspace-sunken);
  color: var(--workspace-text);
}

.attachment-chip,
.message-attachments span,
.model-package-select,
.workspace .notification-item,
.workspace .profile-summary,
.workspace .profile-stat,
.workspace .profile-section,
.workspace .setting-row {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-soft);
}

.workspace .notification-item:hover,
.workspace .profile-stat:hover,
.workspace .setting-row:hover {
  border-color: var(--workspace-line-strong);
  background: var(--workspace-sunken);
}

.model-package-select {
  color: var(--workspace-blue);
}

/* Profile, workspace switcher, and tool catalogue */
.user-profile-btn,
.workspace-switcher-current,
.workspace-menu,
.notification-panel,
.manual-entry,
.side-home-link,
.tool-card,
.tool-cover,
.tool-meta,
.tool-price,
.tool-tag {
  border-radius: var(--workspace-radius);
}

.workspace-switcher-current,
.notification-panel,
.tool-cover,
.tool-meta {
  border-color: var(--workspace-line);
  background: var(--workspace-soft);
  color: var(--workspace-text);
}

.notification-badge {
  border-radius: 999px;
}

.workspace .danger,
.workspace .btn-danger,
.workspace button[data-danger="true"] {
  border-color: #EBCACA;
  background: var(--workspace-danger-soft);
  color: var(--workspace-danger);
}

.workspace .danger:hover,
.workspace .btn-danger:hover,
.workspace button[data-danger="true"]:hover {
  border-color: #E1AFAF;
  background: #F8DFDF;
}

/* OrgAgents overview: a navigation rail and one purposeful workspace surface. */
.workspace.subnav-open:not(.agent-detail-open) .content {
  padding: 24px clamp(24px, 4vw, 64px) 16px;
}

.workspace.subnav-open:not(.agent-detail-open) .model-content {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.workspace .agent-home {
  display: grid;
  gap: 28px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 24px 0 0;
  background: transparent;
  box-shadow: none;
}

.workspace .agent-home > .workspace-card-head {
  padding: 0;
}

.agent-home-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--workspace-blue);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.workspace .agent-home .workspace-card-head h2 {
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 1.15;
}

.workspace .agent-home .workspace-card-head p {
  max-width: 620px;
  font-size: 14px;
}

.agent-home-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  overflow: hidden;
  min-height: 310px;
  border-radius: 10px;
  background: #151A19;
  box-shadow: 0 20px 54px rgba(21, 26, 25, 0.14);
}

.agent-home-primary {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: clamp(32px, 5vw, 64px);
}

.agent-home-primary > span {
  margin-bottom: 12px;
  color: #8FB2FF;
  font-size: 12px;
  font-weight: 720;
}

.agent-home-primary h3 {
  max-width: 560px;
  margin: 0 0 28px;
  color: #FFFFFF;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 760;
  line-height: 1.28;
}

.workspace .agent-home-primary .primary-btn {
  min-width: 132px;
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: #151A19;
}

.workspace .agent-home-primary .primary-btn:hover {
  border-color: #E8ECE8;
  background: #E8ECE8;
  color: #151A19;
}

.agent-home-stats {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.025);
}

.agent-home-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 28px;
}

.agent-home-stats > div + div {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.agent-home-stats strong {
  color: #FFFFFF;
  font-size: 30px;
  line-height: 1;
}

.agent-home-stats span {
  color: #BFC7C4;
  font-size: 12px;
}

.workspace .agent-department {
  gap: 0;
  margin: 0;
}

.workspace .department-head {
  min-height: 56px;
  border: 0;
  border-radius: 6px;
  padding: 8px 8px 8px 12px;
  background: transparent;
  box-shadow: none;
}

.workspace .department-head:hover {
  background: var(--workspace-sunken);
}

.workspace .department-head strong {
  font-size: 13px;
}

.workspace .department-head small {
  color: var(--workspace-faint);
}

.workspace .department-head button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 18px;
}

.workspace .department-head button:hover {
  background: var(--workspace-text);
  color: #FFFFFF;
}

.workspace .sub-nav-scroll {
  padding-right: 4px;
}

.workspace .sub-brand {
  margin-bottom: 12px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--workspace-line);
}

/* Keep department parents and Agent children readable at a glance. */
.workspace .agent-department {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--workspace-line);
}

.workspace .department-head {
  min-height: 52px;
  padding: 7px 6px 7px 12px;
  background: var(--workspace-soft);
}

.workspace .department-head strong {
  font-weight: 760;
}

.workspace .department-actions {
  gap: 4px;
}

.workspace .department-agent-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--workspace-muted);
  font-size: 11px;
  line-height: 1;
}

.workspace .agent-department > .sub-agent-row {
  position: relative;
  min-height: 40px;
  margin: 3px 4px 0 18px;
  border: 0;
  border-radius: 6px;
  padding: 7px 8px 7px 22px;
  background: transparent;
  box-shadow: none;
}

.workspace .agent-department > .sub-agent-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 10px;
  height: 50%;
  border: 0;
  border-bottom: 1px solid var(--workspace-line-strong);
  border-left: 1px solid var(--workspace-line-strong);
  border-radius: 0 0 0 5px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.workspace .agent-department > .sub-agent-row:hover {
  background: var(--workspace-soft);
}

.workspace .agent-department > .sub-agent-row.active {
  background: var(--workspace-blue-soft);
  color: var(--workspace-blue);
}

.workspace .agent-department > .sub-agent-row strong {
  font-size: 12px;
  font-weight: 680;
}

.workspace .agent-department > .sub-agent-row small {
  color: var(--workspace-faint);
  font-size: 11px;
}

/* The empty workspace is a quiet light surface, not a promotional dark banner. */
.agent-home-body {
  min-height: 264px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 14px 36px rgba(30, 36, 33, 0.07);
}

.agent-home-primary > span {
  color: var(--workspace-blue);
}

.agent-home-primary h3 {
  color: var(--workspace-text);
}

.workspace .agent-home-primary .primary-btn {
  border-color: var(--workspace-text);
  background: var(--workspace-text);
  color: #FFFFFF;
}

.workspace .agent-home-primary .primary-btn:hover {
  border-color: #303633;
  background: #303633;
  color: #FFFFFF;
}

.agent-home-stats {
  border-left-color: var(--workspace-line);
  background: var(--workspace-soft);
}

.agent-home-stats > div + div {
  border-top-color: var(--workspace-line);
}

.agent-home-stats strong {
  color: var(--workspace-text);
}

.agent-home-stats span {
  color: var(--workspace-muted);
}

/* One compact control communicates both the StarCore family and selected tier. */
.workspace .model-package-select {
  gap: 0;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--workspace-line-strong);
  border-radius: 6px;
  padding: 0;
  background: #FFFFFF;
  color: var(--workspace-text);
  box-shadow: none;
}

.workspace .model-package-select > span {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 11px;
  border-right: 1px solid var(--workspace-line);
  background: var(--workspace-soft);
  color: var(--workspace-muted);
  font-size: 11px;
  font-weight: 650;
}

.workspace .model-package-select select {
  min-width: 118px;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 30px 0 12px;
  background-color: #FFFFFF;
  color: var(--workspace-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.workspace .model-package-select:focus-within {
  border-color: var(--workspace-blue);
  box-shadow: 0 0 0 3px var(--workspace-blue-soft);
}

/* Surface hierarchy: navigation, utility tools, identity, and work content
   must read as different layers without outlining every item. */
.workspace .sub-sidebar {
  background: #FFFFFF;
  box-shadow: 8px 0 28px rgba(21, 26, 25, 0.035);
}

.workspace .sub-nav-scroll {
  padding: 14px 14px 20px;
}

.workspace .sub-brand {
  margin: 0 0 16px;
  padding: 2px 4px 16px;
}

.workspace .sub-group-title {
  margin: 22px 4px 8px;
  color: var(--workspace-faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.workspace .sub-item,
.workspace .sub-conversation {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

.workspace .sub-item.strong {
  margin-bottom: 4px;
  background: var(--workspace-text);
  color: #FFFFFF;
}

.workspace .sub-item.strong:hover {
  background: #303633;
  color: #FFFFFF;
}

.workspace .sub-conversation:hover {
  background: var(--workspace-soft);
}

.workspace .sub-conversation.active {
  background: var(--workspace-blue-soft);
  color: var(--workspace-blue);
}

.workspace .sub-user-wrap {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  border-top: 1px solid var(--workspace-line-strong);
  padding: 12px;
  background: var(--workspace-soft);
  box-shadow: 0 -12px 30px rgba(21, 26, 25, 0.035);
}

.workspace .sub-fixed-actions {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  border: 0;
  border-radius: 8px;
  padding: 30px 6px 6px;
  background: var(--workspace-sunken);
}

.workspace .sub-fixed-actions::before {
  content: "固定入口";
  position: absolute;
  top: 9px;
  left: 12px;
  color: var(--workspace-faint);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.workspace .sub-fixed-actions .manual-entry {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--workspace-muted);
}

.workspace .sub-fixed-actions .manual-entry + .manual-entry {
  border-top: 0;
}

.workspace .sub-fixed-actions .manual-entry:hover,
.workspace .sub-fixed-actions .manual-entry.active {
  background: #FFFFFF;
  color: var(--workspace-text);
  box-shadow: 0 2px 10px rgba(21, 26, 25, 0.06);
}

.workspace .sub-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  border: 0;
  border-radius: 8px;
  padding: 10px;
  background: #E6EDE9;
  color: var(--workspace-text);
  box-shadow: 0 8px 20px rgba(47, 67, 58, 0.08);
  cursor: pointer;
}

.workspace .sub-user:hover {
  background: #DDE7E1;
}

.workspace .sub-user .avatar {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--workspace-text);
}

.workspace .sub-user .name {
  color: var(--workspace-text);
  font-weight: 700;
}

.workspace .sub-user .plan {
  color: var(--workspace-muted);
}

.workspace .side-bottom {
  margin: auto 12px 12px;
  border-top: 1px solid var(--workspace-line-strong);
  padding-top: 12px;
}

.workspace .side-bottom > .manual-entry {
  margin-bottom: 8px;
  border: 0;
  background: transparent;
}

.workspace .side-bottom .user-profile-btn {
  border: 0;
  background: #E6EDE9;
  color: var(--workspace-text);
  box-shadow: 0 8px 20px rgba(47, 67, 58, 0.08);
}

.workspace .side-bottom .user-profile-btn:hover {
  background: #DDE7E1;
}

.workspace .side-bottom .user-profile-btn .name {
  color: var(--workspace-text);
}

.workspace .side-bottom .user-profile-btn .balance {
  color: var(--workspace-muted);
}

/* Large page shells are layout regions. Only controls and repeated entities
   receive a raised surface. */
.workspace .model-workspace,
.workspace .workspace-card,
.workspace .agent-info-panel,
.workspace .tool-section,
.workspace .skill-library-page,
.workspace .knowledge-library-page {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace .model-content {
  background: transparent;
}

.workspace .workspace-card-head {
  padding-inline: 0;
}

.workspace .dashboard-card,
.workspace .dashboard-overview,
.workspace .tool-card,
.workspace .skill-card,
.workspace .knowledge-card,
.workspace .agent-builder-panel {
  border: 0;
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(21, 26, 25, 0.06);
}

.workspace .chat-history,
.workspace .agent-chat-shell,
.workspace .model-chat-shell {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace .chat-message.assistant .chat-bubble,
.workspace .model-reply {
  border: 0;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(21, 26, 25, 0.055);
}

.workspace .chat-message.user .chat-bubble {
  border: 0;
  background: #FFFFFF;
  color: #202624;
  box-shadow: 0 8px 24px rgba(21, 26, 25, 0.055);
}

.workspace .chat-composer,
.workspace .composer {
  border: 0;
  background: #FFFFFF;
  box-shadow: 0 14px 36px rgba(21, 26, 25, 0.11);
}

.workspace .composer-actions {
  border-top: 1px solid var(--workspace-line);
}

.workspace .dashboard-agent-list,
.workspace .dashboard-todo-list {
  background: var(--workspace-soft);
}

.workspace .dashboard-agent-item,
.workspace .dashboard-todo,
.workspace .agent-row,
.workspace .official-agent-row,
.workspace .openclaw-agent-row,
.workspace .tool-row,
.workspace .skill-list-item,
.workspace .knowledge-list-item {
  border: 0;
  box-shadow: none;
}

.workspace .settings-group,
.workspace .profile-section {
  border: 0;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(21, 26, 25, 0.055);
}

@media (prefers-reduced-motion: reduce) {
  .workspace *,
  .workspace *::before,
  .workspace *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 760px) {
  .workspace.subnav-open:not(.agent-detail-open) .content {
    padding: calc(max(74px, env(safe-area-inset-top) + 62px)) 12px calc(env(safe-area-inset-bottom) + 14px);
  }

  .workspace .skill-library-page .skill-manager-head {
    padding-top: 8px;
  }

  .mobile-workspace-bar {
    border-bottom: 1px solid var(--workspace-line);
    background: rgba(255, 255, 255, 0.96);
  }

  .workspace button,
  .workspace a,
  .workspace [role="button"] {
    min-height: 44px;
  }

  .dashboard-hero,
  .dashboard-card,
  .model-workspace,
  .workspace-card,
  .agent-info-panel,
  .tool-card {
    border-radius: var(--workspace-radius);
  }

  .dashboard-hero::after {
    display: none;
  }

  .agent-home-body {
    grid-template-columns: 1fr;
  }

  .agent-home-stats {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    border-top: 1px solid var(--workspace-line);
    border-left: 0;
  }

  .agent-home-stats > div {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .agent-home-stats > div + div {
    border-top: 0;
    border-left: 1px solid var(--workspace-line);
  }
}