:root {
  color-scheme: dark;
  --bg: #070b10;
  --ink: #f3f6fb;
  --muted: #8b98aa;
  --panel: #0b1016;
  --line: #1b2530;
  --accent: #f0a000;
  --accent-dark: #f5b000;
  --accent-soft: rgba(240, 160, 0, 0.14);
  --danger: #b23b3b;
  --warn: #ad7118;
  --shadow: none;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

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

.mention-textarea-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.mention-textarea-highlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  font: inherit;
  line-height: inherit;
  border: 1px solid transparent;
  border-radius: inherit;
}

.mention-textarea-highlight mark {
  background: transparent;
  color: #5fd3ff;
}

.mention-textarea-wrap textarea {
  position: relative;
  z-index: 1;
  background: transparent !important;
  caret-color: #f5f7ff;
  color: transparent !important;
}

.mention-textarea-wrap textarea::placeholder {
  color: rgba(202, 212, 225, 0.54);
}

.mention-textarea-wrap textarea::selection {
  background: rgba(95, 211, 255, 0.28);
}

button {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  padding: 0 16px;
  background: #0b1118;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.workspace {
  min-height: 100vh;
  padding: 24px;
}

.model-sidebar {
  min-height: 100vh;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: #05090e;
}

.sidebar-brand {
  margin: 2px 4px 18px;
  color: #7f8ea3;
  font-size: 12px;
}

.model-menu {
  display: grid;
  gap: 8px;
}

.model-menu-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: #dce6f4;
  text-align: left;
}

.model-menu-item b {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-menu-item span {
  color: #9baabe;
  font-size: 16px;
}

.model-menu-item em {
  padding: 2px 8px;
  border-radius: 6px;
  background: #111a25;
  color: #7d8ea2;
  font-size: 11px;
  font-style: normal;
}

.model-menu-item.active {
  border-color: rgba(240, 160, 0, 0.45);
  background: rgba(240, 160, 0, 0.12);
  color: #f5b000;
}

.model-menu-item.active span,
.model-menu-item.active em {
  color: #f5b000;
}

.model-menu-item:disabled {
  opacity: 1;
  cursor: default;
}

.sidebar-tools {
  display: grid;
  gap: 10px;
  margin: 22px 4px 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.canvas-open-button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(240, 160, 0, 0.55);
  border-radius: 8px;
  border-color: rgba(240, 160, 0, 0.55);
  background: rgba(240, 160, 0, 0.08);
  color: #f5b000;
  text-align: left;
  text-decoration: none;
}

.canvas-open-button span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(240, 160, 0, 0.16);
  font-size: 18px;
  line-height: 1;
}

.canvas-open-button b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-open-button.active {
  border-color: #f0a000;
  background: rgba(240, 160, 0, 0.18);
}

.smart-canvas-open-button {
  border-color: rgba(83, 255, 213, 0.42);
  background: rgba(83, 255, 213, 0.08);
  color: #a8ffed;
}

.smart-canvas-open-button span {
  background: rgba(83, 255, 213, 0.14);
  font-size: 13px;
}

.canvas-board-list {
  display: grid;
  gap: 8px;
}

.canvas-board-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #cad4e1;
  text-align: left;
  font-weight: 700;
}

.canvas-board-item:hover,
.canvas-board-item.active {
  border-color: rgba(240, 160, 0, 0.56);
  background: rgba(240, 160, 0, 0.12);
  color: #f5b000;
}

.back-form-link,
.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1118;
  color: #cad4e1;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.back-form-link:hover,
.ghost-link:hover {
  border-color: var(--accent);
  color: #f5b000;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 520px);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.script-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 12px 0 0;
  padding: 2px 9px;
  border: 1px solid rgba(178, 59, 59, 0.35);
  border-radius: 8px;
  background: rgba(178, 59, 59, 0.12);
  color: #ffb2b2;
  font-size: 12px;
  font-weight: 700;
}

.script-status.ok {
  border-color: rgba(29, 139, 108, 0.4);
  background: rgba(29, 139, 108, 0.14);
  color: #8ee6c6;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
}

h2 {
  font-size: 16px;
}

.key-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1016;
  box-shadow: var(--shadow);
}

.key-panel label,
.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.key-row,
.task-search,
.actions,
.section-title {
  display: flex;
  gap: 10px;
  align-items: center;
}

.key-row input,
.task-search input {
  flex: 1;
}

.key-status {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.key-status.ok {
  color: var(--accent-dark);
  font-weight: 700;
}

.key-status.bad {
  color: var(--danger);
  font-weight: 700;
}

.api-config {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  margin-top: 12px;
}

.api-config label {
  margin: 0;
}

.api-config input,
.api-config select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #070b10;
  color: var(--ink);
  outline: none;
}

.api-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.icon-button {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(360px, 1fr);
  gap: 24px;
  align-items: start;
}

.canvas-page {
  overflow: hidden;
  background: #05070b;
}

.canvas-page .canvas-app-shell {
  display: block;
  min-height: 100vh;
}

.canvas-only-workspace {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

.canvas-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: #0b1016;
}

.canvas-page-note {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1016;
}

.canvas-toolbar h2 {
  margin: 0 0 5px;
}

.canvas-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

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

.canvas-zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(240, 160, 0, 0.34);
  border-radius: 8px;
  background: rgba(240, 160, 0, 0.08);
  color: #f5b000;
  font-weight: 800;
}

.canvas-workspace {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
}

.canvas-layout {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 720px;
}

.canvas-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 720px;
  background-color: #070b10;
  background-image:
    linear-gradient(rgba(40, 55, 76, var(--canvas-grid-line-alpha, 0.22)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 55, 76, var(--canvas-grid-line-alpha, 0.22)) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(151, 166, 188, var(--canvas-grid-dot-alpha, 0.28)) 1px, transparent 0);
  background-position:
    var(--canvas-offset-x, 0) var(--canvas-offset-y, 0),
    var(--canvas-offset-x, 0) var(--canvas-offset-y, 0),
    var(--canvas-offset-x, 0) var(--canvas-offset-y, 0);
  background-size:
    calc(96px * var(--canvas-grid-scale, 1)) calc(96px * var(--canvas-grid-scale, 1)),
    calc(96px * var(--canvas-grid-scale, 1)) calc(96px * var(--canvas-grid-scale, 1)),
    calc(18px * var(--canvas-grid-scale, 1)) calc(18px * var(--canvas-grid-scale, 1));
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.canvas-floating-bar {
  position: absolute;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(120, 138, 160, 0.16);
  border-radius: 18px;
  background: rgba(7, 8, 12, 0.78);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.canvas-project-bar {
  left: 16px;
  top: 16px;
  gap: 8px;
  min-height: 50px;
  padding: 0 10px;
  border-radius: 22px;
}

.canvas-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f6f8fb;
  text-decoration: none;
}

.canvas-brand-mark span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(240, 160, 0, 0.12);
  color: #ff8a1c;
  font-weight: 1000;
}

.canvas-brand-mark b {
  font-size: 16px;
  font-weight: 1000;
}

.canvas-project-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  min-height: 34px;
  padding: 0 12px;
  border-left: 1px solid rgba(120, 138, 160, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(238, 244, 255, 0.9);
}

.canvas-project-pill i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff8a1c;
  box-shadow: 0 0 16px rgba(255, 138, 28, 0.75);
}

.canvas-project-pill strong {
  overflow: hidden;
  max-width: 130px;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
}

.canvas-project-name-input {
  width: 130px;
  height: 24px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f7ff;
  font-size: 13px;
  font-weight: 900;
}

.canvas-floating-icon {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(238, 244, 255, 0.86);
  font-size: 20px;
}

.canvas-board-toggle {
  font-size: 18px;
}

.canvas-board-toggle.active {
  border-color: rgba(240, 160, 0, 0.4);
  background: rgba(240, 160, 0, 0.1);
  color: #f5b000;
}

.canvas-board-list-floating {
  position: absolute;
  left: 180px;
  top: calc(100% + 8px);
  display: grid;
  gap: 8px;
  width: 260px;
  max-height: min(420px, calc(100vh - 88px));
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 16px;
  background: rgba(13, 14, 20, 0.96);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.canvas-board-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #8f9cae;
  font-size: 12px;
}

.canvas-board-popover-head button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #d7deea;
  font-size: 12px;
}

.canvas-board-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: center;
  border-radius: 10px;
}

.canvas-board-row.active .canvas-board-item {
  color: #f4f7ff;
}

.canvas-board-row.active .canvas-board-item::before {
  opacity: 1;
}

.canvas-board-list-floating .canvas-board-item {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 4px 8px 4px 14px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(238, 244, 255, 0.86);
  text-align: left;
}

.canvas-board-list-floating .canvas-board-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff8a1c;
  opacity: 0;
  box-shadow: 0 0 14px rgba(255, 138, 28, 0.6);
}

.canvas-board-list-floating .canvas-board-item strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-board-list-floating .canvas-board-item span {
  color: #8f9cae;
  font-size: 12px;
}

.canvas-board-delete {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(198, 207, 221, 0.7);
  font-size: 16px;
}

.canvas-board-delete:hover:not(:disabled) {
  border-color: rgba(178, 59, 59, 0.55);
  color: #ff8c8c;
}

.canvas-action-bar {
  top: 16px;
  right: 16px;
  gap: 6px;
  padding: 6px;
}

.canvas-action-bar button,
.canvas-action-bar .ghost-link {
  min-height: 34px;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
  color: rgba(238, 244, 255, 0.86);
  font-size: 13px;
}

.canvas-action-bar button:hover,
.canvas-action-bar .ghost-link:hover {
  border-color: rgba(120, 138, 160, 0.18);
  background: rgba(255, 255, 255, 0.05);
  transform: none;
}

.canvas-action-bar .canvas-smart-action {
  border-color: rgba(215, 90, 255, 0.32);
  background: rgba(160, 66, 210, 0.5);
  color: #fff2ff;
}

.canvas-action-bar .canvas-factory-action {
  border-color: rgba(178, 59, 59, 0.28);
  color: rgba(255, 214, 214, 0.92);
}

.canvas-action-bar .canvas-factory-action[data-confirming="1"] {
  border-color: rgba(255, 88, 88, 0.7);
  background: rgba(178, 59, 59, 0.32);
  color: #ffeaea;
}

.canvas-tool-rail,
.canvas-utility-rail {
  position: absolute;
  z-index: 30;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(120, 138, 160, 0.14);
  border-radius: 18px;
  background: rgba(7, 8, 12, 0.76);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.canvas-tool-rail {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.canvas-utility-rail {
  right: 16px;
  bottom: 16px;
}

.canvas-tool-rail button,
.canvas-utility-rail button {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(218, 226, 240, 0.72);
  font-size: 13px;
  font-weight: 900;
}

.canvas-tool-rail button:hover,
.canvas-utility-rail button:hover {
  border-color: rgba(120, 138, 160, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #f5b000;
  transform: none;
}

.history-clock-icon {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.history-clock-icon::before,
.history-clock-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 0;
}

.history-clock-icon::before {
  height: 6px;
  transform: translate(-50%, -1px) rotate(180deg);
}

.history-clock-icon::after {
  height: 5px;
  transform: translate(-50%, -1px) rotate(125deg);
}

.canvas-tool-rail [data-open-ai-workspace] {
  background: rgba(255, 255, 255, 0.06);
  color: #f3f6fb;
}

#addCanvasPlainText {
  background: rgba(240, 160, 0, 0.1);
  color: #ffd86a;
}

#toggleAssetLibrary {
  background: rgba(83, 255, 213, 0.08);
  color: #a8ffed;
}

.canvas-utility-rail .canvas-zoom {
  min-width: 42px;
  min-height: 30px;
  padding: 0 7px;
  border-color: rgba(120, 138, 160, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(238, 244, 255, 0.72);
  font-size: 12px;
}

.canvas-utility-rail button.has-error {
  border-color: rgba(255, 97, 97, 0.5);
  background: rgba(116, 27, 37, 0.45);
  color: #ffd6d6;
}

.transport-log-panel,
.history-panel {
  position: absolute;
  right: 76px;
  bottom: 16px;
  z-index: 32;
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - 112px));
  height: min(72vh, 680px);
  max-height: calc(100vh - 32px);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(240, 160, 0, 0.34);
  border-radius: 16px;
  background: rgba(7, 9, 13, 0.96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
}

.history-panel {
  width: min(620px, calc(100vw - 112px));
}

.transport-log-panel[hidden],
.history-panel[hidden] {
  display: none;
}

.customer-settings-panel {
  position: absolute;
  right: 76px;
  bottom: 16px;
  z-index: 34;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(640px, calc(100vw - 112px));
  height: min(68vh, 520px);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 16px;
  background: rgba(7, 9, 13, 0.96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
}

.customer-settings-panel[hidden] {
  display: none;
}

.customer-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.16);
}

.customer-settings-head div {
  display: grid;
  gap: 4px;
}

.customer-settings-head span {
  color: #53ffd5;
  font-size: 12px;
  font-weight: 1000;
}

.customer-settings-head strong {
  color: #f5f7ff;
  font-size: 19px;
}

