/* Common UI extracted verbatim from Lingshu 2.0, 20260920-agent-history-v22.
   Source: public/director-workbench-v2.css, through common field controls.
   Keep Shanbao color and feature adaptations in ../styles.css. */
/* 灵枢 Creator OS 2.0 shell and responsive surface.
   Business widgets keep their existing hooks; this layer owns the workspace frame,
   navigation hierarchy, responsive sizing, and the shared visual language. */

body.ui-v2 {
  --v2-bg: #f5f7fa;
  --v2-surface: #ffffff;
  --v2-surface-muted: #f8fafc;
  --v2-line: #e5e9ef;
  --v2-line-strong: #d5dce5;
  --v2-ink: #202936;
  --v2-muted: #6d7785;
  --v2-faint: #98a2af;
  --v2-brand: #3262b8;
  --v2-brand-strong: #234d94;
  --v2-brand-soft: #edf3fc;
  --v2-brand-line: #cbdaf0;
  --v2-accent-gradient: linear-gradient(115deg, #315db4, #217e89);
  --v2-selection-gradient: linear-gradient(105deg, #eaf0fc, #edf7f6);
  --blue: var(--v2-brand);
  --blue-soft: var(--v2-brand-soft);
  --v2-green: #2f8d61;
  --v2-green-soft: #e8f5ee;
  --v2-gold: #b67813;
  --v2-gold-soft: #fff5df;
  --v2-danger: #c94d4d;
  --v2-danger-soft: #fceded;
  --v2-shadow-sm: 0 1px 2px rgba(20, 30, 44, 0.03), 0 8px 24px rgba(20, 30, 44, 0.04);
  --v2-shadow-md: 0 12px 32px rgba(20, 30, 44, 0.08);
  color: var(--v2-ink);
  background: var(--v2-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

body.ui-v2,
body.ui-v2 .app-shell {
  min-width: 0;
}

body.ui-v2 .app-shell {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--v2-bg);
}

body.ui-v2 .hero {
  z-index: 300;
  min-height: 0;
  height: 68px;
  margin: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--v2-line);
  background: linear-gradient(110deg, #ffffff 35%, #f4f8ff 75%, #f0f9f7);
  box-shadow: 0 1px 0 rgba(20, 30, 44, 0.02);
}

body.ui-v2 .brand-lockup {
  flex: 0 0 auto;
  min-width: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
}

body.ui-v2 .brand-logo {
  width: auto;
  height: 38px;
}

body.ui-v2 .header-version-switch {
  display: none !important;
}

body.ui-v2 .header-feedback-btn {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  color: var(--v2-muted);
  background: var(--v2-surface-muted);
  font-size: 12px;
  font-weight: 750;
}

body.ui-v2 .header-feedback-btn:hover {
  border-color: var(--v2-line-strong);
  color: var(--v2-ink);
  background: var(--v2-surface);
}

body.ui-v2 .header-actions {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
  gap: 12px;
}

body.ui-v2 .header-stats {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  color: var(--v2-muted);
  background: var(--v2-surface-muted);
  font-size: 11px;
  font-weight: 700;
}

body.ui-v2 #accountMenuButton.user-name-btn {
  min-height: 40px;
  padding: 0 3px;
  color: var(--v2-ink);
}

body.ui-v2 #accountMenuButton .account-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

body.ui-v2 #accountMenuButton .account-button-copy b {
  color: var(--v2-ink);
  font-size: 13px;
}

body.ui-v2 #accountMenuButton .account-button-copy small {
  color: var(--v2-faint);
  font-size: 10px;
}

body.ui-v2 .workspace-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  overflow: hidden;
}

body.ui-v2 .workspace-rail {
  position: relative;
  z-index: 220;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--v2-line);
  background: var(--v2-surface);
}

body.ui-v2 .workspace-rail-heading {
  padding: 22px 18px 10px;
  color: var(--v2-faint);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

body.ui-v2 #stepNav {
  z-index: 220;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.ui-v2 #stepNav > .grouped-nav-item,
body.ui-v2 #stepNav > .top-nav-button {
  width: 100%;
  min-width: 0;
}

body.ui-v2 #stepNav > .grouped-nav-item {
  position: relative;
}

body.ui-v2 #stepNav > button,
body.ui-v2 #stepNav .grouped-nav-main {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--v2-muted);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}

body.ui-v2 #stepNav > button:hover,
body.ui-v2 #stepNav .grouped-nav-main:hover,
body.ui-v2 #stepNav .grouped-nav-main[aria-expanded="true"] {
  color: var(--v2-ink);
  background: var(--v2-surface-muted);
}

body.ui-v2 #stepNav > button.active,
body.ui-v2 #stepNav .grouped-nav-main.active {
  color: var(--v2-brand-strong);
  border-color: var(--v2-brand-line);
  background: var(--v2-selection-gradient);
}

body.ui-v2 #stepNav > button.active::before,
body.ui-v2 #stepNav .grouped-nav-main.active::before,
body.ui-v2 #stepNav > button.active::after,
body.ui-v2 #stepNav .grouped-nav-main.active::after {
  content: none;
}

