*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --col-left:   232px;
  --col-right:  380px;
  --bg-base:    #f7f2e7;
  --bg-panel:   #f1ead9;
  --bg-card:    #eae1cb;
  --bg-hover:   #dfd3b8;
  --border:     #d3c4a0;
  --text-pri:   #2a2620;
  --text-sec:   #6b6152;
  --text-muted: #9c9280;
  --accent:     #1f3d2e;
  --accent-dim: #3d6b52;
  --seshat:     #1f3d2e;
  --seshat-dim: #3d6b52;
  --font:       'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

html, body {
  height: 100%;
  background: var(--bg-base);
  color: var(--text-pri);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Workbench shell ── */
#workbench {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Left column ── */
#col-left {
  width: var(--col-left);
  min-width: var(--col-left);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.col-header {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-header .logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}

.col-header .version {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Project switcher */
#project-switcher {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

#project-switcher select {
  width: 100%;
  background: var(--bg-card);
  color: var(--text-pri);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

#project-switcher select:focus {
  border-color: var(--accent-dim);
}

#btn-new-project {
  margin-top: 6px;
  width: 100%;
  background: transparent;
  color: var(--accent-dim);
  border: 1px dashed var(--accent-dim);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

#btn-new-project:hover {
  border-color: var(--accent);
  color: var(--bg-base);
  background: var(--accent);
}

/* Asset tree */
#asset-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.tree-section {
  margin: 0 8px 6px;
}

.nav-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s;
}

.nav-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-hover);
}

.nav-card-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sec);
  background: var(--bg-hover);
  border-radius: 5px;
}

.nav-card.has .nav-card-num {
  color: var(--bg-base);
  background: var(--accent);
}

.nav-card-body {
  min-width: 0;
  flex: 1;
}

.nav-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-pri);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-card-sub {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* ── Middle column ── */
#col-mid {
  flex: 1;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.mid-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mid-header h1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-pri);
}

.mid-header .subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* Socket cards (placeholder grid) */
#socket-grid {
  display: none;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  overflow-y: auto;
}

/* ── Seshat floating trigger ── */
#seshat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  color: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 150;
  box-shadow: 0 4px 18px rgba(43,38,32,0.18);
  transition: all 0.15s;
}
#seshat-fab:hover { border-color: var(--accent); background: var(--accent); }
#seshat-fab-icon { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
#seshat-fab-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg-base);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-base);
}

/* ── Right column (悬浮面板，非常驻侧栏) ── */
#col-right {
  position: fixed;
  right: 24px;
  bottom: 88px;
  width: var(--col-right);
  max-width: calc(100vw - 48px);
  height: min(620px, calc(100vh - 128px));
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(43,38,32,0.20);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 140;
}

#col-right.open {
  display: flex;
}

.seshat-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#seshat-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
}
#seshat-close:hover { color: var(--text-pri); }

.seshat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--seshat);
}

.seshat-tagline {
  font-size: 11px;
  color: var(--text-muted);
}

.seshat-status {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
}

/* Dispatch log */
#dispatch-log {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 48px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
}

.dispatch-item {
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dispatch-item .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--seshat-dim);
  flex-shrink: 0;
}

/* Chat area */
#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg {
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
}

.msg.seshat {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--text-pri);
  border-bottom-left-radius: 3px;
}

.msg.user {
  align-self: flex-end;
  background: var(--accent-dim);
  color: var(--bg-base);
  border-bottom-right-radius: 3px;
}

.msg .sender {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 3px;
  opacity: 0.7;
}

/* M3 Hermes 路由卡 */
.msg.route-card {
  background: rgba(192, 132, 252, 0.08);
  border: 1px solid rgba(192, 132, 252, 0.2);
  padding: 6px 10px;
  font-size: 12px;
}

.route-body {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.route-model {
  font-weight: 600;
  color: var(--seshat);
  font-size: 12px;
}

.route-arrow {
  color: var(--text-muted);
  font-size: 11px;
}

.route-reason {
  color: var(--text-pri);
  font-size: 12px;
}

.route-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.route-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(192, 132, 252, 0.15);
  color: var(--seshat-dim);
  font-family: monospace;
}