.customer-settings-head button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 10px;
  border-color: rgba(120, 138, 160, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.customer-settings-body {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  min-height: 0;
}

.customer-settings-nav {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border-right: 1px solid rgba(120, 138, 160, 0.14);
  background: rgba(255, 255, 255, 0.018);
}

.customer-settings-nav button {
  width: 100%;
  min-height: 40px;
  justify-content: start;
  padding: 0 12px;
  border-radius: 10px;
  border-color: rgba(120, 138, 160, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 241, 255, 0.82);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.customer-settings-nav button:hover,
.customer-settings-nav button.active {
  border-color: rgba(245, 176, 0, 0.58);
  background: rgba(245, 176, 0, 0.12);
  color: #fff3ce;
}

.customer-settings-content {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.customer-settings-form {
  display: grid;
  gap: 14px;
}

.customer-settings-field {
  display: grid;
  gap: 8px;
}

.customer-settings-field span {
  color: rgba(238, 244, 255, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.customer-settings-field small {
  color: rgba(173, 187, 211, 0.78);
  font-size: 11px;
  line-height: 1.5;
}

.customer-settings-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 10px;
  background: rgba(6, 10, 14, 0.82);
  color: #eef4ff;
  outline: none;
}

.customer-settings-field input:focus {
  border-color: rgba(83, 255, 213, 0.48);
  box-shadow: 0 0 0 3px rgba(83, 255, 213, 0.08);
}

.customer-settings-field input[readonly] {
  cursor: default;
  color: rgba(226, 238, 255, 0.86);
}

.customer-storage-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.customer-storage-picker button {
  min-height: 42px;
  padding: 0 14px;
  white-space: nowrap;
  border-color: rgba(120, 138, 160, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(235, 241, 255, 0.86);
  font-weight: 900;
}

.customer-update-summary {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.customer-update-summary strong {
  color: rgba(238, 244, 255, 0.88);
  font-size: 12px;
}

.customer-update-summary code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d7e7ff;
  font-size: 12px;
}

.customer-update-summary small {
  color: rgba(173, 187, 211, 0.78);
  line-height: 1.5;
}

.customer-update-list {
  display: grid;
  gap: 10px;
}

.customer-update-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(4, 8, 12, 0.52);
}

.customer-update-card strong,
.customer-update-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-update-card strong {
  color: #f3f8ff;
  font-size: 13px;
}

.customer-update-card span {
  margin-top: 4px;
  color: rgba(173, 187, 211, 0.76);
  font-size: 11px;
}

.customer-update-card button {
  min-height: 34px;
  padding: 0 14px;
  border-color: rgba(245, 176, 0, 0.45);
  background: rgba(245, 176, 0, 0.13);
  color: #ffe6a6;
  font-weight: 900;
}

.customer-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.customer-settings-actions button {
  min-height: 36px;
  padding: 0 18px;
  border-color: rgba(145, 84, 255, 0.42);
  background: rgba(145, 84, 255, 0.18);
  color: #f2eaff;
  font-weight: 900;
}

.customer-settings-actions button.secondary {
  border-color: rgba(120, 138, 160, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(235, 241, 255, 0.82);
}

.customer-settings-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.customer-settings-status {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(83, 255, 213, 0.18);
  border-radius: 10px;
  background: rgba(83, 255, 213, 0.06);
  color: rgba(220, 255, 247, 0.86);
  font-size: 12px;
}

.customer-settings-status.warning {
  border-color: rgba(245, 176, 0, 0.32);
  background: rgba(245, 176, 0, 0.08);
  color: rgba(255, 230, 166, 0.92);
}

.customer-settings-empty {
  min-height: 220px;
  border: 1px dashed rgba(120, 138, 160, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.smart-canvas-panel {
  position: absolute;
  left: 92px;
  bottom: 28px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - 116px));
  max-height: min(76vh, 680px);
  overflow: hidden;
  border: 1px solid rgba(83, 255, 213, 0.28);
  border-radius: 16px;
  background: rgba(7, 9, 13, 0.96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
}

.smart-canvas-panel[hidden] {
  display: none;
}

.smart-canvas-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.16);
}

.smart-canvas-head div {
  display: grid;
  gap: 4px;
}

.smart-canvas-head span {
  color: #53ffd5;
  font-size: 12px;
  font-weight: 1000;
}

.smart-canvas-head strong {
  color: #f5f7ff;
  font-size: 20px;
}

.smart-canvas-head button {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 10px;
  border-color: rgba(120, 138, 160, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.smart-canvas-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 16px;
}

.smart-canvas-body p,
.smart-canvas-body small,
.smart-canvas-body li {
  margin: 0;
  color: rgba(202, 212, 225, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.smart-canvas-body textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 10px;
  background: rgba(6, 10, 14, 0.82);
  color: #eef4ff;
  padding: 12px;
  outline: none;
}

.smart-canvas-body textarea:focus {
  border-color: rgba(83, 255, 213, 0.58);
}

.smart-canvas-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.smart-canvas-actions button {
  min-height: 36px;
  border-color: rgba(83, 255, 213, 0.34);
  background: rgba(83, 255, 213, 0.1);
  color: #a8ffed;
  font-weight: 900;
}

.smart-canvas-actions button.secondary {
  border-color: rgba(120, 138, 160, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(235, 241, 255, 0.88);
}

.smart-canvas-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.smart-canvas-plan {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(120, 138, 160, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.smart-canvas-plan.empty {
  border-style: dashed;
}

.smart-canvas-plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.smart-canvas-plan-title strong,
.smart-canvas-plan > strong {
  color: #f5f7ff;
  font-size: 13px;
}

.smart-canvas-plan-title span {
  color: rgba(202, 212, 225, 0.58);
  font-size: 11px;
}

.smart-canvas-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.smart-canvas-plan-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(120, 138, 160, 0.14);
  border-radius: 8px;
  background: rgba(6, 10, 14, 0.64);
}

.smart-canvas-plan-card b {
  color: #a8ffed;
  font-size: 12px;
}

.smart-canvas-analysis {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(83, 255, 213, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(238, 244, 255, 0.88);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.smart-canvas-body ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 12px 12px 28px;
  border: 1px solid rgba(120, 138, 160, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.asset-library-panel {
  position: absolute;
  left: 98px;
  top: 28px;
  z-index: 36;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 116px));
  height: min(880px, calc(100vh - 56px));
  max-height: calc(100vh - 42px);
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 16px;
  background: rgba(8, 10, 15, 0.96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(18px);
}

.asset-library-panel.is-resizing {
  user-select: none;
}

.asset-library-panel[hidden] {
  display: none;
}

.asset-library-resize {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(135deg, transparent 50%, rgba(83, 255, 213, 0.55) 50%) right bottom / 11px 11px no-repeat,
    rgba(255, 255, 255, 0.05);
  cursor: nwse-resize;
  touch-action: none;
}

.asset-library-resize:hover {
  background:
    linear-gradient(135deg, transparent 50%, rgba(83, 255, 213, 0.9) 50%) right bottom / 11px 11px no-repeat,
    rgba(83, 255, 213, 0.12);
}

.asset-library-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 12px;
}

.asset-library-head div {
  display: grid;
  gap: 4px;
}

.asset-library-head span {
  color: #53ffd5;
  font-size: 12px;
  font-weight: 1000;
}

.asset-library-head strong {
  color: #f5f7ff;
  font-size: 20px;
}

.asset-library-head button {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(238, 244, 255, 0.72);
}

.asset-library-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 14px 10px;
}

.asset-library-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.asset-library-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 12px;
}

.asset-library-view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border-color: rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(238, 244, 255, 0.72);
  font-size: 13px;
  font-weight: 1000;
}

.asset-library-view-tabs button.active {
  border-color: rgba(83, 255, 213, 0.44);
  background: rgba(32, 148, 124, 0.2);
  color: #a8ffed;
}

.asset-library-view-tabs em {
  color: inherit;
  font-style: normal;
}

.asset-library-search {
  position: relative;
  display: grid;
}

.asset-library-search span {
  position: absolute;
  left: 12px;
  top: 50%;
  color: rgba(202, 212, 225, 0.55);
  font-size: 12px;
  transform: translateY(-50%);
}

.asset-library-search input {
  min-height: 36px;
  padding: 0 10px 0 44px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(4, 7, 11, 0.74);
  color: #eef4ff;
}

.asset-library-tools button,
.asset-library-import button,
.asset-card-actions button {
  min-height: 34px;
  padding: 0 12px;
  border-color: rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(238, 244, 255, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.asset-library-tool-actions button {
  flex: 1 1 78px;
}

.asset-library-tools button:first-of-type,
.asset-card-actions button:first-child {
  border-color: rgba(83, 255, 213, 0.28);
  background: rgba(32, 148, 124, 0.18);
  color: #a8ffed;
}

.asset-library-import {
  display: grid;
  gap: 8px;
  padding: 0 14px 10px;
}

.asset-library-import[hidden] {
  display: none;
}

.asset-library-import textarea {
  width: 100%;
  min-height: 86px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(4, 7, 11, 0.78);
  color: #eef4ff;
  resize: vertical;
}

.asset-library-import div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.asset-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 10px;
}

.asset-library-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  border-color: rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(238, 244, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.asset-library-tabs button.active {
  border-color: rgba(83, 255, 213, 0.38);
  background: rgba(32, 148, 124, 0.22);
  color: #a8ffed;
}

.asset-library-tabs em {
  color: inherit;
  font-style: normal;
}

.asset-library-status {
  margin: 0 14px 10px;
  padding: 9px 10px;
  border: 1px solid rgba(83, 255, 213, 0.18);
  border-radius: 10px;
  background: rgba(32, 148, 124, 0.1);
  color: rgba(218, 255, 247, 0.78);
  font-size: 12px;
}

.asset-library-drop-tip {
  margin: 0 14px 8px;
  padding: 8px 10px;
  border: 1px dashed rgba(120, 138, 160, 0.24);
  border-radius: 10px;
  color: rgba(202, 212, 225, 0.58);
  font-size: 12px;
  text-align: center;
}

.asset-library-drop-tip[hidden] {
  display: none;
}

.asset-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  grid-auto-rows: 150px;
  align-content: start;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 18px;
}

.asset-library-empty {
  margin: 0;
  padding: 28px 10px;
  color: rgba(202, 212, 225, 0.56);
  text-align: center;
  font-size: 13px;
}

.asset-library-panel .asset-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 150px;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #eef4ff;
  cursor: grab;
}

.asset-library-panel .asset-card.selected {
  border-color: rgba(83, 255, 213, 0.78);
  background: rgba(32, 148, 124, 0.16);
  box-shadow: 0 0 0 1px rgba(83, 255, 213, 0.2) inset;
}

.asset-library-panel .asset-card.selected::after {
  content: "已选";
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(12, 108, 91, 0.88);
  color: #dcfff8;
  font-size: 10px;
  font-weight: 900;
}

.asset-library-panel .asset-card:active {
  cursor: grabbing;
}

.asset-library-panel .asset-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 116px;
  min-height: 116px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.34);
}

.asset-library-panel .asset-card-preview img,
.asset-library-panel .asset-card-preview video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
  border-radius: 0;
}

.asset-library-panel .asset-card-preview img,
.asset-library-panel .asset-card-preview video,
.asset-library-panel .asset-card-preview audio {
  pointer-events: none;
}

.canvas-app-shell img,
.canvas-app-shell video,
.canvas-app-shell audio,
.ai-workspace-panel img,
.ai-workspace-panel video,
.ai-workspace-panel audio,
.asset-library-panel img,
.asset-library-panel video,
.asset-library-panel audio,
.history-panel img,
.history-panel video,
.history-panel audio {
  -webkit-user-drag: none;
  user-drag: none;
}

.asset-library-panel .asset-card-video-preview,
.asset-library-panel .asset-card-audio-preview {
  cursor: grab;
}

.asset-library-panel .asset-card-video-preview:active,
.asset-library-panel .asset-card-audio-preview:active {
  cursor: grabbing;
}

.asset-library-panel .asset-card-video-preview video {
  height: 100%;
}

.asset-library-panel .asset-card-audio-preview {
  height: 116px;
  min-height: 116px;
  padding: 12px;
}

.asset-library-panel .asset-card-audio-preview audio {
  width: 100%;
}

.asset-card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(5, 8, 12, 0.72);
  color: rgba(245, 247, 255, 0.86);
  font-size: 16px;
  line-height: 1;
}

.asset-card-delete:hover {
  border-color: rgba(255, 92, 122, 0.5);
  background: rgba(122, 24, 42, 0.8);
  color: #fff;
}

.asset-video-mark,
.asset-audio-mark {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #f5f7ff;
  font-size: 12px;
  font-weight: 900;
}

.asset-library-panel .asset-card-body {
  display: grid;
  gap: 0;
  min-height: 34px;
  padding: 7px;
  border-top: 1px solid rgba(120, 138, 160, 0.12);
  background: rgba(4, 7, 11, 0.45);
}

.asset-library-panel .asset-card-body b,
.asset-library-panel .asset-card-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-library-panel .asset-card-body b {
  color: #f4f7ff;
  font-size: 12px;
  line-height: 1.35;
}

.asset-library-panel .asset-card-body span,
.asset-library-panel .asset-card-body small,
.asset-library-panel .asset-card-body p {
  color: rgba(202, 212, 225, 0.62);
  font-size: 11px;
}

.asset-card-body p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.45;
}

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

.asset-tags em {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(83, 255, 213, 0.1);
  color: #a8ffed;
  font-style: normal;
  font-size: 11px;
}

.asset-library-panel .asset-card-actions {
  display: flex;
  gap: 6px;
  padding: 0 7px 7px;
}

.asset-library-panel .asset-card-actions button {
  flex: 1;
  min-height: 28px;
  padding: 0 7px;
  font-size: 11px;
}

.global-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.14);
}

