:root {
  --canvas: #eef1ef;
  --surface: #ffffff;
  --surface-muted: #f6f8f6;
  --surface-strong: #e8ece9;
  --sidebar: #1d2421;
  --sidebar-raised: #27302c;
  --sidebar-line: #35403b;
  --ink: #1e2522;
  --muted: #68736e;
  --muted-2: #8b9590;
  --line: #d9dfdb;
  --line-strong: #bec8c1;
  --accent: #0f7660;
  --accent-strong: #0a5d4b;
  --accent-soft: #e2f1ec;
  --blue: #426bb2;
  --blue-soft: #e9eff9;
  --ok: #21845b;
  --ok-soft: #e5f2eb;
  --warn: #b87416;
  --warn-soft: #fbf1df;
  --err: #bf4b45;
  --err-soft: #f9e9e7;
  --violet: #7657a6;
  --violet-soft: #f0ebf7;
  --code: #161b19;
  --code-fg: #dce5e0;
  --shadow: 0 14px 36px rgba(26, 35, 31, .12);
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--canvas);
  font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

button:hover {
  border-color: var(--accent);
  background: var(--surface-muted);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: default;
  opacity: .48;
  transform: none;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface);
  padding: 9px 11px;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2);
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(15, 118, 96, .12);
  border-color: var(--accent);
}

textarea {
  resize: vertical;
}

.hidden {
  display: none !important;
}

.dim {
  color: var(--muted);
}

.spacer {
  flex: 1;
}

.link {
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
}

.link:hover {
  text-decoration: underline;
}

.btn.primary {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

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

.btn.block {
  width: 100%;
}

.btn.small {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12.5px;
}

.btn.quiet {
  border-color: transparent;
  background: transparent;
}

.btn.danger {
  border-color: #e6b5b1;
  color: var(--err);
  background: var(--err-soft);
}

.btn.command {
  justify-content: flex-start;
  min-height: 40px;
  border-color: #4a5751;
  color: #f7fbf9;
  background: var(--sidebar-raised);
  font-weight: 650;
}

.btn.command:hover {
  border-color: #68766f;
  background: #303b36;
}

.btn.inverse {
  border-color: var(--sidebar-line);
  color: #d8e0dc;
  background: transparent;
}

.btn.inverse:hover {
  border-color: #6b7872;
  color: #fff;
  background: var(--sidebar-raised);
}

.icon-btn {
  display: inline-flex;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-weight: 700;
}

.only-mobile {
  display: none;
}

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
}

.brand-lockup-inverse {
  color: #fff;
}

.brand-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  font-size: 14px;
  font-weight: 800;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #b7c0ba;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Loading */
#boot-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  background: var(--canvas);
  font-size: 12px;
}

#boot-splash .brand-mark {
  animation: bootPulse 1.2s ease-in-out infinite;
}

#boot-splash.boot-failed .brand-mark {
  background: var(--err);
  animation: none;
}

@keyframes bootPulse {
  50% { opacity: .48; }
}

/* Auth and onboarding */
.view {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--canvas);
}

#auth-view {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-shell {
  display: grid;
  width: min(860px, 96vw);
  min-height: 520px;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px;
  color: #fff;
  background: var(--sidebar);
}

.auth-wordmark {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-wordmark > span,
.auth-release {
  color: #9eaaa4;
  font-size: 10px;
  font-weight: 750;
}

.auth-wordmark strong {
  font-size: 48px;
  font-weight: 650;
  line-height: 1.02;
}

.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
}

.auth-heading {
  margin-bottom: 30px;
}

.auth-heading h1,
.onboard-heading h1 {
  margin: 8px 0 6px;
  font-size: 28px;
  line-height: 1.2;
}

.auth-heading p,
.onboard-heading p {
  margin: 0;
  color: var(--muted);
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.auth-submit {
  min-height: 42px;
}

.auth-card .link {
  margin-top: 16px;
  text-align: center;
}

.form-err {
  min-height: 22px;
  margin: 0 0 7px;
  color: var(--err);
  font-size: 12.5px;
  white-space: pre-wrap;
}

#onboard-view {
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
}

.onboard-shell {
  width: min(900px, 96vw);
}

.onboard-heading {
  margin: 64px 0 30px;
}

.onboard-name {
  width: min(440px, 100%);
}

.onboard-entries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.onboard-entries button {
  display: grid;
  min-height: 136px;
  grid-template-rows: 36px auto auto;
  align-content: start;
  gap: 6px;
  padding: 18px;
  text-align: left;
  background: var(--surface);
}

.onboard-entries button b {
  color: var(--accent);
  font-size: 24px;
  font-weight: 500;
}

.onboard-entries button strong {
  font-size: 14px;
}

.onboard-entries button span {
  color: var(--muted);
  font-size: 12px;
}

.onboard-shell > .link {
  display: inline-block;
  margin-top: 18px;
}

/* App shell */
#app {
  display: flex;
  width: 100%;
  height: 100dvh;
  flex-direction: column;
  background: var(--canvas);
}

#topbar {
  display: flex;
  min-height: 60px;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.topbar-brand {
  width: 215px;
  flex: none;
}

.topbar-context {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.topbar-breadcrumbs,
.topbar-runmeta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.topbar-breadcrumbs {
  line-height: 1.15;
}

.topbar-runmeta {
  min-height: 17px;
  font-size: 11.5px;
}

.tb-item {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-sep {
  color: var(--line-strong);
}

#tb-run-title {
  color: var(--ink);
  font-weight: 650;
}

#tb-elapsed {
  font-variant-numeric: tabular-nums;
}

.tb-thinking {
  color: var(--blue);
  animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {
  50% { opacity: .4; }
}

.user-cluster {
  display: flex;
  max-width: 220px;
  align-items: center;
  gap: 7px;
}

.user-presence {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
}

#user-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.badge-status {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.st-QUEUED,
.st-STARTING {
  border-color: #e8c894;
  color: var(--warn);
  background: var(--warn-soft);
}

.st-RUNNING {
  border-color: #afc3e2;
  color: var(--blue);
  background: var(--blue-soft);
}

.st-COMPLETED {
  border-color: #acd4bf;
  color: var(--ok);
  background: var(--ok-soft);
}

.st-FAILED,
.st-CANCELLED {
  border-color: #e8bbb7;
  color: var(--err);
  background: var(--err-soft);
}

.st-WAITING_APPROVAL,
.st-WAITING_INPUT {
  border-color: #cbbdde;
  color: var(--violet);
  background: var(--violet-soft);
}

#layout {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 248px minmax(440px, .92fr) minmax(440px, 1.08fr);
}

.panel-head {
  display: flex;
  height: 62px;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.panel-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-head strong {
  font-size: 14px;
}

.panel-index,
.drawer-index {
  color: var(--muted-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Sidebar */
#sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 12px 12px;
  color: #dce4e0;
  background: var(--sidebar);
}

.side-section {
  min-width: 0;
}

.side-runs {
  flex: 1;
}

.side-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 11px 6px 5px;
}

.side-section-head > span {
  color: #66736d;
  font-size: 9px;
  font-weight: 750;
}

.side-h {
  margin: 0;
  color: #8f9c96;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.side-empty {
  padding: 8px;
  color: #79857f;
  font-size: 12px;
}

.run-item,
.ws-item,
.sess-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  color: #aeb9b4;
  cursor: pointer;
}

.run-item {
  padding: 8px;
}

.run-item:hover,
.run-item.active,
.ws-item:hover,
.ws-item.active,
.sess-item:hover,
.sess-item.active {
  color: #fff;
  background: var(--sidebar-raised);
}

.run-item.active {
  box-shadow: inset 2px 0 0 var(--accent);
}

.run-item .r-ico {
  width: 15px;
  flex: none;
  text-align: center;
  font-size: 11px;
}

.run-item .r-main {
  display: grid;
  min-width: 0;
  flex: 1;
}

.run-item .r-title,
.run-item .r-time,
.ws-item .grow,
.sess-item .grow {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-item .r-title {
  color: inherit;
  font-size: 12.5px;
}

.run-item .r-time {
  margin-top: 1px;
  color: #74817b;
  font-size: 10.5px;
}

.ico-QUEUED,
.ico-STARTING {
  color: #e0a94f;
}

.ico-RUNNING {
  color: #70a1e8;
  animation: textPulse 1.5s ease-in-out infinite;
}

.ico-COMPLETED {
  color: #62bd91;
}

.ico-FAILED {
  color: #e07972;
}

.ico-CANCELLED {
  color: #86918c;
}

.ico-WAITING_APPROVAL,
.ico-WAITING_INPUT {
  color: #b39ad4;
}

#sess-details {
  padding: 8px;
  border: 1px solid var(--sidebar-line);
  border-radius: 6px;
}

#sess-details summary {
  color: #9ca8a2;
  cursor: pointer;
  font-size: 12px;
}

.sess-item,
.ws-item {
  padding: 6px 7px;
  font-size: 12px;
}

.sess-item .grow,
.ws-item .grow {
  flex: 1;
}

.sess-item .tag-arch {
  color: #d7a352;
  font-size: 10px;
}

.ws-item .mini {
  visibility: hidden;
  min-height: 24px;
  padding: 0 4px;
  border: 0;
  color: #96a29c;
  background: transparent;
  font-size: 11px;
}

.ws-item:hover .mini {
  visibility: visible;
}

.row-gap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

#sidebar .link {
  color: #8fc7b6;
  font-size: 11.5px;
}

.side-workspaces {
  padding-top: 3px;
  border-top: 1px solid var(--sidebar-line);
}

.usage {
  margin-top: auto;
  padding: 10px 5px 2px;
}

.usage-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 4px;
  background: #313b36;
}

#usage-fill {
  width: 0;
  height: 100%;
  background: #55b08a;
}

#usage-fill.hot {
  background: #d96760;
}

#usage-text {
  margin-top: 6px;
  color: #77837d;
  font-size: 10.5px;
}

/* Agent thread */
#center {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface-muted);
}

#sticky-slot:empty {
  display: none;
}

#sticky-slot {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
}

#sticky-slot .card {
  margin: 0 0 8px;
  box-shadow: 0 7px 18px rgba(33, 43, 38, .08);
}

#sticky-slot .card:last-child {
  margin-bottom: 0;
}

#timeline {
  flex: 1;
  overflow: auto;
  padding: 22px clamp(18px, 3vw, 34px) 28px;
}

.tl-hero {
  max-width: 620px;
  margin: 20px auto 0;
  color: var(--muted);
}