/* Chat input */
#chat-input-area {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#chat-input {
  flex: 1;
  background: var(--bg-card);
  color: var(--text-pri);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  resize: none;
  min-height: 36px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.15s;
}

#chat-input:focus {
  border-color: var(--seshat-dim);
}

#btn-send {
  background: var(--seshat-dim);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

#btn-send:hover {
  background: var(--seshat);
}

/* ── Socket grid cards ── */
#socket-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  overflow-y: auto;
  align-content: start;
}

.socket-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.socket-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.socket-icon {
  font-size: 22px;
  line-height: 1;
}

.socket-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-pri);
}

.socket-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.socket-badge {
  font-size: 10px;
  color: var(--bg-base);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: 3px;
  align-self: flex-start;
  margin-top: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* New project modal */
#modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(43,38,32,0.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

#modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 360px;
}

.modal h2 {
  font-size: 15px;
  margin-bottom: 16px;
  color: var(--text-pri);
}

.modal label {
  display: block;
  font-size: 12px;
  color: var(--text-sec);
  margin-bottom: 4px;
}

.modal input, .modal select {
  width: 100%;
  background: var(--bg-card);
  color: var(--text-pri);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 14px;
  outline: none;
}

.modal input:focus, .modal select:focus {
  border-color: var(--accent-dim);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-primary {
  background: var(--accent-dim);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
}

.btn-primary:hover { background: var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-ghost:hover { color: var(--bg-base); background: var(--accent-dim); }

/* ══════════════════════════════════════════════
   WORKSPACE GRID  (四工作区入口总览)
══════════════════════════════════════════════ */
#ws-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  overflow-y: auto;
  align-content: start;
}

.ws-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 18px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-hover);
  transform: translateY(-2px);
}
.ws-num  { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.ws-name { font-size: 15px; font-weight: 600; color: var(--text-pri); }
.ws-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.ws-ready-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ws-ready-badge.ready   { background: rgba(74,222,128,0.12); color: #4ade80; }
.ws-ready-badge.pending { background: rgba(107,114,128,0.12); color: var(--text-muted); }


/* ══════════════════════════════════════════════
   WORKSPACE PANELS  (通用面板容器)
══════════════════════════════════════════════ */
.ws-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.ws-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Tabs ── */
.ws-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  flex-shrink: 0;
}
.ws-tab {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.ws-tab:hover { color: var(--text-pri); }
.ws-tab.active { color: var(--accent); border-bottom-color: var(--accent); }


/* ══════════════════════════════════════════════
   FORM COMPONENTS  (通用表单控件)
══════════════════════════════════════════════ */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  margin-bottom: 4px;
}
.req { color: #ef4444; }

.field-input {
  width: 100%;
  background: var(--bg-card);
  color: var(--text-pri);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}
.field-input:focus { border-color: var(--accent-dim); }

/* ── v5 desktop workspace skin: aerospace tooling meets a quiet writing studio ── */
:root {
  --col-left: 248px;
  --col-right: 360px;
  --bg-base: #090e15;
  --bg-panel: #0d1520;
  --bg-card: #121e2c;
  --bg-hover: #182b3c;
  --border: #243a4f;
  --text-pri: #edf5fb;
  --text-sec: #a0b2c2;
  --text-muted: #687d91;
  --accent: #5bd5ff;
  --accent-dim: #257fa3;
  --seshat: #9b86ff;
  --seshat-dim: #715ed0;
}
html, body { background: radial-gradient(ellipse at 55% -20%, #173755 0%, var(--bg-base) 44%); }
#col-left { background: rgba(9, 17, 27, .88); border-color: var(--border); }
.col-header { padding: 20px 16px 15px; border-color: var(--border); }
.col-header .logo { color: var(--text-pri); font-size: 14px; letter-spacing: .14em; }
.col-header .logo::before { content: 'W'; display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:7px; color:#07131d; background:linear-gradient(135deg, var(--accent), #e4b96a); letter-spacing:0; }
.col-header .version, #project-switcher select, .nav-card, .field-input, .field-textarea { background: var(--bg-card); border-color: var(--border); color: var(--text-pri); }
#project-switcher { border-color: var(--border); padding: 12px 14px; }
#btn-new-project { border-color: #315572; color: var(--accent); }
#btn-new-project:hover, .btn-primary { background: linear-gradient(135deg, var(--accent), #7daaff); color:#07111a; border-color:transparent; }
.nav-card:hover { border-color: var(--accent-dim); background: var(--bg-hover); }
.nav-card.has .nav-card-num { background: var(--accent-dim); color: #eafdff; }
#col-mid { background: transparent; }
.mid-header { padding: 18px 28px; border-color: var(--border); background: rgba(8,14,21,.5); }
.mid-header h1 { font-size: 16px; letter-spacing:-.01em; }

#home-canvas { display:block; overflow:auto; padding: clamp(48px, 8vh, 104px) clamp(28px, 7vw, 96px) 60px; max-width: 1040px; width:100%; margin:0 auto; }
.home-eyebrow { color: var(--accent); font-size:11px; font-weight:700; letter-spacing:.16em; }
#home-canvas h2 { font-size: clamp(34px, 5vw, 58px); letter-spacing:-.055em; line-height:1.06; margin:14px 0; font-weight:650; }
.home-lead { max-width:620px; color:var(--text-sec); font-size:16px; line-height:1.8; }
.home-composer { margin:34px 0 42px; padding:16px; border:1px solid #32536d; border-radius:16px; background:linear-gradient(145deg, rgba(23,42,60,.9), rgba(12,20,30,.92)); box-shadow:0 22px 70px rgba(0,0,0,.32); }
.home-composer textarea { width:100%; min-height:105px; resize:vertical; border:0; outline:0; background:transparent; color:var(--text-pri); font:inherit; font-size:16px; line-height:1.65; }
.home-composer textarea::placeholder { color:#70869a; }
.home-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:12px; border-top:1px solid rgba(91,213,255,.12); color:var(--text-muted); font-size:12px; }
.home-section-head { display:flex; justify-content:space-between; color:var(--text-pri); font-weight:600; margin-bottom:12px; }
.home-section-head span:last-child { color:var(--text-muted); font-size:12px; font-weight:400; }
.home-asset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.home-asset-card { text-align:left; display:flex; gap:12px; align-items:flex-start; padding:17px 15px; border-radius:12px; border:1px solid var(--border); background:rgba(18,30,44,.8); color:var(--text-pri); cursor:pointer; transition:.18s ease; }
.home-asset-card:hover { background:var(--bg-hover); border-color:#4e8eae; transform:translateY(-2px); }
.home-asset-card span:nth-child(2) { display:grid; gap:3px; min-width:0; }.home-asset-card small { color:var(--text-muted); line-height:1.45; }.home-asset-card i { margin-left:auto; color:var(--text-muted); font-style:normal; }
.asset-mark { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:0 0 28px; background:#1b3143; }.asset-mark.cyan{color:var(--accent)}.asset-mark.violet{color:#b5a8ff}.asset-mark.amber{color:#e8ba6a}
.home-note { margin-top:28px; color:var(--text-muted); font-size:12px; }.pulse { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; box-shadow:0 0 14px var(--accent); }

/* Seshat is a first-class desktop collaborator, not a floating chatbot. */
#col-right { position:static; right:auto; bottom:auto; width:var(--col-right); max-width:none; height:100vh; display:flex; border:0; border-left:1px solid var(--border); border-radius:0; box-shadow:none; background:rgba(11,18,28,.88); }
#col-right.open { display:flex; }
#seshat-fab, #seshat-close { display:none; }
.seshat-header { padding:19px 18px 15px; border-color:var(--border); }.seshat-name{color:var(--text-pri);font-size:15px}.seshat-tagline{color:var(--text-muted)}.seshat-status{background:var(--accent);box-shadow:0 0 12px var(--accent)}
#dispatch-log { background:rgba(91,213,255,.04); border-color:var(--border); color:var(--text-sec); }.dispatch-item .dot{background:var(--accent)}
#chat-input-area { background:rgba(9,14,21,.65); border-color:var(--border); }.msg.seshat { background:#142234; border-color:#26445d; }.msg.user { background:#243a52; border-color:#315a78; }

@media(max-width:1100px){ #col-right{position:fixed;right:0;bottom:0;height:100vh;z-index:140;display:none;box-shadow:-16px 0 50px rgba(0,0,0,.35)} #col-right.open{display:flex} #seshat-fab{display:flex;background:var(--accent-dim);border-color:var(--accent);color:#07111a} .home-asset-grid{grid-template-columns:1fr} }
@media(max-width:680px){ #col-left{display:none} #home-canvas{padding:42px 20px}.home-composer-footer{align-items:flex-start;flex-direction:column}.mid-header{padding:15px 20px} }

.field-textarea {
  width: 100%;
  background: var(--bg-card);
  color: var(--text-pri);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.55;
}
.field-textarea:focus { border-color: var(--accent-dim); }
.field-textarea.tall  { flex: 1; min-height: 200px; }

.action-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.form-row { display: flex; gap: 12px; }
.form-col { flex: 1; min-width: 0; }


/* ══════════════════════════════════════════════
   BUTTONS (补充)
══════════════════════════════════════════════ */
.btn-primary:disabled,
.btn-ghost:disabled  { opacity: 0.5; cursor: not-allowed; }

.btn-danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover { background: #ef4444; color: #fff; }


/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  color: var(--text-pri);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(43,38,32,0.15);
  pointer-events: none;
}
.toast.ok    { border-color: #4ade80; color: #4ade80; }
.toast.warn  { border-color: #f59e0b; color: #f59e0b; }
.toast.error { border-color: #ef4444; color: #ef4444; }


/* ══════════════════════════════════════════════
   WORKSPACE ② — 角色工作室
══════════════════════════════════════════════ */
/* ── 角色编辑视图顶部栏 ── */
.ws2-edit-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ws2-edit-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-pri);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 角色编辑视图：字段分组 ── */
.ws2-field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.ws2-field-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ws2-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.char-list-item:hover { border-color: var(--accent-dim) !important; }

.char-list-col {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#ws2-char-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.char-form-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow-y: auto;
}

.empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
}

/* ── Split layout (通用双栏) ── */
.split-layout {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Cast selector ── */
.cast-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cast-selector label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-pri);
  transition: all 0.15s;
}
.cast-selector label:hover { border-color: var(--accent-dim); }

/* ── Theater messages ── */
.theater-msgs {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.theater-msg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.theater-msg.scene {
  background: var(--bg-hover);
  border-left: 3px solid var(--accent);
}
.theater-msg.response {
  background: var(--bg-base);
  border-left: 3px solid var(--seshat-dim);
}
.theater-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 6px;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════
   WORKSPACE ③ — 结构规划 · 节拍表格
══════════════════════════════════════════════ */
.beats-table {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.beats-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.beats-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.beats-tbl th {
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.beats-tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-pri);
  vertical-align: top;
  line-height: 1.45;
}
.beats-tbl tr:last-child td { border-bottom: none; }
.beats-tbl tr.beat-reversal td { background: rgba(249,115,22,0.08); }
.beats-tbl tr.beat-reversal td:first-child {
  border-left: 3px solid #f97316;
}


/* ══════════════════════════════════════════════
   WORKSPACE ④ — 正文与围读循环
══════════════════════════════════════════════ */
.review-panel {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
}

.review-issue {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.1s;
}
.review-issue:last-child { border-bottom: none; }
.review-issue:hover { background: var(--bg-hover); }

.issue-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.issue-desc {
  font-size: 13px;
  color: var(--text-pri);
  line-height: 1.5;
}
.issue-suggest {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
}
.issue-target {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  background: var(--bg-hover);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════
   MILESTONE-2 — 围读可见过程
══════════════════════════════════════════════ */

/* 流式阶段 */
.review-process {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.review-process-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--seshat);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.review-stream-text {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-y: auto;
  flex: 1;
}

/* 完成后：批注区（可折叠） */
.review-narrative {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.review-narrative-summary {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--seshat);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  list-style: none;
  user-select: none;
}
.review-narrative-summary::-webkit-details-marker { display: none; }
.review-narrative-text {
  padding: 4px 14px 12px;
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.65;
  white-space: pre-wrap;
  font-family: var(--font);
  max-height: 200px;
  overflow-y: auto;
}

/* 问题清单区 */
.review-issues-section {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.review-issues-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ── 正文工作区工具栏 ── */
.ws4-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ws4-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}
.ws4-step-btn {
  padding: 6px 14px;
  font-size: 13px;
}
.ws4-step-arrow {
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

/* ── 终稿抽屉 ── */
.ws4-final-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: var(--bg-base);
  border-left: 2px solid var(--accent-dim);
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  z-index: 10;
  box-shadow: -6px 0 20px rgba(43,38,32,0.12);
}
.ws4-final-drawer.open {
  display: flex;
}
.ws4-final-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Canvas refinement: the center behaves like a calm document surface, not a dashboard. */
#col-left { width: 232px; min-width:232px; }
#asset-tree { padding: 14px 10px; }
.tree-section { margin: 0; }
.nav-card { border:0; border-radius:7px; background:transparent; padding:9px 9px; }
.nav-card:hover { background:rgba(91,213,255,.08); border:0; transform:none; }
.nav-card-num { width:23px; height:23px; background:#183044; color:var(--accent); border-radius:6px; }
.nav-card.has .nav-card-num { background:#1a4964; color:var(--accent); }
.nav-card-title { font-size:12px; font-weight:550; }.nav-card-sub { font-size:10px; }
.mid-header { height:66px; padding:0 28px; }.mid-header h1 { font-size:15px; }.mid-header .subtitle { display:none; }
.mid-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
#creation-format { appearance:none; padding:7px 29px 7px 12px; border:1px solid transparent; border-radius:8px; color:var(--text-sec); background:transparent; font:inherit; cursor:pointer; outline:none; }
#creation-format:hover,#creation-format:focus { background:rgba(91,213,255,.08); color:var(--text-pri); border-color:#29475f; }
#home-canvas { flex:1; max-width:none; margin:0; padding:0; display:flex; flex-direction:column; overflow:hidden; }
#home-canvas > .home-eyebrow, #home-canvas > h2, #home-canvas > .home-lead { display:none; }
.home-composer { order:2; width:min(720px, calc(100% - 80px)); margin:auto auto 52px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.home-composer textarea { min-height:110px; padding:0; font-size:24px; line-height:1.5; letter-spacing:-.02em; }
.home-composer-footer { padding-top:13px; border-color:var(--border); }
.home-composer-footer .btn-primary { border-radius:10px; padding:9px 15px; }
.canvas-stage { order:1; flex:1; width:min(780px, calc(100% - 80px)); margin:0 auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; transform:translateY(10px); }
.canvas-stage-label { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.canvas-stage-title { margin-top:13px; max-width:660px; color:var(--text-pri); font-size:clamp(42px,6vw,76px); line-height:1.03; letter-spacing:-.065em; font-weight:620; }
.canvas-stage-hint { margin-top:18px; color:var(--text-muted); font-size:14px; max-width:420px; line-height:1.75; }
.canvas-stage-actions { display:flex; gap:8px; margin-top:25px; }
.canvas-link { padding:7px 11px; border:0; border-radius:7px; color:var(--text-sec); background:rgba(27,48,68,.55); font:inherit; font-size:12px; cursor:pointer; }.canvas-link:hover { color:var(--text-pri); background:#1b354c; }
.home-section-head,.home-asset-grid { display:none; }.home-note { order:3; width:min(720px, calc(100% - 80px)); margin:0 auto 22px; color:#61778b; }
#ws-grid { display:none !important; }
@media(max-width:1100px){ .mid-header{padding:0 20px}.canvas-stage,.home-composer,.home-note{width:calc(100% - 48px)} }
@media(max-width:680px){ #col-left{display:none}.canvas-stage,.home-composer,.home-note{width:calc(100% - 40px)}.canvas-stage-title{font-size:44px}.home-composer textarea{font-size:20px} }

/* Collapsible AI-project rail. */
#col-left { transition: width .18s ease, min-width .18s ease; }
#btn-toggle-left { margin-left:auto; width:28px; height:28px; border:0; border-radius:7px; background:transparent; color:var(--text-muted); font-size:22px; line-height:1; cursor:pointer; }
#btn-toggle-left:hover { color:var(--text-pri); background:rgba(91,213,255,.08); }
#workbench.left-collapsed #col-left { width:62px; min-width:62px; }
#workbench.left-collapsed .col-header { justify-content:center; padding:20px 8px 15px; }
#workbench.left-collapsed .col-header .logo { width:25px; overflow:hidden; font-size:0; }
#workbench.left-collapsed .col-header .logo::before { margin:0; }
#workbench.left-collapsed .col-header .version,
#workbench.left-collapsed #project-switcher,
#workbench.left-collapsed .nav-card-body { display:none; }
#workbench.left-collapsed #btn-toggle-left { position:absolute; left:45px; top:48px; z-index:4; background:#132334; border:1px solid var(--border); }
#workbench.left-collapsed #asset-tree { padding:14px 9px; }
#workbench.left-collapsed .nav-card { justify-content:center; padding:9px 0; }
#workbench.left-collapsed .nav-card-num { width:30px; height:30px; }

/* Silver studio theme: bright, technical and calm. */
:root {
  --bg-base:#f3f6f9; --bg-panel:#f8fafc; --bg-card:#ffffff; --bg-hover:#edf3f8;
  --border:#d7e0e8; --text-pri:#182431; --text-sec:#536578; --text-muted:#8a99a8;
  --accent:#1769e8; --accent-dim:#7396ef; --seshat:#7057d9;
}
html,body { background:#f3f6f9; color:var(--text-pri); }
body { background-image:radial-gradient(circle at 48% -15%,rgba(73,151,255,.13),transparent 34%),linear-gradient(135deg,#f8fafc 0%,#eef3f7 100%); }
#workbench { background:transparent; }
#col-left,#col-right,.mid-header,#dispatch-log,#chat-input-area { background:rgba(248,250,252,.94); border-color:var(--border); }
#col-mid { background:rgba(255,255,255,.72); }
.col-header,.mid-header { box-shadow:0 1px 0 rgba(25,48,72,.04); }
.logo,.mid-header h1,.canvas-stage-title { color:#142131; }
.version { color:#315f9e; background:#e8f0fb; border-color:#cadcf3; }
#project-select,#creation-format,.field input,.field textarea,.field select,.modal-card,
#chat-input,.ws-panel,.asset-editor,.home-composer textarea { color:var(--text-pri); background:#fff; border-color:var(--border); }
#project-select:hover,#creation-format:hover,#creation-format:focus { background:#edf4fb; border-color:#b8cee4; }
.nav-card:hover,.nav-card.active { background:#e9f2fb; }
.nav-card-num { background:#e5eef7; color:#1769e8; }
.nav-card.has .nav-card-num { background:#d9ebf8; color:#0879b8; }
.canvas-link { color:#426078; background:#e9f0f6; }
.canvas-link:hover { color:#164d82; background:#dce9f4; }
.home-composer { filter:none; }
.home-composer textarea::placeholder,#chat-input::placeholder { color:#9aa7b4; }
.home-note { color:#74879a; }
.btn-primary { background:linear-gradient(135deg,#2b8cff,#496de8); color:#fff; box-shadow:0 7px 22px rgba(37,112,226,.18); }
.btn-primary:hover { filter:brightness(1.04); }
.msg.seshat { color:#26364a; background:#edf1fb; border:1px solid #dbe2f4; }
.msg.user { color:#163452; background:#e3f1fc; border:1px solid #cae2f5; }
#btn-toggle-left:hover { background:#e5eef7; }
#workbench.left-collapsed #btn-toggle-left { background:#fff; border-color:var(--border); box-shadow:0 3px 12px rgba(29,54,81,.08); }
.modal-overlay { background:rgba(55,72,90,.28); backdrop-filter:blur(8px); }
.modal-card { box-shadow:0 24px 70px rgba(31,55,80,.18); }
.ws4-final-drawer { background:#f8fafc; box-shadow:-8px 0 28px rgba(31,55,80,.10); }
* { scrollbar-color:#b8c6d3 transparent; }

/* V4.2 desktop information architecture: tools left, work center, agent right. */
:root { --col-left:292px; --col-right:400px; }
#col-left { width:var(--col-left); min-width:var(--col-left); position:relative; }
.col-header { height:68px; padding:0 16px; }
.rail-section-label { padding:14px 16px 7px; color:#94a1ae; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.rail-assets-label { padding-top:16px; }
#project-switcher { padding:0 12px 14px; }
#asset-tree { flex:0 1 auto; padding:0 10px 10px; overflow-y:auto; }
.tree-section { margin:2px 0; }
.nav-card { min-height:46px; padding:7px 9px; }
.nav-card-title { font-size:13px; }
.nav-card-sub { font-size:10px; }
#agent-tools { margin-top:auto; padding:0 10px 14px; border-top:1px solid var(--border); }
#agent-tools .rail-section-label { padding-left:6px; }
.rail-tool { width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:8px; color:var(--text-sec); background:transparent; cursor:pointer; text-align:left; }
.rail-tool:hover { color:var(--text-pri); background:#e9f2fb; }
.rail-tool b { font-size:12px; font-weight:550; }
#home-canvas { display:flex; align-items:center; justify-content:center; padding:48px; }
#home-canvas .home-composer,#home-canvas .home-note { display:none; }
.canvas-stage { width:min(680px,100%); flex:none; min-height:300px; margin:0; padding:44px 48px; transform:none; justify-content:center; border:1px solid #dce4eb; border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 16px 44px rgba(32,57,82,.06); }
.canvas-stage-title { max-width:100%; margin-top:10px; font-size:clamp(30px,3.2vw,44px); line-height:1.12; letter-spacing:-.035em; }
.canvas-stage-hint { margin-top:14px; max-width:520px; font-size:13px; line-height:1.7; }
.canvas-stage-actions { margin-top:20px; }
.ws-panel { width:min(980px,calc(100% - 48px)); margin:24px auto; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(32,57,82,.05); }
.ws-panel-body { padding:22px; }
.seshat-actions { display:flex; gap:6px; padding:9px 12px; border-bottom:1px solid var(--border); background:#f7f9fc; }
.seshat-actions button { flex:1; padding:6px 4px; border:1px solid #d8e2ed; border-radius:7px; color:#4f6478; background:#fff; font:inherit; font-size:11px; cursor:pointer; }
.seshat-actions button:hover { color:#1769e8; border-color:#abc9eb; background:#f2f7fd; }
.agent-run-card { display:flex; flex-direction:column; gap:7px; }
.agent-run-head { padding-bottom:7px; border-bottom:1px solid #dce4ef; font-weight:650; }
.agent-event { display:grid; grid-template-columns:98px 1fr; gap:8px; font-size:11px; }
.agent-event b { color:#1769e8; font-weight:600; }
.agent-event span { color:#586b7f; }
#workbench.left-collapsed #agent-tools .rail-section-label,
#workbench.left-collapsed #agent-tools .rail-tool b,
#workbench.left-collapsed .rail-section-label { display:none; }
#workbench.left-collapsed #agent-tools { padding:10px 7px 14px; }
#workbench.left-collapsed .rail-tool { justify-content:center; padding:9px 0; }
@media(max-width:1280px){ :root{--col-left:260px;--col-right:360px}.canvas-stage{padding:36px}.ws-panel{width:calc(100% - 32px);margin:16px auto} }

/* V4.3 focus canvas: the center is content, Seshat owns workflow decisions. */
.focus-document-heading { width:min(820px, calc(100% - 64px)); margin:46px auto 26px; }
.focus-document-heading h2 { margin:7px 0 10px; color:#15253a; font-size:34px; letter-spacing:-.045em; font-weight:620; }
.focus-document-heading p { max-width:620px; color:#7e8d9b; font-size:13px; line-height:1.75; }
.focus-kicker { color:#1769e8; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
#ws-panel-1,#ws-panel-4 { width:100%; margin:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
#ws-panel-1 .ws-panel-body { width:min(820px, calc(100% - 64px)); margin:0 auto; padding:0 0 52px; overflow:visible; }
#ws-panel-1 .focus-document-heading { width:100%; margin:46px 0 26px; }
#ws-panel-1 .form-row,#ws-panel-1 .action-bar,#ws-panel-1 > .field-label,#ws-panel-1 .ws-panel-body > .field-label { display:none; }
#ws1-output { min-height:calc(100vh - 300px); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#2a3747; font-family:Georgia,'Noto Serif SC','Songti SC',serif; font-size:16px; line-height:2; resize:none; }
#ws1-output:focus { border:0; outline:0; box-shadow:none; }
#ws-panel-4 { overflow:auto; }
#ws-panel-4 .ws4-toolbar { display:none; }
#ws-panel-4 .focus-draft-heading { flex-shrink:0; }
#ws-panel-4 .split-layout { display:block !important; width:min(820px, calc(100% - 64px)); margin:0 auto; padding:0 0 52px !important; overflow:visible; }
#ws-panel-4 .split-layout > div:first-child { display:flex !important; min-height:calc(100vh - 300px); }
#ws-panel-4 .split-layout > div:first-child > div:first-child { display:none !important; }
#ws-panel-4 .split-layout > div:nth-child(2) { display:none !important; }
#ws4-draft-text { min-height:calc(100vh - 320px) !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#2a3747; font-family:Georgia,'Noto Serif SC','Songti SC',serif !important; font-size:16px !important; line-height:2 !important; resize:none; }
#ws4-draft-text:focus { outline:0; box-shadow:none; }
#ws-panel-4.show-review .split-layout > div:first-child { display:none !important; }
#ws-panel-4.show-review .split-layout > div:nth-child(2) { display:flex !important; min-height:calc(100vh - 320px); }
#ws-panel-4.show-review .review-panel { display:block; flex:1; border:0; border-radius:0; background:transparent; }
.agent-decision { padding:12px; }
.agent-decision-actions { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.agent-decision-btn { width:100%; padding:8px 10px; border:1px solid #cbdcf0; border-radius:8px; color:#245dba; background:#fff; font:inherit; font-size:12px; cursor:pointer; text-align:left; }
.agent-decision-btn:hover { border-color:#72a7ee; background:#f2f7ff; }
@media(max-width:900px){ .focus-document-heading,#ws-panel-1 .ws-panel-body,#ws-panel-4 .split-layout{width:calc(100% - 40px)} }

/* ── V4.3 浮起卡片布局（2026-07-12 用户反馈：分栏线条生硬，改为悬浮卡片 + 阴影） ── */
@media (min-width: 1101px) {
  #workbench { gap: 16px; padding: 16px; }
  #col-left {
    border: 0;
    border-radius: 18px;
    background: rgba(252, 253, 255, .96);
    box-shadow: 0 10px 32px rgba(24, 48, 80, .09), 0 2px 6px rgba(24, 48, 80, .05);
  }
  #col-mid {
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 32px rgba(24, 48, 80, .07), 0 2px 6px rgba(24, 48, 80, .04);
  }
  #col-right {
    border: 0;
    border-left: 0;
    border-radius: 18px;
    height: auto;
    background: rgba(252, 253, 255, .96);
    box-shadow: 0 10px 32px rgba(24, 48, 80, .09), 0 2px 6px rgba(24, 48, 80, .05);
  }
  /* 顶栏融入卡片：去掉整条分隔线，收窄高度 */
  .mid-header { height: 54px; padding: 0 24px; border-bottom: 0; box-shadow: none; background: transparent; }
  .col-header { border-bottom: 0; box-shadow: none; }
  /* 左栏内部分区线软化 */
  #project-switcher { border-bottom: 0; }
}