.global-log-head div {
  display: grid;
  gap: 4px;
}

.global-log-head .global-log-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.global-log-head span {
  color: #ffd56d;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.global-log-head strong {
  color: #f4f7ff;
  font-size: 18px;
}

.global-log-head button {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(238, 244, 255, 0.72);
}

.global-log-head button:disabled {
  cursor: default;
  opacity: 0.42;
}

.global-log-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
}

.global-log-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-color: rgba(120, 138, 160, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(238, 244, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
}

.global-log-tabs button.active {
  border-color: rgba(245, 176, 0, 0.55);
  background: rgba(245, 176, 0, 0.18);
  color: #ffd56d;
}

.global-log-tabs em {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-style: normal;
}

.global-log-body {
  display: grid;
  align-content: start;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 14px;
  overscroll-behavior: contain;
}

.global-log-alert {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 97, 97, 0.4);
  border-radius: 10px;
  background: rgba(116, 27, 37, 0.34);
  color: #ffd6d6;
  font-size: 12px;
  font-weight: 900;
}

.global-transport-log-item {
  cursor: pointer;
}

.transport-log-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
}

.global-log-list {
  display: grid;
  gap: 12px;
  padding-bottom: 8px;
}

.transport-log-date-group {
  display: grid;
  gap: 8px;
}

.transport-log-date-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  background: rgba(7, 9, 13, 0.92);
  color: rgba(238, 244, 255, 0.66);
  font-size: 12px;
}

.transport-log-date-head strong {
  color: #ffd56d;
  font-size: 12px;
}

.transport-log-date-head span {
  color: rgba(202, 212, 225, 0.66);
}

.transport-log-list .transport-log-item {
  margin: 0;
}

.transport-log-history {
  min-height: 0;
}

.global-log-history-list {
  display: grid;
  gap: 8px;
  max-height: min(42vh, 360px);
  overflow: auto;
  padding: 0 0 8px;
  overscroll-behavior: contain;
}

.global-log-history-list .transport-log-item {
  margin: 0 8px;
}

.history-panel-body {
  display: grid;
  align-content: start;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 14px;
  overscroll-behavior: contain;
}

.history-status,
.history-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(120, 138, 160, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(202, 212, 225, 0.74);
  font-size: 13px;
  line-height: 1.5;
}

.history-status {
  border-color: rgba(255, 97, 97, 0.32);
  color: #ffd6d6;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 12px;
}

.history-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.history-card-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.28);
}

.history-card-preview img,
.history-card-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
}

.history-card-body strong {
  overflow: hidden;
  color: #f4f7ff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-card-body span {
  overflow: hidden;
  color: rgba(202, 212, 225, 0.62);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transport-log-item.is-failed {
  border-color: rgba(255, 97, 97, 0.48);
  background: rgba(54, 13, 20, 0.72);
}

.canvas-inspector {
  position: absolute;
  z-index: 24;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: auto;
  max-height: min(58vh, 520px);
  padding: 16px;
  border: 1px solid rgba(120, 138, 160, 0.34);
  border-radius: 10px;
  background: rgba(8, 12, 17, 0.98);
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.canvas-inspector[hidden] {
  display: none;
}

.canvas-inspector.is-dragging-node {
  opacity: 0;
  pointer-events: none;
}

.ai-workspace-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 24;
  display: grid;
  grid-template-rows: 76px 66px minmax(0, 1fr);
  width: 1220px;
  height: 820px;
  overflow: hidden;
  border: 1px solid rgba(122, 139, 164, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(12, 15, 22, 0.96), rgba(6, 9, 14, 0.98));
  box-shadow: 0 24px 82px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(18px);
  user-select: text;
}

.ai-workspace-panel.is-window-dragging,
.ai-workspace-panel.is-scale-dragging {
  user-select: none;
}

.ai-workspace-panel.is-canvas-resource-drag-target {
  border-color: rgba(240, 160, 0, 0.56);
  box-shadow: 0 28px 92px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(240, 160, 0, 0.2);
}

.ai-workspace-panel[hidden] {
  display: none;
}

body.ai-floating-workspace {
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #080a10;
}

body.ai-floating-workspace .canvas-project-bar,
body.ai-floating-workspace .canvas-action-bar,
body.ai-floating-workspace .canvas-tool-rail,
body.ai-floating-workspace .canvas-utility-rail,
body.ai-floating-workspace .asset-library-panel,
body.ai-floating-workspace .customer-settings-panel,
body.ai-floating-workspace .transport-log-panel,
body.ai-floating-workspace .canvas-hint,
body.ai-floating-workspace .canvas-world,
body.ai-floating-workspace .canvas-marquee,
body.ai-floating-workspace .ai-workspace-minimized-layer {
  display: none !important;
}

body.ai-floating-workspace .app-shell,
body.ai-floating-workspace .workspace,
body.ai-floating-workspace .canvas-workspace,
body.ai-floating-workspace .canvas-layout,
body.ai-floating-workspace .canvas-viewport {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.ai-floating-workspace .canvas-viewport {
  background: #080a10;
}

body.ai-floating-workspace .ai-workspace-panel {
  position: fixed;
  inset: 0;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none !important;
}

body.ai-floating-workspace .ai-workspace-head {
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  min-height: 66px;
  padding: 10px 12px 10px 14px;
  background: rgba(5, 8, 13, 0.96);
  -webkit-app-region: drag;
}

body.ai-floating-workspace .ai-workspace-head button {
  -webkit-app-region: no-drag;
}

body.ai-floating-workspace .ai-workspace-scale-handle {
  display: none;
}

body.ai-floating-workspace-mini {
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

body.ai-floating-workspace-mini .canvas-project-bar,
body.ai-floating-workspace-mini .canvas-action-bar,
body.ai-floating-workspace-mini .canvas-tool-rail,
body.ai-floating-workspace-mini .canvas-utility-rail,
body.ai-floating-workspace-mini .asset-library-panel,
body.ai-floating-workspace-mini .customer-settings-panel,
body.ai-floating-workspace-mini .transport-log-panel,
body.ai-floating-workspace-mini .canvas-hint,
body.ai-floating-workspace-mini .canvas-world,
body.ai-floating-workspace-mini .canvas-marquee,
body.ai-floating-workspace-mini .ai-workspace-minimized-layer {
  display: none !important;
}

body.ai-floating-workspace-mini .app-shell,
body.ai-floating-workspace-mini .workspace,
body.ai-floating-workspace-mini .canvas-workspace,
body.ai-floating-workspace-mini .canvas-layout,
body.ai-floating-workspace-mini .canvas-viewport {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.ai-floating-workspace-mini .ai-workspace-mini-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto !important;
  top: auto !important;
  width: 292px !important;
  height: 82px !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
}

body.ai-floating-workspace-mini.is-electron-runtime .ai-workspace-mini-panel {
  left: 7px !important;
  top: 7px !important;
  right: 7px !important;
  bottom: 7px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

.ai-workspace-desktop-mini {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 9px 10px 9px 12px;
  border: 1px solid rgba(181, 104, 255, 0.64);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 19, 32, 0.98), rgba(12, 13, 18, 0.98));
  color: #f5f1ff;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  user-select: none;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-icon,
.ai-workspace-desktop-mini .ai-workspace-minimized-body {
  -webkit-app-region: drag;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(126, 72, 214, 0.34);
  color: #f8b000;
  font-weight: 900;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-body {
  min-width: 0;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-body strong,
.ai-workspace-desktop-mini .ai-workspace-minimized-body span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-body strong {
  font-size: 13px;
  line-height: 17px;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-body span {
  margin-top: 2px;
  font-size: 12px;
  line-height: 15px;
  color: #b7bdd0;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-action {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(143, 168, 208, 0.16);
  border-radius: 10px;
  background: rgba(21, 28, 40, 0.88);
  color: #b8d0ff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.ai-workspace-desktop-mini .ai-workspace-minimized-action:hover {
  border-color: rgba(185, 122, 255, 0.72);
  color: #ffffff;
  background: rgba(95, 54, 147, 0.62);
}

.ai-workspace-minimized-layer {
  position: absolute;
  z-index: 25;
  inset: 0;
  pointer-events: none;
}

.ai-workspace-minimized {
  position: absolute;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 230px;
  min-height: 62px;
  padding: 9px 12px;
  border: 1px solid rgba(160, 96, 220, 0.46);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(32, 22, 46, 0.96), rgba(10, 12, 18, 0.96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  color: #f5f1ff;
  text-align: left;
  backdrop-filter: blur(14px);
  pointer-events: auto;
  user-select: none;
}

.ai-workspace-minimized:hover {
  border-color: rgba(240, 160, 0, 0.72);
  background: linear-gradient(180deg, rgba(48, 30, 64, 0.98), rgba(12, 14, 20, 0.98));
  transform: translateY(-1px);
}

.ai-workspace-minimized.is-dragging {
  cursor: grabbing;
  transform: none;
}

.ai-workspace-minimized-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(180, 86, 215, 0.22);
  color: #f5b000;
  font-size: 18px;
  font-weight: 1000;
}

.ai-workspace-minimized-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-workspace-minimized-body strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-minimized-body span {
  overflow: hidden;
  color: rgba(202, 212, 225, 0.66);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-minimized-action {
  color: rgba(238, 244, 255, 0.64);
  font-size: 18px;
  font-weight: 900;
}

.ai-workspace-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.16);
  background: rgba(5, 8, 13, 0.86);
  cursor: grab;
}

.ai-workspace-panel.is-window-dragging .ai-workspace-head {
  cursor: grabbing;
}

.ai-workspace-scale-handle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 8;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(190, 126, 255, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(245, 241, 255, 0.78) 44% 52%, transparent 54%),
    linear-gradient(135deg, transparent 0 60%, rgba(245, 241, 255, 0.5) 62% 70%, transparent 72%),
    rgba(36, 24, 48, 0.92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  cursor: nwse-resize;
}

.ai-workspace-scale-handle:hover,
.ai-workspace-panel.is-scale-dragging .ai-workspace-scale-handle {
  border-color: rgba(240, 160, 0, 0.72);
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, 0.9) 44% 52%, transparent 54%),
    linear-gradient(135deg, transparent 0 60%, rgba(255, 255, 255, 0.62) 62% 70%, transparent 72%),
    rgba(84, 40, 108, 0.98);
}

.ai-workspace-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ai-workspace-title span {
  color: rgba(186, 157, 255, 0.82);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0;
}

.ai-workspace-title h2 {
  margin: 0;
  color: #f5f1ff;
  font-size: 15px;
  line-height: 1.2;
}

.ai-workspace-title p {
  margin: 0;
  overflow: hidden;
  color: rgba(238, 244, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(120, 138, 160, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.032);
}

.ai-workspace-rail {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 12px 10px 10px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.12);
  background: rgba(255, 255, 255, 0.012);
}

.ai-workspace-rail button {
  display: grid;
  place-items: center;
  justify-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.028);
  color: rgba(238, 244, 255, 0.86);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.ai-workspace-rail button span {
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(238, 244, 255, 0.76);
  font-size: 13px;
  font-weight: 1000;
}

.ai-workspace-rail button b {
  width: 100%;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
}

.ai-workspace-rail button.active {
  border-color: rgba(165, 108, 235, 0.72);
  background: linear-gradient(180deg, rgba(88, 40, 126, 0.72), rgba(58, 29, 84, 0.72));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 0 0 1px rgba(152, 93, 226, 0.08);
}

.ai-workspace-rail button.active span {
  background: rgba(152, 93, 226, 0.2);
  color: #c9b5ff;
}

.ai-workspace-modes button,
.ai-workspace-icon {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  color: rgba(238, 244, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
}

.ai-workspace-modes button {
  padding: 0 12px;
  border-radius: 10px;
}

.ai-workspace-modes button.active {
  background: linear-gradient(180deg, rgba(180, 86, 215, 0.92), rgba(132, 52, 181, 0.88));
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(180, 86, 215, 0.22);
}

.ai-workspace-icon {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid rgba(120, 138, 160, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.032);
  font-size: 18px;
}

.ai-workspace-icon.ai-workspace-danger {
  border-color: rgba(255, 99, 99, 0.24);
  color: rgba(255, 183, 183, 0.84);
}

.ai-workspace-icon.ai-workspace-danger:hover {
  border-color: rgba(255, 99, 99, 0.52);
  background: rgba(255, 72, 72, 0.12);
  color: #ffffff;
}

.ai-scene-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.16);
  background: rgba(7, 10, 15, 0.72);
}

.ai-scene-strip-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #f4f7ff;
  font-size: 13px;
  font-weight: 1000;
}

.ai-scene-add {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(120, 138, 160, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4f7ff;
  font-size: 15px;
  font-weight: 1000;
}

.ai-scene-list {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ai-scene-pill {
  position: relative;
  width: auto;
  min-width: 86px;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.ai-scene-select {
  display: grid;
  align-content: center;
  gap: 0;
  width: 100%;
  min-height: 36px;
  padding: 7px 26px 7px 11px;
  border: 0;
  background: transparent;
  text-align: left;
}

.ai-scene-select:hover {
  transform: none;
}

.ai-scene-select strong {
  color: #f4f7ff;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-scene-name-input {
  width: calc(100% - 36px);
  min-width: 72px;
  height: 26px;
  margin: 5px 28px 5px 8px;
  padding: 0 7px;
  border: 1px solid rgba(240, 160, 0, 0.72);
  border-radius: 6px;
  background: rgba(7, 10, 15, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  outline: none;
}

.ai-scene-select span {
  display: none;
}

.ai-scene-delete {
  position: absolute;
  top: 7px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 8px;
  background: rgba(10, 14, 22, 0.46);
  color: rgba(238, 244, 255, 0.58);
  font-size: 15px;
  font-weight: 1000;
}

.ai-scene-delete:hover {
  border-color: rgba(255, 99, 99, 0.5);
  background: rgba(255, 72, 72, 0.14);
  color: #ffffff;
  transform: none;
}

.ai-scene-pill.active {
  border-color: rgba(240, 160, 0, 0.58);
  background: rgba(240, 160, 0, 0.1);
}

.ai-workspace-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 0;
}

.ai-workspace-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid rgba(120, 138, 160, 0.16);
  background: rgba(5, 8, 13, 0.64);
}

.ai-workspace-sidebar-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.12);
  color: #f1f4ff;
  font-size: 12px;
}

.ai-workspace-sidebar-head strong {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: rgba(238, 244, 255, 0.92);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-sidebar-head button {
  grid-column: 3;
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-color: rgba(120, 138, 160, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4f7ff;
  font-size: 14px;
  font-weight: 1000;
}

.ai-workspace-history {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px 10px 12px;
}

.ai-workspace-group {
  display: grid;
  gap: 8px;
}

.ai-workspace-group h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 3px 0;
  color: rgba(238, 244, 255, 0.58);
  font-size: 11px;
}

.ai-workspace-group h4 button {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
}

.ai-workspace-group h4 span {
  font-weight: 900;
}

.ai-workspace-group.current h4 button {
  color: #ffffff;
}

.ai-workspace-group.current h4 span {
  color: #ffffff;
}

.ai-workspace-group h4 em {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(156, 94, 226, 0.36);
  color: #eee7ff;
  font-style: normal;
}

.ai-workspace-group p {
  margin: 0;
  padding: 6px;
  color: rgba(202, 212, 225, 0.5);
  font-size: 12px;
}

.ai-workspace-history-entry {
  position: relative;
}

.ai-workspace-history-item {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 3px;
  width: 100%;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid rgba(120, 138, 160, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.026);
  text-align: left;
}

.ai-workspace-history-entry:hover .ai-workspace-history-item {
  border-color: rgba(189, 92, 232, 0.28);
  background: rgba(255, 255, 255, 0.035);
}

.ai-workspace-history-entry.has-result-alert .ai-workspace-history-item {
  border-color: rgba(245, 176, 0, 0.78);
  background: rgba(245, 176, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(245, 176, 0, 0.22), 0 0 22px rgba(245, 176, 0, 0.12);
}

.ai-workspace-history-entry.has-result-alert .ai-workspace-history-item::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 34px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffd35c;
  box-shadow: 0 0 12px rgba(255, 211, 92, 0.75);
}

.ai-workspace-history-entry.has-result-alert .ai-workspace-history-item strong,
.ai-workspace-history-entry.has-result-alert .ai-workspace-history-item em {
  color: #ffe6a1;
}

.ai-workspace-history-item strong {
  color: #f0f4ff;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-history-item span {
  color: rgba(202, 212, 225, 0.54);
  font-size: 11px;
  line-height: 1.25;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-history-item em {
  color: rgba(202, 212, 225, 0.42);
  font-size: 11px;
  font-style: normal;
}

.ai-workspace-history-entry.active .ai-workspace-history-item {
  border-color: rgba(152, 93, 226, 0.68);
  background: rgba(82, 35, 119, 0.5);
}

.ai-workspace-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-color: transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(238, 244, 255, 0.42);
  font-size: 12px;
}

.ai-workspace-delete:hover {
  border-color: rgba(255, 116, 116, 0.42);
  background: rgba(122, 35, 48, 0.42);
  color: #ffe7e7;
}

.ai-workspace-main {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 46% 34%, rgba(101, 63, 146, 0.12), transparent 28%),
    rgba(7, 10, 15, 0.72);
}

.ai-workspace-stage {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(240px, 28%);
  min-width: 0;
  min-height: 0;
}

.ai-workspace-stage-base {
  grid-template-columns: minmax(340px, 0.95fr) minmax(300px, 38%);
}

.ai-workspace-stage .ai-workspace-main {
  border-right: 1px solid rgba(120, 138, 160, 0.1);
}

.ai-workspace-results {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: rgba(5, 8, 13, 0.8);
}

.ai-workspace-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.16);
}