.tl-hero::before {
  content: "Q";
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid #a9cbbf;
  border-radius: 6px;
  color: var(--accent);
  background: var(--surface);
  font-weight: 800;
}

.tl-hero h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 20px;
}

.tl-hero p {
  margin: 0 0 18px;
  font-size: 13px;
}

.tl-hero .hero-runs {
  display: flex;
  max-width: 420px;
  flex-direction: column;
  gap: 5px;
}

.tl-hero .hero-runs .run-item {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
}

.msg {
  max-width: 92%;
  margin: 9px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg.user {
  margin-left: auto;
  border-color: #b8d8cd;
  background: var(--accent-soft);
}

.msg.assistant {
  max-width: 100%;
}

.msg.assistant.streaming::after {
  content: "▍";
  color: var(--accent);
  animation: caretBlink 1s infinite;
}

@keyframes caretBlink {
  50% { opacity: 0; }
}

.sys {
  margin: 9px 0;
  color: var(--muted-2);
  font-size: 11.5px;
  text-align: center;
}

.card {
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.card-title,
.live-section {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.card .body {
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

.card.muted {
  opacity: .58;
}

.card.plan {
  border-left: 3px solid var(--blue);
}

.card.plan .card-title {
  color: var(--blue);
}

.step-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid #edf0ee;
  font-size: 12.5px;
}

.step-list li:last-child {
  border-bottom: 0;
}

.step-ico {
  width: 18px;
  text-align: center;
}

.step-ico.run { color: var(--blue); }
.step-ico.ok { color: var(--ok); }
.step-ico.fail { color: var(--err); }
.step-list .step-tool { color: var(--muted); font: 11px ui-monospace, Consolas, monospace; }

.card.tool {
  border-color: #313a36;
  color: var(--code-fg);
  background: var(--code);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
}

.tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-kind {
  flex: none;
  padding: 2px 4px;
  border: 1px solid #46534d;
  border-radius: 3px;
  color: #92a098;
  font-size: 9px;
  line-height: 1;
}

.tool-name { color: #7cd1b0; }
.tool-args { min-width: 0; flex: 1; overflow: hidden; color: #8f9b95; text-overflow: ellipsis; white-space: nowrap; }
.tool-st { flex: none; color: #b9c4bf; }
.tool-st.ok { color: #70c99c; }
.tool-st.fail { color: #ec847d; }

.tool-toggle {
  min-height: 25px;
  padding: 2px 7px;
  border-color: #46514c;
  color: #c8d2cd;
  background: #242b28;
  font-size: 10.5px;
}

.tool-out,
.live-out {
  max-height: 320px;
  overflow: auto;
  margin: 9px 0 0;
  padding: 9px;
  border: 1px solid #333d38;
  border-radius: 5px;
  color: #adb8b2;
  background: #111513;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-all;
}

.card.approval {
  border-color: #e5c081;
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
}

.card.approval .card-title { color: var(--warn); }

.card.input-req {
  border-color: #c8b7df;
  border-left: 3px solid var(--violet);
  background: var(--violet-soft);
}

.card.input-req .card-title { color: var(--violet); }

.card .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.card input.answer {
  min-width: 150px;
  flex: 1;
}

.resolved-tag { color: var(--ok); font-size: 12px; }
.expired-tag { color: var(--muted); font-size: 12px; }

.chg-row,
.art-row {
  margin: 6px 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font-size: 12px;
}

.artifact-glyph {
  color: var(--violet);
  font-size: 9px;
}

.art-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chg-row .badge,
.chg .badge {
  display: inline-block;
  min-width: 18px;
  margin-right: 7px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  text-align: center;
}

.badge.created { color: var(--ok); background: var(--ok-soft); }
.badge.modified { color: var(--warn); background: var(--warn-soft); }
.badge.deleted { color: var(--err); background: var(--err-soft); }

.chg-row .path,
.chg .path {
  font-family: ui-monospace, Consolas, monospace;
}

.chg-row .df,
.chg .df {
  margin-left: 8px;
  color: var(--blue);
  cursor: pointer;
  font-size: 11px;
}

pre.diff {
  max-height: 280px;
  overflow: auto;
  margin: 7px 0 0;
  padding: 9px;
  border-radius: 5px;
  color: var(--code-fg);
  background: var(--code);
  font-size: 11.5px;
}

.diff-add { color: #7fd0a4; }
.diff-del { color: #ed8b84; }
.diff-meta { color: #9ba7a1; }

.art-row a,
.pane .art a {
  color: var(--blue);
  text-decoration: none;
}

.art-row a:hover,
.pane .art a:hover {
  text-decoration: underline;
}

.card.summary {
  border-left: 3px solid var(--ok);
}

.card.summary .card-title { color: var(--ok); }
.summary-grid { font-size: 13px; }
.summary-grid .k { margin-top: 7px; color: var(--muted); }
.summary-grid ul { margin: 3px 0; padding-left: 18px; }
.summary-grid .final { white-space: pre-wrap; word-break: break-word; }

.card.error-info {
  border-color: #e8bbb7;
  border-left: 3px solid var(--err);
  background: var(--err-soft);
}

.card.error-info .card-title { color: var(--err); }

#fb-box {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#fb-chips,
.final-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#fb-chips { margin: 7px 0; }

.fb-chip,
.tpl-chip {
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11.5px;
}

.fb-chip.active,
.tpl-chip.active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

#fb-box input {
  margin-bottom: 7px;
}

.final-actions {
  margin-top: 12px;
}

.live-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
}

.live-section {
  margin: 15px 0 7px;
}

/* Composer */
#composer {
  flex: none;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -9px 26px rgba(31, 41, 36, .05);
}

.composer-kicker {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 750;
}

#tpl-chips {
  display: flex;
  max-height: 64px;
  gap: 5px;
  flex-wrap: wrap;
  overflow-y: auto;
  margin-bottom: 8px;
}

.tpl-chip {
  flex: none;
  border-color: #dfe4e1;
  background: var(--surface-muted);
}

.tpl-chip .wh {
  margin-left: 4px;
  color: var(--warn);
  font-size: 9px;
}

#task-title {
  margin-bottom: 6px;
  background: var(--surface-muted);
}

#main-input {
  min-height: 72px;
}

#composer details {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #edf0ee;
}

#composer details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
}

.adv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
  margin-top: 9px;
}

.adv-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
}

.adv-grid label.chk {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.adv-grid label.chk input {
  width: auto;
}

.composer-foot {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#composer-hint {
  min-width: 0;
  flex: 1;
  font-size: 11.5px;
}

#composer-hint.warn { color: var(--warn); }

.submit-task {
  min-width: 104px;
  min-height: 38px;
}

/* Inspector */
#rightbar {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--surface);
}

#rightbar .tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

#rightbar .tab {
  min-width: 0;
  padding: 11px 6px 10px;
  overflow: hidden;
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rightbar .tab:hover {
  color: var(--ink);
  background: var(--surface-muted);
}

#rightbar .tab.active {
  box-shadow: inset 0 -2px 0 var(--accent);
  color: var(--ink);
  background: var(--surface-muted);
  font-weight: 650;
}

#rightbar .pane {
  display: none;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 18px;
  background: var(--surface);
}

#rightbar .pane.active {
  display: block;
}

.pane-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pane-tools button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11.5px;
}

.tool-command::before {
  display: inline-block;
  width: 15px;
  margin-right: 3px;
  color: var(--accent);
  text-align: center;
}

.tool-command.upload::before { content: "↑"; }
.tool-command.archive::before { content: "+"; }
.tool-command.export::before { content: "↓"; }
.tool-command.refresh::before { content: "↻"; }

.fitem {
  padding: 5px 7px;
  overflow: hidden;
  border-radius: 4px;
  color: var(--muted);
  font: 12px ui-monospace, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fitem.file {
  cursor: pointer;
}

.fitem.file:hover {
  color: var(--ink);
  background: var(--surface-strong);
}

.fitem.dir {
  color: var(--blue);
}

.tree-glyph {
  display: inline-block;
  width: 12px;
  color: currentColor;
  text-align: center;
}

.pane .chg,
.pane .art {
  padding: 7px 5px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.pane .art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pane-empty {
  margin-top: 34px;
  color: var(--muted-2);
  font-size: 12px;
  text-align: center;
}

/* Diagnostics drawer */
#drawer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

#drawer-bar {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  cursor: pointer;
  user-select: none;
}

#drawer-bar:hover {
  background: var(--surface-muted);
}

#drawer-toggle {
  font-size: 11.5px;
  font-weight: 700;
}

#drawer-sub {
  font-size: 9.5px;
  font-weight: 700;
}

#drawer.collapsed #drawer-body {
  display: none;
}

#drawer-body {
  display: grid;
  height: 300px;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.drawer-col {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--surface);
}

.drawer-col h3 {
  margin: 0;
  padding: 9px 10px 5px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.drawer-scroll {
  flex: 1;
  overflow: auto;
  padding: 0 10px 10px;
  font-size: 11.5px;
}

.ev-row {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  color: var(--muted);
  font: 10.5px ui-monospace, Consolas, monospace;
}

.ev-row .ev-seq {
  min-width: 28px;
  color: var(--ink);
  text-align: right;
}

.ev-row .ev-type {
  flex: none;
  color: var(--blue);
}

.ev-row .ev-sum {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.mini,
table.admin {
  width: 100%;
  border-collapse: collapse;
}

table.mini {
  font-size: 10.5px;
}

table.mini th,
table.mini td,
table.admin th,
table.admin td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

table.mini th,
table.admin th {
  color: var(--muted);
  font-weight: 600;
}

table.mini td,
table.admin td {
  word-break: break-word;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
}

.kv .k { color: var(--muted); }
.kv .v { text-align: right; word-break: break-all; }

/* Global overlays */
#conn-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding: 5px 10px;
  border-bottom: 1px solid #dfb56d;
  color: #7d4c07;
  background: var(--warn-soft);
  font-size: 12px;
  text-align: center;
}

#ctx-menu {
  position: fixed;
  z-index: 90;
  min-width: 132px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

#ctx-menu button {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
}

#ctx-menu button.danger { color: var(--err); }

#modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(20, 27, 24, .48);
}

#modal-card {
  display: flex;
  width: min(880px, 94vw);
  max-height: 86vh;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

#modal-bar {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}

#modal-title {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal-body {
  overflow: auto;
  padding: 18px;
}

#modal-body pre {
  margin: 0;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

#modal-body h3 {
  margin: 14px 0 4px;
  font-size: 14px;
}

#modal-body p,
#modal-body li {
  color: var(--muted);
  font-size: 13px;
}