body.ui-v2 #stepNav .grouped-nav-caret {
  margin-left: auto;
  border-color: currentColor;
}

/* Keep expanded navigation in the rail's flow, clear of adjacent sections. */
body.ui-v2 #stepNav .grouped-nav-menu {
  position: static;
  width: auto;
  min-width: 0;
  margin: 5px 0 8px 12px;
  padding: 0 0 0 8px;
  display: grid;
  gap: 3px;
  border: 0;
  border-left: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.ui-v2 #stepNav .grouped-nav-menu::before {
  content: none;
}

/* Flat single-line rows that match the nav rail rhythm. */
body.ui-v2 #stepNav .grouped-nav-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  width: 100%;
  min-height: 38px;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--v2-muted);
  background: transparent;
  text-align: left;
  line-height: 1.5;
  box-shadow: none;
  white-space: normal;
  transform: none;
}

body.ui-v2 #stepNav .grouped-nav-menu button span {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  line-height: 1.5;
}

body.ui-v2 #stepNav .grouped-nav-menu button small {
  display: none;
}

body.ui-v2 #stepNav .grouped-nav-menu button:hover,
body.ui-v2 #stepNav .grouped-nav-menu button.active {
  color: var(--v2-ink);
  background: var(--v2-surface-muted);
}

body.ui-v2 #stepNav .grouped-nav-menu button:hover span,
body.ui-v2 #stepNav .grouped-nav-menu button.active span {
  color: var(--v2-brand-strong);
}

body.ui-v2 #stepNav .grouped-nav-menu button.active {
  background: var(--v2-selection-gradient);
}

body.ui-v2 #stepNav button:focus-visible {
  outline: 2px solid var(--v2-brand);
  outline-offset: -2px;
}

body.ui-v2 .workspace-rail .legacy-step-nav {
  display: none !important;
}

body.ui-v2 .workspace-content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--v2-bg);
}

body.ui-v2 .mobile-workspace-nav {
  position: relative;
  z-index: 100;
  min-height: 56px;
  margin: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--v2-line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.ui-v2 .mobile-workspace-nav[hidden] {
  display: none;
}

body.ui-v2 .mobile-workspace-nav > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.ui-v2 .mobile-workspace-nav button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--v2-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

body.ui-v2 .mobile-workspace-nav button:hover,
body.ui-v2 .mobile-workspace-nav button.active {
  color: var(--v2-brand-strong);
  border-color: var(--v2-brand-line);
  background: var(--v2-selection-gradient);
}

body.ui-v2 .workspace-content > main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

body.ui-v2 .stage.active {
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.ui-v2 .stage-grid {
  width: 100%;
  min-height: 100%;
  height: auto;
  overflow: visible;
}

body.ui-v2 .stage-grid,
body.ui-v2 .source-grid,
body.ui-v2 .chat-grid,
body.ui-v2 .knowledge-grid,
body.ui-v2 .rewrite-grid,
body.ui-v2 .review-grid {
  gap: 18px;
}

body.ui-v2 .source-grid,
body.ui-v2 .chat-grid,
body.ui-v2 .knowledge-grid,
body.ui-v2 .rewrite-grid,
body.ui-v2 .review-grid {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
}

body.ui-v2 .panel,
body.ui-v2 .chanmama-collector-panel {
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--v2-surface);
  box-shadow: none;
}

body.ui-v2 .panel-head {
  min-height: 58px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-surface);
}

body.ui-v2 .panel-head h2,
body.ui-v2 .panel-head h3 {
  color: var(--v2-ink);
  font-size: 16px;
  font-weight: 850;
}

body.ui-v2 .panel-head p {
  margin-top: 4px;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.55;
}

body.ui-v2 input,
body.ui-v2 textarea,
body.ui-v2 select {
  border-color: var(--v2-line-strong);
  border-radius: 8px;
  color: var(--v2-ink);
  background: var(--v2-surface);
}

body.ui-v2 input:focus,
body.ui-v2 textarea:focus,
body.ui-v2 select:focus {
  border-color: var(--v2-brand);
  box-shadow: 0 0 0 3px rgba(50, 98, 184, 0.12);
}

body.ui-v2 .primary-btn {
  min-height: 40px;
  border-radius: 8px;
  color: #fff;
  background: var(--v2-accent-gradient);
  box-shadow: 0 2px 6px rgba(50, 98, 184, 0.12);
}

body.ui-v2 .primary-btn:hover {
  background: var(--v2-brand-strong);
}

body.ui-v2 .ghost-btn {
  min-height: 38px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  color: var(--v2-ink);
  background: var(--v2-surface);
}

body.ui-v2 .ghost-btn:hover {
  border-color: var(--v2-brand-line);
  color: var(--v2-brand-strong);
  background: var(--v2-brand-soft);
}

body.ui-v2 .field-row label,
body.ui-v2 .field label,
body.ui-v2 .rewrite-course-picker > label,
body.ui-v2 .digital-human-field > span {
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 750;
}