.ai-workspace-results-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-workspace-results-head span {
  color: #f0a000;
  font-size: 12px;
  font-weight: 1000;
}

.ai-workspace-results-head strong {
  display: none;
  color: #f4f7ff;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-results-head button {
  min-height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(238, 244, 255, 0.74);
  font-weight: 900;
}

.ai-workspace-result-shelf {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 12px 10px;
}

.ai-workspace-result-empty {
  display: grid;
  place-items: center;
  min-height: 160px;
  margin: 0;
  border: 1px dashed rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  color: rgba(202, 212, 225, 0.58);
  font-size: 13px;
}

.ai-workspace-result-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.ai-workspace-result-card.image {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}

.ai-workspace-result-card.image[draggable="true"] {
  cursor: grab;
}

.ai-workspace-result-card.image[draggable="true"]:active {
  cursor: grabbing;
}

.ai-workspace-result-card.pending,
.ai-workspace-result-card.processing {
  border-color: rgba(240, 160, 0, 0.38);
  background: rgba(240, 160, 0, 0.055);
}

.ai-workspace-result-card.failed {
  border-color: rgba(255, 104, 116, 0.42);
  background: rgba(122, 35, 48, 0.22);
}

.ai-workspace-result-card.text {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(42vh, 380px);
  padding: 0;
  background: rgba(12, 15, 22, 0.92);
}

.ai-workspace-result-card > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.ai-workspace-text-result-card > div {
  grid-template-rows: auto minmax(170px, 1fr) auto;
  align-content: stretch;
  gap: 0;
  height: 100%;
  min-height: 0;
}

.ai-workspace-result-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ai-workspace-text-result-card .ai-workspace-result-card-head {
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.16);
}

.ai-workspace-result-card-head > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ai-workspace-result-card strong {
  color: #f4f7ff;
  font-size: 14px;
}

.ai-workspace-result-card span {
  color: rgba(202, 212, 225, 0.58);
  font-size: 12px;
  font-weight: 800;
}

.ai-workspace-result-detail {
  display: block;
  margin-top: 2px;
  color: rgba(202, 212, 225, 0.62);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  word-break: break-all;
}

.ai-workspace-result-card p {
  max-height: 116px;
  margin: 0;
  overflow: auto;
  color: rgba(238, 244, 255, 0.78);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  scrollbar-width: none;
}

.ai-workspace-text-result-body {
  min-height: 0;
  padding: 12px;
}

.ai-workspace-text-result-body p {
  height: 100%;
  min-height: 170px;
  max-height: none;
  padding: 14px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.92);
  color: #f5f7ff;
  font-size: 14px;
  line-height: 1.7;
}

.ai-workspace-text-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(120, 138, 160, 0.12);
}

.ai-workspace-result-card p::-webkit-scrollbar {
  display: none;
}

.ai-workspace-result-preview {
  flex: 0 0 auto;
  height: 26px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(240, 160, 0, 0.38);
  border-radius: 6px;
  background: rgba(240, 160, 0, 0.12);
  color: #ffd86a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.ai-workspace-result-preview:hover {
  border-color: rgba(240, 160, 0, 0.64);
  background: rgba(240, 160, 0, 0.2);
}

.ai-workspace-result-download {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  height: 26px;
  min-width: 42px;
  padding: 0 8px;
  border: 1px solid rgba(240, 160, 0, 0.42);
  border-radius: 8px;
  background: rgba(7, 13, 22, 0.82);
  color: #ffd86a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.ai-workspace-result-card.image .ai-workspace-result-download {
  right: 42px;
}

.ai-workspace-result-card.video .ai-workspace-result-download {
  right: 42px;
}

.ai-workspace-result-download:hover {
  border-color: rgba(240, 160, 0, 0.68);
  background: rgba(78, 51, 0, 0.86);
  color: #ffe9a3;
}

.ai-workspace-result-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(7, 13, 22, 0.82);
  color: rgba(238, 244, 255, 0.78);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.ai-workspace-result-delete:hover {
  border-color: rgba(255, 126, 126, 0.58);
  background: rgba(92, 20, 32, 0.86);
  color: #ffd0d4;
}

.ai-workspace-result-image,
.ai-workspace-result-card video,
.ai-workspace-result-placeholder {
  width: 68px;
  height: 68px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
}

.ai-workspace-result-card.image .ai-workspace-result-image,
.ai-workspace-result-card.image .ai-workspace-result-placeholder {
  width: 100%;
  height: auto;
  min-height: 142px;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  cursor: grab;
}

.ai-workspace-result-card.image .ai-workspace-result-image:active {
  cursor: grabbing;
}

.ai-workspace-result-image img,
.ai-workspace-result-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-workspace-result-card.image .ai-workspace-result-image img {
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.ai-workspace-result-card.image .ai-workspace-result-meta {
  padding-right: 34px;
}

.ai-workspace-result-placeholder {
  display: grid;
  place-items: center;
  color: rgba(238, 244, 255, 0.62);
  font-size: 12px;
  font-weight: 900;
}

.ai-workspace-video-progress {
  display: grid;
  place-items: center;
  gap: 10px;
  width: min(220px, 78%);
}

.ai-workspace-video-progress strong {
  color: #ffd86a;
  font-size: 13px;
}

.ai-workspace-video-progress span {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(240, 160, 0, 0.24);
  border-radius: 999px;
  background: rgba(4, 7, 12, 0.72);
}

.ai-workspace-video-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0a000, #ffd86a);
}

.ai-workspace-result-placeholder span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  border: 1px solid rgba(240, 160, 0, 0.3);
  border-radius: 999px;
  background: rgba(240, 160, 0, 0.1);
  color: #ffd86a;
}

.ai-workspace-result-card.failed .ai-workspace-result-placeholder span {
  border-color: rgba(255, 104, 116, 0.42);
  background: rgba(122, 35, 48, 0.32);
  color: #ffd0d4;
}

.ai-workspace-result-card.video {
  grid-template-columns: minmax(0, 1fr);
}

.ai-workspace-result-card.video video,
.ai-workspace-result-card.video .ai-workspace-result-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.ai-workspace-result-card.video video {
  object-fit: contain;
}

.ai-workspace-video-references {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  min-width: 0;
}

.ai-workspace-video-reference {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.16);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.58);
}

.ai-workspace-video-reference span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.26);
}

.ai-workspace-video-reference span.has-preview {
  background: rgba(0, 0, 0, 0.36);
}

.ai-workspace-video-reference img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-workspace-video-reference b {
  color: rgba(238, 244, 255, 0.78);
  font-size: 11px;
}

.ai-workspace-video-reference em {
  display: block;
  min-width: 0;
  padding: 5px 6px;
  overflow: hidden;
  color: rgba(238, 244, 255, 0.78);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .ai-workspace-body {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .ai-workspace-stage {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 28%);
  }
}

@media (max-width: 760px) {
  .ai-workspace-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }

  .ai-workspace-head {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  }

  .ai-scene-strip {
    grid-template-columns: 1fr;
  }

  .ai-workspace-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .ai-workspace-sidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid rgba(120, 138, 160, 0.14);
  }

  .ai-workspace-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-row: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(120, 138, 160, 0.1);
  }
}

.ai-workspace-main.is-asset-mention-drop,
.ai-workspace-composer.is-asset-mention-drop,
.agent-chat.is-asset-mention-drop,
.agent-chat-composer.is-asset-mention-drop,
.video-floating-panel.is-asset-mention-drop,
.ai-workspace-video-card.is-asset-mention-drop,
.canvas-node-generate.is-asset-mention-drop,
.image-inspector-body.is-asset-mention-drop,
.ai-workspace-design-card.is-asset-mention-drop,
.canvas-node-image.is-asset-mention-drop {
  outline: 2px solid rgba(240, 160, 0, 0.7);
  outline-offset: -4px;
  background-color: rgba(240, 160, 0, 0.06);
}