#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 110;
  max-width: min(560px, 88vw);
  padding: 9px 16px;
  transform: translateX(-50%);
  border: 1px solid #a8cfc1;
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 12.5px;
}

#toast.err {
  border-color: #e1aaa6;
  color: var(--err);
}

/* Admin */
#admin-view header {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

#admin-view header h1 {
  margin: 0;
  font-size: 15px;
}

.admin-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}

.admin-tabs {
  display: flex;
  gap: 3px;
  padding: 8px 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.admin-tabs button {
  flex: none;
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  font-size: 12px;
}

.admin-tabs button.active {
  color: #fff;
  background: var(--accent);
}

#admin-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}

.stat-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.stat-card .num {
  font-size: 21px;
  font-weight: 750;
}

.stat-card .lbl {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

table.admin {
  background: var(--surface);
  font-size: 12px;
}

table.admin button {
  min-height: 27px;
  margin: 0 4px 4px 0;
  padding: 2px 7px;
  font-size: 11px;
}

.admin-section-title {
  margin: 16px 0 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.status-danger { color: var(--err); }

/* Markdown */
.msg.assistant h2,
.msg.assistant h3,
.msg.assistant h4,
.md h2,
.md h3 {
  margin: 11px 0 6px;
  font-size: 14.5px;
}

.msg.assistant p,
.md p {
  margin: 5px 0;
}

.msg.assistant ul,
.msg.assistant ol,
.md ul,
.md ol {
  margin: 5px 0 5px 18px;
  padding: 0;
}

.msg.assistant li,
.md li {
  margin: 2px 0;
}

.msg.assistant code,
.md code {
  padding: 1px 5px;
  border-radius: 3px;
  color: #0e5d4c;
  background: #e8efeb;
  font-size: 12px;
}

.msg.assistant pre,
.md pre {
  overflow: auto;
  margin: 8px 0;
  padding: 10px;
  border-radius: 5px;
  color: var(--code-fg);
  background: var(--code);
}

.msg.assistant pre code,
.md pre code {
  padding: 0;
  color: inherit;
  background: transparent;
}

.msg.assistant table,
.md table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}

.msg.assistant th,
.msg.assistant td,
.md th,
.md td {
  padding: 4px 7px;
  border: 1px solid var(--line);
  text-align: left;
}

.msg.assistant a,
.md a {
  color: var(--blue);
}

/* Responsive */
@media (max-width: 1250px) {
  #layout {
    grid-template-columns: 228px minmax(390px, .95fr) minmax(390px, 1.05fr);
  }

  .topbar-brand {
    width: 195px;
  }

  #user-label {
    display: none;
  }
}

@media (max-width: 1000px) {
  #btn-files {
    display: inline-flex;
  }

  #layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  #rightbar {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 34px;
    z-index: 50;
    width: min(520px, 86vw);
    transform: translateX(104%);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .18s ease;
  }

  #rightbar.open {
    transform: none;
  }
}

@media (max-width: 720px) {
  body {
    min-width: 320px;
  }

  #btn-menu {
    display: inline-flex;
  }

  #layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar-brand {
    width: auto;
  }

  .topbar-brand > span:last-child,
  .topbar-runmeta,
  #btn-help,
  #btn-admin,
  .user-cluster {
    display: none !important;
  }

  .topbar-context {
    flex: 1;
  }

  .tb-item {
    max-width: 124px;
  }

  #sidebar {
    position: fixed;
    top: 60px;
    bottom: 34px;
    left: 0;
    z-index: 50;
    width: min(320px, 86vw);
    transform: translateX(-104%);
    box-shadow: var(--shadow);
    transition: transform .18s ease;
  }

  #sidebar.open {
    transform: none;
  }

  #center {
    border-right: 0;
  }

  .panel-head {
    height: 54px;
    min-height: 54px;
  }

  #timeline {
    padding: 16px 12px 20px;
  }

  .msg {
    max-width: 96%;
  }

  #composer {
    padding: 10px 12px 12px;
  }

  #tpl-chips {
    max-height: 34px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .adv-grid {
    grid-template-columns: 1fr;
  }

  #drawer-body {
    height: 410px;
    grid-template-columns: 1fr 1fr;
    overflow: auto;
  }

  .auth-shell {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .auth-brand-panel {
    min-height: 150px;
    padding: 22px;
  }

  .auth-wordmark strong {
    font-size: 30px;
  }

  .auth-card {
    padding: 30px 24px;
  }

  .onboard-heading {
    margin-top: 42px;
  }

  .onboard-entries {
    grid-template-columns: 1fr;
  }

  .onboard-entries button {
    min-height: 92px;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
  }

  .onboard-entries button b {
    grid-row: 1 / span 2;
  }
}

/* ========================================================================== */
/* Control room redesign                                                      */
/* ========================================================================== */

:root {
  --canvas: #f7f8f7;
  --surface: #ffffff;
  --surface-muted: #f0f2f1;
  --surface-strong: #e3e7e4;
  --sidebar: #f0f2f1;
  --sidebar-raised: #e3e6e4;
  --sidebar-line: #d5dad7;
  --ink: #202421;
  --muted: #65716c;
  --muted-2: #8a9690;
  --line: #d5ddd8;
  --line-strong: #b7c4bd;
  --accent: #2f6feb;
  --accent-strong: #255ac4;
  --accent-soft: #e8f0ff;
  --blue: #2f6feb;
  --blue-soft: #e7efff;
  --ok: #25845e;
  --ok-soft: #dff1e8;
  --warn: #a76a18;
  --warn-soft: #fbefd8;
  --err: #be4c45;
  --err-soft: #f8e3df;
  --violet: #705ba5;
  --violet-soft: #eee9f7;
  --code: #111a20;
  --code-raised: #19252c;
  --code-fg: #dce6e1;
  --shadow: 0 20px 54px rgba(18, 31, 27, .16);
  --font-display: Bahnschrift, "Arial Narrow", "Microsoft YaHei UI", sans-serif;
  --font-body: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

body {
  color: var(--ink);
  background: var(--canvas);
  font: 14px/1.5 var(--font-body);
}

button,
input,
textarea,
select {
  border-radius: 3px;
}

button {
  min-height: 36px;
  border-color: var(--line-strong);
  background: var(--surface);
  font-weight: 600;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

button:hover {
  border-color: var(--blue);
  background: #f4f7f4;
}

button:focus-visible,
.tab:focus-visible,
.link:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(49, 94, 208, .24);
  outline-offset: 2px;
}

input,
textarea,
select {
  border-color: var(--line-strong);
  background: var(--surface);
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(49, 94, 208, .14);
  border-color: var(--blue);
}

input:disabled,
textarea:disabled {
  color: var(--muted);
  background: var(--surface-strong);
}

.btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

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

.btn.quiet {
  color: inherit;
}

.btn.danger {
  border-color: #da9c95;
  color: #8f302b;
  background: #f7dfdb;
}

.btn.small {
  min-height: 32px;
  padding: 5px 10px;
}

.icon-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 3px;
}

.eyebrow,
.composer-kicker,
.side-section-head > span,
.brand-mode,
.auth-kicker,
.summary-meta {
  font-family: var(--font-mono);
  font-weight: 650;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--muted);
  font-size: 9.5px;
}

.brand-lockup {
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  color: #fff;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  font-family: var(--font-display);
  font-size: 16px;
}

.link {
  color: var(--blue);
  text-underline-offset: 3px;
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #aab6b0;
  background-clip: padding-box;
}

/* Boot */
#boot-splash {
  position: fixed;
  overflow: hidden;
  gap: 18px;
  color: var(--muted);
  background: var(--canvas);
}

.boot-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(680px, 84vw);
  height: min(360px, 52vh);
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-right-color: transparent;
  border-left-color: transparent;
  pointer-events: none;
}

.boot-grid::before,
.boot-grid::after {
  content: "";
  position: absolute;
  top: -16px;
  width: 1px;
  height: calc(100% + 32px);
  background: var(--line);
}

.boot-grid::before { left: 22%; }
.boot-grid::after { right: 22%; }

#boot-splash .brand-lockup,
#boot-splash .boot-label {
  position: relative;
  z-index: 1;
}

.boot-label {
  font: 10px var(--font-mono);
  text-transform: uppercase;
}

#boot-splash .brand-mark {
  animation: signalPulse 1.4s ease-in-out infinite;
}

@keyframes signalPulse {
  50% { box-shadow: 0 0 0 7px rgba(217, 117, 39, .12), inset 0 0 0 1px rgba(255, 255, 255, .18); }
}

/* Auth */
.view {
  background: var(--canvas);
}

#auth-view {
  padding: 32px;
}

.auth-shell {
  width: min(1100px, 96vw);
  min-height: min(680px, calc(100vh - 64px));
  grid-template-columns: minmax(390px, 48%) minmax(400px, 52%);
  overflow: hidden;
  border: 1px solid #293942;
  border-radius: 3px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-brand-panel {
  position: relative;
  isolation: isolate;
  justify-content: flex-start;
  gap: 28px;
  overflow: hidden;
  padding: 48px;
  color: #f4f7f5;
  background: #18212a;
}

.auth-brand-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 96px;
  right: -58px;
  width: 210px;
  height: 210px;
  border: 1px solid #3b4c56;
  border-radius: 50%;
}

.auth-brand-panel::after {
  content: "QUE";
  position: absolute;
  z-index: -1;
  right: -10px;
  bottom: 72px;
  color: rgba(255, 255, 255, .035);
  font: 700 150px/.8 var(--font-display);
}

.auth-signal {
  display: grid;
  width: 100%;
  gap: 8px;
  margin-top: 24px;
}

.auth-signal .signal-line {
  display: block;
  height: 1px;
  background: #40515b;
}

.auth-signal .signal-line:nth-child(2) {
  width: 68%;
  background: var(--accent);
}

.auth-signal .signal-line:nth-child(3) {
  width: 36%;
}

.auth-wordmark {
  gap: 14px;
  margin: auto 0;
}

.auth-kicker,
.auth-release {
  color: #8fa0aa;
  font-size: 10px;
}

.auth-wordmark strong {
  max-width: 420px;
  font: 660 58px/.98 var(--font-display);
}

.auth-wordmark p {
  max-width: 320px;
  margin: 2px 0 0;
  color: #aebbc2;
  font-size: 13px;
}

.auth-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #40515b;
  border-bottom: 1px solid #40515b;
}

.auth-steps span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 10px;
  border-right: 1px solid #40515b;
  color: #d7e0dc;
  font-size: 12px;
}

