:root {
  --bg: #141414;
  --panel: #202020;
  --panel-2: #2b2f36;
  --text: #f2f2f2;
  --muted: #b8b8b8;
  --line: #484848;
  --accent: #4cc9b0;
  --creative-panel: var(--panel);
  --creative-panel-2: var(--panel-2);
  --creative-line: var(--line);
  --danger: #ff8b8b;
}

/* 资产库接口接入：真实媒体缩略图、加载状态与分镜 @ 资产预览。 */
#assetLibraryModal .asset-thumb-remote {
  display: grid !important;
  place-items: center;
  overflow: hidden;
  color: #78d9c8;
  background: #11191d;
}

#assetLibraryModal .asset-thumb-remote > img,
#assetLibraryModal .asset-thumb-remote > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#assetLibraryModal .asset-thumb-remote.is-audio-only {
  font-size: 32px;
}

#assetLibraryModal .asset-project-empty,
#assetLibraryModal .asset-card-empty {
  color: #7f9297;
  font-size: 13px;
  line-height: 1.6;
}

#assetLibraryModal .asset-project-empty {
  padding: 18px 12px;
  text-align: center;
}

#assetLibraryModal .asset-card-empty {
  grid-column: 1 / -1;
  min-height: 86px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(126, 151, 160, .16);
  border-radius: 6px;
  background: rgba(18, 27, 32, .42);
}

#assetLibraryModal .asset-project-empty.is-error,
#assetLibraryModal .asset-card-empty.is-error,
html body #shotFullscreenEditor .shot-asset-mention-state.is-error {
  color: #df8e8e;
}

html body #shotFullscreenEditor .shot-asset-mention-state {
  padding: 18px 10px;
  color: #71868a;
  font-size: 10px;
  text-align: center;
  border: 1px dashed #2d4145;
  border-radius: 7px;
}

html body #shotFullscreenEditor .shot-asset-mention-state.hidden {
  display: none !important;
}

html body #shotFullscreenEditor .shot-asset-mention > b {
  overflow: hidden;
  border-radius: 6px;
}

html body #shotFullscreenEditor .shot-asset-mention > b img,
html body #shotFullscreenEditor .shot-asset-mention > b video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Project picker refinement: calm media rows, clearer hierarchy, no destructive action. */
.project-modal {
  padding: 20px !important;
  background: rgba(1, 7, 9, .38) !important;
  backdrop-filter: blur(7px) saturate(.92) !important;
}

.project-panel {
  width: min(568px, calc(100vw - 40px)) !important;
  border-color: rgba(181, 198, 201, .19) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #0d171c 0%, #091116 100%) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .62),
    0 1px 0 rgba(255, 255, 255, .035) inset !important;
}

.project-panel-head {
  min-height: 68px !important;
  gap: 10px !important;
  padding: 12px 13px 12px 20px !important;
  border-bottom-color: rgba(181, 198, 201, .12) !important;
  background: rgba(14, 24, 29, .92) !important;
}

.project-panel-head h2 {
  gap: 12px !important;
  font-size: 20px !important;
  font-weight: 780 !important;
  letter-spacing: -.018em !important;
}

.project-folder-icon {
  width: 24px !important;
  height: 17px !important;
  border-color: #aab8bb !important;
  border-radius: 3px !important;
  opacity: .9 !important;
}

.project-folder-icon::before {
  border-color: #aab8bb !important;
}

.project-add-head {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(79, 213, 189, .30) !important;
  border-radius: 6px !important;
  background: rgba(79, 213, 189, .075) !important;
  color: #8addd0 !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset !important;
}

.project-add-head:hover {
  border-color: rgba(79, 213, 189, .48) !important;
  background: rgba(79, 213, 189, .12) !important;
}

.project-close {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-color: rgba(181, 198, 201, .16) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .028) !important;
  color: #bcc9cb !important;
}

.project-close:hover {
  border-color: rgba(181, 198, 201, .28) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #f1f7f6 !important;
}

.project-list {
  gap: 10px !important;
  padding: 14px 16px 16px !important;
  background: transparent !important;
}

.project-item {
  min-height: 88px !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 9px 14px 9px 10px !important;
  border-color: rgba(181, 198, 201, .13) !important;
  border-radius: 8px !important;
  background: rgba(16, 27, 33, .82) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .018) inset !important;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    transform .16s ease !important;
}

.project-item::before {
  top: 12px !important;
  bottom: 12px !important;
  width: 2px !important;
  background: transparent !important;
}

.project-item:hover {
  transform: translateX(2px) !important;
  border-color: rgba(181, 198, 201, .24) !important;
  background: rgba(19, 32, 39, .94) !important;
}

.project-item.is-active {
  border-color: rgba(79, 213, 189, .38) !important;
  background: rgba(15, 31, 33, .88) !important;
  box-shadow:
    0 0 0 1px rgba(79, 213, 189, .025) inset,
    0 8px 28px rgba(0, 0, 0, .12) !important;
}

.project-item.is-active::before {
  background: #4fd5bd !important;
}

.project-thumb {
  width: 116px !important;
  height: 68px !important;
  border-color: rgba(181, 198, 201, .16) !important;
  border-radius: 6px !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(255, 255, 255, .018) inset !important;
}

.project-item.is-active .project-thumb {
  border-color: rgba(79, 213, 189, .32) !important;
}

.project-item.is-active .project-thumb::after {
  content: "\2713" !important;
  right: 7px !important;
  bottom: 7px !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid rgba(234, 255, 251, .72) !important;
  background: #5bd8c1 !important;
  color: #071815 !important;
  font-size: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .34) !important;
}

.project-item input {
  min-height: 40px !important;
  color: #eaf1f0 !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  cursor: text;
}

.project-item input:focus-visible {
  outline-color: rgba(79, 213, 189, .36) !important;
  outline-offset: 5px !important;
}

.project-radio,
.project-choose {
  display: none !important;
}

@media (max-width: 560px) {
  .project-modal {
    padding: 10px !important;
  }

  .project-panel {
    width: calc(100vw - 20px) !important;
  }

  .project-panel-head {
    min-height: 60px !important;
    padding: 10px 10px 10px 15px !important;
  }

  .project-list {
    gap: 8px !important;
    padding: 10px !important;
  }

  .project-item {
    min-height: 76px !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 8px 11px 8px 8px !important;
  }

  .project-thumb {
    width: 88px !important;
    height: 58px !important;
  }

  .project-item input {
    font-size: 14px !important;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 380px;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; padding: 18px; }
.toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.toolbar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
h1, h2, p { margin: 0; }
h1 { font-size: 24px; }
h2 { font-size: 15px; }
.brand-title { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.brand-logo {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: #08201b;
  font-size: 18px;
  font-weight: 800;
}
.grid { display: grid; grid-template-columns: minmax(340px, 460px) minmax(320px, 1fr); gap: 16px; }
.panel, .preview-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
#generatorForm {
  padding: 18px;
  background: var(--creative-panel);
  border-color: var(--creative-line);
}
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1c1c;
}
.source-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
button { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--text); cursor: pointer; }
#chooseFolderBtn {
  position: absolute;
  right: 58px;
  transform: none;
  min-width: 96px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
}
.project-selector-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 138px;
  min-height: 36px;
  padding: 0 14px 0 10px;
  font-size: 14px;
  font-weight: 800;
}
.project-selector-btn.is-active,
#chooseFolderBtn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(80, 201, 181, .10);
}
.project-selector-thumb {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(80, 201, 181, .35);
  background:
    radial-gradient(circle at 70% 28%, rgba(245, 232, 158, .78), transparent 16%),
    linear-gradient(135deg, #29443a, #102028);
}
.records-back-top {
  position: absolute;
  left: calc(50% + 62px);
  transform: translateX(0);
  min-width: 68px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
}
.records-back-top.hidden { display: none; }
.records-home .toolbar {
  display: flex;
}
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: start center;
  padding-top: 72px;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(6px);
}
.project-modal.hidden { display: none; }
.project-panel {
  width: min(560px, calc(100vw - 48px));
  border: 1px solid rgba(80, 201, 181, .35);
  border-radius: 12px;
  background: rgba(25, 25, 25, .98);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.project-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.project-panel-head h2 {
  margin: 0;
  font-size: 20px;
}
.project-close {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 8px;
  font-size: 22px;
}
.project-list {
  display: grid;
  gap: 14px;
  padding: 14px;
  max-height: 380px;
  overflow: auto;
}
.project-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.project-item.is-active {
  border-color: var(--accent);
  background: rgba(80, 201, 181, .08);
}
.project-thumb {
  width: 62px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(80, 201, 181, .25);
  box-shadow: none;
}
.project-thumb-a {
  background:
    radial-gradient(circle at 70% 30%, rgba(245, 232, 158, .72), transparent 16%),
    linear-gradient(135deg, #29443a, #102028);
}
.project-thumb-b {
  background:
    radial-gradient(circle at 55% 34%, rgba(125, 224, 255, .46), transparent 18%),
    linear-gradient(135deg, #22394b, #11171d);
}
.project-thumb-c {
  background:
    linear-gradient(115deg, #c8d4df 0 45%, #7b9cb4 45% 60%, #e4eadf 60% 100%);
}
.project-item input {
  min-height: 38px;
  font-size: 15px;
  font-weight: 800;
}
.project-delete {
  min-height: 38px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
}
.project-add {
  width: calc(100% - 28px);
  min-height: 40px;
  margin: 0 14px 14px;
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(80, 201, 181, .08);
  font-weight: 800;
}
.asset-library-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(8px);
}
.asset-library-modal.hidden { display: none; }
.asset-library-panel {
  width: min(980px, calc(100vw - 48px));
  max-height: calc(100vh - 72px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(80, 201, 181, .28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 8%, rgba(80, 201, 181, .12), transparent 28%),
    linear-gradient(180deg, #202020 0%, #171717 56%, #111 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .56);
  overflow: hidden;
}
.asset-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.asset-library-head h2 {
  margin: 0;
  font-size: 20px;
}
.asset-library-close {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  font-size: 22px;
  line-height: 1;
}
.asset-library-body {
  min-height: 520px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
}
.asset-project-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border-right: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .025);
}
.asset-project {
  justify-content: flex-start;
  min-height: 42px;
  padding: 0 12px;
  text-align: left;
  font-weight: 700;
}
.asset-project.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(80, 201, 181, .10);
}
.asset-gallery {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 18px;
}
.asset-category h3 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 18px;
}
.asset-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.asset-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  min-height: 156px;
  text-align: left;
  font-weight: 700;
  background: rgba(255, 255, 255, .035);
}
.asset-card:hover {
  border-color: var(--accent);
}
.asset-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid rgba(80, 201, 181, .26);
  background: #101010;
}
.asset-thumb-role-1 {
  background:
    radial-gradient(circle at 52% 28%, rgba(235, 218, 194, .75), transparent 12%),
    radial-gradient(ellipse at 52% 60%, rgba(30, 26, 22, .86), transparent 24%),
    linear-gradient(135deg, #243530, #0c1416);
}
.asset-thumb-role-2 {
  background:
    radial-gradient(circle at 52% 28%, rgba(228, 208, 188, .7), transparent 11%),
    radial-gradient(ellipse at 52% 64%, rgba(16, 22, 25, .88), transparent 28%),
    linear-gradient(135deg, #2d3f46, #11171d);
}
.asset-thumb-role-3 {
  background:
    radial-gradient(circle at 52% 28%, rgba(242, 218, 196, .68), transparent 11%),
    radial-gradient(ellipse at 52% 64%, rgba(52, 39, 34, .72), transparent 28%),
    linear-gradient(135deg, #455651, #151b1d);
}
.asset-thumb-scene-1 {
  background:
    radial-gradient(circle at 78% 20%, rgba(232, 80, 180, .62), transparent 10%),
    linear-gradient(135deg, #142135, #252636 44%, #191a20);
}
.asset-thumb-scene-2 {
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(135deg, #22252a, #111417);
}
.asset-thumb-scene-3 {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 240, 170, .58), transparent 12%),
    linear-gradient(135deg, #314335, #101412);
}
.asset-thumb-prop-1 {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(24, 24, 24, .9), transparent 28%),
    linear-gradient(135deg, #424242, #151515);
}
.asset-thumb-prop-2 {
  background:
    linear-gradient(115deg, #c8d4df 0 45%, #7b9cb4 45% 60%, #e4eadf 60% 100%);
}
.asset-thumb-prop-3 {
  background:
    radial-gradient(circle at 55% 38%, rgba(126, 224, 255, .42), transparent 18%),
    linear-gradient(135deg, #18242d, #38434b);
}
.account-menu { position: relative; flex: 0 0 auto; }
.avatar-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  border-color: var(--accent);
  color: #08201b;
  font-weight: 800;
}
.avatar-btn span { display: block; line-height: 1; }
.avatar-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: #08201b;
  filter: brightness(1.06);
}
.account-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  width: 118px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1c1c;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
  display: none;
  gap: 6px;
}
.account-menu:hover .account-popover,
.account-menu:focus-within .account-popover { display: grid; }
.account-popover button {
  width: 100%;
  min-height: 32px;
  text-align: left;
  padding: 0 10px;
  background: transparent;
}
button:hover:not(:disabled), .tab.is-active { border-color: var(--accent); color: var(--accent); }
#generatorForm .tab {
  min-height: 38px;
  border-radius: 8px;
  background: transparent;
  border-color: transparent;
  color: #d7e0e7;
  font-weight: 700;
}
#generatorForm .tab.is-active {
  background: #263c38;
  border-color: var(--accent);
  color: var(--accent);
}
button:disabled { cursor: default; opacity: .45; }
label { display: grid; gap: 6px; margin-bottom: 12px; color: var(--muted); }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #1c1c1c; color: var(--text); padding: 9px 10px; outline: none; }
textarea { resize: vertical; min-height: 132px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
#generatorForm > label:first-of-type {
  padding: 0;
  color: #c8d5df;
  font-weight: 700;
}
.prompt-box {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-height: 230px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #1c1c1c;
}
.prompt-reference-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: start;
}
.prompt-input-wrap {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
#generatorForm[data-mode="chat"] .prompt-box {
  min-height: 360px;
  grid-template-rows: 1fr;
}
#generatorForm[data-mode="chat"] .prompt-reference-row,
#generatorForm[data-mode="chat"] .prompt-tools {
  display: none;
}
#generatorForm[data-mode="chat"] .prompt-input-wrap {
  grid-template-rows: 1fr auto;
}
.chat-dialogue-board {
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: auto;
  padding: 2px 2px 6px;
}
.chat-dialogue-board.hidden { display: none; }
.chat-bubble {
  max-width: 92%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #242424;
  color: var(--text);
  line-height: 1.6;
}
.chat-bubble-user {
  justify-self: end;
  background: rgba(80, 201, 181, .18);
  border-color: rgba(80, 201, 181, .45);
}
.chat-bubble-ai {
  justify-self: start;
  display: grid;
  gap: 4px;
}
#generatorForm[data-mode="chat"] #prompt {
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #181818;
}
.video-reference-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.video-reference-modes.hidden { display: none; }
.video-mode-option {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  background: #242424;
  color: var(--muted);
  border-color: var(--line);
  font-weight: 700;
}
.video-mode-option.is-active {
  background: #303030;
  color: var(--text);
  border-color: #6a6a6a;
}
.video-mode-option:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.prompt-guide {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  display: grid;
  gap: 4px;
  padding-top: 2px;
}
.prompt-guide strong {
  color: #d7e0e7;
  font-weight: 700;
}
#prompt {
  min-height: 132px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f4f8fb;
  font-size: 14px;
  line-height: 1.6;
  padding: 0;
}
.attach-media-btn {
  width: 88px;
  min-width: 88px;
  height: 96px;
  min-height: 96px;
  padding: 8px;
  display: grid;
  place-items: center;
  gap: 4px;
  border-radius: 8px;
  background: #242424;
  border-color: var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.attach-plus { font-size: 24px; color: var(--accent); line-height: 1; }
.attach-media-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.attached-media-label {
  color: var(--accent);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.attached-media-preview {
  width: 92px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #101010;
}
.attached-media-preview img,
.attached-media-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
#prompt:focus {
  border-color: transparent;
  box-shadow: none;
}
.prompt-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(76, 201, 176, .22);
}
.prompt-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.prompt-tools span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #202020;
  color: #d7e0e7;
  font-size: 12px;
  font-weight: 700;
}
#generatorForm input,
#generatorForm select {
  min-height: 44px;
  border-radius: 8px;
  background: #1c1c1c;
  border-color: var(--line);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
#generateBtn { grid-column: 1 / -1; }
.hidden { display: none; }
#generatorForm .image-only,
#generatorForm .video-only,
#generatorForm .beautify-only,
#generatorForm .chat-only {
  padding-top: 2px;
}
#generatorForm .row label,
#generatorForm .video-only > label,
#generatorForm .beautify-only > label {
  margin-bottom: 12px;
}
#generatorForm .source-actions {
  gap: 10px;
}
#generatorForm .source-actions button,
#generatorForm .actions button:not(#generateBtn),
#generatorForm .settings-actions button {
  min-height: 42px;
  border-radius: 8px;
  background: var(--panel-2);
  border-color: var(--line);
  font-weight: 700;
}
#generatorForm .actions button:not(#generateBtn):hover:not(:disabled),
#generatorForm .source-actions button:hover:not(:disabled),
#generatorForm .settings-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.settings { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; }
summary { cursor: pointer; color: var(--accent); margin-bottom: 12px; font-weight: 700; }
.settings-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.settings-group h3 {
  margin: 0 0 10px;
  color: #d7e0e7;
  font-size: 13px;
}
#generateBtn {
  min-height: 46px;
  border-radius: 8px;
  background: var(--accent);
  color: #08201b;
  border-color: var(--accent);
  font-size: 15px;
  font-weight: 800;
}
.source-label {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1c1c;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.chat-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-card {
  min-height: 56px;
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: #263c38;
}
.chat-result {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 16px;
  align-self: stretch;
  justify-self: stretch;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.65;
  text-align: left;
}
.chat-result-title { color: var(--accent); font-weight: 800; margin-bottom: 10px; }
.preview-panel { min-height: 520px; display: grid; grid-template-rows: auto auto minmax(210px, .9fr) auto minmax(88px, 130px); gap: 12px; }
.preview-head { display: flex; justify-content: space-between; gap: 12px; }
.status { color: var(--muted); white-space: nowrap; }
.status.error { color: var(--danger); }
.diagnostics { min-height: 30px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #1c1c1c; overflow-wrap: anywhere; }
.preview-wrap { position: relative; min-height: 260px; }
.preview-wrap.hidden,
.edit-panel.hidden,
.chat-history-panel.hidden { display: none; }
.preview-download { position: absolute; top: 10px; right: 10px; z-index: 2; min-height: 30px; padding: 0 12px; }
.preview { display: grid; place-items: center; overflow: hidden; min-height: 260px; height: 100%; border: 1px dashed var(--line); border-radius: 8px; background: #101010; }
.preview.empty { color: var(--muted); }
.preview img, .preview video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.chat-history-panel {
  min-height: 430px;
  overflow: auto;
  padding: 4px 2px 8px;
  display: grid;
  align-content: start;
  gap: 18px;
}
.chat-history-actions {
  display: grid;
  gap: 8px;
}
.chat-history-actions button {
  min-height: 32px;
  justify-content: start;
  text-align: left;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
}
.chat-history-actions button:hover:not(:disabled) {
  background: #2a2a2a;
  border-color: transparent;
  color: var(--text);
}
.chat-history-group {
  display: grid;
  gap: 4px;
}
.chat-history-group h3 {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.chat-history-item {
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  text-align: left;
}
.chat-history-item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-history-item time {
  color: var(--muted);
  font-size: 12px;
}
.chat-history-item.is-active,
.chat-history-item:hover:not(:disabled) {
  background: #2a2a2a;
  border-color: transparent;
  color: var(--text);
}
.records-page-open .grid {
  display: none;
}
.records-modal {
  width: 100%;
  max-height: none;
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #202020;
  box-shadow: none;
  overflow: hidden;
}
.records-modal.hidden { display: none; }
.records-modal-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: default;
  user-select: none;
}
.records-close {
  width: auto;
  min-width: 72px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
}
.records-filters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 12px 14px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 9px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 0%, rgba(80, 201, 181, .10), transparent 26%),
    linear-gradient(180deg, #17202a, #11171d);
  box-shadow: inset 0 0 0 1px rgba(80, 201, 181, .04);
}
.record-filter {
  min-height: 54px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  background: transparent;
  color: #c4c9cf;
  font-size: 15px;
  font-weight: 800;
}
.record-filter:last-child { border-right: 0; }
.record-filter:hover {
  background: rgba(80, 201, 181, .06);
}
.records-sub-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 150px;
  gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(80, 201, 181, 0.04);
}
.records-sub-filters.hidden { display: none; }
.record-filter.is-active {
  color: var(--accent);
  background:
    radial-gradient(circle at 50% 0%, rgba(80, 201, 181, .18), transparent 42%),
    linear-gradient(180deg, rgba(80, 201, 181, .08), rgba(80, 201, 181, .03));
  box-shadow: inset 0 0 0 1px rgba(80, 201, 181, .82), inset 0 -3px 0 var(--accent);
}
.record-sub-filter.is-active { border-color: var(--accent); color: var(--accent); }
.record-sub-filter { min-height: 46px; font-size: 12px; }
.sub-filter-card {
  position: relative;
  overflow: hidden;
  justify-content: center;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  background:
    linear-gradient(135deg, rgba(12, 12, 12, .52), rgba(12, 12, 12, .18)),
    linear-gradient(135deg, #1f4d63, #26333e);
}
.sub-filter-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  background-size: cover;
  background-position: center;
}
.sub-filter-card span,
.sub-filter-card { isolation: isolate; }
.sub-filter-role::before {
  background-image: radial-gradient(circle at 35% 30%, #73e0cf 0 10%, transparent 11% 100%), linear-gradient(140deg, #174a41, #23313c);
}
.sub-filter-scene::before {
  background-image: linear-gradient(135deg, rgba(76, 201, 176, .7), transparent 38%), linear-gradient(20deg, #102c42, #405064);
}
.sub-filter-shot::before {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 18px), linear-gradient(135deg, #193b54, #342f58);
}
.record-sub-select {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}
.record-sub-select span { color: var(--muted); font-size: 12px; }
.record-sub-select select {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  background: #202020;
}
.records-list { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; padding: 12px; display: grid; align-content: start; gap: 10px; }
.records-list-modal { min-height: 520px; max-height: none; padding: 14px; }
/* 记录卡片整表替换时由 renderRecords 显式恢复媒体列表位置，避免浏览器锚定把视口推向列表末尾。 */
html body .records-list.is-media-record-list { overflow-anchor: none; }
.dialogue-record-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 680px;
}
.dialogue-record-main {
  position: relative;
  min-height: 680px;
  padding: 28px 34px 190px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 0%, rgba(80, 201, 181, .10), transparent 30%),
    linear-gradient(180deg, #202020 0%, #171717 55%, #141414 100%);
  color: #f0f0f0;
  overflow: hidden;
}
.dialogue-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 72px;
}
.dialogue-record-top h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: #f4f4f4;
}
.dialogue-record-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #242424;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .22);
}
.dialogue-record-tools button {
  width: auto;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #eeeeee;
  font-size: 13px;
  font-weight: 600;
}
.dialogue-message {
  max-width: 610px;
  margin-left: auto;
  margin-bottom: 58px;
  padding: 20px 22px;
  border-radius: 22px;
  background: #2a2a2a;
  color: #f1f1f1;
  line-height: 1.65;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .03);
}
.dialogue-message p {
  margin: 0;
  font-size: 15px;
}
.dialogue-message b {
  color: #5e6e7a;
  font-weight: 700;
}
.dialogue-attachment-stack {
  position: absolute;
  right: 46px;
  top: 84px;
  display: flex;
  transform: rotate(-8deg);
}
.dialogue-attachment-stack span {
  width: 50px;
  height: 60px;
  margin-left: -22px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 60% 20%, rgba(255, 255, 255, .6), transparent 16%),
    linear-gradient(145deg, #88a354, #cfe2ee 44%, #6f9dc5);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .14);
}
.dialogue-result {
  width: min(520px, 100%);
  margin-left: 28px;
}
.dialogue-result-status {
  color: #6d7d88;
  font-size: 15px;
  margin-bottom: 12px;
}
.dialogue-result p {
  margin: 0 0 18px;
  color: #f0f0f0;
  font-size: 16px;
  line-height: 1.72;
}
.dialogue-preview-media {
  width: 390px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background:
    radial-gradient(circle at 48% 32%, rgba(255, 242, 172, .86), transparent 16%),
    radial-gradient(circle at 45% 58%, rgba(255, 255, 255, .38), transparent 24%),
    linear-gradient(160deg, #cad8bd, #80a766 45%, #506f45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.dialogue-play {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .42);
}
.dialogue-ai-note {
  margin-top: 12px;
  color: #8a96a1;
  font-size: 14px;
}
.dialogue-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.dialogue-result-actions button {
  width: auto;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #eceef0;
  color: #111;
  font-weight: 700;
}
.dialogue-bottom-input {
  position: fixed;
  left: 68px;
  right: 68px;
  bottom: 20px;
  z-index: 80;
  max-width: 920px;
  margin: 0 auto;
  min-height: 118px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(80, 201, 181, .35);
  border-radius: 14px;
  background:
    radial-gradient(circle at 22% 0%, rgba(80, 201, 181, .10), transparent 28%),
    linear-gradient(180deg, rgba(34, 34, 34, .98), rgba(20, 20, 20, .98));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .30);
}
.dialogue-input-main {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.dialogue-upload-card {
  width: 84px !important;
  min-width: 84px !important;
  height: 64px;
  min-height: 64px !important;
  border: 1px dashed rgba(255, 255, 255, .20) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 28px !important;
}
.dialogue-placeholder {
  color: rgba(216, 225, 230, .72);
  font-weight: 700;
  line-height: 1.8;
}
.dialogue-input-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dialogue-input-tools button {
  width: auto;
  min-width: 42px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #d8d8d8;
  font-size: 14px;
  font-weight: 800;
}
.dialogue-agent-wrap {
  position: relative;
}
.dialogue-agent-btn {
  color: var(--accent) !important;
  border-color: rgba(80, 201, 181, .36) !important;
  background: linear-gradient(135deg, rgba(26, 96, 91, .78), rgba(16, 32, 39, .95)) !important;
  box-shadow: inset 0 0 0 1px rgba(80, 201, 181, .14);
  font-weight: 800;
}
.dialogue-agent-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 25;
  display: none;
  width: 190px;
  padding: 8px;
  border: 1px solid rgba(80, 201, 181, .26);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(80, 201, 181, .12), transparent 28%),
    linear-gradient(180deg, #202020, #121212);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52);
}
.dialogue-agent-menu.hidden {
  display: none !important;
}
.dialogue-agent-menu button {
  justify-content: flex-start;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  text-align: left;
  background: transparent;
}
.dialogue-agent-menu button::before {
  content: attr(data-agent-icon);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 7px;
  color: #55dbc9;
  background: rgba(80, 201, 181, .10);
  font-size: 13px;
}
.dialogue-agent-menu button:hover {
  color: var(--accent);
  background: rgba(80, 201, 181, .10);
}
.dialogue-agent-menu button.is-active {
  color: var(--accent);
  background: rgba(80, 201, 181, .14);
}
.dialogue-agent-menu button.is-active::after {
  content: "✓";
  margin-left: auto;
}
.dialogue-video-tools {
  display: none;
  align-items: center;
  gap: 8px;
}
.dialogue-video-tools button {
  min-width: 70px;
  border-color: rgba(80, 201, 181, .26) !important;
  background: rgba(80, 201, 181, .08) !important;
}
.dialogue-video-tools .dialogue-video-duration {
  width: 54px;
  min-width: 54px;
  justify-content: center;
}
.dialogue-input-tools.is-video-mode .dialogue-video-tools {
  display: flex;
}
.dialogue-input-tools.is-video-mode .dialogue-auto-btn,
.dialogue-input-tools.is-video-mode .dialogue-mic-btn {
  display: none;
}
.dialogue-input-tools.is-video-mode .dialogue-preferences-toggle {
  display: inline-flex;
}
.dialogue-input-tools.is-video-mode .dialogue-at-btn {
  margin-left: 0;
}
.dialogue-bottom-input .dialogue-input-tools .dialogue-send {
  margin-left: auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #101010;
  font-weight: 900;
  font-size: 20px;
}
.dialogue-preferences-toggle {
  width: auto !important;
  min-width: 88px !important;
  padding: 0 14px !important;
  font-weight: 800;
}

#dialoguePrefBtn,
.dialogue-skill-btn {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#dialoguePrefBtn {
  width: min(152px, 30vw) !important;
  max-width: 152px !important;
}

.dialogue-skill-btn {
  min-width: 94px !important;
  max-width: 112px !important;
  padding-inline: 11px !important;
}
.dialogue-preferences-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 20;
  display: grid;
  gap: 16px;
  padding: 18px;
  width: min(390px, 100%);
  border: 1px solid rgba(80, 201, 181, .22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 0%, rgba(80, 201, 181, .12), transparent 28%),
    linear-gradient(180deg, #202020 0%, #171717 58%, #111 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .52);
}
.dialogue-preferences-popover.hidden { display: none; }
.dialogue-preferences-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-weight: 800;
}
.dialogue-pref-close {
  width: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 20px !important;
}
.dialogue-pref-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}
.dialogue-pref-tabs button,
.dialogue-ratio-grid button {
  width: auto;
  min-height: 36px;
  border-color: transparent;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font-weight: 800;
}
.dialogue-pref-tabs button.is-active,
.dialogue-ratio-grid button.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(80, 201, 181, .10);
}
.dialogue-pref-section {
  display: grid;
  gap: 10px;
}
.dialogue-pref-section > span {
  color: var(--muted);
  font-weight: 800;
}
.dialogue-ratio-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.dialogue-pref-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dialogue-pref-selects select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #191919;
  color: var(--text);
  font-weight: 700;
}
.dialogue-history-panel {
  position: absolute;
  right: 18px;
  top: 80px;
  z-index: 20;
  width: 250px;
  min-height: 520px;
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(80, 201, 181, .08), transparent 32%),
    #171717;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .48);
}
.dialogue-history-panel.hidden {
  display: none;
}
.dialogue-history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 14px;
  color: #f2f2f2;
  font-size: 16px;
  font-weight: 800;
}
.dialogue-history-close {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d8d8d8;
  font-size: 20px;
}
.dialogue-new-chat,
.dialogue-history-item {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 8px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #ddd;
  text-align: left;
}
.dialogue-new-chat {
  background: #242424;
}
.dialogue-history-item.is-active,
.dialogue-history-item:hover {
  background: #2b2b2b;
  border-color: rgba(80, 201, 181, .26);
}
.dialogue-history-thumb {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background:
    radial-gradient(circle at 45% 35%, rgba(255,255,255,.6), transparent 14%),
    linear-gradient(135deg, #547b58, #d0b16b);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.storyboard-board {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(80, 201, 181, .055), transparent 28%),
    linear-gradient(180deg, #151b20 0%, #0f1418 42%, #0a0d10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(80, 201, 181, .025),
    inset 0 22px 42px rgba(255, 255, 255, .025);
}
.storyboard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 44px;
  color: var(--muted);
  font-size: 12px;
  background: #0f0f0f;
  border: 1px solid #252525;
}
.storyboard-steps span { display: inline-flex; align-items: center; gap: 6px; }
.storyboard-steps b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f2f2f2;
  color: #111;
}
.storyboard-steps em { color: #f0f0f0; font-style: normal; font-weight: 700; }
.storyboard-steps small { color: var(--muted); }
.storyboard-steps .is-active {
  padding: 6px 12px;
  border-radius: 10px;
  background: #2a2a2a;
}
.storyboard-steps strong {
  margin-left: auto;
  padding-right: 16px;
  color: #f0f0f0;
  font-size: 12px;
}
.storyboard-column-head {
  display: grid;
  /* 对白/音效/音乐需要承载三组字段，给它与画面列同等的可伸缩空间。 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(80, 201, 181, .07), transparent 34%),
    linear-gradient(180deg, #171f25 0%, #10161a 62%, #0c1013 100%);
}
.storyboard-column-head span {
  min-height: 56px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, .085);
  color: #3fe0ca;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(63, 224, 202, .22);
}
.storyboard-column-head span:last-child { border-right: 0; }
.storyboard-card-list {
  display: grid;
  gap: 0;
}
.storyboard-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  min-height: 180px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .115);
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -16%, rgba(80, 201, 181, .035), transparent 34%),
    linear-gradient(180deg, rgba(17, 23, 28, .99) 0%, rgba(12, 17, 21, .995) 54%, rgba(8, 11, 14, .995) 100%);
  cursor: pointer;
}
.storyboard-card.is-editing {
  background:
    radial-gradient(circle at 50% -16%, rgba(80, 201, 181, .06), transparent 34%),
    linear-gradient(180deg, rgba(18, 25, 30, .99) 0%, rgba(13, 18, 22, .995) 58%, rgba(9, 12, 15, .995) 100%);
}
.storyboard-card:last-child { border-bottom: 0; }
.storyboard-card:hover {
  background:
    radial-gradient(circle at 50% -16%, rgba(80, 201, 181, .055), transparent 34%),
    linear-gradient(180deg, rgba(18, 25, 30, .99) 0%, rgba(13, 18, 22, .995) 58%, rgba(9, 12, 15, .995) 100%);
}
.storyboard-number {
  position: absolute;
  display: none !important;
  right: 0;
  top: 0;
  width: 54px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 900;
  border-left: 1px solid rgba(80, 201, 181, .55);
  border-bottom: 1px solid rgba(80, 201, 181, .55);
  border-radius: 0 0 0 18px;
  background: rgba(12, 34, 39, .90);
}
.storyboard-cell {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 15px;
  padding: 28px 28px 24px 30px;
  border-right: 1px solid rgba(255, 255, 255, .085);
}
.storyboard-cell:last-child { border-right: 0; }
.storyboard-cell > *,
.storyboard-block,
.storyboard-block > * {
  min-width: 0;
  max-width: 100%;
}
.storyboard-block p,
.storyboard-block [data-editable-text] {
  overflow-wrap: anywhere;
}
.storyboard-block {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.storyboard-visual .storyboard-block {
  grid-template-columns: 1fr;
  gap: 8px;
}
.storyboard-visual .storyboard-block p {
  max-width: 100%;
}
.storyboard-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.storyboard-block-head h4 {
  margin: 0;
}
.storyboard-shot-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}
.storyboard-shot-label strong {
  color: #eef7f5;
  font-size: 15px;
  font-weight: 800;
}

.storyboard-shot-editor {
  position: relative;
}

.storyboard-shot-trigger {
  width: auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #eef7f5;
}

.storyboard-shot-trigger:hover,
.storyboard-shot-trigger[aria-expanded="true"] {
  border-color: #53636a;
  background: #142027;
}

.storyboard-shot-trigger i {
  color: #82949a;
  font-size: 10px;
  font-style: normal;
}

.storyboard-shot-popover {
  position: absolute;
  z-index: 140;
  top: calc(100% + 6px);
  right: 0;
  width: 190px;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #405159;
  border-radius: 6px;
  background: #101a20;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

.storyboard-shot-popover.hidden {
  display: none !important;
}

.storyboard-shot-popover select,
.storyboard-shot-popover input {
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #405159;
  border-radius: 4px;
  background: #111c22;
  color: #eef7f5;
  font-size: 12px;
  outline: none;
}

.storyboard-shot-popover input[hidden],
.storyboard-card-empty .storyboard-shot-label .storyboard-field-combo input[hidden] {
  display: none !important;
}

.storyboard-shot-popover select:focus,
.storyboard-shot-popover input:focus {
  border-color: #718087;
}

/* Records preview repair: make storyboard prompt input match the dialogue composer. */
.storyboard-inline-editor .storyboard-edit-field {
  min-height: 118px !important;
  gap: 10px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(80, 201, 181, .35) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(80, 201, 181, .10), transparent 28%),
    linear-gradient(180deg, rgba(34, 34, 34, .98), rgba(20, 20, 20, .98)) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .30) !important;
}
.storyboard-inline-editor .storyboard-edit-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.storyboard-inline-editor .storyboard-edit-head > span {
  color: var(--accent) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
.storyboard-inline-editor .storyboard-edit-prompt {
  min-height: 78px !important;
  height: 92px !important;
  padding: 4px 2px !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d8e1e6 !important;
  resize: none !important;
  box-shadow: none !important;
}
.storyboard-inline-editor .storyboard-edit-prompt:focus {
  outline: none !important;
}

/* Records preview repair: compact prompt asset row. */
.storyboard-inline-editor .storyboard-prompt-row {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}
.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick {
  width: auto !important;
  min-width: 92px !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets {
  left: 0 !important;
  top: 42px !important;
  width: 230px !important;
  z-index: 120 !important;
}
.storyboard-inline-editor .storyboard-prompt-row:hover .storyboard-assets,
.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets:hover {
  display: grid !important;
}
.storyboard-inline-editor .storyboard-prompt-row .storyboard-asset {
  min-height: 72px !important;
  cursor: pointer;
}
.storyboard-inline-editor .storyboard-prompt-title {
  margin-left: auto;
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}
.storyboard-inline-editor .storyboard-prompt-row .storyboard-editor-close {
  margin-left: 2px;
}
.storyboard-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.storyboard-icon {
  position: relative;
  display: flex;
  align-items: center;
  color: #3fe0ca;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  justify-content: flex-start;
  text-align: left;
}
.storyboard-icon::before {
  content: none;
}
.storyboard-block p {
  margin: 0;
  color: #d6dadd;
  font-size: 16px;
  line-height: 1.62;
  font-weight: 600;
  word-break: break-word;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .38);
  cursor: text;
}
.storyboard-block p:hover {
  color: #eef7f5;
}
.storyboard-block p.is-editing-text {
  width: 100%;
}
.storyboard-text-editor {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid rgba(80, 201, 181, .7);
  border-radius: 6px;
  background: rgba(4, 10, 12, .92);
  color: #eef7f5;
  font: inherit;
  line-height: 1.62;
}
.storyboard-shot-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 1px solid rgba(80, 201, 181, .32);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 32%, rgba(248, 234, 162, .74), transparent 13%),
    radial-gradient(circle at 44% 70%, rgba(210, 235, 218, .28), transparent 25%),
    linear-gradient(150deg, #172927, #35543d 58%, #11212a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}
.storyboard-shot-thumb b,
.storyboard-shot-thumb em {
  position: absolute;
  top: 8px;
  z-index: 1;
  min-width: 34px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(9, 28, 32, .84);
  color: #3fe0ca;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  border: 1px solid rgba(80, 201, 181, .46);
}
.storyboard-shot-thumb b {
  left: 8px;
}
.storyboard-shot-thumb em {
  right: 8px;
  color: #e6f3f1;
}
.storyboard-shot-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .48));
}
.storyboard-shot-thumb span {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 1;
  color: rgba(255, 255, 255, .86);
  font-size: 12px;
  font-weight: 800;
}
.storyboard-shot-thumb-2 {
  background:
    radial-gradient(circle at 60% 24%, rgba(210, 220, 255, .48), transparent 14%),
    linear-gradient(145deg, #1d2e43, #2d4457 56%, #111823);
}
.storyboard-shot-thumb-3 {
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 220, 170, .52), transparent 14%),
    linear-gradient(145deg, #3c2c25, #4c5542 56%, #121916);
}
.storyboard-inline-editor {
  position: fixed;
  left: 50%;
  top: 12vh;
  z-index: 80;
  width: min(880px, calc(100vw - 72px));
  max-height: calc(100vh - 96px);
  display: grid;
  gap: 18px;
  padding: 24px 30px 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 0%, rgba(80, 201, 181, .13), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(80, 201, 181, .05), transparent 36%),
    linear-gradient(145deg, rgba(4, 9, 11, .98), rgba(2, 5, 7, .98));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .72),
    0 0 0 9999px rgba(0, 0, 0, .52);
  transform: translateX(-50%);
  cursor: default;
  overflow: visible;
}
.storyboard-editor-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.storyboard-editor-title strong {
  color: #13e4d4;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(19, 228, 212, .22);
}
.storyboard-editor-close {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #d8d8d8;
  font-size: 20px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
}
.storyboard-editor-content {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.storyboard-assets {
  position: absolute;
  left: 0;
  top: 52px;
  z-index: 2;
  width: 250px;
  display: none;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(80, 201, 181, .35);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(80, 201, 181, .11), transparent 42%),
    rgba(4, 12, 13, .92);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .45);
}
.storyboard-pick[data-pick="role"]:hover ~ .storyboard-assets,
.storyboard-assets:hover {
  display: grid;
}
.storyboard-asset {
  position: relative;
  min-height: 86px;
  justify-content: flex-start;
  align-items: end;
  padding: 0 12px 10px;
  border-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 8, 10, .15), rgba(5, 8, 10, .64)),
    radial-gradient(circle at 70% 34%, rgba(245, 226, 212, .38), transparent 18%),
    radial-gradient(ellipse at 66% 73%, rgba(28, 37, 34, .92), transparent 30%),
    linear-gradient(135deg, #243935, #10181a);
  color: #f0f0f0;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}
.storyboard-asset:nth-child(2) {
  background:
    linear-gradient(90deg, rgba(5, 8, 10, .16), rgba(5, 8, 10, .68)),
    radial-gradient(circle at 66% 35%, rgba(236, 218, 205, .36), transparent 18%),
    radial-gradient(ellipse at 65% 74%, rgba(20, 24, 28, .92), transparent 30%),
    linear-gradient(135deg, #30383e, #12171b);
}
.storyboard-asset:nth-child(3) {
  background:
    linear-gradient(90deg, rgba(5, 8, 10, .16), rgba(5, 8, 10, .68)),
    radial-gradient(circle at 68% 35%, rgba(243, 214, 194, .38), transparent 18%),
    radial-gradient(ellipse at 67% 74%, rgba(40, 45, 39, .88), transparent 30%),
    linear-gradient(135deg, #3a4744, #141a1b);
}
.storyboard-asset:nth-child(4) {
  background:
    linear-gradient(90deg, rgba(5, 8, 10, .18), rgba(5, 8, 10, .72)),
    radial-gradient(circle at 68% 35%, rgba(226, 209, 196, .34), transparent 18%),
    radial-gradient(ellipse at 67% 74%, rgba(16, 20, 26, .92), transparent 30%),
    linear-gradient(135deg, #222f38, #0f1418);
}
.storyboard-asset.is-active {
  border-color: #13e4d4;
  box-shadow: inset 0 0 0 1px #13e4d4;
}
.storyboard-asset b {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #13e4d4;
  color: #051010;
}
.storyboard-prompt-tabs,
.storyboard-editor-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.storyboard-prompt-tabs {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
}
.storyboard-pick {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 20px;
  border-color: rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: #d6dadd;
  font-size: 16px;
  font-weight: 800;
}
.storyboard-pick.is-active {
  color: #f5ffff;
  border-color: #13e4d4;
  background: rgba(19, 228, 212, .10);
  box-shadow: inset 0 0 0 1px rgba(19, 228, 212, .70);
}
.storyboard-edit-field {
  display: grid;
  gap: 8px;
  color: #13e4d4;
  font-size: 21px;
  font-weight: 900;
  text-align: left;
}
.storyboard-edit-prompt {
  min-height: 178px;
  resize: vertical;
  border: 1px solid rgba(19, 228, 212, .72);
  border-radius: 10px;
  background: rgba(5, 8, 10, .82);
  color: #e7e7e7;
  padding: 18px;
  font-size: 16px;
  line-height: 1.8;
}
.storyboard-editor-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}
.storyboard-editor-tools button {
  width: auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #d6dadd;
}
.storyboard-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.storyboard-edit-actions button {
  min-height: 40px;
  border-color: rgba(80, 201, 181, .65);
  background: var(--accent);
  color: #101010;
  font-weight: 900;
}
.storyboard-prompt-btn,
.storyboard-more-btn {
  width: auto;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
  background: transparent;
}
.storyboard-prompt-btn { color: var(--text); }
.storyboard-more-btn { min-width: 34px; }
.record-item { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: #181818; text-align: left; display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; cursor: pointer; }
.record-item.is-editing { grid-template-columns: 264px 1fr; align-items: start; }
.record-item:hover { border-color: var(--accent); }
.record-thumb-wrap { position: relative; width: 132px; height: 84px; overflow: hidden; border-radius: 6px; background: #0c0c0c; }
.record-item.is-editing .record-thumb-wrap { width: 264px; height: 168px; }
.record-thumb { width: 132px; height: 84px; border-radius: 6px; background: #0c0c0c; object-fit: cover; display: block; }
.record-item.is-editing .record-thumb { width: 264px; height: 168px; }
.record-thumb-empty { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.record-info-popover {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .78);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.record-info-popover div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-thumb-wrap:hover .record-info-popover,
.record-item:hover .record-info-popover {
  opacity: 1;
  transform: translateY(0);
}
.record-body { min-width: 0; }
.record-row-head { display: grid; grid-template-columns: 1fr 108px; gap: 12px; align-items: center; margin-bottom: 6px; }
.record-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-width: 0; }
.record-time { color: var(--muted); font-size: 12px; }
.record-status { color: var(--accent); font-size: 12px; white-space: nowrap; }
.record-actions { display: grid; gap: 6px; justify-items: stretch; align-items: center; }
.record-progress { width: 100%; height: 4px; border-radius: 999px; background: #303030; overflow: hidden; margin-bottom: 0; }
.record-progress span { display: block; height: 100%; background: var(--accent); }
.record-meta { color: var(--accent); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.record-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.record-tag {
  width: auto;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
  background: #202020;
}
.record-tag.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(80, 201, 181, 0.16);
}
.record-prompt {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.record-prompt.is-expanded {
  white-space: normal;
  overflow-wrap: anywhere;
}
.record-prompt-editor { display: grid; gap: 8px; }
.record-prompt-editor.hidden { display: none; }
.record-prompt-input {
  min-height: 68px;
  resize: vertical;
  border-radius: 6px;
  border-color: var(--accent);
  background: #1c1c1c;
}
.shot-prompt-editor { display: grid; gap: 8px; }
.shot-prompt-editor label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.shot-role-row {
  grid-template-columns: 44px minmax(120px, 180px);
  align-items: center;
}
.shot-prompt-editor select,
.shot-prompt-editor textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1c1c1c;
  color: var(--text);
}
.shot-prompt-editor textarea {
  min-height: 56px;
  resize: vertical;
}
.shot-prompt-editor textarea:focus,
.shot-prompt-editor select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(76, 201, 176, .18);
  outline: none;
}
.record-prompt-actions {
  display: grid;
  grid-template-columns: 84px 108px;
  gap: 8px;
}
.record-prompt-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-weight: 700;
}
.record-prompt-regenerate {
  background: var(--accent);
  border-color: var(--accent);
  color: #08201b;
}
.record-download { min-width: 58px; padding: 0 10px; }
.records-empty { color: var(--muted); }
.edit-panel { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #1c1c1c; }
.edit-panel textarea { min-height: 74px; }
.edit-video-reference-modes { margin: 8px 0 10px; }
.edit-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.edit-actions[data-count="1"] { grid-template-columns: 1fr; }
.edit-actions[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.edit-actions[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.edit-actions button {
  background: var(--accent);
  color: #08201b;
  border-color: var(--accent);
  font-weight: 700;
}
.edit-actions button:hover:not(:disabled) { filter: brightness(1.06); }
.log { min-height: 88px; overflow: auto; margin: 0; padding: 10px; border-radius: 6px; background: #111; border: 1px solid #303030; color: #d9d9d9; white-space: pre-wrap; }
@media (max-width: 760px) { .grid, .row, .actions, .settings-actions, .source-actions, .edit-actions { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .prompt-reference-row { grid-template-columns: 1fr; }
  .attach-media-btn { width: 100%; height: 54px; min-height: 54px; grid-auto-flow: column; justify-content: center; }
  .attached-media-preview { width: 100%; height: 96px; }
  .record-item { grid-template-columns: 88px 1fr; }
  .record-item.is-editing { grid-template-columns: 176px 1fr; }
  .record-thumb-wrap { width: 88px; height: 64px; }
  .record-item.is-editing .record-thumb-wrap { width: 176px; height: 128px; }
  .record-thumb { width: 88px; height: 64px; }
  .record-item.is-editing .record-thumb { width: 176px; height: 128px; }
  .record-row-head { grid-template-columns: 1fr; }
  .record-actions { justify-self: start; width: 120px; }
}

/* Records preview repair: compact dialogue composer with the plus button inside. */
.dialogue-bottom-input {
  min-height: 92px !important;
  grid-template-rows: minmax(42px, auto) auto !important;
  gap: 8px !important;
  padding: 12px 14px 12px 62px !important;
}
.dialogue-bottom-input .dialogue-plus {
  position: absolute !important;
  left: 18px !important;
  top: 18px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(80, 201, 181, .28) !important;
  background: rgba(80, 201, 181, .10) !important;
  color: var(--accent) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  z-index: 2 !important;
}
.dialogue-bottom-input textarea {
  min-height: 46px !important;
  height: 50px !important;
  padding: 8px 10px !important;
  border-color: transparent !important;
  background: transparent !important;
  resize: none !important;
}
.dialogue-bottom-input .dialogue-input-tools {
  min-height: 34px !important;
  gap: 8px !important;
}
.dialogue-bottom-input .dialogue-input-tools button {
  min-height: 32px !important;
  padding: 0 12px !important;
}
.dialogue-bottom-input .dialogue-send {
  position: absolute !important;
  right: 18px !important;
  bottom: 16px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
}

/* Records preview repair: move shot number and duration above the thumbnail. */
.storyboard-shot-head {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  color: var(--accent) !important;
  font-weight: 900 !important;
}
.storyboard-shot-head span {
  font-size: 13px !important;
}
.storyboard-shot-head strong {
  display: none !important;
}
.storyboard-shot-head em {
  justify-self: start !important;
  min-width: 30px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(80, 201, 181, .46) !important;
  border-radius: 999px !important;
  background: rgba(18, 31, 37, .96) !important;
  color: #d9fffa !important;
  font-size: 13px !important;
  font-style: normal !important;
}
.storyboard-shot-head em {
  justify-self: end !important;
}
.storyboard-shot-thumb {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 4px !important;
  cursor: zoom-in;
}
.storyboard-shot-thumb .storyboard-shot-no,
.storyboard-shot-thumb .storyboard-shot-duration,
.storyboard-shot-thumb strong,
.storyboard-shot-thumb span {
  display: none !important;
}

/* Records preview repair: fullscreen shot editor with point-based regeneration notes. */
.shot-fullscreen-editor {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 22px 32px 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(80, 201, 181, .11), transparent 34%),
    linear-gradient(180deg, rgba(3, 7, 9, .98), rgba(0, 0, 0, .98));
  color: #f0f7f6;
}
.shot-fullscreen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}
.shot-fullscreen-head > div {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.shot-fullscreen-head strong {
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
}
.shot-fullscreen-head span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 28px;
  border: 1px solid rgba(80, 201, 181, .42);
  border-radius: 999px;
  background: rgba(80, 201, 181, .10);
  font-weight: 900;
}
.shot-fullscreen-close {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: #edf5f3;
  font-size: 28px;
  font-weight: 300;
}
.shot-fullscreen-stage {
  min-height: 0;
  display: grid;
  place-items: center;
}
.shot-fullscreen-image {
  position: relative;
  width: min(1180px, 100%);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 230px);
  border: 1px solid rgba(80, 201, 181, .42);
  border-radius: 14px;
  overflow: hidden;
  cursor: crosshair;
  background:
    radial-gradient(circle at 50% 26%, rgba(248, 234, 162, .78), transparent 10%),
    radial-gradient(circle at 44% 64%, rgba(210, 235, 218, .24), transparent 24%),
    linear-gradient(150deg, #172927, #35543d 58%, #11212a);
  box-shadow:
    inset 0 -90px 160px rgba(0, 0, 0, .48),
    0 28px 80px rgba(0, 0, 0, .55);
}
.shot-fullscreen-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .42));
}
.shot-fullscreen-image > b,
.shot-fullscreen-image > em {
  position: absolute;
  top: 18px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 32px;
  border: 1px solid rgba(80, 201, 181, .55);
  border-radius: 999px;
  background: rgba(5, 21, 22, .78);
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}
.shot-fullscreen-image > b {
  left: 18px;
}
.shot-fullscreen-image > em {
  right: 18px;
  color: #f0f7f6;
}
.shot-fullscreen-image > span,
.shot-fullscreen-image > p {
  position: absolute;
  left: 22px;
  z-index: 2;
  margin: 0;
  font-weight: 900;
}
.shot-fullscreen-image > span {
  bottom: 50px;
  color: #f4faf8;
}
.shot-fullscreen-image > p {
  bottom: 22px;
  color: rgba(244, 250, 248, .74);
}
.shot-fullscreen-hint {
  justify-self: center;
  color: rgba(224, 238, 236, .68);
  font-size: 13px;
}
.shot-fullscreen-composer {
  position: relative;
  width: min(1180px, 100%);
  justify-self: center;
  min-height: 104px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 54px;
  grid-template-rows: minmax(48px, auto) auto;
  gap: 8px 12px;
  padding: 14px;
  border: 1px solid rgba(80, 201, 181, .42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(80, 201, 181, .09), transparent 36%),
    rgba(14, 22, 23, .94);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .36);
}
.shot-plus,
.shot-send {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(80, 201, 181, .12);
  color: #e7f3f1;
  font-size: 22px;
}
.shot-send {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: end;
  background: var(--accent);
  color: #09201c;
}
.shot-fullscreen-composer textarea {
  grid-column: 2;
  grid-row: 1;
  min-height: 52px;
  height: 58px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #eff8f6;
  font: inherit;
  font-weight: 800;
  resize: none;
}
.shot-fullscreen-composer textarea:focus {
  outline: none;
}
.shot-fullscreen-tools {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shot-fullscreen-tools button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: #eff8f6;
  font-weight: 900;
}
.shot-fullscreen-tools .shot-regenerate {
  border-color: rgba(80, 201, 181, .50);
  background: rgba(80, 201, 181, .20);
  color: var(--accent);
}
.shot-point-editor {
  position: absolute;
  z-index: 5;
  transform: translate(-18px, -18px);
}
.shot-point-dot {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #159bff;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.shot-point-box {
  position: absolute;
  left: 42px;
  top: 0;
  width: min(280px, 38vw);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(80, 201, 181, .48);
  border-radius: 10px;
  background: rgba(5, 12, 14, .94);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .46);
}
.shot-point-box textarea {
  min-height: 70px;
  padding: 9px;
  border: 1px solid rgba(80, 201, 181, .28);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: #edf7f5;
  font: inherit;
  resize: vertical;
}
.shot-point-box div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shot-point-box button {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  color: #eef7f5;
  font-weight: 800;
}
.shot-point-box .shot-point-regenerate {
  border-color: rgba(80, 201, 181, .52);
  background: rgba(80, 201, 181, .22);
  color: var(--accent);
}

/* Records preview repair: project name selector in the toolbar. */
#projectSelectorBtn.project-selector-btn {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 160px !important;
  padding: 0 16px 0 10px !important;
}
#projectSelectorBtn .project-selector-thumb {
  width: 34px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(80, 201, 181, .42) !important;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .08) !important;
}
.project-item input {
  cursor: text;
}

/* Records preview repair: project selector styled like the reference modal. */
.project-modal {
  padding-top: 54px !important;
  background: rgba(0, 0, 0, .62) !important;
  backdrop-filter: blur(12px) !important;
}
.project-panel {
  width: min(860px, calc(100vw - 72px)) !important;
  padding: 22px !important;
  border-color: rgba(255, 255, 255, .16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 26% 8%, rgba(80, 201, 181, .08), transparent 34%),
    linear-gradient(145deg, rgba(8, 12, 16, .98), rgba(3, 6, 8, .98)) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .70) !important;
}
.project-panel-head {
  min-height: 58px !important;
  padding: 0 0 18px !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}
.project-panel-head h2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-right: 18px !important;
  color: #f4f7f7 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}
.project-folder-icon {
  width: 34px;
  height: 24px;
  display: inline-block;
  border: 2px solid #d8e1e6;
  border-radius: 2px 2px 4px 4px;
  position: relative;
}
.project-folder-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -8px;
  width: 15px;
  height: 8px;
  border: 2px solid #d8e1e6;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.project-add-head {
  width: auto !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #d8e1e6 !important;
  border-radius: 8px !important;
}
.project-close {
  margin-left: auto !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #f4f7f7 !important;
  font-size: 34px !important;
}
.project-list {
  gap: 18px !important;
  padding: 14px 0 0 !important;
  max-height: 560px !important;
}
.project-item {
  grid-template-columns: 46px 144px minmax(0, 1fr) 58px !important;
  gap: 22px !important;
  min-height: 132px !important;
  padding: 16px 24px !important;
  border-color: rgba(255, 255, 255, .10) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 24% 30%, rgba(80, 201, 181, .06), transparent 28%),
    rgba(255, 255, 255, .018) !important;
  cursor: pointer;
}
.project-item.is-active {
  border-color: rgba(18, 209, 210, .88) !important;
  background:
    radial-gradient(circle at 24% 28%, rgba(18, 209, 210, .10), transparent 30%),
    rgba(10, 17, 22, .78) !important;
  box-shadow: inset 0 0 0 1px rgba(18, 209, 210, .24) !important;
}
.project-radio {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(216, 225, 230, .34);
  border-radius: 50%;
}
.project-item.is-active .project-radio::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #54d7df;
  box-shadow: 0 0 0 6px rgba(84, 215, 223, .16);
}
.project-thumb {
  width: 144px !important;
  height: 82px !important;
  border-radius: 8px !important;
  border-color: rgba(80, 201, 181, .24) !important;
  box-shadow: inset 0 -24px 42px rgba(0, 0, 0, .28) !important;
}
.project-item input {
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f3f6f6 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}
.project-choose {
  display: none !important;
}
.project-delete {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-color: rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #f4f7f7 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* Asset library voice picker for role cards. */
.asset-card-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.asset-voice-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(80, 201, 181, .38);
  border-radius: 50%;
  background: rgba(80, 201, 181, .10);
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.asset-voice-icon:hover,
.asset-voice-icon.has-voice {
  background: var(--accent);
  color: #09201c;
}
.asset-voice-popover {
  position: fixed;
  z-index: 180;
  width: 198px;
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(80, 201, 181, .38);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 0%, rgba(80, 201, 181, .12), transparent 32%),
    #171d1e;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.asset-voice-title {
  display: grid;
  gap: 2px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  padding: 2px 2px 4px;
}
.asset-voice-title small {
  color: #819397;
  font-size: 10px;
  font-weight: 650;
}
.asset-voice-popover button {
  min-height: 34px;
  padding: 0 10px;
  justify-content: flex-start;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: #e8eeee;
  font-size: 13px;
  font-weight: 800;
}
.asset-voice-popover button[data-voice-choice] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.asset-voice-popover button[data-voice-choice] small {
  color: #789097;
  font-size: 9px;
  font-weight: 650;
}
.asset-voice-divider {
  position: relative;
  height: 14px;
  display: grid;
  place-items: center;
  color: #607278;
  font-size: 9px;
}
.asset-voice-divider::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(126, 151, 160, .12);
}
.asset-voice-divider span {
  position: relative;
  padding: 0 7px;
  background: #171d1e;
}
.asset-voice-name {
  max-width: 82px;
  margin-left: auto;
  overflow: hidden;
  color: #79bcb0;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.asset-voice-popover button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Records preview repair: storyboard subheads use the same green as column titles. */
.storyboard-block h4,
.storyboard-meta-line span {
  color: var(--accent) !important;
}

/* Asset library visual refresh */
.asset-library-modal {
  background:
    radial-gradient(circle at 12% 12%, rgba(80, 201, 181, .18), transparent 24%),
    radial-gradient(circle at 84% 78%, rgba(80, 201, 181, .10), transparent 26%),
    rgba(0, 0, 0, .68) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
}
.asset-library-panel {
  width: min(1040px, calc(100vw - 44px)) !important;
  border-radius: 18px !important;
  border-color: rgba(80, 201, 181, .34) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(80, 201, 181, .13), transparent 32%),
    linear-gradient(145deg, rgba(25, 33, 34, .98), rgba(14, 15, 16, .99) 58%, rgba(8, 11, 12, .99)) !important;
  box-shadow: 0 36px 95px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
.asset-library-head {
  min-height: 68px !important;
  padding: 0 22px !important;
  background: linear-gradient(90deg, rgba(80, 201, 181, .07), transparent 62%) !important;
}
.asset-library-head h2 {
  color: #f4fffb !important;
  font-size: 24px !important;
  letter-spacing: 0 !important;
}
.asset-library-close {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .08) !important;
}
.asset-library-body {
  grid-template-columns: 230px minmax(0, 1fr) !important;
  min-height: min(670px, calc(100vh - 150px)) !important;
}
.asset-project-list {
  gap: 12px !important;
  padding: 20px !important;
  background:
    linear-gradient(180deg, rgba(80, 201, 181, .05), transparent 36%),
    rgba(255, 255, 255, .018) !important;
}
.asset-project {
  min-height: 58px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: rgba(255, 255, 255, .9) !important;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.asset-project::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 10px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(80, 201, 181, .24);
  background:
    radial-gradient(circle at 58% 32%, rgba(231, 238, 197, .70), transparent 18%),
    linear-gradient(135deg, rgba(45, 86, 90, .9), rgba(18, 26, 31, .95));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .22);
}
.asset-project:nth-child(2)::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(82, 148, 225, .75), transparent 22%),
    linear-gradient(135deg, rgba(24, 44, 72, .95), rgba(12, 18, 24, .98));
}
.asset-project:nth-child(3)::before {
  background:
    linear-gradient(115deg, rgba(194, 219, 232, .95) 0 45%, rgba(100, 150, 190, .85) 46% 58%, rgba(226, 238, 228, .9) 59%),
    #23313a;
}
.asset-project:nth-child(4)::before {
  background:
    radial-gradient(circle at 35% 35%, rgba(185, 132, 212, .78), transparent 20%),
    linear-gradient(135deg, rgba(43, 38, 70, .95), rgba(15, 17, 25, .98));
}
.asset-project:nth-child(5)::before {
  background:
    radial-gradient(circle at 62% 38%, rgba(122, 221, 205, .70), transparent 18%),
    linear-gradient(135deg, rgba(45, 78, 54, .9), rgba(14, 18, 15, .98));
}
.asset-project:hover {
  transform: translateX(3px);
  border-color: rgba(80, 201, 181, .38) !important;
}
.asset-project.is-active {
  border-color: rgba(80, 201, 181, .85) !important;
  color: #58e6d5 !important;
  background: linear-gradient(135deg, rgba(80, 201, 181, .22), rgba(80, 201, 181, .07)) !important;
  box-shadow: inset 0 0 0 1px rgba(80, 201, 181, .15);
}
.asset-gallery {
  gap: 28px !important;
  padding: 24px 26px 30px !important;
  background:
    linear-gradient(180deg, rgba(19, 44, 52, .45), rgba(12, 14, 15, .18)),
    rgba(255, 255, 255, .01) !important;
}
.asset-gallery::-webkit-scrollbar,
.asset-library-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.asset-gallery::-webkit-scrollbar-thumb,
.asset-library-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(80, 201, 181, .38);
}
.asset-category {
  display: grid;
  gap: 12px;
}
.asset-category h3 {
  margin: 0 !important;
  color: #48decf !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 18px rgba(80, 201, 181, .18);
}
.asset-card-grid {
  grid-template-columns: repeat(3, minmax(138px, 1fr)) !important;
  gap: 16px !important;
}
.asset-card {
  position: relative;
  min-height: 178px !important;
  padding: 12px !important;
  gap: 10px !important;
  overflow: hidden;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, .13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)),
    rgba(8, 11, 12, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.asset-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 48px 12px;
  height: 1px;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}
.asset-card:hover {
  transform: translateY(-2px);
  border-color: rgba(80, 201, 181, .72) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(80, 201, 181, .11);
}
.asset-thumb {
  width: 100%;
  border-radius: 10px !important;
  border-color: rgba(80, 201, 181, .30) !important;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .22);
}
.asset-card-name {
  position: relative;
  z-index: 1;
  min-height: 28px;
  color: rgba(255, 255, 255, .94);
  font-size: 15px;
  font-weight: 900;
}
.asset-voice-icon {
  flex: 0 0 auto;
  border-color: rgba(80, 201, 181, .32) !important;
  background: rgba(80, 201, 181, .12) !important;
  color: #58e6d5 !important;
}

@media (max-width: 760px) {
  .asset-library-panel {
    width: calc(100vw - 28px) !important;
  }
  .asset-library-body {
    grid-template-columns: 168px minmax(0, 1fr) !important;
  }
  .asset-project-list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    overflow-y: auto;
    padding: 14px !important;
    border-right: 1px solid rgba(255, 255, 255, .10) !important;
    border-bottom: 0 !important;
  }
  .asset-project {
    min-height: 54px !important;
    padding: 0 12px !important;
    font-size: 14px;
  }
  .asset-card-grid {
    grid-template-columns: 1fr !important;
  }
  .asset-gallery {
    padding: 18px !important;
  }
}

/* Scoped asset library polish: compact project rail and balanced media grid. */
.asset-library-modal {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 12px !important;
  background:
    radial-gradient(circle at 88% 5%, rgba(79, 213, 189, .10), transparent 26%),
    rgba(2, 7, 9, .84) !important;
  backdrop-filter: blur(14px) !important;
}

.asset-library-modal.hidden {
  display: none;
}

.asset-library-panel {
  width: min(1120px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px) !important;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #33464d !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 213, 189, .09), transparent 28%),
    linear-gradient(145deg, #10191e 0%, #081014 68%, #071014 100%) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.asset-library-head {
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 22px !important;
  border-bottom: 1px solid #29383f !important;
  background: rgba(13, 21, 26, .88) !important;
}

.asset-library-head h2 {
  margin: 0;
  color: #f2f7f6 !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}

.asset-library-close {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #35464e !important;
  border-radius: 10px !important;
  background: #162128 !important;
  color: #dbe5e3 !important;
  font-size: 22px !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.asset-library-close:hover {
  border-color: rgba(79, 213, 189, .58) !important;
  background: #1a2a2e !important;
  color: #ffffff !important;
}

.asset-library-body {
  min-height: 0 !important;
  height: auto !important;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) !important;
  overflow: hidden !important;
  background: transparent !important;
}

.asset-project-list {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  gap: 9px !important;
  padding: 18px 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-right: 1px solid #28383e !important;
  background:
    linear-gradient(180deg, rgba(79, 213, 189, .045), transparent 32%),
    #0a1216 !important;
  scrollbar-width: thin;
  scrollbar-color: #3a555a transparent;
}

.asset-project {
  min-height: 48px !important;
  flex: 0 0 auto;
  justify-content: flex-start !important;
  padding: 0 13px !important;
  overflow: hidden;
  border: 1px solid #2f4047 !important;
  border-radius: 10px !important;
  background: #121920 !important;
  color: #c8d3d2 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.asset-project::before,
.asset-project:nth-child(n)::before {
  content: "";
  width: 3px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0 11px 0 0;
  border: 0;
  border-radius: 999px;
  background: #365259;
  box-shadow: none;
}

.asset-project:hover {
  transform: translateX(2px);
  border-color: #41575f !important;
  background: #152127 !important;
  color: #eef4f3 !important;
}

.asset-project.is-active {
  border-color: rgba(79, 213, 189, .62) !important;
  background:
    linear-gradient(90deg, rgba(79, 213, 189, .15), rgba(79, 213, 189, .055)),
    #10201f !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .055) !important;
}

.asset-project.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(79, 213, 189, .34);
}

.asset-gallery {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px !important;
  padding: 20px 22px 28px !important;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 213, 189, .045), transparent 30%),
    #081014 !important;
  scrollbar-width: thin;
  scrollbar-color: #3b555b transparent;
}

.asset-project-list::-webkit-scrollbar,
.asset-gallery::-webkit-scrollbar {
  width: 6px;
}

.asset-project-list::-webkit-scrollbar-thumb,
.asset-gallery::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #3b555b;
}

.asset-category {
  display: grid;
  gap: 11px;
}

.asset-category h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  color: var(--accent) !important;
  font-size: 18px !important;
  font-weight: 820 !important;
  line-height: 1.2;
  text-shadow: none !important;
}

.asset-category h3::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(79, 213, 189, .25), transparent);
}

.asset-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

.asset-card {
  min-width: 0;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto 32px;
  gap: 8px !important;
  padding: 9px !important;
  overflow: visible;
  border: 1px solid #2d3e45 !important;
  border-radius: 12px !important;
  background: #10191f !important;
  box-shadow: none !important;
  color: #eef3f2;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.asset-card::after {
  display: none;
}

.asset-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 213, 189, .60) !important;
  background: #12201f !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25) !important;
}

.asset-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  align-self: stretch;
  border: 1px solid rgba(79, 213, 189, .24) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .22) !important;
}

.asset-card > span:last-child,
.asset-card-name {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #e8eeee !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.2;
}

.asset-voice-icon {
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(79, 213, 189, .38) !important;
  border-radius: 9px !important;
  background: rgba(79, 213, 189, .09) !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.asset-voice-icon:hover,
.asset-voice-icon.has-voice {
  border-color: rgba(79, 213, 189, .74) !important;
  background: rgba(79, 213, 189, .18) !important;
  color: #e8fffa !important;
}

@media (max-width: 760px) {
  .asset-library-modal {
    padding: 8px !important;
  }

  .asset-library-panel {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px) !important;
    grid-template-rows: 58px minmax(0, 1fr);
    border-radius: 15px !important;
  }

  .asset-library-head {
    padding: 0 12px 0 16px !important;
  }

  .asset-library-head h2 {
    font-size: 19px !important;
  }

  .asset-library-close {
    width: 34px !important;
    height: 34px !important;
  }

  .asset-library-body {
    grid-template-columns: 146px minmax(0, 1fr) !important;
  }

  .asset-project-list {
    gap: 7px !important;
    padding: 12px 10px !important;
  }

  .asset-project {
    min-height: 46px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .asset-project::before,
  .asset-project:nth-child(n)::before {
    height: 19px;
    margin-right: 8px;
  }

  .asset-gallery {
    gap: 20px !important;
    padding: 16px !important;
  }

  .asset-category h3 {
    font-size: 16px !important;
  }

  .asset-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .asset-card {
    padding: 7px !important;
    border-radius: 10px !important;
  }

  .asset-card > span:last-child,
  .asset-card-name {
    font-size: 10px !important;
  }
}

@media (max-width: 500px) {
  .asset-library-panel {
    grid-template-rows: 56px minmax(0, 1fr);
  }

  .asset-library-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .asset-project-list {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 128px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid #28383e !important;
  }

  .asset-project {
    min-height: 42px !important;
  }

  .asset-gallery {
    padding: 13px !important;
  }
}

@media (max-width: 520px) {
  .asset-library-body {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }
  .asset-project-list {
    padding: 10px !important;
    gap: 8px !important;
  }
  .asset-project {
    min-height: 48px !important;
    padding: 0 10px !important;
    font-size: 13px;
  }
}

/* 遐客ai1.05 — visual refresh based on the selected professional editing-workspace concept.
   This section intentionally changes presentation only; content and behavior remain untouched. */
:root {
  --bg: #070b0f;
  --panel: #0d1217;
  --panel-2: #131a20;
  --text: #f1f5f4;
  --muted: #98a3aa;
  --line: #26323a;
  --accent: #4fd5bd;
  --creative-panel: #0d1217;
  --creative-panel-2: #131a20;
  --creative-line: #26323a;
  --danger: #ff8f94;
}

html {
  background: #070b0f;
}

body {
  background: #070b0f;
  color: var(--text);
  font-family: "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
  scrollbar-color: #35464d #0a0f13;
}

body::-webkit-scrollbar,
.records-list::-webkit-scrollbar,
.asset-gallery::-webkit-scrollbar,
.project-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-track,
.records-list::-webkit-scrollbar-track,
.asset-gallery::-webkit-scrollbar-track,
.project-list::-webkit-scrollbar-track {
  background: #0a0f13;
}

body::-webkit-scrollbar-thumb,
.records-list::-webkit-scrollbar-thumb,
.asset-gallery::-webkit-scrollbar-thumb,
.project-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #35464d;
}

.app-shell {
  min-height: 100vh;
  padding: 14px 16px 18px;
  background: #070b0f;
}

.toolbar {
  min-height: 56px;
  margin-bottom: 12px;
  padding: 0 2px 12px;
  border-bottom: 1px solid #1e2930;
}

.toolbar-left {
  width: 100%;
  gap: 14px;
}

.brand-title {
  gap: 10px;
  color: #f7f9f8;
  font-size: clamp(19px, 3.1vw, 24px);
  font-weight: 900;
  letter-spacing: -.03em;
}

.brand-logo {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: var(--accent);
  color: #071713;
  font-size: 18px;
  box-shadow: none;
}

button,
input,
select,
textarea {
  outline: none;
}

button {
  min-height: 36px;
  border-color: #303c44;
  border-radius: 8px;
  background: #141b21;
  color: #e9efed;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

button:hover:not(:disabled) {
  border-color: #4b626b;
  background: #182128;
  color: #fff;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(79, 213, 189, .72);
  outline-offset: 2px;
}

#chooseFolderBtn,
#projectSelectorBtn.project-selector-btn {
  min-height: 40px !important;
  border: 1px solid #344149 !important;
  border-radius: 8px !important;
  background: #121920 !important;
  color: #edf2f1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

#chooseFolderBtn {
  right: 2px;
  min-width: 92px;
  padding: 0 14px;
}

#projectSelectorBtn.project-selector-btn {
  min-width: 150px !important;
  padding: 0 14px 0 10px !important;
}

#projectSelectorBtn .project-selector-thumb {
  width: 30px !important;
  height: 24px !important;
  border-color: rgba(79, 213, 189, .34) !important;
  border-radius: 7px !important;
  background: #172821 !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .06) !important;
}

.account-menu {
  flex: 0 0 auto;
}

.avatar-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #071713;
  font-weight: 900;
}

.account-popover {
  border-color: #334149;
  border-radius: 10px;
  background: #10171c;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .48);
}

.grid {
  gap: 14px;
}

.panel,
.preview-panel,
#generatorForm {
  border-color: #26323a;
  border-radius: 10px;
  background: #0d1217;
  box-shadow: none;
}

.tabs {
  gap: 0;
  padding: 0;
  border-color: #26323a;
  border-radius: 9px;
  background: #0c1217;
  overflow: hidden;
}

.tab {
  border: 0;
  border-right: 1px solid #202b32;
  border-radius: 0;
  background: transparent;
  color: #9ea9af;
  font-weight: 800;
}

.tab:last-child {
  border-right: 0;
}

.tab.is-active {
  background: #111c1d;
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

input,
select,
textarea {
  border-color: #334149;
  border-radius: 8px;
  background: #0a1014;
  color: #edf2f1;
}

input::placeholder,
textarea::placeholder {
  color: #708087;
}

.settings,
.prompt-box,
.edit-panel,
.chat-result,
.chat-history-panel {
  border-color: #26323a;
  background: #0b1115;
  box-shadow: none;
}

/* Generation records become the left-hand workflow rail from the selected concept. */
.records-page-open .app-shell {
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}

.records-modal {
  width: 100%;
  height: calc(100vh - 84px);
  min-height: 536px;
  max-height: none;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #253139;
  border-radius: 10px;
  background: #0a0f13;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
  overflow: hidden;
}

.records-filters {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(74px, 1fr);
  align-content: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #26323a;
  border-radius: 0;
  background: #0d1318;
  box-shadow: none;
  overflow: hidden;
}

.record-filter {
  position: relative;
  min-width: 0;
  min-height: 74px;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid #202b32;
  border-radius: 0;
  background: transparent;
  color: #a4afb5;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}

.record-filter:last-child {
  border-bottom: 0;
}

.record-filter:hover {
  background: #111920;
  color: #dce4e2;
}

.record-filter.is-active {
  color: var(--accent);
  background: #131c22;
  box-shadow: inset 4px 0 0 var(--accent);
}

.records-sub-filters {
  grid-column: 2;
  grid-row: 1;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #253139;
  background: #0d1318;
}

.record-sub-filter,
.record-sub-select {
  border-color: #2d3a42;
  border-radius: 8px;
  background: #11181e;
}

.records-list,
.records-list-modal {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  gap: 0;
  overflow: auto;
  background: #0a0f13;
}

.dialogue-record-page {
  min-height: 100%;
  background: #0a0f13;
}

.dialogue-record-main {
  min-height: 100%;
  padding: 26px 28px 178px;
  border: 0;
  border-radius: 0;
  background: #0a0f13;
  color: #edf2f1;
  overflow: visible;
}

.dialogue-record-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid #202b32;
}

.dialogue-record-top h2 {
  color: #f3f6f5;
  font-size: clamp(23px, 4vw, 30px);
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.dialogue-record-tools {
  justify-self: end;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  gap: 0;
  padding: 0;
  border: 1px solid #344149;
  border-radius: 8px;
  background: #10171c;
  box-shadow: none;
  overflow: hidden;
}

.dialogue-record-tools button {
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  border-right: 1px solid #2a353d;
  border-radius: 0;
  color: #b8c1c5;
  font-size: 12px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.2;
}

.dialogue-record-tools button:last-child {
  border-right: 0;
}

.dialogue-user-bubble {
  max-width: 720px;
  margin: 0 0 32px 54px;
  padding: 0 0 0 18px;
  border-left: 2px solid #35454d;
  background: transparent;
  color: #d7dfdd;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
}

.dialogue-thread-list {
  display: grid;
  gap: 30px;
}

.dialogue-thread-entry {
  position: relative;
  min-width: 0;
  padding: 0 0 26px;
  border-bottom: 1px solid rgba(145, 167, 172, .11);
  border-radius: 8px;
  scroll-margin-top: 92px;
}

.dialogue-thread-entry:last-child {
  border-bottom: 0;
}

/* 参考素材随记录悬浮并直接贴住滚动区顶部，不为筛选工具栏预留空白。 */
html body .dialogue-record-references {
  position: sticky;
  top: 0 !important;
  z-index: 45;
  min-width: 0;
  margin: 0 34px 12px;
  padding: 0;
  background: #111618;
  border-radius: 8px;
}

html body .dialogue-record-reference-list {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 0 2px 2px;
  scrollbar-width: thin;
}

html body .dialogue-record-reference {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #34474e;
  border-radius: 8px;
  background: #17272c;
}

html body .dialogue-record-reference.is-draggable-reference {
  cursor: grab;
}

html body .dialogue-record-reference.is-draggable-reference:active,
html body .dialogue-record-reference.is-draggable-reference.is-dragging-history-reference {
  cursor: grabbing;
}

html body .dialogue-record-reference.is-dragging-history-reference {
  opacity: .62;
}

html body .dialogue-record-reference img,
html body .dialogue-record-reference video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html body .dialogue-record-reference figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px 4px;
  background: rgba(8, 16, 20, .78);
  color: #e2eeeb;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

@media (max-width: 620px) {
  html body .dialogue-record-references {
    margin-right: 0;
    margin-left: 0;
  }
}

.dialogue-thread-entry.is-history-target {
  animation: dialogueHistoryTarget 1.8s ease both;
}

@keyframes dialogueHistoryTarget {
  0%, 100% { background: transparent; box-shadow: 0 0 0 0 rgba(79, 213, 189, 0); }
  18%, 65% { background: rgba(79, 213, 189, .055); box-shadow: 0 0 0 1px rgba(79, 213, 189, .24); }
}

.dialogue-ai-result {
  max-width: 760px;
  margin: 0 0 0 54px;
  padding: 0 0 34px 18px;
  border-left: 2px solid rgba(79, 213, 189, .48);
  color: #e9efed;
}

.dialogue-ai-result > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.dialogue-ai-result p {
  max-width: 680px;
  margin: 0 0 22px;
  color: #cdd6d4;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}

.dialogue-result-media {
  width: min(680px, 100%);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #35434b;
  border-radius: 8px;
  background: #111a20;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018);
}

.dialogue-result-media > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(7, 11, 15, .76);
  color: #e9efed;
  font-size: 16px;
}

/* 供应商返回的真实图片只显示在对话页最大的主预览框内。 */
.dialogue-result-media > .dialogue-result-generated-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #0b1012;
}

/* 图片/视频尚未返回时使用明确的生成状态卡片，替代旧的“AI Image”圆形文字。 */
.dialogue-result-media.has-placeholder {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(79, 213, 189, .14), transparent 31%),
    linear-gradient(145deg, #101b20 0%, #0b1216 58%, #0e171b 100%) !important;
}

.dialogue-result-media.has-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image:
    linear-gradient(rgba(143, 183, 181, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 183, 181, .10) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
  mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
}

.dialogue-media-placeholder {
  width: min(320px, calc(100% - 48px));
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #e9f4f1;
  text-align: center;
}

.dialogue-media-placeholder-icon {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 5px;
  border: 1px solid rgba(99, 226, 203, .30);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(40, 92, 87, .34), rgba(14, 28, 33, .88));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.dialogue-media-placeholder-icon > span {
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(90, 223, 199, .16);
  border-radius: 26px;
}

.dialogue-media-placeholder-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #69dfca;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 12px rgba(79, 213, 189, .24));
}

.dialogue-media-placeholder strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

.dialogue-media-placeholder small {
  color: #7f9698;
  font-size: 11px;
  line-height: 1.5;
}

.dialogue-media-placeholder-progress {
  width: min(190px, 78%);
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(139, 176, 177, .14);
}

.dialogue-media-placeholder-progress > i {
  width: 42%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #68dfca 45%, #a5f1e4 60%, transparent);
  animation: dialogueMediaProgress 1.65s ease-in-out infinite;
}

.dialogue-media-placeholder.is-generating .dialogue-media-placeholder-icon {
  animation: dialogueMediaPulse 2.2s ease-in-out infinite;
}

@keyframes dialogueMediaProgress {
  from { transform: translateX(-120%); }
  to { transform: translateX(340%); }
}

@keyframes dialogueMediaPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 16px 42px rgba(0, 0, 0, .30), 0 0 0 0 rgba(79, 213, 189, .10); }
  50% { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0, 0, 0, .34), 0 0 0 9px rgba(79, 213, 189, 0); }
}

.dialogue-bottom-input {
  position: fixed !important;
  left: 164px !important;
  right: 24px !important;
  bottom: 18px !important;
  z-index: 80;
  width: auto !important;
  max-width: none !important;
  min-height: 112px !important;
  margin: 0 !important;
  grid-template-rows: minmax(42px, auto) auto !important;
  gap: 8px !important;
  padding: 14px 64px 14px 64px !important;
  border: 1px solid #344149 !important;
  border-radius: 10px !important;
  background: #0e151a !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.dialogue-bottom-input .dialogue-plus {
  left: 18px !important;
  top: 18px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid #3a4a52 !important;
  border-radius: 50% !important;
  background: #121c22 !important;
  color: var(--accent) !important;
}

.dialogue-bottom-input textarea {
  min-height: 48px !important;
  height: 50px !important;
  padding: 8px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #f1f5f4 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  resize: none !important;
}

.dialogue-bottom-input .dialogue-input-tools {
  min-width: 0;
  min-height: 34px !important;
  gap: 8px !important;
  padding-top: 10px;
  border-top: 1px solid #27343b;
}

.dialogue-bottom-input .dialogue-input-tools button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #344149 !important;
  border-radius: 7px !important;
  background: #12191f !important;
  color: #d8dfdd !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.dialogue-bottom-input .dialogue-agent-btn {
  border-color: rgba(79, 213, 189, .56) !important;
  background: #10221f !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.dialogue-bottom-input .dialogue-send {
  right: 16px !important;
  bottom: 14px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: #071713 !important;
  font-size: 20px !important;
  box-shadow: none !important;
}

.dialogue-agent-menu,
.dialogue-preferences-popover,
.dialogue-history-panel {
  border-color: #344149;
  border-radius: 10px;
  background: #10171c;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .56);
}

/* Keep every secondary screen in the same quiet, professional visual system. */
.project-modal,
.asset-library-modal {
  background: rgba(3, 6, 8, .78) !important;
  backdrop-filter: blur(10px) !important;
}

.project-panel,
.asset-library-panel {
  border-color: #334149 !important;
  border-radius: 12px !important;
  background: #0d1318 !important;
  box-shadow: 0 28px 84px rgba(0, 0, 0, .64) !important;
}

.project-panel-head,
.asset-library-head {
  border-bottom-color: #28343b !important;
  background: #0e151a !important;
}

.project-item,
.asset-project,
.asset-card {
  border-color: #2d3941 !important;
  background: #11181e !important;
  box-shadow: none !important;
}

.project-item.is-active,
.asset-project.is-active,
.asset-card:hover {
  border-color: rgba(79, 213, 189, .62) !important;
  background: #12201f !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* Scoped annotation update: structured dialogue history drawer. */
.dialogue-history-panel {
  right: 14px !important;
  top: 78px !important;
  z-index: 90 !important;
  width: min(326px, calc(100vw - 28px)) !important;
  min-height: 0 !important;
  max-height: calc(100% - 94px) !important;
  padding: 14px !important;
  overflow-y: auto !important;
  border: 1px solid #33454c !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(79, 213, 189, .10), transparent 29%),
    linear-gradient(180deg, #111b20 0%, #0c1418 100%) !important;
  box-shadow: 0 26px 72px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  scrollbar-width: thin;
  scrollbar-color: #3b5359 transparent;
}

.dialogue-history-panel::-webkit-scrollbar {
  width: 6px;
}

.dialogue-history-panel::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: #3b5359;
}

.dialogue-history-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 3px 12px;
  border-bottom: 1px solid rgba(116, 148, 154, .22);
}

.dialogue-history-mark {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(79, 213, 189, .42);
  border-radius: 10px;
  background: rgba(79, 213, 189, .10);
  color: var(--accent);
}

.dialogue-history-mark svg,
.dialogue-history-new svg,
.dialogue-history-group-title svg,
.dialogue-history-entry-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dialogue-history-head h3 {
  margin: 0;
  color: #f3f7f7;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
}

.dialogue-history-head div > span {
  display: block;
  margin-top: 2px;
  color: #82949b;
  font-size: 11px;
  line-height: 1.2;
}

.dialogue-history-head .dialogue-history-close {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #35474f;
  border-radius: 9px;
  background: #162128;
  color: #b9c7c8;
  font-size: 20px;
  line-height: 1;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.dialogue-history-head .dialogue-history-close:hover {
  border-color: rgba(79, 213, 189, .62);
  background: #1a2a2e;
  color: #ffffff;
}

.dialogue-history-new {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 12px 0 15px;
  padding: 0 12px;
  border: 1px solid rgba(79, 213, 189, .40);
  border-radius: 10px;
  background: rgba(79, 213, 189, .09);
  color: #dffcf5;
  font-size: 13px;
  font-weight: 750;
}

.dialogue-history-new > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent);
  color: #071713;
}

.dialogue-history-new svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.dialogue-history-new:hover {
  border-color: rgba(79, 213, 189, .72);
  background: rgba(79, 213, 189, .15);
}

.dialogue-history-groups {
  display: grid;
  gap: 15px;
}

.dialogue-history-group {
  display: grid;
  gap: 7px;
}

.dialogue-history-group-title {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  color: var(--accent);
}

.dialogue-history-group-title > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
}

.dialogue-history-group-title svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}

.dialogue-history-group-title small {
  min-width: 22px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(132, 155, 161, .14);
  border-radius: 7px;
  background: rgba(132, 155, 161, .09);
  color: #9babad;
  font-size: 10px;
  font-weight: 800;
}

.dialogue-history-list {
  display: grid;
  gap: 5px;
}

.dialogue-history-entry {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #d9e2e5;
  font-family: inherit;
  text-align: left;
}

.dialogue-history-entry:hover,
.dialogue-history-entry.is-active {
  border-color: rgba(79, 213, 189, .24);
  background: #162429;
}

.dialogue-history-entry.is-active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.dialogue-history-entry-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #33474e;
  border-radius: 10px;
  background: #101a1f;
  color: #85a2a8;
}

.dialogue-history-entry.is-active .dialogue-history-entry-icon {
  border-color: rgba(79, 213, 189, .42);
  background: rgba(79, 213, 189, .10);
  color: var(--accent);
}

.dialogue-history-entry-icon svg {
  width: 17px;
  height: 17px;
}

.dialogue-history-entry-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dialogue-history-entry-title {
  display: block;
  overflow: hidden;
  color: #eef3f4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialogue-history-entry time {
  color: #789098;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .dialogue-history-panel {
    right: 10px !important;
    width: min(310px, calc(100vw - 20px)) !important;
  }
}

.asset-gallery,
.asset-project-list {
  background: #0a1014 !important;
}

.asset-category h3 {
  color: var(--accent) !important;
  text-shadow: none !important;
}

@media (min-width: 900px) {
  .records-modal {
    grid-template-columns: 144px minmax(0, 1fr);
  }

  .dialogue-bottom-input {
    left: 184px !important;
  }
}

@media (max-width: 680px) {
  .app-shell {
    padding: 12px;
  }

  .toolbar {
    min-height: 52px;
  }

  .brand-title {
    font-size: 18px;
  }

  .brand-logo {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  #projectSelectorBtn.project-selector-btn {
    min-width: 132px !important;
    min-height: 36px !important;
    padding-right: 10px !important;
    font-size: 13px;
  }

  #chooseFolderBtn {
    right: 2px;
    min-width: 76px;
    min-height: 36px !important;
    padding: 0 10px;
    font-size: 13px;
  }

  .avatar-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .records-modal {
    height: calc(100vh - 76px);
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .record-filter {
    padding: 10px 8px;
    font-size: 12px;
  }

  .dialogue-record-main {
    padding: 22px 20px 174px;
  }

  .dialogue-record-top {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 14px;
  }

  .dialogue-record-tools {
    justify-self: stretch;
    grid-template-columns: repeat(5, 1fr);
  }

  .dialogue-record-tools button {
    min-height: 32px;
    padding: 0 3px;
    font-size: 10px;
  }

  .dialogue-user-bubble,
  .dialogue-ai-result {
    margin-left: 18px;
  }

  .dialogue-user-bubble {
    margin-bottom: 22px;
  }

  .dialogue-ai-result p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.68;
  }

  .dialogue-result-media {
    height: clamp(156px, 29vw, 190px);
    aspect-ratio: auto;
  }

  .storyboard-column-head span {
    min-height: 44px;
    font-size: 14px;
  }

  .storyboard-cell {
    gap: 10px;
    padding: 16px 12px;
  }

  .storyboard-block,
  .storyboard-visual .storyboard-block {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 9px;
  }

  .storyboard-block p {
    font-size: 13px;
    line-height: 1.5;
  }

  .storyboard-shot-label,
  .storyboard-shot-label strong {
    font-size: 12px;
  }

  .dialogue-bottom-input {
    left: 132px !important;
    right: 16px !important;
    bottom: 14px !important;
    padding-right: 58px !important;
  }

  .dialogue-bottom-input .dialogue-input-tools {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .dialogue-bottom-input .dialogue-input-tools button {
    flex: 0 0 auto;
  }
}

/* 2026-08-26：编辑器交互与层级收口。 */

/* 添加菜单仍从按钮附近展开；只提高层级，避免“添加”按钮压住菜单。 */
html body #assetLibraryModal .asset-category-add-menu {
  top: calc(100% + 7px) !important;
  right: 0 !important;
  bottom: auto !important;
  width: min(250px, calc(100vw - 32px)) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  transform-origin: right top;
  z-index: 10020 !important;
}

html body #assetLibraryModal > .asset-category-add-menu.is-portaled {
  top: var(--asset-menu-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--asset-menu-left) !important;
}

/* 输入框上边缘可拖动，默认高度即最小高度。 */
html body .dialogue-input-content,
html body #shotFullscreenEditor .shot-fullscreen-prompt {
  position: relative;
}

html body .prompt-top-resize-handle {
  position: absolute;
  top: -6px;
  right: 0;
  left: 0;
  z-index: 45;
  width: 100%;
  height: 12px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: ns-resize;
  touch-action: none;
  appearance: none;
}

html body .dialogue-input-content.is-manually-resized .dialogue-prompt-editor,
html body #shotFullscreenEditor .shot-fullscreen-prompt.is-manually-resized .shot-fullscreen-prompt-editor {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

html body.is-resizing-prompt,
html body.is-resizing-prompt * {
  cursor: ns-resize !important;
  user-select: none !important;
}

/* 图片、视频、分镜编辑框使用一致的黑灰滚动条。 */
html body #shotFullscreenEditor .shot-fullscreen-prompt-editor {
  scrollbar-width: thin;
  scrollbar-color: #4a5a60 #0b1114;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor::-webkit-scrollbar-track {
  background: #0b1114;
  border-radius: 8px;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor::-webkit-scrollbar-thumb {
  min-height: 28px;
  border: 2px solid #0b1114;
  border-radius: 8px;
  background: #46565d;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor::-webkit-scrollbar-thumb:hover {
  background: #5c7077;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* 竖版媒体的说明区改为单列，避免提示词被模型标签挤成一字一行。 */
html body #shotFullscreenEditor.is-narrow-media .shot-record-media-caption,
html body #shotFullscreenEditor.is-narrow-media .shot-storyboard-media-caption {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body #shotFullscreenEditor.is-narrow-media .shot-source-model {
  justify-self: start !important;
  max-width: 100%;
  margin-top: 8px;
}

html body #shotFullscreenEditor .shot-record-media-caption-copy,
html body #shotFullscreenEditor .shot-storyboard-media-caption-copy {
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 记录操作默认保持中性；只有悬停、键盘聚焦或执行成功时显示强调色。 */
html body .records-list.is-media-record-list .record-insert-icon,
html body .records-list.is-media-record-list .record-edit,
html body .records-list.is-media-record-list .record-retry,
html body .record-item.is-complete[data-record-type="video"] .record-insert-icon,
html body .record-item.is-complete[data-record-type="image"] .record-insert-icon {
  border-color: #33464e !important;
  background: #121b1f !important;
  color: #b9c8cc !important;
  box-shadow: none !important;
}

html body .records-list.is-media-record-list .record-insert-icon:hover,
html body .records-list.is-media-record-list .record-insert-icon:focus-visible,
html body .records-list.is-media-record-list .record-edit:hover,
html body .records-list.is-media-record-list .record-edit:focus-visible,
html body .records-list.is-media-record-list .record-retry:hover,
html body .records-list.is-media-record-list .record-retry:focus-visible,
html body .records-list.is-media-record-list .record-insert-icon.is-confirmed {
  border-color: #46cdb8 !important;
  background: rgba(39, 119, 109, .18) !important;
  color: #55dac5 !important;
}

html body .record-thumb.has-generated-media,
html body .dialogue-result-media[data-generated-media="true"] {
  cursor: zoom-in;
}

@media (max-width: 680px) {
  html body #assetLibraryModal .asset-category-add-menu {
    width: min(250px, calc(100vw - 24px)) !important;
  }
}

/* 视频修改复核：自定义播放控制、时间范围和可回跳标记。 */
.shot-video-review {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px 58px minmax(120px, 1fr) 58px auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(111, 145, 148, .18);
  border-radius: 7px;
  background: #11191c;
  color: #b9c8c7;
}

.shot-video-play {
  width: 32px;
  min-width: 32px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(87, 226, 202, .38);
  border-radius: 6px;
  background: rgba(87, 226, 202, .10);
  color: #65dfca;
  font-size: 13px;
  font-weight: 900;
}

.shot-video-current,
.shot-video-duration {
  color: #8fa5a3;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.shot-video-review > small {
  color: #687e7d;
  font-size: 10px;
  white-space: nowrap;
}

.shot-video-timeline {
  position: relative;
  height: 26px;
  display: flex;
  align-items: center;
}

.shot-video-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 4px;
  border-radius: 999px;
  background: #263336;
}

.shot-video-progress {
  position: absolute;
  left: 0;
  top: 11px;
  z-index: 1;
  width: 0;
  height: 4px;
  border-radius: 999px;
  background: #4fd5bd;
  pointer-events: none;
}

.shot-video-ranges,
.shot-video-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shot-video-ranges span {
  position: absolute;
  top: 8px;
  z-index: 2;
  height: 10px;
  min-width: 3px;
  border-radius: 3px;
  background: rgba(255, 184, 77, .34);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 103, .52);
}

.shot-video-markers button {
  position: absolute;
  top: 5px;
  z-index: 4;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  padding: 0;
  border: 2px solid #dffbf6;
  border-radius: 50%;
  background: #4fd5bd;
  transform: translateX(-50%);
  pointer-events: auto;
}

.shot-video-timeline input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.shot-point-editor.is-time-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.shot-point-editor.has-time-range .shot-point-box {
  grid-template-rows: 44px 30px !important;
  width: min(304px, calc(100vw - 84px)) !important;
}

.shot-point-editor.has-time-range .shot-point-regenerate {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  height: 100% !important;
  min-height: 79px !important;
}

.shot-point-time-range {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: auto minmax(62px, 1fr) auto minmax(62px, 1fr);
  align-items: center;
  gap: 5px !important;
  color: #77908e;
  font-size: 9px;
}

.shot-point-time-range > span {
  white-space: nowrap;
}

.shot-point-time-range label {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  border: 1px solid rgba(119, 148, 148, .20);
  border-radius: 4px;
  background: #111a1e;
}

.shot-point-time-range input {
  width: 45px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dce9e7;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.shot-point-time-range i {
  color: #536866;
  font-style: normal;
}

.shot-change-queue .shot-change-item-main span small {
  display: block;
  margin-top: 1px;
  color: #6f8986;
  font-size: 9px;
  font-weight: 650;
}

@media (max-width: 760px) {
  .shot-video-review {
    grid-template-columns: 34px 52px minmax(90px, 1fr) 52px;
  }

  .shot-video-review > small {
    display: none;
  }
}

/* Fullscreen editor composer mirrors the dialogue input: previews, plus and rich @ chips share one box. */
html body #shotFullscreenEditor .shot-fullscreen-composer {
  min-height: 126px !important;
  grid-template-columns: minmax(0, 1fr) 68px !important;
  grid-template-rows: minmax(64px, auto) auto !important;
  gap: 8px 10px !important;
  padding: 11px !important;
}

html body #shotFullscreenEditor.has-shot-uploads .shot-fullscreen-composer {
  grid-template-rows: minmax(64px, auto) auto !important;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt {
  position: relative;
  min-width: 0;
  min-height: 64px;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  overflow: visible;
  border: 1px solid #3a494e;
  border-radius: 12px;
  background: #171d20;
  transition: border-color .16s ease, box-shadow .16s ease;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt:focus-within {
  border-color: #4fd5bd;
  box-shadow: 0 0 0 1px rgba(79, 213, 189, .20);
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-value {
  display: none !important;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  max-height: 104px;
  display: block;
  padding: 9px 10px 9px var(--shot-reference-offset, 56px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 11px;
  outline: 0;
  background: transparent;
  color: #e8f0ef;
  font-size: 13px;
  font-weight: 650;
  line-height: 32px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  caret-color: #63dec7;
  scrollbar-width: thin;
  scrollbar-color: #3a4448 #101416;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor:empty::before {
  content: attr(data-placeholder);
  color: #627378;
  pointer-events: none;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor:focus,
html body #shotFullscreenEditor .shot-fullscreen-prompt-editor:focus-visible {
  outline: 0;
  box-shadow: none;
}

html body #shotFullscreenEditor .shot-reference-strip {
  position: absolute;
  left: 9px;
  top: 6px;
  z-index: 24;
  height: 52px;
  display: flex;
  align-items: center;
  max-width: min(350px, 44%);
  overflow: visible;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment-list {
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment-list::-webkit-scrollbar {
  display: none;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment-list.hidden {
  display: none !important;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment {
  position: relative;
  width: 50px;
  min-width: 50px;
  height: 52px;
  display: block;
  flex: 0 0 50px;
  padding: 0;
  overflow: visible;
  border: 1px solid #34484d;
  border-radius: 7px;
  background: #0b1114;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .30);
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment:hover {
  z-index: 4;
  border-color: #4fd5bd;
}

html body #shotFullscreenEditor .shot-upload-attachment-preview {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #0a1114;
}

html body #shotFullscreenEditor .shot-upload-attachment-preview img,
html body #shotFullscreenEditor .shot-upload-attachment-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

html body #shotFullscreenEditor .shot-upload-attachment-copy {
  display: none !important;
}

html body #shotFullscreenEditor .shot-upload-attachment-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 5;
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid #405158;
  border-radius: 50%;
  background: #172024;
  color: #dce7e5;
  font-size: 11px;
  line-height: 15px;
  opacity: 0;
  pointer-events: none;
}

html body #shotFullscreenEditor .shot-upload-attachment:hover .shot-upload-attachment-remove,
html body #shotFullscreenEditor .shot-upload-attachment:focus-within .shot-upload-attachment-remove {
  opacity: 1;
  pointer-events: auto;
}

html body #shotFullscreenEditor .shot-upload-wrap {
  position: relative;
  z-index: 28;
  width: 40px;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-self: center;
  grid-column: auto;
  grid-row: auto;
  margin-left: 5px;
}

html body #shotFullscreenEditor .shot-reference-strip.has-attachments .shot-upload-wrap {
  width: 26px;
  min-width: 26px;
  height: 26px;
  flex-basis: 26px;
  align-self: flex-end;
  margin: 0 0 -3px -10px;
}

html body #shotFullscreenEditor .shot-reference-strip.has-attachments .shot-plus {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  line-height: 24px !important;
}

html body #shotFullscreenEditor .shot-upload-menu {
  left: 0;
  bottom: calc(100% + 8px);
}

html body #shotFullscreenEditor .shot-fullscreen-tools {
  grid-column: 1;
  grid-row: 2;
}

html body #shotFullscreenEditor .shot-fullscreen-composer > .shot-send {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  transform: none !important;
}

html body #shotFullscreenEditor .dialogue-inline-reference {
  box-sizing: border-box;
  max-width: min(194px, calc(100% - 8px));
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 3px 2px;
  padding: 2px 8px 2px 2px;
  overflow: hidden;
  border: 1px solid rgba(79, 213, 189, .38);
  border-radius: 7px;
  background: #20292d;
  color: #dce6e4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  line-height: 26px;
  vertical-align: middle;
  white-space: nowrap;
  user-select: all;
}

html body #shotFullscreenEditor .dialogue-inline-reference-preview {
  width: 26px;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: #0b1114;
  color: #65d9c3;
  font-size: 10px;
}

html body #shotFullscreenEditor .dialogue-inline-reference-preview img,
html body #shotFullscreenEditor .dialogue-inline-reference-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

html body #shotFullscreenEditor .dialogue-inline-reference-name {
  min-width: 0;
  overflow: hidden;
  color: #dce6e4;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #shotFullscreenEditor .shot-fullscreen-tools .shot-mention-popover {
  width: min(356px, calc(100vw - 48px));
  padding: 0;
  overflow: hidden;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-context-head {
  align-items: center;
  margin: 0;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(102, 133, 137, .20);
}

html body #shotFullscreenEditor .shot-mention-popover .shot-context-head > span,
html body #shotFullscreenEditor .shot-mention-popover .shot-context-head strong,
html body #shotFullscreenEditor .shot-mention-popover .shot-context-head small {
  display: block;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-context-head small {
  margin-top: 4px;
}

html body #shotFullscreenEditor .shot-mention-close {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  font-size: 18px !important;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-mention-options {
  min-height: 92px;
  max-height: min(280px, calc(100vh - 270px));
  gap: 7px;
  padding: 8px;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-upload-mention {
  min-height: 58px !important;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  gap: 10px;
  padding: 7px 9px !important;
  border-radius: 8px !important;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-upload-mention > b {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 7px;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-upload-mention > span strong,
html body #shotFullscreenEditor .shot-mention-popover .shot-upload-mention > span small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-upload-mention > span small {
  margin-top: 4px;
  color: #6f8388;
  font-size: 9px;
}

html body #shotFullscreenEditor .shot-mention-footer {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid rgba(102, 133, 137, .20);
  color: #69a9a1;
  font-size: 10px;
}

html body #shotFullscreenEditor .shot-mention-footer .shot-mention-done {
  min-height: 32px !important;
  padding: 0 13px !important;
  border-color: rgba(79, 213, 189, .52) !important;
  background: rgba(79, 213, 189, .12) !important;
  color: var(--accent) !important;
}

/* Failed generation records expose a real retry action and the provider error. */
.records-list.is-media-record-list > .record-item.is-failed {
  border-color: rgba(228, 118, 104, .34) !important;
}

.records-list > .record-item .record-error-message {
  min-width: 0;
  overflow: hidden;
  color: #e6a198;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-list > .record-item .record-edit.record-retry {
  border-color: rgba(79, 213, 189, .48) !important;
  background: rgba(79, 213, 189, .12) !important;
  color: #75e5d0 !important;
}

.records-list > .record-item .record-edit.record-retry:hover:not(:disabled) {
  border-color: #66dec8 !important;
  background: rgba(79, 213, 189, .22) !important;
}

/* The fullscreen storyboard editor uses the generated media instead of the placeholder canvas. */
#shotFullscreenEditor .shot-fullscreen-image.has-generated-media {
  background: #080d0f !important;
  box-shadow: 0 22px 66px rgba(0, 0, 0, .46) !important;
}

#shotFullscreenEditor .shot-fullscreen-image.has-generated-media::after {
  display: none;
}

#shotFullscreenEditor .shot-fullscreen-image > .shot-fullscreen-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080d0f;
  pointer-events: none;
}

.records-list.is-storyboard-list .storyboard-shot-thumb > img,
.records-list.is-storyboard-list .storyboard-shot-thumb > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Voice selection feedback and the selected-role playback waveform. */
html body .asset-voice-option {
  position: relative;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

html body .asset-voice-option.is-selected {
  border-color: rgba(78, 215, 194, .62) !important;
  background: rgba(42, 65, 63, .76) !important;
  box-shadow: inset 3px 0 0 #4fd7c2, 0 0 0 1px rgba(79, 215, 194, .08);
}

html body .asset-voice-option.is-selected::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #4fd7c2;
  color: #071716;
  font-size: 11px;
  font-weight: 950;
}

html body .asset-voice-option.is-selected .asset-voice-use {
  border-color: rgba(79, 215, 194, .52);
  background: rgba(79, 215, 194, .13);
  color: #74ead8;
}

html body .asset-voice-waveform {
  width: 100%;
  min-height: 43px;
  margin-top: 9px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(79, 211, 190, .22);
  border-radius: 5px;
  background: rgba(45, 117, 106, .08);
  color: #79a29e;
  cursor: pointer;
}

html body .asset-voice-waveform.hidden {
  display: none !important;
}

html body .asset-voice-waveform:hover,
html body .asset-voice-waveform.is-playing {
  border-color: rgba(79, 215, 190, .48);
  background: rgba(50, 153, 137, .12);
  color: #65decc;
}

html body .asset-voice-waveform em {
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

html body .asset-voice-wave-bars {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

html body .asset-voice-wave-bars i {
  width: 2px;
  height: var(--wave-height, 8px);
  border-radius: 999px;
  background: #4fc9b7;
  opacity: .70;
  transform-origin: center;
}

html body .asset-voice-wave-bars i:nth-child(3n + 1) { --wave-height: 9px; }
html body .asset-voice-wave-bars i:nth-child(3n + 2) { --wave-height: 18px; }
html body .asset-voice-wave-bars i:nth-child(3n) { --wave-height: 13px; }

html body .asset-voice-waveform.is-playing .asset-voice-wave-bars i {
  animation: asset-voice-wave .62s ease-in-out infinite alternate;
  opacity: 1;
}

html body .asset-voice-waveform.is-playing .asset-voice-wave-bars i:nth-child(2n) {
  animation-delay: -.25s;
}

html body .asset-voice-waveform.is-playing .asset-voice-wave-bars i:nth-child(3n) {
  animation-delay: -.44s;
}

@keyframes asset-voice-wave {
  from { transform: scaleY(.42); }
  to { transform: scaleY(1.22); }
}

/* Keep both “使用” and “已选择” exactly centered inside the action button. */
html body .asset-voice-popover .asset-voice-option .asset-voice-use {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  line-height: 1 !important;
}

/* Filtering only changes the rows inside the library; the dialog frame stays fixed. */
html body .asset-voice-popover .asset-voice-dialog {
  height: min(600px, calc(100dvh - 32px)) !important;
  min-height: min(600px, calc(100dvh - 32px)) !important;
  max-height: min(600px, calc(100dvh - 32px)) !important;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
}

html body .asset-voice-popover .asset-voice-dialog-body {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

html body .asset-voice-popover .asset-voice-library {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html body .asset-voice-popover .asset-voice-library-list {
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 470px) {
  html body .asset-voice-popover .asset-voice-dialog {
    height: calc(100dvh - 20px) !important;
    min-height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    display: block;
    overflow: auto;
  }

  html body .asset-voice-popover .asset-voice-dialog-body {
    height: auto !important;
    overflow: visible;
  }

  html body .asset-voice-popover .asset-voice-library {
    overflow: visible;
  }

  html body .asset-voice-popover .asset-voice-library-list {
    overflow: visible;
  }
}

@media (max-width: 520px) {
  .records-page-open .app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .records-modal {
    height: auto;
    min-height: calc(100vh - 74px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .records-filters {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    grid-auto-rows: 52px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #26323a;
  }

  .record-filter {
    min-height: 52px;
    border-right: 1px solid #202b32;
    border-bottom: 0;
  }

  .record-filter.is-active {
    box-shadow: inset 0 -3px 0 var(--accent);
  }

  .records-sub-filters {
    grid-column: 1;
    grid-row: 2;
  }

  .records-list,
  .records-list-modal {
    grid-column: 1;
    grid-row: 3;
  }

  .dialogue-record-main {
    padding: 20px 16px 180px;
  }

  .dialogue-bottom-input {
    left: 14px !important;
    right: 14px !important;
  }
}

/* Asset library final cascade lock. */
.asset-library-modal {
  background:
    radial-gradient(circle at 88% 5%, rgba(79, 213, 189, .10), transparent 26%),
    rgba(2, 7, 9, .84) !important;
}

.asset-library-panel {
  border-color: #33464d !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 213, 189, .09), transparent 28%),
    linear-gradient(145deg, #10191e 0%, #081014 68%, #071014 100%) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.asset-library-head {
  border-bottom-color: #29383f !important;
  background: rgba(13, 21, 26, .88) !important;
}

.asset-project-list {
  background:
    linear-gradient(180deg, rgba(79, 213, 189, .045), transparent 32%),
    #0a1216 !important;
}

.asset-gallery {
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 213, 189, .045), transparent 30%),
    #081014 !important;
}

.asset-project {
  border-color: #2f4047 !important;
  background: #111a20 !important;
  box-shadow: none !important;
}

.asset-project:hover {
  border-color: #41575f !important;
  background: #152127 !important;
  box-shadow: none !important;
}

.asset-project.is-active {
  border-color: rgba(79, 213, 189, .62) !important;
  background:
    linear-gradient(90deg, rgba(79, 213, 189, .15), rgba(79, 213, 189, .055)),
    #10201f !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .055) !important;
}

.asset-card {
  border-color: #2d3e45 !important;
  background: #10191f !important;
  box-shadow: none !important;
}

.asset-card:hover {
  border-color: rgba(79, 213, 189, .60) !important;
  background: #12201f !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25) !important;
}

@media (max-width: 760px) {
  .asset-library-panel {
    border-radius: 15px !important;
  }
}

/* Larger generation-category titles. */
.records-filters .record-filter {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

@media (max-width: 680px) {
  .records-filters .record-filter {
    font-size: 15px !important;
  }
}

/* Media editor backdrop and perfectly circular annotation markers. */
.record-image-editor {
  background: rgba(1, 6, 8, .56) !important;
  backdrop-filter: blur(6px) saturate(.94) !important;
}

.record-image-marker-dot {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  aspect-ratio: 1 / 1;
  display: grid !important;
  place-items: center;
  flex: 0 0 30px;
  box-sizing: border-box;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

/* Final asset-library color layer; kept last so legacy modal rules cannot flatten it. */
.asset-library-modal {
  background:
    radial-gradient(circle at 88% 5%, rgba(79, 213, 189, .10), transparent 26%),
    rgba(2, 7, 9, .84) !important;
}

.asset-library-panel {
  border-color: #33464d !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 213, 189, .09), transparent 28%),
    linear-gradient(145deg, #10191e 0%, #081014 68%, #071014 100%) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.asset-library-head {
  border-bottom-color: #29383f !important;
  background: rgba(13, 21, 26, .88) !important;
}

.asset-project-list {
  background:
    linear-gradient(180deg, rgba(79, 213, 189, .045), transparent 32%),
    #0a1216 !important;
}

.asset-gallery {
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 213, 189, .045), transparent 30%),
    #081014 !important;
}

.asset-project {
  border-color: #2f4047 !important;
  background: #111a20 !important;
  box-shadow: none !important;
}

.asset-project:hover {
  border-color: #41575f !important;
  background: #152127 !important;
  box-shadow: none !important;
}

.asset-project.is-active {
  border-color: rgba(79, 213, 189, .62) !important;
  background:
    linear-gradient(90deg, rgba(79, 213, 189, .15), rgba(79, 213, 189, .055)),
    #10201f !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .055) !important;
}

.asset-card {
  border-color: #2d3e45 !important;
  background: #10191f !important;
  box-shadow: none !important;
}

.asset-card:hover {
  border-color: rgba(79, 213, 189, .60) !important;
  background: #12201f !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25) !important;
}

@media (max-width: 760px) {
  .asset-library-panel {
    border-radius: 15px !important;
  }
}

/* Scoped annotation update: polished generation record cards. */
.record-context-menu {
  position: fixed;
  z-index: 2700;
  width: 128px;
  padding: 5px;
  border: 1px solid #344249;
  border-radius: 6px;
  background: rgba(15, 23, 28, .98);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  backdrop-filter: blur(12px);
}

.record-context-menu[hidden] {
  display: none !important;
}

.record-context-delete {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #d9e1e2;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.record-context-delete:hover,
.record-context-delete:focus-visible {
  border-color: rgba(217, 99, 99, .34);
  outline: none;
  background: rgba(217, 99, 99, .12);
  color: #ffb5b5;
}

.records-list > .record-item {
  box-sizing: border-box;
  width: min(980px, calc(100% - 32px));
  min-height: 142px;
  grid-template-columns: 176px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  justify-self: center;
  margin: 18px auto 0;
  padding: 14px !important;
  border: 1px solid #2f3d45 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(79, 213, 189, .055), transparent 28%),
    linear-gradient(135deg, #11191e 0%, #0d1419 100%) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .025);
  cursor: default !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.records-list > .record-item:hover {
  transform: translateY(-1px);
  border-color: rgba(79, 213, 189, .46) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.records-list > .record-item .record-thumb-wrap {
  width: 176px !important;
  height: 112px !important;
  align-self: center;
  border: 1px solid #2e3b42;
  border-radius: 12px !important;
  background: #080e12 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}

.records-list > .record-item .record-thumb {
  width: 176px !important;
  height: 112px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(79, 213, 189, .08), transparent 34%),
    #080e12 !important;
}

.records-list > .record-item .record-thumb-empty {
  color: #8ba1a7 !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .04em;
}

.records-list > .record-item .record-body {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  gap: 10px;
  padding: 3px 2px;
}

.records-list > .record-item .record-tags {
  gap: 6px !important;
}

.records-list > .record-item .record-tag {
  min-height: 25px !important;
  padding: 0 9px !important;
  border: 1px solid #34434b !important;
  border-radius: 7px !important;
  background: #131d23 !important;
  color: #9eb0b5 !important;
  font-size: 11px !important;
  font-weight: 650;
}

.records-list > .record-item .record-tag:hover {
  border-color: rgba(79, 213, 189, .42) !important;
  color: #cfe0dc !important;
}

.records-list > .record-item .record-model-tag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 142px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-list > .record-item .record-prompt {
  align-self: center;
  display: -webkit-box;
  overflow: hidden;
  margin: 0 !important;
  color: #eef3f2 !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.records-list > .record-item .record-actions {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
}

.records-list > .record-item .record-generated-time {
  flex: 0 0 auto;
  min-width: 38px;
  color: #81949a;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.records-list > .record-item .record-progress {
  flex: 0 1 180px;
  width: min(34%, 180px);
  min-width: 76px;
  height: 3px !important;
  margin: 0 !important;
  border-radius: 999px;
  background: #26343b !important;
}

.records-list > .record-item .record-progress span {
  border-radius: inherit;
  background: var(--accent) !important;
  box-shadow: 0 0 12px rgba(79, 213, 189, .24);
}

.records-list > .record-item .record-edit,
.records-list > .record-item .record-download {
  min-width: 82px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  font-size: 12px;
  font-weight: 800;
}

.records-list > .record-item .record-edit {
  border: 1px solid #3a4a52 !important;
  background: #151f25 !important;
  color: #d7e1df !important;
}

.records-list > .record-item .record-edit:hover:not(:disabled) {
  border-color: rgba(79, 213, 189, .46) !important;
  background: #19282c !important;
  color: #ffffff !important;
}

.records-list > .record-item .record-download {
  border: 1px solid rgba(79, 213, 189, .48) !important;
  background: rgba(79, 213, 189, .10) !important;
  color: var(--accent) !important;
}

.records-list > .record-item .record-download:hover:not(:disabled) {
  border-color: rgba(79, 213, 189, .74) !important;
  background: rgba(79, 213, 189, .16) !important;
}

.records-list > .record-item .record-edit:disabled,
.records-list > .record-item .record-download:disabled {
  border-color: #313d43 !important;
  background: #11191e !important;
  color: #66777d !important;
}

.records-list > .record-item[data-record-type="video"],
.records-list > .record-item[data-record-type="beautify"] {
  border-color: #33474e !important;
  background:
    radial-gradient(circle at 8% 14%, rgba(79, 213, 189, .09), transparent 30%),
    linear-gradient(135deg, #111b20 0%, #0b1318 100%) !important;
}

.records-list > .record-item[data-record-type="video"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="beautify"] .record-thumb-wrap {
  border-color: rgba(79, 213, 189, .30);
  background: #071015 !important;
}

.records-list > .record-item[data-record-type="video"] .record-thumb,
.records-list > .record-item[data-record-type="beautify"] .record-thumb {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, transparent 22%, rgba(79, 213, 189, .10) 44%, transparent 66%),
    radial-gradient(circle at 50% 50%, rgba(79, 213, 189, .12), transparent 44%),
    #071015 !important;
  background-size: 220% 100%, 100% 100%, 100% 100% !important;
  color: #9bc7bf !important;
  animation: recordVideoSweep 2.8s ease-in-out infinite;
}

.records-list > .record-item[data-record-type="video"] .record-thumb-empty::before,
.records-list > .record-item[data-record-type="beautify"] .record-thumb-empty::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(79, 213, 189, .09);
  animation: recordVideoPulse 1.4s ease-in-out infinite;
}

.records-list > .record-item[data-record-type="video"] .record-progress,
.records-list > .record-item[data-record-type="beautify"] .record-progress {
  height: 4px !important;
  background: #27363d !important;
}

.records-list > .record-item[data-record-type="video"] .record-edit,
.records-list > .record-item[data-record-type="beautify"] .record-edit {
  border-color: rgba(79, 213, 189, .52) !important;
  background: rgba(79, 213, 189, .12) !important;
  color: var(--accent) !important;
}

.records-list > .record-item[data-record-type="video"] .record-edit:hover,
.records-list > .record-item[data-record-type="beautify"] .record-edit:hover {
  border-color: rgba(79, 213, 189, .74) !important;
  background: rgba(79, 213, 189, .18) !important;
}

@keyframes recordVideoSweep {
  0%, 100% { background-position: 120% 0, 0 0, 0 0; }
  50% { background-position: -80% 0, 0 0, 0 0; }
}

@keyframes recordVideoPulse {
  0%, 100% { opacity: .48; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 680px) {
  .records-list > .record-item {
    width: calc(100% - 20px);
    min-height: 122px;
    grid-template-columns: 126px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-top: 10px;
    padding: 11px !important;
    border-radius: 13px !important;
  }

  .records-list > .record-item .record-thumb-wrap,
  .records-list > .record-item .record-thumb {
    width: 126px !important;
    height: 92px !important;
    border-radius: 10px !important;
  }

  .records-list > .record-item .record-body {
    min-height: 92px;
    gap: 7px;
    padding: 0;
  }

  .records-list > .record-item .record-tag {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 9px !important;
  }

  .records-list > .record-item .record-prompt {
    font-size: 13px !important;
    line-height: 1.42;
  }

  .records-list > .record-item .record-actions {
    gap: 7px !important;
  }

  .records-list > .record-item .record-generated-time {
    min-width: 32px;
    font-size: 9px;
  }

  .records-list > .record-item .record-progress {
    width: min(30%, 110px);
    min-width: 48px;
  }

  .records-list > .record-item .record-edit,
  .records-list > .record-item .record-download {
    min-width: 58px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 10px;
  }
}

@media (max-width: 430px) {
  .records-list > .record-item {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  .records-list > .record-item .record-thumb-wrap,
  .records-list > .record-item .record-thumb {
    width: 96px !important;
    height: 82px !important;
  }

  .records-list > .record-item .record-body {
    min-height: 82px;
  }
}

/* Scoped image-record editing modal with on-image annotations. */
.record-image-editor {
  position: fixed;
  inset: 0;
  z-index: 340;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(1, 6, 8, .86);
  backdrop-filter: blur(14px);
}

.record-image-editor-panel {
  box-sizing: border-box;
  width: min(940px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #31424a;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% -20%, rgba(79, 213, 189, .12), transparent 38%),
    linear-gradient(180deg, #10191e 0%, #091116 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.record-image-editor-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #27353c;
}

.record-image-editor-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.record-image-editor-head strong {
  color: #f2f6f5;
  font-size: 20px;
  line-height: 1;
}

.record-image-editor-head span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(79, 213, 189, .32);
  border-radius: 999px;
  background: rgba(79, 213, 189, .08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
}

.record-image-editor-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #34444c;
  border-radius: 10px;
  background: #141e24;
  color: #d9e3e1;
  font-size: 24px;
  line-height: 1;
}

.record-image-editor-close:hover {
  border-color: rgba(79, 213, 189, .52);
  background: #19272c;
}

.record-image-editor-stage-wrap {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 9px;
}

.record-image-editor-hint {
  color: #8fa1a6;
  font-size: 12px;
  line-height: 1.3;
}

.record-image-editor-stage {
  position: relative;
  width: min(100%, 810px);
  aspect-ratio: 16 / 9;
  max-height: 48vh;
  overflow: visible;
  border: 1px solid rgba(79, 213, 189, .42);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 38%, rgba(79, 213, 189, .13), transparent 28%),
    linear-gradient(145deg, #132329 0%, #091216 58%, #071014 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018), 0 18px 42px rgba(0, 0, 0, .24);
  cursor: crosshair;
}

.record-image-editor-stage > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #8fa5a8;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .05em;
  pointer-events: none;
}

.record-image-editor.is-video .record-image-editor-panel {
  background:
    radial-gradient(circle at 50% -18%, rgba(79, 213, 189, .15), transparent 40%),
    linear-gradient(180deg, #101b20 0%, #081116 100%);
}

.record-image-editor.is-video .record-image-editor-stage {
  background:
    linear-gradient(120deg, transparent 24%, rgba(79, 213, 189, .08) 47%, transparent 69%),
    radial-gradient(ellipse at 50% 72%, rgba(45, 125, 119, .18), transparent 48%),
    linear-gradient(180deg, #0b171c 0%, #071015 100%);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  animation: recordVideoStageSweep 3.4s ease-in-out infinite;
}

.record-image-editor.is-video .record-image-editor-stage > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #a2c9c2;
}

.record-image-editor.is-video .record-image-editor-stage > span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(79, 213, 189, .10);
  animation: recordVideoPulse 1.4s ease-in-out infinite;
}

@keyframes recordVideoStageSweep {
  0%, 100% { background-position: 120% 0, 0 0, 0 0; }
  50% { background-position: -80% 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .records-list > .record-item[data-record-type="video"] .record-thumb,
  .records-list > .record-item[data-record-type="beautify"] .record-thumb,
  .records-list > .record-item[data-record-type="video"] .record-thumb-empty::before,
  .records-list > .record-item[data-record-type="beautify"] .record-thumb-empty::before,
  .record-image-editor.is-video .record-image-editor-stage,
  .record-image-editor.is-video .record-image-editor-stage > span::before {
    animation: none;
  }
}

.record-image-editor-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid #314149;
  border-radius: 14px;
  background: rgba(19, 29, 34, .92);
}

.record-image-editor-composer textarea {
  min-width: 0;
  min-height: 68px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid #33434b;
  border-radius: 10px;
  outline: none;
  background: #0b1318;
  color: #eaf0ef;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
}

.record-image-editor-composer textarea:focus,
.record-image-marker-box textarea:focus {
  border-color: rgba(79, 213, 189, .68);
  box-shadow: 0 0 0 3px rgba(79, 213, 189, .09);
}

.record-image-editor-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.record-image-editor-actions button {
  min-width: 76px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #3b4a52;
  border-radius: 9px;
  background: #172228;
  color: #dbe4e2;
  font-size: 12px;
  font-weight: 750;
}

.record-image-editor-actions .record-image-editor-regenerate {
  border-color: rgba(79, 213, 189, .52);
  background: rgba(79, 213, 189, .13);
  color: var(--accent);
}

.record-image-editor-actions button:hover {
  border-color: rgba(79, 213, 189, .64);
  background: #1b2b2e;
}

.record-image-marker {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
}

.record-image-marker-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border: 2px solid #d8fff7;
  border-radius: 50%;
  background: var(--accent);
  color: #061013;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 5px rgba(79, 213, 189, .14);
  font-size: 12px;
  font-weight: 900;
}

.record-image-marker-box {
  position: absolute;
  left: 20px;
  top: 18px;
  width: 258px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid rgba(79, 213, 189, .5);
  border-radius: 12px;
  background: rgba(10, 18, 22, .97);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}

.record-image-marker.is-right-edge .record-image-marker-box {
  left: auto;
  right: 20px;
}

.record-image-marker.is-bottom-edge .record-image-marker-box {
  top: auto;
  bottom: 18px;
}

.record-image-marker-box textarea {
  width: 100%;
  min-height: 66px;
  box-sizing: border-box;
  resize: none;
  padding: 8px 9px;
  border: 1px solid #33434b;
  border-radius: 8px;
  outline: none;
  background: #101a1f;
  color: #e8efed;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
}

.record-image-marker-box > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 8px;
}

.record-image-marker-box button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #3a4950;
  border-radius: 8px;
  background: #182329;
  color: #d5dfdd;
  font-size: 11px;
  font-weight: 700;
}

.record-image-marker-box .record-image-marker-regenerate {
  border-color: rgba(79, 213, 189, .5);
  background: rgba(79, 213, 189, .12);
  color: var(--accent);
}

.record-image-marker.is-saved .record-image-marker-box {
  display: none;
}

.record-image-marker.is-saved:hover .record-image-marker-box {
  display: block;
}

@media (max-width: 680px) {
  .record-image-editor {
    padding: 8px;
  }

  .record-image-editor-panel {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .record-image-editor-head {
    min-height: 38px;
    padding-bottom: 9px;
  }

  .record-image-editor-head strong {
    font-size: 17px;
  }

  .record-image-editor-close {
    width: 34px;
    height: 34px;
  }

  .record-image-editor-stage-wrap {
    gap: 6px;
  }

  .record-image-editor-stage {
    border-radius: 12px;
  }

  .record-image-editor-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
  }

  .record-image-editor-composer textarea {
    min-height: 58px;
    padding: 8px 9px;
    font-size: 11px;
  }

  .record-image-editor-actions {
    flex-direction: column-reverse;
    justify-content: flex-start;
  }

  .record-image-editor-actions button {
    min-width: 68px;
    min-height: 29px;
    padding: 0 9px;
    font-size: 10px;
  }

  .record-image-marker-box {
    width: min(230px, calc(100vw - 86px));
  }
}

/* Scoped annotation update: polished fullscreen shot marker editor. */
.shot-fullscreen-editor {
  height: 100dvh;
  box-sizing: border-box;
  grid-template-rows: 48px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 14px clamp(16px, 3vw, 36px) 16px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(79, 213, 189, .12), transparent 34%),
    linear-gradient(180deg, #071014 0%, #03080b 58%, #020608 100%) !important;
}

.shot-fullscreen-head {
  width: min(914px, 100%);
  min-height: 48px !important;
  justify-self: center;
  padding: 0 2px;
}

.shot-fullscreen-heading {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 14px !important;
}

.shot-fullscreen-heading > div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.shot-fullscreen-head strong {
  color: #ecf6f4 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

.shot-fullscreen-heading > div > span {
  min-width: 40px !important;
  height: 26px !important;
  border-color: rgba(79, 213, 189, .45) !important;
  background: rgba(79, 213, 189, .10) !important;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800 !important;
}

.shot-fullscreen-heading .shot-marker-total {
  display: inline-flex;
}

.shot-marker-total,
.shot-fullscreen-heading > small {
  padding-left: 14px;
  border-left: 1px solid #2c3b42;
  color: #7d9299;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.shot-fullscreen-close {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-color: #35434a !important;
  border-radius: 11px !important;
  background: #11191f !important;
  color: #cfd9dc !important;
  font-size: 24px !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.shot-fullscreen-close:hover {
  border-color: rgba(79, 213, 189, .55) !important;
  background: #14231f !important;
  color: var(--accent) !important;
}

.shot-fullscreen-stage {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  place-items: center !important;
}

.shot-fullscreen-image {
  width: min(914px, 100%) !important;
  max-height: 100% !important;
  border-color: rgba(79, 213, 189, .34) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(244, 230, 151, .75), transparent 9%),
    radial-gradient(circle at 43% 62%, rgba(180, 225, 208, .20), transparent 25%),
    linear-gradient(145deg, #142925 0%, #2c4b39 55%, #10202a 100%) !important;
  box-shadow:
    inset 0 -100px 160px rgba(0, 0, 0, .52),
    0 22px 66px rgba(0, 0, 0, .46),
    0 0 0 1px rgba(255, 255, 255, .025) !important;
}

.shot-fullscreen-image::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .48)) !important;
}

.shot-fullscreen-image > b,
.shot-fullscreen-image > em {
  top: 14px !important;
  min-width: 38px !important;
  height: 28px !important;
  border-color: rgba(79, 213, 189, .42) !important;
  background: rgba(5, 16, 19, .76) !important;
  backdrop-filter: blur(8px);
  font-size: 12px;
}

.shot-fullscreen-image > b {
  left: 14px !important;
}

.shot-fullscreen-image > em {
  right: 14px !important;
}

.shot-fullscreen-image > span,
.shot-fullscreen-image > p {
  left: 18px !important;
}

.shot-fullscreen-image > span {
  bottom: 42px !important;
  font-size: 14px;
}

.shot-fullscreen-image > p {
  bottom: 18px !important;
  font-size: 12px;
}

.shot-fullscreen-hint {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 4;
  transform: translateX(-50%);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(79, 213, 189, .26);
  border-radius: 999px;
  background: rgba(6, 18, 21, .78);
  color: #a7babf !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.shot-fullscreen-composer {
  width: min(914px, 100%) !important;
  min-height: 122px !important;
  grid-template-columns: 40px minmax(0, 1fr) 68px !important;
  grid-template-rows: 62px auto !important;
  gap: 7px 10px !important;
  padding: 11px !important;
  border-color: #34464d !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 213, 189, .075), transparent 34%),
    #0d161b !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.shot-plus,
.shot-send {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-color: #365058 !important;
  background: #14262a !important;
  color: #dce9e7 !important;
  font-size: 20px !important;
}

.shot-send {
  width: 68px !important;
  min-width: 68px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 0 !important;
  background: var(--accent) !important;
  color: #071713 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  box-shadow: 0 10px 30px rgba(79, 213, 189, .18);
}

.shot-fullscreen-composer textarea {
  min-height: 62px !important;
  height: 62px !important;
  padding: 5px 4px !important;
  color: #edf4f3 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: #40545c transparent;
}

.shot-fullscreen-tools {
  position: relative;
  z-index: 20;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow: visible !important;
  scrollbar-width: none;
}

.shot-fullscreen-tools::-webkit-scrollbar {
  display: none;
}

.shot-fullscreen-tools button {
  min-height: 31px !important;
  flex: 0 0 auto;
  padding: 0 11px !important;
  border-color: #33434a !important;
  border-radius: 8px !important;
  background: #111b20 !important;
  color: #cbd6d8 !important;
  font-size: 11px;
  font-weight: 750 !important;
}

.shot-fullscreen-tools button:hover {
  border-color: #4c626a !important;
  color: #eef5f4 !important;
}

.shot-fullscreen-tools .shot-advanced-wrap {
  position: relative;
  flex: 0 0 auto;
}

.shot-fullscreen-tools .shot-advanced-wrap > button {
  height: 31px;
}

.shot-fullscreen-tools .shot-tool-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: 220px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(110, 144, 142, .24);
  border-radius: 8px;
  background: #111a1d;
  color: #e6efed;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .52);
}

.shot-fullscreen-tools .shot-tool-popover.hidden {
  display: none !important;
}

.shot-fullscreen-tools .shot-tool-popover > strong {
  display: block;
  margin-bottom: 10px;
  color: #dce7e5;
  font-size: 12px;
}

.shot-fullscreen-tools .shot-model-options {
  display: grid;
  gap: 6px;
}

.shot-fullscreen-tools .shot-model-options button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.shot-fullscreen-tools .shot-model-options button i {
  visibility: hidden;
  color: var(--accent);
  font-style: normal;
}

.shot-fullscreen-tools .shot-model-options button.is-active {
  border-color: rgba(79, 213, 189, .48) !important;
  background: rgba(79, 213, 189, .10) !important;
  color: #e6f7f3 !important;
}

.shot-fullscreen-tools .shot-model-options button.is-active i {
  visibility: visible;
}

.shot-fullscreen-tools .shot-preference-popover label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #91a4a4;
  font-size: 11px;
}

.shot-fullscreen-tools .shot-preference-popover select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(110, 144, 142, .24);
  border-radius: 6px;
  background: #172125;
  color: #e6efed;
  font: inherit;
}

.shot-fullscreen-tools .shot-model-trigger[aria-expanded="true"],
.shot-fullscreen-tools .shot-preference-trigger[aria-expanded="true"],
.shot-fullscreen-tools .shot-skill-trigger[aria-expanded="true"],
.shot-fullscreen-tools .shot-mention-trigger[aria-expanded="true"],
.shot-fullscreen-tools .shot-agent-trigger.is-active,
.shot-fullscreen-tools .shot-agent-trigger[aria-pressed="true"] {
  border-color: rgba(79, 213, 189, .52) !important;
  background: rgba(79, 213, 189, .12) !important;
  color: var(--accent) !important;
}

.shot-fullscreen-tools .shot-context-popover {
  width: 286px;
  padding: 10px;
  background: #11191c;
}

.shot-fullscreen-tools .shot-mention-popover {
  width: 254px;
}

.shot-fullscreen-tools .shot-context-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.shot-fullscreen-tools .shot-context-head strong {
  color: #e5efed;
  font-size: 12px;
}

.shot-fullscreen-tools .shot-context-head small {
  color: #718484;
  font-size: 9px;
  white-space: nowrap;
}

.shot-fullscreen-tools .shot-skill-options,
.shot-fullscreen-tools .shot-mention-options {
  display: grid;
  gap: 5px;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3d5055 transparent;
}

.shot-fullscreen-tools .shot-skill-options::-webkit-scrollbar,
.shot-fullscreen-tools .shot-mention-options::-webkit-scrollbar {
  width: 2px;
}

.shot-fullscreen-tools .shot-skill-options::-webkit-scrollbar-thumb,
.shot-fullscreen-tools .shot-mention-options::-webkit-scrollbar-thumb {
  background: #3d5055;
}

.shot-fullscreen-tools .shot-skill-options button,
.shot-fullscreen-tools .shot-mention-options button {
  width: 100%;
  min-height: 46px !important;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px !important;
  text-align: left;
}

.shot-fullscreen-tools .shot-mention-options button {
  min-height: 38px !important;
}

.shot-fullscreen-tools .shot-skill-options button.hidden,
.shot-fullscreen-tools .shot-mention-options button.hidden {
  display: none !important;
}

.shot-fullscreen-tools .shot-skill-options button > b,
.shot-fullscreen-tools .shot-mention-options button > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 213, 189, .10);
  color: var(--accent);
  font-size: 11px;
}

.shot-fullscreen-tools .shot-skill-options button > span,
.shot-fullscreen-tools .shot-mention-options button > span {
  min-width: 0;
  color: #dbe7e5;
  font-size: 11px;
  font-weight: 750;
}

.shot-fullscreen-tools .shot-skill-options button > span small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #718383;
  font-size: 9px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shot-fullscreen-tools .shot-skill-options button > i,
.shot-fullscreen-tools .shot-mention-options button > i {
  color: #6f8181;
  font-style: normal;
  text-align: center;
}

.shot-fullscreen-tools .shot-skill-options button.is-active,
.shot-fullscreen-tools .shot-mention-options button.is-active {
  border-color: rgba(79, 213, 189, .45) !important;
  background: rgba(79, 213, 189, .10) !important;
  color: #effbf8 !important;
}

.shot-fullscreen-tools .shot-skill-options button.is-active > i,
.shot-fullscreen-tools .shot-mention-options button.is-active > i {
  color: var(--accent);
}

.shot-fullscreen-tools .shot-mention-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 7px;
}

.shot-fullscreen-tools .shot-mention-tabs button {
  width: 100%;
  min-height: 28px !important;
  padding: 0 6px !important;
}

.shot-fullscreen-tools .shot-mention-tabs button.is-active {
  border-color: rgba(79, 213, 189, .45) !important;
  background: rgba(79, 213, 189, .10) !important;
  color: var(--accent) !important;
}

.shot-fullscreen-tools .shot-regenerate {
  border-color: rgba(79, 213, 189, .52) !important;
  background: rgba(79, 213, 189, .12) !important;
  color: var(--accent) !important;
}

.shot-point-editor {
  z-index: 8 !important;
  transform: translate(-13px, -13px) !important;
}

.shot-point-dot {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border: 2px solid #dffbf6 !important;
  background: var(--accent) !important;
  color: #071713 !important;
  font-size: 10px;
  box-shadow: 0 0 0 3px rgba(79, 213, 189, .14), 0 6px 18px rgba(0, 0, 0, .42) !important;
}

.shot-point-box {
  left: 40px !important;
  top: 0 !important;
  width: min(260px, calc(100vw - 84px)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-color: rgba(79, 213, 189, .48) !important;
  border-radius: 12px !important;
  background: rgba(8, 18, 22, .96) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .54) !important;
  backdrop-filter: blur(14px);
  transform-origin: left top;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.shot-point-editor.is-right-edge .shot-point-box {
  left: auto !important;
  right: 40px !important;
  transform-origin: right top;
}

.shot-point-editor.is-bottom-edge .shot-point-box {
  top: auto !important;
  bottom: 0;
}

.shot-point-box textarea {
  min-height: 66px !important;
  padding: 9px 10px !important;
  border-color: #35474e !important;
  border-radius: 8px !important;
  background: #0f191e !important;
  color: #edf5f3 !important;
  font-size: 12px;
  line-height: 1.5;
}

.shot-point-box textarea:focus,
.shot-point-box textarea:focus-visible {
  border-color: #45555b !important;
  outline: none !important;
  box-shadow: none !important;
}

.shot-point-box button {
  min-height: 30px !important;
  border-color: #36464d !important;
  background: #121d22 !important;
  color: #cfdbdd !important;
  font-size: 11px;
}

.shot-point-box .shot-point-regenerate {
  border-color: rgba(79, 213, 189, .50) !important;
  background: rgba(79, 213, 189, .13) !important;
  color: var(--accent) !important;
}

.shot-point-editor.is-saved .shot-point-box {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px) scale(.98);
}

.shot-point-editor.is-saved:hover .shot-point-box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

@media (min-height: 860px) and (min-width: 1000px) {
  .shot-fullscreen-head,
  .shot-fullscreen-image,
  .shot-fullscreen-composer {
    width: min(1080px, 100%) !important;
  }
}

@media (max-width: 680px) {
  .shot-fullscreen-editor {
    grid-template-rows: 44px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
  }

  .shot-fullscreen-head {
    min-height: 44px !important;
  }

  .shot-fullscreen-head strong {
    font-size: 18px !important;
  }

  .shot-marker-total,
  .shot-fullscreen-heading > small {
    padding-left: 10px;
    font-size: 10px;
  }

  .shot-fullscreen-close {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .shot-fullscreen-image {
    border-radius: 13px !important;
  }

  .shot-fullscreen-hint {
    top: 8px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 9px !important;
  }

  .shot-fullscreen-composer {
    min-height: 118px !important;
    grid-template-columns: 36px minmax(0, 1fr) 60px !important;
    grid-template-rows: 58px auto !important;
    gap: 6px 8px !important;
    padding: 9px !important;
    border-radius: 13px !important;
  }

  .shot-plus {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .shot-send {
    width: 60px !important;
    min-width: 60px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .shot-fullscreen-composer textarea {
    min-height: 58px !important;
    height: 58px !important;
    font-size: 11px !important;
  }

  .shot-fullscreen-tools {
    gap: 5px !important;
  }

  .shot-fullscreen-tools button {
    min-height: 29px !important;
    padding: 0 9px !important;
    font-size: 10px;
  }
}

/* Scoped annotation update: refined project picker. */
.project-modal {
  place-items: center !important;
  padding: 24px !important;
  overflow: auto !important;
  background: rgba(2, 6, 8, .54) !important;
  backdrop-filter: blur(6px) saturate(.92) !important;
}

.project-panel {
  width: min(520px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 36px) !important;
  padding: 0 !important;
  border: 1px solid #35444c !important;
  border-radius: 16px !important;
  background: #0d1419 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  overflow: hidden !important;
}

.project-panel-head {
  min-height: 70px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: initial !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #28353d !important;
  background: #10181e !important;
}

.project-panel-head h2 {
  min-width: 0;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  color: #f2f6f5 !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap;
}

.project-folder-icon {
  width: 28px !important;
  height: 20px !important;
  flex: 0 0 auto;
  border-color: #c9d3d6 !important;
  opacity: .9;
}

.project-folder-icon::before {
  width: 12px !important;
  height: 6px !important;
  top: -7px !important;
  border-color: #c9d3d6 !important;
}

.project-add-head {
  justify-self: start;
  width: auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid #3a4850 !important;
  border-radius: 8px !important;
  background: #151d23 !important;
  color: #dce3e1 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.project-add-head:hover {
  border-color: rgba(79, 213, 189, .58) !important;
  background: #14211f !important;
  color: var(--accent) !important;
}

.project-close {
  justify-self: end;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #3a4850 !important;
  border-radius: 9px !important;
  background: #151d23 !important;
  color: #dce3e1 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
}

.project-close:hover {
  border-color: #566871 !important;
  background: #1a242b !important;
  color: #fff !important;
}

.project-list {
  max-height: calc(100vh - 132px) !important;
  display: grid !important;
  gap: 10px !important;
  padding: 14px 16px 16px !important;
  overflow: auto !important;
  background: #0a1014 !important;
}

.project-item {
  min-height: 90px !important;
  display: grid !important;
  grid-template-columns: 20px 104px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border: 1px solid #2d3a42 !important;
  border-radius: 12px !important;
  background: #10171c !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease !important;
}

.project-item:hover {
  transform: translateY(-1px);
  border-color: #40515a !important;
  background: #121b21 !important;
}

.project-item.is-active {
  border-color: rgba(79, 213, 189, .72) !important;
  background: #10201e !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.project-radio {
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #54656d !important;
  border-radius: 50% !important;
  background: #0b1115 !important;
}

.project-item.is-active .project-radio {
  border-color: var(--accent) !important;
  background: rgba(79, 213, 189, .10) !important;
}

.project-item.is-active .project-radio::after {
  width: 10px !important;
  height: 10px !important;
  background: var(--accent) !important;
  box-shadow: none !important;
}

.project-thumb {
  width: 104px !important;
  height: 60px !important;
  border: 1px solid #3b4b53 !important;
  border-radius: 9px !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .24) !important;
}

.project-item input {
  min-width: 0;
  min-height: 40px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  color: #eef3f2 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
}

.project-item input:focus-visible {
  outline: 2px solid rgba(79, 213, 189, .62) !important;
  outline-offset: 3px !important;
  border-radius: 5px;
}

.project-delete {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #35434b !important;
  border-radius: 8px !important;
  background: #141c22 !important;
  color: #9eaaaf !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.project-delete:hover {
  border-color: rgba(255, 143, 148, .56) !important;
  background: rgba(255, 143, 148, .08) !important;
  color: #ff9ba0 !important;
}

@media (max-width: 560px) {
  .project-modal {
    padding: 12px !important;
  }

  .project-panel {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  .project-panel-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .project-panel-head h2 {
    font-size: 19px !important;
  }

  .project-add-head {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .project-close {
    grid-column: 2;
    grid-row: 1;
  }

  .project-list {
    max-height: calc(100vh - 152px) !important;
    padding: 10px !important;
  }

  .project-item {
    grid-template-columns: 18px 72px minmax(0, 1fr) 34px !important;
    gap: 10px !important;
    min-height: 78px !important;
    padding: 10px !important;
  }

  .project-thumb {
    width: 72px !important;
    height: 48px !important;
  }

  .project-item input {
    font-size: 16px !important;
  }

  .project-delete {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* Horizontal studio layout — selected visual reference.
   Presentation only: all existing copy, DOM structure, data and behavior are preserved. */
.records-modal {
  height: calc(100vh - 84px);
  min-height: 536px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid #27343b;
  border-radius: 11px;
  background: #0a1014;
  overflow: hidden;
}

.records-filters {
  grid-column: 1;
  grid-row: 1;
  align-self: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 58px;
  align-content: initial;
  gap: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-right: 0;
  border-bottom: 1px solid #27343b;
  border-radius: 0;
  background: #0d1419;
  box-shadow: none;
  overflow: hidden;
}

.record-filter {
  min-width: 0;
  min-height: 58px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid #202c33;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: #939da3;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.record-filter:last-child {
  border-right: 0;
}

.record-filter:hover {
  background: #111a20;
  color: #cdd6d4;
}

.record-filter.is-active {
  color: var(--accent);
  background: #10191e;
  box-shadow: inset 0 -3px 0 var(--accent);
}

.records-sub-filters {
  grid-column: 1;
  grid-row: 2;
  padding: 10px 14px;
  background: #0c1317;
}

.records-list,
.records-list-modal {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: auto;
  background: #0a1014;
}

.dialogue-record-page {
  width: 100%;
  min-height: 100%;
  background: #0a1014;
}

.dialogue-record-main {
  min-height: 100%;
  padding: 18px 34px 174px;
  border: 0;
  border-radius: 0;
  background: #0a1014;
  color: #edf2f1;
  overflow: visible;
}

.dialogue-record-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 4px 0 18px;
  border-bottom: 1px solid #202c33;
}

.dialogue-record-top h2 {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #34434b;
  border-radius: 999px;
  background: #0d171b;
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
}

.dialogue-record-tools {
  justify-self: center;
  width: min(468px, 100%);
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border: 1px solid #303e46;
  border-radius: 8px;
  background: #0f161b;
  box-shadow: none;
  overflow: hidden;
}

.dialogue-record-tools button {
  min-width: 0;
  min-height: 32px;
  padding: 0 5px;
  border-right: 1px solid #27343b;
  border-radius: 0;
  background: transparent;
  color: #9ca8ad;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.dialogue-record-tools button:last-child {
  border-right: 0;
}

.dialogue-user-bubble {
  max-width: 760px;
  margin: 0 34px 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f0f4f3;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.72;
}

.dialogue-ai-result {
  max-width: 760px;
  margin: 0 34px;
  padding: 0 0 30px;
  border: 0;
  color: #e8eeec;
}

.dialogue-ai-result > span {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.dialogue-ai-result > span > time {
  color: #657b80;
  font-size: 10px;
  font-weight: 650;
}

html body .dialogue-ai-result > .dialogue-result-heading {
  flex-wrap: wrap;
}

html body .dialogue-result-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
}

html body .dialogue-result-actions button {
  height: 26px;
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid #30464c;
  border-radius: 5px;
  background: transparent;
  color: #9db9b8;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

html body .dialogue-result-actions button:hover,
html body .dialogue-result-actions button:focus-visible {
  color: #60dbc9;
  border-color: #46b8a7;
}

html body .dialogue-ai-result .dialogue-history-feedback {
  margin: 8px 0;
  color: #48d4c0;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}
html body .dialogue-ai-result .dialogue-history-feedback.is-error { color: #ff6b72; }

html body .dialogue-result-actions button:disabled {
  opacity: .5;
  cursor: wait;
}

/* 对话生成记录：模型与时间固定成右侧信息组，模型位于时间左边。 */
html body .dialogue-ai-result > span > .dialogue-result-meta {
  display: inline-flex;
  min-width: 0;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

html body .dialogue-ai-result .dialogue-result-model-inline {
  min-width: 0;
  max-width: min(38vw, 240px);
  overflow: hidden;
  color: #91a9ad;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .dialogue-ai-result > span > .dialogue-result-meta > time {
  flex: 0 0 auto;
  cursor: help;
}

/* 兼容旧缓存/旧记录：预览框内的模型徽标已废弃，模型信息仅显示在时间左侧。 */
html body .dialogue-result-media .dialogue-result-model-badge {
  display: none !important;
}

.dialogue-ai-result p {
  max-width: 720px;
  margin: 0 0 16px;
  color: #cbd4d2;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.72;
}

.dialogue-result-media {
  width: 100%;
  max-width: 760px;
  height: clamp(166px, 30vw, 226px);
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  border: 1px solid #34434b;
  border-radius: 8px;
  background: #121b21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}

.dialogue-result-media > span {
  width: 42px;
  height: 42px;
  border-color: #37464e;
  background: #0a1014;
  color: #f1f5f4;
}

.dialogue-bottom-input {
  position: fixed !important;
  left: 40px !important;
  right: 40px !important;
  bottom: 18px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 118px !important;
  margin: 0 !important;
  grid-template-rows: minmax(44px, auto) auto !important;
  gap: 8px !important;
  padding: 14px 64px 14px 64px !important;
  border: 1px solid #37464e !important;
  border-radius: 14px !important;
  background: #10181e !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.dialogue-bottom-input .dialogue-plus {
  left: 18px !important;
  top: 18px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-color: #3d5157 !important;
  background: #142126 !important;
  color: var(--accent) !important;
}

.dialogue-bottom-input textarea {
  min-height: 48px !important;
  height: 50px !important;
  padding: 8px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #f2f5f4 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.dialogue-bottom-input .dialogue-input-tools {
  min-height: 34px !important;
  gap: 8px !important;
  padding-top: 10px;
  border-top: 1px solid #2a373e;
}

.dialogue-bottom-input .dialogue-input-tools button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-color: #36444c !important;
  border-radius: 8px !important;
  background: #131b21 !important;
  color: #dce3e1 !important;
}

.dialogue-bottom-input .dialogue-agent-btn {
  border-color: rgba(79, 213, 189, .68) !important;
  background: #10221f !important;
  color: var(--accent) !important;
}

.dialogue-bottom-input .dialogue-send {
  right: 16px !important;
  bottom: 14px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  background: var(--accent) !important;
  color: #071713 !important;
}

@media (min-width: 900px) {
  .records-modal {
    grid-template-columns: minmax(0, 1fr);
  }

  .dialogue-bottom-input {
    left: 56px !important;
    right: 56px !important;
  }
}

@media (max-width: 680px) {
  .records-modal {
    height: calc(100vh - 76px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .records-filters {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 54px;
    padding: 0 4px;
    overflow: hidden;
  }

  .record-filter {
    min-height: 54px;
    padding: 0 4px;
    font-size: 12px;
  }

  .record-filter.is-active {
    box-shadow: inset 0 -3px 0 var(--accent);
  }

  .records-sub-filters {
    grid-column: 1;
    grid-row: 2;
  }

  .records-list,
  .records-list-modal {
    grid-column: 1;
    grid-row: 3;
  }

  .dialogue-record-main {
    padding: 16px 20px 170px;
  }

  .dialogue-record-top {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .dialogue-record-top h2 {
    justify-self: start;
    min-height: 32px;
    padding: 0 12px;
    font-size: 14px;
  }

  .dialogue-record-tools {
    justify-self: stretch;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }

  .dialogue-record-tools button {
    min-height: 30px;
    padding: 0 2px;
    font-size: 9px;
  }

  .dialogue-user-bubble,
  .dialogue-ai-result {
    margin-left: 14px;
    margin-right: 14px;
  }

  .dialogue-ai-result p {
    font-size: 13px;
    line-height: 1.62;
  }

  .dialogue-result-media {
    height: clamp(158px, 29vw, 184px);
  }

  .dialogue-bottom-input {
    left: 26px !important;
    right: 26px !important;
    bottom: 14px !important;
  }
}

@media (max-width: 520px) {
  .records-page-open .app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .records-modal {
    height: auto;
    min-height: calc(100vh - 74px);
  }

  .records-filters {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    overflow-x: auto;
  }

  .dialogue-record-main {
    padding: 14px 14px 174px;
  }

  .dialogue-user-bubble,
  .dialogue-ai-result {
    margin-left: 4px;
    margin-right: 4px;
  }

  .dialogue-bottom-input {
    left: 14px !important;
    right: 14px !important;
  }
}

/* Asset library end-of-file cascade lock. */
.asset-library-modal {
  background:
    radial-gradient(circle at 88% 5%, rgba(79, 213, 189, .10), transparent 26%),
    rgba(2, 7, 9, .84) !important;
}

.asset-library-panel {
  border-color: #33464d !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 213, 189, .09), transparent 28%),
    linear-gradient(145deg, #10191e 0%, #081014 68%, #071014 100%) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.asset-library-head {
  border-bottom-color: #29383f !important;
  background: rgba(13, 21, 26, .88) !important;
}

.asset-project-list {
  background:
    linear-gradient(180deg, rgba(79, 213, 189, .045), transparent 32%),
    #0a1216 !important;
}

.asset-gallery {
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 213, 189, .045), transparent 30%),
    #081014 !important;
}

.asset-project {
  border-color: #2f4047 !important;
  background: #111a20 !important;
  box-shadow: none !important;
}

.asset-project:hover {
  border-color: #41575f !important;
  background: #152127 !important;
  box-shadow: none !important;
}

.asset-project.is-active {
  border-color: rgba(79, 213, 189, .62) !important;
  background:
    linear-gradient(90deg, rgba(79, 213, 189, .15), rgba(79, 213, 189, .055)),
    #10201f !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .055) !important;
}

.asset-card {
  border-color: #2d3e45 !important;
  background: #10191f !important;
  box-shadow: none !important;
}

.asset-card:hover {
  border-color: rgba(79, 213, 189, .60) !important;
  background: #12201f !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25) !important;
}

@media (max-width: 760px) {
  .asset-library-panel {
    border-radius: 15px !important;
  }
}

/* Generation-category title sizing. */
.records-filters .record-filter {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

@media (max-width: 680px) {
  .records-filters .record-filter {
    font-size: 15px !important;
  }
}

/* Media editor final compact-viewport lock. */
.record-image-editor {
  background: rgba(1, 6, 8, .40) !important;
  backdrop-filter: blur(3px) saturate(.96) !important;
}

.record-image-marker-dot {
  appearance: none !important;
  inline-size: 32px !important;
  min-inline-size: 32px !important;
  max-inline-size: 32px !important;
  block-size: 32px !important;
  min-block-size: 32px !important;
  max-block-size: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 32px !important;
  box-sizing: border-box !important;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

/* Video records use the generated landscape video ratio. */
.records-list > .record-item[data-record-type="video"] .record-thumb-wrap {
  width: 176px !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

.records-list > .record-item[data-record-type="video"] .record-thumb {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
}

@media (max-width: 680px) {
  .records-list > .record-item[data-record-type="video"] .record-thumb-wrap {
    width: 126px !important;
  }
}

@media (max-width: 430px) {
  .records-list > .record-item[data-record-type="video"] .record-thumb-wrap {
    width: 96px !important;
  }
}

/* Final media-editor visual refinements. */
.record-image-editor {
  background: rgba(1, 6, 8, .28) !important;
  backdrop-filter: blur(2px) saturate(.98) !important;
}

.record-image-marker-dot {
  inline-size: 36px !important;
  min-inline-size: 36px !important;
  max-inline-size: 36px !important;
  block-size: 36px !important;
  min-block-size: 36px !important;
  max-block-size: 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  flex-basis: 36px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%);
}

.record-image-marker-box textarea {
  border-color: rgba(202, 211, 214, .14) !important;
  box-shadow: none !important;
}

.record-image-marker-box textarea:focus {
  border-color: rgba(218, 225, 227, .22) !important;
  box-shadow: none !important;
}

#recordImageEditor .record-image-marker-box textarea,
#recordMediaEditor[aria-label="图片修改"] .record-image-marker-box textarea {
  appearance: none !important;
  border-color: rgba(202, 211, 214, .10) !important;
  outline: none !important;
  box-shadow: none !important;
}

#recordImageEditor .record-image-marker-box textarea:focus,
#recordMediaEditor[aria-label="图片修改"] .record-image-marker-box textarea:focus {
  border-color: rgba(218, 225, 227, .16) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Shared image, video and beautify composer action placement. */
.record-image-editor-composer {
  position: relative;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.record-image-editor-composer textarea {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-height: 82px !important;
  padding: 11px 116px 42px 12px !important;
}

.record-image-editor-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: block !important;
}

.record-image-editor-actions .record-image-editor-regenerate {
  min-width: 88px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
}

@media (max-width: 680px) {
  .record-image-editor-composer textarea {
    min-height: 76px !important;
    padding: 9px 98px 38px 10px !important;
  }

  .record-image-editor-actions {
    right: 8px;
    bottom: 8px;
  }

  .record-image-editor-actions .record-image-editor-regenerate {
    min-width: 78px !important;
    min-height: 29px !important;
    padding: 0 10px !important;
  }
}

/* Asset-card media feedback stays neutral and restrained. */
.asset-card {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.asset-card .asset-thumb {
  border-color: rgba(196, 207, 210, .16) !important;
  transition: filter .18s ease, transform .18s ease, border-color .18s ease !important;
}

.asset-card:hover {
  transform: translateY(-1px) !important;
  border-color: #3a4a51 !important;
  background: #121b20 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18) !important;
}

.asset-card:hover .asset-thumb {
  border-color: rgba(207, 216, 219, .22) !important;
  filter: brightness(1.025) saturate(.96);
  transform: scale(1.002);
}

.asset-card:focus,
.asset-card:focus-visible {
  outline: 1px solid rgba(207, 216, 219, .20) !important;
  outline-offset: 1px !important;
}

/* Asset category add actions and generated-image workflow. */
.asset-category h3 {
  width: 100%;
}

.asset-category h3 .asset-category-title {
  order: 1;
  flex: 0 0 auto;
}

.asset-category h3::after {
  order: 2;
}

.asset-category-add {
  order: 3;
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #38484f !important;
  border-radius: 8px;
  background: #121c21 !important;
  color: #cbd5d3 !important;
  font-size: 11px;
  font-weight: 800;
}

.asset-category-add:hover {
  border-color: #4b5d64 !important;
  background: #172329 !important;
  color: #f0f4f3 !important;
}

.asset-category-add > span {
  margin-right: 4px;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}

.asset-generator-modal {
  position: fixed;
  inset: 0;
  z-index: 480;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(1, 6, 8, .42);
  backdrop-filter: blur(4px);
}

.asset-generator-panel {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #34454c;
  border-radius: 17px;
  background: #0e171c;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
}

.asset-generator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.asset-generator-head > div {
  display: grid;
  gap: 3px;
}

.asset-generator-head small {
  color: #82959a;
  font-size: 10px;
  letter-spacing: .08em;
}

.asset-generator-head strong {
  color: #eef3f2;
  font-size: 20px;
}

.asset-generator-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #384850 !important;
  border-radius: 10px;
  background: #152027 !important;
  color: #cfd9d7 !important;
  font-size: 22px;
}

.asset-generator-preview {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #33444b;
  border-radius: 13px;
  background: #091116;
  color: #74878d;
  font-size: 12px;
  font-weight: 800;
}

.asset-generator-preview.is-generating {
  background: linear-gradient(110deg, #0a1216 20%, #172127 46%, #0a1216 72%);
  background-size: 220% 100%;
  animation: assetGeneratorSweep 1.2s ease-in-out infinite;
}

.asset-generator-preview.is-ready[data-asset-kind="角色"] {
  background: radial-gradient(circle at 52% 28%, rgba(232, 218, 199, .72), transparent 10%), radial-gradient(ellipse at 52% 64%, rgba(39, 34, 31, .86), transparent 28%), linear-gradient(135deg, #394348, #11181c);
}

.asset-generator-preview.is-ready[data-asset-kind="场景"] {
  background: radial-gradient(circle at 78% 26%, rgba(166, 143, 176, .50), transparent 11%), linear-gradient(145deg, #26293a, #10141a 68%);
}

.asset-generator-preview.is-ready[data-asset-kind="道具"] {
  background: linear-gradient(150deg, #42494d, #171d21 64%, #0e1418);
}

.asset-generator-preview.is-ready span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(5, 10, 13, .58);
  color: #e1e8e6;
}

.asset-generator-field {
  display: grid;
  gap: 7px;
}

.asset-generator-field > span {
  color: #aebbb9;
  font-size: 11px;
  font-weight: 750;
}

.asset-generator-field textarea {
  min-height: 82px;
  resize: none;
  padding: 11px 12px;
  border: 1px solid rgba(205, 214, 217, .18);
  border-radius: 10px;
  outline: none;
  background: #0a1217;
  color: #edf2f1;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.asset-generator-field textarea:focus {
  border-color: rgba(211, 220, 222, .30);
  box-shadow: none;
}

.asset-generator-modal.needs-prompt .asset-generator-field textarea {
  border-color: rgba(201, 155, 128, .48);
}

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

.asset-generator-actions button {
  min-width: 82px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #3a4a51;
  border-radius: 9px;
  background: #162127;
  color: #d7dfdd;
  font-size: 11px;
  font-weight: 800;
}

.asset-generator-actions .asset-generator-submit {
  border-color: rgba(79, 213, 189, .46);
  background: rgba(79, 213, 189, .12);
  color: var(--accent);
}

.asset-thumb-generated-role {
  background: radial-gradient(circle at 52% 28%, rgba(232, 218, 199, .72), transparent 10%), radial-gradient(ellipse at 52% 64%, rgba(39, 34, 31, .86), transparent 28%), linear-gradient(135deg, #394348, #11181c) !important;
}

.asset-thumb-generated-scene {
  background: radial-gradient(circle at 78% 26%, rgba(166, 143, 176, .50), transparent 11%), linear-gradient(145deg, #26293a, #10141a 68%) !important;
}

.asset-thumb-generated-prop {
  background: linear-gradient(150deg, #42494d, #171d21 64%, #0e1418) !important;
}

@keyframes assetGeneratorSweep {
  0%, 100% { background-position: 120% 0; }
  50% { background-position: -80% 0; }
}

@media (max-width: 680px) {
  .asset-category-add {
    min-width: 62px;
    min-height: 27px;
    padding: 0 8px;
    font-size: 10px;
  }

  .asset-generator-panel {
    gap: 11px;
    padding: 14px;
  }

  .asset-generator-head strong {
    font-size: 17px;
  }
}

/* Selected asset editing with on-image annotations. */
.asset-card-edit {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  min-width: 52px;
  min-height: 27px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid rgba(213, 221, 223, .24);
  border-radius: 8px;
  background: rgba(10, 17, 21, .82);
  color: #e0e7e5;
  font-size: 10px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
}

.asset-card.is-selected {
  border-color: #52636a !important;
  background: #121b20 !important;
  box-shadow: inset 0 0 0 1px rgba(215, 223, 225, .055) !important;
}

.asset-card.is-selected .asset-card-edit {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.asset-card-edit:hover,
.asset-card-edit:focus-visible {
  border-color: rgba(226, 232, 234, .40);
  outline: none !important;
  background: rgba(20, 30, 35, .94);
}

.asset-card.is-regenerated .asset-thumb {
  filter: brightness(1.035) contrast(1.015);
}

.asset-card-image-editor .record-image-editor-panel {
  background: #0e181d;
}

.asset-card-editor-stage {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.asset-card-editor-stage > span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(4, 10, 13, .52);
  color: rgba(231, 237, 235, .72);
}

.asset-card-editor-stage.is-regenerating {
  filter: brightness(.82);
}

.asset-card-editor-stage.is-regenerated {
  filter: brightness(1.035) contrast(1.015);
}

#assetCardImageEditor .record-image-marker-box textarea,
#assetCardImageEditor .record-image-marker-box textarea:focus {
  border-color: rgba(218, 225, 227, .16) !important;
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  .asset-card-edit {
    top: 12px;
    right: 12px;
    min-width: 46px;
    min-height: 25px;
    padding: 0 7px;
    font-size: 9px;
  }
}

/* Shared neutral media-stage frame for every image/video editor. */
.record-image-editor .record-image-editor-stage {
  border-color: rgba(199, 209, 212, .16) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .012), 0 10px 26px rgba(0, 0, 0, .16) !important;
}

@media (max-width: 680px) {
  .record-image-editor .record-image-editor-stage {
    border-radius: 6px !important;
  }
}

/* Storyboard prompt editor: calmer hierarchy and a taller writing surface. */
.storyboard-inline-editor {
  top: 10vh !important;
  width: min(760px, calc(100vw - 48px)) !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  border-color: rgba(199, 209, 212, .18) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(16, 27, 32, .97), rgba(7, 14, 18, .98)) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .62),
    0 0 0 9999px rgba(0, 0, 0, .48) !important;
  backdrop-filter: blur(16px);
}

.storyboard-inline-editor .storyboard-prompt-row {
  display: grid !important;
  grid-template-columns: repeat(3, max-content) minmax(72px, 1fr) 36px !important;
  gap: 10px !important;
  align-items: center;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick {
  width: auto !important;
  min-width: 72px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-color: rgba(199, 209, 212, .14) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #cbd4d8 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick.is-active {
  border-color: rgba(80, 201, 181, .48) !important;
  background: rgba(80, 201, 181, .11) !important;
  color: #eafffb !important;
  box-shadow: inset 0 -2px 0 rgba(80, 201, 181, .88) !important;
}

.storyboard-inline-editor .storyboard-prompt-title {
  justify-self: end;
  margin-left: 0 !important;
  padding-right: 4px;
  color: #65dac9 !important;
  font-size: 20px !important;
  letter-spacing: .02em;
}

.storyboard-inline-editor .storyboard-editor-close {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-color: rgba(199, 209, 212, .16) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: none !important;
}

.storyboard-inline-editor .storyboard-edit-field {
  min-height: 190px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.storyboard-inline-editor .storyboard-edit-prompt,
.storyboard-inline-editor .storyboard-edit-prompt:focus {
  width: 100% !important;
  min-height: 190px !important;
  height: 190px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(199, 209, 212, .16) !important;
  border-radius: 6px !important;
  outline: none !important;
  background: rgba(11, 20, 25, .96) !important;
  color: #dbe3e6 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.75 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02) !important;
  resize: none !important;
}

.storyboard-inline-editor .storyboard-edit-prompt:focus {
  border-color: rgba(80, 201, 181, .34) !important;
}

.storyboard-inline-editor > .storyboard-editor-tools {
  display: grid !important;
  grid-template-columns: 44px minmax(112px, 1.25fr) 44px 1fr 1fr;
  gap: 8px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(199, 209, 212, .10);
}

.storyboard-inline-editor > .storyboard-editor-tools button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-color: rgba(199, 209, 212, .16) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #cdd6da !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.storyboard-inline-editor > .storyboard-editor-tools button[data-storyboard-action] {
  border-color: rgba(80, 201, 181, .34) !important;
  background: rgba(80, 201, 181, .10) !important;
  color: #7de1d2 !important;
  font-weight: 750 !important;
}

.storyboard-inline-editor > .storyboard-editor-tools button:hover {
  border-color: rgba(199, 209, 212, .28) !important;
  background: rgba(255, 255, 255, .065) !important;
}

.storyboard-inline-editor .storyboard-assets {
  border-color: rgba(199, 209, 212, .16) !important;
  border-radius: 8px !important;
}

@media (max-width: 680px) {
  .storyboard-inline-editor {
    top: 8vh !important;
    width: calc(100vw - 28px) !important;
    padding: 16px !important;
    border-radius: 8px !important;
  }

  .storyboard-inline-editor .storyboard-prompt-row {
    grid-template-columns: repeat(3, max-content) minmax(60px, 1fr) 34px !important;
    gap: 8px !important;
  }

  .storyboard-inline-editor .storyboard-prompt-row .storyboard-pick {
    min-width: 68px !important;
    padding-right: 11px !important;
    padding-left: 11px !important;
  }

  .storyboard-inline-editor .storyboard-edit-field,
  .storyboard-inline-editor .storyboard-edit-prompt,
  .storyboard-inline-editor .storyboard-edit-prompt:focus {
    min-height: 200px !important;
    height: 200px !important;
  }

  .storyboard-inline-editor > .storyboard-editor-tools {
    grid-template-columns: 42px minmax(104px, 1.2fr) 42px 1fr 1fr;
  }
}

/* Keep every generated-media editor aligned with the storyboard video editor. */
.record-image-editor {
  place-items: stretch center !important;
  padding: 14px clamp(16px, 3vw, 36px) 16px !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(79, 213, 189, .10), transparent 34%),
    rgba(1, 7, 10, .82) !important;
  backdrop-filter: blur(10px) !important;
}

.record-image-editor .record-image-editor-panel,
.record-image-editor.is-video .record-image-editor-panel,
.record-image-editor.is-beautify .record-image-editor-panel,
.asset-card-image-editor .record-image-editor-panel {
  width: min(914px, 100%) !important;
  height: 100% !important;
  max-height: none !important;
  grid-template-rows: 48px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.record-image-editor .record-image-editor-head {
  min-height: 48px !important;
  padding: 0 2px !important;
  border-bottom: 0 !important;
}

.record-image-editor .record-image-editor-head > div {
  gap: 14px !important;
}

.record-image-editor .record-image-editor-head strong {
  color: #ecf6f4 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
}

.record-image-editor .record-image-editor-head span {
  min-height: 20px !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 1px solid #2c3b42 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7d9299 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.record-image-editor .record-image-editor-close {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-color: #35434a !important;
  border-radius: 9px !important;
  background: #11191f !important;
  color: #cfd9dc !important;
  font-size: 24px !important;
  box-shadow: none !important;
}

.record-image-editor .record-image-editor-close:hover {
  border-color: rgba(79, 213, 189, .48) !important;
  background: #14231f !important;
  color: var(--accent) !important;
}

.record-image-editor .record-image-editor-stage-wrap {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center !important;
  gap: 0 !important;
}

.record-image-editor .record-image-editor-hint {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 4;
  transform: translateX(-50%);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(199, 209, 212, .14);
  border-radius: 999px;
  background: rgba(6, 18, 21, .76);
  color: #9cafb4 !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.record-image-editor .record-image-editor-stage {
  width: min(914px, 100%) !important;
  max-height: 100% !important;
  border-color: rgba(199, 209, 212, .16) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 -80px 140px rgba(0, 0, 0, .22),
    0 22px 66px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(255, 255, 255, .018) !important;
}

.record-image-editor .record-image-editor-composer {
  position: relative;
  box-sizing: border-box;
  width: min(914px, 100%) !important;
  min-height: 108px !important;
  display: block !important;
  padding: 11px !important;
  border: 1px solid #34464d !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 213, 189, .07), transparent 34%),
    #0d161b !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, .40),
    inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.record-image-editor .record-image-editor-composer textarea,
.record-image-editor .record-image-editor-composer textarea:focus {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-height: 84px !important;
  height: 84px !important;
  padding: 7px 116px 38px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #edf4f3 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

.record-image-editor .record-image-editor-actions {
  right: 11px !important;
  bottom: 11px !important;
}

.record-image-editor .record-image-editor-actions .record-image-editor-regenerate {
  min-width: 96px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-color: rgba(79, 213, 189, .46) !important;
  border-radius: 8px !important;
  background: rgba(79, 213, 189, .11) !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  box-shadow: none !important;
}

.record-image-editor .record-image-marker-box {
  border-color: rgba(199, 209, 212, .18) !important;
  border-radius: 10px !important;
  background: rgba(8, 18, 22, .96) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .50) !important;
  backdrop-filter: blur(14px);
}

@media (max-width: 680px) {
  .record-image-editor {
    padding: 10px 12px 12px !important;
  }

  .record-image-editor .record-image-editor-panel,
  .record-image-editor.is-video .record-image-editor-panel,
  .record-image-editor.is-beautify .record-image-editor-panel,
  .asset-card-image-editor .record-image-editor-panel {
    width: 100% !important;
    grid-template-rows: 44px minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .record-image-editor .record-image-editor-head {
    min-height: 44px !important;
  }

  .record-image-editor .record-image-editor-head strong {
    font-size: 18px !important;
  }

  .record-image-editor .record-image-editor-head span {
    padding-left: 10px !important;
    font-size: 10px !important;
  }

  .record-image-editor .record-image-editor-close {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
  }

  .record-image-editor .record-image-editor-hint {
    top: 8px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 9px !important;
  }

  .record-image-editor .record-image-editor-stage {
    border-radius: 6px !important;
  }

  .record-image-editor .record-image-editor-composer {
    min-height: 104px !important;
    padding: 9px !important;
    border-radius: 13px !important;
  }

  .record-image-editor .record-image-editor-composer textarea,
  .record-image-editor .record-image-editor-composer textarea:focus {
    min-height: 84px !important;
    height: 84px !important;
    padding: 6px 98px 36px 2px !important;
    font-size: 11px !important;
  }

  .record-image-editor .record-image-editor-actions {
    right: 9px !important;
    bottom: 9px !important;
  }

  .record-image-editor .record-image-editor-actions .record-image-editor-regenerate {
    min-width: 82px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }
}

/* Generated dialogue media: select once for insertion, double-click to edit. */
.dialogue-result-media {
  position: relative;
}

.dialogue-result-media[data-record-type],
.dialogue-image-option[data-record-type] {
  cursor: pointer;
}

.dialogue-result-insert-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.dialogue-result-insert-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(79, 213, 189, .38);
  border-radius: 5px;
  background: rgba(8, 22, 25, .88);
  color: #73ddce;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
}

.dialogue-result-insert-actions button:hover {
  border-color: rgba(79, 213, 189, .68);
  background: rgba(79, 213, 189, .13);
  color: #a4f2e6;
}

.dialogue-result-insert-actions button.is-confirmed {
  border-color: #4fd5bd;
  background: #4fd5bd;
  color: #071713;
}

.dialogue-result-media.is-media-selected > .dialogue-result-insert-actions,
.dialogue-image-option.is-media-selected > .dialogue-result-insert-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dialogue-result-media[data-record-type].is-media-selected {
  border-color: #52636b;
  background-color: #142028;
  box-shadow: inset 0 0 0 1px rgba(202, 218, 221, .05);
}

.dialogue-image-option.is-media-selected > .dialogue-image-preview {
  border-color: #52636b;
  box-shadow: inset 0 0 0 1px rgba(202, 218, 221, .06);
}

@media (max-width: 680px) {
  .dialogue-result-insert-actions {
    top: 8px;
    right: 8px;
    gap: 4px;
  }

  .dialogue-result-insert-actions button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 10px;
  }
}

/* Shared model picker inside every media-editor composer. */
.record-image-editor-model {
  position: absolute;
  left: 11px;
  bottom: 11px;
  z-index: 2;
  width: auto !important;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 5px 0 10px;
  border: 1px solid rgba(199, 209, 212, .16);
  border-radius: 8px;
  background: rgba(17, 27, 32, .88);
  color: #8fa1a6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.record-image-editor-model > span {
  flex: 0 0 auto;
  color: #82959b;
}

.record-image-editor-model select {
  width: auto !important;
  min-width: 142px;
  min-height: 26px;
  margin: 0;
  padding: 0 24px 0 8px;
  border: 0;
  border-left: 1px solid rgba(199, 209, 212, .12);
  border-radius: 0;
  outline: none;
  background-color: transparent;
  color: #d9e3e1;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  box-shadow: none;
  cursor: pointer;
}

.record-image-editor-model select:focus {
  border-left-color: rgba(79, 213, 189, .34);
  box-shadow: none;
}

.record-image-editor-model option {
  background: #111b20;
  color: #dce5e3;
}

.record-image-editor .record-image-editor-composer textarea,
.record-image-editor .record-image-editor-composer textarea:focus {
  padding-bottom: 48px !important;
}

@media (max-width: 680px) {
  .record-image-editor-model {
    left: 9px;
    bottom: 9px;
    min-height: 30px;
    gap: 6px;
    padding-left: 8px;
    border-radius: 7px;
    font-size: 10px;
  }

  .record-image-editor-model select {
    min-width: 124px;
    min-height: 24px;
    padding-left: 6px;
    font-size: 10px;
  }

  .record-image-editor .record-image-editor-composer textarea,
  .record-image-editor .record-image-editor-composer textarea:focus {
    padding-bottom: 44px !important;
  }
}

/* Right-click command for inserting a storyboard shot below the current one. */
.storyboard-context-menu {
  position: fixed;
  z-index: 520;
  min-width: 138px;
  padding: 6px;
  border: 1px solid rgba(199, 209, 212, .18);
  border-radius: 8px;
  background: rgba(13, 23, 28, .97);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .52);
  backdrop-filter: blur(14px);
}

.storyboard-context-menu button {
  position: relative;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e2ebe9;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}

.storyboard-context-menu button::before {
  content: "+";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(79, 213, 189, .42);
  border-radius: 5px;
  color: #69d9c9;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.storyboard-context-menu button:hover,
.storyboard-context-menu button:focus-visible {
  outline: none;
  background: rgba(79, 213, 189, .10);
  color: #f0fffc;
}

.storyboard-context-menu .storyboard-context-ai::before {
  content: "AI";
  width: 22px;
  border-color: rgba(79, 213, 189, .28);
  background: rgba(79, 213, 189, .08);
  color: #7ee4d4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
}

.storyboard-context-menu .storyboard-context-enrich {
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(181, 198, 201, .12);
  border-radius: 4px;
}

.storyboard-context-menu .storyboard-context-enrich::before {
  content: "AI+";
  font-size: 8px;
}

.storyboard-context-menu .storyboard-context-edit::before {
  content: "✎";
  border-color: rgba(104, 196, 181, .34);
  color: #72d8c8;
  font-size: 13px;
}

.storyboard-selection-ai {
  position: fixed;
  z-index: 560;
  display: grid;
  width: min(380px, calc(100vw - 16px));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(199, 209, 212, .18);
  border-radius: 7px;
  background: rgba(13, 23, 28, .98);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .48);
  backdrop-filter: blur(14px);
}

.storyboard-selection-ai-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.storyboard-selection-ai-input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(199, 209, 212, .24);
  border-radius: 4px;
  outline: none;
  background: rgba(17, 29, 35, .96);
  color: #edf5f3;
  font: inherit;
  font-size: 12px;
}

.storyboard-selection-ai-input::placeholder {
  color: #829397;
}

.storyboard-selection-ai-input:focus {
  border-color: rgba(199, 209, 212, .42);
  box-shadow: 0 0 0 2px rgba(199, 209, 212, .06);
}

.storyboard-selection-ai-input.is-invalid {
  border-color: rgba(235, 137, 137, .66);
}

.storyboard-selection-ai-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.storyboard-selection-ai button {
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #dce7e5;
  font-size: 12px;
  font-weight: 720;
  text-align: center;
  white-space: nowrap;
}

.storyboard-selection-ai .storyboard-selection-ai-generate {
  min-width: 64px;
  min-height: 36px;
  padding: 0 14px;
  background: #4fd5bd;
  color: #071615;
}

.storyboard-selection-ai .storyboard-selection-ai-generate:hover,
.storyboard-selection-ai .storyboard-selection-ai-generate:focus-visible {
  background: #67dfca;
  color: #071615;
}

.storyboard-selection-ai button:hover,
.storyboard-selection-ai button:focus-visible {
  outline: none;
  background: rgba(79, 213, 189, .10);
  color: #7ee4d4;
}

.storyboard-card.is-ai-updated {
  animation: storyboardAiUpdated .66s ease both;
}

@keyframes storyboardAiUpdated {
  0%, 100% { box-shadow: none; }
  38% { box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .52), 0 0 24px rgba(79, 213, 189, .10); }
}

.storyboard-card.is-new {
  animation: storyboardCardInserted .46s ease both;
}

@keyframes storyboardCardInserted {
  from {
    opacity: 0;
    transform: translateY(-8px);
    background-color: rgba(79, 213, 189, .10);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storyboard-card.is-new {
    animation: none;
  }
}

/* Project picker redesign: compact cover list with restrained selection states. */
.project-modal {
  place-items: center !important;
  padding: 18px !important;
  background: rgba(2, 7, 9, .42) !important;
  backdrop-filter: blur(4px) saturate(.94) !important;
}

.project-panel {
  width: min(600px, calc(100vw - 36px)) !important;
  max-height: calc(100dvh - 36px) !important;
  border: 1px solid rgba(199, 209, 212, .17) !important;
  border-radius: 10px !important;
  background: #0b1318 !important;
  box-shadow:
    0 26px 76px rgba(0, 0, 0, .58),
    inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.project-panel-head {
  min-height: 64px !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 9px !important;
  padding: 10px 12px 10px 18px !important;
  border-bottom: 1px solid rgba(199, 209, 212, .11) !important;
  background: #0e171c !important;
}

.project-panel-head h2 {
  gap: 11px !important;
  color: #edf4f3 !important;
  font-size: 20px !important;
  font-weight: 820 !important;
  letter-spacing: -.015em !important;
}

.project-folder-icon {
  width: 25px !important;
  height: 18px !important;
  border-color: #9aabb0 !important;
  border-radius: 4px !important;
  opacity: 1;
}

.project-folder-icon::before {
  width: 11px !important;
  height: 5px !important;
  top: -6px !important;
  border-color: #9aabb0 !important;
}

.project-add-head {
  justify-self: end !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border-color: rgba(79, 213, 189, .34) !important;
  border-radius: 7px !important;
  background: rgba(79, 213, 189, .09) !important;
  color: #7ee0d2 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.project-add-head:hover {
  border-color: rgba(79, 213, 189, .58) !important;
  background: rgba(79, 213, 189, .14) !important;
  color: #a7f2e7 !important;
}

.project-close {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-color: rgba(199, 209, 212, .16) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #cbd5d7 !important;
  font-size: 22px !important;
}

.project-list {
  max-height: calc(100dvh - 118px) !important;
  gap: 8px !important;
  padding: 12px !important;
  background: #091015 !important;
}

.project-item {
  position: relative;
  min-height: 78px !important;
  grid-template-columns: 96px minmax(0, 1fr) 34px !important;
  gap: 13px !important;
  padding: 9px 10px !important;
  overflow: hidden;
  border: 1px solid rgba(199, 209, 212, .12) !important;
  border-radius: 8px !important;
  background: #0f181e !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background-color .16s ease !important;
}

.project-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: transparent;
}

.project-item:hover {
  transform: none !important;
  border-color: rgba(199, 209, 212, .22) !important;
  background: #111c22 !important;
}

.project-item.is-active {
  border-color: rgba(79, 213, 189, .34) !important;
  background: #0f1d20 !important;
  box-shadow: none !important;
}

.project-item.is-active::before {
  background: #4fd5bd;
}

.project-radio {
  display: none !important;
}

.project-thumb {
  position: relative;
  width: 96px !important;
  height: 58px !important;
  border-color: rgba(199, 209, 212, .15) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .20) !important;
}

.project-item.is-active .project-thumb::after {
  content: "✓";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 255, 249, .68);
  border-radius: 50%;
  background: #4fd5bd;
  color: #061715;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .32);
}

.project-item input {
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #e5eceb !important;
  font-size: 16px !important;
  font-weight: 760 !important;
  letter-spacing: -.01em;
}

.project-item input:focus-visible {
  outline: 1px solid rgba(79, 213, 189, .42) !important;
  outline-offset: 5px !important;
  border-radius: 3px;
}

.project-delete {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  align-self: center;
  padding: 0 !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #73868c !important;
  font-size: 0 !important;
}

.project-delete svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-delete:hover {
  border-color: rgba(255, 143, 148, .18) !important;
  background: rgba(255, 143, 148, .07) !important;
  color: #e89498 !important;
}

@media (max-width: 560px) {
  .project-modal {
    padding: 10px !important;
  }

  .project-panel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  .project-panel-head {
    min-height: 58px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 7px !important;
    padding: 9px 9px 9px 13px !important;
  }

  .project-panel-head h2 {
    font-size: 18px !important;
  }

  .project-add-head {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .project-close {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .project-list {
    max-height: calc(100dvh - 98px) !important;
    padding: 9px !important;
  }

  .project-item {
    min-height: 70px !important;
    grid-template-columns: 78px minmax(0, 1fr) 32px !important;
    gap: 10px !important;
    padding: 8px !important;
  }

  .project-thumb {
    width: 78px !important;
    height: 50px !important;
  }

  .project-item input {
    font-size: 14px !important;
  }

  .project-delete {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Final project picker polish. */
.project-modal {
  padding: 20px !important;
  background: rgba(1, 7, 9, .38) !important;
  backdrop-filter: blur(7px) saturate(.92) !important;
}

.project-panel {
  width: min(568px, calc(100vw - 40px)) !important;
  border-color: rgba(181, 198, 201, .19) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #0d171c 0%, #091116 100%) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62), 0 1px 0 rgba(255, 255, 255, .035) inset !important;
}

.project-panel-head {
  min-height: 68px !important;
  gap: 10px !important;
  padding: 12px 13px 12px 20px !important;
  border-bottom-color: rgba(181, 198, 201, .12) !important;
  background: rgba(14, 24, 29, .92) !important;
}

.project-panel-head h2 {
  gap: 12px !important;
  font-size: 20px !important;
  font-weight: 780 !important;
}

.project-add-head {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-color: rgba(79, 213, 189, .30) !important;
  border-radius: 6px !important;
  background: rgba(79, 213, 189, .075) !important;
  color: #8addd0 !important;
}

.project-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 14px 16px 16px !important;
  background: transparent !important;
}

.project-item {
  min-width: 0 !important;
  min-height: 136px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 88px auto !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 8px !important;
  border-color: rgba(181, 198, 201, .13) !important;
  border-radius: 8px !important;
  background: rgba(16, 27, 33, .82) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .018) inset !important;
  cursor: pointer;
}

.project-item:hover {
  transform: translateX(2px) !important;
  border-color: rgba(181, 198, 201, .24) !important;
  background: rgba(19, 32, 39, .94) !important;
}

.project-item.is-active {
  border-color: rgba(79, 213, 189, .38) !important;
  background: rgba(15, 31, 33, .88) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12) !important;
}

.project-item::before {
  display: none !important;
}

.project-thumb {
  width: 100% !important;
  height: 88px !important;
  border-color: rgba(181, 198, 201, .16) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}

.project-item.is-active .project-thumb::after {
  content: none !important;
  display: none !important;
}

.project-item input {
  width: 100% !important;
  min-height: 26px !important;
  padding: 0 3px !important;
  color: #eaf1f0 !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  text-align: left !important;
}

.project-radio,
.project-choose {
  display: none !important;
}

@media (max-width: 560px) {
  .project-panel {
    width: calc(100vw - 20px) !important;
  }

  .project-panel-head {
    min-height: 60px !important;
    padding: 10px 10px 10px 15px !important;
  }

  .project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .project-item {
    min-height: 126px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 82px auto !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  .project-thumb {
    width: 100% !important;
    height: 82px !important;
  }
}

/* Dialogue history: keep frames neutral and reserve green for icons/status. */
.dialogue-history-new {
  border-color: rgba(132, 155, 161, .20) !important;
  background: #131e23 !important;
  color: #dce5e4 !important;
  box-shadow: none !important;
}

.dialogue-history-new > span {
  border: 1px solid rgba(79, 213, 189, .24) !important;
  background: rgba(79, 213, 189, .10) !important;
  color: #72d5c5 !important;
}

.dialogue-history-new:hover {
  border-color: rgba(145, 167, 172, .30) !important;
  background: #17242a !important;
}

.dialogue-history-entry:hover,
.dialogue-history-entry.is-active {
  border-color: rgba(132, 155, 161, .18) !important;
  background: #151f24 !important;
}

.dialogue-history-entry.is-active {
  box-shadow: none !important;
}

.dialogue-history-entry.is-active .dialogue-history-entry-icon {
  border-color: rgba(164, 181, 185, .25) !important;
  background: #151f24 !important;
  color: #a3b1b4 !important;
}

.dialogue-history-empty {
  padding: 18px 10px;
  border: 1px dashed rgba(132, 155, 161, .16);
  border-radius: 8px;
  color: #71858a;
  font-size: 11px;
  text-align: center;
}

.project-dialogue-empty {
  min-height: 300px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 30px;
  color: #778a8f;
  text-align: center;
}

.project-dialogue-empty strong {
  color: #dce5e4;
  font-size: 17px;
}

.project-dialogue-empty span {
  font-size: 12px;
}

.project-records-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  gap: 8px;
  color: #73878c;
  text-align: center;
}

.project-records-empty strong {
  color: #d9e3e1;
  font-size: 17px;
}

.project-records-empty span {
  font-size: 12px;
}

/* Dialogue history: soften the panel gradient without changing its hierarchy. */
.dialogue-history-panel {
  z-index: 240 !important;
  height: calc(100% - 94px) !important;
  max-height: calc(100% - 94px) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(79, 213, 189, .025), transparent 34%),
    linear-gradient(180deg, #10191e 0%, #0e171b 100%) !important;
}

/* Dialogue composer: use an explicit generation action instead of an arrow glyph. */
.dialogue-bottom-input {
  padding-right: 92px !important;
}

.dialogue-bottom-input .dialogue-send {
  right: 16px !important;
  bottom: 17px !important;
  width: 68px !important;
  min-width: 68px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(79, 213, 189, .46) !important;
  border-radius: 8px !important;
  background: rgba(79, 213, 189, .14) !important;
  color: #7ee0d2 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: .02em;
}

.dialogue-bottom-input .dialogue-input-tools .dialogue-send:hover {
  border-color: rgba(79, 213, 189, .70) !important;
  background: rgba(79, 213, 189, .20) !important;
  color: #b2f4e9 !important;
}

@media (max-width: 520px) {
  .dialogue-bottom-input {
    padding-right: 84px !important;
  }

  .dialogue-bottom-input .dialogue-send {
    right: 12px !important;
    width: 62px !important;
    min-width: 62px !important;
    padding: 0 13px !important;
  }
}

/* Dialogue mode menu: escape the responsive toolbar clipping and stay on top. */
.dialogue-bottom-input {
  z-index: 220 !important;
  overflow: visible !important;
}

.dialogue-bottom-input .dialogue-input-tools {
  overflow: visible !important;
}

.dialogue-agent-wrap {
  position: relative !important;
  z-index: 230 !important;
}

.dialogue-agent-menu {
  width: 148px !important;
  bottom: calc(100% + 10px) !important;
  z-index: 240 !important;
}

/* Dialogue composer: remove the divider beneath the text field. */
.dialogue-bottom-input .dialogue-input-tools {
  border-top: 0 !important;
}

/* Dialogue record toolbar controls. */
.dialogue-record-top {
  position: relative;
  z-index: 130;
}

.dialogue-record-tools {
  position: relative;
  overflow: visible !important;
}

.dialogue-record-tools > button.is-open,
.dialogue-record-tools > button.is-filtered {
  background: #172229 !important;
  color: #8ed9cf !important;
}

.dialogue-toolbar-popover {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 180;
  width: 218px;
  box-sizing: border-box;
  padding: 8px;
  overflow: visible;
  border: 1px solid #384950;
  border-radius: 9px;
  background: #10191e;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .52);
}

.dialogue-toolbar-popover.hidden {
  display: none !important;
}

.dialogue-toolbar-popover.is-search {
  width: 276px;
  padding: 10px;
}

.dialogue-toolbar-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
}

.dialogue-toolbar-search input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #3b4b52;
  border-radius: 6px;
  outline: 0;
  background: #0b1216;
  color: #edf3f2;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.dialogue-toolbar-search input:focus {
  border-color: rgba(79, 213, 189, .52);
  box-shadow: 0 0 0 2px rgba(79, 213, 189, .08);
}

.dialogue-record-tools .dialogue-toolbar-search button {
  width: 32px !important;
  min-width: 32px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid #3b4b52 !important;
  border-radius: 6px !important;
  background: #141e24 !important;
  color: #aebdc0 !important;
  font-size: 17px !important;
}

.dialogue-toolbar-count {
  display: block;
  min-height: 16px;
  padding: 7px 2px 0;
  color: #82969b;
  font-size: 10px;
  line-height: 1.4;
}

.dialogue-toolbar-options {
  display: grid;
  gap: 3px;
}

.dialogue-record-tools .dialogue-toolbar-option {
  width: 100% !important;
  min-height: 36px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #c9d3d4 !important;
  text-align: left;
}

.dialogue-record-tools .dialogue-toolbar-option:hover,
.dialogue-record-tools .dialogue-toolbar-option.is-active {
  background: rgba(255, 255, 255, .055) !important;
  color: #f0f5f4 !important;
}

.dialogue-toolbar-option b {
  visibility: hidden;
  color: #63d7c4;
  font-size: 12px;
  text-align: center;
}

.dialogue-toolbar-option.is-active b {
  visibility: visible;
}

.dialogue-toolbar-filtered-out {
  display: none !important;
}

.dialogue-toolbar-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #819298;
  font-size: 13px;
}

.dialogue-toolbar-empty.hidden {
  display: none !important;
}

@media (max-width: 680px) {
  .dialogue-toolbar-popover {
    top: calc(100% + 7px);
  }
}

/* Storyboard cards: keep field labels quieter than the primary column titles. */
.storyboard-card .storyboard-shot-head > span,
.storyboard-card .storyboard-meta-line > span,
.storyboard-card .storyboard-block h4,
.storyboard-card .storyboard-shot-label > span {
  margin-top: 0;
  margin-bottom: 0;
  color: #3b5551 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.storyboard-card .storyboard-shot-trigger > strong {
  color: #f4f7f6 !important;
}

.storyboard-card .storyboard-meta-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.storyboard-card .storyboard-meta-line > strong,
.storyboard-card .storyboard-meta-line > .storyboard-motion-picker {
  flex: 1 1 auto;
  min-width: 0;
}

/* New storyboard shots start as an empty, structured form. */
.storyboard-card-empty {
  position: relative;
  z-index: 2;
  overflow: visible !important;
  cursor: default;
}

.storyboard-card-empty:has(.storyboard-motion-popover:not([hidden])) {
  z-index: 180;
}

.storyboard-card-empty .storyboard-shot-thumb.is-empty {
  border-color: #314149 !important;
  background: #10191e !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018) !important;
}

.storyboard-card-empty .storyboard-shot-head em {
  width: auto !important;
  min-width: 62px !important;
  height: 28px !important;
  border-radius: 5px !important;
  overflow: hidden;
}

.storyboard-card-empty select,
.storyboard-card-empty input,
.storyboard-card-empty textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #36454d;
  border-radius: 5px;
  outline: 0;
  background: #0d161b;
  color: #d9e2e1;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: none;
}

.storyboard-card-empty select {
  min-height: 30px;
  padding: 0 26px 0 9px;
  cursor: pointer;
}

.storyboard-card-empty .storyboard-shot-head select {
  min-height: 26px;
  padding-left: 8px;
  border: 0;
  background-color: transparent;
  color: #d8e4e2;
  font-size: 11px;
}

.storyboard-card-empty input,
.storyboard-card-empty textarea {
  min-height: 32px;
  padding: 7px 9px;
}

.storyboard-card-empty textarea.storyboard-empty-input.is-multiline {
  min-height: 72px;
  resize: vertical;
}

.storyboard-card-empty select:focus,
.storyboard-card-empty input:focus,
.storyboard-card-empty textarea:focus {
  border-color: #63727a;
  background: #101b21;
}

.storyboard-card-empty input::placeholder,
.storyboard-card-empty textarea::placeholder {
  color: #687a80;
}

.storyboard-card-empty .storyboard-field-combo {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.storyboard-motion-picker {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.storyboard-motion-trigger {
  min-height: 32px;
  width: 100%;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #34464e;
  border-radius: 5px;
  background: #101a20;
  color: #dbe5e3;
  font: inherit;
  cursor: pointer;
}

.storyboard-motion-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-motion-trigger i {
  color: #9eafb2;
  font-style: normal;
}

.storyboard-motion-trigger[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.storyboard-motion-popover {
  position: absolute;
  z-index: 190;
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  width: 272px;
  max-width: calc(100vw - 48px);
  max-height: min(320px, calc(100vh - 110px));
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #34464e;
  border-radius: 6px;
  background: #0d171c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

.storyboard-motion-popover[hidden] {
  display: none;
}

.storyboard-motion-types {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.storyboard-motion-type,
.storyboard-motion-speed {
  min-height: 30px;
  padding: 0;
  border: 1px solid #34464e;
  border-radius: 4px;
  background: #121e24;
  color: #d7e1df;
  font: inherit;
  cursor: pointer;
}

.storyboard-motion-type.is-active,
.storyboard-motion-speed.is-active {
  border-color: #4dd5c2;
  background: rgba(77, 213, 194, .14);
  color: #5ee1cf;
}

.storyboard-motion-speed-list {
  margin-top: 9px;
  display: grid;
  gap: 7px;
}

.storyboard-motion-speed-list > p {
  margin: 2px 0;
  color: #74868b;
  font-size: 10px;
  text-align: center;
}

.storyboard-motion-speed-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
}

.storyboard-motion-speed-row > strong {
  color: #d9e4e2;
  font-size: 12px;
  text-align: center;
}

.storyboard-motion-speed-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.storyboard-motion-speed {
  min-height: 28px;
}

.storyboard-card-empty .storyboard-meta-line.storyboard-empty-field {
  align-items: start;
}

.storyboard-card-empty .storyboard-meta-line.storyboard-empty-field > span {
  padding-top: 7px;
}

.storyboard-card-empty .storyboard-shot-label {
  min-width: 0;
}

.storyboard-card-empty .storyboard-shot-label select {
  width: 88px;
  min-height: 28px;
}

.storyboard-card-empty .storyboard-shot-label .storyboard-field-combo {
  width: 108px;
}

.storyboard-card-empty .storyboard-shot-label .storyboard-field-combo select,
.storyboard-card-empty .storyboard-shot-label .storyboard-field-combo input {
  width: 100%;
}

.storyboard-card-empty .storyboard-block {
  align-items: start;
}

@media (max-width: 680px) {
  .storyboard-card-empty select,
  .storyboard-card-empty input,
  .storyboard-card-empty textarea {
    font-size: 10px;
  }

  .storyboard-card-empty .storyboard-shot-label {
    gap: 5px;
  }

  .storyboard-card-empty .storyboard-shot-label select {
    width: 76px;
  }

  .storyboard-shot-popover {
    width: 166px;
  }
}

/* Storyboard prompt: show the full current copy before introducing scrolling. */
.storyboard-inline-editor {
  max-height: calc(100dvh - 32px) !important;
  overflow: visible !important;
}

.storyboard-inline-editor .storyboard-edit-field {
  min-height: 260px !important;
  height: auto !important;
}

.storyboard-inline-editor .storyboard-edit-prompt,
.storyboard-inline-editor .storyboard-edit-prompt:focus {
  min-height: 260px !important;
  height: auto !important;
  max-height: 380px !important;
  overflow-y: hidden;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Storyboard asset selectors: click-to-open menus for role, scene and prop. */
.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick::after {
  content: "⌄";
  color: #84969b;
  font-size: 11px;
  line-height: 1;
  transition: transform .16s ease;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick.is-open::after {
  transform: rotate(180deg);
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets {
  left: var(--storyboard-assets-left, 0) !important;
  top: calc(100% + 8px) !important;
  z-index: 260 !important;
  width: 268px !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px !important;
  padding: 8px !important;
  border-color: rgba(181, 198, 201, .20) !important;
  border-radius: 8px !important;
  background: #091216 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .56) !important;
  max-height: min(650px, calc(100dvh - 168px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets:not(.is-open) {
  display: none !important;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets.is-open {
  display: grid !important;
}

.storyboard-inline-editor .storyboard-assets .storyboard-asset {
  min-height: 148px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 112px minmax(28px, auto) !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(181, 198, 201, .12) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .025) !important;
  font-size: 13px !important;
}

.storyboard-inline-editor .storyboard-assets .storyboard-asset:hover {
  border-color: rgba(79, 213, 189, .68) !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .16) !important;
}

.storyboard-inline-editor .storyboard-assets-empty {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: #718481;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.storyboard-inline-editor .storyboard-assets .storyboard-asset.is-active {
  border-color: rgba(79, 213, 189, .82) !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .26) !important;
}

.storyboard-inline-editor .storyboard-asset-thumb {
  width: 100% !important;
  height: 112px !important;
  border: 1px solid rgba(181, 198, 201, .14);
  border-radius: 4px 4px 2px 2px;
  background:
    radial-gradient(circle at 70% 32%, rgba(245, 226, 212, .42), transparent 17%),
    radial-gradient(ellipse at 66% 72%, rgba(28, 37, 34, .90), transparent 30%),
    linear-gradient(135deg, #273c37, #10181a);
}

.storyboard-inline-editor .storyboard-asset:nth-child(2) .storyboard-asset-thumb {
  background:
    radial-gradient(circle at 66% 34%, rgba(154, 188, 212, .44), transparent 18%),
    linear-gradient(140deg, #263944, #111820 72%);
}

.storyboard-inline-editor .storyboard-asset:nth-child(3) .storyboard-asset-thumb {
  background:
    linear-gradient(120deg, rgba(120, 152, 173, .58) 28%, transparent 29% 47%, rgba(219, 224, 216, .72) 48%),
    #26323a;
}

.storyboard-inline-editor .storyboard-asset:nth-child(4) .storyboard-asset-thumb {
  background:
    radial-gradient(circle at 72% 30%, rgba(183, 112, 174, .48), transparent 17%),
    linear-gradient(145deg, #292b3b, #11161c 70%);
}

.storyboard-inline-editor .storyboard-asset-name {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 8px 5px 2px;
  display: flex;
  align-items: center;
  color: #e4ebea;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

@media (max-width: 520px) {
  .storyboard-inline-editor .storyboard-prompt-row .storyboard-assets {
    width: min(268px, calc(100vw - 56px)) !important;
  }
}

/* Storyboard generation: one mode selector followed by one clear action. */
.storyboard-inline-editor > .storyboard-editor-tools {
  grid-template-columns: 44px 148px 148px 44px minmax(104px, 1fr) !important;
  overflow: visible !important;
}

.storyboard-model-wrap {
  width: 148px;
  min-width: 0;
  height: 42px;
}

.storyboard-model-select {
  width: 100%;
  height: 42px;
  padding: 0 32px 0 12px;
  border: 1px solid rgba(199, 209, 212, .16);
  border-radius: 6px;
  outline: none;
  background: rgba(255, 255, 255, .035);
  color: #cdd6da;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.storyboard-model-select:hover,
.storyboard-model-select:focus {
  border-color: rgba(199, 209, 212, .28);
  background: rgba(255, 255, 255, .065);
}

.storyboard-model-select option {
  background: #151d21;
  color: #d7dfe0;
}

.storyboard-generation-wrap {
  position: relative;
  width: 148px;
  min-width: 0;
}

.storyboard-generation-wrap > .storyboard-generation-mode,
.storyboard-generation-menu > button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(199, 209, 212, .16);
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
  color: #cdd6da;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.storyboard-generation-wrap > .storyboard-generation-mode:hover,
.storyboard-generation-wrap > .storyboard-generation-mode[aria-expanded="true"] {
  border-color: rgba(199, 209, 212, .28);
  background: rgba(255, 255, 255, .065);
}

.storyboard-generation-mode b {
  color: #829399;
  font-size: 11px;
  font-weight: 700;
  transition: transform .16s ease;
}

.storyboard-generation-mode[aria-expanded="true"] b {
  transform: rotate(180deg);
}

.storyboard-generation-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 320;
  width: 100%;
  min-width: 140px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(181, 198, 201, .20);
  border-radius: 8px;
  background: #0d171c;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .48);
}

.storyboard-generation-menu.hidden {
  display: none !important;
}

.storyboard-generation-menu > button {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  color: #c9d3d4;
  text-align: left;
}

.storyboard-generation-menu > button:hover,
.storyboard-generation-menu > button.is-active {
  border-color: transparent;
  background: rgba(255, 255, 255, .06);
  color: #f1f5f4;
}

.storyboard-generation-menu > button b {
  visibility: hidden;
  color: #62d7c4;
  font-size: 12px;
}

.storyboard-generation-menu > button.is-active b {
  visibility: visible;
}

.storyboard-inline-editor > .storyboard-editor-tools .storyboard-generate-btn {
  justify-self: end;
  width: auto !important;
  min-width: 72px !important;
  padding-inline: 18px !important;
  border-color: rgba(80, 201, 181, .34) !important;
  background: rgba(80, 201, 181, .10) !important;
  color: #7de1d2 !important;
  font-weight: 750 !important;
}

.storyboard-inline-editor > .storyboard-editor-tools .storyboard-generate-btn:hover {
  border-color: rgba(80, 201, 181, .50) !important;
  background: rgba(80, 201, 181, .16) !important;
}

@media (max-width: 680px) {
  .storyboard-inline-editor > .storyboard-editor-tools {
    grid-template-columns: 42px 140px 140px 42px minmax(92px, 1fr) !important;
  }

  .storyboard-model-wrap {
    width: 140px;
  }

  .storyboard-generation-wrap {
    width: 140px;
  }
}

/* Storyboard skills: the @ control opens a compact upward selection menu. */
.storyboard-skill-wrap {
  position: relative;
  min-width: 0;
}

.storyboard-skill-wrap > .storyboard-skill-trigger {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(199, 209, 212, .16) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #cdd6da !important;
  font-size: 17px !important;
  font-weight: 750 !important;
}

.storyboard-skill-wrap > .storyboard-skill-trigger:hover,
.storyboard-skill-wrap > .storyboard-skill-trigger[aria-expanded="true"] {
  border-color: rgba(199, 209, 212, .30) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: #eff5f4 !important;
}

.storyboard-skill-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 330;
  width: 270px;
  max-height: min(360px, calc(100dvh - 180px));
  display: grid;
  gap: 3px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(181, 198, 201, .20);
  border-radius: 8px;
  background: #0d171c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52);
}

.storyboard-skill-menu.hidden {
  display: none !important;
}

.storyboard-skill-menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 9px;
  border-bottom: 1px solid rgba(199, 209, 212, .10);
}

.storyboard-skill-menu-head strong {
  color: #eef4f3;
  font-size: 13px;
  font-weight: 750;
}

.storyboard-skill-menu-head span {
  color: #789095;
  font-size: 10px;
  white-space: nowrap;
}

.storyboard-skill-menu > button {
  width: 100% !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #cbd5d7 !important;
  text-align: left;
}

.storyboard-skill-menu > button:hover,
.storyboard-skill-menu > button.is-active {
  background: rgba(255, 255, 255, .06) !important;
  color: #f1f5f4 !important;
}

.storyboard-skill-menu > button > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.storyboard-skill-menu > button > span > b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(199, 209, 212, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: #80cfc3;
  font-size: 12px;
  font-style: normal;
}

.storyboard-skill-menu em {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: inherit;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.storyboard-skill-menu em small {
  overflow: hidden;
  color: #7f9196;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-skill-menu > button > i {
  visibility: hidden;
  color: #63d7c4;
  font-size: 12px;
  font-style: normal;
}

.storyboard-skill-menu > button.is-active > i {
  visibility: visible;
}

@media (max-width: 520px) {
  .storyboard-skill-menu {
    width: min(260px, calc(100vw - 54px));
  }
}

/* Storyboard references: hover previews supported formats; clicking + opens the native picker. */
.storyboard-upload-wrap {
  position: relative;
  min-width: 0;
}

.storyboard-upload-wrap > .storyboard-upload-trigger {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(199, 209, 212, .16) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #cdd6da !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

.storyboard-upload-wrap > .storyboard-upload-trigger:hover,
.storyboard-upload-wrap > .storyboard-upload-trigger[aria-expanded="true"] {
  border-color: rgba(199, 209, 212, .30) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: #f1f5f4 !important;
}

.storyboard-upload-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 340;
  width: 250px;
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(181, 198, 201, .20);
  border-radius: 8px;
  background: #0d171c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52);
}

.storyboard-upload-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 10px;
}

.storyboard-upload-menu.hidden {
  display: none !important;
}

.storyboard-upload-menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 9px;
  border-bottom: 1px solid rgba(199, 209, 212, .10);
}

.storyboard-upload-menu-head strong {
  color: #eef4f3;
  font-size: 13px;
  font-weight: 750;
}

.storyboard-upload-menu-head span {
  color: #789095;
  font-size: 10px;
}

.storyboard-upload-info-row {
  width: 100% !important;
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #cbd5d7 !important;
  text-align: left;
}

.storyboard-upload-info-row > b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(199, 209, 212, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: #80cfc3;
  font-size: 12px;
}

.storyboard-upload-info-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}

.storyboard-upload-info-row small {
  overflow: hidden;
  color: #7f9196;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 7px;
  padding: 2px 0 10px;
}

.storyboard-attachment-list.hidden {
  display: none !important;
}

.storyboard-attachment {
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 1px solid rgba(190, 205, 208, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
}

.storyboard-attachment-preview {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(190, 205, 208, .12);
  border-radius: 6px;
  background: #101b20;
  color: #80cfc3;
  font-size: 12px;
  font-weight: 800;
}

.storyboard-attachment-preview img,
.storyboard-attachment-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storyboard-attachment-preview i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f1f5f4;
  font-size: 11px;
  font-style: normal;
  text-shadow: 0 1px 5px #000;
}

.storyboard-attachment-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.storyboard-attachment-copy strong,
.storyboard-attachment-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-attachment-copy strong {
  color: #dce4e5;
  font-size: 12px;
  font-weight: 650;
}

.storyboard-attachment-copy small {
  color: #7f9297;
  font-size: 10px;
}

.storyboard-attachment .storyboard-attachment-remove {
  width: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #819398 !important;
  font-size: 16px !important;
}

.storyboard-attachment .storyboard-attachment-remove:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #e5ebea !important;
}

@media (max-width: 520px) {
  .storyboard-upload-menu {
    width: min(250px, calc(100vw - 54px));
  }

  .storyboard-attachment-list {
    grid-template-columns: 1fr;
  }
}

/* Header project selector: keep the project name as a lightweight text control. */
#projectSelectorBtn.project-selector-btn {
  min-width: 150px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(181, 198, 201, .20) !important;
  border-radius: 8px !important;
  background: #121920 !important;
  color: #edf3f2 !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

#projectSelectorBtn.project-selector-btn:hover,
#projectSelectorBtn.project-selector-btn.is-active {
  border-color: rgba(181, 198, 201, .34) !important;
  background: #151f25 !important;
}

#projectSelectorBtn .project-selector-icon {
  width: 22px;
  height: 22px;
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  color: #69cdbc;
}

#projectSelectorBtn .project-selector-icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 680px) {
  #projectSelectorBtn.project-selector-btn {
    min-width: 138px !important;
    min-height: 38px !important;
    gap: 8px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  #projectSelectorBtn .project-selector-icon,
  #projectSelectorBtn .project-selector-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Asset generator footer: model and output size stay on the left. */
.asset-generator-actions {
  align-items: center;
  justify-content: space-between !important;
  gap: 12px !important;
}

.asset-generator-config,
.asset-generator-action-buttons {
  display: flex;
  align-items: center;
  gap: 7px;
}

.asset-generator-config label {
  position: relative;
  display: block;
}

.asset-generator-config label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.asset-generator-config label::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 10px;
  color: #7f9297;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-52%);
}

.asset-generator-config select {
  min-width: 96px;
  min-height: 34px;
  appearance: none;
  padding: 0 28px 0 11px;
  border: 1px solid #3a4a51;
  border-radius: 8px;
  outline: none;
  background: #111b21;
  color: #cfd9d7;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.asset-generator-config .asset-generator-size {
  min-width: 76px;
}

.asset-generator-config select:hover,
.asset-generator-config select:focus {
  border-color: rgba(181, 198, 201, .34);
  background: #152127;
}

.asset-generator-config select:focus-visible {
  outline: 2px solid rgba(79, 213, 189, .28);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .asset-generator-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
  }

  .asset-generator-config,
  .asset-generator-action-buttons {
    width: 100%;
  }

  .asset-generator-config label,
  .asset-generator-config select,
  .asset-generator-action-buttons button {
    flex: 1;
    width: 100%;
  }
}

/* Brand account popover: login, account switching and persistent generation defaults. */
.brand-account-wrap {
  position: relative;
  flex: 0 0 auto;
}

.brand-account-wrap .brand-title {
  padding: 4px 6px 4px 2px;
  border-radius: 9px;
  cursor: pointer;
  outline: none;
  transition: background .16s ease;
}

.brand-account-wrap .brand-title:hover,
.brand-account-wrap .brand-title:focus-visible,
.brand-account-wrap.is-open .brand-title {
  background: rgba(255, 255, 255, .035);
}

.brand-account-popover {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 520;
  width: 320px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(181, 198, 201, .20);
  border-radius: 10px;
  background: #10171a;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .58);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.brand-account-wrap:hover .brand-account-popover,
.brand-account-wrap:focus-within .brand-account-popover,
.brand-account-wrap.is-open .brand-account-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.brand-account-wrap.has-login-modal .brand-account-popover {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.brand-login-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 11, .72);
  -webkit-backdrop-filter: blur(11px) saturate(.9);
  backdrop-filter: blur(11px) saturate(.9);
}

.brand-login-modal.hidden {
  display: none;
}

.brand-login-dialog {
  width: min(390px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid rgba(132, 161, 169, .18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 213, 189, .07), transparent 36%),
    linear-gradient(155deg, #15242b 0%, #0d171c 74%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.brand-login-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.brand-login-head small {
  display: block;
  margin-bottom: 5px;
  color: #4e706b;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brand-login-head h2 {
  margin: 0;
  color: #eef4f3;
  font-size: 20px;
  font-weight: 850;
}

.brand-login-head > button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(132, 161, 169, .16);
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
  color: #b8c6c7;
  font-size: 22px;
}

.brand-login-head > button:hover {
  border-color: rgba(132, 161, 169, .28);
  background: rgba(255, 255, 255, .05);
  color: #ffffff;
}

#brandLoginForm {
  display: grid;
  gap: 13px;
}

.brand-login-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.brand-login-field > span {
  color: #83969a;
  font-size: 11px;
  font-weight: 700;
}

.brand-login-field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(132, 161, 169, .18);
  border-radius: 6px;
  outline: 0;
  background: #0c151a;
  color: #eef4f3;
  font-size: 13px;
  box-shadow: none;
}

.brand-login-field input::placeholder {
  color: #52656a;
}

.brand-login-field input:focus {
  border-color: rgba(79, 213, 189, .48);
  background: #0e191e;
  box-shadow: 0 0 0 2px rgba(79, 213, 189, .06);
}

.brand-login-password-wrap {
  position: relative;
  display: block;
}

.brand-login-password-wrap #brandLoginPassword {
  padding-right: 58px;
}

.brand-login-password-wrap #brandLoginPasswordToggle {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 46px;
  min-width: 46px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #779095;
  font-size: 11px;
  font-weight: 700;
  transform: translateY(-50%);
}

.brand-login-password-wrap #brandLoginPasswordToggle:hover,
.brand-login-password-wrap #brandLoginPasswordToggle:focus-visible {
  background: rgba(79, 213, 189, .08);
  color: #79dfcc;
  outline: 0;
}

.brand-login-error {
  min-height: 16px;
  margin: -2px 0 0;
  color: #d98f92;
  font-size: 10px;
}

.brand-login-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.brand-login-actions button {
  min-height: 40px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 760;
}

#brandLoginCancelBtn {
  border-color: rgba(132, 161, 169, .17);
  background: rgba(255, 255, 255, .025);
  color: #bdc9c9;
}

.brand-login-submit {
  border-color: #4fd5bd;
  background: #4fd5bd;
  color: #071713;
}

.brand-login-submit:hover {
  border-color: #65ddc8;
  background: #65ddc8;
  color: #071713;
}

.brand-account-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.brand-account-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(181, 198, 201, .22);
  border-radius: 50%;
  background: linear-gradient(145deg, #243139, #131f25);
  color: #aab9bb;
  font-size: 16px;
  font-weight: 850;
}

.brand-account-avatar svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-account-copy {
  position: relative;
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
}

.brand-account-copy > strong {
  transition: opacity .14s ease;
}

.brand-logout-hover {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: auto;
  min-width: 52px;
  min-height: 24px;
  height: 24px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(222, 116, 121, .28);
  border-radius: 5px;
  background: #172027;
  color: #e2a3a6;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .14s ease, visibility .14s ease, border-color .14s ease;
}

.brand-account-popover.is-logged-in .brand-account-copy:hover > strong,
.brand-account-popover.is-logged-in .brand-account-copy:focus-within > strong {
  opacity: 0;
}

.brand-account-popover.is-logged-in .brand-account-copy:hover .brand-logout-hover,
.brand-account-popover.is-logged-in .brand-account-copy:focus-within .brand-logout-hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.brand-logout-hover:hover {
  border-color: rgba(222, 116, 121, .46);
  background: #211d22;
  color: #f0b8ba;
}

.brand-account-head strong {
  overflow: hidden;
  color: #edf3f2;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-account-head small,
.brand-defaults-head small {
  color: #7f9297;
  font-size: 10px;
}

.brand-account-action {
  min-width: 68px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(181, 198, 201, .16);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: #cdd7d6;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.brand-account-action:hover {
  border-color: rgba(79, 213, 189, .34);
  background: rgba(79, 213, 189, .08);
  color: #75ddcd;
}

.brand-account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.brand-account-actions button,
.brand-defaults-save {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(181, 198, 201, .16);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: #cdd7d6;
  font-size: 11px;
  font-weight: 700;
}

.brand-account-actions button:hover,
.brand-defaults-save:hover {
  border-color: rgba(181, 198, 201, .30);
  background: rgba(255, 255, 255, .065);
  color: #eff4f3;
}

.brand-defaults-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(181, 198, 201, .11);
}

.brand-defaults-head strong {
  color: #dfe7e5;
  font-size: 12px;
  font-weight: 750;
}

.brand-defaults-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}

.brand-defaults-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin: 0;
}

.brand-defaults-grid label > span {
  color: #85989d;
  font-size: 10px;
  font-weight: 650;
}

.brand-defaults-grid select {
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(181, 198, 201, .16);
  border-radius: 7px;
  background: #111c22;
  color: #d8e0df;
  font-size: 11px;
  font-weight: 650;
}

.brand-defaults-grid select:focus,
.brand-defaults-grid select:focus-visible {
  border-color: rgba(181, 198, 201, .24);
  outline: none;
  box-shadow: 0 0 0 1px rgba(181, 198, 201, .05);
}

.brand-download-setting {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(181, 198, 201, .11);
}

.brand-download-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand-download-head span {
  color: #dfe7e5;
  font-size: 11px;
  font-weight: 720;
}

.brand-download-head small,
.brand-download-setting > small,
.brand-download-setting > p {
  color: #768b90;
  font-size: 9px;
}

.brand-download-setting > p { margin: 0; line-height: 1.55; }

.brand-download-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 7px;
}

.brand-download-row input,
.brand-download-row button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(181, 198, 201, .16);
  border-radius: 7px;
  background: #111c22;
  color: #d8e0df;
  font-size: 10px;
}

.brand-download-row input {
  padding: 0 9px;
  text-overflow: ellipsis;
}

.brand-download-row button {
  cursor: pointer;
  font-weight: 700;
}

.brand-download-row button:hover {
  border-color: rgba(181, 198, 201, .30);
  background: rgba(255, 255, 255, .055);
}

.brand-download-setting.is-invalid .brand-download-row input {
  border-color: rgba(226, 117, 117, .56);
}

.brand-download-setting.is-invalid > small {
  color: #d98b8b;
}

.brand-all-records {
  width: 100%;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(181, 198, 201, .16);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: #d6e0df;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.brand-all-records:hover,
.brand-all-records:focus-visible {
  border-color: rgba(79, 213, 189, .34);
  outline: 0;
  background: rgba(79, 213, 189, .08);
  color: #79dfcd;
}

.brand-defaults-save {
  width: 100%;
  border-color: rgba(79, 213, 189, .28);
  background: rgba(79, 213, 189, .08);
  color: #76d9c9;
}

.brand-account-feedback {
  min-height: 14px;
  color: #72d5c5;
  font-size: 10px;
  text-align: center;
}

.all-generation-records-modal,
.generation-record-viewer {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: block;
  background: #091216;
}

.all-generation-records-modal.hidden,
.generation-record-viewer.hidden {
  display: none !important;
}

.all-generation-records-panel,
.generation-record-viewer-panel {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: linear-gradient(180deg, #101b20 0%, #0a1317 100%);
}

.all-generation-records-head,
.generation-record-viewer-head {
  min-height: 66px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(181, 198, 201, .14);
  background: #101b20;
}

.all-generation-records-head h2 {
  margin: 0;
  color: #edf4f3;
  font-size: 18px;
  font-weight: 820;
}

.all-generation-records-head p {
  margin: 4px 0 0;
  color: #7f9498;
  font-size: 10px;
}

.all-generation-records-head > button,
.generation-record-viewer-head > button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(181, 198, 201, .18);
  border-radius: 6px;
  background: #152228;
  color: #c8d4d4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.all-generation-records-head > button:hover,
.generation-record-viewer-head > button:hover,
.all-generation-records-head > button:focus-visible,
.generation-record-viewer-head > button:focus-visible {
  border-color: rgba(79, 213, 189, .42);
  outline: 0;
  color: #79dfcd;
}

.all-generation-records-list {
  min-height: 0;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
  gap: 14px;
  overflow: auto;
}

.all-generation-record-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(181, 198, 201, .14);
  border-radius: 8px;
  background: #101b20;
}

.all-generation-record-card-head {
  min-height: 38px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.all-generation-record-card-head strong {
  overflow: hidden;
  color: #e7eeee;
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-generation-record-card-head span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(79, 213, 189, .20);
  border-radius: 4px;
  background: rgba(79, 213, 189, .07);
  color: #72d5c5;
  font-size: 9px;
  font-weight: 760;
}

.all-generation-record-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(181, 198, 201, .10);
  border-bottom: 1px solid rgba(181, 198, 201, .10);
  border-radius: 0;
  outline: 0;
  background: #071014;
  cursor: zoom-in;
}

.all-generation-record-thumb img,
.all-generation-record-thumb video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}

.all-generation-record-thumb:hover img,
.all-generation-record-thumb:hover video,
.all-generation-record-thumb:focus-visible img,
.all-generation-record-thumb:focus-visible video {
  opacity: .88;
  transform: scale(1.015);
}

.all-generation-record-copy {
  min-width: 0;
  padding: 10px 11px;
  display: grid;
  gap: 4px;
}

.all-generation-record-copy strong,
.all-generation-record-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-generation-record-copy strong {
  color: #dfe8e7;
  font-size: 11px;
  font-weight: 720;
}

.all-generation-record-copy span {
  color: #738a8f;
  font-size: 9px;
}

.all-generation-record-meta {
  padding: 9px 11px 10px;
  display: grid;
  justify-items: end;
  gap: 5px;
  border-top: 1px solid rgba(181, 198, 201, .10);
  color: #7f9498;
  font-size: 9px;
}

.all-generation-record-meta time {
  display: block;
}

.all-generation-records-empty {
  min-height: 260px;
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
}

.all-generation-records-empty strong {
  color: #e3ebea;
  font-size: 15px;
}

.all-generation-records-empty span {
  color: #758b90;
  font-size: 10px;
}

.generation-record-viewer {
  z-index: 12100;
  background: #030708;
}

.generation-record-viewer-panel {
  background: #030708;
}

.generation-record-viewer-head {
  min-height: 54px;
  padding: 9px 14px;
  background: rgba(9, 17, 20, .98);
}

.generation-record-viewer-head strong {
  overflow: hidden;
  color: #e7eeee;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-record-viewer-media {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.generation-record-viewer-media img,
.generation-record-viewer-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.has-all-generation-records {
  overflow: hidden;
}

@media (max-width: 560px) {
  .all-generation-records-list {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

@media (max-width: 520px) {
  .brand-account-popover {
    width: min(310px, calc(100vw - 26px));
  }
}

/* The uploaded mark is the plugin logo, not an account avatar. */
.brand-logo {
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.14);
}

/* Dialogue reference uploads. */
.dialogue-upload-wrap {
  position: static;
}

.dialogue-upload-menu {
  position: absolute;
  left: 18px;
  bottom: calc(100% + 8px);
  z-index: 280;
  width: 252px;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(181, 198, 201, .18);
  border-radius: 9px;
  background: #0d171c;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
}

.dialogue-upload-menu.hidden,
.dialogue-attachment-list.hidden {
  display: none !important;
}

.dialogue-upload-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 9px;
}

.dialogue-upload-head strong {
  color: #e7eeed;
  font-size: 12px;
  font-weight: 760;
}

.dialogue-upload-head span {
  color: #71868a;
  font-size: 10px;
}

.dialogue-upload-menu > button {
  width: 100%;
  min-height: 51px;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #dfe8e6 !important;
  text-align: left;
}

.dialogue-upload-menu > button.hidden,
.dialogue-upload-menu > button[hidden] {
  display: none !important;
}

.dialogue-upload-menu > button:hover,
.dialogue-upload-menu > button:focus-visible {
  background: rgba(255, 255, 255, .055) !important;
  outline: none;
}

.dialogue-upload-menu > button b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(181, 198, 201, .16);
  border-radius: 7px;
  background: #121f25;
  color: #71d7c7;
  font-size: 11px;
}

.dialogue-upload-menu > button span {
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
}

.dialogue-upload-menu > button small {
  color: #71868a;
  font-size: 9px;
  font-weight: 520;
}

.dialogue-input-content {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.dialogue-attachment-list {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 2px;
  scrollbar-width: thin;
}

.dialogue-attachment {
  min-width: 0;
  flex: 0 0 182px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(181, 198, 201, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
}

.dialogue-attachment-preview {
  position: relative;
  width: 36px;
  height: 36px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #17252b;
  color: #72d8c7;
  font-size: 11px;
  font-weight: 780;
}

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

.dialogue-attachment-preview i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  text-shadow: 0 1px 5px #000;
}

.dialogue-attachment-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dialogue-attachment-copy strong,
.dialogue-attachment-copy small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dialogue-attachment-copy strong {
  color: #dfe7e6;
  font-size: 10px;
  font-weight: 700;
}

.dialogue-attachment-copy small {
  color: #75888c;
  font-size: 9px;
}

.dialogue-attachment-remove {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #839599 !important;
  font-size: 15px !important;
}

.dialogue-attachment-remove:hover {
  background: rgba(255, 255, 255, .07) !important;
  color: #eef3f2 !important;
}

@media (max-width: 520px) {
  .dialogue-upload-menu {
    left: 10px;
    width: min(252px, calc(100vw - 40px));
  }
}

/* Asset library: tighter, more restrained corner treatment. */
.asset-project {
  border-radius: 7px !important;
}

.asset-card {
  border-radius: 8px !important;
}

.asset-card .asset-thumb {
  border-radius: 6px !important;
}

@media (max-width: 760px) {
  .asset-card {
    border-radius: 7px !important;
  }

  .asset-card .asset-thumb {
    border-radius: 5px !important;
  }
}

/* Dialogue creation controls: persistent, detailed tool popovers. */
.dialogue-agent-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

.dialogue-agent-menu {
  width: 276px !important;
  max-height: min(438px, calc(100vh - 220px));
  gap: 3px !important;
  padding: 7px !important;
  overflow-y: auto;
  border: 1px solid rgba(167, 187, 191, .22) !important;
  border-radius: 8px !important;
  background: #0d171c !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .48) !important;
  scrollbar-width: thin;
  scrollbar-color: #3b5057 transparent;
}

.dialogue-agent-menu:not(.hidden) {
  display: grid !important;
}

.dialogue-agent-menu-head {
  display: grid;
  gap: 3px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid rgba(170, 189, 193, .12);
  margin-bottom: 3px;
}

.dialogue-agent-menu-head strong {
  color: #e7eeed;
  font-size: 13px;
}

.dialogue-agent-menu-head small {
  color: #75898e;
  font-size: 10px;
  font-weight: 520;
}

.dialogue-agent-menu button {
  min-height: 52px !important;
  gap: 9px;
  padding: 6px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #cdd7d6 !important;
}

.dialogue-agent-menu button::before {
  width: 28px !important;
  height: 28px !important;
  margin-right: 0 !important;
  border-radius: 6px !important;
  background: #17272c !important;
  color: #7ed9cb !important;
}

.dialogue-agent-menu button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.dialogue-agent-menu button strong {
  font-size: 12px;
  font-weight: 760;
}

.dialogue-agent-menu button small {
  overflow: hidden;
  color: #71858a;
  font-size: 9px;
  font-weight: 520;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dialogue-agent-menu button:hover,
.dialogue-agent-menu button.is-active {
  border-color: rgba(135, 160, 165, .18) !important;
  background: #142127 !important;
  color: #edf3f2 !important;
}

.dialogue-agent-menu button.is-active::after {
  color: #65d4c3;
  font-size: 12px;
}

/* 未接入的模式仍可被选中查看，但会明确展示状态，避免误以为可以提交生成。 */
.dialogue-agent-menu button[data-agent-available="false"] > em {
  color: #859397;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.dialogue-agent-menu button[data-agent-available="false"].is-active > em {
  color: #aab7ba;
}

.dialogue-agent-menu button[data-agent-available="false"].is-active::after {
  content: none !important;
}

.dialogue-tool-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 290;
  width: min(450px, calc(100% - 24px));
  max-height: min(540px, calc(100vh - 196px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(167, 187, 191, .22) !important;
  border-radius: 9px !important;
  background: #0d171c !important;
  box-shadow: 0 24px 66px rgba(0, 0, 0, .54) !important;
  transform: translateX(-50%);
}

.dialogue-tool-popover.hidden {
  display: none !important;
}

/* “偏好”按模态弹窗处理：打开时用灰幕遮住插件内其余内容。 */
.dialogue-preference-backdrop {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: block;
  background: rgba(54, 60, 63, .64);
}

.dialogue-preference-backdrop.hidden {
  display: none !important;
}

#dialogueSkillPanel {
  z-index: 291;
}

/* 模型与比例选择只保留有效选项，弹窗按内容收拢，不再占满对话区域。 */
#dialoguePrefPanel,
#dialogueSkillPanel {
  max-height: min(420px, calc(100vh - 196px));
}

.dialogue-skill-popover#dialogueSkillPanel {
  grid-template-rows: auto auto auto;
}

.dialogue-tool-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(167, 187, 191, .13);
  background: #101c21;
}

.dialogue-tool-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dialogue-tool-head h3,
.dialogue-tool-head p {
  margin: 0;
}

.dialogue-tool-head h3 {
  color: #edf3f2;
  font-size: 15px;
  font-weight: 820;
}

.dialogue-tool-head p {
  color: #778b90;
  font-size: 10px;
}

.dialogue-tool-head > button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #35464d;
  border-radius: 6px;
  background: #142027;
  color: #b9c7c7;
  font-size: 18px;
}

.dialogue-tool-scroll {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a5056 transparent;
}

.dialogue-tool-section {
  display: grid;
  gap: 9px;
}

.dialogue-tool-section + .dialogue-tool-section {
  padding-top: 13px;
  border-top: 1px solid rgba(167, 187, 191, .10);
}

.dialogue-tool-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dialogue-tool-section-title strong {
  color: #dbe5e3;
  font-size: 12px;
}

.dialogue-tool-section-title span {
  color: #6e8388;
  font-size: 9px;
}

.dialogue-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.dialogue-option-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dialogue-ratio-section {
  display: grid;
  gap: 8px;
}

/* 普通 `.hidden` 的优先级会被本条 display:grid 覆盖；偏好弹窗的条件区必须强制隐藏。 */
#dialogueSkillPanel .dialogue-ratio-section.hidden,
#dialogueSkillPanel .dialogue-ratio-section[hidden],
#dialogueSkillPanel .dialogue-tool-section-title.hidden,
#dialogueSkillPanel .dialogue-option-grid.hidden,
#dialogueEnhancementPanel .dialogue-ratio-section.hidden,
#dialogueEnhancementPanel .dialogue-ratio-section[hidden],
#dialogueEnhancementPanel .dialogue-tool-section-title.hidden,
#dialogueEnhancementPanel .dialogue-tool-section-title[hidden],
#dialogueEnhancementPanel .dialogue-option-grid.hidden,
#dialogueEnhancementPanel .dialogue-option-grid[hidden] {
  display: none !important;
}

.dialogue-ratio-section + .dialogue-ratio-section {
  padding-top: 13px;
  border-top: 1px solid rgba(167, 187, 191, .11);
}

.dialogue-video-duration-section.hidden {
  display: none !important;
}

.dialogue-option-grid button,
.dialogue-mention-tabs button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #304149;
  border-radius: 6px;
  background: #111c22;
  color: #aebdbc;
  font-size: 11px;
  font-weight: 700;
}

.dialogue-option-grid button:hover,
.dialogue-option-grid button.is-active,
.dialogue-mention-tabs button.is-active {
  border-color: rgba(79, 213, 189, .50);
  background: #132621;
  color: #72d9c9;
}

.dialogue-setting-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dialogue-setting-selects label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.dialogue-setting-selects label > span {
  color: #788d91;
  font-size: 9px;
}

.dialogue-setting-selects select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #304149;
  border-radius: 6px;
  outline: none;
  background: #111c22;
  color: #d6e0df;
  font-size: 11px;
}

.dialogue-setting-switches {
  display: grid;
  gap: 7px;
  padding-top: 13px;
  border-top: 1px solid rgba(167, 187, 191, .10);
}

.dialogue-setting-switches label {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid #2c3c43;
  border-radius: 6px;
  background: #101a20;
  cursor: pointer;
}

.dialogue-setting-switches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dialogue-setting-switches label > span {
  display: grid;
  gap: 2px;
}

.dialogue-setting-switches strong {
  color: #d1dcda;
  font-size: 11px;
}

.dialogue-setting-switches small {
  color: #6f858a;
  font-size: 9px;
}

.dialogue-setting-switches i {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #28383f;
  transition: background .16s ease;
}

.dialogue-setting-switches i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #87989b;
  transition: transform .16s ease, background .16s ease;
}

.dialogue-setting-switches input:checked ~ i {
  background: rgba(79, 213, 189, .28);
}

.dialogue-setting-switches input:checked ~ i::after {
  background: #64d9c7;
  transform: translateX(15px);
}

.dialogue-tool-actions,
.dialogue-tool-foot {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid rgba(167, 187, 191, .13);
  background: #101a1f;
}

.dialogue-tool-actions button,
.dialogue-tool-foot button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid #34464d;
  border-radius: 6px;
  background: #142027;
  color: #bdc9c8;
  font-size: 10px;
  font-weight: 720;
}

.dialogue-tool-actions button.is-primary,
.dialogue-tool-foot button:last-child {
  border-color: rgba(79, 213, 189, .44);
  background: rgba(79, 213, 189, .13);
  color: #74daca;
}

.dialogue-tool-foot {
  justify-content: space-between;
}

.dialogue-tool-foot > span {
  color: #788d91;
  font-size: 10px;
}

.dialogue-skill-popover,
.dialogue-mention-popover {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.dialogue-tool-search {
  min-height: 38px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin: 10px 14px 0;
  padding: 0 9px;
  border: 1px solid #304149;
  border-radius: 6px;
  background: #101b21;
  color: #71868a;
}

.dialogue-tool-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #dbe4e3;
  font-size: 11px;
}

.dialogue-skill-list,
.dialogue-mention-list {
  gap: 6px;
  padding-top: 10px;
}

.dialogue-skill-option,
.dialogue-mention-option {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid #2c3d44;
  border-radius: 6px;
  background: #101a20;
  color: #cbd7d5;
  text-align: left;
}

.dialogue-skill-option.hidden,
.dialogue-mention-option.hidden,
.dialogue-skill-option.is-filtered-out {
  display: none !important;
}

.dialogue-skill-option > b,
.dialogue-mention-option > b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #17272c;
  color: #72d8c8;
  font-size: 11px;
}

.dialogue-skill-option > span,
.dialogue-mention-option > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dialogue-skill-option strong,
.dialogue-mention-option strong {
  font-size: 11px;
}

.dialogue-skill-option small,
.dialogue-mention-option small {
  color: #70858a;
  font-size: 9px;
}

.dialogue-skill-option > i,
.dialogue-mention-option > i {
  color: #687d82;
  font-size: 11px;
  font-style: normal;
  text-align: center;
}

.dialogue-skill-option:hover,
.dialogue-mention-option:hover,
.dialogue-skill-option.is-active,
.dialogue-mention-option.is-active {
  border-color: rgba(79, 213, 189, .36);
  background: #13231f;
}

.dialogue-skill-option.is-active > i,
.dialogue-mention-option.is-active > i {
  color: #68d8c7;
}

.dialogue-preferences-popover .dialogue-model-option {
  min-height: 46px;
  padding-block: 6px;
}

.dialogue-preferences-popover .dialogue-model-option > span {
  display: block;
}

.dialogue-preferences-popover .dialogue-model-option strong {
  display: block;
  overflow: hidden;
  color: #dce6e4;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialogue-model-hover-card {
  position: fixed;
  z-index: 2200;
  box-sizing: border-box;
  width: min(286px, calc(100vw - 18px));
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  pointer-events: none;
  border: 1px solid rgba(99, 132, 139, .66);
  border-radius: 7px;
  background: #0c161b;
  color: #d9e3e1;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .56);
}

.dialogue-model-hover-card.hidden {
  display: none !important;
}

.dialogue-model-hover-card > small {
  color: #62d6c4;
  font-size: 9px;
  font-weight: 760;
}

.dialogue-model-hover-card > strong {
  color: #edf4f2;
  font-size: 12px;
  line-height: 1.4;
}

.dialogue-model-hover-card > span,
.dialogue-model-hover-card > code {
  overflow-wrap: anywhere;
  color: #84999d;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.45;
}

.dialogue-mention-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 14px 0;
}

/* The primary dialogue action is visually distinct from secondary tools. */
.dialogue-bottom-input .dialogue-input-tools .dialogue-send {
  border-color: #4fd5bd !important;
  background: #4fd5bd !important;
  color: #071713 !important;
  box-shadow: 0 9px 24px rgba(79, 213, 189, .18) !important;
}

.dialogue-bottom-input .dialogue-input-tools .dialogue-send:hover {
  border-color: #72e5d0 !important;
  background: #72e5d0 !important;
  color: #06130f !important;
  box-shadow: 0 11px 28px rgba(79, 213, 189, .26) !important;
}

@media (max-width: 680px) {
  .dialogue-agent-menu {
    width: min(148px, calc(100vw - 34px)) !important;
    border-radius: 7px !important;
  }

  .dialogue-tool-popover {
    width: min(430px, calc(100% - 16px));
    max-height: min(500px, calc(100vh - 176px));
    border-radius: 7px !important;
  }

  .dialogue-tool-head {
    min-height: 56px;
    padding: 10px 12px;
  }

  .dialogue-tool-scroll {
    padding: 11px;
  }

  .dialogue-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dialogue composer tools align with the left-side add control. */
.dialogue-bottom-input .dialogue-input-tools {
  justify-content: flex-start !important;
  margin-left: -50px !important;
  padding-left: 0 !important;
}

/* Dialogue composer: align the add control with the prompt and keep references above it. */
.dialogue-bottom-input {
  min-height: 108px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  column-gap: 10px !important;
  row-gap: 7px !important;
  padding: 12px 92px 12px 18px !important;
}

.dialogue-bottom-input .dialogue-upload-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin-bottom: 6px !important;
}

.dialogue-bottom-input .dialogue-plus {
  position: static !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
}

.dialogue-bottom-input .dialogue-input-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  gap: 7px !important;
}

.dialogue-bottom-input .dialogue-attachment-list {
  order: -1;
  min-height: 0;
  margin: 0 0 1px;
  padding: 0 0 2px;
}

.dialogue-bottom-input textarea {
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 7px 4px !important;
}

.dialogue-bottom-input .dialogue-input-tools {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 520px) {
  .dialogue-bottom-input {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    padding: 10px 82px 10px 12px !important;
  }

  .dialogue-bottom-input .dialogue-plus {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* Storyboard motion: expand the inline editor for longer camera directions. */
.storyboard-motion .storyboard-meta-line > strong[contenteditable="true"] {
  box-sizing: border-box;
  width: calc(100% - 52px);
  max-width: calc(100% - 52px);
  min-height: 32px;
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid #46545b;
  border-radius: 5px;
  outline: 0;
  background: #10191e;
  color: #e5ecea;
  line-height: 1.45;
  vertical-align: middle;
  white-space: normal;
}

.storyboard-motion .storyboard-meta-line > strong[contenteditable="true"]:focus {
  border-color: #5a6870;
  background: #121d23;
}

/* Unified primary actions: every generate and regenerate control follows the dialogue action. */
html body #generateBtn,
html body #editImageBtn,
html body #editVideoBtn,
html body .asset-generator-actions .asset-generator-submit,
html body .record-image-editor .record-image-editor-actions .record-image-editor-regenerate,
html body .record-image-marker-box .record-image-marker-regenerate,
html body .shot-fullscreen-composer .shot-fullscreen-tools .shot-regenerate,
html body .shot-fullscreen-composer .shot-send,
html body .shot-point-box .shot-point-regenerate,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-generate-btn,
html body .storyboard-script-actions .storyboard-batch-generate,
html body .dialogue-bottom-input .dialogue-input-tools .dialogue-send {
  min-width: 68px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid #4fd5bd !important;
  border-radius: 8px !important;
  background: #4fd5bd !important;
  color: #071713 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 9px 24px rgba(79, 213, 189, .18) !important;
}

html body #generateBtn:hover:not(:disabled),
html body #editImageBtn:hover:not(:disabled),
html body #editVideoBtn:hover:not(:disabled),
html body .asset-generator-actions .asset-generator-submit:hover:not(:disabled),
html body .record-image-editor .record-image-editor-actions .record-image-editor-regenerate:hover:not(:disabled),
html body .record-image-marker-box .record-image-marker-regenerate:hover:not(:disabled),
html body .shot-fullscreen-composer .shot-fullscreen-tools .shot-regenerate:hover:not(:disabled),
html body .shot-fullscreen-composer .shot-send:hover:not(:disabled),
html body .shot-point-box .shot-point-regenerate:hover:not(:disabled),
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-generate-btn:hover:not(:disabled),
html body .storyboard-script-actions .storyboard-batch-generate:hover:not(:disabled),
html body .dialogue-bottom-input .dialogue-input-tools .dialogue-send:hover:not(:disabled) {
  border-color: #72e5d0 !important;
  background: #72e5d0 !important;
  color: #06130f !important;
  box-shadow: 0 11px 28px rgba(79, 213, 189, .26) !important;
}

html body #generateBtn:disabled,
html body #editImageBtn:disabled,
html body #editVideoBtn:disabled,
html body .asset-generator-actions .asset-generator-submit:disabled,
html body .record-image-editor .record-image-editor-actions .record-image-editor-regenerate:disabled,
html body .record-image-marker-box .record-image-marker-regenerate:disabled,
html body .shot-fullscreen-composer .shot-fullscreen-tools .shot-regenerate:disabled,
html body .shot-fullscreen-composer .shot-send:disabled,
html body .shot-point-box .shot-point-regenerate:disabled,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-generate-btn:disabled,
html body .storyboard-script-actions .storyboard-batch-generate:disabled,
html body .dialogue-bottom-input .dialogue-input-tools .dialogue-send:disabled {
  border-color: #33574f !important;
  background: #284840 !important;
  color: #789990 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: .72;
}

/* Dialogue mode menu: keep the list text-led and remove 文 / 图 / 影 icon tiles. */
.dialogue-agent-menu button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
}

.dialogue-agent-menu button::before {
  content: none !important;
  display: none !important;
}

.dialogue-agent-menu button {
  min-height: 40px !important;
}

.dialogue-agent-menu button > span {
  gap: 0 !important;
}

.dialogue-agent-menu button small {
  display: none !important;
}

/* Dialogue history toolbar: enlarge filter controls and their menus, while
   keeping the history trigger on its existing compact scale. */
.dialogue-record-tools > button:not(#historyToggleBtn) {
  font-size: 12px !important;
}

.dialogue-record-tools .dialogue-toolbar-option {
  font-size: 13px !important;
}

/* Generated video and beautify cards: quieter surfaces and tighter corners. */
.records-list > .record-item[data-record-type="video"],
.records-list > .record-item[data-record-type="beautify"] {
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 8% 14%, rgba(79, 213, 189, .025), transparent 32%),
    linear-gradient(135deg, #10181d 0%, #0d151a 100%) !important;
}

.records-list > .record-item[data-record-type="video"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="beautify"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="video"] .record-thumb,
.records-list > .record-item[data-record-type="beautify"] .record-thumb {
  border-radius: 6px !important;
}

.records-list > .record-item[data-record-type="video"] .record-thumb,
.records-list > .record-item[data-record-type="beautify"] .record-thumb {
  background:
    linear-gradient(120deg, transparent 22%, rgba(79, 213, 189, .035) 44%, transparent 66%),
    radial-gradient(circle at 50% 50%, rgba(79, 213, 189, .045), transparent 46%),
    #081015 !important;
}

/* AI beautify records: compact shell with a slightly larger media preview. */
.records-list > .record-item[data-record-type="beautify"] {
  border-color: #2e3b42 !important;
  border-radius: 6px !important;
  background:
    radial-gradient(circle at 8% 14%, rgba(79, 213, 189, .012), transparent 34%),
    linear-gradient(135deg, #0f171b 0%, #0e161a 100%) !important;
}

.records-list > .record-item[data-record-type="beautify"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="beautify"] .record-thumb {
  border-radius: 4px !important;
}

@media (max-width: 680px) {
  .records-list > .record-item[data-record-type="beautify"] {
    min-height: 112px !important;
    grid-template-columns: 148px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 8px !important;
  }

  .records-list > .record-item[data-record-type="beautify"] .record-thumb-wrap,
  .records-list > .record-item[data-record-type="beautify"] .record-thumb {
    width: 148px !important;
    height: 96px !important;
  }

  .records-list > .record-item[data-record-type="beautify"] .record-body {
    min-height: 96px !important;
  }
}

@media (max-width: 430px) {
  .records-list > .record-item[data-record-type="beautify"] {
    grid-template-columns: 108px minmax(0, 1fr) !important;
  }

  .records-list > .record-item[data-record-type="beautify"] .record-thumb-wrap,
  .records-list > .record-item[data-record-type="beautify"] .record-thumb {
    width: 108px !important;
    height: 74px !important;
  }
}

/* Image records: larger preview within the same compact result-card footprint. */
.records-list > .record-item[data-record-type="image"] {
  border-radius: 6px !important;
}

.records-list > .record-item[data-record-type="image"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="image"] .record-thumb {
  border-radius: 4px !important;
}

/* Quieter record framing across image, video and AI beautify results. */
.records-list > .record-item[data-record-type="image"]:not(:hover),
.records-list > .record-item[data-record-type="video"]:not(:hover),
.records-list > .record-item[data-record-type="beautify"]:not(:hover) {
  border-color: rgba(126, 151, 160, .14) !important;
}

.records-list > .record-item[data-record-type="image"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="video"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="beautify"] .record-thumb-wrap {
  border-color: rgba(126, 151, 160, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .008) !important;
}

.records-list > .record-item[data-record-type="image"]:hover,
.records-list > .record-item[data-record-type="video"]:hover,
.records-list > .record-item[data-record-type="beautify"]:hover {
  border-color: rgba(79, 213, 189, .42) !important;
}

.records-list > .record-item[data-record-type="image"]:hover .record-thumb-wrap,
.records-list > .record-item[data-record-type="video"]:hover .record-thumb-wrap,
.records-list > .record-item[data-record-type="beautify"]:hover .record-thumb-wrap {
  border-color: rgba(126, 151, 160, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .008) !important;
}

@media (max-width: 680px) {
  .records-list > .record-item[data-record-type="image"] {
    min-height: 112px !important;
    grid-template-columns: 148px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 8px !important;
  }

  .records-list > .record-item[data-record-type="image"] .record-thumb-wrap,
  .records-list > .record-item[data-record-type="image"] .record-thumb {
    width: 148px !important;
    height: 96px !important;
  }

  .records-list > .record-item[data-record-type="image"] .record-body {
    min-height: 96px !important;
  }
}

@media (max-width: 430px) {
  .records-list > .record-item[data-record-type="image"] {
    grid-template-columns: 108px minmax(0, 1fr) !important;
  }

  .records-list > .record-item[data-record-type="image"] .record-thumb-wrap,
  .records-list > .record-item[data-record-type="image"] .record-thumb {
    width: 108px !important;
    height: 74px !important;
  }
}

/* Give video records a larger, true 16:9 preview without increasing the
   surrounding record card height. */
.records-list > .record-item[data-record-type="video"] {
  grid-template-columns: 192px minmax(0, 1fr) !important;
}

.records-list > .record-item[data-record-type="video"] .record-thumb-wrap,
.records-list > .record-item[data-record-type="video"] .record-thumb {
  width: 192px !important;
  height: 108px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 4px !important;
}

@media (max-width: 680px) {
  .records-list > .record-item[data-record-type="video"] {
    min-height: 112px !important;
    grid-template-columns: 176px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 8px !important;
  }

  .records-list > .record-item[data-record-type="video"] .record-thumb-wrap,
  .records-list > .record-item[data-record-type="video"] .record-thumb {
    width: 176px !important;
    height: 99px !important;
  }

  .records-list > .record-item[data-record-type="video"] .record-body {
    min-height: 99px !important;
  }
}

@media (max-width: 430px) {
  .records-list > .record-item[data-record-type="video"] {
    grid-template-columns: 128px minmax(0, 1fr) !important;
  }

  .records-list > .record-item[data-record-type="video"] .record-thumb-wrap,
  .records-list > .record-item[data-record-type="video"] .record-thumb {
    width: 128px !important;
    height: 72px !important;
  }

  .records-list > .record-item[data-record-type="video"] .record-body {
    min-height: 72px !important;
  }
}

.dialogue-record-main::after {
  content: "";
  display: block;
  height: 170px;
  pointer-events: none;
}

/* Dialogue history uses an open canvas; remove only its outer page frame. */
.records-modal.is-dialogue-view {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.records-modal.is-dialogue-view .records-list-modal,
.records-modal.is-dialogue-view .dialogue-record-page,
.records-modal.is-dialogue-view .dialogue-record-main {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Let the selected AI response use the available dialogue canvas width. */
.records-modal.is-dialogue-view .dialogue-ai-result {
  width: auto;
  max-width: none;
  margin-left: 18px;
  margin-right: 18px;
}

.records-modal.is-dialogue-view .dialogue-ai-result p,
.records-modal.is-dialogue-view .dialogue-result-media {
  width: 100%;
  max-width: none;
}

/* Match the generated-image choice panel to the widened AI result above. */
.records-modal.is-dialogue-view .dialogue-image-choice-case {
  width: auto;
  max-width: none;
  margin-left: 18px;
  margin-right: 18px;
}

@media (max-width: 680px) {
  .records-modal.is-dialogue-view .dialogue-ai-result,
  .records-modal.is-dialogue-view .dialogue-image-choice-case {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Dialogue image-processing example with two selectable generations. */
.dialogue-image-choice-case {
  max-width: 760px;
  display: grid;
  gap: 12px;
  margin: 0 34px 310px;
  padding: 14px;
  border: 1px solid rgba(126, 151, 160, .16);
  border-radius: 8px;
  background: #0f181e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .012);
}

.dialogue-image-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dialogue-image-choice-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dialogue-image-choice-head span {
  color: #68d7c6;
  font-size: 10px;
  font-weight: 760;
}

.dialogue-image-choice-head strong {
  color: #edf3f2;
  font-size: 15px;
  font-weight: 820;
}

.dialogue-image-choice-head small {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(79, 213, 189, .24);
  border-radius: 5px;
  background: rgba(79, 213, 189, .08);
  color: #76d9ca;
  font-size: 9px;
  font-weight: 700;
}

.dialogue-image-choice-case > p {
  margin: 0;
  color: #83969a;
  font-size: 11px;
  line-height: 1.55;
}

.dialogue-image-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dialogue-image-option {
  position: relative;
  min-width: 0;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #dce5e3;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease;
}

.dialogue-image-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dialogue-image-option:hover {
  border-color: transparent;
  background: transparent;
  transform: translateY(-1px);
}

.dialogue-image-option.is-selected {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.dialogue-image-preview {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  border: 0;
  border-radius: 0;
  background-color: #1d2b2d;
}

.dialogue-image-preview::before,
.dialogue-image-preview::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.dialogue-image-preview::before {
  inset: 0;
  background:
    linear-gradient(108deg, transparent 18%, rgba(241, 234, 196, .34) 34%, transparent 47%),
    linear-gradient(90deg, rgba(4, 12, 14, .22), transparent 42%),
    radial-gradient(ellipse at 62% 32%, rgba(235, 225, 177, .72), transparent 18%);
  mix-blend-mode: screen;
}

.dialogue-image-preview::after {
  left: -8%;
  right: -8%;
  bottom: -18%;
  height: 48%;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(180deg, rgba(78, 101, 91, .55), rgba(17, 32, 32, .95)),
    repeating-linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.07) 18% 19%);
}

.dialogue-image-preview.is-mist {
  background:
    radial-gradient(circle at 68% 30%, rgba(227, 221, 172, .68), transparent 10%),
    linear-gradient(150deg, #314440 0%, #7b8575 42%, #1b2c2c 100%);
}

.dialogue-image-preview.is-cinematic {
  background:
    radial-gradient(circle at 36% 28%, rgba(189, 221, 216, .52), transparent 10%),
    linear-gradient(145deg, #152b39 0%, #384f55 38%, #1b2629 68%, #34291f 100%);
}

.dialogue-image-preview > i {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(220, 230, 229, .36);
  border-radius: 50%;
  background: rgba(5, 12, 15, .66);
  color: transparent;
  font-size: 10px;
  font-style: normal;
}

.dialogue-image-option.is-selected .dialogue-image-preview > i {
  border-color: #62d8c6;
  background: #4fd5bd;
  color: #071713;
}

.dialogue-image-option.is-selected .dialogue-image-preview,
.dialogue-image-option.is-media-selected > .dialogue-image-preview {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dialogue-image-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 0 2px 2px;
}

.dialogue-image-option-copy strong {
  font-size: 11px;
  font-weight: 760;
}

.dialogue-image-option-copy small {
  overflow: hidden;
  color: #768a8e;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dialogue-image-choice-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.dialogue-image-choice-actions > span {
  color: #7d9195;
  font-size: 10px;
}

.dialogue-image-choice-use {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(79, 213, 189, .48);
  border-radius: 6px;
  background: rgba(79, 213, 189, .13);
  color: #75ddcd;
  font-size: 10px;
  font-weight: 760;
}

.dialogue-image-choice-use:hover,
.dialogue-image-choice-use.is-confirmed {
  background: #4fd5bd;
  color: #071713;
}

@media (max-width: 680px) {
  .dialogue-bottom-input .dialogue-input-tools {
    margin-left: -48px !important;
  }

  .dialogue-record-main::after {
    height: 200px;
  }

  .dialogue-image-choice-case {
    margin: 0 14px 300px;
    padding: 10px;
  }

  .dialogue-image-preview {
    min-height: 0;
  }
}

@media (max-width: 470px) {
  .dialogue-image-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the storyboard table visually separate from the primary navigation. */
.records-modal.is-storyboard-view {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.records-list.is-storyboard-list {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Image, video and AI-beautify result lists should not read as a framed panel. */
.records-modal.is-media-view,
.records-list.is-media-record-list {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Media task cards use a restrained, low-saturation surface. */
.records-list.is-media-record-list > .record-item {
  background:
    radial-gradient(circle at 10% 0%, rgba(145, 153, 155, .018), transparent 30%),
    linear-gradient(135deg, #191f22 0%, #141a1d 100%) !important;
}

.records-list.is-media-record-list > .record-item[data-record-type="video"],
.records-list.is-media-record-list > .record-item[data-record-type="beautify"] {
  background:
    radial-gradient(circle at 8% 14%, rgba(145, 153, 155, .02), transparent 30%),
    linear-gradient(135deg, #1a2023 0%, #151b1e 100%) !important;
}

.records-list.is-media-record-list > .record-item:hover {
  background:
    radial-gradient(circle at 10% 0%, rgba(145, 153, 155, .025), transparent 30%),
    linear-gradient(135deg, #1d2427 0%, #171e21 100%) !important;
}

.records-list.is-storyboard-list .storyboard-board {
  flex: 0 0 auto;
}

/* Soften only the structural grid lines inside the storyboard table. */
.records-list.is-storyboard-list .storyboard-board {
  border-color: rgba(255, 255, 255, .065);
  border-bottom-color: transparent;
  box-shadow: inset 0 22px 42px rgba(255, 255, 255, .014);
}

.records-list.is-storyboard-list .storyboard-column-head {
  border-bottom-color: rgba(255, 255, 255, .055);
}

.records-list.is-storyboard-list .storyboard-column-head > span,
.records-list.is-storyboard-list .storyboard-cell {
  border-right-color: rgba(255, 255, 255, .042);
}

.records-list.is-storyboard-list .storyboard-card {
  border-bottom-color: rgba(255, 255, 255, .055);
}

.records-list.is-storyboard-list .storyboard-block {
  border-bottom-color: rgba(255, 255, 255, .045);
}

/* Storyboard table surfaces: lift every background slightly while preserving row separation. */
.records-list.is-storyboard-list .storyboard-board {
  background:
    radial-gradient(circle at 50% -18%, rgba(80, 201, 181, .065), transparent 30%),
    linear-gradient(180deg, #182126 0%, #12191d 42%, #0d1215 100%);
}

.records-list.is-storyboard-list .storyboard-column-head {
  background:
    radial-gradient(circle at 50% -18%, rgba(80, 201, 181, .08), transparent 36%),
    linear-gradient(180deg, #1b262c 0%, #151d22 62%, #10161a 100%);
}

.records-list.is-storyboard-list .storyboard-card {
  background:
    radial-gradient(circle at 50% -16%, rgba(80, 201, 181, .045), transparent 36%),
    linear-gradient(180deg, #151d22 0%, #10171b 54%, #0c1114 100%);
}

.records-list.is-storyboard-list .storyboard-card:nth-of-type(even) {
  background:
    radial-gradient(circle at 50% -16%, rgba(80, 201, 181, .05), transparent 36%),
    linear-gradient(180deg, #172026 0%, #11191e 54%, #0d1317 100%);
}

.records-list.is-storyboard-list .storyboard-card:hover,
.records-list.is-storyboard-list .storyboard-card.is-editing {
  background:
    radial-gradient(circle at 50% -16%, rgba(80, 201, 181, .065), transparent 36%),
    linear-gradient(180deg, #19232a 0%, #141c21 56%, #0f1519 100%);
}

.storyboard-script-actions {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 16px 20px 18px;
  border-top: 1px solid rgba(181, 198, 201, .12);
  background: #0b1318;
}

.storyboard-script-actions button {
  min-width: 92px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(181, 198, 201, .20);
  border-radius: 6px;
  background: #121d23;
  color: #dbe4e3;
  font-size: 14px;
  font-weight: 720;
  cursor: pointer;
}

.storyboard-script-actions button:hover {
  border-color: rgba(181, 198, 201, .34);
  background: #17242a;
}

.storyboard-script-status {
  min-width: 0;
  margin-left: 8px;
  color: #82969a;
  font-size: 11px;
}

.storyboard-script-actions .storyboard-display-settings-btn {
  order: 1;
  margin: 0;
}

.storyboard-script-actions .storyboard-script-upload {
  order: 2;
}

.storyboard-script-actions .storyboard-script-download {
  order: 3;
}

.storyboard-script-actions .storyboard-script-status {
  order: 4;
}

.storyboard-script-actions .storyboard-batch-generate {
  order: 5;
  min-width: 104px;
  margin-left: auto;
}

.storyboard-card.is-batch-generating .storyboard-shot-thumb {
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .20);
  opacity: .78;
}

.storyboard-script-status.is-error {
  color: #d88f92;
}

/* 分镜批量生成设置：沿用对话页的深色弹窗层级与控件语言。 */
.storyboard-batch-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 8, 10, .78);
  backdrop-filter: blur(3px);
}

.storyboard-batch-modal {
  width: min(580px, 100%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  padding: 22px 24px 20px;
  border: 1px solid rgba(96, 143, 148, .42);
  border-radius: 14px;
  background: linear-gradient(160deg, #101c21 0%, #0b1418 100%);
  color: #dce8e5;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48), 0 0 0 1px rgba(79, 213, 189, .06);
}

.storyboard-batch-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(181, 198, 201, .14);
}

.storyboard-batch-modal-head span {
  display: block;
  margin-bottom: 4px;
  color: #7e9ca1;
  font-size: 12px;
}

.storyboard-batch-modal-head h2 {
  margin: 0;
  color: #f0f7f4;
  font-size: 22px;
}

.storyboard-batch-modal-head button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(113, 157, 161, .36);
  border-radius: 8px;
  background: #122129;
  color: #c7d9d6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.storyboard-batch-modal-head button:hover {
  border-color: #4fd5bd;
  color: #4fd5bd;
}

.storyboard-batch-modal-summary {
  margin: 16px 0;
  color: #9ab0b2;
  font-size: 13px;
  line-height: 1.6;
}

.storyboard-batch-modal-summary strong {
  color: #4fd5bd;
}

.storyboard-batch-settings {
  display: grid;
  gap: 14px;
}

.storyboard-batch-setting-group {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(97, 143, 148, .28);
  border-radius: 10px;
  background: rgba(13, 27, 32, .78);
}

.storyboard-batch-setting-group.hidden {
  display: none !important;
}

.storyboard-batch-setting-group h3 {
  margin: 0;
  color: #4fd5bd;
  font-size: 15px;
}

.storyboard-batch-setting-group label {
  display: grid;
  gap: 6px;
  color: #9db1b2;
  font-size: 12px;
}

.storyboard-batch-setting-group select,
.storyboard-batch-setting-group input[type="number"] {
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(105, 150, 154, .38);
  border-radius: 7px;
  outline: 0;
  background: #0b171c;
  color: #d9e8e5;
  font: inherit;
}

.storyboard-batch-setting-group select:focus,
.storyboard-batch-setting-group input[type="number"]:focus {
  border-color: #4fd5bd;
  box-shadow: 0 0 0 2px rgba(79, 213, 189, .12);
}

.storyboard-batch-setting-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.storyboard-batch-duration-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  color: #c3d3d0 !important;
}

.storyboard-batch-duration-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #4fd5bd;
}

.storyboard-batch-duration-input {
  max-width: 180px;
}

.storyboard-batch-duration-input input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.storyboard-batch-setting-group > small {
  color: #71888b;
  font-size: 11px;
}

.storyboard-batch-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.storyboard-batch-modal-foot button {
  min-width: 106px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(105, 150, 154, .38);
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.storyboard-batch-cancel {
  background: #122129;
  color: #a8bcbd;
}

.storyboard-batch-confirm {
  border-color: #4fd5bd !important;
  background: #4fd5bd;
  color: #06201a;
}

.storyboard-batch-confirm:hover {
  background: #72e5d0;
}

@media (max-width: 520px) {
  .storyboard-batch-modal-backdrop {
    padding: 10px;
  }

  .storyboard-batch-modal {
    padding: 18px 16px;
  }

  .storyboard-batch-setting-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .storyboard-script-actions {
    padding: 12px;
  }

  .storyboard-script-actions button {
    min-width: 82px;
    padding: 0 12px;
  }
}

/* Project picker: cover every floating control and provide a taller media grid. */
#projectModal.project-modal {
  z-index: 1200 !important;
  place-items: center !important;
  padding: 20px !important;
  background: rgba(1, 7, 9, .42) !important;
  -webkit-backdrop-filter: blur(10px) saturate(.88) !important;
  backdrop-filter: blur(10px) saturate(.88) !important;
}

#projectModal .project-panel {
  width: min(668px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  border-radius: 8px !important;
}

#projectModal .project-panel-head {
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
}

#projectModal .project-shared-add {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(79, 145, 229, .52);
  border-radius: 7px;
  background: rgba(54, 116, 201, .12);
  color: #8cbcf4;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

#projectModal .project-shared-add:hover,
#projectModal .project-shared-add:focus-visible,
#projectModal .project-shared-add[aria-expanded="true"] {
  outline: 0;
  border-color: rgba(100, 169, 255, .82);
  background: rgba(54, 116, 201, .22);
  color: #c6e1ff;
}

#projectModal .project-shared-form {
  display: grid;
  grid-template-columns: minmax(135px, .72fr) minmax(270px, 1.35fr);
  gap: 10px 16px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(111, 164, 228, .2);
  background: linear-gradient(90deg, rgba(48, 103, 177, .13), rgba(48, 103, 177, .035));
}

#projectModal .project-shared-form.hidden {
  display: none;
}

#projectModal .project-shared-form-copy {
  display: grid;
  align-content: center;
  gap: 3px;
}

#projectModal .project-shared-form-copy strong {
  color: #d8eaff;
  font-size: 13px;
}

#projectModal .project-shared-form-copy span {
  color: #829bb6;
  font-size: 10px;
  line-height: 1.45;
}

#projectModal .project-shared-form-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
}

#projectModal #projectSharedNameInput {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(135, 157, 181, .32);
  border-radius: 5px;
  outline: 0;
  background: #0a151c;
  color: #edf5fb;
}

#projectModal #projectSharedNameInput:focus {
  border-color: rgba(97, 164, 246, .74);
  box-shadow: 0 0 0 2px rgba(66, 137, 224, .12);
}

#projectModal .project-shared-form-controls button {
  height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(136, 158, 180, .25);
  border-radius: 5px;
  background: rgba(255, 255, 255, .025);
  color: #c3d0dc;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#projectModal #projectSharedConfirmBtn {
  border-color: rgba(81, 151, 238, .58);
  background: #326fb9;
  color: #f4f9ff;
}

#projectModal .project-shared-error {
  grid-column: 2;
  min-height: 0;
  margin: -4px 0 0;
  color: #e09a9e;
  font-size: 10px;
}

#projectModal .project-item.is-shared {
  border-color: rgba(75, 142, 226, .48) !important;
  background: linear-gradient(150deg, rgba(41, 92, 157, .19), rgba(16, 29, 39, .92) 62%) !important;
}

#projectModal .project-item.is-shared:hover,
#projectModal .project-item.is-shared.is-active {
  border-color: #579df0 !important;
  box-shadow: inset 0 0 0 1px rgba(87, 157, 240, .12), 0 10px 24px rgba(8, 45, 91, .18) !important;
}

#projectModal .project-item.is-shared .project-thumb {
  border-color: rgba(86, 151, 230, .42) !important;
  filter: saturate(.82) hue-rotate(8deg);
}

#projectModal .project-shared-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 4px 7px;
  border: 1px solid rgba(112, 175, 250, .48);
  border-radius: 4px;
  background: rgba(13, 42, 77, .86);
  color: #a8d0ff;
  font-size: 10px;
  font-weight: 760;
  pointer-events: none;
}

#projectSelectorBtn.is-shared-project {
  border-color: rgba(83, 150, 235, .58) !important;
  color: #b9d9ff !important;
}

.dialogue-history-group.is-shared .dialogue-history-group-title,
.dialogue-history-group.is-shared .dialogue-history-group-title svg {
  color: #82b8f3 !important;
  stroke: #82b8f3 !important;
}

.dialogue-history-group.is-shared .dialogue-history-entry.is-active {
  border-color: rgba(77, 143, 223, .5) !important;
  background: rgba(45, 91, 146, .16) !important;
}

#projectModal .project-list {
  height: min(620px, calc(100dvh - 132px)) !important;
  min-height: min(620px, calc(100dvh - 132px)) !important;
  max-height: none !important;
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: 154px !important;
  overflow-y: auto !important;
}

#projectModal .project-item {
  min-height: 0 !important;
  height: 154px !important;
  grid-template-rows: 112px 24px !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 5px !important;
}

#projectModal .project-item:hover {
  transform: translateY(-1px) !important;
}

#projectModal .project-thumb {
  height: 112px !important;
  border-radius: 3px !important;
}

#projectModal .project-item input {
  min-height: 24px !important;
  padding: 0 2px !important;
}

#projectModal .project-item.is-active .project-thumb::after,
#projectModal .project-item.is-active .project-radio::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 560px) {
  #projectModal.project-modal {
    padding: 10px !important;
  }

  #projectModal .project-panel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  #projectModal .project-panel-head {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  #projectModal .project-shared-add {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }

  #projectModal .project-shared-form {
    grid-template-columns: 1fr;
  }

  #projectModal .project-shared-error {
    grid-column: 1;
  }

  #projectModal .project-list {
    height: min(620px, calc(100dvh - 92px)) !important;
    min-height: min(620px, calc(100dvh - 92px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 148px !important;
  }

  #projectModal .project-item {
    height: 148px !important;
    grid-template-rows: 106px 24px !important;
  }

  #projectModal .project-thumb {
    height: 106px !important;
  }
}

/* Project covers use a 16:9 crop and two-column picker layout. */
#projectModal .project-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
}

#projectModal .project-item {
  height: auto !important;
  grid-template-rows: auto 34px !important;
}

#projectModal .project-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  background-size: cover !important;
  background-position: center !important;
}

@media (max-width: 560px) {
  #projectModal .project-item {
    height: auto !important;
    grid-template-rows: auto 34px !important;
  }

  #projectModal .project-thumb {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Keep project-name editing fully visible inside the card. */
#projectModal .project-item input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  line-height: 32px !important;
}

#projectModal .project-item input:hover {
  border-color: rgba(153, 173, 181, .24) !important;
  background: rgba(255, 255, 255, .02) !important;
}

#projectModal .project-item input:focus,
#projectModal .project-item input:focus-visible {
  border-color: rgba(165, 184, 191, .58) !important;
  outline: 0 !important;
  background: #0c171c !important;
  box-shadow: 0 0 0 1px rgba(165, 184, 191, .08) !important;
}

/* Keep the brand account hover path continuous between the title and popover. */
.brand-account-popover::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 12px;
}

/* Storyboard context menu includes a clear secondary delete command. */
.storyboard-context-menu .storyboard-context-delete {
  margin-top: 4px;
  border-top: 1px solid rgba(181, 198, 201, .12);
  border-radius: 4px;
  color: #c9d1d1;
}

.storyboard-context-menu .storyboard-context-delete::before {
  content: "−";
  border-color: rgba(203, 132, 136, .34);
  color: #d49a9d;
}

.storyboard-context-menu .storyboard-context-delete:hover,
.storyboard-context-menu .storyboard-context-delete:focus-visible {
  background: rgba(203, 110, 116, .09);
  color: #f0d8d9;
}

/* Hovering a boundary between storyboard rows reveals an inline add action. */
.storyboard-insert-divider {
  position: relative;
  z-index: 24;
  height: 22px;
  margin: -11px 0;
  overflow: visible;
}

.storyboard-insert-divider-top,
.storyboard-insert-divider-bottom {
  z-index: 25;
}

/* The last add button floats on the final row edge without creating a visible strip. */
.storyboard-insert-divider-bottom {
  height: 0;
  margin: 0;
  background: transparent !important;
}

.storyboard-insert-divider.storyboard-insert-divider-bottom::before {
  top: -16px;
  height: 32px;
  background: transparent !important;
}

.storyboard-insert-divider-bottom button {
  top: 0;
}

.records-list.is-storyboard-list .storyboard-board {
  overflow: visible;
}

.storyboard-insert-divider::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  height: 22px;
}

.storyboard-insert-divider button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(79, 213, 189, .42);
  border-radius: 50%;
  background: #102126;
  color: #69d9c9;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  transition: opacity .14s ease, transform .14s ease, background .14s ease;
}

.storyboard-insert-divider:hover button,
.storyboard-insert-divider:focus-within button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.storyboard-insert-divider button:hover,
.storyboard-insert-divider button:focus-visible {
  outline: none;
  border-color: rgba(79, 213, 189, .68);
  background: #173238;
  color: #a2f1e4;
}

/* Keep dialogue chrome beneath the project and asset-library modal layers. */
.dialogue-record-top {
  position: sticky !important;
  top: 0;
  z-index: 40 !important;
  background: #0a1014;
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
  transition: transform .2s ease, opacity .16s ease, box-shadow .2s ease;
}

.dialogue-record-top.is-scroll-pinned {
  box-shadow: 0 12px 24px rgba(2, 7, 9, .22);
}

.dialogue-record-top.is-scroll-hidden {
  transform: translateY(calc(-100% - 10px));
  opacity: 0;
  pointer-events: none;
}

.dialogue-bottom-input {
  z-index: 70 !important;
}

#assetLibraryModal.asset-library-modal,
#projectModal.project-modal {
  z-index: 1200 !important;
}

/* Account defaults use the same primary treatment as generation actions. */
#brandSaveDefaults.brand-defaults-save {
  width: 100%;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #4fd5bd;
  border-radius: 8px;
  background: #4fd5bd;
  color: #071713;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .02em;
  box-shadow: 0 9px 24px rgba(79, 213, 189, .18);
}

#brandSaveDefaults.brand-defaults-save:hover,
#brandSaveDefaults.brand-defaults-save:focus-visible {
  outline: none;
  border-color: #72e5d0;
  background: #72e5d0;
  color: #06130f;
  box-shadow: 0 11px 28px rgba(79, 213, 189, .26);
}

#brandSaveDefaults.brand-defaults-save:active {
  transform: translateY(1px);
}

/* Keep the primary content scroller unobtrusive in the compact CEP panel. */
.records-list::-webkit-scrollbar {
  width: 4px;
}

/* Generated record cards: compact Premiere Pro insertion actions. */
.records-list > .record-item .record-tags {
  align-items: center;
  min-width: 0;
}

.record-insert-actions {
  position: relative;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-left: 8px;
}

.records-list > .record-item:hover,
.records-list > .record-item:focus-within {
  position: relative;
  z-index: 80;
}

.record-insert-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;
  padding: 0;
  border: 1px solid #34434b;
  border-radius: 6px;
  background: #111a20;
  color: #91a4ac;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.record-insert-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.record-insert-icon:hover,
.record-insert-icon:focus-visible,
.record-insert-icon.is-confirmed {
  z-index: 100;
  outline: none;
  border-color: rgba(79, 213, 189, .58);
  background: #15302f;
  color: #6fe1cc;
}

.record-insert-icon:active {
  transform: translateY(1px);
}

.record-insert-icon:disabled {
  cursor: default;
  opacity: .45;
}

/* Media actions stay subdued until generation has completed. */
.records-list > .record-item:not(.is-complete) .record-insert-icon,
.records-list > .record-item:not(.is-complete) .record-insert-icon:hover,
.records-list > .record-item:not(.is-complete) .record-insert-icon:focus-visible {
  border-color: rgba(126, 151, 160, .16) !important;
  background: #111c22 !important;
  color: rgba(164, 182, 188, .50) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none;
}

.records-list > .record-item.is-complete .record-insert-icon {
  border-color: #3a4a52;
  background: #151f25;
  color: #d7e1df;
  opacity: 1;
}

.records-list > .record-item.is-complete .record-insert-icon:hover,
.records-list > .record-item.is-complete .record-insert-icon:focus-visible,
.records-list > .record-item.is-complete .record-insert-icon.is-confirmed {
  border-color: rgba(79, 213, 189, .46);
  background: #19282c;
  color: #ffffff;
}

.records-list > .record-item.is-complete[data-record-type="video"] .record-insert-icon,
.records-list > .record-item.is-complete[data-record-type="beautify"] .record-insert-icon {
  border-color: rgba(79, 213, 189, .52);
  background: rgba(79, 213, 189, .12);
  color: var(--accent);
}

.records-list > .record-item.is-complete[data-record-type="video"] .record-insert-icon:hover,
.records-list > .record-item.is-complete[data-record-type="video"] .record-insert-icon:focus-visible,
.records-list > .record-item.is-complete[data-record-type="video"] .record-insert-icon.is-confirmed,
.records-list > .record-item.is-complete[data-record-type="beautify"] .record-insert-icon:hover,
.records-list > .record-item.is-complete[data-record-type="beautify"] .record-insert-icon:focus-visible,
.records-list > .record-item.is-complete[data-record-type="beautify"] .record-insert-icon.is-confirmed {
  border-color: rgba(79, 213, 189, .74);
  background: rgba(79, 213, 189, .18);
  color: var(--accent);
}

.record-insert-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  bottom: auto;
  z-index: 120;
  width: max-content;
  max-width: 170px;
  padding: 6px 8px;
  border: 1px solid #3a4c54;
  border-radius: 5px;
  background: #101d23;
  color: #e7efed;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease;
}

.record-insert-icon:hover::after,
.record-insert-icon:focus-visible::after,
.record-insert-icon.is-confirmed::after {
  opacity: 1 !important;
  transform: translateY(0);
}

/* 已关联的角色/场景/道具只保留按钮状态，不再常驻显示下方说明。 */
.record-add-asset-icon.is-confirmed::after {
  display: none !important;
}

.record-download.is-success,
.record-download-icon.is-success {
  border-color: #4fd5bd;
  background: #4fd5bd;
  color: #061411;
}

.record-download.is-error,
.record-download-icon.is-error {
  border-color: #8c5454;
  background: #2b1b1d;
  color: #f1c7c7;
}

@media (max-width: 520px) {
  .record-insert-actions {
    gap: 4px;
    padding-left: 4px;
  }

  .record-insert-icon {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
  }
}

/* Keep the dialogue date and filters on one stable row at every panel width. */
.dialogue-record-top {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
}

.dialogue-record-top h2 {
  grid-column: 1;
  min-width: max-content;
  white-space: nowrap;
}

.dialogue-record-tools {
  grid-column: 2;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

.dialogue-record-tools > button {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Generated-record footer: time left, edit action right, progress fills between. */
.records-list > .record-item .record-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: max-content minmax(48px, 1fr) max-content;
  align-items: center;
}

.records-list > .record-item .record-generated-time {
  grid-column: 1;
  justify-self: start;
  text-align: left;
}

.records-list > .record-item .record-progress {
  grid-column: 2;
  width: 100% !important;
  max-width: none !important;
}

.records-list > .record-item .record-edit {
  grid-column: 3;
  justify-self: end;
  margin-left: auto;
}

/* Asset library: slightly soften every structural and interactive border. */
#assetLibraryModal .asset-library-panel {
  border-color: rgba(126, 151, 160, .20) !important;
  border-radius: 6px !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .018) !important;
}

#assetLibraryModal .asset-library-head {
  border-bottom-color: rgba(126, 151, 160, .14) !important;
}

#assetLibraryModal .asset-project-list {
  border-right-color: rgba(126, 151, 160, .08) !important;
  background:
    linear-gradient(180deg, rgba(128, 157, 158, .02), transparent 34%),
    #121b20 !important;
}

#assetLibraryModal .asset-project {
  border-color: rgba(126, 151, 160, .10) !important;
  background: rgba(20, 33, 40, .82) !important;
  font-size: 15px !important;
  white-space: nowrap;
}

#assetLibraryModal .asset-project:hover {
  border-color: rgba(126, 151, 160, .16) !important;
  background: #17262d !important;
}

#assetLibraryModal .asset-project.is-active {
  border-color: rgba(79, 213, 189, .28) !important;
  background:
    linear-gradient(90deg, rgba(79, 213, 189, .14), rgba(79, 213, 189, .045)),
    #132522 !important;
  box-shadow: inset 0 0 0 1px rgba(79, 213, 189, .025) !important;
}

@media (max-width: 760px) {
  #assetLibraryModal .asset-project {
    font-size: 14px !important;
  }
}

#assetLibraryModal .asset-gallery .asset-card {
  border-color: rgba(126, 151, 160, .09) !important;
  border-radius: 4px !important;
  background: #20292d !important;
}

#assetLibraryModal .asset-gallery .asset-card:hover {
  border-color: rgba(126, 151, 160, .15) !important;
  border-radius: 4px !important;
  background: #242e32 !important;
}

#assetLibraryModal .asset-gallery .asset-card.is-selected {
  border-color: rgba(160, 178, 184, .18) !important;
  border-radius: 4px !important;
  background: #222c30 !important;
  box-shadow: inset 0 0 0 1px rgba(215, 223, 225, .025) !important;
}

#assetLibraryModal .asset-gallery .asset-card > .asset-thumb {
  width: calc(100% + 12px) !important;
  max-width: none !important;
  margin: -6px -6px 0 !important;
  justify-self: start !important;
  border: 0 !important;
  border-radius: 2px !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#assetLibraryModal .asset-gallery .asset-card:hover > .asset-thumb,
#assetLibraryModal .asset-gallery .asset-card:focus > .asset-thumb,
#assetLibraryModal .asset-gallery .asset-card:focus-visible > .asset-thumb,
#assetLibraryModal .asset-gallery .asset-card.is-selected > .asset-thumb {
  border: 0 !important;
  border-radius: 2px !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#assetLibraryModal .asset-gallery {
  background:
    radial-gradient(circle at 50% 0%, rgba(128, 157, 158, .02), transparent 32%),
    #11191d !important;
}

#assetLibraryModal .asset-library-close,
#assetLibraryModal .asset-category-add,
#assetLibraryModal .asset-card-edit {
  border-color: rgba(126, 151, 160, .10) !important;
}

#assetLibraryModal .asset-voice-icon {
  border-color: rgba(126, 151, 160, .09) !important;
}

#assetLibraryModal .asset-card-name {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#assetLibraryModal .asset-card-label {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#assetLibraryModal .asset-card-label.is-inline-editing {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

#assetLibraryModal .asset-card-name > .asset-voice-icon {
  flex: 0 0 27px !important;
  position: relative;
  z-index: 2;
}

#assetLibraryModal .asset-library-close:hover,
#assetLibraryModal .asset-category-add:hover,
#assetLibraryModal .asset-card-edit:hover,
#assetLibraryModal .asset-card-edit:focus-visible {
  border-color: rgba(160, 178, 184, .18) !important;
}

#assetLibraryModal .asset-voice-icon:hover,
#assetLibraryModal .asset-voice-icon.has-voice {
  border-color: rgba(79, 213, 189, .20) !important;
}

#assetLibraryModal .asset-card:focus,
#assetLibraryModal .asset-card:focus-visible {
  outline-color: rgba(207, 216, 219, .12) !important;
}

#assetLibraryModal .asset-category h3::after {
  background: linear-gradient(90deg, rgba(79, 213, 189, .09), transparent);
}

/* Storyboard duration badge: neutral, low-contrast framing. */
.records-list.is-storyboard-list .storyboard-shot-head > em {
  border-color: rgba(174, 188, 194, .14) !important;
  box-shadow: none !important;
}

.records-list.is-storyboard-list .storyboard-shot-head > em:hover,
.records-list.is-storyboard-list .storyboard-shot-head > em:focus-visible {
  border-color: rgba(174, 188, 194, .24) !important;
  outline: none !important;
}

/* Project picker covers: quieter image borders, including shared projects. */
#projectModal.project-modal {
  align-items: center !important;
  padding: 4dvh 28px !important;
}

#projectModal .project-panel {
  width: min(640px, calc(100vw - 56px)) !important;
  height: 92dvh !important;
  min-height: 92dvh !important;
  max-height: 92dvh !important;
  border-radius: 0 !important;
}

@media (max-width: 560px) {
  #projectModal.project-modal {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  #projectModal .project-panel {
    width: calc(100vw - 36px) !important;
  }
}

#projectModal .project-list {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  scrollbar-width: thin;
  scrollbar-color: #35464d #0a0f13;
}

#projectModal .project-list::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

#projectModal .project-list::-webkit-scrollbar-track {
  background: #0a0f13 !important;
}

#projectModal .project-list::-webkit-scrollbar-thumb {
  min-height: 36px;
  border-radius: 999px;
  background: #35464d !important;
}

#projectModal .project-item {
  padding: 3px 3px 6px !important;
  border-width: 1px !important;
  border-color: rgba(181, 198, 201, .09) !important;
  background: #182329 !important;
  box-shadow: none !important;
}

#projectModal .project-item:hover {
  transform: none !important;
  border-width: 1px !important;
  border-color: rgba(181, 198, 201, .13) !important;
  background: #1c2930 !important;
  box-shadow: none !important;
}

#projectModal .project-item.is-active {
  border-width: 1px !important;
  border-color: rgba(79, 213, 189, .24) !important;
  background: #1c2d2d !important;
  box-shadow: none !important;
}

#projectModal .project-thumb {
  border: 0 !important;
  border-radius: 2px !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#projectModal .project-item:hover .project-thumb,
#projectModal .project-item.is-active .project-thumb {
  border: 0 !important;
  border-radius: 2px !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#projectModal .project-item.is-shared,
#projectModal .project-item.is-shared:hover,
#projectModal .project-item.is-shared.is-active {
  border-width: 1px !important;
  border-color: rgba(112, 151, 196, .16) !important;
  background: #1b2731 !important;
  box-shadow: none !important;
}

#projectModal .project-item.is-shared .project-thumb,
#projectModal .project-item.is-shared:hover .project-thumb,
#projectModal .project-item.is-shared.is-active .project-thumb {
  border: 0 !important;
  border-radius: 2px !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Dialogue media and the two-image result case use compact, quiet frames. */
.records-modal.is-dialogue-view .dialogue-result-media,
.records-modal.is-dialogue-view .dialogue-result-media[data-record-type].is-media-selected,
.records-modal.is-dialogue-view .dialogue-image-choice-case {
  border-color: rgba(126, 151, 160, .10) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Full voice library dialog opened from a role card. */
.asset-voice-popover {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1600 !important;
  width: auto !important;
  padding: 20px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(4, 6, 7, .78) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
}

.asset-voice-dialog {
  width: min(700px, calc(100vw - 32px));
  max-height: min(600px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid rgba(128, 160, 166, .18);
  border-radius: 7px;
  background: #181d20;
  color: #edf4f4;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .48), 0 0 44px rgba(58, 214, 190, .06);
}

.asset-voice-dialog-head {
  min-height: 72px;
  padding: 14px 16px 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(128, 160, 166, .12);
  background: #1c2225;
}

.asset-voice-dialog-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.asset-voice-dialog-head span {
  color: #56d7c2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.asset-voice-dialog-head h3 {
  margin: 0;
  color: #f1f6f6;
  font-size: 20px;
}

.asset-voice-popover .asset-voice-close {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  border: 1px solid rgba(150, 174, 179, .16);
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
  color: #c8d5d7;
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.asset-voice-dialog-body {
  min-height: 398px;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
}

.asset-voice-current {
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(128, 160, 166, .10);
  background: #1b2124;
  text-align: center;
}

.asset-voice-current-kicker {
  align-self: flex-start;
  color: #71878c;
  font-size: 10px;
  font-weight: 800;
}

.asset-voice-role-avatar {
  width: 66px;
  height: 66px;
  margin: 20px 0 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(82, 210, 190, .20);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, rgba(102, 157, 149, .22), rgba(42, 53, 55, .68) 52%, #202629 72%);
  color: #77e4d2;
  font-size: 21px;
  font-weight: 900;
}

.asset-voice-current > strong {
  color: #edf4f4;
  font-size: 15px;
}

.asset-voice-current > p {
  margin: 24px 0 7px;
  color: #6f858a;
  font-size: 10px;
}

.asset-voice-current-value {
  width: 100%;
  min-height: 34px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(128, 160, 166, .10);
  border-radius: 4px;
  background: rgba(5, 7, 8, .30);
  color: #bcd0d2;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.asset-voice-popover .asset-voice-upload {
  width: 100%;
  min-height: 38px;
  margin-top: 14px;
  padding: 0 10px;
  justify-content: center;
  border-color: rgba(79, 211, 190, .30);
  border-radius: 4px;
  background: rgba(55, 190, 170, .08);
  color: #5bdac6;
  font-size: 12px;
}

.asset-voice-current > small {
  margin-top: 9px;
  color: #5e7277;
  font-size: 9px;
  line-height: 1.5;
}

.asset-voice-library {
  min-width: 0;
  padding: 20px;
  overflow: auto;
  background: #181d20;
}

.asset-voice-library-head {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

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

.asset-voice-library-head span {
  color: #edf4f4;
  font-size: 16px;
  font-weight: 900;
}

.asset-voice-library-head small,
.asset-voice-library-head b {
  color: #70858a;
  font-size: 10px;
  font-weight: 700;
}

.asset-voice-library-head b {
  padding: 5px 8px;
  border: 1px solid rgba(128, 160, 166, .12);
  border-radius: 3px;
  background: rgba(255, 255, 255, .025);
}

.asset-voice-filters {
  margin: -2px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.asset-voice-popover .asset-voice-filters button {
  min-width: 46px;
  min-height: 28px;
  padding: 0 11px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(132, 155, 160, .12);
  border-radius: 999px;
  background: #202629;
  color: #83969a;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.asset-voice-popover .asset-voice-filters button:hover {
  border-color: rgba(79, 211, 190, .28);
  color: #72d8c7;
}

.asset-voice-popover .asset-voice-filters button.is-active {
  border-color: rgba(79, 211, 190, .34);
  background: rgba(63, 170, 153, .13);
  color: #69ddca;
}

.asset-voice-library-list {
  display: grid;
  gap: 8px;
}

.asset-voice-option[hidden] {
  display: none !important;
}

.asset-voice-option {
  min-height: 60px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px 52px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(133, 160, 166, .10);
  border-radius: 4px;
  background: #202629;
}

.asset-voice-option.is-selected {
  border-color: rgba(74, 211, 190, .32);
  background: #222a28;
}

.asset-voice-option-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(75, 200, 182, .10);
  color: #59d7c3;
  font-size: 11px;
  font-weight: 900;
}

.asset-voice-option-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.asset-voice-option-copy strong {
  color: #dbe6e7;
  font-size: 12px;
}

.asset-voice-option-copy small {
  color: #70858a;
  font-size: 9px;
}

.asset-voice-popover .asset-voice-preview,
.asset-voice-popover .asset-voice-use {
  min-height: 32px;
  padding: 0;
  justify-content: center;
  border: 1px solid rgba(126, 154, 160, .14);
  border-radius: 4px;
  background: rgba(255, 255, 255, .025);
  color: #9bb0b3;
  font-size: 10px;
}

.asset-voice-popover .asset-voice-preview {
  width: 32px;
  border-radius: 50%;
}

.asset-voice-popover .asset-voice-preview.is-playing,
.asset-voice-popover .asset-voice-preview:hover {
  border-color: rgba(79, 211, 190, .36);
  color: #56d7c2;
}

.asset-voice-popover .asset-voice-use {
  width: 50px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-color: rgba(79, 211, 190, .25);
  color: #56d7c2;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.asset-voice-popover .asset-voice-use:hover,
.asset-voice-popover .asset-voice-upload:hover,
.asset-voice-popover .asset-voice-close:hover {
  border-color: rgba(79, 211, 190, .52);
  color: #77e4d2;
}

@media (max-width: 600px) {
  .asset-voice-dialog-body {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .asset-voice-current,
  .asset-voice-library {
    padding: 16px 12px;
  }
}

@media (max-width: 470px) {
  .asset-voice-popover {
    padding: 10px !important;
  }

  .asset-voice-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }

  .asset-voice-dialog-body {
    grid-template-columns: 1fr;
  }

  .asset-voice-current {
    border-right: 0;
    border-bottom: 1px solid rgba(128, 160, 166, .10);
  }

  .asset-voice-role-avatar {
    margin-top: 10px;
  }
}

/* Compact, quiet local-edit marker popover in the fullscreen shot editor. */
.shot-point-box {
  left: 32px !important;
  width: min(224px, calc(100vw - 76px)) !important;
  gap: 6px !important;
  padding: 8px !important;
  border-color: rgba(132, 157, 162, .16) !important;
  border-radius: 7px !important;
  background: rgba(18, 26, 29, .96) !important;
  box-shadow: 0 13px 36px rgba(0, 0, 0, .42) !important;
}

.shot-point-editor.is-right-edge .shot-point-box {
  right: 32px !important;
}

.shot-point-box textarea,
.shot-point-box textarea:focus,
.shot-point-box textarea:focus-visible {
  min-height: 54px !important;
  height: 54px !important;
  padding: 7px 8px !important;
  border-color: rgba(137, 158, 163, .14) !important;
  border-radius: 5px !important;
  background: #171f23 !important;
  color: #dce5e6 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  outline: none !important;
  box-shadow: none !important;
}

.shot-point-box textarea:focus,
.shot-point-box textarea:focus-visible {
  border-color: rgba(137, 158, 163, .22) !important;
}

.shot-point-box > div {
  gap: 6px !important;
}

.shot-point-box button,
html body .shot-point-box .shot-point-regenerate {
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 9px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

.shot-point-box .shot-point-cancel {
  border-color: rgba(137, 158, 163, .14) !important;
  background: #192226 !important;
}

/* Lower-saturation surface for the storyboard prompt editor. */
.storyboard-inline-editor {
  border-color: rgba(172, 181, 183, .15) !important;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 0%, rgba(65, 139, 128, .075), transparent 34%),
    linear-gradient(180deg, rgba(31, 38, 39, .98), rgba(18, 24, 25, .99)) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .62),
    0 0 0 9999px rgba(0, 0, 0, .42) !important;
}

.storyboard-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  pointer-events: none;
  background: rgba(6, 10, 11, .08);
  -webkit-backdrop-filter: blur(3px) saturate(.95);
  backdrop-filter: blur(3px) saturate(.95);
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick {
  border-color: rgba(174, 184, 186, .13) !important;
  background: #252b2e !important;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-pick.is-active {
  background: rgba(62, 135, 124, .14) !important;
}

.storyboard-inline-editor .storyboard-editor-close,
.storyboard-inline-editor .storyboard-upload-trigger,
.storyboard-inline-editor .storyboard-generation-mode,
.storyboard-inline-editor .storyboard-skill-trigger {
  background: #252b2e !important;
}

/* Keep every control in the storyboard generation toolbar on one baseline. */
html body .storyboard-inline-editor > .storyboard-editor-tools {
  align-items: center !important;
}

html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-upload-wrap,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-generation-wrap,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-model-wrap,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-skill-wrap {
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  align-self: center !important;
}

html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-upload-trigger,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-generation-mode,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-model-select,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-skill-trigger,
html body .storyboard-inline-editor > .storyboard-editor-tools .storyboard-generate-btn {
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  align-self: center !important;
  line-height: 1 !important;
}

/* Storyboard thumbnails use edge-to-edge rectangular artwork. */
html body .storyboard-card .storyboard-shot-thumb {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.storyboard-inline-editor .storyboard-edit-prompt,
.storyboard-inline-editor .storyboard-edit-prompt:focus {
  border-color: rgba(172, 181, 183, .13) !important;
  background: #171c1f !important;
}

.storyboard-inline-editor .storyboard-edit-prompt:focus {
  border-color: rgba(103, 160, 151, .24) !important;
}

/* Quieter geometry for the fullscreen shot canvas and its local edit popover. */
.shot-fullscreen-image {
  border-color: rgba(126, 151, 150, .16) !important;
  border-radius: 6px !important;
}

.shot-point-box {
  border-color: rgba(135, 151, 154, .10) !important;
  box-shadow: 0 13px 36px rgba(0, 0, 0, .34) !important;
}

.shot-point-box textarea,
.shot-point-box textarea:focus,
.shot-point-box textarea:focus-visible {
  border-color: rgba(137, 151, 154, .10) !important;
}

.shot-point-box button,
.shot-point-box .shot-point-cancel {
  border-color: rgba(137, 151, 154, .10) !important;
}

/* Keep the fullscreen editing instruction readable at compact widths. */
.shot-fullscreen-hint {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Slightly desaturate plugin background surfaces without altering content or media. */
:root {
  --bg: #111416;
  --panel: #1b1f21;
  --panel-2: #252a2c;
  --creative-panel: #1b1f21;
  --creative-panel-2: #252a2c;
}

html,
body,
.app-shell {
  background: #111416 !important;
}

.records-modal,
.records-list,
.records-list-modal,
.dialogue-record-page,
.dialogue-record-main,
.dialogue-record-top {
  background: #111618 !important;
}

.records-filters {
  background: #151a1c !important;
}

.record-filter:hover,
.record-filter.is-active,
.records-sub-filters,
.dialogue-record-tools {
  background: #171d1f !important;
}

.dialogue-bottom-input,
.dialogue-result-media,
.dialogue-image-choice-case {
  background: #171d20 !important;
}

.records-list.is-media-record-list > .record-item,
.records-list.is-media-record-list > .record-item[data-record-type="video"],
.records-list.is-media-record-list > .record-item[data-record-type="beautify"] {
  background: linear-gradient(135deg, #1b2022 0%, #171b1d 100%) !important;
}

.records-list.is-media-record-list > .record-item:hover {
  background: linear-gradient(135deg, #1e2426 0%, #1a1f21 100%) !important;
}

.records-list.is-storyboard-list .storyboard-board {
  background: linear-gradient(180deg, #1a2022 0%, #151a1c 42%, #111517 100%) !important;
}

.records-list.is-storyboard-list .storyboard-column-head {
  background: linear-gradient(180deg, #1d2325 0%, #181d1f 62%, #131719 100%) !important;
}

.records-list.is-storyboard-list .storyboard-card,
.records-list.is-storyboard-list .storyboard-card:nth-of-type(even) {
  background: linear-gradient(180deg, #181e20 0%, #14191b 54%, #101416 100%) !important;
}

.records-list.is-storyboard-list .storyboard-card:hover,
.records-list.is-storyboard-list .storyboard-card.is-editing {
  background: linear-gradient(180deg, #1c2224 0%, #171c1e 56%, #121719 100%) !important;
}

#assetLibraryModal .asset-library-panel,
#assetLibraryModal .asset-library-head,
#assetLibraryModal .asset-project-list,
#assetLibraryModal .asset-gallery {
  background: #141a1c !important;
}

#assetLibraryModal .asset-project,
#assetLibraryModal .asset-gallery .asset-card,
#assetLibraryModal .asset-gallery .asset-card:hover,
#assetLibraryModal .asset-gallery .asset-card.is-selected {
  background: #202628 !important;
}

#projectModal .project-panel,
#projectModal .project-panel-head,
#projectModal .project-list {
  background: #13191b !important;
}

#projectModal .project-item {
  background: #1c2325 !important;
}

.asset-voice-dialog,
.asset-voice-current,
.asset-voice-library {
  background: #171c1e !important;
}

.asset-voice-option,
.asset-voice-option.is-selected {
  background: #202628 !important;
}

/* Fullscreen shot markers: one explicitly toggled editor at a time. */
.shot-point-editor.is-closed .shot-point-box,
.shot-point-editor.is-saved .shot-point-box {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(4px) scale(.98) !important;
}

/* Queue local shot changes, then submit them together from the bottom composer. */
.shot-change-queue {
  box-sizing: border-box;
  position: absolute;
  top: auto;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 8px;
  max-height: 172px;
  overflow: hidden;
  border: 1px solid rgba(119, 145, 143, .12);
  border-radius: 5px;
  background: rgba(20, 27, 29, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transform: none;
}

.shot-change-queue.hidden {
  display: none !important;
}

.shot-change-queue > strong {
  flex: 0 0 auto;
  color: #7f9593;
  font-size: 10px;
  font-weight: 760;
}

.shot-change-queue > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  max-height: 131px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(105, 132, 135, .68) transparent;
}

.shot-change-queue > div::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.shot-change-queue > div::-webkit-scrollbar-track {
  background: transparent;
}

.shot-change-queue > div::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(105, 132, 135, .68);
}

.shot-change-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: stretch;
  gap: 5px;
}

.shot-change-queue .shot-change-item-main {
  width: 100%;
  min-width: 0;
  min-height: 29px;
  max-width: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px 0 4px;
  border-color: rgba(128, 154, 154, .09);
  border-radius: 4px;
  background: #202829;
  color: #e5efed;
}

.shot-change-queue .shot-change-item-main b {
  flex: 0 0 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 213, 189, .14);
  color: #68d8c6;
  font-size: 9px;
}

.shot-change-queue .shot-change-item-main span {
  min-width: 0;
  overflow: hidden;
  color: #e5efed;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shot-change-queue .shot-change-delete {
  width: 28px;
  min-width: 28px;
  min-height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(79, 213, 189, .2);
  border-radius: 4px;
  background: #202829;
  color: #96aaa7;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.shot-change-item.is-selected .shot-change-item-main {
  border-color: rgba(79, 213, 189, .24);
  background: #24302f;
}

.shot-change-item.is-selected .shot-change-delete {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.shot-change-item.is-selected .shot-change-delete:hover {
  border-color: rgba(79, 213, 189, .72);
  color: #d8f5ef;
}

.shot-point-box {
  grid-template-columns: minmax(0, 1fr) 30px !important;
  align-items: stretch !important;
}

.shot-point-box textarea,
.shot-point-box textarea:focus,
.shot-point-box textarea:focus-visible {
  grid-column: 1 !important;
}

html body .shot-point-box .shot-point-regenerate {
  grid-column: 2 !important;
  width: 30px !important;
  height: auto !important;
  min-height: 54px !important;
  padding: 0 !important;
  border-radius: 5px !important;
  color: #071713 !important;
  font-size: 17px !important;
}

.shot-point-editor.has-empty-error .shot-point-box textarea {
  border-color: rgba(255, 120, 126, .48) !important;
}

.shot-point-editor.is-queued .shot-point-dot {
  box-shadow: 0 0 0 3px rgba(79, 213, 189, .22), 0 6px 18px rgba(0, 0, 0, .42) !important;
}

/* Lower-saturation background surfaces for the fullscreen shot editor only. */
#shotFullscreenEditor.shot-fullscreen-editor {
  background:
    radial-gradient(circle at 50% -10%, rgba(122, 142, 139, .07), transparent 34%),
    linear-gradient(180deg, #101617 0%, #0b1012 58%, #090d0f 100%) !important;
}

#shotFullscreenEditor .shot-fullscreen-image {
  border-radius: 3px !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(218, 210, 169, .64), transparent 9%),
    radial-gradient(circle at 43% 62%, rgba(177, 187, 182, .12), transparent 25%),
    linear-gradient(145deg, #1b2523 0%, #2c3531 55%, #182023 100%) !important;
}

#shotFullscreenEditor .shot-fullscreen-hint {
  background: rgba(20, 26, 28, .82) !important;
}

#shotFullscreenEditor .shot-fullscreen-composer,
#shotFullscreenEditor .shot-point-box,
#shotFullscreenEditor .shot-change-queue {
  background: rgba(23, 29, 31, .97) !important;
}

/* Edge-to-edge, square media cards in storyboard role/scene/prop pickers. */
.storyboard-inline-editor .storyboard-assets .storyboard-asset {
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.storyboard-inline-editor .storyboard-assets .storyboard-asset-thumb,
.storyboard-inline-editor .storyboard-assets .storyboard-asset img,
.storyboard-inline-editor .storyboard-assets .storyboard-asset-preview,
.storyboard-inline-editor .storyboard-assets .storyboard-asset > [class*="thumb"] {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.storyboard-inline-editor .storyboard-assets .storyboard-asset-name {
  box-sizing: border-box;
  padding: 8px 7px !important;
}

/* Match the shot-size label color to the dialogue field label. */
.storyboard-card .storyboard-shot-label > span {
  color: #6f9e99 !important;
}

/* Keep camera-motion descriptions compact beneath each storyboard thumbnail. */
.storyboard-card .storyboard-motion .storyboard-meta-line > strong {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.shot-point-editor.is-closed:hover .shot-point-box,
.shot-point-editor.is-saved:hover .shot-point-box {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(4px) scale(.98) !important;
}

/* Slimmer local-edit input with a wider confirmation target. */
.shot-point-box {
  grid-template-columns: minmax(0, 1fr) 44px !important;
  gap: 5px !important;
  padding: 7px !important;
}

.shot-point-box textarea,
.shot-point-box textarea:focus,
.shot-point-box textarea:focus-visible {
  min-height: 44px !important;
  height: 44px !important;
  padding: 6px 8px !important;
}

html body .shot-point-box .shot-point-regenerate {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 2px !important;
}

/* The image, video and beautify record editors share the storyboard annotation surface. */
.is-record-media-editor .shot-fullscreen-image {
  overflow: hidden;
}

.is-record-media-editor .shot-record-media-frame {
  position: relative;
  width: min(914px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.is-record-media-editor .shot-record-media-frame .shot-fullscreen-image {
  width: 100% !important;
  height: clamp(240px, 47vh, 460px);
  min-height: 0 !important;
  aspect-ratio: auto;
  flex: 0 1 auto;
}

.is-record-media-editor .shot-record-media-caption {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 12px 18px 2px;
  text-align: left;
}

.is-record-media-editor .shot-record-media-caption-copy {
  min-width: 0;
}

.is-record-media-editor .shot-record-media-caption span,
.is-record-media-editor .shot-record-media-caption p {
  display: block;
  margin: 0;
}

.is-record-media-editor .shot-record-media-caption span {
  color: #f4faf8;
  font-size: 14px;
  font-weight: 900;
}

.is-record-media-editor .shot-record-media-caption p {
  margin-top: 6px;
  color: rgba(244, 250, 248, .74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.is-record-media-editor .shot-fullscreen-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.is-record-media-editor .shot-fullscreen-media-placeholder {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 1;
  transform: translate(-50%, -50%);
  color: rgba(214, 230, 228, .50);
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
}

/* 图片、视频和分镜修改页：鼠标进入媒体区域后才显示独立窗口入口。 */
#shotFullscreenEditor .shot-media-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  min-width: 62px;
  height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(126, 231, 211, .48);
  border-radius: 7px;
  background: rgba(8, 18, 20, .82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .34);
  color: #e9fffa;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease, background-color .16s ease;
}

#shotFullscreenEditor .shot-fullscreen-image:hover > .shot-media-expand,
#shotFullscreenEditor .shot-media-expand:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#shotFullscreenEditor .shot-media-expand:hover,
#shotFullscreenEditor .shot-media-expand:focus-visible {
  background: rgba(21, 74, 66, .94);
  border-color: #58d9c1;
  outline: none;
}

.is-record-media-editor .shot-point-editor {
  z-index: 2;
}

@media (min-height: 860px) and (min-width: 1000px) {
  .is-record-media-editor .shot-record-media-frame {
    width: min(1080px, 100%);
  }
}

@media (max-height: 760px) {
  .is-record-media-editor .shot-record-media-frame .shot-fullscreen-image {
    height: clamp(210px, 43vh, 340px);
  }

  .is-record-media-editor .shot-record-media-caption {
    min-height: 50px;
    padding-top: 8px;
  }
}

/* Brush annotation layer for image, video and beautify fullscreen editors. */
.is-record-media-editor .shot-drawing-canvas {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.is-record-media-editor.is-brush-mode .shot-drawing-canvas {
  pointer-events: auto;
  cursor: crosshair;
}

.is-record-media-editor .shot-point-editor {
  z-index: 8;
}

.shot-record-media-brush-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding-bottom: 1px;
}

.shot-record-media-brush-actions .shot-brush-toggle,
.shot-record-media-brush-actions .shot-brush-clear {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid #33434a;
  border-radius: 7px;
  background: #111b20;
  color: #cbd6d8;
  font-size: 11px;
  font-weight: 750;
}

.shot-record-media-brush-actions .shot-brush-toggle span {
  font-size: 15px;
  line-height: 1;
}

.shot-record-media-brush-actions .shot-brush-clear[hidden] {
  display: none !important;
}

.shot-record-media-brush-actions .shot-brush-toggle.is-active,
.shot-record-media-brush-actions .shot-brush-toggle[aria-pressed="true"] {
  border-color: rgba(87, 226, 202, .72) !important;
  background: rgba(87, 226, 202, .15) !important;
  color: #68e4cf !important;
  box-shadow: inset 0 0 0 1px rgba(87, 226, 202, .08);
}

.shot-record-media-brush-actions .shot-brush-clear:disabled {
  opacity: .38;
  cursor: default;
}

.shot-record-media-brush-actions button:not(:disabled):hover {
  border-color: #4c626a;
  color: #eef5f4;
}

@media (max-width: 680px) {
  .is-record-media-editor .shot-record-media-caption {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .shot-record-media-brush-actions {
    justify-content: flex-end;
  }
}

.is-record-media-editor.is-brush-mode .shot-fullscreen-image {
  box-shadow: inset 0 0 0 1px rgba(87, 226, 202, .34), 0 18px 55px rgba(0, 0, 0, .32) !important;
}

/* Storyboard image/video drawing tools live directly below the preview. */
.shot-storyboard-media-frame {
  position: relative;
  width: min(914px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
}

.shot-storyboard-media-frame .shot-fullscreen-image {
  width: 100% !important;
  min-height: 0;
}

.shot-storyboard-media-caption {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 11px 2px 2px 18px;
  text-align: left;
}

.shot-storyboard-media-caption-copy {
  min-width: 0;
}

.shot-storyboard-media-caption-copy span,
.shot-storyboard-media-caption-copy p {
  display: block;
  margin: 0;
}

.shot-storyboard-media-caption-copy span {
  color: #f4faf8;
  font-size: 14px;
  font-weight: 900;
}

.shot-storyboard-media-caption-copy p {
  margin-top: 5px;
  color: rgba(244, 250, 248, .74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.shot-storyboard-brush-actions {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0;
}

.shot-storyboard-media-frame .shot-drawing-canvas {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.shot-fullscreen-editor.is-brush-mode .shot-storyboard-media-frame .shot-drawing-canvas {
  pointer-events: auto;
  cursor: crosshair;
}

.shot-storyboard-media-frame .shot-point-editor {
  z-index: 8;
}

.shot-fullscreen-editor.is-brush-mode .shot-storyboard-media-frame .shot-fullscreen-image {
  box-shadow: inset 0 0 0 1px rgba(87, 226, 202, .34), 0 18px 55px rgba(0, 0, 0, .32) !important;
}

@media (min-height: 860px) and (min-width: 1000px) {
  .shot-storyboard-media-frame {
    width: min(1080px, 100%);
  }
}

/* Ultra-thin scrollbar shared by role, scene and prop asset pickers. */
.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets {
  scrollbar-width: thin;
  scrollbar-color: #34484d transparent;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets::-webkit-scrollbar-track {
  background: transparent !important;
}

.storyboard-inline-editor .storyboard-prompt-row .storyboard-assets::-webkit-scrollbar-thumb {
  min-height: 28px;
  border: 0 !important;
  border-radius: 999px;
  background: #34484d !important;
}

/* Project covers extend through the card's horizontal inset; the card frame and title spacing stay unchanged. */
html body #projectModal .project-item .project-thumb {
  width: calc(100% + 6px) !important;
  max-width: none !important;
  margin-left: -3px !important;
  margin-right: -3px !important;
}

/* Give two-column asset cards a little more horizontal room without changing the library dialog. */
html body #assetLibraryModal .asset-gallery {
  padding-right: 22px !important;
  padding-left: 22px !important;
}

html body #assetLibraryModal .asset-card-grid {
  gap: 12px !important;
}

@media (max-width: 760px) {
  html body #assetLibraryModal .asset-gallery {
    padding-right: 13px !important;
    padding-left: 13px !important;
  }

  html body #assetLibraryModal .asset-card-grid {
    gap: 8px !important;
  }
}

/* Compact the generation-type and model selectors while preserving their shared height and alignment. */
html body .storyboard-inline-editor > .storyboard-editor-tools {
  grid-template-columns: 44px 112px 112px 88px 44px minmax(104px, 1fr) !important;
}

html body .storyboard-inline-editor .storyboard-generation-wrap,
html body .storyboard-inline-editor .storyboard-model-wrap {
  width: 112px !important;
}

html body .storyboard-inline-editor .storyboard-preference-wrap {
  position: relative;
  width: 88px !important;
  height: 42px;
  min-width: 0;
}

html body .storyboard-inline-editor .storyboard-preference-trigger {
  width: 100% !important;
  height: 42px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(111, 143, 146, .30) !important;
  border-radius: 7px !important;
  background: rgba(34, 43, 46, .92) !important;
  color: #d9e3e2 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

html body .storyboard-inline-editor .storyboard-preference-trigger:hover,
html body .storyboard-inline-editor .storyboard-preference-trigger[aria-expanded="true"] {
  border-color: rgba(77, 210, 194, .62) !important;
  background: rgba(36, 54, 54, .96) !important;
  color: #59d9ca !important;
}

html body .storyboard-inline-editor .storyboard-preference-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 18;
  display: grid;
  width: 226px;
  padding: 14px;
  gap: 10px;
  border: 1px solid rgba(91, 126, 128, .30);
  border-radius: 8px;
  background: #182124;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

html body .storyboard-inline-editor .storyboard-preference-popover.hidden {
  display: none !important;
}

html body .storyboard-inline-editor .storyboard-preference-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 2px;
}

html body .storyboard-inline-editor .storyboard-preference-head strong {
  color: #ecf4f3;
  font-size: 15px;
}

html body .storyboard-inline-editor .storyboard-preference-head span {
  color: #71888a;
  font-size: 11px;
}

html body .storyboard-inline-editor .storyboard-preference-popover > label {
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 8px;
  color: #91a6a7;
  font-size: 12px;
}

html body .storyboard-inline-editor .storyboard-preference-popover select {
  width: 100%;
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid rgba(105, 139, 141, .28);
  border-radius: 6px;
  background: #111b1f;
  color: #e5efee;
  font: inherit;
}

@media (max-width: 680px) {
  html body .storyboard-inline-editor > .storyboard-editor-tools {
    grid-template-columns: 42px 108px 108px 84px 42px minmax(92px, 1fr) !important;
  }

  html body .storyboard-inline-editor .storyboard-generation-wrap,
  html body .storyboard-inline-editor .storyboard-model-wrap {
    width: 108px !important;
  }

  html body .storyboard-inline-editor .storyboard-preference-wrap {
    width: 84px !important;
  }
}

/* Darken only the page behind the project picker; keep the panel and cards unchanged. */
html body #projectModal.project-modal {
  background: rgba(1, 4, 6, .82) !important;
  -webkit-backdrop-filter: blur(10px) brightness(.56) saturate(.72) !important;
  backdrop-filter: blur(10px) brightness(.56) saturate(.72) !important;
}

/* Give the shared fullscreen Generate action a little more room from the right edge. */
html body #shotFullscreenEditor .shot-fullscreen-composer > .shot-send {
  transform: translateX(-6px) !important;
}

/* Fullscreen storyboard/media composer: local reference uploads and @ mentions. */
html body #shotFullscreenEditor .shot-upload-wrap {
  position: relative;
  z-index: 42;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

html body #shotFullscreenEditor .shot-upload-input,
html body #shotFullscreenEditor .shot-upload-input[hidden] {
  display: none !important;
}

html body #shotFullscreenEditor .shot-upload-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 9px);
  z-index: 50;
  width: 224px;
  box-sizing: border-box;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(102, 137, 139, .32);
  border-radius: 9px;
  background: #111a1d;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .54);
}

html body #shotFullscreenEditor .shot-upload-menu.hidden {
  display: none !important;
}

html body #shotFullscreenEditor .shot-upload-menu > strong {
  padding: 1px 3px 4px;
  color: #e4eeec;
  font-size: 12px;
}

html body #shotFullscreenEditor .shot-upload-menu > button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid #304248;
  border-radius: 7px;
  background: #142126;
  color: #e5efed;
  text-align: left;
}

html body #shotFullscreenEditor .shot-upload-menu > button:hover {
  border-color: rgba(79, 213, 189, .52);
  background: rgba(79, 213, 189, .10);
}

html body #shotFullscreenEditor .shot-upload-menu > button b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(79, 213, 189, .12);
  color: var(--accent);
  font-size: 11px;
}

html body #shotFullscreenEditor .shot-upload-menu > button span,
html body #shotFullscreenEditor .shot-upload-menu > button small {
  display: block;
}

html body #shotFullscreenEditor .shot-upload-menu > button span {
  font-size: 12px;
  font-weight: 800;
}

html body #shotFullscreenEditor .shot-upload-menu > button small {
  margin-top: 3px;
  color: #75898b;
  font-size: 9px;
  font-weight: 600;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt {
  min-width: 0;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  gap: 7px;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt > textarea {
  width: 100%;
  box-sizing: border-box;
  grid-column: 1 !important;
  grid-row: auto !important;
}

html body #shotFullscreenEditor.has-shot-uploads .shot-fullscreen-composer {
  grid-template-rows: auto auto !important;
}

html body #shotFullscreenEditor .shot-upload-attachment-list {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  padding: 0 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: #34494d transparent;
}

html body #shotFullscreenEditor .shot-upload-attachment-list.hidden {
  display: none !important;
}

html body #shotFullscreenEditor .shot-upload-attachment {
  position: relative;
  width: 150px;
  min-width: 150px;
  height: 48px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 4px 22px 4px 4px;
  overflow: hidden;
  border: 1px solid #34474c;
  border-radius: 8px;
  background: #121e22;
}

html body #shotFullscreenEditor .shot-upload-attachment > img,
html body #shotFullscreenEditor .shot-upload-attachment > video {
  width: 54px;
  height: 38px;
  display: block;
  border-radius: 5px;
  background: #081012;
  object-fit: cover;
}

html body #shotFullscreenEditor .shot-upload-attachment > span,
html body #shotFullscreenEditor .shot-upload-attachment > span strong,
html body #shotFullscreenEditor .shot-upload-attachment > span small {
  min-width: 0;
  display: block;
}

html body #shotFullscreenEditor .shot-upload-attachment > span strong {
  overflow: hidden;
  color: #dce8e6;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #shotFullscreenEditor .shot-upload-attachment > span small {
  margin-top: 3px;
  color: #6f8585;
  font-size: 9px;
}

html body #shotFullscreenEditor .shot-upload-attachment > button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 10, 12, .76);
  color: #aebcbd;
  font-size: 13px;
  line-height: 18px;
}

html body #shotFullscreenEditor .shot-upload-attachment > button:hover {
  background: #713239;
  color: #fff;
}

html body #shotFullscreenEditor .shot-fullscreen-tools .shot-mention-tabs {
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 8px 8px 0;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-static-mention > span strong,
html body #shotFullscreenEditor .shot-mention-popover .shot-static-mention > span small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #shotFullscreenEditor .shot-mention-popover .shot-static-mention > span small {
  margin-top: 3px;
  color: #6f8388;
  font-size: 9px;
  font-weight: 550;
}

html body #shotFullscreenEditor .shot-fullscreen-tools .shot-upload-mention > b {
  overflow: hidden;
  border-radius: 6px;
}

html body #shotFullscreenEditor .shot-fullscreen-tools .shot-upload-mention > b img,
html body #shotFullscreenEditor .shot-fullscreen-tools .shot-upload-mention > b video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

html body #shotFullscreenEditor .shot-mention-upload-empty {
  display: grid;
  gap: 4px;
  padding: 18px 10px;
  border: 1px dashed #32464a;
  border-radius: 7px;
  text-align: center;
}

html body #shotFullscreenEditor .shot-mention-upload-empty.hidden {
  display: none !important;
}

html body #shotFullscreenEditor .shot-mention-upload-empty strong {
  color: #cdd9d8;
  font-size: 11px;
}

html body #shotFullscreenEditor .shot-mention-upload-empty span {
  color: #708486;
  font-size: 9px;
  line-height: 1.5;
}

/* 项目删除按钮放在缩略图右上角；放在文件末尾以覆盖历史样式。 */
html body .project-item {
  position: relative !important;
}

html body .project-item .project-delete {
  display: inline-flex !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 6px !important;
  background: rgba(8, 15, 19, .78) !important;
  color: #b7c2c5 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: .82;
}

html body .project-item .project-delete:hover {
  border-color: rgba(255, 143, 148, .42) !important;
  background: rgba(69, 27, 31, .92) !important;
  color: #ff9ba0 !important;
  opacity: 1;
}

html body .project-item .project-delete:disabled {
  cursor: wait;
  opacity: .45;
}

/* 项目保存、同步和删除结果提示；独立于可能处于关闭状态的账号菜单。 */
html body .project-manager-feedback {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 22000;
  max-width: calc(100vw - 40px);
  padding: 9px 14px;
  border: 1px solid rgba(79, 213, 189, .30);
  border-radius: 7px;
  background: rgba(9, 20, 24, .96);
  color: #dff7f2;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .16s ease, transform .16s ease;
}

html body .project-manager-feedback.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 对话页只保留一个主预览框；宽度铺满内容区，高度由本次选择的生成比例决定。 */
html body .records-modal.is-dialogue-view .dialogue-result-media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--xiake-generation-aspect, 1 / 1) !important;
}

/* 媒体在所选比例预览框内保持原始内容比例，完整显示且不拉伸、不裁切。 */
html body .records-modal.is-dialogue-view .dialogue-result-media > .dialogue-result-generated-image,
html body .records-modal.is-dialogue-view .dialogue-result-media > .dialogue-result-generated-video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #0b1012 !important;
}

/* 生成记录页压缩顶部工具栏与分类导航之间的空白，把更多高度留给生成结果。 */
html body.records-page-open .app-shell {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

html body.records-page-open .toolbar {
  min-height: 50px !important;
  margin-bottom: 2px !important;
  padding: 0 2px 4px !important;
}

/* 团队协作项目卡片：审批开关位于缩略图左上，团队/审批入口紧随其下。 */
html body #projectModal .project-approval-toggle,
html body #projectModal .project-team-manage {
  position: absolute !important;
  left: 12px !important;
  z-index: 5;
  min-width: 76px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(79, 213, 189, .45);
  border-radius: 5px;
  background: rgba(7, 24, 27, .88);
  color: #8fe5d5;
  font-size: 10px;
  font-weight: 750;
  line-height: 22px;
  cursor: pointer;
}

html body #projectModal .project-approval-toggle { top: 12px !important; }
html body #projectModal .project-team-manage { top: 42px !important; }
html body #projectModal .project-shared-badge { top: 82px !important; right: 12px !important; }

html body #projectModal .project-approval-toggle:hover,
html body #projectModal .project-team-manage:hover {
  border-color: #53d6c3;
  background: rgba(14, 53, 53, .94);
  color: #e1fff9;
}

html body #projectModal .project-item .project-delete[hidden] {
  display: none !important;
}

html body #projectModal .project-item input[readonly] {
  color: #b9c7ca !important;
  cursor: default;
}

html body #projectModal .project-shared-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
}

html body #projectModal .project-panel.is-searching-projects .project-list {
  height: min(360px, calc(100dvh - 390px)) !important;
  min-height: 160px !important;
}

html body #projectModal .project-shared-result,
html body #projectModal .project-shared-result-empty {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid rgba(111, 164, 228, .22);
  border-radius: 6px;
  background: rgba(7, 18, 25, .72);
}

html body #projectModal .project-shared-result-empty {
  grid-template-columns: 1fr;
  color: #7f979f;
  text-align: center;
}

html body #projectModal .project-shared-result-thumb {
  width: 40px;
  height: 36px;
  border-radius: 4px;
  background: #182a33;
}

html body #projectModal .project-shared-result-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

html body #projectModal .project-shared-result-copy strong {
  overflow: hidden;
  color: #e5eef1;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #projectModal .project-shared-result-copy small { color: #779098; font-size: 10px; }

html body #projectModal .project-shared-result button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #467ebd;
  border-radius: 5px;
  background: #245b98;
  color: #eff7ff;
  font-size: 10px;
}

html body #projectModal .project-shared-result button:disabled {
  border-color: #34454c;
  background: #17242a;
  color: #75868c;
}

/* 成员、审批、移除和创建者转让统一放在独立团队弹窗。 */
html body .project-team-modal {
  position: fixed;
  inset: 0;
  z-index: 23000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 7, 9, .78);
  backdrop-filter: blur(9px);
}

html body .project-team-panel {
  width: min(540px, calc(100vw - 30px));
  max-height: min(680px, calc(100dvh - 30px));
  overflow: hidden;
  border: 1px solid #344950;
  border-radius: 10px;
  background: #0d171c;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .48);
}

html body .project-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #26383e;
}

html body .project-team-head > div { display: grid; gap: 3px; }
html body .project-team-head small { color: #6f888e; font-size: 10px; }
html body .project-team-head strong { color: #edf5f6; font-size: 17px; }
html body .project-team-head > button {
  width: 32px; height: 32px; border: 1px solid #344950; border-radius: 6px;
  background: #101d22; color: #c5d1d3; font-size: 18px;
}

html body .project-team-content {
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 150px);
  padding: 16px 18px 18px;
  overflow-y: auto;
}

html body .project-team-section { display: grid; gap: 7px; }
html body .project-team-section h3 { margin: 0 0 2px; color: #8fe5d5; font-size: 13px; }
html body .project-team-section h3 small { color: #71878b; font-size: 10px; }
html body .project-team-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; padding: 8px 10px; border: 1px solid #293c42; border-radius: 6px;
  background: #101c21;
}
html body .project-team-row > span:first-child { display: grid; gap: 3px; }
html body .project-team-row strong { color: #e1eaec; font-size: 12px; }
html body .project-team-row small { color: #72888d; font-size: 10px; }
html body .project-team-actions { display: flex; gap: 6px; }
html body .project-team-actions button,
html body .project-team-leave {
  height: 30px; padding: 0 10px; border: 1px solid #3a5057; border-radius: 5px;
  background: #14242a; color: #bdcacc; font-size: 10px;
}
html body .project-team-actions button.is-primary { border-color: #3d9b8c; background: #1d675d; color: #eafffb; }
html body .project-team-leave { justify-self: end; border-color: #7a4549; color: #efa4aa; }
html body .project-team-empty,
html body .project-team-loading { padding: 18px; color: #71878b; text-align: center; }

html body .project-operation-notice {
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 21000;
  display: grid;
  gap: 2px;
  width: min(520px, calc(100vw - 30px));
  padding: 10px 14px;
  border: 1px solid rgba(229, 166, 81, .48);
  border-radius: 7px;
  background: rgba(52, 35, 13, .96);
  color: #f1d5aa;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transform: translateX(-50%);
}
html body .project-operation-notice strong { color: #ffe1aa; font-size: 12px; }
html body .project-operation-notice span { font-size: 10px; line-height: 1.45; }

html body.records-page-open .records-modal {
  height: calc(100vh - 68px) !important;
}

/* 输入框默认显示两行，最多扩展到四行；生成按钮回到输入框下方的工具栏右侧。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input {
  padding-right: 18px !important;
  grid-template-rows: auto auto !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input textarea {
  min-height: 60px !important;
  height: 60px !important;
  max-height: 104px !important;
  padding: 8px 6px !important;
  line-height: 22px !important;
  overflow-y: hidden !important;
  resize: none !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-tools {
  align-items: center !important;
  width: 100% !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-tools .dialogue-send {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* 输入框与窗口底部之间保持完全不透明，滚动记录不会从下方缝隙露出。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input {
  isolation: isolate;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input::after {
  content: "";
  position: absolute;
  top: 100%;
  right: -26px;
  left: -26px;
  z-index: -1;
  height: 64px;
  background: #111618;
  pointer-events: none;
}

/* 生成媒体可拖到“＋”处作为下一次生成的参考。 */
html body .dialogue-result-generated-image,
html body .dialogue-result-generated-video,
html body .record-thumb.has-generated-media {
  cursor: grab;
}

html body .is-dragging-generated-media {
  opacity: .72;
}

html.is-dragging-generated-media body .dialogue-upload-wrap .dialogue-plus {
  border-color: rgba(79, 213, 189, .72) !important;
  box-shadow: 0 0 0 3px rgba(79, 213, 189, .11) !important;
}

html body .dialogue-upload-wrap.is-generated-drop-target .dialogue-plus {
  border-color: #62dfc9 !important;
  background: #173b36 !important;
  color: #9af2e2 !important;
  transform: scale(1.08);
}

html.is-dragging-history-reference body .dialogue-bottom-input .dialogue-input-content {
  transition: border-color .12s ease, box-shadow .12s ease;
}

html body .dialogue-bottom-input.is-history-reference-drop-target .dialogue-input-content {
  border-color: #62dfc9 !important;
  box-shadow: 0 0 0 3px rgba(79, 213, 189, .16) !important;
}

/* 对话与媒体列表的失败状态统一使用清晰的红色提醒。 */
html body .dialogue-thread-entry.is-failed .dialogue-ai-result {
  border-left-color: rgba(241, 91, 100, .72) !important;
}

html body .dialogue-thread-entry.is-failed .dialogue-ai-result > p,
html body .records-list > .record-item .record-error-message {
  color: #ff686f !important;
}

/* GPT-6 对话与媒体生成使用同一输入卡片，但只显示对话相关控件和记录。 */
html body .records-list[data-dialogue-content="chat"] .dialogue-skill-btn,
html body .records-list[data-dialogue-content="chat"] .dialogue-model-preference-wrap,
html body .records-list[data-dialogue-content="chat"] .dialogue-at-btn,
html body .records-list[data-dialogue-content="chat"] #dialogueSkillsBtn {
  display: none !important;
}

html body .records-list[data-dialogue-content="chat"] #dialoguePrefBtn {
  display: inline-flex !important;
  opacity: 1 !important;
  cursor: pointer !important;
  color: #b8d8d1 !important;
}

html body .records-list[data-dialogue-content="chat"] #dialoguePrefBtn:hover:not(:disabled),
html body .records-list[data-dialogue-content="chat"] #dialoguePrefBtn:focus-visible {
  border-color: rgba(79, 213, 189, .72) !important;
  color: #d9fff7 !important;
}

html body .dialogue-ai-result.is-chat-answer > p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html body .dialogue-chat-attachment-count {
  display: block;
  margin-top: 6px;
  color: #77918e;
  font-size: 11px;
  font-weight: 650;
}

/* 对话页主滚动区和输入框统一使用低对比度黑色滚动条。 */
html body.records-page-open #recordsModal,
html body.records-page-open #recordsList,
html body .dialogue-bottom-input textarea,
html body .dialogue-attachment-list,
html body .dialogue-tool-scroll,
html body .dialogue-history-panel {
  scrollbar-width: thin !important;
  scrollbar-color: #3a4448 #101416 !important;
}

html body.records-page-open #recordsModal::-webkit-scrollbar,
html body.records-page-open #recordsList::-webkit-scrollbar,
html body .dialogue-bottom-input textarea::-webkit-scrollbar,
html body .dialogue-attachment-list::-webkit-scrollbar,
html body .dialogue-tool-scroll::-webkit-scrollbar,
html body .dialogue-history-panel::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

html body.records-page-open #recordsModal::-webkit-scrollbar-track,
html body.records-page-open #recordsList::-webkit-scrollbar-track,
html body .dialogue-bottom-input textarea::-webkit-scrollbar-track,
html body .dialogue-attachment-list::-webkit-scrollbar-track,
html body .dialogue-tool-scroll::-webkit-scrollbar-track,
html body .dialogue-history-panel::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: #101416 !important;
}

html body.records-page-open #recordsModal::-webkit-scrollbar-thumb,
html body.records-page-open #recordsList::-webkit-scrollbar-thumb,
html body .dialogue-bottom-input textarea::-webkit-scrollbar-thumb,
html body .dialogue-attachment-list::-webkit-scrollbar-thumb,
html body .dialogue-tool-scroll::-webkit-scrollbar-thumb,
html body .dialogue-history-panel::-webkit-scrollbar-thumb {
  min-height: 28px;
  border: 1px solid #171d20 !important;
  border-radius: 999px !important;
  background: #3a4448 !important;
}

html body .dialogue-bottom-input textarea::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* 生成模式按钮：箭头独立固定在左侧，模式文字始终保持单行。 */
html body .dialogue-bottom-input .dialogue-agent-btn {
  position: relative !important;
  padding-left: 28px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

html body .dialogue-bottom-input .dialogue-agent-btn::before {
  content: "⌃";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 10px;
  line-height: 1;
  text-align: center;
  transform: translateY(-44%);
  color: currentColor;
  pointer-events: none;
}

/*
 * 图片、视频生成记录中的真实媒体必须按原始宽高比缩放。
 * record-thumb 是固定尺寸的预览框；媒体使用 contain 完整显示，剩余区域由深色背景自然填充。
 */
html body .records-list.is-media-record-list .record-thumb > img,
html body .records-list.is-media-record-list .record-thumb > video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: inherit;
  background: #080e12;
}

/*
 * 即梦式参考素材区：
 * - 未选择素材时，“＋”仍停留在输入框左侧，不额外占用纵向空间；
 * - 选择素材后，文件名卡片收拢为重叠缩略图，末尾的“＋”用于继续追加；
 * - article 节点及其 _xiakeFile 保持不变，所以下方上传、生成逻辑无需感知样式变化。
 */
html body .dialogue-bottom-input .dialogue-input-content {
  position: relative !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

html body .dialogue-bottom-input .dialogue-reference-strip:not(.has-attachments) {
  height: 0;
  min-height: 0;
  overflow: visible;
}

html body .dialogue-bottom-input .dialogue-reference-strip:not(.has-attachments) .dialogue-upload-wrap {
  position: absolute !important;
  left: -50px;
  top: 11px;
  margin: 0 !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments {
  min-height: 66px;
  align-items: center;
  margin: 0 0 2px;
  padding: 3px 0 1px 3px;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-list {
  min-width: 0;
  max-width: calc(100% - 54px);
  flex: 0 1 auto;
  align-items: center;
  gap: 0;
  margin: 0 !important;
  padding: 7px 5px 7px 3px !important;
  overflow-x: auto;
  overflow-y: hidden;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 58px;
  min-width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: block;
  margin: 0 -10px 0 0;
  padding: 0;
  overflow: visible;
  border: 2px solid #263237;
  border-radius: 8px;
  background: #0b1114;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .28);
  transform: rotate(-2deg);
  transform-origin: center bottom;
  transition: margin .16s ease, transform .16s ease, border-color .16s ease;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(even) {
  transform: rotate(2deg);
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(3n) {
  transform: rotate(-.6deg);
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:hover,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:focus-within {
  z-index: 8;
  margin-right: 2px;
  border-color: #4fd5bd;
  transform: translateY(-2px) rotate(0);
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-preview {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #0b1114;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-preview img,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-preview video {
  object-fit: cover;
  object-position: center;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-copy {
  display: none;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-remove {
  position: absolute;
  z-index: 3;
  top: -7px;
  right: -7px;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid #37454a !important;
  border-radius: 50% !important;
  background: #172024 !important;
  color: #dce7e5 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .34);
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-remove:hover {
  border-color: #5d706f !important;
  background: #253135 !important;
  color: #fff !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-upload-wrap {
  position: relative !important;
  z-index: 2;
  flex: 0 0 50px;
  align-self: center !important;
  margin: 0 0 0 6px !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-plus {
  width: 50px !important;
  min-width: 50px !important;
  height: 58px !important;
  min-height: 58px !important;
  border: 1px dashed #3b4a4f !important;
  border-radius: 8px !important;
  background: #151d20 !important;
  color: #88a09f !important;
  font-size: 22px !important;
  box-shadow: none !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-plus:hover,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-plus:focus-visible {
  outline: none;
  border-color: #4fd5bd !important;
  background: #192724 !important;
  color: #69dcc7 !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-upload-menu {
  left: 0;
  bottom: calc(100% + 8px);
}

/* 媒体加载完成后按真实比例选择一个方向铺满，另一方向保持自动尺寸。 */
html body .records-list.is-media-record-list .record-thumb.has-generated-media {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html body .records-list.is-media-record-list .record-thumb > .record-media-fit-width {
  width: 100% !important;
  height: auto !important;
}

html body .records-list.is-media-record-list .record-thumb > .record-media-fit-height {
  width: auto !important;
  height: 100% !important;
}

/* 视频悬停预览：左右移动鼠标时，底部细线同步显示当前定位进度。 */
html body .records-list.is-media-record-list .record-item[data-record-type="video"] .record-thumb.has-generated-media {
  cursor: ew-resize;
}

html body .record-video-hover-progress {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  z-index: 2;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}

html body .record-video-hover-progress > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

html body .record-thumb.has-generated-media:hover .record-video-hover-progress,
html body .record-thumb.has-generated-media.is-hover-playing .record-video-hover-progress {
  opacity: 1;
}

/*
 * 参考素材布局修正：素材必须位于输入框内部左侧，而不是输入框上方。
 * 整个素材组使用绝对定位，因此展开、缩放都不会重新计算输入框高度，
 * 也不会推动输入框上边框。只有文字区域通过 padding-left 为素材预留空间。
 */
html body .dialogue-bottom-input.has-reference-attachments .dialogue-input-content {
  position: relative !important;
}

/* 空状态也脱离 grid，避免一个 0 高度节点仍产生 7px 的行间距。 */
html body .dialogue-bottom-input .dialogue-reference-strip:not(.has-attachments) {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments textarea {
  padding-left: 82px !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments {
  position: absolute !important;
  left: 6px !important;
  top: 4px !important;
  z-index: 18;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  align-items: flex-start !important;
  transform: none !important;
  pointer-events: auto;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-list {
  width: max-content !important;
  min-width: 50px !important;
  max-width: none !important;
  height: 52px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-list::-webkit-scrollbar {
  display: none !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment {
  position: relative !important;
  box-sizing: border-box !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 52px !important;
  min-height: 52px !important;
  flex: 0 0 50px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid #334044 !important;
  border-radius: 7px !important;
  background: #0b1114 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3) !important;
  transform: rotate(-3deg) !important;
  transform-origin: center center !important;
  transition: margin-left .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment + .dialogue-attachment {
  margin-left: -42px !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(1) {
  z-index: 6;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(2) {
  z-index: 5;
  transform: rotate(2.5deg) !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(3) {
  z-index: 4;
  transform: rotate(-1deg) !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(n+4) {
  z-index: 3;
  transform: rotate(1.5deg) !important;
}

/* 鼠标进入素材组后只改变横向间距，绝不改变高度或 top。 */
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments:hover .dialogue-attachment + .dialogue-attachment,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments:focus-within .dialogue-attachment + .dialogue-attachment {
  margin-left: 5px !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments:hover .dialogue-attachment,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments:focus-within .dialogue-attachment {
  transform: rotate(0) !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:hover,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:focus-within {
  z-index: 30 !important;
  margin-right: 0 !important;
  border-color: #4fd5bd !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .38) !important;
  transform: scale(1.05) rotate(0) !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-preview {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-remove {
  top: -3px !important;
  right: -3px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  font-size: 11px !important;
  line-height: 14px !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, background .14s ease !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:hover .dialogue-attachment-remove,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:focus-within .dialogue-attachment-remove {
  opacity: 1;
  pointer-events: auto;
}

/* “＋”叠在缩略图组右下角，并随横向展开自然向右移动。 */
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-upload-wrap {
  position: relative !important;
  z-index: 24;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  align-self: flex-end !important;
  margin: 0 0 -3px -11px !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-plus {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1px solid #465359 !important;
  border-radius: 50% !important;
  background: #1c2529 !important;
  color: #dbe6e4 !important;
  font-size: 17px !important;
  line-height: 24px !important;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .35) !important;
}

html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-upload-menu {
  left: 0 !important;
  bottom: calc(100% + 8px) !important;
}

/*
 * 输入区与上传区合并为同一个视觉容器。
 * 边框属于 dialogue-input-content，textarea 本身透明无边框；
 * 上传前后的左侧预留宽度一致，因此输入区位置和文字起点不会跳变。
 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-content {
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-height: 60px !important;
  position: relative !important;
  overflow: visible !important;
  border: 1px solid #3a494e !important;
  border-radius: 12px !important;
  background: #171d20 !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-content:focus-within {
  border-color: #4fd5bd !important;
  box-shadow: 0 0 0 1px rgba(79, 213, 189, .2) !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-content textarea,
html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments .dialogue-input-content textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 8px 8px 86px !important;
  border: 0 !important;
  border-radius: 11px !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-content textarea:focus,
html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-content textarea:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 空状态的上传按钮也放入共享输入盒左侧，不再占用外部的独立网格列。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-reference-strip:not(.has-attachments) {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 100% !important;
  min-height: 60px !important;
  overflow: visible !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-reference-strip:not(.has-attachments) .dialogue-upload-wrap {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

/* 有素材时仍使用同一个盒子的左上角坐标，缩略图只替换空状态按钮。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-reference-strip.has-attachments {
  left: 8px !important;
  top: 4px !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-tools {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/*
 * “@ 上传素材”面板：列表完全来自当前输入框中的真实附件。
 * 图片名称只是用户可读引用，模型编号会在提交时按剩余素材重新生成。
 */
html body .dialogue-overlay-layer .dialogue-mention-popover {
  width: min(356px, calc(100% - 24px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

html body .dialogue-overlay-layer .dialogue-mention-list {
  min-height: 96px;
  max-height: min(320px, calc(100vh - 260px));
  padding: 8px;
}

html body .dialogue-overlay-layer .dialogue-reference-mention-option {
  min-height: 58px;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  gap: 10px;
  padding: 7px 9px;
  border-color: rgba(132, 161, 169, .17);
  border-radius: 8px;
  background: #111b20;
}

html body .dialogue-overlay-layer .dialogue-reference-mention-option > b {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(167, 187, 191, .18);
  border-radius: 7px;
  background: #0a1216;
}

html body .dialogue-overlay-layer .dialogue-reference-mention-option > b img,
html body .dialogue-overlay-layer .dialogue-reference-mention-option > b video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

html body .dialogue-overlay-layer .dialogue-reference-mention-option strong,
html body .dialogue-overlay-layer .dialogue-reference-mention-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .dialogue-overlay-layer .dialogue-reference-mention-option strong {
  color: #dce6e4;
  font-size: 12px;
}

html body .dialogue-overlay-layer .dialogue-reference-mention-option small {
  color: #6f8388;
  font-size: 9px;
}

html body .dialogue-overlay-layer .dialogue-reference-mention-option.is-active {
  border-color: rgba(79, 213, 189, .42);
  background: #13231f;
}

html body .dialogue-overlay-layer .dialogue-mention-empty {
  min-height: 96px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 18px;
  color: #829499;
  text-align: center;
}

html body .dialogue-overlay-layer .dialogue-mention-empty strong {
  color: #cbd6d4;
  font-size: 12px;
}

html body .dialogue-overlay-layer .dialogue-mention-empty span {
  font-size: 9px;
}

/*
 * 对话提示词改用 contenteditable 展示富素材引用。
 * 隐藏 textarea 仍保存纯文本协议值（例如 @参考图），供现有任务模块读取；
 * 用户看到的引用则是“真实缩略图 + 名称”的整体块。
 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-prompt-value {
  display: none !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-prompt-editor,
html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments .dialogue-prompt-editor {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  height: 60px !important;
  max-height: 104px !important;
  display: block !important;
  margin: 0 !important;
  padding: 8px 8px 8px 86px !important;
  overflow-x: hidden !important;
  overflow-y: hidden;
  border: 0 !important;
  border-radius: 11px !important;
  outline: 0 !important;
  background: transparent !important;
  color: #dbe4e2 !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 22px !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  caret-color: #63dec7 !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-prompt-editor:empty::before {
  content: attr(data-placeholder);
  color: #627378;
  pointer-events: none;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-prompt-editor:focus,
html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-prompt-editor:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body .dialogue-bottom-input .dialogue-prompt-editor {
  scrollbar-width: thin !important;
  scrollbar-color: #3a4448 #101416 !important;
}

html body .dialogue-bottom-input .dialogue-prompt-editor::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

html body .dialogue-bottom-input .dialogue-prompt-editor::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: #101416 !important;
}

html body .dialogue-bottom-input .dialogue-prompt-editor::-webkit-scrollbar-thumb {
  border: 1px solid #171d20 !important;
  border-radius: 999px !important;
  background: #3a4448 !important;
}

html body .dialogue-bottom-input .dialogue-prompt-editor::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html body .dialogue-bottom-input .dialogue-inline-reference {
  box-sizing: border-box;
  max-width: min(194px, calc(100% - 8px));
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 3px 2px;
  padding: 2px 8px 2px 2px;
  overflow: hidden;
  border: 1px solid rgba(79, 213, 189, .38);
  border-radius: 7px;
  background: #20292d;
  color: #dce6e4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  line-height: 26px;
  vertical-align: middle;
  white-space: nowrap;
  user-select: all;
}

html body .dialogue-bottom-input .dialogue-inline-reference-preview {
  width: 26px;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: #0b1114;
  color: #65d9c3;
  font-size: 10px;
}

html body .dialogue-bottom-input .dialogue-inline-reference-preview img,
html body .dialogue-bottom-input .dialogue-inline-reference-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

html body .dialogue-bottom-input .dialogue-inline-reference-name {
  min-width: 0;
  overflow: hidden;
  color: #dce6e4;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-list-empty {
  padding: 30px 16px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* Storyboard per-shot generation type and batch selection. */
.records-list.is-storyboard-list .storyboard-generation-type {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #6f9e99;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.records-list.is-storyboard-list .storyboard-generation-type + .storyboard-shot-label {
  margin-left: 0;
}

.records-list.is-storyboard-list .storyboard-generation-type select {
  width: 84px !important;
  min-width: 84px !important;
  min-height: 28px !important;
  height: 28px;
  padding: 0 23px 0 9px !important;
  border: 1px solid #364950 !important;
  border-radius: 6px !important;
  background-color: #101a1f !important;
  color: #d8e7e4 !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 26px;
  cursor: pointer;
  box-shadow: none !important;
}

.records-list.is-storyboard-list .storyboard-generation-type select:hover,
.records-list.is-storyboard-list .storyboard-generation-type select:focus {
  border-color: rgba(79, 213, 189, .55) !important;
  outline: none;
}

.records-list.is-storyboard-list .storyboard-batch-select {
  box-sizing: border-box;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  justify-self: start;
  padding: 0;
  border: 1px solid #405158;
  border-radius: 6px;
  background: #111a1f;
  color: transparent;
  cursor: pointer;
  box-shadow: none;
}

.records-list.is-storyboard-list .storyboard-batch-select i {
  color: inherit;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.records-list.is-storyboard-list .storyboard-batch-select.is-selected {
  border-color: rgba(79, 213, 189, .68);
  background: rgba(79, 213, 189, .16);
  color: #62dfc8;
}

.records-list.is-storyboard-list .storyboard-batch-select:hover,
.records-list.is-storyboard-list .storyboard-batch-select:focus-visible {
  border-color: #66d9c4;
  outline: none;
}

@media (max-width: 680px) {
  .records-list.is-storyboard-list .storyboard-block-head {
    gap: 7px;
  }

  .records-list.is-storyboard-list .storyboard-generation-type {
    gap: 4px;
  }

  .records-list.is-storyboard-list .storyboard-generation-type select {
    width: 74px !important;
    min-width: 74px !important;
    padding-left: 7px !important;
    font-size: 11px !important;
  }
}

/* Keep the dialogue-style fullscreen composer above legacy fullscreen overrides. */
html body #shotFullscreenEditor .shot-fullscreen-prompt {
  position: relative !important;
  min-height: 64px !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  gap: 0 !important;
}

html body #shotFullscreenEditor.has-shot-uploads .shot-fullscreen-composer {
  grid-template-rows: minmax(64px, auto) auto !important;
}

html body #shotFullscreenEditor .shot-fullscreen-composer > .shot-send {
  grid-column: 2 !important;
  grid-row: 2 !important;
  transform: none !important;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor {
  padding-left: 86px !important;
}

html body #shotFullscreenEditor .shot-reference-strip {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment-list {
  width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  overflow: visible !important;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment {
  margin: 0 !important;
  transform: rotate(-3deg) !important;
  transform-origin: center center !important;
  transition: margin-left .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment + .shot-upload-attachment {
  margin-left: -42px !important;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment:nth-child(even) {
  transform: rotate(2.5deg) !important;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment:nth-child(3n) {
  transform: rotate(-1deg) !important;
}

html body #shotFullscreenEditor .shot-reference-strip:hover .shot-upload-attachment + .shot-upload-attachment,
html body #shotFullscreenEditor .shot-reference-strip:focus-within .shot-upload-attachment + .shot-upload-attachment {
  margin-left: 5px !important;
}

html body #shotFullscreenEditor .shot-reference-strip:hover .shot-upload-attachment,
html body #shotFullscreenEditor .shot-reference-strip:focus-within .shot-upload-attachment {
  transform: rotate(0) !important;
}

html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment:hover,
html body #shotFullscreenEditor .shot-reference-strip .shot-upload-attachment:focus-within {
  z-index: 30 !important;
  border-color: #4fd5bd !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .38) !important;
  transform: scale(1.05) rotate(0) !important;
}

/* 资产分类添加入口：AI 生成与本地上传共用一个紧凑菜单。 */
#assetLibraryModal .asset-category-add-wrap {
  position: relative;
  z-index: 12;
  order: 3;
  flex: 0 0 auto;
}

#assetLibraryModal .asset-category-add-wrap .asset-category-add {
  order: initial;
}

#assetLibraryModal .asset-category-add-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 80;
  width: 188px;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid #34484e;
  border-radius: 10px;
  background: #0d181d;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .48);
}

#assetLibraryModal .asset-category-add-menu.hidden {
  display: none !important;
}

#assetLibraryModal .asset-category-add-menu > button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #d5dfdd;
  text-align: left;
}

#assetLibraryModal .asset-category-add-menu > button:hover {
  border-color: #36534f;
  background: rgba(79, 213, 189, .08);
}

#assetLibraryModal .asset-category-add-menu > button > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(79, 213, 189, .10);
  color: #62d7c2;
  font-size: 11px;
}

#assetLibraryModal .asset-category-add-menu > button > span {
  display: grid;
  gap: 2px;
  font-size: 12px;
  font-weight: 750;
}

#assetLibraryModal .asset-category-add-menu > button small {
  color: #70858a;
  font-size: 9px;
  font-weight: 550;
}

html body #assetUploadModal .asset-upload-panel {
  position: relative;
  z-index: 10001 !important;
  width: min(560px, calc(100vw - 32px));
}

html body #assetUploadModal {
  z-index: 10000 !important;
}

html body #assetUploadModal .asset-upload-drop {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px dashed #395058;
  border-radius: 12px;
  background: #0a1419;
  color: #d6e0de;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

html body #assetUploadModal .asset-upload-drop:hover,
html body #assetUploadModal .asset-upload-drop.is-dragover,
html body #assetUploadModal .asset-upload-drop.has-file {
  border-color: #4fd5bd;
  background: rgba(79, 213, 189, .055);
}

html body #assetUploadModal .asset-upload-drop-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #3d5a5a;
  border-radius: 50%;
  color: #59d6c0;
  font-size: 22px;
}

html body #assetUploadModal .asset-upload-drop strong {
  font-size: 14px;
}

html body #assetUploadModal .asset-upload-drop small,
html body #assetUploadModal .asset-upload-target {
  color: #72878b;
  font-size: 10px;
}

html body #assetUploadModal .asset-upload-preview {
  min-height: 74px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid #2d4147;
  border-radius: 9px;
  background: #101c21;
}

html body #assetUploadModal .asset-upload-preview.hidden {
  display: none !important;
}

html body #assetUploadModal .asset-upload-preview > img,
html body #assetUploadModal .asset-upload-preview > video {
  width: 96px;
  height: 64px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background: #071014;
}

html body #assetUploadModal .asset-upload-preview > audio {
  width: 100%;
  grid-column: 1 / -1;
}

html body #assetUploadModal .asset-upload-preview-info {
  min-width: 0;
  display: grid;
  gap: 5px;
}

html body #assetUploadModal .asset-upload-preview-info strong {
  overflow: hidden;
  color: #d8e1df;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #assetUploadModal .asset-upload-preview-info small {
  color: #71858a;
  font-size: 10px;
}

html body #assetUploadModal .asset-upload-field {
  display: grid;
  gap: 7px;
  color: #b7c6c5;
  font-size: 11px;
  font-weight: 700;
}

html body #assetUploadModal .asset-upload-field input,
html body #assetUploadModal .asset-upload-field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #33474d;
  border-radius: 9px;
  outline: 0;
  background: #0b151a;
  color: #edf2f1;
  font: inherit;
  font-weight: 550;
}

html body #assetUploadModal .asset-upload-field input {
  height: 40px;
  padding: 0 12px;
}

html body #assetUploadModal .asset-upload-field textarea {
  min-height: 72px;
  padding: 11px 12px;
  resize: vertical;
}

html body #assetUploadModal .asset-upload-field input:focus,
html body #assetUploadModal .asset-upload-field textarea:focus {
  border-color: #4fd5bd;
}

html body #assetUploadModal .asset-upload-actions {
  align-items: center;
}

html body #assetUploadModal .asset-upload-submit {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #4fd5bd;
  border-radius: 9px;
  background: #4fd5bd;
  color: #06221d;
  font-weight: 850;
}

/* 资产媒体完整预览：缩略图和弹窗按原始比例缩放，不再裁掉画面边缘。 */
html body #assetLibraryModal .asset-thumb-remote {
  position: relative !important;
}

html body #assetLibraryModal .asset-thumb-remote > img,
html body #assetLibraryModal .asset-thumb-remote > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #071014 !important;
}

html body #assetUploadModal .asset-upload-preview > img,
html body #assetUploadModal .asset-upload-preview > video {
  width: 96px !important;
  height: 64px !important;
  object-fit: contain !important;
  background: #071014 !important;
}

html body #assetGeneratorModal .asset-generator-panel {
  max-height: calc(100vh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
}

html body #assetGeneratorModal .asset-generator-preview {
  width: min(100%, calc(50vh * var(--asset-preview-ratio, 1.7778))) !important;
  max-height: min(50vh, 420px);
  min-height: 0;
  justify-self: center;
  background: #071014;
}

html body #assetGeneratorModal .asset-generator-preview > img,
html body #assetGeneratorModal .asset-generator-preview > video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #071014 !important;
}

/* “添加”菜单的第三项：从当前项目成功的生成历史中批量加入资产。 */
html body #assetHistoryModal {
  z-index: 10000 !important;
}

html body #assetHistoryModal .asset-history-panel {
  position: relative;
  z-index: 10001;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

html body #assetHistoryModal .asset-history-summary,
html body #assetHistoryModal .asset-history-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html body #assetHistoryModal .asset-history-summary > span,
html body #assetHistoryModal .asset-history-target {
  color: #73878b;
  font-size: 10px;
}

html body #assetHistoryModal .asset-history-select-all {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #30464b;
  border-radius: 8px;
  background: #111e23;
  color: #8faaa8;
  font-size: 10px;
  font-weight: 750;
}

html body #assetHistoryModal .asset-history-select-all:hover:not(:disabled) {
  border-color: #4b716f;
  color: #65d8c3;
}

html body #assetHistoryModal .asset-history-list {
  min-height: 220px;
  max-height: min(56vh, 520px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
}

html body #assetHistoryModal .asset-history-item {
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 10px;
  padding: 7px;
  position: relative;
  overflow: hidden;
  border: 1px solid #2a3c42;
  border-radius: 10px;
  background: #101b20;
  color: #dce5e3;
  text-align: left;
}

html body #assetHistoryModal .asset-history-item:hover:not(:disabled),
html body #assetHistoryModal .asset-history-item.is-selected {
  border-color: #4fd5bd;
  background: rgba(79, 213, 189, .07);
}

html body #assetHistoryModal .asset-history-item.is-added {
  opacity: .54;
}

html body #assetHistoryModal .asset-history-thumb {
  min-width: 0;
  height: 100px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: #071014;
}

html body #assetHistoryModal .asset-history-thumb > img,
html body #assetHistoryModal .asset-history-thumb > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

html body #assetHistoryModal .asset-history-thumb > i {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(3, 10, 13, .78);
  color: #82d9cb;
  font-size: 9px;
  font-style: normal;
}

html body #assetHistoryModal .asset-history-info {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
}

html body #assetHistoryModal .asset-history-info strong,
html body #assetHistoryModal .asset-history-info small {
  overflow: hidden;
  text-overflow: ellipsis;
}

html body #assetHistoryModal .asset-history-info strong {
  padding-right: 42px;
  color: #e7eeec;
  font-size: 12px;
  white-space: nowrap;
}

html body #assetHistoryModal .asset-history-info small {
  display: -webkit-box;
  color: #879a9d;
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body #assetHistoryModal .asset-history-info em {
  color: #617579;
  font-size: 9px;
  font-style: normal;
}

html body #assetHistoryModal .asset-history-check {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 1px solid #31474c;
  border-radius: 7px;
  background: #0c171c;
  color: transparent;
  font-size: 9px;
}

html body #assetHistoryModal .asset-history-item.is-selected .asset-history-check {
  border-color: #4fd5bd;
  background: #4fd5bd;
  color: #08201c;
}

html body #assetHistoryModal .asset-history-item.is-added .asset-history-check {
  color: #7d9194;
}

html body #assetHistoryModal .asset-history-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed #2c4045;
  border-radius: 10px;
  color: #83969a;
  text-align: center;
}

html body #assetHistoryModal .asset-history-empty strong {
  color: #c4d0ce;
  font-size: 13px;
}

html body #assetHistoryModal .asset-history-empty span {
  font-size: 10px;
}

html body #assetHistoryModal .asset-history-submit {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #4fd5bd;
  border-radius: 9px;
  background: #4fd5bd;
  color: #06221d;
  font-weight: 850;
}

/* 资产卡片只在右击后显示编辑/删除菜单，不再显示“修改”浮层或点击名称编辑。 */
html body #assetLibraryModal .asset-card-edit {
  display: none !important;
}

html body .asset-record-context-menu {
  position: fixed;
  z-index: 12020;
  width: 174px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid #34484e;
  border-radius: 10px;
  background: #101a1f;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .52);
}

html body .asset-record-context-menu.hidden {
  display: none !important;
}

html body .asset-record-context-menu > button {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #dbe4e2;
  font-size: 11px;
  font-weight: 750;
  text-align: left;
}

html body .asset-record-context-menu > button:hover {
  background: #1a2a2f;
}

html body .asset-record-context-menu > button > span {
  width: 18px;
  color: #75cdbf;
  font-size: 14px;
  text-align: center;
}

html body .asset-record-context-menu > button.is-danger,
html body .asset-record-context-menu > button.is-danger > span {
  color: #eb9292;
}

html body #assetRecordActionModal {
  z-index: 12010 !important;
}

html body #assetRecordActionModal .asset-record-action-panel {
  width: min(430px, calc(100vw - 32px));
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid #34484e;
  border-radius: 15px;
  background: #0e181d;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .56);
}

html body #assetRecordActionModal .asset-record-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

html body #assetRecordActionModal .asset-record-action-head > div {
  display: grid;
  gap: 3px;
}

html body #assetRecordActionModal .asset-record-action-head small {
  color: #73868a;
  font-size: 10px;
}

html body #assetRecordActionModal .asset-record-action-head strong {
  color: #edf2f1;
  font-size: 18px;
}

html body #assetRecordActionModal .asset-record-action-close {
  width: 34px;
  height: 34px;
  border: 1px solid #34484e;
  border-radius: 9px;
  background: #152127;
  color: #cbd6d4;
  font-size: 20px;
}

html body #assetRecordActionModal .asset-record-action-field {
  display: grid;
  gap: 8px;
  color: #aab9b7;
  font-size: 11px;
  font-weight: 750;
}

html body #assetRecordActionModal .asset-record-action-field input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #35494f;
  border-radius: 9px;
  outline: 0;
  background: #091318;
  color: #eef3f2;
  font: inherit;
}

html body #assetRecordActionModal .asset-record-action-field input:focus {
  border-color: #4fd5bd;
}

html body #assetRecordActionModal .asset-record-delete-copy {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(231, 132, 132, .18);
  border-radius: 10px;
  background: rgba(164, 56, 56, .07);
}

html body #assetRecordActionModal .asset-record-delete-copy strong {
  color: #f0d9d9;
  font-size: 13px;
}

html body #assetRecordActionModal .asset-record-delete-copy span {
  color: #9b8b8c;
  font-size: 10px;
  line-height: 1.55;
}

html body #assetRecordActionModal .asset-record-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

html body #assetRecordActionModal .asset-record-action-buttons > button {
  min-width: 88px;
  min-height: 38px;
  border: 1px solid #384b51;
  border-radius: 9px;
  background: #162228;
  color: #d8e0de;
  font-size: 11px;
  font-weight: 800;
}

html body #assetRecordActionModal .asset-record-action-confirm {
  border-color: #4fd5bd !important;
  background: #4fd5bd !important;
  color: #06221d !important;
}

html body #assetRecordActionModal .asset-record-action-confirm.is-danger {
  border-color: #b85f66 !important;
  background: #a54e56 !important;
  color: #fff1f1 !important;
}

@media (max-width: 720px) {
  html body #assetHistoryModal .asset-history-list {
    grid-template-columns: 1fr;
  }

  html body #assetHistoryModal .asset-history-item {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  html body #assetHistoryModal .asset-history-summary,
  html body #assetHistoryModal .asset-history-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 对话 @ 引用与分镜保持同一结构：角色、场景、道具和本次上传素材。 */
html body .records-modal.is-dialogue-view #dialogueMentionPanel.dialogue-mention-popover {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-mention-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-asset-mention-state {
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px dashed #2d4145;
  border-radius: 8px;
  color: #71868a;
  font-size: 10px;
  text-align: center;
}

html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-asset-mention-state.hidden,
html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-asset-mention-state:empty {
  display: none !important;
}

html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-upload-mention-empty.hidden {
  display: none !important;
}

html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-asset-mention-state.is-error {
  color: #df8e8e;
}

html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-asset-mention > b img,
html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-asset-mention > b video,
html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-upload-mention > b img,
html body .records-modal.is-dialogue-view #dialogueMentionPanel .dialogue-upload-mention > b video {
  object-fit: contain !important;
  background: #081115;
}

html body #assetUploadModal .asset-upload-submit:disabled {
  border-color: #34464b;
  background: #26363a;
  color: #718286;
  cursor: not-allowed;
}

@media (max-width: 620px) {
  html body #assetUploadModal .asset-upload-actions {
    align-items: stretch;
  }

  html body #assetUploadModal .asset-upload-target {
    text-align: center;
  }
}

/*
 * 分镜编辑修正：运动菜单使用视口浮层向上展开，避免被分镜滚动区裁切。
 * JS 会在菜单打开时补充精确的 fixed 坐标；这些规则负责层级和视觉状态。
 */
html body .storyboard-card.is-motion-menu-open {
  position: relative;
  z-index: 240 !important;
  overflow: visible !important;
}

html body .storyboard-motion-popover.is-viewport-layer {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .58) !important;
}

/* 内容、生成类型和景别保持同一基线，禁止“内容”被压缩为两行。 */
html body .records-list.is-storyboard-list .storyboard-visual .storyboard-block-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

html body .records-list.is-storyboard-list .storyboard-visual .storyboard-block-head > h4 {
  width: auto !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}

html body .records-list.is-storyboard-list .storyboard-visual .storyboard-generation-type,
html body .records-list.is-storyboard-list .storyboard-visual .storyboard-shot-label {
  min-width: 0;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}

html body .records-list.is-storyboard-list .storyboard-visual .storyboard-generation-type > span,
html body .records-list.is-storyboard-list .storyboard-visual .storyboard-shot-label > span {
  flex: 0 0 auto;
  line-height: 28px !important;
}

html body .records-list.is-storyboard-list .storyboard-visual .storyboard-generation-type select,
html body .records-list.is-storyboard-list .storyboard-visual .storyboard-shot-label select,
html body .records-list.is-storyboard-list .storyboard-visual .storyboard-shot-trigger {
  margin: 0 !important;
  vertical-align: middle !important;
}

/*
 * 图片、视频记录：媒体区贴合卡片上下边缘并铺满左栏；文字区仍保留舒适内边距。
 * 右侧旧的蓝绿色任务进度线不再显示。
 */
html body .records-list.is-media-record-list > .record-item[data-record-type="image"],
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] {
  min-height: 140px !important;
  grid-template-columns: 224px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-thumb-wrap,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-thumb-wrap,
html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-thumb,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-thumb {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 140px !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #080e12 !important;
}

html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-thumb > img,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-thumb > video,
html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-thumb > .record-media-fit-width,
html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-thumb > .record-media-fit-height,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-thumb > .record-media-fit-width,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-thumb > .record-media-fit-height {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
}

html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-body,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-body {
  box-sizing: border-box !important;
  min-width: 0;
  min-height: 140px !important;
  align-self: stretch !important;
  padding: 14px 16px !important;
}

/* 对话刚提交时，图片/视频页立即显示同一任务的等待卡片。完成后原卡片原位替换为媒体。 */
html body .records-list.is-media-record-list > .record-item.is-pending .record-thumb-empty {
  background:
    radial-gradient(circle at 50% 46%, rgba(79, 210, 191, .14), transparent 42%),
    #080e12 !important;
}

html body .record-pending-state {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  color: #dffaf5;
  text-align: center;
}

html body .record-pending-state > i {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(79, 210, 191, .24);
  border-top-color: #4fd2bf;
  border-radius: 50%;
  animation: xiake-record-pending-spin .9s linear infinite;
}

html body .record-pending-state > strong {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

html body .record-pending-state > small {
  max-width: 180px;
  overflow: hidden;
  color: #79949b;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .record-pending-state.is-failed {
  color: #e8a9ad;
}

@keyframes xiake-record-pending-spin {
  to { transform: rotate(360deg); }
}

html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-progress,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-progress {
  display: none !important;
}

html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-actions,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-actions {
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
}

@media (max-width: 680px) {
  html body .records-list.is-media-record-list > .record-item[data-record-type="image"],
  html body .records-list.is-media-record-list > .record-item[data-record-type="video"] {
    min-height: 112px !important;
    grid-template-columns: 168px minmax(0, 1fr) !important;
  }

  html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-thumb-wrap,
  html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-thumb-wrap,
  html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-thumb,
  html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-thumb,
  html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-body,
  html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-body {
    min-height: 112px !important;
  }
}

/* 修改标记改为输入即保存，不再保留单独的确认按钮。 */
html body #shotFullscreenEditor .shot-point-editor .shot-point-box {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* 最终覆盖：时间段输入必须压过旧版紧凑标记框的尺寸规则。 */
html body #shotFullscreenEditor .shot-point-editor.has-time-range .shot-point-box {
  width: min(304px, calc(100vw - 84px)) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 44px 30px !important;
}

html body #shotFullscreenEditor .shot-point-editor .shot-point-box textarea {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body #shotFullscreenEditor .shot-point-time-range {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}

/* 修改意见列表固定放在画面说明与底部输入框之间，不再遮挡图片或视频。 */
html body #shotFullscreenEditor.shot-fullscreen-editor {
  grid-template-rows: 48px minmax(0, 1fr) auto auto !important;
}

html body #shotFullscreenEditor > .shot-change-queue {
  position: relative !important;
  inset: auto !important;
  width: min(914px, 100%) !important;
  max-height: 142px !important;
  justify-self: center !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 8 !important;
}

/* 2026-08-25：视频时长改为可编辑数值，所有入口统一显示“秒”。 */
html body .dialogue-video-tools .dialogue-video-duration {
  box-sizing: border-box;
  width: 82px !important;
  min-width: 82px !important;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  border: 1px solid #34474e;
  border-radius: 7px;
  background: #111b20;
  color: #e7f3f1;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

html body .dialogue-video-tools .dialogue-video-duration:hover {
  border-color: #526970;
  background: #142229;
}

html body .dialogue-video-tools .dialogue-video-duration:focus-within {
  border-color: #4fd2bf;
  box-shadow: 0 0 0 2px rgba(79, 210, 191, .1);
}

html body .dialogue-video-duration svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: #66d9c7;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .dialogue-video-duration input,
html body .storyboard-duration-input input,
html body #shotFullscreenEditor .shot-duration-input input {
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit;
  font-weight: 500 !important;
  text-align: center;
  appearance: textfield;
}

html body .dialogue-video-duration input {
  width: 26px;
  padding: 0 !important;
  font-size: 13px !important;
}

/* 资产库 AI 生成：复用对话输入框的结构，参考图、模型、比例和 @ 都在同一编辑器内完成。 */
html body #assetGeneratorModal .asset-generator-panel-v2 {
  width: min(610px, calc(100vw - 32px));
  gap: 12px;
}

html body #assetGeneratorModal .asset-generator-preview {
  width: 100%;
  max-height: 330px;
}

html body #assetGeneratorModal .asset-generator-preview > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080f13;
}

html body #assetGeneratorModal .asset-generator-composer {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #385159;
  border-radius: 14px;
  background: #111b20;
  box-shadow: inset 0 0 0 1px rgba(90, 216, 195, .025);
}

html body #assetGeneratorModal.needs-prompt .asset-generator-composer {
  border-color: rgba(226, 133, 114, .78);
}

html body #assetGeneratorModal .asset-generator-reference-strip {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
}

html body #assetGeneratorModal .asset-generator-attachment-list {
  min-width: 0;
  display: flex;
  align-items: center;
}

html body #assetGeneratorModal .asset-generator-reference {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin-left: -10px;
  overflow: visible;
  border: 1px solid #42645f;
  border-radius: 9px;
  background: #071015;
  transition: margin .16s ease, transform .16s ease;
}

html body #assetGeneratorModal .asset-generator-reference:first-child {
  margin-left: 0;
}

html body #assetGeneratorModal .asset-generator-attachment-list:hover .asset-generator-reference {
  margin-left: 4px;
}

html body #assetGeneratorModal .asset-generator-attachment-list:hover .asset-generator-reference:first-child {
  margin-left: 0;
}

html body #assetGeneratorModal .asset-generator-reference:hover {
  z-index: 3;
  transform: translateY(-2px);
}

html body #assetGeneratorModal .asset-generator-reference > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

html body #assetGeneratorModal .asset-generator-reference-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #577078;
  border-radius: 50%;
  background: #132127;
  color: #e8f2f0;
  font-size: 12px;
  line-height: 1;
}

html body #assetGeneratorModal .asset-generator-upload {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 1px solid #41616a;
  border-radius: 50%;
  background: #102027;
  color: #5ad8c3;
  font-size: 20px;
  font-weight: 300;
}

html body #assetGeneratorModal .asset-generator-reference-count {
  color: #76908f;
  font-size: 11px;
}

html body #assetGeneratorModal .asset-generator-prompt {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  max-height: 96px;
  resize: vertical;
  padding: 8px 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eaf1ef;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

html body #assetGeneratorModal .asset-generator-prompt::placeholder {
  color: #708489;
}

html body #assetGeneratorModal .asset-generator-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

html body #assetGeneratorModal .asset-generator-toolbar select,
html body #assetGeneratorModal .asset-generator-mention,
html body #assetGeneratorModal .asset-generator-submit {
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #3c525a;
  border-radius: 9px;
  outline: 0;
  background: #101a20;
  color: #e4ecea;
  font-size: 11px;
  font-weight: 650;
}

html body #assetGeneratorModal .asset-generator-model {
  width: min(230px, 42%);
}

html body #assetGeneratorModal .asset-generator-size {
  width: 88px;
}

html body #assetGeneratorModal .asset-generator-mention {
  width: 40px;
  padding: 0;
  color: #64d7c5;
  font-size: 15px;
}

html body #assetGeneratorModal .asset-generator-submit {
  min-width: 90px;
  margin-left: auto;
  border-color: #50cdb9;
  background: #53d2bd;
  color: #061410;
}

html body #assetGeneratorModal .asset-generator-submit:disabled {
  opacity: .56;
}

html body #assetGeneratorModal .asset-generator-mention-panel {
  position: absolute;
  right: 10px;
  bottom: 52px;
  z-index: 10;
  width: min(370px, calc(100% - 20px));
  max-height: 310px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #365159;
  border-radius: 12px;
  background: #0c171c;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}

html body #assetGeneratorModal .asset-generator-mention-panel.hidden {
  display: none;
}

html body #assetGeneratorModal .asset-generator-mention-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html body #assetGeneratorModal .asset-generator-mention-head > div {
  display: grid;
  gap: 2px;
}

html body #assetGeneratorModal .asset-generator-mention-head strong {
  color: #edf3f1;
  font-size: 13px;
}

html body #assetGeneratorModal .asset-generator-mention-head small,
html body #assetGeneratorModal .asset-generator-mention-option small {
  color: #78908f;
  font-size: 10px;
}

html body #assetGeneratorModal .asset-generator-mention-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #3b5057;
  border-radius: 8px;
  background: #132026;
  color: #d7e2df;
  font-size: 18px;
}

html body #assetGeneratorModal .asset-generator-mention-upload {
  min-height: 34px;
  border: 1px dashed #3f655e;
  border-radius: 8px;
  background: rgba(82, 211, 188, .06);
  color: #61d7c3;
  font-size: 11px;
}

html body #assetGeneratorModal .asset-generator-mention-list {
  display: grid;
  gap: 6px;
  overflow-y: auto;
}

html body #assetGeneratorModal .asset-generator-mention-option {
  min-height: 50px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 5px;
  border: 1px solid #2d4249;
  border-radius: 9px;
  background: #101b20;
  color: #dfe8e6;
  text-align: left;
}

html body #assetGeneratorModal .asset-generator-mention-option:hover {
  border-color: #4a756d;
  background: #13242a;
}

html body #assetGeneratorModal .asset-generator-mention-option img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 7px;
}

html body #assetGeneratorModal .asset-generator-mention-option > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

html body #assetGeneratorModal .asset-generator-mention-option strong {
  overflow: hidden;
  color: #e9f0ee;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #assetGeneratorModal .asset-generator-mention-option i {
  color: #65d8c5;
  font-size: 16px;
  font-style: normal;
  text-align: center;
}

html body #assetGeneratorModal .asset-generator-mention-empty {
  padding: 22px 12px;
  color: #7d9290;
  font-size: 11px;
  text-align: center;
}

html body .dialogue-video-duration input::-webkit-inner-spin-button,
html body .dialogue-ratio-duration-control input::-webkit-inner-spin-button,
html body .storyboard-duration-input input::-webkit-inner-spin-button,
html body #shotFullscreenEditor .shot-duration-input input::-webkit-inner-spin-button {
  display: none;
  margin: 0;
  appearance: none;
}

html body .dialogue-video-duration span,
html body .dialogue-ratio-duration-control i,
html body .storyboard-duration-input i,
html body #shotFullscreenEditor .shot-duration-input i {
  color: #91aaa6;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

html body .storyboard-duration-input {
  min-width: 58px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 5px;
  border: 1px solid #30434a;
  border-radius: 6px;
  background: #101a1e;
}

/* 视频时长归入“比例 / 分辨率”弹窗，与实际提交参数保持在同一处。 */
html body .dialogue-ratio-duration-control {
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid #304149;
  border-radius: 6px;
  background: #111c22;
  color: #dbe9e7;
}

html body .dialogue-ratio-duration-control:focus-within {
  border-color: rgba(79, 213, 189, .55);
  box-shadow: 0 0 0 2px rgba(79, 213, 189, .08);
}

html body .dialogue-ratio-duration-control.is-invalid {
  border-color: rgba(255, 86, 96, .78);
  box-shadow: 0 0 0 2px rgba(255, 86, 96, .08);
}

html body .dialogue-video-duration-error {
  margin: 6px 0 0;
  color: #ff6670;
  font-size: 12px;
  line-height: 1.4;
}

html body .dialogue-ratio-duration-control svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #66d9c7;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .dialogue-ratio-duration-control input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: textfield;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

html body .storyboard-duration-input input {
  width: 34px;
}

html body #shotFullscreenEditor .shot-duration-input {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  border: 1px solid #33434a;
  border-radius: 5px;
  background: #0d1519;
}

html body #shotFullscreenEditor .shot-duration-input input {
  width: 100%;
  height: 34px;
}

/* 生成按钮在提交状态下保持单行，避免“生成中…”被压成两行。 */
html body .dialogue-send,
html body .storyboard-generate-btn,
html body .storyboard-batch-generate,
html body .asset-generator-submit,
html body #shotFullscreenEditor .shot-send {
  white-space: nowrap !important;
  word-break: keep-all !important;
  line-height: 1 !important;
}

html body #shotFullscreenEditor .shot-send {
  min-width: 94px !important;
  padding-right: 14px !important;
  padding-left: 14px !important;
}

/* 提示词和生成要求使用正常字重；标题、标签和操作按钮仍保留强调。 */
html body .dialogue-user-bubble,
html body .dialogue-ai-result > p,
html body .dialogue-prompt-editor,
html body .dialogue-prompt-value,
html body .record-prompt,
html body .storyboard-block p,
html body .storyboard-edit-prompt,
html body .storyboard-empty-input[data-storyboard-field="scene"],
html body #shotFullscreenEditor .shot-fullscreen-prompt-editor,
html body #shotFullscreenEditor .shot-fullscreen-prompt-value,
html body #shotFullscreenEditor .shot-record-media-caption-copy p,
html body #shotFullscreenEditor .shot-storyboard-media-caption-copy p,
html body #shotFullscreenEditor .shot-point-box textarea,
html body #shotFullscreenEditor .shot-change-item-main span,
html body .asset-generator-modal textarea {
  font-weight: 400 !important;
}

/* 画笔操作移到修改页头部，始终与关闭按钮处于同一行。 */
html body #shotFullscreenEditor .shot-fullscreen-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

html body #shotFullscreenEditor .shot-fullscreen-head-actions .shot-record-media-brush-actions {
  padding: 0;
}

html body #shotFullscreenEditor .shot-record-media-caption,
html body #shotFullscreenEditor .shot-storyboard-media-caption {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* 外框和媒体采用同一宽高比：先完整显示媒体，再让外框收缩到媒体边缘。 */
html body #shotFullscreenEditor .shot-record-media-frame,
html body #shotFullscreenEditor .shot-storyboard-media-frame {
  width: min(1080px, 100%, calc(58vh * var(--xiake-media-ratio-number, 1.777778))) !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

html body #shotFullscreenEditor .shot-record-media-frame .shot-fullscreen-image,
html body #shotFullscreenEditor .shot-storyboard-media-frame .shot-fullscreen-image.has-generated-media {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--xiake-media-aspect, 16 / 9) !important;
}

html body #shotFullscreenEditor .shot-fullscreen-image > .shot-fullscreen-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 模型按钮直接显示当前选中项，空间不足时保留完整悬停提示。 */
html body #shotFullscreenEditor .shot-model-trigger {
  width: auto !important;
  min-width: 108px !important;
  max-width: 220px !important;
  overflow: hidden;
  padding-right: 13px !important;
  padding-left: 13px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  html body #shotFullscreenEditor .shot-fullscreen-head-actions {
    gap: 5px;
  }

  html body #shotFullscreenEditor .shot-record-media-brush-actions .shot-brush-toggle,
  html body #shotFullscreenEditor .shot-record-media-brush-actions .shot-brush-clear {
    padding-right: 8px;
    padding-left: 8px;
  }

  html body #shotFullscreenEditor .shot-model-trigger {
    min-width: 88px !important;
    max-width: 132px !important;
  }
}

/* 2026-08-26：图片、视频和分镜修改页统一改为弹窗内部纵向滚动，媒体不再覆盖输入框。 */
html body #shotFullscreenEditor.shot-fullscreen-editor {
  display: block !important;
  box-sizing: border-box !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 14px clamp(16px, 3vw, 36px) 24px !important;
  scrollbar-color: #465057 #0c1114;
  scrollbar-width: thin;
}

html body #shotFullscreenEditor::-webkit-scrollbar,
html body #assetGeneratorModal .asset-generator-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html body #shotFullscreenEditor::-webkit-scrollbar-track,
html body #assetGeneratorModal .asset-generator-panel::-webkit-scrollbar-track {
  background: #0b1013;
  border-left: 1px solid #171e22;
}

html body #shotFullscreenEditor::-webkit-scrollbar-thumb,
html body #assetGeneratorModal .asset-generator-panel::-webkit-scrollbar-thumb {
  border: 2px solid #0b1013;
  border-radius: 999px;
  background: #465057;
}

html body #shotFullscreenEditor::-webkit-scrollbar-thumb:hover,
html body #assetGeneratorModal .asset-generator-panel::-webkit-scrollbar-thumb:hover {
  background: #606b72;
}

html body #shotFullscreenEditor .shot-fullscreen-head {
  position: sticky !important;
  top: -1px;
  z-index: 90;
  box-sizing: border-box;
  width: min(1080px, 100%) !important;
  margin: 0 auto 10px !important;
  padding: 5px 3px !important;
  background: linear-gradient(180deg, rgba(12, 18, 20, .98) 72%, rgba(12, 18, 20, .88));
  backdrop-filter: blur(8px);
}

html body #shotFullscreenEditor .shot-fullscreen-stage {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 10px !important;
  overflow: visible !important;
}

html body #shotFullscreenEditor .shot-record-media-frame,
html body #shotFullscreenEditor .shot-storyboard-media-frame {
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

html body #shotFullscreenEditor > .shot-change-queue {
  width: min(1080px, 100%) !important;
  margin: 10px auto !important;
}

html body #shotFullscreenEditor > .shot-fullscreen-composer {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  width: min(1080px, 100%) !important;
  margin: 12px auto 0 !important;
  transform: none !important;
}

html body #shotFullscreenEditor .shot-fullscreen-prompt-editor {
  max-height: 144px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* 画笔仍是一个完整按钮，但图标本身不再额外套胶囊框。 */
html body #shotFullscreenEditor .shot-brush-toggle > span {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* 修改页在说明区域显示生成该媒体所用的模型。 */
html body #shotFullscreenEditor .shot-record-media-caption,
html body #shotFullscreenEditor .shot-storyboard-media-caption {
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: end !important;
}

html body #shotFullscreenEditor .shot-source-model {
  display: inline-flex;
  max-width: 230px;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid #34474e;
  border-radius: 7px;
  background: rgba(11, 20, 24, .9);
  color: #d7e4e5;
  font-size: 11px;
  font-weight: 500;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #shotFullscreenEditor .shot-source-model {
  justify-self: end;
  padding: 0 10px;
}

/* 生成预览内不显示模型徽标；修改弹窗的模型信息放在说明区右侧。 */
html body .dialogue-result-media .dialogue-result-model-badge {
  display: none !important;
}

html body #shotFullscreenEditor .shot-source-model > i {
  color: #62d9c6;
  font-size: 10px;
  font-style: normal;
}

/* 对话媒体容器保留相对定位，供操作按钮覆盖定位。 */
html body .dialogue-result-media {
  position: relative;
}

/* 原始图片/视频作为不可误删的固定参考，直接复用已有链接。 */
html body #shotFullscreenEditor .shot-upload-attachment.is-original-source {
  border-color: rgba(79, 210, 191, .52) !important;
  background: #132126 !important;
}

html body #shotFullscreenEditor .shot-source-pin {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 5;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(5, 12, 15, .86);
  color: #73ddcc;
  font-size: 8px;
  line-height: 14px;
}

/* 资产生成弹窗沿用黑灰主题滚动条，去掉浏览器默认白色轨道。 */
html body #assetGeneratorModal .asset-generator-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-color: #465057 #0b1013;
  scrollbar-width: thin;
}

/* 资产分类“添加”菜单会移到弹窗顶层；实际向上或向下由可用空间决定。 */
html body #assetLibraryModal .asset-category-add-menu {
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  width: min(430px, calc(100vw - 32px)) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  transform-origin: right bottom;
}

html body #assetLibraryModal .asset-category-add-menu > button {
  min-width: 0;
}

html body #assetLibraryModal > .asset-category-add-menu.is-portaled {
  position: fixed !important;
  top: var(--asset-menu-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--asset-menu-left) !important;
  z-index: 10020 !important;
}

html body #assetLibraryModal .asset-category.is-add-menu-open,
html body #assetLibraryModal .asset-category.is-add-menu-open > h3,
html body #assetLibraryModal .asset-category.is-add-menu-open .asset-category-add-wrap {
  position: relative;
  z-index: 220 !important;
  overflow: visible !important;
}

@media (max-width: 680px) {
  html body #assetLibraryModal .asset-category-add-menu {
    width: min(300px, calc(100vw - 24px)) !important;
    grid-template-columns: minmax(0, 1fr);
  }

  html body #shotFullscreenEditor .shot-record-media-caption,
  html body #shotFullscreenEditor .shot-storyboard-media-caption {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #shotFullscreenEditor .shot-source-model {
    justify-self: start;
    margin-top: 7px;
  }
}

/* 最终交互覆盖：竖版媒体仍保持原比例，但说明文字使用可读宽度。 */
html body #shotFullscreenEditor.is-narrow-media .shot-record-media-caption,
html body #shotFullscreenEditor.is-narrow-media .shot-storyboard-media-caption {
  position: relative;
  left: 50%;
  width: min(640px, calc(100vw - 96px)) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  transform: translateX(-50%);
}

html body #shotFullscreenEditor.is-narrow-media .shot-source-model {
  justify-self: start !important;
  max-width: 100%;
  margin-top: 8px;
}

/* 预览框始终占满当前内容宽度，高度严格由本次选择的比例决定。 */
html body .records-modal.is-dialogue-view .dialogue-result-media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--xiake-generation-aspect, 1 / 1) !important;
}

html body #shotFullscreenEditor .shot-record-media-frame,
html body #shotFullscreenEditor .shot-storyboard-media-frame {
  width: min(1080px, 100%) !important;
  max-width: 100% !important;
}

/* 门户菜单使用脚本计算的位置，层级高于原“添加”按钮。 */
html body #assetLibraryModal > .asset-category-add-menu.is-portaled {
  top: var(--asset-menu-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--asset-menu-left) !important;
  z-index: 10020 !important;
}

/* 2026-08-26：修改弹窗采用固定头部、独立滚动内容和固定底部输入区。 */
html body #shotFullscreenEditor.shot-fullscreen-editor {
  box-sizing: border-box !important;
  height: 100dvh !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  padding: 0 clamp(12px, 3vw, 36px) 10px !important;
}

html body #shotFullscreenEditor > .shot-fullscreen-head {
  position: relative !important;
  top: auto !important;
  z-index: 100 !important;
  grid-row: 1 !important;
  box-sizing: border-box !important;
  width: min(1080px, 100%) !important;
  min-height: 62px;
  margin: 0 auto !important;
  padding: 9px 3px 8px !important;
  border-bottom: 1px solid rgba(89, 111, 118, .16);
  background: linear-gradient(180deg, #0d1416 0%, rgba(13, 20, 22, .98) 100%) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

html body #shotFullscreenEditor > .shot-fullscreen-scroll-body {
  grid-row: 2 !important;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 10px 0 18px;
  scrollbar-width: thin;
  scrollbar-color: #465057 #0b1013;
}

html body #shotFullscreenEditor > .shot-fullscreen-scroll-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html body #shotFullscreenEditor > .shot-fullscreen-scroll-body::-webkit-scrollbar-track {
  background: #0b1013;
}

html body #shotFullscreenEditor > .shot-fullscreen-scroll-body::-webkit-scrollbar-thumb {
  border: 2px solid #0b1013;
  border-radius: 999px;
  background: #465057;
}

html body #shotFullscreenEditor > .shot-fullscreen-scroll-body > .shot-fullscreen-stage {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 10px !important;
  overflow: visible !important;
}

html body #shotFullscreenEditor > .shot-fullscreen-scroll-body > .shot-change-queue {
  position: relative !important;
  inset: auto !important;
  width: min(1080px, 100%) !important;
  max-height: 142px !important;
  margin: 10px auto 0 !important;
  transform: none !important;
  z-index: 8 !important;
}

html body #shotFullscreenEditor > .shot-fullscreen-composer {
  position: relative !important;
  inset: auto !important;
  z-index: 110 !important;
  grid-row: 3 !important;
  box-sizing: border-box !important;
  width: min(1080px, 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-rows: minmax(64px, auto) auto !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  margin: 0 auto !important;
  padding: 10px 12px 11px !important;
  border: 1px solid #34474e !important;
  border-radius: 12px !important;
  background: rgba(20, 28, 31, .985) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .34) !important;
}

html body #shotFullscreenEditor > .shot-fullscreen-composer > .shot-fullscreen-prompt {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

html body #shotFullscreenEditor > .shot-fullscreen-composer > .shot-fullscreen-tools {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  align-self: center !important;
}

html body #shotFullscreenEditor > .shot-fullscreen-composer > .shot-send {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: end !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 104px !important;
  max-width: 132px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: keep-all !important;
  line-height: 1 !important;
}

/* 图片与视频记录操作默认中性，只在悬停或键盘聚焦时显示绿色。 */
html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-edit,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-edit,
html body .records-list.is-media-record-list > .record-item[data-record-type="beautify"] .record-edit,
html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-retry,
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-retry,
html body .records-list.is-media-record-list > .record-item[data-record-type="beautify"] .record-retry {
  border-color: #3a4b52 !important;
  background: #121a1e !important;
  color: #c3ced1 !important;
  box-shadow: none !important;
}

html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-edit:hover:not(:disabled),
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-edit:hover:not(:disabled),
html body .records-list.is-media-record-list > .record-item[data-record-type="beautify"] .record-edit:hover:not(:disabled),
html body .records-list.is-media-record-list > .record-item[data-record-type="image"] .record-edit:focus-visible:not(:disabled),
html body .records-list.is-media-record-list > .record-item[data-record-type="video"] .record-edit:focus-visible:not(:disabled),
html body .records-list.is-media-record-list > .record-item[data-record-type="beautify"] .record-edit:focus-visible:not(:disabled) {
  border-color: #48cfba !important;
  background: rgba(39, 119, 109, .20) !important;
  color: #58ddc8 !important;
}

html body .records-list.is-media-record-list > .record-item .record-edit:disabled {
  border-color: #2a383e !important;
  background: #11181b !important;
  color: #68787d !important;
  opacity: .72;
}

@media (max-width: 680px) {
  html body #shotFullscreenEditor.shot-fullscreen-editor {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  html body #shotFullscreenEditor > .shot-fullscreen-composer {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  html body #shotFullscreenEditor > .shot-fullscreen-composer > .shot-send {
    width: 92px !important;
    min-width: 92px !important;
    padding-right: 9px !important;
    padding-left: 9px !important;
  }
}

/* 局部意见浮层允许越过图片/视频边界，不再被竖版媒体宽度裁切。 */
html body #shotFullscreenEditor .shot-fullscreen-image,
html body #shotFullscreenEditor.is-record-media-editor .shot-fullscreen-image,
html body #shotFullscreenEditor .shot-storyboard-media-frame .shot-fullscreen-image {
  overflow: visible !important;
}

html body #shotFullscreenEditor .shot-point-editor {
  z-index: 48 !important;
}

html body #shotFullscreenEditor .shot-point-editor .shot-point-box {
  width: min(360px, calc(100vw - 48px)) !important;
  max-width: none !important;
  overflow: visible !important;
}

html body #shotFullscreenEditor .shot-point-editor.has-time-range .shot-point-box {
  width: min(380px, calc(100vw - 48px)) !important;
}

/* 局部意见输入框使用与弹窗一致的黑灰滚动条。 */
html body #shotFullscreenEditor .shot-point-box textarea {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #4a5960 #0d1417;
}

html body #shotFullscreenEditor .shot-point-box textarea::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html body #shotFullscreenEditor .shot-point-box textarea::-webkit-scrollbar-track {
  border-radius: 8px;
  background: #0d1417;
}

html body #shotFullscreenEditor .shot-point-box textarea::-webkit-scrollbar-thumb {
  min-height: 24px;
  border: 2px solid #0d1417;
  border-radius: 8px;
  background: #48585f;
}

html body #shotFullscreenEditor .shot-point-box textarea::-webkit-scrollbar-thumb:hover {
  background: #617178;
}

html body #shotFullscreenEditor .shot-point-box textarea::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Keep the storyboard prompt editor above its page backdrop. It is portaled to
   <body> by the editor script so the backdrop cannot blur or cover its panel. */
html body > .storyboard-prompt-backdrop {
  z-index: 900 !important;
}

html body > .storyboard-inline-editor {
  position: fixed !important;
  z-index: 901 !important;
  filter: none !important;
  opacity: 1 !important;
  isolation: isolate;
}

/* 图片、视频列表不展示生成提示词；失败原因仍占据内容行。 */
html body .records-list.is-media-record-list > .record-item .record-summary-spacer {
  min-height: 18px;
  pointer-events: none;
}

/* 成功媒体新增“添加到资产库”入口，视觉与原有三个操作按钮保持一致。 */
html body .record-add-asset-icon[data-asset-added-kind] {
  width: auto;
  min-width: 45px;
  flex-basis: auto;
  padding: 0 9px;
  border-color: rgba(79, 213, 189, .48);
  color: #63dcc7;
}

html body .record-add-asset-icon[data-asset-added-kind] svg,
html body .record-add-asset-icon[data-asset-added-kind]::before {
  display: none;
  content: none;
}

html body .record-add-asset-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

html body .record-add-asset-icon.is-error,
html body .dialogue-result-insert-actions [data-dialogue-add-asset].is-error {
  border-color: rgba(255, 110, 110, .72) !important;
  color: #ff8d8d !important;
}

html body .generated-asset-category-menu {
  position: fixed;
  z-index: 30000;
  box-sizing: border-box;
  width: 172px;
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid #34464d;
  border-radius: 10px;
  background: #0e171b;
  color: #dfe8e6;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .025);
}

html body .generated-asset-category-title {
  display: block;
  padding: 3px 5px 6px;
  color: #8fa2a7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

html body .generated-asset-category-menu > button {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border: 1px solid #2b3b42;
  border-radius: 7px;
  background: #121d22;
  color: #cbd7d5;
  text-align: left;
  cursor: pointer;
}

html body .generated-asset-category-menu > button b {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: #19302f;
  color: #63dcc7;
  font-size: 11px;
}

html body .generated-asset-category-menu > button span {
  font-size: 12px;
  font-weight: 750;
}

html body .generated-asset-category-menu > button:hover,
html body .generated-asset-category-menu > button:focus-visible {
  outline: none;
  border-color: rgba(79, 213, 189, .58);
  background: #18282b;
  color: #ffffff;
}

html body .generated-asset-category-menu > button.is-current,
html body .generated-asset-category-menu > button.is-current:disabled {
  border-color: rgba(79, 213, 189, .38);
  background: rgba(34, 96, 88, .2);
  color: #73dfcc;
  cursor: default;
  opacity: 1;
}

html body .generated-asset-category-menu > button.generated-asset-remove {
  margin-top: 3px;
  border-color: rgba(219, 87, 87, .36);
  color: #ff9c9c;
}

html body .generated-asset-category-menu > button.generated-asset-remove b {
  background: rgba(139, 48, 48, .22);
  color: #ff8d8d;
}

html body .generated-asset-category-menu > button.generated-asset-remove:hover,
html body .generated-asset-category-menu > button.generated-asset-remove:focus-visible {
  border-color: rgba(255, 110, 110, .68);
  background: rgba(121, 42, 42, .2);
  color: #ffd0d0;
}

/* 顶部显示对话、分镜头、图片、视频和语音五个主页面。 */
html body .records-filters {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* 窄面板中工具栏必须收缩或换行，任何按钮都不能越过输入框外边界。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-tools {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  overflow: visible !important;
}

html body .dialogue-bottom-input .dialogue-agent-wrap {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

html body .dialogue-bottom-input .dialogue-agent-btn {
  box-sizing: border-box !important;
  max-width: 122px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .dialogue-bottom-input #dialoguePrefBtn {
  box-sizing: border-box !important;
  min-width: 88px !important;
  max-width: 190px !important;
  flex: 1 1 126px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .dialogue-bottom-input .dialogue-skill-btn {
  box-sizing: border-box !important;
  min-width: 84px !important;
  max-width: 118px !important;
  flex: 0 1 112px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .dialogue-bottom-input .dialogue-at-btn,
html body .dialogue-bottom-input .dialogue-video-tools,
html body .dialogue-bottom-input .dialogue-send {
  flex-shrink: 0 !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-send {
  max-width: 90px !important;
  margin-left: auto !important;
}

@media (max-width: 560px) {
  html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-tools {
    gap: 6px !important;
  }

  html body .dialogue-bottom-input #dialoguePrefBtn {
    max-width: 150px !important;
  }
}

/* CEP 的 Chromium 无法稳定解码 HEVC Main 10；保留原视频，并允许交给 Premiere 的源监视器预览。 */
html body .xiake-video-compatibility-host {
  position: relative !important;
  isolation: isolate;
  background: #0b1114;
}

html body .xiake-video-compatibility-host > video.is-video-compatibility-unavailable {
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .xiake-video-compatibility-fallback {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  box-sizing: border-box;
  padding: 14px;
  overflow: hidden;
  color: #dce9ed;
  text-align: center;
  background: linear-gradient(135deg, rgba(10, 18, 21, .97), rgba(16, 30, 33, .97));
}

html body .xiake-video-compatibility-fallback strong {
  font-size: 14px;
  line-height: 1.35;
}

html body .xiake-video-compatibility-fallback small,
html body .xiake-video-compatibility-state {
  color: #91a5ad;
  font-size: 12px;
  line-height: 1.35;
}

html body .xiake-video-compatibility-fallback button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #36cbbd;
  border-radius: 6px;
  color: #cffff7;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  background: #123633;
}

html body .xiake-video-compatibility-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}

html body .xiake-video-compatibility-state.is-error {
  color: #ff716f;
}

html body .xiake-video-compatibility-fallback button:hover:not(:disabled) {
  color: #062824;
  background: #52d9c9;
}

html body .xiake-video-compatibility-fallback button:disabled {
  opacity: .7;
  cursor: wait;
}

html body .record-thumb.has-generated-media .xiake-video-compatibility-fallback {
  gap: 3px;
  padding: 5px;
}

html body .record-thumb.has-generated-media .xiake-video-compatibility-fallback strong {
  font-size: 10px;
}

html body .record-thumb.has-generated-media .xiake-video-compatibility-fallback small {
  display: none;
}

html body .record-thumb.has-generated-media .xiake-video-compatibility-fallback button {
  min-height: 22px;
  padding: 3px 5px;
  font-size: 10px;
}

html body .record-thumb.has-generated-media .xiake-video-compatibility-actions {
  gap: 3px;
}

html body .record-thumb.has-generated-media .xiake-video-compatibility-state {
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 对话生成技能：独立放在 @ 后，选中状态只在技能面板和按钮上体现。 */
html body .dialogue-bottom-input #dialogueSkillsBtn {
  min-width: 58px !important;
  padding-inline: 12px !important;
  flex: 0 1 auto !important;
}

html body .dialogue-skills-popover {
  width: min(430px, calc(100% - 24px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

html body .dialogue-skill-category-tabs {
  display: flex;
  gap: 6px;
  padding: 9px 11px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(167, 187, 191, .12);
  background: #0f191e;
  scrollbar-width: thin;
}

html body .dialogue-skill-category-tabs > button {
  min-width: max-content;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #2b3c43;
  border-radius: 6px;
  background: #111d22;
  color: #879a9e;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

html body .dialogue-skill-category-tabs > button:hover {
  border-color: #3d565d;
  color: #b8c8c8;
}

html body .dialogue-skill-category-tabs > button.is-active {
  border-color: rgba(79, 213, 189, .48);
  background: rgba(79, 213, 189, .12);
  color: #70d9c9;
}

html body .dialogue-skill-category-tabs small {
  min-width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(79, 213, 189, .15);
  color: #75d9ca;
  font-size: 9px;
}

html body .dialogue-skill-choice-list {
  display: grid;
  gap: 7px;
  min-height: 210px;
  max-height: 330px;
  padding: 11px 13px;
}

html body .dialogue-skill-choice {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #2c3d44;
  border-radius: 7px;
  background: #101a20;
  color: #cbd7d5;
  text-align: left;
  cursor: pointer;
}

html body .dialogue-skill-choice > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #17272c;
  color: #72d8c8;
  font-size: 14px;
}

html body .dialogue-skill-choice > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

html body .dialogue-skill-choice strong {
  font-size: 12px;
}

html body .dialogue-skill-choice small {
  overflow: hidden;
  color: #70858a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .dialogue-skill-choice > i {
  color: #687d82;
  font-size: 14px;
  font-style: normal;
  text-align: center;
}

html body .dialogue-skill-choice:hover,
html body .dialogue-skill-choice.is-active {
  border-color: rgba(79, 213, 189, .52);
  background: #13231f;
}

html body .dialogue-skill-choice.is-active > b,
html body .dialogue-skill-choice.is-active > i {
  color: #68d8c7;
}

html body .dialogue-texture-skill {
  min-width: 0;
}

html body .dialogue-texture-settings {
  display: grid;
  gap: 12px;
  margin-top: 7px;
  padding: 12px;
  border: 1px solid #2c3d44;
  border-radius: 7px;
  background: #101a20;
}

html body .dialogue-texture-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

html body .dialogue-texture-group > legend {
  margin-bottom: 6px;
  padding: 0;
  color: #91a5a8;
  font-size: 11px;
  font-weight: 600;
}

html body .dialogue-texture-group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

html body .dialogue-texture-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

html body .dialogue-texture-actions button,
html body .dialogue-texture-group button {
  min-width: 0;
  min-height: 32px;
  padding: 6px 3px;
  border: 1px solid #2c3d44;
  border-radius: 6px;
  background: #111d22;
  color: #b8c8c8;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

html body .dialogue-texture-actions button {
  padding: 6px 10px;
}

html body .dialogue-texture-actions button:hover,
html body .dialogue-texture-actions button:focus-visible,
html body .dialogue-texture-group button:hover,
html body .dialogue-texture-group button:focus-visible {
  border-color: rgba(79, 213, 189, .52);
  color: #dbe5e3;
}

html body .dialogue-texture-group button[aria-pressed="true"] {
  border-color: rgba(79, 213, 189, .52);
  background: rgba(79, 213, 189, .12);
  color: #70d9c9;
}

html body .dialogue-skill-context-menu {
  position: absolute;
  z-index: 40;
  min-width: 112px;
  padding: 4px;
  border: 1px solid #34474e;
  border-radius: 6px;
  background: #111c21;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .48);
}

html body .dialogue-skill-context-menu.hidden {
  display: none !important;
}

html body .dialogue-skill-context-menu > button {
  width: 100%;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #d5dfdd;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}

html body .dialogue-skill-context-menu > button:hover,
html body .dialogue-skill-context-menu > button:focus-visible {
  outline: none;
  background: rgba(79, 213, 189, .14);
  color: #83e4d5;
}

html body .dialogue-skills-foot {
  gap: 10px;
}

html body .dialogue-skill-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

html body .dialogue-skills-foot > .dialogue-skill-add {
  border-color: rgba(79, 213, 189, .38);
  background: rgba(79, 213, 189, .10);
  color: #75dccc;
}

html body .dialogue-skills-foot > .dialogue-skill-add:hover {
  border-color: rgba(79, 213, 189, .62);
  background: rgba(79, 213, 189, .16);
  color: #a1eee2;
}

html body .dialogue-custom-skill-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3, 8, 10, .76);
  backdrop-filter: blur(3px);
}

html body .dialogue-custom-skill-modal.hidden {
  display: none !important;
}

html body .dialogue-custom-skill-dialog {
  box-sizing: border-box;
  width: min(430px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(167, 187, 191, .25);
  border-radius: 9px;
  background: #0d171c;
  color: #dbe5e3;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .62);
}

html body .dialogue-custom-skill-head {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(167, 187, 191, .13);
  background: #101a1f;
}

html body .dialogue-custom-skill-head > div {
  display: grid;
  gap: 2px;
}

html body .dialogue-custom-skill-head small {
  color: #68d8c7;
  font-size: 9px;
  font-weight: 750;
}

html body .dialogue-custom-skill-head h3 {
  margin: 0;
  color: #edf4f2;
  font-size: 15px;
}

html body .dialogue-custom-skill-head > button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #33464d;
  border-radius: 6px;
  background: #142027;
  color: #c6d2d1;
  font-size: 17px;
}

html body .dialogue-custom-skill-fields {
  display: grid;
  gap: 11px;
  padding: 14px;
  overflow-y: auto;
}

html body .dialogue-custom-skill-fields label {
  display: grid;
  gap: 6px;
}

html body .dialogue-custom-skill-fields label > span {
  color: #91a3a7;
  font-size: 10px;
  font-weight: 700;
}

html body .dialogue-custom-skill-fields input,
html body .dialogue-custom-skill-fields select,
html body .dialogue-custom-skill-fields textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid #304249;
  border-radius: 6px;
  outline: none;
  background: #101a1f;
  color: #e1e9e7;
  font: inherit;
  font-size: 12px;
}

html body .dialogue-custom-skill-fields input,
html body .dialogue-custom-skill-fields select {
  min-height: 38px;
  padding: 0 10px;
}

html body .dialogue-custom-skill-fields textarea {
  min-height: 112px;
  padding: 9px 10px;
  line-height: 1.55;
  resize: vertical;
}

html body .dialogue-custom-skill-fields input:focus,
html body .dialogue-custom-skill-fields select:focus,
html body .dialogue-custom-skill-fields textarea:focus {
  border-color: rgba(79, 213, 189, .62);
  box-shadow: 0 0 0 1px rgba(79, 213, 189, .08);
}

html body .dialogue-custom-skill-error {
  min-height: 15px;
  margin: -2px 0 0;
  color: #e49398;
  font-size: 10px;
}

html body .dialogue-custom-skill-actions {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(167, 187, 191, .13);
  background: #101a1f;
}

html body .dialogue-custom-skill-actions button {
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid #34464d;
  border-radius: 6px;
  background: #142027;
  color: #c6d2d1;
  font-size: 11px;
  font-weight: 720;
}

html body .dialogue-custom-skill-actions button[type="submit"] {
  border-color: rgba(79, 213, 189, .55);
  background: rgba(79, 213, 189, .15);
  color: #7be0d0;
}

/* 对话输入框最终样式：输入盒贴齐外层卡片，外层略提亮，输入区域更深且圆角更小。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #172126 !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-input-content {
  border-color: #334247 !important;
  border-radius: 8px !important;
  background: #11171b !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-prompt-editor {
  border-radius: 7px !important;
}

/* 项目名称：无边框、无前置图标；名称悬停高亮，保留末尾展开提示与原有点击展开功能。 */
html body #projectSelectorBtn.project-selector-btn {
  min-width: auto !important;
  min-height: 34px !important;
  gap: 6px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #edf3f2 !important;
}

html body #projectSelectorBtn.project-selector-btn:hover,
html body #projectSelectorBtn.project-selector-btn:focus-visible,
html body #projectSelectorBtn.project-selector-btn.is-active {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #projectSelectorBtn .project-selector-label {
  display: inline-block;
  max-width: min(28vw, 220px);
  overflow: hidden;
  color: #edf3f2;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms ease;
}

html body #projectSelectorBtn:hover .project-selector-label,
html body #projectSelectorBtn:focus-visible .project-selector-label {
  color: var(--accent) !important;
}

html body #projectSelectorBtn .project-selector-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #91a7a8;
  pointer-events: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 120ms ease;
}

html body #projectSelectorBtn:hover .project-selector-chevron,
html body #projectSelectorBtn:focus-visible .project-selector-chevron {
  color: var(--accent);
}

/* 角色声音入口：默认使用白色图标，悬停时变绿；已选声音仍保持轻量，不抢占卡片内容。 */
html body .asset-voice-icon,
html body .asset-voice-icon.has-voice {
  border-color: rgba(174, 193, 194, .34) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #f2f7f6 !important;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}

html body .asset-voice-icon:hover,
html body .asset-voice-icon.is-playing {
  border-color: rgba(79, 213, 189, .76) !important;
  background: rgba(79, 213, 189, .14) !important;
  color: var(--accent) !important;
  transform: translateY(-1px);
}

/* 对话生成区：外层卡片铺到插件边缘，内部输入框和工具栏整体略加宽。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input {
  --dialogue-card-edge-gap: 42px;
  left: 42px !important;
  right: 42px !important;
  width: auto !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  isolation: isolate;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: -1px;
  left: calc(-1 * var(--dialogue-card-edge-gap));
  right: calc(-1 * var(--dialogue-card-edge-gap));
  box-sizing: border-box;
  border: 1px solid #37464e;
  border-radius: 0;
  background: #172126;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .025);
  pointer-events: none;
}

@media (max-width: 680px) {
  html body .records-modal.is-dialogue-view .dialogue-bottom-input {
    --dialogue-card-edge-gap: 26px;
    left: 26px !important;
    right: 26px !important;
  }
}

@media (max-width: 520px) {
  html body .records-modal.is-dialogue-view .dialogue-bottom-input {
    --dialogue-card-edge-gap: 20px;
    left: 20px !important;
    right: 20px !important;
  }
}

/* 对话记录滚动区已在输入卡片上方结束，不再需要为固定输入卡片预留大段空白。 */
html body .records-modal.is-dialogue-view .dialogue-record-main {
  padding-bottom: 20px !important;
}

html body .records-modal.is-dialogue-view .dialogue-record-main::after {
  height: 20px !important;
}

/* 分镜生成类型只在双击编辑弹窗和批量生成弹窗中设置。 */
.storyboard-batch-shot-types {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(97, 143, 148, .28);
  border-radius: 10px;
  background: rgba(13, 27, 32, .78);
}

.storyboard-batch-shot-types-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.storyboard-batch-shot-types-head h3 {
  margin: 0;
  color: #4fd5bd;
  font-size: 15px;
}

.storyboard-batch-shot-types-head small {
  color: #71888b;
  font-size: 11px;
}

.storyboard-batch-shot-type-list {
  display: grid;
  max-height: 188px;
  overflow-y: auto;
  gap: 8px;
  padding-right: 3px;
}

.storyboard-batch-shot-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(105, 150, 154, .22);
  border-radius: 8px;
  background: #0b171c;
}

.storyboard-batch-shot-type > span {
  min-width: 0;
}

.storyboard-batch-shot-type b,
.storyboard-batch-shot-type small {
  display: block;
}

.storyboard-batch-shot-type b {
  color: #dce8e5;
  font-size: 12px;
}

.storyboard-batch-shot-type small {
  overflow: hidden;
  margin-top: 3px;
  color: #71888b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-batch-shot-type select {
  width: 100%;
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(105, 150, 154, .38);
  border-radius: 7px;
  outline: 0;
  background: #101f24;
  color: #d9e8e5;
  font: inherit;
}

.storyboard-batch-shot-type select:focus {
  border-color: #4fd5bd;
  box-shadow: 0 0 0 2px rgba(79, 213, 189, .12);
}

html body .storyboard-inline-editor .storyboard-video-duration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

html body .storyboard-inline-editor .storyboard-preference-popover > label.hidden {
  display: none !important;
}

html body .storyboard-inline-editor .storyboard-video-duration input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(105, 139, 141, .28);
  border-radius: 6px;
  outline: 0;
  background: #111b1f;
  color: #e5efee;
  font: inherit;
}

html body .storyboard-inline-editor .storyboard-video-duration input:focus {
  border-color: rgba(77, 210, 194, .62);
}

html body .storyboard-inline-editor .storyboard-video-duration i {
  color: #71888a;
  font-size: 11px;
  font-style: normal;
}

@media (max-width: 520px) {
  .storyboard-batch-shot-type {
    grid-template-columns: 1fr;
  }
}

/* 顶部资产库按钮：文字更醒目，按钮外框更紧凑。 */
html body #chooseFolderBtn {
  width: 82px !important;
  min-width: 82px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* 分镜三列始终共用同一组比例；插件总宽度变化时同步放大或缩小。 */
html body .records-list.is-storyboard-list .storyboard-board {
  --storyboard-column-tracks: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 6fr);
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

html body .records-list.is-storyboard-list .storyboard-column-head,
html body .records-list.is-storyboard-list .storyboard-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: var(--storyboard-column-tracks) !important;
  box-sizing: border-box;
}

html body .records-list.is-storyboard-list .storyboard-card-list,
html body .records-list.is-storyboard-list .storyboard-column-head > span,
html body .records-list.is-storyboard-list .storyboard-cell {
  min-width: 0 !important;
  box-sizing: border-box;
}

html body .records-list.is-storyboard-list .storyboard-cell > *,
html body .records-list.is-storyboard-list .storyboard-block,
html body .records-list.is-storyboard-list .storyboard-block > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 生成记录：模型使用简称，已关联资产紧跟模型并共用同一标签样式。 */
html body .records-list > .record-item .record-model-tag,
html body .records-list > .record-item .record-asset-tag[data-asset-added-kind] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 9px !important;
  border: 1px solid #34434b !important;
  border-radius: 7px !important;
  background: #131d23 !important;
  color: #9eb0b5 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body .records-list > .record-item .record-model-tag:hover,
html body .records-list > .record-item .record-model-tag:focus-visible,
html body .records-list > .record-item .record-asset-tag[data-asset-added-kind]:hover,
html body .records-list > .record-item .record-asset-tag[data-asset-added-kind]:focus-visible {
  border-color: rgba(79, 213, 189, .42) !important;
  background: #131d23 !important;
  color: #cfe0dc !important;
}

html body .records-list > .record-item .record-asset-tag[data-asset-added-kind] .record-add-asset-label {
  color: inherit !important;
  font: inherit !important;
}

/* 对话滚动区：最后一条内容直接延伸到输入框上沿，不再保留多层底部占位。 */
html body .records-modal.is-dialogue-view .dialogue-record-main {
  padding-bottom: 0 !important;
}

html body .records-modal.is-dialogue-view .dialogue-record-main::after {
  display: none !important;
  height: 0 !important;
}

html body .records-modal.is-dialogue-view .dialogue-thread-entry:last-child,
html body .records-modal.is-dialogue-view .dialogue-thread-entry:last-child .dialogue-ai-result {
  padding-bottom: 0 !important;
}

html body .records-modal.is-dialogue-view .dialogue-thread-entry:last-child .dialogue-ai-result > p:last-child {
  margin-bottom: 0 !important;
}

/* GPT 对话：为生成时间预留独立的右下角位置，并让最后一条回答与输入区保持呼吸空间。 */
html body .records-modal.is-dialogue-view .dialogue-ai-result.is-chat-answer {
  position: relative;
  padding-bottom: 30px;
}

html body .records-modal.is-dialogue-view .dialogue-ai-result.is-chat-answer .dialogue-result-time {
  position: absolute;
  right: 0;
  bottom: 8px;
  color: #71878b;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}

html body .records-modal.is-dialogue-view .dialogue-thread-entry:last-child {
  padding-bottom: 32px !important;
}

html body .records-modal.is-dialogue-view .dialogue-thread-entry:last-child .dialogue-ai-result.is-chat-answer {
  padding-bottom: 30px !important;
}

/* 模型完整信息浮窗：压缩高度后固定优先出现在当前条目上方，不遮挡鼠标所在条目。 */
html body .dialogue-model-hover-card {
  width: min(310px, calc(100vw - 18px));
  gap: 2px;
  padding: 6px 10px;
  line-height: 1.2;
}

html body .dialogue-model-hover-card > small {
  line-height: 1.2;
}

html body .dialogue-model-hover-card > strong {
  font-size: 11px;
  line-height: 1.3;
}

html body .dialogue-model-hover-card > span,
html body .dialogue-model-hover-card > code {
  font-size: 9px;
  line-height: 1.25;
}

/* 角色配音：上传入口与“声音库”同排居中，左侧只保留当前配音信息。 */
html body .asset-voice-library-head {
  position: relative;
  align-items: center;
}

html body .asset-voice-library-head > div {
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 68px;
}

html body .asset-voice-library-head > div > span {
  flex: 0 0 auto;
}

html body .asset-voice-library-head .asset-voice-library-upload {
  width: auto;
  min-width: 86px;
  min-height: 30px;
  margin: 0;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
}

html body .asset-voice-library-head .asset-voice-library-upload > span {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

html body .asset-voice-library-head > b {
  position: absolute;
  right: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}

@media (max-width: 520px) {
  html body .asset-voice-library-head > div {
    gap: 8px;
    padding: 0 56px;
  }

  html body .asset-voice-library-head .asset-voice-library-upload {
    min-width: 80px;
    padding-inline: 8px;
  }
}

/* 角色配音：在左侧底部确认当前已选声音。 */
html body .asset-voice-popover .asset-voice-confirm {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  margin-top: auto;
  padding: 0 14px;
  display: grid;
  place-items: center;
  border: 1px solid #4fd5bd;
  border-radius: 5px;
  background: #4fd5bd;
  color: #071713;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(79, 213, 189, .15);
}

html body .asset-voice-popover .asset-voice-confirm:hover,
html body .asset-voice-popover .asset-voice-confirm:focus-visible {
  border-color: #72e5d0;
  background: #72e5d0;
  color: #06130f;
}

/* 对话记录：滚动历史内容时，日期和筛选工具栏固定在内容区顶部。 */
html body .records-modal.is-dialogue-view .dialogue-record-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 260 !important;
  background: #111618 !important;
}

/* 图片、视频记录：底部固定显示视图切换和排序方式。 */
html body .records-modal.is-media-view {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

html body .media-records-toolbar {
  box-sizing: border-box;
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px 11px;
  border-top: 1px solid #27343b;
  background: #111719;
}

html body .media-records-toolbar.hidden {
  display: none !important;
}

html body .media-records-view-switch,
html body .media-records-sort {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

html body .media-records-view-switch > span,
html body .media-records-sort > span {
  flex: 0 0 auto;
  color: #71878d;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

html body .media-records-view-switch > button,
html body .media-records-sort > select {
  box-sizing: border-box;
  width: auto;
  min-width: 54px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #34464e;
  border-radius: 6px;
  background: #121a1e;
  color: #aebdc0;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

html body .media-records-view-switch > button:hover,
html body .media-records-view-switch > button:focus-visible,
html body .media-records-view-switch > button.is-active {
  outline: none;
  border-color: #4fd5bd;
  background: rgba(79, 213, 189, .13);
  color: #62dfc8;
}

html body .media-records-sort > select {
  min-width: 114px;
  padding-right: 26px;
  cursor: pointer;
}

html body .media-records-sort > select:hover,
html body .media-records-sort > select:focus-visible {
  outline: none;
  border-color: rgba(79, 213, 189, .62);
  color: #d6e3e1;
}

/* 列表保持原有横向卡片；平铺模式改为自适应多列，卡片内的原有操作功能不变。 */
html body .records-list.is-media-record-list.is-list-view {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .records-list.is-media-record-list.is-tile-view {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px !important;
  padding: 12px !important;
}

html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="image"],
html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="video"] {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(116px, auto) !important;
  align-items: stretch !important;
}

html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="image"] .record-thumb-wrap,
html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="video"] .record-thumb-wrap,
html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="image"] .record-thumb,
html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="video"] .record-thumb {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}

html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="image"] .record-body,
html body .records-list.is-media-record-list.is-tile-view > .record-item[data-record-type="video"] .record-body {
  min-height: 146px !important;
  padding: 11px 12px 12px !important;
}

/* 对话栏宽度不足时，将模型与画面偏好收进同一个入口；宽度充足时保留原来的两个按钮。 */
html body .dialogue-model-preference-wrap {
  position: relative;
  display: none;
  min-width: 0;
}

html body .dialogue-model-preference-toggle {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .72fr);
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding-inline: 11px !important;
  white-space: nowrap;
}

html body .dialogue-model-preference-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .dialogue-model-preference-toggle > i {
  color: #637a80;
  font-style: normal;
}

html body .dialogue-model-preference-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 35;
  box-sizing: border-box;
  width: min(286px, calc(100vw - 24px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(80, 201, 181, .28);
  border-radius: 9px;
  background: #111b1f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48);
}

html body .dialogue-model-preference-menu.hidden {
  display: none !important;
}

html body .dialogue-model-preference-menu > button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 6px;
  text-align: left;
}

html body .dialogue-model-preference-menu > button:hover,
html body .dialogue-model-preference-menu > button:focus-visible {
  border-color: rgba(80, 201, 181, .48);
  background: rgba(80, 201, 181, .09);
}

html body .dialogue-model-preference-menu small {
  color: #6fdcca;
  font-size: 11px;
}

html body .dialogue-model-preference-menu strong {
  min-width: 0;
  overflow: hidden;
  color: #e3edec;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .dialogue-model-preference-menu i {
  color: #789094;
  font-size: 17px;
  font-style: normal;
}

@media (max-width: 660px) {
  html body .dialogue-bottom-input #dialoguePrefBtn,
  html body .dialogue-bottom-input .dialogue-skill-btn {
    display: none !important;
  }

  html body .dialogue-model-preference-wrap {
    display: block;
    flex: 1 1 150px;
    max-width: 216px;
  }
}

/* 资产库分区层次：角色、场景和道具使用轻微不同的深色底，空状态复用现有文件夹图标。 */
html body #assetLibraryModal .asset-gallery > .asset-category {
  box-sizing: border-box;
  margin: -12px;
  padding: 12px;
  border: 1px solid rgba(126, 151, 160, .085);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .012);
}

html body #assetLibraryModal .asset-gallery > .asset-category:nth-of-type(1) {
  background: #172022;
}

html body #assetLibraryModal .asset-gallery > .asset-category:nth-of-type(2) {
  background: #141e23;
}

html body #assetLibraryModal .asset-gallery > .asset-category:nth-of-type(3) {
  background: #171c20;
}

html body #assetLibraryModal .asset-gallery > .asset-category > h3 {
  padding-inline: 2px;
}

html body #assetLibraryModal .asset-card-empty.is-asset-empty {
  min-height: 104px;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  border-color: rgba(126, 151, 160, .13);
  background: rgba(8, 15, 18, .34);
  text-align: center;
}

html body #assetLibraryModal .asset-empty-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(79, 213, 189, .16);
  border-radius: 50%;
  background: rgba(79, 213, 189, .055);
  color: #6da59e;
}

html body #assetLibraryModal .asset-empty-icon > svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  html body #assetLibraryModal .asset-gallery > .asset-category {
    margin: -10px;
    padding: 10px;
  }
}

html body .records-list.is-media-record-list.is-tile-view > .record-item .record-tags {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: flex-start;
  justify-items: start;
  gap: 7px !important;
}

html body .records-list.is-media-record-list.is-tile-view > .record-item .record-model-tag {
  max-width: 100% !important;
  justify-self: start;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .records-list.is-media-record-list.is-tile-view > .record-item .record-insert-actions {
  justify-self: end;
  margin-left: 0;
  padding-left: 0;
}

@media (max-width: 470px) {
  html body .media-records-toolbar {
    gap: 8px;
    padding-inline: 9px;
  }

  html body .media-records-view-switch > span,
  html body .media-records-sort > span {
    display: none;
  }

  html body .media-records-view-switch > button {
    min-width: 48px;
    padding-inline: 8px;
  }

  html body .media-records-sort > select {
    min-width: 108px;
  }
}

/* 语音记录没有画面缩略图，使用紧凑播放器保持与图片、视频卡片相同的占位尺寸。 */
html body .record-thumb .record-audio-preview {
  width: 100%;
  height: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(79, 213, 189, .13), rgba(58, 91, 186, .16));
}

html body .record-audio-preview > b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #9cf3df;
  background: rgba(79, 213, 189, .16);
  border: 1px solid rgba(118, 235, 207, .28);
}

html body .record-audio-preview > audio {
  width: 100%;
  min-width: 0;
}

html body .all-generation-record-audio-preview {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #a1f3df;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(79, 213, 189, .13), rgba(58, 91, 186, .16));
}

/* 语音方式在模型选择中配置；即时克隆复用既有的音频上传和 NAS 存储链路。 */
html body .dialogue-voice-preference-panel {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding: 11px 14px 0;
  border-top: 1px solid rgba(151, 188, 216, .18);
}

html body .dialogue-voice-preference-panel.hidden {
  display: none;
}

html body .dialogue-voice-preference-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

html body .dialogue-voice-preference-head strong {
  color: #e7faf5;
  font-size: 12px;
}

html body .dialogue-voice-preference-head span {
  color: rgba(208, 232, 240, .62);
  font-size: 11px;
  text-align: right;
}

html body .dialogue-voice-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html body .dialogue-voice-mode label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(151, 188, 216, .22);
  border-radius: 9px;
  cursor: pointer;
}

html body .dialogue-voice-mode label:focus-within {
  border-color: rgba(91, 226, 194, .72);
  background: rgba(72, 205, 175, .10);
}

html body .dialogue-voice-mode label.is-disabled {
  opacity: .48;
  cursor: not-allowed;
}

html body .dialogue-voice-mode input {
  accent-color: #54dcc0;
  margin-top: 3px;
}

html body .dialogue-voice-mode span,
html body .dialogue-voice-clone-composer label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html body .dialogue-voice-mode b,
html body .dialogue-voice-clone-composer label > span {
  color: #e7faf5;
  font-size: 12px;
}

html body .dialogue-voice-mode small,
html body .dialogue-voice-hint,
html body .dialogue-voice-clone-composer > p {
  color: rgba(208, 232, 240, .72);
  font-size: 11px;
  line-height: 1.45;
}

html body .dialogue-voice-clone-composer {
  display: grid;
  gap: 8px;
  margin: 0 0 9px;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid rgba(93, 220, 193, .24);
  background: linear-gradient(135deg, rgba(30, 72, 70, .24), rgba(29, 43, 68, .32));
}

html body .dialogue-voice-clone-composer.hidden {
  display: none;
}

html body .dialogue-voice-clone-composer > p,
html body .dialogue-voice-hint {
  margin: 0;
}

html body .dialogue-voice-clone-composer > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

html body .dialogue-voice-clone-composer > p b {
  color: #62e3c5;
}

html body .dialogue-voice-clone-composer textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  color: #e8f7fa;
  border: 1px solid rgba(151, 188, 216, .28);
  border-radius: 7px;
  background: rgba(8, 22, 32, .68);
  padding: 7px 8px;
}

@media (max-width: 560px) {
  html body .dialogue-voice-mode {
    grid-template-columns: 1fr;
  }
}

/* 对话设置独立于输入框：始终位于窗口内，长内容只在面板中滚动。 */
html body .dialogue-overlay-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

html body .dialogue-overlay-layer > * {
  pointer-events: auto;
}

html body .dialogue-overlay-layer .dialogue-tool-popover {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1000 !important;
  box-sizing: border-box;
  width: min(450px, calc(100vw - 24px));
  height: auto;
  max-height: min(540px, calc(100vh - 24px)) !important;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) !important;
}

html body .dialogue-overlay-layer .dialogue-tool-head,
html body .dialogue-overlay-layer .dialogue-tool-foot,
html body .dialogue-overlay-layer .dialogue-skill-category-tabs,
html body .dialogue-overlay-layer .dialogue-mention-tabs {
  flex: 0 0 auto;
}

html body .dialogue-overlay-layer .dialogue-tool-scroll {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html body .dialogue-overlay-layer #dialoguePrefPanel {
  width: min(480px, calc(100vw - 24px));
  height: min(520px, calc(100vh - 24px));
}

html body .dialogue-overlay-layer .dialogue-model-scroll > .dialogue-skill-list {
  display: grid;
  gap: 6px;
}

html body .dialogue-overlay-layer .dialogue-model-scroll > .dialogue-voice-preference-panel {
  margin: 0;
  padding: 11px 0 0;
}

html body .dialogue-overlay-layer .dialogue-skills-popover {
  width: min(430px, calc(100vw - 24px));
}

html body .dialogue-overlay-layer .dialogue-mention-popover {
  width: min(356px, calc(100vw - 24px));
}

@media (max-height: 560px) {
  html body .dialogue-overlay-layer .dialogue-tool-popover {
    max-height: calc(100vh - 16px) !important;
  }

  html body .dialogue-overlay-layer #dialoguePrefPanel {
    height: calc(100vh - 16px);
  }
}

/* 手动拖高对话输入盒后，可编辑区域必须同步占满；覆盖前面的 60/104px 固定高度。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input
  .dialogue-input-content.is-manually-resized .dialogue-prompt-editor,
html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments
  .dialogue-input-content.is-manually-resized .dialogue-prompt-editor {
  height: 100% !important;
  min-height: 60px !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* 原有输入框缩略图：只增加拖动状态，不改变静态布局。 */
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment {
  cursor: grab;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments.is-reordering .dialogue-attachment + .dialogue-attachment {
  margin-left: 5px !important;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments.is-reordering .dialogue-attachment {
  transform: rotate(0) !important;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment.is-order-dragging {
  opacity: .45;
  cursor: grabbing;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment.is-drop-before::before,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment.is-drop-after::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: #48d4c0;
  pointer-events: none;
  z-index: 40;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment.is-drop-before::before { left: -4px; }
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment.is-drop-after::after { right: -4px; }

/* 失败原因最多展示三行，按内容撑开卡片，时间与重试操作保持在独立一行。 */
html body .records-list.is-media-record-list {
  grid-auto-rows: max-content;
}

html body .records-list > .record-item.is-failed .record-body {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

html body .records-list > .record-item.is-failed .record-body > * {
  flex-shrink: 0;
}

html body .records-list > .record-item .record-error-message {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-height: 1.5em;
  max-height: 4.5em;
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
  cursor: help;
}

html body .records-list > .record-item .record-error-message:focus-visible {
  outline: 1px solid #ff686f;
  outline-offset: 3px;
}

html body .records-list > .record-item.is-failed .record-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  min-width: 0;
}

/* 语音失败记录在平铺模式也需要完整宽度展示原因。 */
html body .records-list.is-media-record-list.is-tile-view > .record-item.is-failed[data-record-type="audio"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .records-list.is-media-record-list.is-tile-view > .record-item.is-failed[data-record-type="audio"] .record-thumb-wrap,
html body .records-list.is-media-record-list.is-tile-view > .record-item.is-failed[data-record-type="audio"] .record-thumb {
  width: 100% !important;
}

/* 挂到 body 上，避免卡片和列表的 overflow 裁切完整错误。 */
html body > .record-error-tooltip {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 24px));
  max-height: min(360px, calc(100vh - 24px));
  padding: 12px 14px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 104, 111, .5);
  border-radius: 8px;
  background: #172025;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  color: #ffafb3;
  font: 12px/1.6 "Microsoft YaHei", sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  user-select: text;
}

html body > .record-error-tooltip[hidden] {
  display: none !important;
}

/* 时间线静帧复用上传菜单，在菜单内反馈进度与错误。 */
html body .timeline-still-status {
  margin: 6px 8px;
  color: #91b5b9;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html body .timeline-still-status.is-error { color: #ff858b; }
html body .timeline-still-status[hidden] { display: none !important; }

/* 参考图每行最多三张；悬停、键盘聚焦或排序时展开，提示词同步让位。 */
html body .dialogue-bottom-input.has-reference-attachments {
  --reference-stack-width: var(--reference-stack-collapsed-width, 86px);
  --reference-stack-step: 10px;
}
html body .dialogue-bottom-input.has-reference-attachments.is-reference-expanded {
  --reference-stack-width: var(--reference-stack-expanded-width, 178px);
  --reference-stack-step: 56px;
}
html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments .dialogue-input-content {
  min-height: calc(var(--reference-stack-rows, 1) * 58px + 12px) !important;
}
html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments .dialogue-prompt-editor,
html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments .dialogue-input-content.is-manually-resized .dialogue-prompt-editor,
html body .records-modal.is-dialogue-view .dialogue-bottom-input.has-reference-attachments .dialogue-input-content textarea {
  padding-left: calc(var(--reference-stack-width) + 20px) !important;
  min-height: calc(var(--reference-stack-rows, 1) * 58px + 12px) !important;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments {
  display: block !important;
  width: var(--reference-stack-width) !important;
  height: calc(var(--reference-stack-rows, 1) * 58px) !important;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-list {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(var(--reference-stack-columns, 3), var(--reference-stack-step)) !important;
  grid-auto-rows: 52px !important;
  grid-auto-flow: row !important;
  align-content: start !important;
  align-items: start !important;
  justify-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  gap: 6px 0 !important;
  padding: 3px 12px 3px 4px !important;
  overflow: visible !important;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment-list > .dialogue-attachment,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments:hover .dialogue-attachment-list > .dialogue-attachment,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments:focus-within .dialogue-attachment-list > .dialogue-attachment,
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments.is-reordering .dialogue-attachment-list > .dialogue-attachment {
  margin: 0 !important;
  transform: none !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(3n+1) { z-index: 6; }
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(3n+2) { z-index: 5; }
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-attachment:nth-child(3n) { z-index: 4; }
html body .dialogue-bottom-input .dialogue-reference-strip.has-attachments .dialogue-upload-wrap {
  position: absolute !important;
  right: 0 !important;
  bottom: -3px !important;
  margin: 0 !important;
}

/* 视频生成提示词区域跟随当前画幅；宿主面板缩放时宽高同步变化。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input.is-video-generation-mode .dialogue-input-content {
  box-sizing: border-box !important;
  width: min(var(--dialogue-composer-resize-width, 100%), 100%) !important;
  max-width: var(--dialogue-video-max-width, 100%) !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: var(--dialogue-video-aspect, 16 / 9) !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input.is-video-generation-mode .dialogue-prompt-editor {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* 上传菜单打开时整体越过输入框顶部的拉高热区，避免菜单项误触发上下拖拽。 */
html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-reference-strip.is-upload-menu-open {
  z-index: 60 !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-upload-wrap.is-menu-open {
  z-index: 61 !important;
}

html body .records-modal.is-dialogue-view .dialogue-bottom-input .dialogue-upload-menu.opens-down {
  top: calc(100% + 8px) !important;
  bottom: auto !important;
}