.ai-workspace-thread {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 20px 18px 18px;
  scrollbar-gutter: stable;
  user-select: text;
}

.ai-workspace-main-video .ai-workspace-thread {
  padding-bottom: 18px;
}

.ai-workspace-message {
  display: grid;
  gap: 5px;
  max-width: min(72%, 640px);
  user-select: text;
}

.ai-workspace-image-thread {
  gap: 14px;
  padding-bottom: 20px;
}

.ai-workspace-image-taskbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.ai-workspace-image-taskbar > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-workspace-image-taskbar strong {
  color: #f4f7ff;
  font-size: 15px;
  font-weight: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-image-taskbar span {
  color: rgba(202, 212, 225, 0.64);
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-image-taskbar .ai-workspace-image-category {
  flex: 0 0 auto;
}

.ai-workspace-image-message.assistant {
  justify-self: start;
  max-width: min(92%, 640px);
}

.ai-workspace-image-message.user {
  max-width: min(78%, 560px);
}

.ai-workspace-message span {
  color: rgba(202, 212, 225, 0.54);
  font-size: 12px;
  font-weight: 900;
}

.ai-workspace-message p {
  margin: 0;
  padding: 12px 15px;
  border: 1px solid rgba(120, 138, 160, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.032);
  color: #f4f7ff;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
  user-select: text;
}

.ai-workspace-message img {
  display: block;
  max-width: min(100%, 420px);
  max-height: 280px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.ai-workspace-message-image {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
}

.ai-workspace-message-image .ai-workspace-image-name {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  max-width: calc(100% - 16px);
  padding: 3px 7px;
  border: 1px solid rgba(240, 160, 0, 0.45);
  border-radius: 6px;
  background: rgba(6, 8, 12, 0.74);
  color: #ffd15c;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.ai-workspace-message-image:active {
  cursor: grabbing;
}

.ai-workspace-message-image:hover img {
  border-color: rgba(240, 160, 0, 0.55);
}

.ai-workspace-image-message.assistant .ai-workspace-message-image img {
  max-width: min(100%, 560px);
  max-height: 360px;
}

.ai-workspace-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  width: 132px;
  max-height: 96px;
  overflow: hidden;
  border: 1px solid rgba(240, 160, 0, 0.62);
  border-radius: 10px;
  background: rgba(5, 7, 10, 0.9);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  color: #f7e1a0;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.ai-workspace-drag-ghost img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  -webkit-user-drag: none;
}

.canvas-viewport.is-ai-drop-target {
  box-shadow: inset 0 0 0 2px rgba(240, 160, 0, 0.58);
}

.ai-workspace-message.user {
  justify-self: end;
}

.ai-workspace-message.user p {
  border-color: rgba(184, 88, 220, 0.34);
  background: rgba(114, 52, 142, 0.22);
}

.ai-workspace-message.system {
  justify-self: start;
  max-width: min(78%, 620px);
}

.ai-workspace-message.system span {
  color: rgba(202, 212, 225, 0.58);
}

.ai-workspace-message.system p {
  border-color: rgba(120, 138, 160, 0.18);
  background: rgba(120, 138, 160, 0.08);
  color: rgba(226, 233, 244, 0.86);
}

.ai-workspace-empty {
  margin: 0;
  place-self: center;
  align-self: center;
  color: rgba(202, 212, 225, 0.62);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.ai-workspace-composer {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  width: auto;
  margin: 0 0 0;
  padding: 14px 12px 8px;
  border: 0;
  border-top: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 0;
  background: rgba(12, 15, 22, 0.95);
  box-shadow: none;
}

.ai-workspace-composer textarea {
  min-height: 78px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f7ff;
  overflow: auto;
  overscroll-behavior: contain;
  resize: none;
  outline: none;
  user-select: text;
}

.ai-workspace-composer .mention-textarea-wrap:focus-within .mention-textarea-highlight {
  color: #f5f7ff;
}

.ai-workspace-composer .mention-textarea-wrap:focus-within .mention-textarea-highlight mark {
  color: #5fd3ff;
}

.ai-workspace-composer .mention-textarea-wrap:focus-within textarea {
  color: transparent !important;
  caret-color: #f5f7ff;
}

.ai-workspace-reference-dock {
  position: relative;
  z-index: 3;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0 12px 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  pointer-events: auto;
}

.ai-workspace-reference-dock .inherited-references {
  gap: 6px;
  max-height: min(26vh, 178px);
  overflow: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}

.ai-workspace-reference-dock .inherited-references > div {
  justify-self: start;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(95, 166, 255, 0.28);
  border-radius: 8px;
  background: rgba(7, 13, 22, 0.78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
}

.ai-workspace-reference-dock .inherited-references ul {
  max-height: 128px;
  overflow: auto;
  padding-right: 4px;
}

.ai-workspace-reference-dock .inherited-reference-card {
  grid-template-columns: 34px 38px minmax(92px, 1fr) 28px;
  border-color: rgba(95, 166, 255, 0.3);
  background: rgba(7, 13, 22, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(10px);
}

.ai-workspace-reference-dock .inherited-reference-source {
  display: none;
}

.ai-workspace-reference-dock .inherited-reference-remove {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
}

.ai-workspace-composer-compact textarea {
  min-height: 52px;
}

.ai-workspace-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.ai-workspace-video-actions {
  position: relative;
  align-items: flex-start;
}

.ai-workspace-composer-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ai-workspace-send {
  display: grid;
  place-items: center;
  min-width: 68px;
  height: 34px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(152, 93, 226, 0.7);
  border-radius: 6px;
  background: rgba(82, 35, 119, 0.72);
  color: white;
  font-size: 13px;
  font-weight: 900;
  box-shadow: none;
}

.ai-workspace-preview-edit {
  display: grid;
  place-items: center;
  min-width: 68px;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(238, 244, 255, 0.82);
  font-size: 13px;
  font-weight: 900;
}

.ai-workspace-preview-edit:hover {
  border-color: rgba(240, 160, 0, 0.48);
  background: rgba(240, 160, 0, 0.12);
  color: #ffe0a3;
}

.ai-workspace-inline-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(202, 212, 225, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.ai-workspace-inline-select select {
  min-height: 32px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 8px;
  background: rgba(4, 7, 12, 0.8);
  color: #eef4ff;
}

.ai-workspace-status {
  min-width: 0;
  overflow: hidden;
  color: rgba(202, 212, 225, 0.65);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-workspace-task-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.ai-workspace-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-workspace-task-head span {
  color: #74c7ff;
  font-size: 12px;
  font-weight: 1000;
}

.ai-workspace-task-head strong {
  color: #f4f7ff;
  font-size: 16px;
}

.ai-workspace-image-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ai-workspace-image-category > span {
  color: rgba(202, 212, 225, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.ai-workspace-image-category .segmented-option {
  min-width: 64px;
}

.ai-workspace-task-card > p {
  margin: 0;
  color: rgba(226, 234, 245, 0.76);
  font-size: 13px;
  line-height: 1.55;
}

.ai-workspace-image-preview {
  display: block;
  width: min(100%, 520px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
}

.ai-workspace-image-preview[data-ai-image-node] {
  cursor: grab;
}

.ai-workspace-image-preview[data-ai-image-node]:active {
  cursor: grabbing;
}

.ai-workspace-image-preview img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.ai-workspace-video-card .video-generate-preview {
  min-height: 220px;
}

.inspector-head,
.inspector-empty {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
}

.canvas-inspector-image {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
}

.canvas-inspector-image > * {
  grid-column: 1 / -1;
}

.inspector-head-image {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  padding-right: 34px;
}

.image-inspector-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.image-inspector-status {
  margin: 0;
  color: rgba(202, 212, 225, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.image-inspector-model {
  align-self: start;
  justify-self: end;
  max-width: 240px;
}

.image-inspector-model .agent-model-row {
  justify-content: flex-end;
}

.image-inspector-body {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
}

.image-inspector-body .inherited-references {
  margin-top: 0;
}

.image-inspector-body .node-field textarea {
  min-height: 76px;
}

.image-inspector-prompt textarea {
  min-height: 116px;
}

.image-inspector-controls {
  align-items: end;
}

.image-inspector-body .transport-log {
  margin-top: 4px;
  border-color: rgba(255, 235, 0, 0.76);
  box-shadow: inset 0 3px 0 rgba(255, 235, 0, 0.9);
}

.inspector-close {
  position: absolute;
  right: -8px;
  top: -8px;
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(120, 138, 160, 0.36);
  border-radius: 999px;
  background: #111821;
  color: #dce5f2;
  font-size: 18px;
  line-height: 1;
}

.inspector-close:hover {
  border-color: rgba(240, 160, 0, 0.72);
  color: #ffd35c;
  transform: none;
}

.inspector-head h2,
.inspector-empty h2 {
  margin: 0;
  font-size: 18px;
}

.inspector-name-field {
  display: block;
  max-width: calc(100% - 38px);
}

.inspector-name-field input {
  width: min(320px, 100%);
  min-height: 34px;
  padding: 6px 0;
  border-color: transparent;
  background: transparent;
  color: #f4f8ff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.inspector-name-field input:focus {
  padding: 6px 10px;
  border-color: rgba(240, 160, 0, 0.55);
  background: rgba(255, 255, 255, 0.04);
}

.inspector-head p,
.inspector-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.canvas-inspector > .node-field:has(textarea),
.canvas-inspector > .node-control-grid,
.canvas-inspector > .agent-model-row,
.canvas-inspector > .node-json,
.canvas-inspector > .node-note,
.canvas-inspector > .node-action.full,
.canvas-inspector > .agent-mode-row,
.canvas-inspector > .agent-inspector-page,
.canvas-inspector > .inherited-references,
.canvas-inspector > .transport-log {
  grid-column: 1 / -1;
}

.inherited-references {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(95, 166, 255, 0.28);
  border-radius: 8px;
  background: rgba(95, 166, 255, 0.08);
}

.inherited-references div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #cfe3ff;
  font-size: 12px;
  font-weight: 800;
}

.inherited-references em {
  color: #8fbfff;
  font-style: normal;
}

.inherited-references ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inherited-reference-card {
  display: grid;
  grid-template-columns: 38px 34px minmax(78px, 1fr) max-content 30px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(143, 191, 255, 0.2);
  border-radius: 8px;
  background: rgba(5, 9, 14, 0.72);
  color: rgba(202, 212, 225, 0.78);
  font-size: 12px;
}

.inherited-reference-card[data-open-image-preview] {
  cursor: pointer;
}

.inherited-reference-card[data-open-image-preview]:hover {
  border-color: rgba(240, 160, 0, 0.44);
}

.inherited-reference-type {
  color: #8fbfff;
  font-size: 12px;
  font-weight: 800;
}

.inherited-reference-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(143, 191, 255, 0.22);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #8fbfff;
}

.inherited-reference-preview {
  cursor: pointer;
}

.inherited-reference-preview:hover {
  border-color: rgba(240, 160, 0, 0.58);
}

.inherited-reference-thumb img,
.inherited-reference-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inherited-reference-thumb video {
  background: #05080d;
  pointer-events: none;
}

.inherited-reference-thumb span {
  font-size: 10px;
  font-weight: 800;
}

.inherited-reference-info {
  display: grid;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.inherited-reference-name {
  width: 100%;
  min-height: 22px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #dceaff;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inherited-references .inherited-reference-source {
  color: rgba(202, 212, 225, 0.72);
  font-size: 11px;
  font-weight: 800;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.inherited-reference-name[readonly] {
  cursor: text;
}

.inherited-reference-name:not([readonly]) {
  padding: 0 6px;
  border-color: rgba(240, 160, 0, 0.55);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.inherited-reference-remove {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #d8dee9;
  line-height: 1;
  cursor: pointer;
}

.inherited-reference-remove svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inherited-reference-remove:hover {
  border-color: rgba(255, 126, 126, 0.56);
  background: rgba(255, 78, 78, 0.12);
  color: #ffd0d0;
}

.inherited-references b {
  color: #dceaff;
  font-size: 12px;
  font-weight: 800;
}

.inherited-references b,
.inherited-references small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transport-log {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(240, 160, 0, 0.32);
  border-radius: 10px;
  background: rgba(16, 12, 4, 0.78);
}

.transport-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffd56d;
}

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

.transport-log-head span,
.transport-log > p {
  margin: 0;
  color: rgba(223, 233, 247, 0.66);
  font-size: 12px;
}

.transport-log-empty {
  padding: 0 2px;
}

.transport-log-item {
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.28);
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.72);
}

.transport-log > .transport-log-list {
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
}

.transport-log-preview {
  border-color: rgba(255, 213, 109, 0.48);
  background: rgba(38, 28, 7, 0.78);
}

.transport-log-history {
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.4);
}

.transport-log-history summary {
  padding: 9px 10px;
  color: rgba(223, 233, 247, 0.72);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.transport-log-history summary:hover {
  color: #ffd56d;
}

.transport-log-history .transport-log-item {
  margin: 0 8px 8px;
}

.transport-log-history .transport-log-item:first-of-type {
  margin-top: 0;
}

.transport-log-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  color: #eef6ff;
}

summary.transport-log-item-head {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

summary.transport-log-item-head::-webkit-details-marker {
  display: none;
}

.transport-log-item-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transport-log-item > summary.transport-log-item-head b::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: #ffd56d;
}

.transport-log-item[open] > .transport-log-item-head b::before {
  content: "▾";
}

.transport-log-item-head span {
  color: rgba(202, 212, 225, 0.72);
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
  flex: 0 0 auto;
}

.transport-log-detail {
  display: grid;
  gap: 0;
  padding-top: 2px;
}

.transport-log-detail p,
.transport-log-detail label,
.transport-log-preview p,
.transport-log-preview label {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 10px 10px;
  color: rgba(224, 234, 248, 0.82);
  font-size: 12px;
}

.transport-log-detail em,
.transport-log-preview em {
  margin-right: 8px;
  color: #f5b000;
  font-style: normal;
  font-weight: 800;
}

.transport-log-item pre {
  overflow: auto;
  max-height: 210px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.35);
  color: #dff0ff;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.canvas-viewport.is-panning {
  cursor: grabbing;
}

.canvas-viewport.is-selecting {
  cursor: crosshair;
}

.canvas-marquee {
  position: absolute;
  z-index: 9;
  border: 1px solid rgba(95, 166, 255, 0.92);
  border-radius: 4px;
  background: rgba(95, 166, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(5, 9, 14, 0.45);
  pointer-events: none;
}

.canvas-marquee[hidden] {
  display: none;
}

.canvas-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: flat;
}

.canvas-node-layer {
  position: absolute;
  inset: 0;
}

.canvas-node {
  position: absolute;
  display: grid;
  gap: 10px;
  width: 286px;
  min-height: 132px;
  padding: 12px;
  border: 1px solid rgba(120, 138, 160, 0.34);
  border-radius: 8px;
  background: rgba(14, 18, 24, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  user-select: none;
  cursor: grab;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.canvas-node input,
.canvas-node textarea,
.canvas-node pre,
.transport-log-item pre {
  user-select: text;
}

.canvas-node:hover {
  border-color: rgba(240, 160, 0, 0.72);
}

.canvas-node.is-dragging {
  z-index: 3;
  border-color: #f0a000;
  cursor: grabbing;
}

.canvas-node.selected {
  border-color: #f0a000;
  box-shadow: 0 0 0 2px rgba(240, 160, 0, 0.22), 0 18px 44px rgba(0, 0, 0, 0.35);
}

.canvas-node.log-located {
  border-color: #53ffd5;
  box-shadow: 0 0 0 3px rgba(83, 255, 213, 0.2), 0 0 34px rgba(83, 255, 213, 0.24), 0 18px 44px rgba(0, 0, 0, 0.35);
}

.canvas-node-text {
  width: 360px;
  min-height: 190px;
}

.canvas-node-plain {
  width: 360px;
  min-height: 320px;
}

.canvas-node-image {
  width: 420px;
}

.canvas-node-video {
  width: 520px;
  min-height: 360px;
}

.canvas-node-audio {
  width: 420px;
  min-height: 180px;
}

.canvas-node-generate {
  width: 540px;
  gap: 10px;
  padding: 12px;
  border-color: rgba(120, 138, 160, 0.42);
  background: rgba(15, 18, 22, 0.98);
}

.canvas-inspector-generate {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  border-color: rgba(240, 160, 0, 0.54);
  background: rgba(12, 15, 19, 0.98);
}

.canvas-inspector-generate > * {
  grid-column: 1 / -1;
}

.video-generate-preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(180, 190, 204, 0.58);
  border-radius: 8px;
  background: #242424;
  color: rgba(224, 232, 243, 0.72);
}

.video-generate-preview-card {
  min-height: 0;
}

.video-generate-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-floating-panel {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
}

.video-generate-preview span {
  position: absolute;
  left: 16px;
  bottom: 12px;
  color: rgba(224, 232, 243, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.video-play-icon {
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 34px solid rgba(215, 221, 230, 0.28);
}

.video-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.video-floating-panel .video-mode-tabs {
  padding-right: 34px;
}

.segmented-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(120, 138, 160, 0.3);
  border-radius: 8px;
  background: rgba(8, 12, 17, 0.72);
  color: rgba(210, 220, 233, 0.72);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.segmented-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented-option.is-active {
  border-color: rgba(240, 160, 0, 0.72);
  background: rgba(240, 160, 0, 0.18);
  color: #ffd35c;
}

.video-prompt-field {
  display: grid;
  gap: 8px;
  color: rgba(202, 212, 225, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.video-prompt-field textarea {
  min-height: 96px;
  resize: vertical;
}

.video-floating-panel .video-prompt-field textarea {
  min-height: 96px;
  background: #242424;
  border-color: rgba(120, 138, 160, 0.28);
}

.video-tool-row,
.video-bottom-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.video-tool-row button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(120, 138, 160, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(224, 234, 248, 0.86);
  font-weight: 800;
  cursor: pointer;
}

.video-tool-row button:hover {
  border-color: rgba(240, 160, 0, 0.55);
  color: #ffd56d;
}

.video-bottom-bar {
  padding: 7px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 10px;
  background: rgba(4, 7, 10, 0.78);
}

.video-floating-panel .video-bottom-bar {
  align-items: end;
}

.video-select {
  display: grid;
  gap: 3px;
  min-width: 78px;
  color: rgba(202, 212, 225, 0.58);
  font-size: 11px;
  font-weight: 800;
}

.video-model-select {
  min-width: 210px;
  flex: 1 1 210px;
}

.video-picker {
  position: relative;
  min-width: 220px;
  flex: 1 1 260px;
}

.video-picker.compact {
  max-width: 360px;
}

.ai-workspace-composer .video-picker.compact {
  flex: 0 1 auto;
  max-width: none;
  min-width: 0;
}

.video-picker-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px 9px;
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(120, 138, 160, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #edf5ff;
  cursor: pointer;
  text-align: left;
}

.video-picker.compact .video-picker-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  max-width: min(360px, calc(100vw - 160px));
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
}

.video-picker.compact .video-picker-summary-label {
  font-size: 11px;
}

.video-picker.compact .video-picker-summary strong {
  max-width: 0;
  display: none;
}

.video-picker.compact .video-picker-summary em {
  padding: 2px 6px;
}

.video-picker.compact .video-picker-summary small {
  display: none;
}

.video-picker-summary:hover,
.video-picker-summary[aria-expanded="true"] {
  border-color: rgba(240, 160, 0, 0.78);
}

.video-picker-summary-label,
.video-picker-summary small {
  color: rgba(202, 212, 225, 0.62);
  font-size: 11px;
  font-weight: 900;
}

.video-picker-summary strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-summary em {
  padding: 3px 7px;
  border: 1px solid rgba(240, 160, 0, 0.42);
  border-radius: 999px;
  color: #ffd56d;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.video-picker-summary small {
  grid-column: 2 / 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 2200;
  display: grid;
  gap: 10px;
  width: min(640px, calc(100vw - 52px));
  max-height: min(560px, calc(100vh - 96px));
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(120, 138, 160, 0.28);
  border-radius: 10px;
  background: rgba(8, 11, 17, 0.98);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.48);
}

.video-picker.compact .video-picker-popover {
  width: min(620px, calc(100vw - 52px));
}

.video-picker-popover.is-fixed {
  position: fixed;
  bottom: auto;
  z-index: 2200;
}

.ai-workspace-composer .video-picker.compact .video-picker-popover.is-fixed {
  position: fixed;
  bottom: auto;
  max-height: min(560px, calc(100vh - 24px));
}

.ai-workspace-composer .video-picker.compact .video-picker-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(720px, calc(100vw - 52px));
  max-height: 320px;
  margin-top: 0;
}

.video-picker-group-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.2);
}

.video-picker-group-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-bottom-color: rgba(120, 138, 160, 0.14);
  border-radius: 8px 8px 5px 5px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 240, 252, 0.84);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.video-picker-group-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-group-tab small {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  max-width: 42px;
  height: 16px;
  padding: 0 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(120, 138, 160, 0.14);
  color: rgba(202, 212, 225, 0.62);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-group-tab:hover,
.video-picker-group-tab.is-active {
  border-color: rgba(240, 160, 0, 0.76);
  background: rgba(240, 160, 0, 0.12);
  color: #ffd56d;
}

.video-picker-group-tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 2px;
  border-radius: 999px;
  background: #f0a000;
}

.video-picker-group-tab.is-active small {
  background: rgba(240, 160, 0, 0.16);
  color: #ffd56d;
}

.video-picker-floating-body .video-picker-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.9fr);
  gap: 12px;
  align-items: stretch;
}

.video-picker-floating-body .video-picker-column {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
}

.video-picker-floating-body .video-picker-model-column {
  grid-template-rows: auto minmax(0, 1fr);
}

.video-picker-floating-body .video-picker-model-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.video-picker-floating-body .video-picker-model-section .video-picker-model-list {
  flex: 1;
  min-height: 0;
}

.video-picker-column > b,
.video-picker-column-head b {
  color: rgba(202, 212, 225, 0.72);
  font-size: 11px;
  font-weight: 950;
}

.video-picker-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.video-picker-column-head small {
  min-width: 0;
  overflow: hidden;
  color: rgba(202, 212, 225, 0.58);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-save-defaults {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(240, 160, 0, 0.52);
  border-radius: 7px;
  background: rgba(240, 160, 0, 0.12);
  color: #ffd56d;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.video-picker-save-defaults:hover {
  border-color: rgba(240, 160, 0, 0.78);
  background: rgba(240, 160, 0, 0.18);
}

.video-picker-dropdown,
.video-picker-model-section,
.video-picker-param-section {
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.video-picker-dropdown[open],
.video-picker-model-section.is-active {
  border-color: rgba(240, 160, 0, 0.72);
  background: rgba(240, 160, 0, 0.08);
}

.video-picker-dropdown summary,
.video-picker-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  color: rgba(232, 240, 252, 0.92);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}

.video-picker-section-head {
  cursor: default;
}

.video-picker-dropdown summary::-webkit-details-marker {
  display: none;
}

.video-picker-dropdown summary::after {
  content: "▾";
  color: rgba(202, 212, 225, 0.55);
  font-size: 10px;
}

.video-picker-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.video-picker-dropdown summary small,
.video-picker-section-head small {
  margin-left: auto;
  color: rgba(202, 212, 225, 0.58);
  font-size: 10px;
  font-weight: 900;
}

.video-picker-choice {
  min-height: 34px;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 240, 252, 0.88);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.video-picker-choice.is-active {
  border-color: rgba(240, 160, 0, 0.78);
  background: rgba(240, 160, 0, 0.12);
  color: #ffd56d;
}

.video-picker-choice {
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 8px 10px;
  text-align: left;
}

.video-picker-choice small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(202, 212, 225, 0.56);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-choice-main {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.video-picker-choice-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-choice-remark {
  flex: 0 0 auto;
  margin-left: auto;
  color: #ff636d;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.video-picker-choice.is-active .video-picker-choice-remark {
  color: #ff6f78;
}

.video-picker-model-list {
  display: grid;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 0 8px 8px;
}

.video-picker-model-list .video-picker-choice {
  min-height: 30px;
  padding: 6px 9px;
}

.video-picker-model-list .video-picker-choice small {
  display: none;
}

.video-picker-model-section.is-empty {
  opacity: 0.68;
}

.video-picker-model-section.is-empty .video-picker-section-head {
  min-height: 30px;
}

.video-picker-param-group .video-picker-grid {
  margin: 0 8px 8px;
}

.video-picker-param-section .video-picker-grid {
  margin: 0;
  padding: 0 8px 8px;
}

.video-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.video-picker-param-aspectRatio .video-picker-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-picker-param-seconds .video-picker-grid,
.video-picker-param-resolution .video-picker-grid {
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
}

.video-picker-grid .video-picker-choice {
  min-width: 64px;
  justify-items: center;
  padding: 7px 10px;
}

.video-picker-floating-panel {
  position: fixed;
  z-index: 3600;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.34);
  border-radius: 12px;
  background: rgba(8, 11, 17, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.56);
}

.video-picker-floating-panel[hidden] {
  display: none;
}

.video-picker-floating-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.22);
  cursor: move;
  user-select: none;
}

.video-picker-floating-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.video-picker-floating-head span {
  color: #ffd56d;
  font-size: 11px;
  font-weight: 950;
}

.video-picker-floating-head strong {
  overflow: hidden;
  color: rgba(238, 243, 252, 0.94);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-picker-floating-head button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(120, 138, 160, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 240, 252, 0.82);
  cursor: pointer;
}

.video-picker-floating-head button:hover {
  transform: none;
}

.video-picker-floating-body {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.video-picker-floating-panel.is-dragging {
  opacity: 0.96;
}

.video-picker-floating-panel.is-narrow .video-picker-layout {
  grid-template-columns: 1fr;
}

.model-picker-layout {
  display: grid;
  gap: 8px;
}

.model-picker-layout.is-image {
  grid-template-columns: minmax(210px, 1fr) minmax(170px, 0.8fr);
}

.model-picker-layout.is-text {
  grid-template-columns: minmax(240px, 1fr);
}

.model-picker-list {
  display: grid;
  gap: 5px;
  flex: 1;
  min-height: 0;
  overflow: visible;
  padding: 0 6px 6px;
}

.model-picker-choice {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 30px;
  padding: 6px 8px;
  /* 防止点击时滚动跳动 */
  scroll-margin: 0;
  /* 防止自动聚焦滚动 */
  outline-offset: -2px;
}

.model-picker-choice:focus {
  scroll-margin: 0;
}

.model-picker-choice span,
.model-picker-choice small {
  min-width: 0;
}

.model-picker-choice small {
  grid-column: 1 / -1;
  display: none;
}

.model-picker-choice em {
  grid-column: 2;
  grid-row: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(218, 226, 240, 0.72);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.model-picker-choice.is-active em {
  background: rgba(240, 160, 0, 0.14);
  color: #ffd56d;
}


@media (max-width: 720px) {
  .video-picker-layout {
    grid-template-columns: 1fr;
  }
}

.video-picker-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(120, 138, 160, 0.24);
  border-radius: 8px;
  color: rgba(202, 212, 225, 0.6);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.video-select select {
  min-height: 32px;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #eef6ff;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.video-select select:focus {
  border-color: rgba(240, 160, 0, 0.82);
}

.video-send-button {
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 0;
  border-radius: 9px;
  background: rgba(224, 230, 238, 0.76);
  color: #171b20;
  font-size: 20px;
  font-weight: 1000;
  cursor: pointer;
}

.video-send-button:hover {
  background: #ffd35c;
}

.video-generate-meta {
  color: rgba(202, 212, 225, 0.64);
  font-size: 12px;
}

.canvas-node-generate .node-summary {
  min-height: 0;
  padding: 8px 10px;
}

.canvas-node-generate .video-generate-meta {
  font-size: 11px;
}

.video-json-details {
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.48);
}

.video-json-details summary {
  padding: 9px 10px;
  color: rgba(223, 233, 247, 0.72);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.video-json-details .node-json {
  margin: 0 8px 8px;
}

.node-inline-field {
  display: grid;
  gap: 6px;
  color: rgba(202, 212, 225, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.node-inline-field p {
  min-height: 44px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: #d9e2ef;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: grab;
}

.node-inline-field p:hover {
  border-color: rgba(240, 160, 0, 0.38);
  color: #f0f6ff;
}

.node-inline-field textarea {
  width: 100%;
  min-height: 44px;
  max-height: 96px;
  padding: 9px 10px;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: #dce7f5;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}

.node-inline-field textarea:focus {
  border-color: rgba(240, 160, 0, 0.85);
  background: rgba(8, 12, 17, 0.92);
}

.agent-compact {
  display: grid;
  align-content: space-between;
  min-height: 244px;
  gap: 10px;
  color: rgba(202, 212, 225, 0.64);
}

.agent-compact small {
  align-self: end;
  justify-self: start;
  color: rgba(202, 212, 225, 0.72);
  font-weight: 800;
}

.agent-card-chat {
  display: grid;
  gap: 8px;
  width: 100%;
}

.agent-card-bubble {
  display: grid;
  gap: 5px;
  max-width: 94%;
  padding: 9px 10px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.agent-card-bubble.user {
  justify-self: end;
  border-color: rgba(240, 160, 0, 0.34);
  background: rgba(240, 160, 0, 0.1);
}

.agent-card-bubble.assistant {
  justify-self: start;
}

.agent-card-bubble span {
  color: rgba(202, 212, 225, 0.62);
  font-size: 11px;
  font-weight: 900;
}

.agent-card-bubble p {
  margin: 0;
  color: #dde8f6;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.agent-mode-row,
.agent-model-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.agent-mode-option {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(120, 138, 160, 0.28);
  border-radius: 8px;
  color: #cad4e1;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
}

.agent-mode-option input {
  accent-color: #f0a000;
}

.canvas-inspector-text {
  grid-template-columns: 1fr;
  width: min(720px, calc(100vw - 48px));
}

.canvas-inspector-text > * {
  grid-column: 1 / -1;
}

.agent-inspector-page {
  display: grid;
  gap: 12px;
}

.agent-page-switcher {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(120, 138, 160, 0.28);
  border-radius: 10px;
  background: rgba(4, 8, 12, 0.72);
}

.agent-page-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #a9bbcf;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.agent-page-tab input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.agent-page-tab.is-active {
  border-color: rgba(240, 160, 0, 0.72);
  background: rgba(240, 160, 0, 0.16);
  color: #ffd35c;
}

.agent-page-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.agent-page-content > * {
  min-width: 0;
}

.agent-page-content .agent-model-row {
  justify-content: flex-start;
}

.agent-page-content .node-field textarea {
  min-height: 112px;
}

.agent-chat {
  display: grid;
  gap: 12px;
}

.agent-chat-thread {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding: 12px 12px 18px;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 10px;
  background: rgba(5, 9, 13, 0.62);
}

.agent-chat-message {
  display: grid;
  gap: 6px;
  max-width: min(86%, 560px);
  padding: 10px 12px;
  border: 1px solid rgba(120, 138, 160, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.agent-chat-message.user {
  justify-self: end;
  border-color: rgba(240, 160, 0, 0.42);
  background: rgba(240, 160, 0, 0.12);
}

.agent-chat-message.assistant {
  justify-self: start;
}

.agent-chat-message span {
  color: rgba(202, 212, 225, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.agent-chat-message p,
.agent-chat-empty {
  margin: 0;
  color: #e7f0fb;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-empty {
  color: rgba(202, 212, 225, 0.62);
  font-weight: 800;
}

.agent-chat-composer {
  display: grid;
  gap: 10px;
}

.agent-chat-composer textarea {
  min-height: 86px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(120, 138, 160, 0.28);
  border-radius: 10px;
  background: rgba(7, 12, 18, 0.78);
  color: #f2f7ff;
  resize: vertical;
  outline: none;
}

.agent-chat-composer textarea:focus {
  border-color: rgba(240, 160, 0, 0.82);
}

.agent-chat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-chat-details {
  overflow: hidden;
  border: 1px solid rgba(120, 138, 160, 0.22);
  border-radius: 10px;
  background: rgba(5, 9, 13, 0.42);
}

.agent-chat-details summary {
  padding: 10px 12px;
  color: rgba(223, 233, 247, 0.74);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.agent-chat-details summary:hover {
  color: #ffd56d;
}

.agent-chat-details > .node-field,
.agent-chat-details > .transport-log {
  margin: 0 10px 10px;
}

.agent-image-preview {
  display: grid;
  place-items: center;
  min-height: 110px;
  overflow: hidden;
  border: 1px dashed rgba(240, 160, 0, 0.45);
  border-radius: 8px;
  color: rgba(247, 225, 160, 0.7);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
  font-weight: 800;
}

.agent-image-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.node-head b {
  color: #f5b000;
}

.node-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.node-thumb,
.node-output {
  display: grid;
  place-items: center;
  min-height: 86px;
  border: 1px dashed rgba(240, 160, 0, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #f7e1a0;
}

.node-video-preview {
  overflow: hidden;
  background: #05070a;
  min-height: 292px;
}

.node-video-preview video {
  width: 100%;
  min-height: 260px;
  max-height: 340px;
  object-fit: contain;
}

.node-audio-preview {
  min-height: 92px;
  padding: 14px;
  border-color: rgba(83, 255, 213, 0.28);
  background: rgba(4, 7, 11, 0.72);
}

.node-audio-preview audio {
  width: 100%;
  min-width: 0;
}

.node-text-resource-preview {
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 12px;
  border: 1px dashed rgba(240, 160, 0, 0.36);
  border-radius: 8px;
  background: rgba(36, 25, 7, 0.36);
}

.node-text-resource-preview div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.node-text-resource-preview span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  border: 1px solid rgba(240, 160, 0, 0.34);
  border-radius: 999px;
  background: rgba(240, 160, 0, 0.12);
  color: #ffd86a;
  font-size: 12px;
  font-weight: 900;
}

.node-text-resource-preview em {
  color: rgba(202, 212, 225, 0.64);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.node-text-resource-preview p {
  color: #f1e4bd;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

.canvas-node-plain .node-field textarea[data-node-field="text"] {
  min-height: 132px;
}

.node-image-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  min-height: 178px;
  max-height: 360px;
  border: 1px dashed rgba(240, 160, 0, 0.45);
  border-radius: 8px;
  background: #05070a;
  color: #f7e1a0;
  font-size: 14px;
  font-weight: 800;
}

.node-image-preview.has-image {
  cursor: grab;
}

.canvas-node.is-dragging .node-image-preview.has-image {
  cursor: grabbing;
}

.node-image-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  user-select: none;
  -webkit-user-drag: none;
}

.node-image-preview-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(240, 160, 0, 0.58);
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(5, 7, 10, 0.82);
  color: #ffd86a;
  font-size: 12px;
  font-weight: 900;
  cursor: zoom-in;
  opacity: 0.92;
  transition: background 0.16s ease, transform 0.16s ease;
}

.node-image-preview:hover .node-image-preview-button {
  opacity: 1;
}

.node-image-preview-button:hover {
  background: rgba(62, 41, 4, 0.95);
  transform: translateY(-1px);
}

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.78);
}

.image-preview-modal[hidden] {
  display: none;
}

.image-preview-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(94vw, 1500px);
  max-height: 92vh;
  border: 1px solid rgba(240, 160, 0, 0.42);
  border-radius: 10px;
  background: #070b10;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
  padding: 12px;
}

.image-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f7e1a0;
  min-width: 0;
}

.image-preview-toolbar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-preview-toolbar div {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.image-preview-toolbar a,
.image-preview-toolbar button {
  border: 1px solid rgba(240, 160, 0, 0.42);
  border-radius: 8px;
  background: rgba(240, 160, 0, 0.12);
  color: #ffd86a;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.image-preview-dialog img {
  display: block;
  width: 100%;
  max-height: calc(92vh - 86px);
  object-fit: contain;
  border-radius: 8px;
  background: #0b0f15;
}

.text-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.78);
}

.text-preview-modal[hidden] {
  display: none;
}

.text-preview-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(94vw, 1120px);
  height: min(86vh, 760px);
  padding: 12px;
  border: 1px solid rgba(122, 139, 164, 0.28);
  border-radius: 10px;
  background: #070b10;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

.text-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  color: #f5f7ff;
}

.text-preview-toolbar div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.text-preview-toolbar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.text-preview-toolbar span {
  color: rgba(202, 212, 225, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.text-preview-toolbar button {
  min-width: 76px;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(152, 93, 226, 0.7);
  border-radius: 6px;
  background: rgba(82, 35, 119, 0.72);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.text-preview-body {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.92);
  color: #f5f7ff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

.composer-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.78);
}

body.composer-editor-open .mention-menu {
  z-index: 1200;
}

.composer-editor-modal[hidden] {
  display: none;
}

.composer-editor-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(92vw, 980px);
  height: min(82vh, 680px);
  padding: 12px;
  border: 1px solid rgba(122, 139, 164, 0.28);
  border-radius: 10px;
  background: #070b10;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

.composer-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f5f7ff;
  min-width: 0;
}

.composer-editor-toolbar div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.composer-editor-toolbar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.composer-editor-toolbar span {
  color: rgba(202, 212, 225, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.composer-editor-toolbar button {
  min-width: 76px;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(152, 93, 226, 0.7);
  border-radius: 6px;
  background: rgba(82, 35, 119, 0.72);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.composer-editor-textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.92);
  color: #f5f7ff;
  font-size: 15px;
  line-height: 1.7;
  resize: none;
  outline: none;
}

.composer-editor-textarea:focus {
  border-color: rgba(240, 160, 0, 0.46);
  box-shadow: 0 0 0 2px rgba(240, 160, 0, 0.1);
}

.node-field,
.node-control-grid label {
  display: grid;
  gap: 6px;
  color: #8b98aa;
  font-size: 12px;
  font-weight: 700;
}

.node-field input,
.node-field textarea,
.node-control-grid select,
.canvas-node textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #0b1118;
  color: var(--ink);
  outline: none;
}

.node-field input:focus,
.node-field textarea:focus,
.node-control-grid select:focus,
.canvas-node textarea:focus {
  border-color: #f0a000;
}

.canvas-node p {
  margin: 0;
  color: #cad4e1;
  font-size: 13px;
  line-height: 1.45;
}

.node-summary {
  min-height: 38px;
  padding: 10px;
  border: 1px solid rgba(120, 138, 160, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #d9e2ef;
}

.node-status {
  color: rgba(202, 212, 225, 0.68);
  font-size: 12px;
}

.node-note {
  margin: 0;
  color: rgba(202, 212, 225, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.canvas-node textarea {
  resize: vertical;
}

.node-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.node-control-grid-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.node-action {
  min-height: 36px;
  border-color: rgba(240, 160, 0, 0.45);
  background: rgba(240, 160, 0, 0.11);
  color: #f5b000;
  font-weight: 800;
}

.node-action.full {
  width: 100%;
}

.node-json {
  overflow: auto;
  max-height: 180px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(120, 138, 160, 0.25);
  border-radius: 8px;
  background: rgba(7, 11, 16, 0.72);
  color: #cad4e1;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  user-select: text;
}

.model-picker-param-aspect .video-picker-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-picker-param-quality .video-picker-grid {
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
}

.model-picker-response-section {
  margin-top: 8px;
}

.model-picker-response-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-picker-mode-choice {
  justify-items: start;
  min-height: 44px;
  padding: 7px 9px;
}

.model-picker-mode-choice small {
  display: block;
}

.model-picker-param-choice {
  justify-items: center;
  min-height: 30px;
  padding: 6px 8px;
}

.model-picker-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 0 8px 8px;
}

.model-picker-count-row input {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(120, 138, 160, 0.3);
  border-radius: 8px;
  background: rgba(7, 11, 16, 0.76);
  color: rgba(238, 243, 252, 0.94);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.model-picker-count-row input:focus {
  border-color: rgba(240, 160, 0, 0.78);
  box-shadow: 0 0 0 2px rgba(240, 160, 0, 0.12);
}

.model-picker-count-row span {
  color: rgba(202, 212, 225, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.model-picker-default-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.model-picker-default-row button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(240, 160, 0, 0.52);
  border-radius: 8px;
  background: rgba(240, 160, 0, 0.12);
  color: #ffd56d;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.model-picker-default-row span {
  min-width: 0;
  color: rgba(202, 212, 225, 0.58);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.node-model-selector {
  position: relative;
  display: grid;
  justify-items: start;
}

.node-model-trigger {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  max-width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border-color: rgba(120, 138, 160, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #cad4e1;
}

.node-model-trigger .node-model-label {
  color: rgba(202, 212, 225, 0.72);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.node-model-trigger b {
  display: none;
  overflow: hidden;
  min-width: 0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-model-trigger em,
.node-model-option em {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #c6d0dd;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.node-model-selector-image .node-model-trigger em {
  background: rgba(240, 160, 0, 0.12);
  color: #ffd56d;
}

.model-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #f5b000;
  font-size: 12px;
}

.node-model-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 12;
  display: grid;
  gap: 4px;
  width: 292px;
  max-height: var(--model-menu-max-height, 280px);
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(120, 138, 160, 0.32);
  border-radius: 12px;
  background: rgba(37, 39, 42, 0.98);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42);
}

.node-model-selector.drop-up .node-model-menu {
  top: auto;
  bottom: calc(100% + 8px);
}

.image-inspector-model .node-model-menu {
  right: 0;
  left: auto;
}

.node-model-menu[hidden] {
  display: none;
}

.node-model-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  border-color: transparent;
  background: transparent;
  color: #f4f7fb;
  text-align: left;
}

.node-model-option:hover,
.node-model-option.active {
  background: rgba(255, 255, 255, 0.12);
  transform: none;
}

.node-model-option b,
.node-model-option small {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-model-option b {
  font-size: 13px;
}

.node-model-option small {
  margin-top: 2px;
  color: rgba(202, 212, 225, 0.64);
  font-size: 11px;
}

.canvas-hint {
  position: absolute;
  left: 86px;
  bottom: 18px;
  z-index: 4;
  padding: 8px 10px;
  border: 1px solid rgba(120, 138, 160, 0.25);
  border-radius: 8px;
  background: rgba(7, 11, 16, 0.82);
  color: #8b98aa;
  font-size: 12px;
  pointer-events: none;
}

.canvas-context-menu {
  position: absolute;
  z-index: 80;
  display: grid;
  gap: 6px;
  width: 176px;
  padding: 8px;
  border: 1px solid rgba(240, 160, 0, 0.44);
  border-radius: 8px;
  background: rgba(11, 16, 22, 0.98);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42);
}

.canvas-context-menu button {
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: #cad4e1;
  text-align: left;
}

.canvas-context-menu button:hover {
  background: rgba(240, 160, 0, 0.13);
  color: #f5b000;
}

.canvas-context-menu button.danger {
  color: #ffb4b4;
}

.canvas-context-menu button.danger:hover {
  background: rgba(244, 63, 94, 0.16);
  color: #ffd6d6;
}

.mention-menu {
  position: fixed;
  z-index: 2000;
  display: grid;
  gap: 4px;
  width: min(360px, calc(100vw - 24px));
  max-height: 260px;
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(240, 160, 0, 0.42);
  border-radius: 10px;
  background: rgba(9, 13, 18, 0.98);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45);
}

.mention-menu[hidden] {
  display: none;
}

.mention-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 6px;
  border-bottom: 1px solid rgba(120, 138, 160, 0.18);
}

.mention-menu-head strong {
  color: #ffd56d;
  font-size: 12px;
}

.mention-menu-head span {
  overflow: hidden;
  color: rgba(215, 226, 240, 0.62);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-option {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 6px;
  border-color: transparent;
  background: transparent;
  color: #eff6ff;
  text-align: left;
}

.mention-option:hover {
  background: rgba(240, 160, 0, 0.12);
  transform: none;
}

.mention-option span {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 44px;
  height: 38px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.mention-option img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mention-option em {
  color: #f5b000;
  font-size: 12px;
  font-style: normal;
}

.mention-option b,
.mention-option small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-option small {
  max-width: 72px;
  color: rgba(215, 226, 240, 0.78);
  font-size: 11px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.form-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.side-panel {
  display: grid;
  gap: 18px;
  padding: 18px;
  position: sticky;
  top: 16px;
}

.field input,
.field select,
.field textarea,
.task-search input,
.key-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #0b1118;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
  resize: vertical;
}

.field-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.task-search input:focus,
.key-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.14);
}

.prompt-field textarea {
  min-height: 176px;
}

.prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prompt-head label {
  margin-bottom: 0;
}

.prompt-wrap {
  position: relative;
  margin-top: 8px;
}

.image-picker {
  position: absolute;
  z-index: 1000;
  top: 44px;
  left: 12px;
  width: min(420px, calc(100% - 24px));
  max-height: 300px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1118;
  box-shadow: var(--shadow);
  color: var(--ink);
}

.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #10151a;
  color: var(--ink);
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  max-height: 230px;
  overflow: auto;
  padding: 12px;
}

.picker-option {
  display: grid;
  gap: 7px;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1118;
  text-align: left;
}

.picker-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.picker-option img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

.picker-option video,
.picker-audio {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  background: #1a1f27;
}

.picker-audio {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px;
  text-align: center;
  color: #f7e1a0;
}

.picker-audio small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-option span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 12px;
  color: var(--muted);
  text-align: center;
}

.selected-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.selected-image {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1118;
}

.selected-image img,
.selected-image video,
.selected-audio {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #1a1f27;
}

.selected-audio {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px;
  color: #f7e1a0;
  text-align: center;
}

.selected-audio small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-image span {
  display: block;
  overflow: hidden;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-image button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(12, 17, 24, 0.92);
  line-height: 1;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.url-section {
  display: grid;
  gap: 14px;
}

.generation-mode {
  display: grid;
  gap: 10px;
}

.generation-mode > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mode-tab {
  min-height: 48px;
  border-color: rgba(209, 147, 31, 0.18);
  background: #10151a;
  color: #9eb1c5;
}

.mode-tab b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-tab.active {
  border-color: #d1942a;
  background: rgba(209, 147, 31, 0.16);
  color: #f5b000;
  box-shadow: inset 0 0 0 1px rgba(209, 147, 31, 0.28);
}

.reference-assets {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(209, 147, 31, 0.48);
  border-radius: 8px;
  background: #16110b;
  color: #f7e1a0;
}

.assets-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.assets-title > div {
  display: grid;
  gap: 3px;
}

.assets-title small {
  color: rgba(247, 225, 160, 0.62);
  font-size: 12px;
}

.asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-pick-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1118;
  color: var(--ink);
  cursor: pointer;
}

.file-pick-label:hover {
  border-color: var(--accent);
}

.native-file-input {
  position: fixed;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0.01;
}

.asset-lanes {
  display: grid;
  gap: 10px;
}

.asset-lane {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(209, 147, 31, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.asset-lane-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.asset-count-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: #f7e1a0 !important;
  font-size: 13px !important;
  font-weight: 800;
}

.asset-count-label b {
  color: #f5b000;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
}

.media-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.asset-card,
.asset-add {
  min-height: 82px;
  border: 1px dashed rgba(209, 147, 31, 0.55);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #d2a23a;
}

.asset-add {
  display: grid;
  place-items: center;
  padding: 8px;
}

.asset-add span {
  display: grid;
  gap: 3px;
  text-align: center;
}

.asset-add b {
  font-size: 22px;
  line-height: 1;
}

.asset-card {
  position: relative;
  overflow: hidden;
  padding: 5px;
  border-style: solid;
}

.asset-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

.asset-card video,
.asset-media-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  object-fit: cover;
}

.asset-media-placeholder {
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
}

.asset-media-placeholder span {
  font-size: 14px;
  font-weight: 800;
}

.asset-media-placeholder small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: rgba(247, 225, 160, 0.7);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-tag {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #f5b000;
  color: #171106;
  font-size: 11px;
  font-weight: 800;
}

.asset-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
}

.primary-button:hover:not(:disabled) {
  background: var(--accent-dark);
}

.ghost-button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: transparent;
}

.status-block {
  display: grid;
  gap: 12px;
}

.section-title {
  justify-content: space-between;
}

.status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1118;
}

.status-card > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
}

.status-card.processing .status-dot,
.status-card.queued .status-dot {
  background: var(--warn);
}

.status-card.completed .status-dot {
  background: var(--accent);
}

.status-card.failed .status-dot {
  background: var(--danger);
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ded0;
}

.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #d1942a);
  transition: width 0.25s ease;
}

.task-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.task-meta div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #0b1118;
}

.task-meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}

.video-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
  overflow: hidden;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #111814;
  color: #eaf1ed;
}