.auth-steps span:last-child { border-right: 0; }
.auth-steps b { color: var(--accent); font: 10px var(--font-mono); }
.auth-release { margin-top: 0; }

.auth-card {
  padding: 76px clamp(52px, 7vw, 92px);
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.auth-heading {
  margin-bottom: 36px;
}

.auth-heading h1,
.onboard-heading h1 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 680;
}

.field-label {
  gap: 8px;
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 12px;
}

.field-label input {
  min-height: 46px;
  background: #f8faf8;
}

.auth-submit {
  min-height: 48px;
  margin-top: 6px;
  padding-inline: 16px;
}

.auth-card .link {
  margin-top: 20px;
}

/* Onboarding */
#onboard-view {
  padding: 32px clamp(24px, 6vw, 84px);
}

.onboard-shell {
  width: min(1040px, 100%);
  margin: auto;
}

.onboard-heading {
  max-width: 660px;
  margin: clamp(54px, 9vh, 100px) 0 34px;
}

.onboard-heading h1 {
  font-size: 42px;
}

.onboard-name {
  width: min(500px, 100%);
}

.onboard-entries {
  gap: 0;
  margin-top: 30px;
  border: 1px solid var(--line-strong);
}

.onboard-entries button {
  position: relative;
  min-height: 174px;
  grid-template-rows: 44px auto auto;
  gap: 7px;
  padding: 24px;
  border: 0;
  border-right: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
}

.onboard-entries button:last-child { border-right: 0; }

.onboard-entries button:hover {
  z-index: 1;
  color: var(--ink);
  background: var(--accent-soft);
  box-shadow: inset 0 -4px 0 var(--accent);
}

.onboard-entries button b {
  color: var(--blue);
  font: 500 30px var(--font-display);
}

.onboard-entries button strong {
  font-family: var(--font-display);
  font-size: 17px;
}

.onboard-entries button span {
  color: var(--muted);
  font-size: 12.5px;
}

.onboard-entries button i {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--muted-2);
  font: normal 10px var(--font-mono);
}

/* App shell */
#app {
  background: var(--canvas);
}

#topbar {
  min-height: 64px;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
}

.topbar-brand {
  width: 244px;
  gap: 9px;
  color: var(--ink);
}

.brand-mode {
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
  color: var(--muted-2);
  font-size: 8.5px;
}

.topbar-context {
  gap: 4px;
}

.topbar-breadcrumbs,
.topbar-runmeta {
  gap: 8px;
}

.crumb-prefix {
  color: var(--muted-2);
  font: 9px var(--font-mono);
}

#topbar .dim,
#topbar #tb-ws {
  color: var(--muted);
}

#topbar #tb-run-title {
  color: var(--ink);
  font-weight: 650;
}

.tb-sep {
  color: var(--line-strong);
}

.tb-thinking {
  color: var(--blue);
}

#topbar .btn.quiet,
#topbar .icon-btn.quiet {
  border-color: var(--line);
  color: var(--muted);
  background: transparent;
}

#topbar .btn.quiet:hover,
#topbar .icon-btn.quiet:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--surface-muted);
}

.user-presence {
  background: #57b98e;
  box-shadow: 0 0 0 3px rgba(87, 185, 142, .12);
}

.badge-status {
  min-height: 21px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
}

#layout {
  grid-template-columns: 248px minmax(560px, 1fr) minmax(340px, 380px);
}

.panel-head {
  height: 68px;
  min-height: 68px;
  padding: 0 20px;
  border-color: var(--line);
  background: rgba(252, 253, 252, .97);
}

.panel-head > div {
  gap: 5px;
}

.panel-head strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 680;
}

.panel-index,
.drawer-index {
  display: none;
}

/* Queue rail */
#sidebar {
  gap: 14px;
  padding: 16px 12px 14px;
  color: var(--ink);
  background: var(--sidebar);
}

.btn.command {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 11px;
  padding: 10px 10px;
  border-color: var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  color: var(--ink);
  background: var(--surface);
}

.btn.command:hover {
  border-color: #9fbaf3;
  border-left-color: var(--blue);
  background: #f8faff;
}

.command-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8c9ee;
  color: var(--blue);
  font: 22px/1 var(--font-display);
}

.command-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.command-copy strong {
  font-family: var(--font-display);
  font-size: 14px;
}

.command-copy small,
.command-key {
  color: var(--muted-2);
  font: 8.5px var(--font-mono);
}

.command-key {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}

.side-section-head {
  margin: 13px 7px 7px;
}

.side-section-head > span {
  color: var(--muted-2);
  font-size: 8.5px;
}

.side-h {
  color: var(--muted);
  font: 650 10px var(--font-mono);
}

.side-empty {
  padding: 10px 8px;
  color: var(--muted-2);
  line-height: 1.55;
}

.run-item,
.ws-item,
.sess-item {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--muted);
}

.run-item {
  min-height: 48px;
  padding: 8px 8px 8px 10px;
}

.run-item:hover,
.ws-item:hover,
.sess-item:hover {
  border-color: var(--line);
  color: var(--ink);
  background: #e8ebe9;
}

.run-item.active,
.ws-item.active,
.sess-item.active {
  border-color: #d6dcd8;
  color: var(--ink);
  background: var(--sidebar-raised);
}

.run-item.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.run-item .r-ico {
  width: 18px;
  font: 12px var(--font-mono);
}

.run-item .r-title {
  font-size: 12.5px;
  font-weight: 600;
}

.run-item .r-time {
  color: var(--muted-2);
  font: 10px var(--font-mono);
}

.ico-RUNNING {
  color: #7fa3ff;
}

#sess-details {
  padding: 9px;
  border-color: var(--sidebar-line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .58);
}

#sess-details summary,
#composer details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#sess-details summary {
  color: var(--muted);
}

.summary-meta {
  color: var(--muted-2);
  font-size: 8px;
}

.btn.inverse {
  border-color: var(--line-strong);
  color: var(--muted);
  background: transparent;
}

.btn.inverse:hover {
  border-color: #a9b7af;
  color: var(--ink);
  background: var(--surface);
}

.side-workspaces {
  border-color: var(--line);
}

.ws-item .mini {
  visibility: visible;
  opacity: .45;
}

.sess-item .mini {
  width: 26px;
  min-width: 26px;
  min-height: 24px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  opacity: .55;
}

.ws-item:hover .mini,
.ws-item:focus-within .mini,
.sess-item:hover .mini,
.sess-item:focus-within .mini {
  opacity: 1;
}

.usage {
  padding: 12px 5px 2px;
  border-top: 1px solid var(--line);
}

.usage-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--muted);
  font: 9px var(--font-mono);
  text-transform: uppercase;
}

.usage-bar {
  height: 3px;
  border-radius: 0;
  background: #d8ddda;
}

#usage-fill {
  background: #56b68c;
}

#usage-text {
  color: var(--muted-2);
  font: 9.5px/1.5 var(--font-mono);
}

/* Conversation workspace */
#center {
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.center-head,
.inspector-head {
  height: 56px;
  min-height: 56px;
}

#sticky-slot {
  position: relative;
  z-index: 3;
  padding: 10px clamp(18px, 4vw, 44px);
  border-bottom: 1px solid #e8d6b3;
  background: #fffaf1;
}

#sticky-slot::before {
  content: "需要你的操作";
  display: block;
  margin: 0 auto 7px;
  max-width: 840px;
  color: var(--warn);
  font: 650 9px var(--font-mono);
  text-transform: uppercase;
}

#sticky-slot:empty,
#sticky-slot:empty::before {
  display: none;
}

#sticky-slot .card {
  max-width: 840px;
  margin-inline: auto;
  border-width: 0 0 0 3px;
  box-shadow: none;
}

#timeline {
  position: relative;
  flex: 1;
  padding: 28px max(26px, calc((100% - 900px) / 2)) 30px;
  background: var(--surface);
}

#timeline::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 32px;
  left: max(38px, calc((100% - 900px) / 2 + 13px));
  width: 1px;
  background: #d8e1f4;
  pointer-events: none;
}

#timeline > * {
  width: 100%;
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}

.tl-hero {
  position: relative;
  margin-top: clamp(34px, 8vh, 88px);
  padding: 4px 12px 4px 42px;
  color: var(--muted);
}

.tl-hero::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 7px;
  width: 11px;
  height: 11px;
  margin: 0;
  border: 3px solid #d7e4ff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--surface);
}

.tl-hero h2 {
  margin-bottom: 8px;
  font: 670 28px/1.15 var(--font-display);
}

.tl-hero p {
  margin-bottom: 22px;
  font-size: 13.5px;
}

.tl-hero .hero-runs {
  max-width: 520px;
  gap: 4px;
}

.tl-hero .hero-runs .run-item {
  min-height: 46px;
  border-color: var(--line);
  color: var(--ink);
  background: #fafbfa;
}

.tl-hero .hero-runs .run-item:hover {
  border-color: #b9c9ee;
  background: #f7f9ff;
}

.msg,
.card,
.sys {
  position: relative;
}

.msg {
  max-width: 82%;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.62;
}

.msg.user {
  width: auto;
  max-width: 74%;
  margin-right: 0;
  margin-left: auto;
  border-color: #dde1de;
  background: #f7f8f7;
}

.msg.assistant {
  max-width: 100%;
  padding: 13px 10px 13px 42px;
  border: 0;
  background: transparent;
}

.msg.assistant::before,
.card::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 17px;
  left: 7px;
  width: 9px;
  height: 9px;
  border: 3px solid #dbe6ff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--surface);
}

.msg.assistant.streaming::after {
  color: var(--blue);
}

.sys {
  padding: 3px 10px 3px 42px;
  color: var(--muted-2);
  font: 10.5px var(--font-mono);
  text-align: left;
}

.card {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 13px 14px 13px 42px;
  border-color: var(--line);
  border-radius: 6px;
  background: #fbfcfb;
}

.card-title,
.live-section {
  color: var(--muted);
  font: 650 9.5px var(--font-mono);
}

.card .body {
  line-height: 1.6;
}

.card.plan {
  border-left: 1px solid var(--line);
  background: #f8faff;
}

.card.plan::before {
  background: var(--blue);
}

.card.plan .card-title {
  color: var(--blue);
}

.card.steps::before {
  background: #6d7f8b;
  border-color: #e1e5e3;
}

.step-list li {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  padding: 7px 0;
  border-color: #e6eae7;
}

.step-list .step-tool {
  font-family: var(--font-mono);
}

.card.tool {
  border-color: #d8ddda;
  color: var(--ink);
  background: #f7f8f7;
  font-family: var(--font-mono);
}

.card.tool::before {
  background: #778791;
  border-color: #e1e5e3;
}

.tool-kind {
  border-color: #cbd2ce;
  color: var(--muted-2);
  background: #fff;
}

.tool-name {
  color: var(--ink);
  font-weight: 650;
}

.tool-args {
  color: var(--muted);
}

.tool-st {
  color: var(--muted);
}

.tool-st.ok { color: var(--ok); }
.tool-st.fail { color: var(--err); }

.tool-toggle {
  border-color: #cbd2ce;
  color: var(--muted);
  background: #fff;
}

.tool-toggle:hover {
  border-color: #aab7b0;
  color: var(--ink);
  background: #f2f4f2;
}

.tool-out,
.live-out {
  border-color: #2c3940;
  border-radius: 4px;
  color: var(--code-fg);
  background: var(--code);
  font-family: var(--font-mono);
}

.card.approval,
.card.input-req {
  padding-left: 42px;
}

.card.approval {
  border-color: #e8c58e;
  border-left: 3px solid var(--warn);
  background: #fff8ea;
}

.card.approval::before {
  background: var(--warn);
  border-color: #fae7c4;
}

.card.input-req {
  border-color: #cbbfe0;
  border-left: 3px solid var(--violet);
  background: #f7f4fb;
}

.card.input-req::before {
  background: var(--violet);
  border-color: #e7e0f2;
}

.card.summary {
  border-left: 3px solid var(--ok);
  background: #f5fbf8;
}

.card.summary::before {
  background: var(--ok);
  border-color: #dceee5;
}

.card.error-info {
  border-left: 3px solid var(--err);
}

.card.error-info::before {
  background: var(--err);
  border-color: #f4d9d5;
}

.chg-row,
.art-row {
  border-radius: 4px;
  background: var(--surface);
}

pre.diff {
  border-radius: 4px;
  font-family: var(--font-mono);
}

.fb-chip,
.tpl-chip {
  border-radius: 999px;
}

.fb-chip.active,
.tpl-chip.active {
  border-color: var(--blue);
  background: var(--blue);
}

/* Dispatch dock */
#composer {
  position: relative;
  width: calc(100% - 40px);
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 13px 16px 14px;
  overflow: hidden;
  border: 1px solid #d8ddda;
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 38px rgba(21, 35, 29, .1);
}

#composer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 112px;
  height: 2px;
  background: var(--blue);
}

.composer-kicker {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 8.5px;
}

.composer-kicker > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

#tpl-chips {
  max-height: 32px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

#tpl-chips::-webkit-scrollbar { display: none; }

.tpl-chip {
  min-height: 27px;
  padding: 3px 10px;
  border-color: #dce1de;
  background: #f7f8f7;
  white-space: nowrap;
}

.tpl-chip:hover {
  border-color: #b9c9ee;
  background: #f7f9ff;
}

.composer-fields {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
}

#main-input {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#main-input {
  min-height: 72px;
  max-height: 180px;
  padding-top: 10px;
}

#main-input:focus {
  outline: 0;
}

.composer-fields:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 111, 235, .12);
}

#composer details {
  margin-top: 8px;
  padding-top: 7px;
  border-color: #e7eae8;
}

#composer details summary {
  color: var(--muted);
  font-size: 11px;
}

.adv-grid {
  gap: 8px 12px;
}

.adv-grid .adv-wide {
  grid-column: 1 / -1;
}

#task-title {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  font-weight: 600;
}

.adv-grid input {
  min-height: 36px;
  padding: 7px 9px;
}

.composer-foot {
  margin-top: 9px;
}

#composer-hint {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submit-task {
  min-width: 128px;
  min-height: 38px;
  border-radius: 6px;
}

/* Evidence inspector */
#rightbar {
  border-left: 0;
  background: #fafbfa;
}

#rightbar .tabs {
  gap: 2px;
  padding: 6px;
  border-color: var(--line);
  background: #f5f6f5;
}

#rightbar .tab {
  min-height: 34px;
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
}

#rightbar .tab:hover {
  border-color: #e1e5e2;
  background: #fff;
}

#rightbar .tab.active {
  border-color: #d6dcd8;
  box-shadow: none;
  color: var(--ink);
  background: var(--surface);
}

#rightbar .pane {
  padding: 18px;
  background: #fafbfa;
}

.pane-tools {
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.pane-tools button {
  border-color: #d8ddda;
  background: #fff;
}

.tool-command::before {
  color: var(--blue);
}

.fitem {
  padding: 6px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.fitem.dir {
  color: var(--blue);
}

.pane-empty {
  max-width: 260px;
  margin: 46px auto 0;
  color: var(--muted-2);
  line-height: 1.65;
}

/* Diagnostics */
#drawer {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

#drawer-bar {
  height: 36px;
  padding: 0 16px;
  color: var(--muted);
  background: #f7f8f7;
}

#drawer-bar:hover {
  background: #f0f2f1;
}

#drawer-toggle {
  color: var(--ink);
  font-size: 11px;
}

#drawer-sub {
  font: 8.5px var(--font-mono);
}

#drawer-body {
  height: 286px;
  gap: 1px;
  border-color: var(--line);
  background: var(--line);
}

.drawer-col h3 {
  padding: 10px 11px 7px;
  font: 650 9px var(--font-mono);
}

.drawer-scroll,
.ev-row {
  font-family: var(--font-mono);
}

/* Global overlays */
#panel-backdrop {
  position: fixed;
  inset: 64px 0 36px;
  z-index: 45;
  background: rgba(23, 32, 29, .28);
  backdrop-filter: blur(1px);
}

#conn-banner {
  padding: 7px 12px;
  border-color: #e1b064;
  color: #6f4308;
  background: #fff4df;
  font-weight: 650;
}

#ctx-menu {
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 14px 36px rgba(22, 34, 29, .15);
}

#ctx-menu button {
  min-height: 34px;
  border-radius: 3px;
  font-size: 12px;
}

#modal {
  background: rgba(25, 33, 30, .38);
  backdrop-filter: blur(3px);
}

#modal-card {
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(18, 28, 24, .22);
}

#modal-bar {
  min-height: 56px;
}

#modal-title {
  font-family: var(--font-display);
  font-size: 16px;
}

#toast {
  bottom: 24px;
  padding: 11px 16px;
  border-color: #a9c8bb;
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(22, 34, 29, .16);
}

/* Admin console */
#admin-view {
  background: var(--canvas);
}

#admin-view header {
  min-height: 64px;
  border-color: var(--line);
  background: var(--surface);
}

.admin-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#admin-view header h1 {
  font-family: var(--font-display);
  font-size: 16px;
}

.admin-tabs {
  gap: 4px;
  padding: 8px 18px;
  background: #f4f5f4;
}

.admin-tabs button {
  border-radius: 4px;
}

.admin-tabs button.active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

#admin-body {
  padding: 24px;
}

.stat-cards {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.stat-card {
  min-height: 100px;
  padding: 16px;
  border-radius: 5px;
}

.stat-card .num {
  font: 680 26px var(--font-display);
}

.stat-card .lbl,
.admin-section-title {
  font-family: var(--font-mono);
}

table.admin {
  border: 1px solid var(--line);
  background: var(--surface);
}

table.admin th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: #f4f6f4;
  font-family: var(--font-mono);
  font-size: 10px;
}

table.admin th,
table.admin td {
  padding: 9px 10px;
}

/* Rich text */
.msg.assistant h2,
.msg.assistant h3,
.msg.assistant h4,
.md h2,
.md h3 {
  font-family: var(--font-display);
  font-size: 17px;
}

.msg.assistant p,
.md p {
  line-height: 1.68;
}

.msg.assistant code,
.md code {
  color: #224f95;
  background: #edf2fb;
  font-family: var(--font-mono);
}

.msg.assistant pre,
.md pre {
  border-radius: 5px;
  background: var(--code);
}

.msg.assistant table,
.md table {
  width: 100%;
}

/* Responsive shell */
@media (max-width: 1240px) {
  #layout {
    grid-template-columns: 232px minmax(520px, 1fr) 340px;
  }

  .topbar-brand {
    width: 228px;
  }

  .brand-mode {
    display: none;
  }
}

@media (max-width: 1120px) {
  #btn-files {
    display: inline-flex;
  }

  #layout {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  #rightbar {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 36px;
    z-index: 50;
    width: min(440px, 88vw);
    transform: translateX(104%);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 52px rgba(21, 33, 29, .15);
    transition: transform .18s ease;
  }

  #rightbar.open {
    transform: none;
  }

  #timeline {
    padding-inline: max(28px, calc((100% - 900px) / 2));
  }
}