.video-box video {
  display: none;
  width: 100%;
  max-height: 360px;
  background: #000000;
}

.video-box.ready video {
  display: block;
}

.video-box.ready p {
  display: none;
}

.video-box p {
  margin: 0;
  padding: 20px;
  color: #cdd7d2;
  text-align: center;
}

.gallery-summary {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #0b1118;
  color: var(--muted);
  font-size: 13px;
}

.gallery-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.gallery-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1118;
}

.download-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.download-link.disabled {
  pointer-events: none;
  opacity: 0.45;
}

pre {
  max-height: 260px;
  margin: 0;
  overflow: auto;
  padding: 14px;
  border-radius: 8px;
  background: #17211c;
  color: #e8f2ed;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}

.log-list {
  display: grid;
  gap: 8px;
  max-height: 240px;
  margin: 0;
  overflow: auto;
  padding: 0;
  list-style: none;
}

.log-list li {
  padding: 10px;
  border-radius: 8px;
  background: #0b1118;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.log-list strong {
  display: block;
  color: var(--ink);
}

@media (max-width: 1060px) {
  .topbar,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .side-panel {
    position: static;
  }
}

@media (max-width: 820px) {
  .canvas-page .canvas-app-shell {
    padding: 0;
  }

  .canvas-project-bar {
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  .canvas-board-list-floating {
    display: none;
  }

  .canvas-action-bar {
    top: 76px;
    left: 12px;
    right: auto;
    max-width: calc(100vw - 24px);
    overflow: auto hidden;
  }

  .canvas-tool-rail {
    left: 10px;
  }

  .canvas-utility-rail {
    right: 10px;
    bottom: 10px;
  }

  .customer-settings-panel {
    right: 62px;
    bottom: 10px;
    width: calc(100vw - 82px);
  }

  .canvas-inspector {
    max-height: 70vh;
  }

  .canvas-inspector-image {
    width: calc(100vw - 32px);
  }

  .inspector-head-image {
    grid-template-columns: 1fr;
  }

  .image-inspector-model {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px;
  }

  .customer-settings-panel {
    right: 10px;
    bottom: 72px;
    width: calc(100vw - 20px);
    height: min(72vh, 520px);
  }

  .customer-settings-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .customer-settings-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(120, 138, 160, 0.14);
  }

  .customer-settings-nav button {
    white-space: nowrap;
  }

  .canvas-page .app-shell {
    padding: 0;
  }

  .option-grid,
  .task-meta {
    grid-template-columns: 1fr 1fr;
  }

  .key-row {
    flex-wrap: wrap;
  }

  .key-row input {
    flex-basis: calc(100% - 52px);
  }

  .key-row #saveKey {
    flex: 1 0 100%;
  }
}

@media (max-width: 500px) {
  .option-grid,
  .task-meta {
    grid-template-columns: 1fr;
  }

  .actions,
  .task-search {
    align-items: stretch;
    flex-direction: column;
  }
}