@media (min-width: 1121px) {
  #panel-backdrop {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body {
    min-width: 320px;
  }

  #topbar {
    min-height: 58px;
    gap: 7px;
    padding: 0 10px;
  }

  #btn-menu {
    display: inline-flex;
  }

  .topbar-brand {
    width: auto;
  }

  .topbar-brand .brand-name,
  .topbar-brand .brand-mode,
  .topbar-runmeta,
  #btn-help,
  #btn-admin,
  .user-cluster {
    display: none !important;
  }

  .topbar-context {
    flex: 1;
  }

  .crumb-prefix,
  #tb-ws,
  .tb-sep {
    display: none;
  }

  .tb-item {
    max-width: min(46vw, 220px);
  }

  #layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #sidebar {
    position: fixed;
    top: 58px;
    bottom: 36px;
    left: 0;
    z-index: 50;
    width: min(320px, 88vw);
    transform: translateX(-104%);
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 52px rgba(21, 33, 29, .15);
    transition: transform .18s ease;
  }

  #sidebar.open {
    transform: none;
  }

  #rightbar {
    top: 58px;
    width: min(420px, 92vw);
  }

  #panel-backdrop {
    inset: 58px 0 36px;
  }

  #center {
    border-right: 0;
  }

  .panel-head {
    height: 50px;
    min-height: 50px;
    padding: 0 14px;
  }

  .panel-head strong {
    font-size: 14px;
  }

  #timeline {
    padding: 20px 12px 22px 34px;
  }

  #timeline::before {
    left: 18px;
  }

  .tl-hero {
    margin-top: 28px;
    padding-left: 24px;
  }

  .tl-hero::before,
  .msg.assistant::before,
  .card::before {
    left: -21px;
  }

  .tl-hero h2 {
    font-size: 23px;
  }

  .msg {
    max-width: 94%;
  }

  .msg.user {
    max-width: 88%;
  }

  .msg.assistant,
  .card,
  .sys {
    padding-left: 12px;
  }

  #sticky-slot {
    padding: 9px 12px;
  }

  #composer {
    width: calc(100% - 16px);
    margin-bottom: 8px;
    padding: 11px 11px 12px;
  }

  #tpl-chips {
    max-height: 30px;
  }

  #task-title {
    min-height: 36px;
  }

  #main-input {
    min-height: 62px;
  }

  .adv-grid {
    grid-template-columns: 1fr;
  }

  #composer-hint {
    display: none;
  }

  #composer-hint.warn {
    display: block !important;
    width: 100%;
    padding-top: 4px;
    white-space: normal;
  }

  .submit-task {
    width: 100%;
  }

  .composer-foot {
    display: block;
  }

  #drawer-body {
    height: 400px;
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand-panel {
    min-height: 220px;
  }

  .auth-signal,
  .auth-steps,
  .auth-release {
    display: none;
  }

  .auth-wordmark {
    margin-top: auto;
  }

  .auth-wordmark strong {
    font-size: 36px;
  }

  .auth-card {
    padding: 32px 24px;
  }

  .onboard-heading h1 {
    font-size: 32px;
  }

  .onboard-entries {
    grid-template-columns: 1fr;
  }

  .onboard-entries button {
    min-height: 100px;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .onboard-entries button:last-child {
    border-bottom: 0;
  }

  .onboard-entries button b {
    grid-row: 1 / span 2;
  }

  #admin-view header {
    padding: 0 10px;
  }

  #admin-view header .brand-lockup,
  .admin-divider {
    display: none;
  }

  #admin-body {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  #auth-view,
  #onboard-view {
    padding: 0;
  }

  .auth-shell {
    width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .auth-brand-panel {
    min-height: 190px;
    padding: 24px;
  }

  .onboard-shell {
    padding: 24px 16px;
  }

  .onboard-heading {
    margin-top: 48px;
  }

  .onboard-entries button {
    padding: 18px;
  }

  #rightbar .tabs {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(80px, 1fr));
  }

  #btn-logout {
    padding-inline: 7px;
  }
}

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

/* ========================================================================== */
/* Workspace v3: conversation-first layout                                   */
/* ========================================================================== */

:root {
  --workspace-rail: 280px;
  --workspace-header: 58px;
}

#topbar {
  z-index: 48;
  width: calc(100% - var(--workspace-rail));
  height: var(--workspace-header);
  min-height: var(--workspace-header);
  margin-left: var(--workspace-rail);
  padding: 0 16px 0 22px;
  flex: none;
}

.topbar-context {
  min-width: 0;
  flex: 1;
}

.topbar-breadcrumbs {
  font-size: 14px;
}

.topbar-runmeta {
  min-height: 14px;
}

.inspector-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

#layout {
  position: relative;
  display: grid;
  grid-template-columns: var(--workspace-rail) minmax(0, 1fr);
}

#sidebar {
  position: fixed;
  z-index: 60;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--workspace-rail);
  gap: 8px;
  padding: 0 12px 10px;
  border-right: 1px solid var(--line);
  background: #f3f4f3;
}

.sidebar-brand {
  display: flex;
  height: var(--workspace-header);
  min-height: var(--workspace-header);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
}

.sidebar-brand .brand-lockup {
  gap: 9px;
  color: var(--ink);
}

.sidebar-brand .brand-mark {
  width: 27px;
  height: 27px;
  border-radius: 5px;
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(47, 99, 216, .2);
}

.sidebar-brand .brand-name {
  font: 650 14px var(--font-display);
}

.sidebar-brand .brand-mode {
  color: var(--muted-2);
  font: 600 8px var(--font-mono);
}

.btn.command {
  min-height: 48px;
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.btn.command:hover {
  border: 0;
  background: #e8eae9;
}

.command-icon {
  width: 28px;
  height: 28px;
  border: 0;
  color: var(--ink);
  font-size: 24px;
}

.command-copy strong {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 650;
}

.command-copy small {
  display: none;
}

.primary-nav {
  display: grid;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.primary-nav-item {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.primary-nav-item > span:first-child {
  width: 18px;
  color: #68716d;
  text-align: center;
}

.primary-nav-item:hover,
.primary-nav-item.active {
  border: 0;
  background: #e5e7e6;
}

.primary-nav-item.active > span:first-child {
  color: var(--blue);
}

.side-section-head {
  min-height: 28px;
  margin: 8px 8px 4px;
}

.side-h {
  color: #747d78;
  font: 600 11px var(--font-body);
  text-transform: none;
}

.side-section-head > span {
  color: var(--muted-2);
  font: 9px var(--font-mono);
}

.side-add {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 20px;
  font-weight: 400;
}

.side-add:hover {
  border: 0;
  color: var(--ink);
  background: #e3e6e4;
}

.side-workspaces {
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.side-runs {
  min-height: 120px;
  flex: 1;
  overflow: hidden;
}

#run-list {
  max-height: 100%;
  overflow-y: auto;
}

.run-item,
.ws-item,
.sess-item {
  border: 0;
  border-radius: 7px;
}

.run-item {
  min-height: 44px;
  padding: 7px 8px;
}

.run-item:hover,
.ws-item:hover,
.sess-item:hover,
.run-item.active,
.ws-item.active,
.sess-item.active {
  border: 0;
  color: var(--ink);
  background: #e3e5e4;
}

.run-item.active {
  box-shadow: none;
}

.run-item.active::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.run-item .r-ico {
  color: var(--blue);
}

.run-item .r-title {
  font-size: 12.5px;
  font-weight: 500;
}

.run-item .r-time {
  margin-top: 2px;
  font: 9.5px var(--font-body);
}

.ws-item,
.sess-item {
  min-height: 36px;
  padding: 6px 8px;
}

.ws-item.active {
  background: #e7e9e8;
}

#sess-details {
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

#sess-details summary {
  min-height: 28px;
  color: var(--muted);
  font-size: 11px;
}

.usage {
  margin-top: 0;
  padding: 10px 8px 2px;
  border-top: 1px solid var(--line);
}

.sidebar-account {
  display: grid;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) 30px 30px;
  align-items: center;
  gap: 4px;
  padding: 7px 4px 0;
  border-top: 1px solid var(--line);
}

.sidebar-account .user-cluster {
  min-width: 0;
  padding-left: 4px;
}

.sidebar-account #user-label {
  color: #5e6863;
  font-size: 10.5px;
}

.sidebar-account .icon-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
}

.sidebar-account .icon-btn:hover {
  border: 0;
  background: #e3e6e4;
}

#center {
  position: relative;
  min-width: 0;
  grid-column: 2;
  border: 0;
  background: #fff;
}

.thread-toolbar {
  display: none;
  height: 54px;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 26px;
  border-bottom: 1px solid #eceeec;
  background: rgba(255, 255, 255, .96);
}

.thread-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-orbit {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfd7d2;
  border-radius: 50%;
}

.agent-orbit::before,
.agent-orbit::after,
.agent-orbit i {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--ink);
}

.agent-orbit::before { width: 5px; height: 5px; }
.agent-orbit::after { width: 2px; height: 2px; transform: translate(6px, -5px); }
.agent-orbit i { width: 2px; height: 2px; transform: translate(-6px, 5px); }

.thread-identity > div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.thread-identity strong {
  font-family: var(--font-display);
  font-size: 14px;
}

.thread-identity span:last-child {
  color: var(--muted-2);
  font-size: 9.5px;
}

.thread-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workspace-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.workspace-signal i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

#timeline {
  padding: 28px max(30px, calc((100% - 980px) / 2)) 42px;
}

#timeline::before {
  display: none;
}

#timeline > * {
  max-width: 920px;
}

.tl-hero {
  position: relative;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}

.tl-hero::before {
  display: none;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: #5e6964;
  font: 650 10px var(--font-mono);
}

.hero-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(24, 139, 100, .09);
}

.tl-hero h1 {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font: 640 34px/1.18 var(--font-display);
}

.tl-hero p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.tl-hero p strong {
  color: #3a443f;
  font-weight: 600;
}

.hero-signal {
  position: absolute;
  top: -2px;
  left: -46px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #cfd7d2;
  border-radius: 50%;
  background: #fff;
}

.hero-signal span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}

.hero-signal span:nth-child(2) { transform: translate(7px, -6px); }
.hero-signal span:nth-child(3) { transform: translate(-7px, 6px); }

#center.is-empty {
  justify-content: center;
  padding: 28px 0 40px;
}

#center.is-empty #timeline {
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  overflow: visible;
  padding: 0 max(58px, calc((100% - 760px) / 2));
}

#center.is-empty #timeline > * {
  max-width: 760px;
}

#center.is-empty #composer {
  width: calc(100% - 80px);
  max-width: 760px;
  margin: 30px auto 0;
}

.run-overview {
  margin: 0 auto;
  border-bottom: 1px solid #e4e8e5;
}

.run-overview-main {
  position: relative;
  padding: 4px 168px 24px 0;
}

.run-overview-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 600 9.5px var(--font-mono);
  text-transform: uppercase;
}

.run-overview-kicker > span:last-child {
  padding-left: 8px;
  border-left: 1px solid var(--line);
  color: var(--muted-2);
}

.run-state-pulse {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
}

.run-state-pulse.st-COMPLETED { background: var(--ok); }
.run-state-pulse.st-FAILED,
.run-state-pulse.st-CANCELLED { background: var(--err); }
.run-state-pulse.st-WAITING_INPUT,
.run-state-pulse.st-WAITING_APPROVAL { background: var(--warn); }

.run-overview h1 {
  max-width: 720px;
  margin: 11px 0 10px;
  color: var(--ink);
  font: 640 25px/1.28 var(--font-display);
  overflow-wrap: anywhere;
}

.run-overview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  color: var(--muted);
  font-size: 10.5px;
}

.run-overview-meta span {
  position: relative;
}

.run-overview-meta span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #aeb6b1;
}

.run-overview-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 5px;
}

.run-overview-actions button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #dde2df;
  border-radius: 6px;
  color: #4f5954;
  background: #fff;
  font-size: 10.5px;
}

.run-overview-actions button:hover {
  border-color: #b9c9ee;
  color: var(--blue);
  background: #f8faff;
}

.run-phases {
  display: grid;
  margin: 0;
  padding: 13px 0 15px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.run-phases li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9aa39e;
  font-size: 10.5px;
}

.run-phases li::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 12px;
  left: 32px;
  height: 1px;
  background: #dfe4e1;
}

.run-phases li:last-child::after {
  display: none;
}

.run-phases li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #d8dedb;
  border-radius: 50%;
  background: #fff;
  font: 600 9px var(--font-mono);
}

.run-phases li b {
  position: relative;
  z-index: 1;
  padding-right: 7px;
  background: #fff;
  font-weight: 550;
}

.run-phases li.done,
.run-phases li.current {
  color: var(--ink);
}

.run-phases li.done > span {
  border-color: #abd5c1;
  color: #fff;
  background: var(--ok);
}

.run-phases li.done::after {
  background: #abd5c1;
}

.run-phases li.current > span {
  border-color: #91ace8;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 99, 216, .09);
}

.run-phases li.failed > span {
  border-color: #e8bbb7;
  background: var(--err);
  box-shadow: 0 0 0 4px rgba(193, 76, 67, .09);
}

.run-process {
  margin-top: 24px;
}

.run-process > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px;
  border-bottom: 1px solid #e5e9e6;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.run-process > summary::-webkit-details-marker {
  display: none;
}

.run-process > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 620;
}

.run-process > summary i {
  width: 7px;
  height: 7px;
  border: 2px solid #cbd8f3;
  border-radius: 50%;
  background: var(--blue);
}

.run-process > summary small {
  color: var(--muted-2);
  font: 9px var(--font-mono);
}

.run-process > summary > span::after {
  content: "展开";
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: 400;
}

.run-process[open] > summary > span::after {
  content: "收起";
}

#run-process-body {
  position: relative;
  padding: 18px 0 70px 36px;
}

#run-process-body::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 36px;
  left: 12px;
  width: 1px;
  background: #d9e2f5;
}

#run-process-body > * {
  width: 100%;
  max-width: none;
}

#run-process-body .msg.assistant,
#run-process-body .card,
#run-process-body .sys {
  padding-left: 22px;
}

#run-process-body .msg.assistant::before,
#run-process-body .card::before {
  left: -29px;
}

.msg-meta {
  margin-bottom: 6px;
  color: var(--muted-2);
  font: 600 9.5px var(--font-mono);
}

.msg.user .msg-meta {
  text-align: right;
}

.msg-content {
  min-width: 0;
}

.msg.interjection {
  position: relative;
  padding-bottom: 28px;
  border-color: #c9d7f3;
  background: #f6f8fd;
}

.msg.interjection::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation: textPulse 1.3s ease-in-out infinite;
}

.interjection-state {
  position: absolute;
  right: 24px;
  bottom: 7px;
  color: var(--blue);
  font: 9.5px var(--font-mono);
}

.interjection-reason {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #ead0cd;
  color: var(--err);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: left;
}

.msg.interjection.applied {
  border-color: #cfe2d8;
  background: #f6faf8;
}

.msg.interjection.applied::after {
  background: var(--ok);
  animation: none;
}

.msg.interjection.applied .interjection-state {
  color: var(--ok);
}

.msg.interjection.rejected {
  border-color: #ead0cd;
  background: var(--err-soft);
}

.msg.interjection.rejected::after {
  background: var(--err);
  animation: none;
}

.msg.interjection.rejected .interjection-state {
  color: var(--err);
}

.sys {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sys-marker {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: #9aaba3;
}

.run-delivery {
  margin: 24px auto 0;
  padding: 26px 0 30px;
  border-top: 3px solid var(--ok);
  border-bottom: 1px solid #e3e8e5;
}

.run-delivery.delivery-failed,
.run-delivery.delivery-cancelled {
  border-top-color: var(--err);
}

.delivery-heading {
  position: relative;
  padding-right: 88px;
}

.delivery-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ok);
  font: 650 10px var(--font-mono);
}

.delivery-failed .delivery-status,
.delivery-cancelled .delivery-status {
  color: var(--err);
}

.delivery-status span {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ok);
  font-family: var(--font-body);
}

.delivery-failed .delivery-status span,
.delivery-cancelled .delivery-status span {
  background: var(--err);
}

.delivery-heading h2 {
  max-width: 740px;
  margin: 11px 0 0;
  font: 640 24px/1.32 var(--font-display);
  overflow-wrap: anywhere;
}

.delivery-duration {
  position: absolute;
  top: 1px;
  right: 0;
  color: var(--muted);
  font: 10px var(--font-mono);
}

.delivery-response {
  max-width: 760px;
  margin-top: 24px;
  color: #27302c;
  font-size: 14px;
  line-height: 1.72;
}

.delivery-response > :first-child { margin-top: 0; }
.delivery-response > :last-child { margin-bottom: 0; }

.delivery-error {
  padding: 14px 16px;
  border-left: 3px solid var(--err);
  background: var(--err-soft);
}

.delivery-pending {
  color: var(--muted);
}

.delivery-ledger {
  display: grid;
  max-width: 620px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  border-top: 1px solid #e4e8e5;
  border-bottom: 1px solid #e4e8e5;
}

.delivery-ledger span {
  padding: 13px 16px 13px 0;
  color: var(--muted);
  font-size: 10.5px;
}

.delivery-ledger span + span {
  padding-left: 16px;
  border-left: 1px solid #e4e8e5;
}

.delivery-ledger b {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font: 650 18px var(--font-display);
}

.delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.delivery-actions .btn {
  min-height: 34px;
}

#composer {
  width: calc(100% - 48px);
  max-width: 820px;
  margin: 0 auto 16px;
  padding: 10px 12px 9px;
  border-color: #d9ddda;
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(21, 31, 27, .11);
}

#composer::before {
  display: none;
}

.composer-contextbar {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 7px;
  padding: 0 2px 6px;
  border-bottom: 1px solid #edf0ee;
}

.composer-mode {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10.5px;
}

.composer-mode strong {
  flex: none;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
}

.composer-mode-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 99, 216, .09);
}

#composer-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-context-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 3px;
}

.composer-file-action,
.composer-stop-action {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font-size: 10.5px;
}

.composer-file-action:hover,
.composer-stop-action:hover {
  border: 0;
  color: var(--ink);
  background: #f0f2f1;
}

.composer-stop-action {
  color: var(--err);
}

.composer-stop-action:hover {
  color: #a83a33;
  background: var(--err-soft);
}

#composer[data-mode="answer"] {
  border-color: #dbb56f;
  box-shadow: 0 16px 42px rgba(123, 80, 13, .13);
}

#composer[data-mode="answer"] .composer-mode-dot {
  background: var(--warn);
  box-shadow: 0 0 0 4px rgba(183, 106, 19, .1);
}

#composer[data-mode="running"] {
  overflow: hidden;
  border-color: #b9c9ee;
}

#composer[data-mode="running"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32%;
  height: 2px;
  background: var(--blue);
  animation: composerProgress 1.8s ease-in-out infinite alternate;
}

#composer[data-mode="running"] .composer-contextbar {
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5eaf5;
}

#composer[data-mode="running"] .composer-mode-dot {
  animation: textPulse 1.3s ease-in-out infinite;
}

#composer[data-mode="running"] #main-input {
  min-height: 48px;
}

@keyframes composerProgress {
  from { transform: translateX(-20%); }
  to { transform: translateX(245%); }
}

#tpl-chips {
  margin-bottom: 7px;
}

.tpl-chip {
  min-height: 24px;
  padding: 2px 9px;
  border: 0;
  color: var(--muted);
  background: #f1f3f2;
  font-size: 10.5px;
}

.tpl-chip:hover {
  border: 0;
  color: var(--ink);
  background: #e8ebea;
}

.composer-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 10px;
}

.thinking-depth {
  appearance: none;
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 8px;
  background: var(--panel, #fff);
  color: var(--text, #333);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

/* 流式文件编辑卡片:大 file.write 生成期间实时流入 */
.msg.genfile {
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 10px;
  background: var(--panel, #fff);
  overflow: hidden;
}
.msg.genfile .genfile-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-dim, #777);
  border-bottom: 1px dashed var(--line, #e2e2e2);
}
.msg.genfile .genfile-path { font-weight: 600; color: var(--text, #333); }
.msg.genfile .genfile-body {
  margin: 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  font: 12px/1.5 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text, #333);
}
.msg.genfile.done .genfile-head::after { content: "已提交执行"; color: var(--ok, #2e7d32); }

/* 思考过程卡片(reasoning 增量流入,可折叠) */
.msg.thinking .think-details { border: 1px dashed var(--line, #d8d8d8); border-radius: 10px; background: var(--panel-alt, #fafafa); }
.msg.thinking .think-head {
  cursor: pointer; user-select: none; list-style: none;
  padding: 7px 12px; font-size: 12px; color: var(--text-dim, #888);
}
.msg.thinking .think-head::before { content: "🧠 "; }
.msg.thinking .think-body {
  margin: 0; padding: 4px 12px 10px; max-height: 260px; overflow: auto;
  font: 12px/1.55 ui-monospace, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
  color: var(--text-dim, #777);
}
.msg.thinking details:not([open]) .think-body { display: none; }

/* 任务计划 Todo 清单 */
.card.plan .todo { list-style: none; margin: 6px 0 0; padding: 0; }
.card.plan .todo li { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; align-items: baseline; }
.card.plan .todo li .tick { flex: 0 0 16px; text-align: center; color: var(--text-dim, #999); }
.card.plan .todo li.done { color: var(--text-dim, #999); text-decoration: line-through; }
.card.plan .todo li.done .tick { color: var(--ok, #2e7d32); }
.card.plan .todo li.active { font-weight: 600; }
.card.plan .todo li.active .tick { color: var(--accent, #4aa3e0); }

/* 站点发布条 */
.publish-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0; padding: 7px 10px; font-size: 12px;
  border: 1px solid var(--line, #d8d8d8); border-radius: 8px;
  background: var(--panel-alt, #f6faf4); color: var(--text-dim, #666);
}
.publish-bar a { color: var(--accent, #4aa3e0); font-weight: 600; word-break: break-all; }
.publish-bar .tool-command.copy { font-size: 11px; padding: 2px 8px; }

/* composer 媒体附件 chips */
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.attach-chips:empty { display: none; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 8px;
  border: 1px solid var(--line, #d8d8d8); border-radius: 14px;
  background: var(--panel-alt, #f6f8fa); color: var(--text, #333);
}
.attach-chip button {
  border: none; background: none; cursor: pointer;
  color: var(--text-dim, #999); font-size: 13px; padding: 0 2px;
}
.attach-chip button:hover { color: var(--danger, #c00); }

#main-input {
  min-height: 62px;
  max-height: 180px;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  font-size: 14px;
}

#main-input:focus {
  outline: 0;
}

.submit-task {
  min-width: 92px;
  min-height: 40px;
  margin-bottom: 4px;
  border-radius: 9px;
}

.composer-foot {
  display: flex;
  min-height: 28px;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
}

#composer details {
  position: relative;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
}

#composer details summary {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #e0e4e1;
  border-radius: 7px;
  color: var(--muted);
  background: #fafbfa;
  font-size: 10.5px;
  list-style: none;
}

#composer details summary::-webkit-details-marker {
  display: none;
}

#composer details[open] {
  width: 100%;
}

#composer details[open] summary {
  margin-bottom: 10px;
  color: var(--ink);
  background: #f1f3f2;
}

#composer details[open] + #composer-hint {
  display: none;
}

.adv-grid {
  width: min(760px, calc(100vw - 80px));
  max-height: min(360px, 46vh);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f9f8;
}

#composer-hint {
  min-width: 0;
  flex: 1;
  align-self: center;
}

#rightbar {
  position: fixed;
  top: var(--workspace-header);
  right: 0;
  bottom: 36px;
  z-index: 55;
  width: min(460px, 92vw);
  transform: translateX(104%);
  border-left: 1px solid var(--line);
  background: #fff;
  box-shadow: -22px 0 60px rgba(22, 32, 28, .16);
  transition: transform .2s ease;
}

#rightbar.open {
  transform: none;
}

.inspector-sheet-head {
  display: flex;
  height: 62px;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--line);
}

.inspector-sheet-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inspector-sheet-head strong {
  font: 650 16px var(--font-display);
}

#rightbar .tabs {
  padding: 7px 10px;
}

#rightbar .pane {
  background: #fff;
}

#panel-backdrop:not(.hidden) {
  display: block !important;
  inset: var(--workspace-header) 0 36px var(--workspace-rail);
  z-index: 50;
}

#drawer-bar {
  height: 36px;
}

#drawer {
  margin-left: var(--workspace-rail);
}

@media (max-width: 900px) {
  #topbar {
    width: 100%;
    height: 58px;
    min-height: 58px;
    margin-left: 0;
    padding-inline: 10px 12px;
  }

  .topbar-brand {
    width: auto;
  }

  .topbar-brand .brand-name,
  .topbar-brand .brand-mode {
    display: none;
  }

  #btn-menu {
    display: inline-flex;
    order: -1;
  }

  .mobile-brand {
    display: inline-flex;
    flex: none;
  }

  .mobile-brand .brand-mark {
    width: 25px;
    height: 25px;
    border-radius: 5px;
  }

  #layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #center {
    grid-column: 1;
  }

  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    width: min(320px, 88vw);
    transform: translateX(-104%);
    box-shadow: 18px 0 52px rgba(21, 33, 29, .15);
    transition: transform .18s ease;
  }

  #sidebar.open {
    transform: none;
  }

  #rightbar {
    top: 58px;
  }

  #panel-backdrop:not(.hidden) {
    inset: 58px 0 36px;
  }

  #drawer {
    margin-left: 0;
  }

  .sidebar-account .user-cluster {
    display: flex !important;
  }

  .sidebar-account #user-label {
    display: block;
  }

  .sidebar-account #btn-admin:not(.hidden) {
    display: inline-flex !important;
  }
}

@media (max-width: 640px) {
  .topbar-runmeta,
  #btn-help,
  .inspector-trigger > span:last-child {
    display: none !important;
  }

  .tb-item {
    max-width: min(48vw, 220px);
  }

  .thread-toolbar {
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
  }

  .workspace-signal,
  #btn-thread-inspector {
    display: none;
  }

  #timeline {
    padding: 20px 14px 24px;
  }

  #timeline::before {
    display: none;
  }

  .tl-hero {
    margin-top: 0;
    padding-left: 0;
  }

  .tl-hero h1 {
    font-size: 26px;
  }

  .hero-signal {
    display: none;
  }

  #center.is-empty {
    justify-content: flex-start;
    padding-top: clamp(68px, 14vh, 112px);
  }

  #center.is-empty #timeline {
    padding: 0 18px;
  }

  #center.is-empty #composer {
    width: calc(100% - 24px);
    margin-top: 24px;
  }

  #composer {
    width: calc(100% - 16px);
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .composer-main-row {
    gap: 6px;
  }

  .submit-task {
    min-width: 74px;
  }

  #composer-hint {
    display: none;
  }

  .adv-grid {
    width: calc(100vw - 40px);
    grid-template-columns: 1fr;
  }

  .run-overview-main {
    padding: 2px 0 18px;
  }

  .run-overview h1 {
    padding-right: 0;
    font-size: 21px;
  }

  .run-overview-actions {
    position: static;
    margin-top: 14px;
  }

  .run-phases li {
    gap: 5px;
  }

  .run-phases li b {
    font-size: 9px;
  }

  .run-phases li::after {
    right: 6px;
    left: 27px;
  }

  #run-process-body {
    padding-left: 24px;
  }

  #run-process-body::before {
    left: 7px;
  }

  #run-process-body .msg.assistant::before,
  #run-process-body .card::before {
    left: -23px;
  }

  .delivery-heading {
    padding-right: 0;
  }

  .delivery-duration {
    position: static;
    display: block;
    margin-top: 7px;
  }

  .delivery-ledger span {
    padding-right: 8px;
    font-size: 9px;
  }

  .delivery-ledger span + span {
    padding-left: 8px;
  }

  .composer-contextbar {
    gap: 6px;
  }

  #composer-context {
    max-width: 42vw;
  }

  .msg.assistant,
  .card,
  .sys {
    padding-left: 10px;
  }
}

/* 自动审批标记 */
.auto-ap { color: var(--warn); margin-left: 4px; }

/* ========================================================================== */
/* 产品化:技能面板 / Run 内技能与合规 / 产物分类与 QA / 场景入口 / 结果页重排  */
/* ========================================================================== */

/* ---- 侧栏技能入口 ---- */
.nav-skills-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  justify-content: flex-start;
}

/* ---- 技能面板(全屏视图,复用运营台骨架) ---- */
#skills-view header,
.skills-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
#skills-view h1 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 16px;
}
#skills-body {
  flex: 1;
  overflow: auto;
  padding: 16px 18px 32px;
  display: grid;
  gap: 10px;
  align-content: start;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
.skill-import {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  flex: none;
}
.skill-import select { width: auto; min-width: 210px; }
.skill-err { color: var(--err); font-size: 12.5px; }

.skill-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px 14px;
}
.skill-head { display: flex; align-items: center; gap: 8px; }
.skill-head .spacer { flex: 1; }
.skill-name { font-weight: 600; font-size: 14px; }
.skill-ver { font-size: 12px; }
.skill-status {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 18px;
}
.skill-status.enabled { color: var(--ok); background: var(--ok-soft); }
.skill-status.disabled { color: var(--muted); background: var(--surface-strong); }
.skill-status.bad { color: var(--err); background: var(--err-soft); }
.skill-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 12px;
}
.skill-scope {
  padding: 0 6px;
  border-radius: 4px;
  color: var(--accent);
  background: var(--accent-soft);
}
.skill-reason { margin-top: 6px; color: var(--err); font-size: 12.5px; }
.skill-desc { margin-top: 6px; font-size: 13px; color: var(--muted); }
.skill-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.skill-detail .skill-desc { color: var(--ink); }
.skill-block { margin-top: 8px; font-size: 13px; }
.skill-block-t {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}
.skill-tool {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  font-size: 12px;
}
.perm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
}
.perm-list li { display: inline-flex; align-items: center; gap: 5px; }
.perm-list li.yes span { color: var(--ok); }
.perm-list li.no { color: var(--muted-2); }
.perm-list li.no { opacity: .75; }
.skill-meta { margin-top: 10px; font-size: 12.5px; }
.skill-meta summary { cursor: pointer; color: var(--muted); }
.skill-meta-json {
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
  padding: 9px;
  border-radius: 5px;
  color: var(--code-fg);
  background: var(--code);
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---- Run 内:技能使用卡片 / 合规警示条 ---- */
.card.skill-use {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-left: 3px solid var(--violet);
  font-size: 13px;
}
.skill-use-ico { color: var(--violet); }
.compliance-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 8px 0;
  padding: 9px 12px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-soft);
  font-size: 12.5px;
}
.compliance-banner .cb-ico { color: var(--warn); }
.compliance-banner .cb-main { display: flex; flex-direction: column; gap: 2px; }

/* ---- 产物:分类图标 / 分组 / QA 徽标 ---- */
.art-group {
  margin: 12px 0 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.art-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}
.art-k-Word { color: var(--blue); background: var(--blue-soft); }
.art-k-Excel { color: var(--ok); background: var(--ok-soft); }
.art-k-PowerPoint { color: var(--warn); background: var(--warn-soft); }
.art-k-PDF { color: var(--err); background: var(--err-soft); }
.art-k-Image { color: var(--violet); background: var(--violet-soft); }
.art-k-Log { color: var(--muted); background: var(--surface-strong); }
.art-k-Other { color: var(--muted); background: var(--surface-strong); }
.pane .art,
.art-row { align-items: center; }
.art-main {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  flex: 1;
}
.pane .art .art-main { display: flex; }
.art-name { font-weight: 500; word-break: break-all; }
.art-sub { flex-basis: 100%; font-size: 11.5px; }
.art-kind { font-size: 11px; }
.art-skill {
  padding: 0 6px;
  border-radius: 4px;
  color: var(--violet);
  background: var(--violet-soft);
  font-size: 11px;
}
.qa-badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.qa-badge.qa-pass { color: var(--ok); background: var(--ok-soft); }
.qa-badge.qa-warn { color: var(--warn); background: var(--warn-soft); }
.qa-badge.qa-fail { color: var(--err); background: var(--err-soft); }
.qa-badge.qa-none { color: var(--muted); background: var(--surface-strong); }

/* ---- 首页场景入口 ---- */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 18px;
}
.scenario-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: left;
  min-height: 0;
}
.scenario-card:hover { border-color: var(--accent); }
.scenario-card .sc-glyph { color: var(--accent); font-size: 15px; }
.scenario-card .sc-title { font-weight: 600; font-size: 13px; }
.scenario-card .sc-sub { font-size: 11.5px; }

/* ---- 结果页重排 ---- */
.final-sec { margin-top: 16px; }
.final-sec-t {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.final-sec-b { font-size: 13px; }
.final-skill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.final-skill-row:last-child { border-bottom: 0; }
.final-skill-row .grow { flex: 1; }
.final-details { margin-top: 14px; font-size: 13px; }
.final-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.final-details-b {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}