:root {
  color-scheme: light;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  --blue: #1463f3;
  --cyan: #16b8c9;
  --rose: #f06a8a;
  --gold: #d6a11d;
  --ink: #101828;
  --muted: #667085;
  --line: #dde5f2;
  --panel: #ffffff;
  --soft: #f5f8fc;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 1180px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: #f3f6fb;
}

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

button {
  cursor: pointer;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.main-nav {
  display: flex;
  width: 82px;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 8px;
  border-right: 1px solid #e2e8f3;
  background: linear-gradient(180deg, #ffffff, #f7f9fd);
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #1463f3, #13b9c8);
  box-shadow: 0 10px 24px rgb(20 99 243 / 22%);
  font-weight: 900;
}

.module-tab {
  display: flex;
  width: 62px;
  height: 68px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 0;
  color: #344054;
  background: transparent;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.module-tab.active {
  border-color: #dbe8ff;
  color: #0b55d9;
  background: #eaf3ff;
  box-shadow: 0 8px 20px rgb(20 99 243 / 10%);
}

.module-tab strong {
  line-height: 1.15;
}

.workspace {
  min-width: 0;
  flex: 1;
}

.view {
  display: none;
  min-height: 100vh;
}

.view.active {
  display: block;
}

.account-menu {
  position: fixed;
  top: 16px;
  right: 22px;
  z-index: 1200;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 220px;
  height: 44px;
  border: 1px solid rgb(20 99 243 / 18%);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
  color: #0f172a;
  background: linear-gradient(135deg, rgb(255 255 255 / 92%), rgb(239 247 255 / 86%));
  box-shadow: 0 14px 36px rgb(15 23 42 / 12%);
  backdrop-filter: blur(16px);
}

.account-trigger:hover,
.account-menu.is-open .account-trigger {
  transform: translateY(-1px);
  border-color: rgb(20 99 243 / 34%);
  box-shadow: 0 18px 44px rgb(20 99 243 / 18%);
}

.account-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 258px;
  border: 1px solid rgb(226 232 240 / 86%);
  border-radius: 18px;
  padding: 16px;
  color: #0f172a;
  background:
    radial-gradient(circle at 84% 16%, rgb(37 99 235 / 12%), transparent 32%),
    #fff;
  box-shadow: 0 24px 60px rgb(15 23 42 / 18%);
}

.account-popover::before {
  position: absolute;
  top: -7px;
  right: 32px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgb(226 232 240 / 86%);
  border-left: 1px solid rgb(226 232 240 / 86%);
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

.account-popover::after {
  position: absolute;
  top: -14px;
  right: 0;
  left: 0;
  height: 14px;
  content: "";
}

.account-popover-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

.account-popover-head strong,
.account-popover-head small {
  display: block;
  overflow: hidden;
  max-width: 168px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-popover-head strong {
  font-size: 14px;
  font-weight: 900;
}

.account-popover-head small {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.account-logout-button {
  display: flex;
  width: 100%;
  height: 42px;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 0;
  border-radius: 12px;
  padding: 0 10px;
  color: #334155;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.account-logout-button:hover {
  color: #dc2626;
  background: #fef2f2;
}

.account-logout-button span {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.account-logout-button span::before {
  position: absolute;
  top: -5px;
  left: 5px;
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.account-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #1463f3, #16b8c9);
  font-size: 14px;
  font-weight: 900;
}

.account-copy {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1.1;
}

.account-copy strong {
  overflow: hidden;
  max-width: 142px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.icon-grid {
  width: 18px;
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 7px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 11px 0 / 7px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 0 11px / 7px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 11px 11px / 7px 7px no-repeat;
}

.icon-image {
  width: 19px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
  background: linear-gradient(135deg, transparent 45%, currentColor 46% 54%, transparent 55%);
}

.icon-video {
  width: 20px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.module-tab.active .icon-grid,
.module-tab.active .icon-image,
.module-tab.active .icon-video {
  color: #fff;
  filter: drop-shadow(0 6px 10px rgb(20 99 243 / 22%));
}

.module-tab.active .icon-grid {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background:
    linear-gradient(#fff, #fff) 6px 6px / 4px 4px no-repeat,
    linear-gradient(#fff, #fff) 12px 6px / 4px 4px no-repeat,
    linear-gradient(#fff, #fff) 6px 12px / 4px 4px no-repeat,
    linear-gradient(#fff, #fff) 12px 12px / 4px 4px no-repeat,
    #1463f3;
}

.module-tab.active .icon-image {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background:
    radial-gradient(circle at 8px 8px, #fff 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 48%, #fff 49% 55%, transparent 56%) 5px 9px / 12px 8px no-repeat,
    #1463f3;
}

.module-tab.active .icon-video {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(90deg, #fff 0 34%, transparent 35%) 9px 7px / 9px 8px no-repeat,
    #1463f3;
}

.topbar {
  display: flex;
  height: 54px;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid #e5ebf4;
  background: #fff;
}

.topbar h1 {
  font-size: 19px;
}

.image-workbench {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 276px 1fr;
  background:
    radial-gradient(circle at 82% 10%, rgb(22 184 201 / 10%), transparent 28%),
    radial-gradient(circle at 38% 92%, rgb(240 106 138 / 9%), transparent 24%),
    #f4f7fb;
}

.chat-sidebar {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 20px 16px;
  border-right: 1px solid #dbe3ef;
  background: rgb(255 255 255 / 82%);
  backdrop-filter: blur(10px);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.app-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #111827, #1463f3);
  font-weight: 900;
}

.app-brand h2 {
  font-size: 18px;
}

.app-brand p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.new-chat {
  height: 40px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #111827;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgb(17 24 39 / 14%);
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 4px 10px;
  color: #475467;
  font-size: 13px;
  font-weight: 800;
}

.history-head small {
  min-width: 24px;
  border-radius: 10px;
  padding: 2px 8px;
  color: #0b55d9;
  background: #eef5ff;
  text-align: center;
}

.chat-history {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.empty-history {
  padding: 14px;
  border: 1px dashed #cbd6e8;
  border-radius: 8px;
  color: #7b8798;
  background: #f8fbff;
  font-size: 12px;
  line-height: 1.6;
}

.history-item {
  position: relative;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 11px 38px 11px 12px;
  color: #344054;
  background: #f6f8fc;
  text-align: left;
}

.history-item.active {
  border-color: #bfd2f4;
  color: #0b55d9;
  background: #eef5ff;
}

.history-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.history-item span {
  display: block;
  margin-top: 4px;
  color: #7b8798;
  font-size: 11px;
}

.history-row {
  position: relative;
}

.history-row .history-item {
  width: 100%;
}

.delete-chat {
  position: absolute;
  right: 8px;
  top: 50%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  color: #98a2b3;
  background: transparent;
  transform: translateY(-50%);
}

.delete-chat::before,
.delete-chat::after {
  position: absolute;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.delete-chat::before {
  transform: rotate(45deg);
}

.delete-chat::after {
  transform: rotate(-45deg);
}

.delete-chat:hover {
  color: #d92d20;
  background: #fff1f0;
}

.image-main {
  display: grid;
  min-width: 0;
  grid-template-rows: 78px 1fr;
}

.image-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  border-bottom: 1px solid #e4ebf5;
  background: rgb(255 255 255 / 72%);
  backdrop-filter: blur(10px);
}

.image-topbar h1 {
  font-size: 24px;
}

.image-topbar p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.conversation {
  display: grid;
  min-height: 0;
  grid-template-rows: 1fr auto;
  padding: 24px;
}

.message-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  padding: 10px 8px 24px;
}

.welcome-card {
  display: grid;
  width: min(760px, 86%);
  place-items: center;
  align-self: center;
  margin-top: 48px;
  text-align: center;
}

.welcome-art {
  position: relative;
  width: 420px;
  height: 240px;
  margin-bottom: 28px;
}

.art-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgb(36 47 79 / 16%);
}

.art-card::before,
.art-card::after {
  position: absolute;
  content: "";
}

.art-1 {
  left: 22px;
  top: 44px;
  width: 170px;
  height: 170px;
  background: linear-gradient(135deg, #f8e4c6, #fffaf1);
}

.art-1::before {
  left: 44px;
  top: 86px;
  width: 82px;
  height: 24px;
  border-radius: 50% 18% 34% 18%;
  background: linear-gradient(135deg, #e3ad71, #925f36);
}

.art-1::after {
  left: 112px;
  top: 46px;
  width: 12px;
  height: 70px;
  border-radius: 9px;
  background: #ad7745;
  transform: rotate(23deg);
}

.art-2 {
  left: 140px;
  top: 10px;
  width: 150px;
  height: 210px;
  background: linear-gradient(160deg, #0f172a, #39546b);
}

.art-2::before {
  left: 34px;
  top: 52px;
  width: 82px;
  height: 112px;
  border-radius: 42px 42px 10px 10px;
  background: linear-gradient(180deg, #dff6ff, #63c7d7);
}

.art-2::after {
  left: 26px;
  bottom: 24px;
  width: 98px;
  height: 8px;
  border-radius: 4px;
  background: rgb(255 255 255 / 45%);
}

.art-3 {
  right: 14px;
  top: 58px;
  width: 150px;
  height: 154px;
  background: linear-gradient(145deg, #ffe3eb, #fff7fb);
}

.art-3::before {
  left: 28px;
  top: 38px;
  width: 94px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff, #f06a8a 62%, #a83b60);
}

.art-3::after {
  left: 36px;
  bottom: 26px;
  width: 78px;
  height: 8px;
  border-radius: 4px;
  background: #f7b7c7;
}

.welcome-card h2 {
  font-size: 30px;
}

.welcome-card p {
  width: 560px;
  max-width: 100%;
  margin-top: 12px;
  color: #526071;
  font-size: 14px;
  line-height: 1.7;
}

.message {
  width: min(760px, 92%);
  border-radius: 10px;
  padding: 14px 16px;
  line-height: 1.7;
}

.message.user {
  align-self: flex-end;
  color: #fff;
  background: #1463f3;
}

.message.user p {
  margin-top: 8px;
}

.message-text p {
  white-space: pre-wrap;
}

.message-text.is-collapsed p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.expand-text,
.edit-from-message {
  margin-top: 8px;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  color: #0b55d9;
  background: #eef5ff;
  font-size: 12px;
  font-weight: 800;
}

.message.user .expand-text,
.message.user .edit-from-message {
  color: #fff;
  background: rgb(255 255 255 / 18%);
}

.elapsed-time {
  margin-top: 10px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.elapsed-time.done {
  margin-bottom: 8px;
  color: #0b55d9;
}

.message.user .elapsed-time {
  color: rgb(255 255 255 / 82%);
}

.generation-card {
  display: grid;
  width: min(360px, 100%);
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 35%, rgb(20 99 243 / 16%), transparent 28%),
    linear-gradient(135deg, #f8fbff, #eef5ff);
}

.generation-card strong {
  color: #0b55d9;
  font-size: 15px;
}

.generation-card span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.generation-card p {
  width: min(300px, 86%);
  color: #344054;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.generation-card.failed {
  border-color: #ffd6d6;
  background:
    radial-gradient(circle at 50% 35%, rgb(217 45 32 / 10%), transparent 28%),
    linear-gradient(135deg, #fff8f8, #fff1f1);
}

.generation-card.failed strong {
  color: #b42318;
}

.generation-loader {
  width: 36px;
  height: 36px;
  border: 4px solid #d7e5ff;
  border-top-color: #1463f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.message.assistant {
  align-self: flex-start;
  border: 1px solid #dce5f2;
  background: #fff;
}

.mock-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.mock-image {
  height: 118px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8e4c6, #fff), radial-gradient(circle at 50% 42%, #1463f3, transparent 34%);
}

.mock-image:nth-child(2) {
  background: linear-gradient(135deg, #d6f7ff, #fff), radial-gradient(circle at 48% 42%, #16b8c9, transparent 34%);
}

.mock-image:nth-child(3) {
  background: linear-gradient(135deg, #ffe3eb, #fff), radial-gradient(circle at 48% 42%, #f06a8a, transparent 34%);
}

.uploaded-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.uploaded-gallery img {
  width: 76px;
  height: 76px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 8px;
  object-fit: cover;
  cursor: grab;
}

.prompt-composer {
  display: grid;
  grid-template-columns: 42px 1fr 210px;
  gap: 12px;
  align-items: end;
  border: 1px solid #d9e2f0;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 14px 35px rgb(37 49 76 / 10%);
}

.prompt-composer.is-dragover {
  border-color: #1463f3;
  background: #f7fbff;
  box-shadow: 0 16px 42px rgb(20 99 243 / 16%);
}

.file-input {
  display: none;
}

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

.upload-preview {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.upload-preview.has-files {
  display: flex;
}

.upload-chip {
  position: relative;
  display: flex;
  max-width: 210px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  padding: 5px 30px 5px 5px;
  background: #f8fbff;
}

.upload-chip img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: cover;
}

.upload-loading {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 3px solid #eef2f7;
  border-top-color: #111827;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.upload-chip span {
  overflow: hidden;
  color: #475467;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.delete-upload {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  color: #98a2b3;
  background: transparent;
  transform: translateY(-50%);
}

.delete-upload::before,
.delete-upload::after {
  position: absolute;
  left: 5px;
  top: 9px;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.delete-upload::before {
  transform: rotate(45deg);
}

.delete-upload::after {
  transform: rotate(-45deg);
}

.delete-upload:hover {
  color: #d92d20;
  background: #fff1f0;
}

.upload-button {
  width: 42px;
  height: 42px;
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background:
    linear-gradient(#1463f3, #1463f3) 14px 20px / 14px 2px no-repeat,
    linear-gradient(#1463f3, #1463f3) 20px 14px / 2px 14px no-repeat,
    #f4f8ff;
}

.prompt-composer textarea {
  height: 68px;
  resize: none;
  border: 0;
  outline: 0;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.6;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.composer-actions select {
  width: 132px;
  height: 36px;
  border: 1px solid #d6dfec;
  border-radius: 18px;
  padding: 0 10px;
  color: #344054;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
}

.send-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) 20px 10px / 2px 17px no-repeat,
    linear-gradient(135deg, transparent 47%, #fff 48% 54%, transparent 55%) 15px 10px / 11px 12px no-repeat,
    #1463f3;
  box-shadow: 0 8px 18px rgb(20 99 243 / 24%);
}

.detail-layout {
  display: grid;
  height: calc(100vh - 54px);
  grid-template-columns: 176px 300px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  background: #f5f7fc;
}

.detail-mode-sidebar {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.detail-mode-tab {
  display: flex;
  width: 100%;
  height: 42px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  color: #172033;
  background: transparent;
}

.detail-mode-tab.active {
  color: #075ee8;
  background: #edf3ff;
}

.detail-mode-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: #1463f3;
  font-size: 18px;
}

.detail-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 4px 9px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.detail-history-list {
  display: grid;
  max-height: calc(100vh - 180px);
  gap: 5px;
  overflow-y: auto;
}

.detail-history-list p {
  padding: 12px 4px;
  color: #98a2b3;
  font-size: 11px;
}

.detail-history-item {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 9px 8px;
  color: #344054;
  background: transparent;
  text-align: left;
}

.detail-history-item:hover,
.detail-history-item.active {
  color: #075ee8;
  background: #f2f6ff;
}

.detail-history-item strong,
.detail-history-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-history-item strong {
  font-size: 12px;
}

.detail-history-item span {
  margin-top: 4px;
  color: #98a2b3;
  font-size: 10px;
}

.detail-panel,
.detail-canvas {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.detail-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.form-block {
  padding: 18px 18px 0;
}

.form-block h2,
.section-title h2 {
  font-size: 14px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-title span {
  border-radius: 4px;
  padding: 3px 8px;
  color: #7e8aa5;
  background: #f2f5ff;
  font-size: 12px;
}

.upload-box {
  display: grid;
  height: 94px;
  place-items: center;
  align-content: center;
  border: 1px dashed #cad5ed;
  border-radius: 8px;
  background: #f8f7ff;
  text-align: center;
  width: 100%;
  color: inherit;
}

.upload-box strong {
  margin-top: 8px;
  font-size: 12px;
}

.upload-box p {
  margin-top: 5px;
  color: #667085;
  font-size: 11px;
}

.upload-cloud {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--blue), var(--blue)) 8px 14px / 12px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 13px 9px / 2px 11px no-repeat,
    #dbe7ff;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.button-row button,
.full-field,
.field-grid select {
  height: 36px;
  border: 1px solid #cfd8ec;
  border-radius: 6px;
  background: #fff;
}

.button-row button,
.mini-action {
  color: #111827;
  font-size: 12px;
}

.mini-action {
  border: 0;
  border-radius: 4px;
  padding: 4px 8px;
  color: #135ce5;
  background: #eaf1ff;
  font-weight: 700;
}

.form-block textarea {
  width: 100%;
  height: 70px;
  resize: none;
  border: 0;
  border-radius: 8px;
  padding: 12px;
  color: #384152;
  background: #f3f5ff;
  font-size: 12px;
  line-height: 1.55;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

label span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

select {
  width: 100%;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 30px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: #f0f3ff;
}

.segmented button {
  border: 0;
  background: transparent;
  color: #344054;
  font-size: 12px;
}

.segmented .selected {
  margin: 3px;
  border-radius: 4px;
  color: #075ee8;
  background: #fff;
  font-weight: 700;
}

.full-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 12px;
}

.full-field span {
  margin: 0;
}

.full-field select {
  width: 76px;
  border: 0;
  color: #135ce5;
  font-weight: 700;
}

.full-field input {
  width: 72px;
  height: 28px;
  border: 1px solid #d7deec;
  border-radius: 5px;
  color: #135ce5;
  text-align: center;
  font-weight: 700;
}

.detail-image-preview {
  display: none;
  position: relative;
  height: 120px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 7px;
  background: #f5f7fa;
}

.detail-image-preview.has-image {
  display: block;
}

.upload-box.has-image {
  display: none;
}

.detail-image-preview.has-image {
  height: 160px;
  margin-top: 0;
}

.detail-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-error {
  display: none;
  margin: 0 0 9px;
  color: #c43232 !important;
  font-size: 12px !important;
}

.detail-error.visible {
  display: block;
}

.generate-blue:disabled {
  cursor: wait;
  opacity: .65;
}

.panel-footer {
  margin-top: auto;
  padding: 20px 18px 16px;
  border-top: 1px solid #edf0f7;
  text-align: center;
}

.generate-blue {
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #075bd8, #347df7);
  box-shadow: 0 10px 22px rgb(20 99 243 / 24%);
  font-weight: 800;
}

.panel-footer p {
  margin-top: 8px;
  color: #8a94a8;
  font-size: 11px;
}

.detail-canvas {
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(#e9edf7 1px, transparent 1px) 0 0 / 20px 20px,
    #fff;
}

.detail-loading {
  text-align: center;
}

.detail-loading span {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 16px;
  border: 3px solid #dce7fb;
  border-top-color: #1463f3;
  border-radius: 50%;
  animation: detail-spin .8s linear infinite;
}

.detail-loading p {
  margin-top: 8px;
  color: #667085;
  font-size: 12px;
}

@keyframes detail-spin {
  to { transform: rotate(360deg); }
}

.detail-results {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 24px;
}

.detail-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.detail-result-head h2 {
  font-size: 20px;
}

.detail-result-head button {
  border: 1px solid #d5ddec;
  border-radius: 6px;
  padding: 7px 12px;
  color: #344054;
  background: #fff;
}

.detail-result-section {
  margin-bottom: 22px;
}

.detail-result-section > h3 {
  margin-bottom: 10px;
  font-size: 14px;
}

.detail-global-card,
.detail-plan-card {
  border: 1px solid #e2e7f0;
  border-radius: 8px;
  background: #fff;
}

.detail-global-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 4px 16px;
}

.detail-data-row {
  min-width: 0;
  padding: 11px 8px;
  border-bottom: 1px solid #f0f2f6;
}

.detail-data-row dt {
  margin-bottom: 4px;
  color: #7a8497;
  font-size: 11px;
}

.detail-data-row dd {
  overflow-wrap: anywhere;
  color: #273247;
  font-size: 12px;
  line-height: 1.65;
}

.detail-plan-list {
  display: grid;
  gap: 12px;
}

.detail-copy-section,
.detail-copy-card {
  border: 1px solid #e2e7f0;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.detail-copy-section {
  margin-bottom: 14px;
}

.detail-copy-section strong,
.detail-copy-card h3 {
  display: block;
  margin-bottom: 10px;
  color: #273247;
  font-size: 14px;
}

.detail-copy-section textarea,
.detail-copy-card textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  border: 1px solid #e5e9f1;
  border-radius: 6px;
  padding: 12px;
  color: #344054;
  background: #fafbfc;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.7;
}

.detail-copy-card textarea {
  min-height: 180px;
}

.detail-generated-image {
  display: block;
  width: min(100%, 560px);
  max-height: 720px;
  margin: 0 auto 14px;
  border-radius: 7px;
  object-fit: contain;
  background: #f5f7fa;
}

.detail-image-action {
  position: sticky;
  bottom: -24px;
  margin: 18px -24px -24px;
  border-top: 1px solid #e6eaf1;
  padding: 14px 24px;
  background: rgb(255 255 255 / 96%);
}

.detail-image-action .generate-blue {
  max-width: 260px;
}

.detail-result-error,
.detail-item-error {
  color: #c43232;
  font-size: 12px;
  line-height: 1.6;
}

.detail-result-error {
  display: none;
  margin-bottom: 12px;
  border-radius: 6px;
  padding: 9px 11px;
  background: #fff4f4;
}

.detail-result-error.visible {
  display: block;
}

.detail-item-error {
  margin-bottom: 10px;
}

.detail-plan-card {
  padding: 16px;
}

.detail-plan-card h4 {
  margin-bottom: 12px;
  color: #075ee8;
  font-size: 14px;
}

.detail-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.detail-plan-group {
  margin-top: 14px;
  border-top: 1px solid #eef1f6;
  padding-top: 12px;
}

.detail-plan-group h5 {
  margin-bottom: 4px;
  color: #344054;
  font-size: 12px;
}

@media (max-width: 1050px) {
  .detail-layout {
    grid-template-columns: 150px 280px minmax(0, 1fr);
  }

  .detail-global-card,
  .detail-plan-grid {
    grid-template-columns: 1fr;
  }
}

.hero-cluster {
  width: min(620px, 80%);
  text-align: center;
}

.detail-logo {
  display: grid;
  width: 48px;
  height: 48px;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 auto 18px;
  border-radius: 12px;
  padding: 14px;
  background: #dce8ff;
}

.detail-logo span {
  border-radius: 3px;
  background: var(--blue);
}

.hero-cluster h2 {
  margin-bottom: 14px;
  font-size: 28px;
}

.hero-cluster p {
  width: 520px;
  max-width: 100%;
  margin: 0 auto 38px;
  color: #334155;
  font-size: 14px;
  line-height: 1.7;
}

.flow-preview {
  display: flex;
  min-height: 166px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 8px;
  padding: 24px;
  background: #f0f2ff;
}

.product-card,
.poster-card {
  width: 72px;
  height: 116px;
  border: 1px solid #d5dced;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 15px rgb(26 36 70 / 8%);
}

.product-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
}

.product-illustration {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 38%, #16b8c9, #1463f3 62%, #0b316f);
}

.line {
  width: 32px;
  height: 5px;
  border-radius: 2px;
  background: #dbe1ee;
}

.line.long {
  width: 46px;
}

.product-card small {
  color: #4b5563;
  font-size: 10px;
}

.analysis-node {
  width: 86px;
  color: #1164e8;
  font-size: 12px;
  font-weight: 800;
}

.poster-card {
  overflow: hidden;
  padding: 7px;
}

.poster-card div {
  height: 46px;
  border-radius: 5px;
}

.poster-card span {
  display: block;
  height: 7px;
  margin-top: 8px;
  border-radius: 3px;
  background: #e4e9f4;
}

.poster-card span:last-child {
  width: 70%;
}

.poster-card.dark div {
  background: radial-gradient(circle at 50% 20%, #f3a53b, transparent 24%), linear-gradient(135deg, #131827, #3d4b5b);
}

.poster-card.warm div {
  background: linear-gradient(135deg, #f8c9aa, #765a4a);
}

.poster-card.fresh div {
  background: radial-gradient(circle at 72% 25%, #ff5a55 0 9%, transparent 10%), linear-gradient(135deg, #d5fff5, #9dd7e6);
}

.video-placeholder {
  display: grid;
  min-height: calc(100vh - 54px);
  grid-template-columns: 1fr 360px;
  align-items: center;
  gap: 48px;
  padding: 64px;
  background: #f5f7fc;
}

.video-frame {
  position: relative;
  display: grid;
  height: 520px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe5f1;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(20 99 243 / 18%), transparent 40%),
    linear-gradient(315deg, rgb(240 106 138 / 18%), transparent 36%),
    #fff;
}

.play-mark {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, #fff 0 34%, transparent 35%) 30px 22px / 30px 32px no-repeat,
    var(--blue);
  box-shadow: 0 18px 45px rgb(20 99 243 / 25%);
}

.timeline-line {
  position: absolute;
  right: 34px;
  bottom: 34px;
  left: 34px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1463f3 0 42%, #d8e0ec 43%);
}

.video-copy h2 {
  margin-bottom: 14px;
  font-size: 30px;
}

.video-copy p {
  margin-bottom: 24px;
  color: #536174;
  line-height: 1.8;
}

/* AI video workbench: three-column chat, virtual history, single lazy player */
.video-workbench {
  display: grid;
  height: 100dvh;
  min-height: 0;
  grid-template-columns: 282px minmax(420px, 1fr) 420px;
  overflow: hidden;
  color: #e5edf7;
  background:
    radial-gradient(circle at 42% 8%, rgb(124 58 237 / 22%), transparent 28%),
    radial-gradient(circle at 86% 72%, rgb(37 99 235 / 20%), transparent 26%),
    linear-gradient(135deg, #0b0f1a 0%, #111827 58%, #0b0f1a 100%);
}

.video-history-panel,
.video-chat-panel,
.video-player-panel {
  min-height: 0;
  border-color: rgb(148 163 184 / 18%);
}

.video-history-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  border-right: 1px solid rgb(148 163 184 / 18%);
  background: rgb(15 23 42 / 58%);
  backdrop-filter: blur(22px);
}

.video-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 12px 28px rgb(37 99 235 / 32%);
  font-weight: 900;
  overflow: hidden;
}

.video-logo svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-brand h2 {
  color: #f8fafc;
  font-size: 17px;
}

.video-brand p,
.video-search-box span,
.video-history-head {
  color: #94a3b8;
  font-size: 12px;
}

.video-primary-action,
.video-send-button,
.video-composer-bar button {
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 14px 34px rgb(37 99 235 / 24%);
  font-weight: 900;
}

.video-primary-action {
  height: 40px;
  margin-top: 4px;
}

.video-search-box {
  display: grid;
  gap: 7px;
}

.video-search-box input,
.video-composer textarea,
.video-composer select {
  border: 1px solid rgb(148 163 184 / 22%);
  color: #e5edf7;
  background: rgb(15 23 42 / 68%);
  outline: 0;
}

.video-search-box input {
  height: 38px;
  border-radius: 8px;
  padding: 0 11px;
}

.video-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}

.video-history-head small {
  border-radius: 999px;
  padding: 2px 8px;
  color: #dbeafe;
  background: rgb(37 99 235 / 22%);
}

.video-history-list {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: #475569 transparent;
}

.video-history-spacer {
  position: relative;
  width: 100%;
}

.video-history-window {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 8px;
}

.video-history-card {
  position: relative;
  display: grid;
  width: 100%;
  height: 84px;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 8px;
  padding: 9px;
  color: #e5edf7;
  background: rgb(255 255 255 / 6%);
  text-align: left;
  backdrop-filter: blur(18px);
}

.video-history-card.active {
  border-color: rgb(96 165 250 / 76%);
  background: linear-gradient(135deg, rgb(37 99 235 / 22%), rgb(124 58 237 / 16%));
  box-shadow: inset 3px 0 #60a5fa;
}

.video-thumb {
  display: grid;
  width: 64px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: #bfdbfe;
  background:
    radial-gradient(circle at 30% 25%, rgb(124 58 237 / 45%), transparent 32%),
    linear-gradient(135deg, #111827, #1e293b);
  font-size: 10px;
  font-weight: 900;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-history-card strong,
.video-history-card span,
.video-history-card time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-history-card strong {
  font-size: 12px;
}

.video-history-card span,
.video-history-card time {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 10px;
}

.video-empty {
  border: 1px dashed rgb(148 163 184 / 28%);
  border-radius: 8px;
  padding: 14px;
  color: #94a3b8;
  background: rgb(255 255 255 / 5%);
  font-size: 12px;
}

.video-chat-panel {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid rgb(148 163 184 / 18%);
}

.video-topbar {
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgb(148 163 184 / 16%);
  background: rgb(15 23 42 / 42%);
  backdrop-filter: blur(18px);
}

.video-topbar h1 {
  color: #f8fafc;
  font-size: 22px;
}

.video-topbar p {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 12px;
}

.video-message-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 22px;
}

.video-welcome-card,
.video-message {
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 8px;
  background: rgb(255 255 255 / 7%);
  box-shadow: 0 20px 60px rgb(0 0 0 / 18%), inset 0 1px rgb(255 255 255 / 8%);
  backdrop-filter: blur(20px);
}

.video-welcome-card {
  width: min(660px, 94%);
  align-self: center;
  margin-top: clamp(30px, 8vh, 90px);
  padding: 28px;
  text-align: center;
}

.video-welcome-card span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  font-weight: 900;
}

.video-welcome-card h2 {
  color: #f8fafc;
  font-size: 24px;
}

.video-welcome-card p {
  margin-top: 10px;
  color: #94a3b8;
  line-height: 1.7;
}

.video-message {
  width: min(740px, 92%);
  padding: 14px 16px;
  animation: studioFadeIn .28s ease both;
}

.video-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgb(124 58 237 / 38%), rgb(37 99 235 / 30%));
}

.video-message.assistant {
  align-self: flex-start;
}

.video-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 11px;
}

.video-message p {
  color: #e5edf7;
  white-space: pre-wrap;
  line-height: 1.7;
}

.video-result-card {
  display: grid;
  gap: 10px;
}

.video-progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgb(148 163 184 / 18%);
}

.video-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #2563eb);
  transition: width .3s ease;
}

.video-result-card button {
  justify-self: start;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  font-size: 12px;
  font-weight: 900;
}

.video-composer {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 10px;
  margin: 0 22px 18px;
  border: 1px solid rgb(96 165 250 / 42%);
  border-radius: 8px;
  padding: 12px;
  background: rgb(15 23 42 / 78%);
  box-shadow: 0 -12px 48px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 8%);
  backdrop-filter: blur(22px);
}

.video-upload-preview {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.video-upload-preview.has-files {
  display: flex;
}

.video-upload-chip {
  position: relative;
  width: 58px;
  height: 48px;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
}

.video-upload-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-upload-chip button {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: rgb(15 23 42 / 82%);
  font-size: 12px;
}

.video-composer textarea {
  width: 100%;
  min-height: 78px;
  max-height: 180px;
  resize: none;
  border-radius: 8px;
  padding: 12px;
  line-height: 1.6;
}

.video-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-composer-bar > div {
  display: flex;
  gap: 8px;
}

.video-composer-bar button,
.video-composer select {
  height: 36px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
}

.video-composer-bar button:not(.video-send-button) {
  border: 1px solid rgb(148 163 184 / 22%);
  color: #cbd5e1;
  background: rgb(255 255 255 / 7%);
  box-shadow: none;
}

.video-send-button {
  min-width: 104px;
}

.video-player-panel {
  padding: 18px;
  background: rgb(2 6 23 / 42%);
}

.video-player-shell {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
}

.video-player-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-player-meta {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.video-player-meta span {
  color: #60a5fa;
  font-size: 12px;
  font-weight: 900;
}

.video-player-meta strong {
  overflow: hidden;
  color: #f8fafc;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-stage {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 18%, rgb(124 58 237 / 24%), transparent 28%),
    linear-gradient(145deg, #020617, #111827);
  box-shadow: 0 28px 70px rgb(0 0 0 / 34%);
}

.video-stage video {
  width: 100%;
  max-height: 100%;
  background: #020617;
}

.video-player-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: #94a3b8;
  background:
    linear-gradient(135deg, rgb(37 99 235 / 12%), transparent 42%),
    rgb(2 6 23 / 78%);
  text-align: center;
}

.video-player-empty.is-hidden {
  display: none;
}

.video-download-button {
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid #2563eb;
  border-radius: 8px;
  padding: 0 12px;
  color: #fff;
  background: #2563eb;
  font-size: 12px;
  font-weight: 900;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

.video-download-button:not(:disabled):hover {
  border-color: #1d4ed8;
  background: #1d4ed8;
}

.video-download-button:disabled {
  cursor: default;
  border-color: #d1d5db;
  color: #9ca3af;
  background: #e5e7eb;
}

@media (max-width: 1180px) {
  .video-workbench {
    grid-template-columns: 240px minmax(360px, 1fr) 340px;
  }
}

@media (max-width: 900px) {
  .video-workbench {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .video-history-panel,
  .video-player-panel {
    min-height: 360px;
  }
}

/* Warm ivory video theme overrides */
.video-workbench {
  color: #2f2a22;
  background:
    radial-gradient(circle at 42% 8%, rgb(210 185 139 / 22%), transparent 30%),
    radial-gradient(circle at 90% 70%, rgb(111 146 170 / 16%), transparent 26%),
    linear-gradient(135deg, #f6efe3 0%, #fffaf0 54%, #efe2cf 100%);
}

.video-history-panel,
.video-topbar,
.video-composer,
.video-player-panel {
  border-color: rgb(143 118 82 / 18%);
  background: rgb(255 250 240 / 72%);
  box-shadow: inset 0 1px rgb(255 255 255 / 70%);
}

.video-chat-panel {
  border-color: rgb(143 118 82 / 18%);
}

.video-brand h2,
.video-topbar h1,
.video-welcome-card h2,
.video-player-meta strong,
.video-message p,
.video-history-card,
.video-search-box input,
.video-composer textarea,
.video-composer select {
  color: #2f2a22;
}

.video-brand p,
.video-search-box span,
.video-history-head,
.video-topbar p,
.video-message-head,
.video-history-card span,
.video-history-card time,
.video-empty,
.video-player-empty {
  color: #766b5a;
}

.video-logo,
.video-primary-action,
.video-send-button,
.video-composer-bar button,
.video-result-card button,
.video-progress i {
  background: linear-gradient(135deg, #8b5cf6, #2563eb);
  color: #fff;
}

.video-logo {
  box-shadow: 0 12px 28px rgb(139 92 246 / 22%);
}

.video-search-box input,
.video-composer textarea,
.video-composer select,
.video-composer-bar button:not(.video-send-button) {
  border-color: rgb(143 118 82 / 22%);
  background: rgb(255 252 246 / 78%);
}

.video-composer-bar button:not(.video-send-button) {
  color: #5f5445;
}

.video-history-card,
.video-welcome-card,
.video-message {
  border-color: rgb(143 118 82 / 18%);
  background: rgb(255 252 246 / 72%);
  box-shadow: 0 18px 46px rgb(92 64 32 / 10%), inset 0 1px rgb(255 255 255 / 75%);
}

.video-history-card.active {
  border-color: rgb(37 99 235 / 42%);
  background: linear-gradient(135deg, rgb(239 246 255 / 82%), rgb(255 247 237 / 92%));
  box-shadow: inset 3px 0 #2563eb, 0 14px 30px rgb(92 64 32 / 10%);
}

.video-message.user {
  background: linear-gradient(135deg, rgb(238 230 255 / 92%), rgb(231 242 255 / 88%));
}

.video-message {
  min-height: 96px;
  animation: none;
}

.video-result-card {
  min-height: 48px;
}

.video-progress {
  background: rgb(143 118 82 / 14%);
}

.video-thumb {
  color: #3b5f82;
  background:
    radial-gradient(circle at 30% 25%, rgb(139 92 246 / 28%), transparent 32%),
    linear-gradient(135deg, #f7ead7, #d8c4a5);
}

.video-stage {
  background:
    radial-gradient(circle at 20% 18%, rgb(139 92 246 / 18%), transparent 28%),
    linear-gradient(145deg, #fff8ec, #e8d8bd);
  box-shadow: 0 24px 62px rgb(92 64 32 / 18%);
}

.video-stage video {
  background: #111827;
}

.video-player-empty {
  background:
    linear-gradient(135deg, rgb(255 250 240 / 74%), rgb(244 232 213 / 86%)),
    rgb(255 250 240 / 84%);
}

.video-player-meta span {
  color: #2563eb;
}

.video-playlist {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.video-playlist button {
  height: 34px;
  border: 1px solid rgb(143 118 82 / 22%);
  border-radius: 8px;
  color: #2f2a22;
  background: rgb(255 252 246 / 76%);
  font-size: 12px;
  font-weight: 900;
}

.video-playlist button:disabled {
  cursor: default;
  opacity: .45;
}

.video-playlist span {
  min-width: 46px;
  color: #766b5a;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

/* Pure white video surface and stable image controls */
.video-workbench {
  color: #111827;
  background: #fff;
}

.video-history-panel,
.video-topbar,
.video-composer,
.video-player-panel,
.video-history-card,
.video-welcome-card,
.video-message {
  background: #fff;
  box-shadow: none;
}

.video-history-panel,
.video-chat-panel,
.video-topbar,
.video-composer,
.video-player-panel,
.video-history-card,
.video-welcome-card,
.video-message,
.video-stage,
.video-search-box input,
.video-composer textarea,
.video-composer select,
.video-composer-bar button:not(.video-send-button) {
  border-color: #e5e7eb;
}

.video-brand h2,
.video-topbar h1,
.video-welcome-card h2,
.video-player-meta strong,
.video-message p,
.video-history-card,
.video-search-box input,
.video-composer textarea,
.video-composer select,
.video-composer-bar button:not(.video-send-button) {
  color: #111827;
}

.video-brand p,
.video-search-box span,
.video-history-head,
.video-topbar p,
.video-message-head,
.video-history-card span,
.video-history-card time,
.video-empty,
.video-player-empty,
.video-playlist span {
  color: #6b7280;
}

.video-history-card.active,
.video-message.user {
  background: #f8fafc;
}

.video-search-box input,
.video-composer textarea,
.video-composer select,
.video-composer-bar button:not(.video-send-button),
.video-playlist button {
  background: #fff;
}

.video-composer-bar {
  align-items: flex-end;
}

.video-composer-bar > div {
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
}

.video-composer-bar button,
.video-composer select {
  max-width: 100%;
  white-space: nowrap;
}

#video-upload-trigger {
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-upload-preview.has-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 64px));
  align-items: start;
}

.video-upload-chip {
  width: 64px;
  height: 54px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.video-message-images {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.video-message-images img {
  width: 96px;
  height: 74px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  object-fit: cover;
  background: #f9fafb;
}

.video-stage {
  background: #f9fafb;
  box-shadow: none;
}

.video-stage video {
  display: none;
  background: #111827;
}

.video-stage video.is-visible {
  display: block;
}

.video-player-empty {
  background: #f9fafb;
}

body {
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

.app-shell,
.workspace,
.view,
.image-workbench {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.main-nav,
.chat-sidebar {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.image-workbench {
  grid-template-columns: 256px minmax(0, 1fr);
  background: #fff;
}

.chat-sidebar {
  border-right: 1px solid #edf0f5;
  background: #fff;
}

.image-main {
  height: 100vh;
  min-height: 0;
  grid-template-rows: 72px minmax(0, 1fr);
  background: #fff;
}

.image-topbar {
  border-bottom: 1px solid #edf0f5;
  background: #fff;
  backdrop-filter: none;
}

.image-topbar h1 {
  font-size: 22px;
}

.conversation {
  min-height: 0;
  overflow: hidden;
  padding: 20px 24px 18px;
}

.message-list {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px max(24px, calc((100% - 920px) / 2)) 28px;
  scroll-behavior: smooth;
}

.message-list::-webkit-scrollbar,
.chat-history::-webkit-scrollbar {
  width: 8px;
}

.message-list::-webkit-scrollbar-thumb,
.chat-history::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d9cfc2;
}

.welcome-card {
  margin-top: 24px;
}

.message {
  width: fit-content;
  max-width: min(760px, 100%);
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  color: #1f2937;
  background: transparent;
  box-shadow: none;
}

.message.user,
.message.assistant {
  color: #1f2937;
  background: transparent;
}

.message.user {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.message.assistant {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.message.user p {
  margin-top: 0;
}

.message-text p {
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.9;
}

.message.user .message-text {
  display: inline-block;
  max-width: min(720px, 100%);
  text-align: left;
}

.message.user .uploaded-gallery {
  justify-content: flex-end;
}

.uploaded-gallery {
  margin-top: 12px;
  gap: 10px;
}

.message-text + .uploaded-gallery {
  margin-top: 14px;
}

.message-image-button {
  display: block;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.message-image-button img {
  display: block;
}

.message-image-button:hover img {
  filter: brightness(.98);
}

.uploaded-gallery img {
  width: 112px;
  height: 112px;
  border: 0;
  background: #fff;
}

.message.assistant .uploaded-gallery img {
  width: min(360px, 74vw);
  height: auto;
  max-height: 520px;
  object-fit: contain;
  border-radius: 8px;
}

.message.user .expand-text,
.message.user .edit-from-message,
.expand-text,
.edit-from-message,
.download-image {
  color: #111827;
  background: #fff;
  border: 1px solid #eef2f7;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  opacity: .86;
}

.message.user .message-actions {
  justify-content: flex-end;
}

.edit-from-message,
.download-image {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 11px;
}

.edit-from-message:hover,
.download-image:hover {
  background: #f8fafc;
}

.elapsed-time.done {
  margin-top: 0;
  color: #6b6258;
}

.generation-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  min-height: 150px;
}

.generation-card.failed {
  border-color: transparent;
  background: transparent;
}

.prompt-composer {
  flex: 0 0 auto;
  border-color: #e3e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(15 23 42 / 6%);
}

.prompt-composer.is-dragover {
  border-color: #111827;
  background: #fff;
  box-shadow: 0 14px 36px rgb(15 23 42 / 10%);
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  background: rgb(0 0 0 / 82%);
}

.image-lightbox.active {
  display: grid;
}

.image-lightbox img {
  max-width: 86vw;
  max-height: 86vh;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 24px 80px rgb(0 0 0 / 34%);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: 0;
  color: #111827;
  background: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}

.lightbox-close {
  right: 26px;
  top: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.lightbox-close::before,
.lightbox-close::after {
  position: absolute;
  left: 12px;
  top: 18px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.lightbox-close::before {
  transform: rotate(45deg);
}

.lightbox-close::after {
  transform: rotate(-45deg);
}

.lightbox-nav {
  top: 50%;
  width: 44px;
  height: 52px;
  border-radius: 8px;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 26px;
}

.lightbox-next {
  right: 26px;
}

.lightbox-nav::before {
  position: absolute;
  left: 17px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  content: "";
}

.lightbox-prev::before {
  transform: rotate(45deg);
}

.lightbox-next::before {
  left: 12px;
  transform: rotate(225deg);
}

.lightbox-count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  border-radius: 999px;
  padding: 8px 14px;
  color: #111827;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  transform: translateX(-50%);
}

@media (max-width: 1260px) {
  body {
    min-width: 1040px;
  }

  .main-nav {
    width: 82px;
  }

  .image-workbench {
    grid-template-columns: 240px 1fr;
  }
}

/* AI detail workflow enhancements */
.detail-panel {
  overflow-x: hidden;
  overflow-y: auto;
}

.detail-history-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.detail-history-item img {
  width: 42px;
  height: 42px;
  border-radius: 5px;
  object-fit: cover;
  background: #f2f4f7;
}

.detail-history-item span {
  margin: 0;
  white-space: normal;
  line-height: 1.45;
}

.detail-upload-error {
  display: none;
  margin-top: 7px;
  color: #c43232;
  font-size: 11px;
  line-height: 1.5;
}

.detail-upload-error.visible {
  display: block;
}

.detail-copy-workspace {
  grid-column: 2 / -1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.detail-copy-workspace:not([hidden]) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.detail-copy-head,
.detail-copy-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #e8ecf3;
}

.detail-copy-head span {
  color: #1463f3;
  font-size: 11px;
  font-weight: 800;
}

.detail-copy-head h2 {
  margin-top: 3px;
  font-size: 20px;
}

.detail-copy-head button {
  border: 1px solid #d5ddec;
  border-radius: 6px;
  padding: 8px 12px;
  color: #344054;
  background: #fff;
}

.detail-copy-content {
  overflow-y: auto;
  padding: 22px;
  background: #f7f9fc;
}

.detail-copy-footer {
  gap: 16px;
  border-top: 1px solid #e8ecf3;
  border-bottom: 0;
}

.detail-copy-footer .generate-blue {
  width: 220px;
  flex: 0 0 auto;
}

.detail-copy-footer .detail-result-error {
  margin: 0;
}

.detail-generation-overview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  border: 1px solid #dfe7f5;
  border-radius: 8px;
  padding: 12px;
  background: #f7faff;
}

.detail-generation-overview > img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}

.detail-generation-overview p {
  margin-top: 4px;
  color: #718096;
  font-size: 11px;
}

.detail-inline-loader {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 3px solid #d9e5fb;
  border-top-color: #1463f3;
  border-radius: 50%;
  animation: detail-spin .8s linear infinite;
}

.detail-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.detail-image-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(31 52 88 / 10%);
}

.detail-image-stage {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background: #eef2f7;
}

.detail-image-stage > img {
  display: block;
  width: 100%;
  max-height: 680px;
  object-fit: contain;
}

.detail-image-placeholder {
  display: grid;
  min-height: 260px;
  place-items: center;
  color: #c43232;
  background: #f5f7fa;
  font-size: 14px;
  font-weight: 800;
}

.detail-status-badge,
.detail-time-overlay {
  position: absolute;
  z-index: 2;
  border-radius: 5px;
  padding: 5px 8px;
  color: #fff;
  background: rgb(20 99 243 / 90%);
  font-size: 11px;
  font-weight: 800;
}

.detail-status-badge {
  top: 10px;
  right: 10px;
}

.detail-time-overlay {
  bottom: 10px;
  left: 10px;
  background: rgb(17 24 39 / 76%);
}

.detail-image-card.success .detail-status-badge {
  background: rgb(19 145 92 / 92%);
}

.detail-image-card.failed .detail-status-badge {
  background: rgb(196 50 50 / 92%);
}

.detail-error-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 44px 24px;
  color: #a92323;
  background: rgb(255 244 244 / 92%);
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
}

.detail-image-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}

.detail-image-meta strong {
  font-size: 13px;
}

.detail-image-meta span {
  color: #718096;
  font-size: 11px;
  text-align: right;
}

@media (max-width: 1050px) {
  .detail-image-grid {
    grid-template-columns: 1fr;
  }
}

.detail-panel {
  overflow: hidden;
}

.detail-panel-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 18px;
  scrollbar-color: #cdd8ea transparent;
  scrollbar-width: thin;
}

.detail-panel-scroll::-webkit-scrollbar {
  width: 6px;
}

.detail-panel-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cdd8ea;
}

.detail-panel-state {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
  align-content: center;
  padding: 28px 22px;
  text-align: center;
}

.detail-panel-state[hidden],
.detail-panel-scroll[hidden] {
  display: none;
}

.detail-panel-state > p {
  margin-top: 8px;
  color: #7a8497;
  font-size: 11px;
  line-height: 1.6;
}

.detail-panel-loader {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border: 3px solid #dce7fb;
  border-top-color: #1463f3;
  border-radius: 50%;
  animation: detail-spin .8s linear infinite;
}

.detail-skeleton {
  display: grid;
  width: 100%;
  gap: 9px;
  margin-top: 26px;
}

.detail-skeleton i {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #edf2f8 25%, #f8faff 45%, #edf2f8 65%) 0 0 / 200% 100%;
  animation: detail-skeleton 1.2s linear infinite;
}

.detail-skeleton i:nth-child(2),
.detail-skeleton i:nth-child(4) {
  width: 72%;
}

@keyframes detail-skeleton {
  to { background-position: -200% 0; }
}

.detail-plan-ready-content {
  padding: 16px 14px 20px;
  background: #f7f9fc;
}

.detail-panel-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 12px;
  color: #1463f3;
  font-size: 12px;
  font-weight: 800;
}

.detail-panel-plan-head strong {
  border-radius: 4px;
  padding: 3px 7px;
  color: #667085;
  background: #eaf0fa;
  font-size: 10px;
}

.detail-panel-plan-card {
  margin-bottom: 10px;
  border: 1px solid #e2e8f2;
  border-radius: 7px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgb(31 52 88 / 4%);
}

.detail-panel-plan-card.needs-input { border-color: #f2d19a; background: linear-gradient(180deg, #fffdf8, #fff); }
.detail-plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.detail-plan-status { flex: none; border-radius: 999px; padding: 3px 7px; color: #18794e; background: #eaf8f0; font-size: 9px; font-weight: 800; }
.detail-plan-status.needs-input { color: #9a5b13; background: #fff2d8; }
.detail-product-analysis { margin-bottom: 10px; border: 1px solid #dce5f2; border-radius: 8px; padding: 10px 12px; color: #42526a; background: #f2f7ff; }
.detail-product-analysis summary { display: flex; justify-content: space-between; cursor: pointer; font-size: 11px; font-weight: 700; }
.detail-product-analysis p { margin: 8px 0 0; color: #667085; font-size: 10px; line-height: 1.55; }
.detail-plan-field-summary { display: grid; gap: 7px; margin: 0; }
.detail-plan-field-summary div { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 7px; align-items: start; }
.detail-plan-field-summary dt { color: #8a94a6; font-size: 9px; line-height: 1.55; }
.detail-plan-field-summary dd { margin: 0; color: #3f4c60; font-size: 10px; line-height: 1.55; }
.detail-plan-missing, .detail-plan-legacy { margin: 9px 0 0; border-radius: 6px; padding: 7px 8px; color: #8a5419; background: #fff7e7; font-size: 10px; line-height: 1.5; }
.detail-plan-missing strong { display: block; margin-bottom: 2px; color: #a63b26; }
.detail-required-mark { margin-left: 3px; color: #d92d20; font: inherit; font-weight: 900; }
.detail-plan-edit-button { width: 100%; margin-top: 10px; border: 1px solid #cddcff; border-radius: 6px; padding: 7px 10px; color: #315ec9; background: #f6f9ff; font-size: 10px; font-weight: 700; }
.detail-plan-edit-button:hover { border-color: #94b3ff; background: #edf3ff; }

.detail-plan-editor-dialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 40px); border: 0; border-radius: 16px; padding: 0; color: #263247; background: #fff; box-shadow: 0 24px 80px rgb(32 48 80 / 28%); }
.detail-plan-editor-dialog::backdrop { background: rgb(16 24 40 / 48%); backdrop-filter: blur(3px); }
.detail-plan-editor-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 40px); }
.detail-plan-editor-shell > header, .detail-plan-editor-shell > footer { display: flex; align-items: center; gap: 10px; padding: 18px 22px; }
.detail-plan-editor-shell > header { justify-content: space-between; border-bottom: 1px solid #edf0f5; }
.detail-plan-editor-shell > header span { color: #6b61ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.detail-plan-editor-shell h2 { margin: 4px 0 0; font-size: 18px; }
.detail-plan-editor-shell > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #687386; background: #f3f5f9; font-size: 22px; }
.detail-plan-editor-fields { overflow-y: auto; padding: 18px 22px 8px; background: #f7f8fb; }
.detail-plan-editor-fields section, .detail-plan-locks { margin-bottom: 14px; border: 1px solid #e2e6ee; border-radius: 12px; padding: 16px; background: #fff; }
.detail-plan-editor-fields h3 { margin: 0 0 12px; font-size: 13px; }
.detail-plan-required-inputs { border-color: #f0cb8d !important; background: #fffdf7 !important; }
.detail-plan-required-inputs > p { margin: -6px 0 12px; color: #8a5b20; font-size: 11px; }
.detail-plan-required-inputs textarea:required { border-color: #e0a26b; background: #fffefb; }
.detail-plan-required-inputs textarea:required:invalid { box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.08); }
.detail-plan-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-plan-editor-grid label { display: grid; gap: 6px; }
.detail-plan-editor-grid label:has(textarea) { grid-column: 1 / -1; }
.detail-plan-editor-grid label.short { grid-column: auto; }
.detail-plan-editor-grid label > span { color: #5c677a; font-size: 11px; font-weight: 700; }
.detail-plan-editor-grid input, .detail-plan-editor-grid textarea { width: 100%; border: 1px solid #d8deea; border-radius: 8px; padding: 9px 10px; color: #2d3a50; background: #fff; font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; }
.detail-plan-editor-grid input:focus, .detail-plan-editor-grid textarea:focus { border-color: #7d8cff; outline: 3px solid rgb(107 97 255 / 10%); }
.detail-plan-locks summary { cursor: pointer; color: #596579; font-size: 12px; font-weight: 800; }
.detail-plan-locks p, .detail-plan-locks li { color: #7b8494; font-size: 10px; line-height: 1.55; }
.detail-plan-editor-shell > footer { justify-content: flex-end; border-top: 1px solid #edf0f5; background: #fff; }
.detail-plan-editor-shell > footer p { margin: 0 auto 0 0; color: #c33939; font-size: 11px; }
.detail-plan-editor-shell > footer button { border: 1px solid #d7dce6; border-radius: 8px; padding: 9px 18px; color: #4c586b; background: #fff; font-weight: 700; }
#detail-plan-editor-save { border-color: #665cff; color: #fff; background: linear-gradient(135deg, #5668ff, #8767f6); }

@media (max-width: 720px) {
  .detail-plan-editor-grid { grid-template-columns: 1fr; }
  .detail-plan-editor-grid label { grid-column: 1; }
}

.detail-panel-plan-card h3 {
  margin-bottom: 8px;
  color: #273247;
  font-size: 12px;
}

.detail-plan-select {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.detail-plan-select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #1463f3;
}

.detail-plan-select span {
  min-width: 0;
}

.detail-panel-plan-card .detail-plan-editor {
  width: 100%;
  height: 200px;
  margin: 0;
  resize: none;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #536174;
  background: #f9fbfd;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.65;
}

.detail-panel-plan-card .detail-plan-editor.editing {
  resize: vertical;
  overflow-y: auto;
  border-color: #9dbcf1;
  background: #fff;
  scrollbar-color: #cdd8ea transparent;
  scrollbar-width: thin;
  outline: 2px solid rgb(20 99 243 / 10%);
}

.detail-panel-plan-card .detail-plan-editor.editing::-webkit-scrollbar {
  width: 5px;
}

.detail-panel-plan-card .detail-plan-editor.editing::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cdd8ea;
}

.detail-plan-ready-state {
  text-align: center;
}

.detail-plan-ready-state h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

.detail-plan-ready-state p {
  color: #667085;
  font-size: 13px;
}

.detail-retry-button {
  border: 1px solid #efb5b5;
  border-radius: 5px;
  padding: 5px 8px;
  color: #b42323;
  background: #fff5f5;
  font-size: 11px;
  font-weight: 800;
}

.detail-batch-retry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid #f0c3c3;
  border-radius: 7px;
  padding: 10px 12px;
  color: #a92323;
  background: #fff6f6;
  font-size: 12px;
  font-weight: 700;
}

.detail-batch-retry button {
  border: 1px solid #df8e8e;
  border-radius: 5px;
  padding: 6px 10px;
  color: #fff;
  background: #c43232;
  font-size: 11px;
  font-weight: 800;
}

.detail-image-meta:has(.detail-retry-button) {
  flex-wrap: wrap;
}

.detail-download-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  border: 1px solid #dfe7f3;
  border-radius: 7px;
  padding: 9px 12px;
  color: #536174;
  background: #fff;
  font-size: 12px;
}

.detail-download-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #273247;
  font-weight: 700;
}

.detail-download-toolbar input {
  width: 15px;
  height: 15px;
  accent-color: #1463f3;
}

.detail-download-toolbar button {
  margin-left: auto;
  border: 0;
  border-radius: 5px;
  padding: 7px 12px;
  color: #fff;
  background: #1463f3;
  font-size: 11px;
  font-weight: 800;
}

.detail-download-toolbar button:disabled {
  opacity: .45;
}

.detail-long-preview-bar {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 12px;
}

.detail-long-preview-trigger {
  width: 91px;
  height: 40px;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.detail-long-preview-trigger img {
  display: block;
  width: 91px;
  height: 40px;
}

.detail-long-preview-trigger:hover {
  filter: brightness(.97);
}

.detail-long-preview-trigger:focus-visible {
  outline: 2px solid #1463f3;
  outline-offset: 2px;
}

.detail-long-preview {
  width: min(760px, calc(100vw - 36px));
  max-height: 92vh;
  border: 0;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: #f4f5f7;
  box-shadow: 0 28px 90px rgb(15 23 42 / 30%);
}

.detail-long-preview::backdrop {
  background: rgb(15 23 42 / 62%);
  backdrop-filter: blur(4px);
}

.detail-long-preview-shell {
  display: grid;
  max-height: 92vh;
  grid-template-rows: auto minmax(0, 1fr);
}

.detail-long-preview-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
  color: #172033;
  background: #fff;
}

.detail-long-preview-shell > header button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: #475467;
  background: #f2f4f7;
  font-size: 22px;
  line-height: 1;
}

.detail-long-preview-stack {
  width: min(640px, 100%);
  margin: 0 auto;
  overflow-y: auto;
  background: #fff;
}

.detail-long-preview-stack img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Streaming text stays visually stable; the message row itself is updated in
   place, so a blinking caret should not make the whole response appear to flash. */
.message-list .message.is-streaming .message-text::after {
  animation: none !important;
  opacity: .55;
}

.detail-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 400px));
  justify-content: center;
}

.detail-image-card {
  width: 400px;
  max-width: 100%;
}

.detail-image-stage,
.detail-image-placeholder,
.detail-zoom-button {
  width: 400px;
  max-width: 100%;
  height: 400px;
  min-height: 400px;
}

.detail-zoom-button {
  display: block;
  border: 0;
  padding: 0;
  background: #eef2f7;
  cursor: zoom-in;
}

.detail-zoom-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-select-image {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  padding: 5px 7px;
  color: #fff;
  background: rgb(17 24 39 / 72%);
  font-size: 11px;
  font-weight: 700;
}

.detail-select-image input {
  width: 14px;
  height: 14px;
  accent-color: #1463f3;
}

.detail-card-download {
  border: 1px solid #bad0f5;
  border-radius: 5px;
  padding: 5px 8px;
  color: #075ee8;
  background: #f3f7ff;
  font-size: 11px;
  font-weight: 800;
}

/* Image workbench interaction polish */
.prompt-composer {
  grid-template-columns: 44px minmax(0, 1fr) 330px;
  border-color: #d7e1ef;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 12px 34px rgb(31 52 88 / 10%);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.prompt-composer:focus-within {
  border-color: #9ebcf0;
  box-shadow: 0 14px 38px rgb(20 99 243 / 13%);
}

.prompt-composer.chat-mode .composer-actions select {
  display: none;
}

.prompt-composer textarea {
  min-height: 56px;
  max-height: 160px;
  height: 64px;
  padding: 8px 2px;
}

.composer-actions {
  align-self: center;
}

.image-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
}

.image-mode-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background .18s ease;
}

.toggle-track::after {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgb(15 23 42 / 20%);
  content: "";
  transition: transform .18s ease;
}

.image-mode-toggle input:checked + .toggle-track {
  background: #1463f3;
}

.image-mode-toggle input:checked + .toggle-track::after {
  transform: translateX(14px);
}

.image-mode-toggle strong {
  color: #344054;
  font-size: 12px;
}

.composer-notice {
  display: none;
  margin: 0;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.45;
}

.composer-notice.visible {
  display: block;
}

.composer-notice.info {
  color: #0756bd;
  background: #eef5ff;
}

.composer-notice.error {
  color: #b42318;
  background: #fff1f0;
}

.send-button:disabled {
  cursor: not-allowed;
  opacity: .42;
  box-shadow: none;
}

.send-button.is-loading {
  background: #1463f3;
}

.send-button.is-loading::after {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  animation: spin .75s linear infinite;
}

.message.chat-message {
  max-width: min(760px, 88%);
  padding: 0;
}

.message.chat-message.user .message-text {
  border: 1px solid #d7e6fb;
  border-radius: 14px 14px 4px 14px;
  padding: 11px 14px;
  background: #eef5ff;
}

.message.chat-message.assistant .message-text {
  border: 1px solid #e2e8f0;
  border-radius: 14px 14px 14px 4px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(31 52 88 / 5%);
}

.chat-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #e1e8f2;
  border-radius: 14px 14px 14px 4px;
  padding: 12px 15px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(31 52 88 / 5%);
}

.chat-thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1463f3;
  animation: chat-dot 1s ease-in-out infinite;
}

.chat-thinking span:nth-child(2) { animation-delay: .14s; }
.chat-thinking span:nth-child(3) { animation-delay: .28s; }

.chat-thinking strong {
  margin-left: 5px;
  color: #667085;
  font-size: 12px;
}

@keyframes chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-error {
  border: 1px solid #ffd2ce;
  border-radius: 10px;
  padding: 12px 14px;
  color: #b42318;
  background: #fff5f4;
}

.chat-error p {
  margin-top: 5px;
  color: #7a271a;
  font-size: 12px;
}

/* Mature AI workbench layout */
body,
.image-main,
.conversation {
  background: linear-gradient(180deg, #f8fbff 0%, #f5f7fb 48%, #fff 100%);
}

.main-nav {
  border-right-color: #e4eaf3;
  background: #fbfdff;
}

.module-tab {
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.module-tab:hover {
  transform: translateY(-2px);
  background: #eef5ff;
}

.module-tab.active {
  color: #fff;
  background: linear-gradient(145deg, #2a7cf7, #135de0);
  box-shadow: 0 8px 18px rgb(20 99 243 / 22%);
}

.module-tab.active strong {
  color: #fff;
}

.chat-sidebar {
  padding: 18px 14px 14px;
  background: rgb(251 253 255 / 94%);
}

.app-brand {
  padding: 0 4px 16px;
}

.new-chat {
  border-radius: 8px;
  background: linear-gradient(135deg, #176bf0, #3a85f6);
  box-shadow: 0 7px 16px rgb(20 99 243 / 18%);
}

.history-search-box {
  display: block;
  position: relative;
  margin-top: 12px;
}

.history-search-box > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.history-search-box input {
  width: 100%;
  height: 36px;
  border: 1px solid #dde5ef;
  border-radius: 8px;
  padding: 0 11px;
  color: #273247;
  background: #fff;
  font-size: 12px;
  outline: 0;
}

.history-search-box input:focus {
  border-color: #96b9f2;
  box-shadow: 0 0 0 3px rgb(20 99 243 / 9%);
}

.history-head {
  margin-top: 17px;
  padding: 0 3px;
}

.chat-history {
  gap: 0;
  padding: 0 2px 14px 0;
}

.history-group {
  margin-top: 14px;
}

.history-group > h3 {
  display: none;
  margin: 0 4px 7px;
  color: #8a96a8;
  font-size: 10px;
  font-weight: 800;
}

.history-card {
  position: relative;
  z-index: 0;
  margin-bottom: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.history-card:hover {
  border-color: #dce7f6;
  background: #fff;
  box-shadow: 0 7px 16px rgb(31 52 88 / 7%);
  transform: translateY(-1px);
}

.history-card.active {
  border-color: #b9d1f5;
  background: #edf5ff;
  box-shadow: inset 3px 0 #1463f3;
}

.history-card .history-item {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 0;
  border-radius: 8px;
  min-height: 46px;
  padding: 11px 38px 11px 12px;
  background: transparent;
  text-align: left;
}

/* Keep the active history card and its action menu above neighboring cards.
   Without an explicit stacking level, the next card can paint over the
   rename/delete buttons while the pointer moves down into the menu. */
.history-card.menu-open {
  z-index: 30;
}

.history-card .history-item:hover,
.history-card .history-item.active {
  background: transparent;
}

.history-card-body {
  display: block;
  min-width: 0;
}

.history-card-body > strong,
.history-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-card-body > strong {
  color: #253148;
  font-size: 12px;
  line-height: 1.45;
}

.history-preview {
  display: none;
  margin-top: 4px;
  color: #7b8799;
  font-size: 10px;
}

.history-meta {
  display: none;
  gap: 4px;
  margin-top: 7px;
  overflow: hidden;
}

.history-meta i {
  flex: 0 0 auto;
  border-radius: 4px;
  padding: 2px 5px;
  color: #68758a;
  background: #eef2f7;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.history-meta .status-success { color: #087b50; background: #eaf8f2; }
.history-meta .status-loading { color: #075ee8; background: #eaf2ff; }
.history-meta .status-failed { color: #b42318; background: #fff0ee; }

.history-card time {
  display: none;
  margin-top: 5px;
  color: #9aa5b4;
  font-size: 9px;
}

.history-card-actions {
  position: absolute;
  z-index: 50;
  top: calc(100% - 2px);
  right: 8px;
  display: grid;
  min-width: 108px;
  gap: 3px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 6px;
  background: #fff;
  box-shadow: 0 14px 30px rgb(15 23 42 / 16%);
}

.history-card-actions[hidden] {
  display: none;
}

.history-card-actions button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
  color: #778397;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
  transition: color .16s ease, background .16s ease;
}

.history-card-actions button:hover,
.history-card-actions button:focus-visible {
  color: #075ee8;
  background: #eef4ff;
  outline: none;
}

.history-card-actions .history-action-danger:hover,
.history-card-actions .history-action-danger:focus-visible {
  color: #b42318;
  background: #fff0ee;
}

.history-menu-trigger {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #667085;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .16s ease, background .16s ease;
}

.history-card:hover .history-menu-trigger,
.history-card.active .history-menu-trigger,
.history-card.menu-open .history-menu-trigger,
.history-menu-trigger:focus-visible {
  opacity: 1;
}

.history-menu-trigger:hover,
.history-menu-trigger[aria-expanded="true"] {
  background: #eef2ff;
  color: #5145cd;
}

.history-title-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 24px;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  padding: 7px 8px;
}

.history-title-editor input {
  min-width: 0;
  height: 31px;
  border: 1px solid #6e63ef;
  border-radius: 7px;
  padding: 0 8px;
  color: #253148;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 12%);
  font: inherit;
  font-size: 12px;
  outline: 0;
}

.history-title-editor button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  color: #667085;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.history-title-editor button:first-of-type {
  color: #5145cd;
  background: #eef2ff;
}

.history-title-editor button:hover {
  background: #f2f4f7;
}

.message-list {
  padding-right: max(20px, calc((100% - 980px) / 2));
  padding-left: max(20px, calc((100% - 980px) / 2));
  overflow-anchor: none;
}

.message-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 11px;
}

.message-row.user {
  flex-direction: row-reverse;
}

.message-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #1463f3;
  box-shadow: 0 5px 12px rgb(20 99 243 / 16%);
  font-size: 10px;
  font-weight: 900;
}

.message-avatar.user {
  color: #344054;
  background: #e7ecf3;
  box-shadow: none;
}

.message-row .message {
  width: fit-content;
  max-width: min(820px, calc(100% - 48px));
  margin: 0;
}

.message-row.user .message {
  margin-left: auto;
}

.message-author {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.message-row.user .message-author {
  justify-content: flex-end;
}

.message-author strong {
  color: #344054;
  font-size: 11px;
}

.message-author time {
  color: #9aa5b4;
  font-size: 9px;
}

.message.chat-message.assistant .message-text,
.message.chat-message.user .message-text {
  border-radius: 8px;
}

.message.image-message.assistant .uploaded-gallery img {
  border-radius: 8px;
  box-shadow: 0 10px 28px rgb(31 52 88 / 10%);
}

.retry-message {
  margin-top: 9px;
  border: 1px solid #c8d9f4;
  border-radius: 6px;
  padding: 6px 10px;
  color: #075ee8;
  background: #f4f8ff;
  font-size: 11px;
  font-weight: 800;
}

.welcome-card {
  margin-top: clamp(34px, 8vh, 90px);
}

.welcome-badge {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid #cfe0f8;
  border-radius: 8px;
  color: #1463f3;
  background: #eef5ff;
  box-shadow: 0 10px 26px rgb(20 99 243 / 12%);
  font-size: 18px;
  font-weight: 900;
}

.welcome-card h2 {
  font-size: 28px;
}

.prompt-composer {
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 16px;
}

@media (max-width: 1180px) {
  .prompt-composer {
    grid-template-columns: 44px minmax(0, 1fr) 280px;
  }

  .history-meta i:nth-child(2) {
    display: none;
  }
}

/* Calm Precision workbench */
:root {
  --studio-blue: #2563eb;
  --studio-violet: #7c3aed;
  --studio-cyan: #06b6d4;
  --studio-ink: #0f172a;
  --studio-muted: #64748b;
  --studio-border: rgb(203 213 225 / 70%);
  --studio-glass: rgb(255 255 255 / 86%);
}

body {
  color: var(--studio-ink);
  background:
    radial-gradient(circle at 70% 18%, rgb(37 99 235 / 10%), transparent 30%),
    radial-gradient(circle at 92% 74%, rgb(124 58 237 / 7%), transparent 28%),
    linear-gradient(145deg, #f8fbff, #f5f7fb 52%, #fff);
}

.main-nav {
  border-right-color: rgb(203 213 225 / 55%);
  background: linear-gradient(180deg, rgb(248 251 255 / 96%), rgb(239 246 255 / 88%));
  backdrop-filter: blur(18px);
}

.module-tab {
  position: relative;
  transition: color .24s ease, transform .24s ease, filter .24s ease;
}

.module-tab:hover {
  transform: translateY(-2px) scale(1.02);
}

.module-tab.active {
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #06b6d4);
  box-shadow: 0 12px 28px rgb(37 99 235 / 28%);
}

.module-tab.active::after {
  position: absolute;
  right: -11px;
  width: 3px;
  height: 28px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 14px rgb(37 99 235 / 80%);
  content: "";
}

.image-workbench {
  background: transparent;
}

.chat-sidebar {
  border-right-color: rgb(203 213 225 / 58%);
  background: rgb(255 255 255 / 70%);
  box-shadow: 12px 0 35px rgb(37 99 235 / 4%);
  backdrop-filter: blur(22px);
}

.app-logo,
.brand-mark {
  background: linear-gradient(145deg, #1d4ed8, #06b6d4);
  box-shadow: 0 10px 24px rgb(37 99 235 / 22%);
}

.new-chat {
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 12px 26px rgb(37 99 235 / 22%);
  transition: transform .24s ease, box-shadow .24s ease;
}

.new-chat:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgb(37 99 235 / 28%);
}

.history-search-box input {
  height: 42px;
  border-color: rgb(191 219 254 / 75%);
  border-radius: 12px;
  background: rgb(255 255 255 / 72%);
}

.history-card {
  border-radius: 12px;
  background: rgb(255 255 255 / 48%);
}

.history-card:hover {
  border-color: rgb(96 165 250 / 75%);
  box-shadow: 0 14px 28px rgb(37 99 235 / 11%);
  transform: translateY(-2px);
}

.history-card.active {
  border-color: #93c5fd;
  background: linear-gradient(135deg, rgb(239 246 255 / 94%), rgb(245 243 255 / 76%));
  box-shadow: inset 3px 0 #2563eb, 0 12px 26px rgb(37 99 235 / 9%);
}

.image-main {
  background:
    radial-gradient(circle at 58% 24%, rgb(96 165 250 / 12%), transparent 29%),
    radial-gradient(circle at 88% 70%, rgb(124 58 237 / 6%), transparent 25%),
    linear-gradient(145deg, #f8fbff, #fff 72%);
}

.image-topbar {
  height: 72px;
  border-bottom-color: rgb(203 213 225 / 55%);
  background: rgb(255 255 255 / 68%);
  box-shadow: 0 8px 26px rgb(15 23 42 / 4%);
  backdrop-filter: blur(20px);
}

.image-topbar h1 {
  color: var(--studio-ink);
  font-size: 23px;
}

.image-topbar p {
  color: var(--studio-muted);
}

.conversation {
  padding: 20px 28px 20px;
}

.message-list {
  padding-bottom: 32px;
  scrollbar-color: #bfdbfe transparent;
}

.message-list::-webkit-scrollbar-thumb,
.chat-history::-webkit-scrollbar-thumb {
  background: #bfdbfe;
}

.welcome-card {
  width: min(820px, 94%);
  margin-top: clamp(30px, 7vh, 76px);
  animation: studioFadeIn .42s ease both;
}

.welcome-badge {
  width: 64px;
  height: 64px;
  border-color: rgb(147 197 253 / 70%);
  border-radius: 18px;
  color: #2563eb;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 0 34px rgb(96 165 250 / 28%), inset 0 1px #fff;
  backdrop-filter: blur(16px);
}

.welcome-card h2 {
  color: var(--studio-ink);
  font-size: 32px;
}

.welcome-card > p {
  margin-top: 12px;
  color: var(--studio-muted);
}

.quick-create-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.quick-create-grid button {
  min-width: 0;
  min-height: 76px;
  border: 1px solid rgb(203 213 225 / 66%);
  border-radius: 14px;
  padding: 13px 14px;
  color: var(--studio-ink);
  background: rgb(255 255 255 / 70%);
  box-shadow: inset 0 1px #fff;
  text-align: left;
  backdrop-filter: blur(14px);
  transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}

.quick-create-grid button:hover {
  border-color: #93c5fd;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgb(37 99 235 / 14%);
}

.quick-create-grid strong,
.quick-create-grid span {
  display: block;
}

.quick-create-grid strong {
  font-size: 14px;
}

.quick-create-grid span {
  margin-top: 6px;
  overflow: hidden;
  color: var(--studio-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.message-row {
  animation: studioFadeIn .3s ease both;
}

.message-avatar.assistant {
  border-radius: 10px;
  background: linear-gradient(145deg, #2563eb, #7c3aed);
  box-shadow: 0 8px 20px rgb(37 99 235 / 22%);
}

.message.chat-message.assistant .message-text {
  border: 1px solid rgb(203 213 225 / 52%);
  border-radius: 18px;
  padding: 16px 18px;
  color: #102033;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 251 255 / 84%)),
    radial-gradient(circle at 0 0, rgb(96 165 250 / 16%), transparent 36%);
  box-shadow: 0 18px 45px rgb(15 23 42 / 8%), inset 0 1px 0 rgb(255 255 255 / 90%);
  backdrop-filter: blur(18px);
}

.message.chat-message.assistant .message-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}

.message.chat-message.assistant.is-streaming .message-text {
  border-color: rgb(96 165 250 / 58%);
  box-shadow: 0 20px 52px rgb(37 99 235 / 12%), 0 0 0 3px rgb(59 130 246 / 6%);
}

.message.chat-message.user .message-text {
  border: 1px solid rgb(191 219 254 / 72%);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgb(239 246 255 / 82%);
}

.message.is-streaming .message-text::after {
  display: inline-block;
  width: 2px;
  height: 15px;
  margin-left: 3px;
  background: #2563eb;
  vertical-align: -2px;
  animation: caretBlink .8s steps(1) infinite;
  content: "";
}

.message.image-message.assistant {
  position: relative;
}

.message.image-message.assistant .uploaded-gallery img {
  border: 1px solid rgb(203 213 225 / 55%);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgb(15 23 42 / 13%);
  transition: filter .24s ease, transform .24s ease;
}

.message.image-message.assistant .message-image-button {
  width: min(360px, 74vw);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: rgb(248 251 255 / 72%);
}

.message.image-message.assistant .message-image-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-detail-duration] {
  font-style: normal;
}

.message.image-message.assistant:hover .uploaded-gallery img {
  filter: brightness(.88);
  transform: translateY(-2px);
}

.message.image-message.assistant .message-actions {
  position: static;
  opacity: 1;
  transform: none;
  transition: opacity .24s ease, transform .24s ease;
}

.message.image-message.assistant:hover .message-actions {
  opacity: 1;
  transform: translateY(0);
}

.generation-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(191 219 254 / 70%);
  border-radius: 16px;
  background: rgb(255 255 255 / 68%);
  box-shadow: 0 14px 34px rgb(37 99 235 / 9%);
}

.generation-card:not(.failed)::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 78%) 45%, transparent 70%);
  transform: translateX(-100%);
  animation: studioShimmer 1.6s infinite;
  content: "";
}

.prompt-composer {
  display: flex;
  width: min(980px, calc(100% - 32px));
  max-height: min(650px, calc(100vh - 110px));
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  border: 1px solid rgb(147 197 253 / 72%);
  border-radius: 24px;
  padding: 14px;
  background: var(--studio-glass);
  box-shadow: 0 20px 60px rgb(37 99 235 / 12%), inset 0 1px rgb(255 255 255 / 90%);
  backdrop-filter: blur(22px);
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.prompt-composer:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 22px 68px rgb(37 99 235 / 18%), 0 0 0 3px rgb(59 130 246 / 8%);
}

.prompt-composer.is-dragover {
  border-color: #2563eb;
  background: rgb(239 246 255 / 92%);
  transform: translateY(-2px);
}

.prompt-field {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
}

.prompt-composer textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  max-height: 500px;
  height: 72px;
  resize: vertical;
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  color: var(--studio-ink);
  background: rgb(248 251 255 / 58%);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
  outline: 0;
  overflow-y: hidden;
}

.prompt-composer textarea::placeholder {
  color: #94a3b8;
}

.upload-preview {
  gap: 10px;
  padding: 2px 4px 10px;
}

.upload-chip {
  width: 56px;
  height: 56px;
  max-width: none;
  border-color: rgb(191 219 254 / 85%);
  border-radius: 12px;
  padding: 0;
  background: #fff;
  box-shadow: 0 8px 18px rgb(37 99 235 / 10%);
}

.upload-chip img,
.upload-loading {
  width: 54px;
  height: 54px;
  border-radius: 11px;
}

.upload-chip > span {
  display: none;
}

.delete-upload {
  right: -6px;
  top: -6px;
  width: 20px;
  height: 20px;
  color: #64748b;
  background: #fff;
  box-shadow: 0 4px 10px rgb(15 23 42 / 16%);
  opacity: 0;
  transform: none;
  transition: opacity .2s ease, color .2s ease;
}

.upload-chip:hover .delete-upload {
  opacity: 1;
}

.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  border-top: 1px solid rgb(203 213 225 / 55%);
  padding-top: 12px;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-button {
  width: auto;
  height: 38px;
  border: 1px solid rgb(191 219 254 / 90%);
  border-radius: 12px;
  padding: 0 14px;
  color: #2563eb;
  background: linear-gradient(135deg, #eff6ff, #fff);
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.upload-button span {
  margin-right: 5px;
  font-size: 17px;
  font-weight: 500;
}

.upload-button:hover {
  border-color: #60a5fa;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(37 99 235 / 18%);
}

.image-mode-toggle {
  height: 38px;
  border: 1px solid rgb(203 213 225 / 68%);
  border-radius: 12px;
  padding: 0 11px;
  background: rgb(255 255 255 / 62%);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.image-mode-toggle:hover {
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgb(37 99 235 / 10%);
}

.image-mode-toggle:has(input:checked) {
  border-color: #60a5fa;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 10px 24px rgb(37 99 235 / 22%);
}

.image-mode-toggle:has(input:checked) strong {
  color: #fff;
}

.image-size-control {
  position: relative;
  display: block;
}

.image-size-control[hidden] {
  display: none;
}

.image-size-trigger {
  display: grid;
  min-width: 118px;
  height: 42px;
  align-content: center;
  gap: 2px;
  border: 1px solid rgb(203 213 225 / 80%);
  border-radius: 12px;
  padding: 0 14px;
  color: #4b5563;
  background: rgb(255 255 255 / 78%);
  text-align: left;
  box-shadow: 0 8px 18px rgb(37 99 235 / 8%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.image-size-trigger:hover,
.image-size-trigger[aria-expanded="true"] {
  border-color: #60a5fa;
  box-shadow: 0 10px 24px rgb(37 99 235 / 14%);
  transform: translateY(-1px);
}

.image-size-trigger span {
  margin: 0;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.image-size-trigger strong {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.image-size-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 20;
  display: grid;
  width: min(408px, calc(100vw - 32px));
  gap: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 22px 50px rgb(15 23 42 / 18%);
}

.image-size-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.image-size-panel-head > div { display: grid; gap: 5px; }
.image-size-panel-head strong { color: #20222a; font-size: 16px; }
.image-size-panel-head span { color: #98a2b3; font-size: 12px; }
.image-size-panel-head b { font-weight: 700; }
.image-size-panel-head > button { border: 0; padding: 0; color: #98a2b3; background: transparent; font-size: 24px; line-height: 1; }

.image-size-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border-radius: 12px;
  padding: 4px;
  background: #f5f5f7;
}

.image-size-mode-tabs button { height: 34px; border: 0; border-radius: 9px; color: #4b5563; background: transparent; font-size: 14px; }
.image-size-mode-tabs button.selected { color: #20222a; background: #fff; box-shadow: 0 2px 8px rgb(15 23 42 / 8%); }

.image-size-auto-state {
  display: grid;
  min-height: 270px;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.image-size-auto-state[hidden],
.image-size-ratio-settings[hidden] { display: none; }
.image-size-auto-state i { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; color: #2878ff; background: #eef5ff; font-size: 36px; font-style: normal; font-weight: 500; }
.image-size-auto-state strong { color: #20222a; font-size: 15px; }
.image-size-auto-state p { margin: 0; color: #a0a7b5; font-size: 13px; line-height: 1.6; }
.image-size-ratio-settings { display: grid; gap: 16px; }

.image-size-panel[hidden] {
  display: none;
}

.image-size-group {
  display: grid;
  gap: 8px;
}

.image-size-group > span {
  margin: 0;
  color: #8a94a8;
  font-size: 12px;
  font-weight: 800;
}

.image-size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.image-size-pill {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  color: #4b5563;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}

.image-ratio-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.image-ratio-card {
  display: grid;
  min-width: 0;
  min-height: 64px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  color: #4b5563;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.image-size-pill:hover,
.image-ratio-card:hover {
  border-color: #93c5fd;
  color: #2563eb;
  background: #f8fbff;
}

.image-size-pill.selected,
.image-ratio-card.selected {
  border-color: #60a5fa;
  color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px rgb(37 99 235 / 12%);
}

.history-load-more,
.message-load-older {
  display: block;
  width: calc(100% - 16px);
  margin: 10px auto;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 9px 12px;
  color: #2563eb;
  background: #f8fbff;
  font-weight: 700;
}

.history-detail-loading,
.history-detail-error {
  display: grid;
  min-height: 180px;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #64748b;
}

img.media-load-failed {
  min-height: 72px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.image-ratio-shape {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  color: #94a3b8;
  background: rgb(37 99 235 / 6%);
}

.image-ratio-card.selected .image-ratio-shape {
  color: #2563eb;
}

.image-ratio-shape.ratio-1-1 { width: 20px; height: 20px; }
.image-ratio-shape.ratio-3-2 { width: 23px; height: 15px; }
.image-ratio-shape.ratio-2-3 { width: 15px; height: 23px; }
.image-ratio-shape.ratio-16-9 { width: 26px; height: 15px; }
.image-ratio-shape.ratio-9-16 { width: 14px; height: 25px; }
.image-ratio-shape.ratio-4-3 { width: 24px; height: 18px; }
.image-ratio-shape.ratio-3-4 { width: 18px; height: 24px; }
.image-ratio-shape.ratio-21-9 { width: 29px; height: 12px; }

.toolbar-right select {
  width: 132px;
  height: 40px;
  border: 1px solid rgb(203 213 225 / 80%);
  border-radius: 12px;
  padding: 0 11px;
  color: #334155;
  background: rgb(255 255 255 / 76%);
  font-size: 12px;
  font-weight: 700;
  outline: 0;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.toolbar-right select:hover,
.toolbar-right select:focus {
  border-color: #60a5fa;
  box-shadow: 0 8px 18px rgb(37 99 235 / 10%);
  transform: translateY(-1px);
}

.prompt-composer.chat-mode .toolbar-right select {
  display: block;
  opacity: .72;
}

.send-button {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 15px;
  background:
    linear-gradient(#fff, #fff) 22px 11px / 2px 18px no-repeat,
    linear-gradient(135deg, transparent 47%, #fff 48% 54%, transparent 55%) 16px 11px / 12px 13px no-repeat,
    linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 14px 30px rgb(37 99 235 / 30%);
  transition: transform .24s ease, box-shadow .24s ease, opacity .24s ease;
}

.send-button:not(:disabled):hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 17px 34px rgb(37 99 235 / 38%);
}

.send-button.is-loading {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  animation: pulseGlow 1.4s infinite ease-in-out;
}

@keyframes studioFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes studioShimmer {
  to { transform: translateX(100%); }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 12px 28px rgb(37 99 235 / 24%); }
  50% { box-shadow: 0 0 34px rgb(37 99 235 / 48%); }
}

@media (max-width: 980px) {
  .quick-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .composer-toolbar {
    align-items: flex-end;
  }

  .toolbar-left {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .conversation {
    padding: 12px;
  }

  .prompt-composer {
    width: 100%;
    border-radius: 18px;
  }

  .composer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-left,
  .toolbar-right {
    justify-content: space-between;
  }

  .image-size-control {
    flex: 1 1 auto;
  }

  .image-size-trigger {
    width: 100%;
  }

  .image-size-panel {
    right: auto;
    left: 0;
    width: min(408px, calc(100vw - 24px));
  }

  .image-ratio-options {
    grid-template-columns: repeat(4, minmax(58px, 1fr));
  }

}

/* Chat stability overrides */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100dvh;
}

.app-shell,
.workspace,
.view.active,
.image-workbench,
.image-main {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.workspace,
.view.active,
.image-workbench,
.image-main,
.conversation {
  min-width: 0;
}

.image-workbench {
  grid-template-rows: minmax(0, 1fr);
}

.image-main {
  grid-template-rows: 72px minmax(0, 1fr);
}

.conversation {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  contain: layout;
}

.message-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  overflow-anchor: none;
  contain: layout paint;
  will-change: scroll-position;
}

.message-row {
  flex: 0 0 auto;
  min-height: 34px;
}

.message-row,
.message,
.message-text,
.message-text p {
  overflow-wrap: anywhere;
}

.message-row,
.welcome-card {
  animation: none;
}

.message.chat-message.assistant .message-text,
.message.chat-message.user .message-text {
  max-width: 100%;
  transform: translateZ(0);
}

.message.is-streaming .message-text p {
  white-space: pre-wrap;
}

.uploaded-gallery {
  align-items: flex-start;
}

.message-image-button {
  flex: 0 0 auto;
  overflow: hidden;
  contain: layout paint;
}

.message-image-button img,
.uploaded-gallery img {
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.message.user .message-image-button {
  width: 112px;
  height: 112px;
}

.message.user .message-image-button img {
  width: 112px;
  height: 112px;
}

.message.image-message.assistant .message-image-button {
  width: min(360px, 74vw);
  height: min(360px, 74vw);
}

.message.image-message.assistant .message-image-button img {
  width: 100%;
  height: 100%;
}

.prompt-composer {
  flex: 0 0 auto;
  max-height: min(360px, 42dvh);
  transform: translateZ(0);
}

.prompt-composer textarea {
  max-height: 180px;
  resize: none;
}

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

  .main-nav,
  .chat-sidebar {
    display: none;
  }

  .image-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .image-topbar {
    height: 64px;
  }

  .image-main {
    grid-template-rows: 64px minmax(0, 1fr);
  }

  .message-list {
    padding-right: 12px;
    padding-left: 12px;
  }

  .message-row .message {
    max-width: calc(100% - 45px);
  }
}

/* Assistant rich text and code blocks */
.message-rich-text {
  display: grid;
  gap: 12px;
  max-width: 100%;
}

.message-rich-text p {
  margin: 0;
  white-space: pre-wrap;
}

.message-rich-text h2,
.message-rich-text h3,
.message-rich-text h4 {
  margin: 6px 0 0;
  color: #0f172a;
  line-height: 1.35;
}

.message-rich-text h2 {
  font-size: 18px;
}

.message-rich-text h3 {
  font-size: 16px;
}

.message-rich-text h4 {
  font-size: 14px;
}

.message-rich-text a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.message-rich-text code {
  border: 1px solid rgb(148 163 184 / 28%);
  border-radius: 6px;
  padding: 1px 5px;
  color: #0f172a;
  background: rgb(241 245 249 / 86%);
  font-family: Consolas, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: .92em;
}

.message-rich-text blockquote {
  margin: 0;
  border-left: 3px solid #93c5fd;
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
  color: #334155;
  background: rgb(239 246 255 / 70%);
}

.message-rich-text blockquote p + p {
  margin-top: 8px;
}

.message-list-block,
.message-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.message-list-block li,
.message-steps li {
  padding-left: 4px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.message-steps {
  counter-reset: message-step;
  padding-left: 0;
  list-style: none;
}

.message-steps li {
  position: relative;
  min-height: 30px;
  padding: 7px 10px 7px 42px;
  border: 1px solid rgb(191 219 254 / 62%);
  border-radius: 10px;
  background: rgb(248 251 255 / 72%);
}

.message-steps li::before {
  position: absolute;
  left: 10px;
  top: 8px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2563eb;
  content: counter(message-step);
  counter-increment: message-step;
  font-size: 11px;
  font-weight: 900;
}

.message-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgb(203 213 225 / 70%);
  border-radius: 12px;
  background: #fff;
}

.message-table-wrap table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.message-table-wrap th,
.message-table-wrap td {
  max-width: 340px;
  border-bottom: 1px solid rgb(226 232 240 / 90%);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.message-table-wrap th {
  color: #0f172a;
  background: rgb(248 250 252 / 96%);
  font-weight: 900;
}

.message-table-wrap tr:last-child td {
  border-bottom: 0;
}

.message-callout {
  border: 1px solid rgb(147 197 253 / 58%);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgb(239 246 255 / 78%);
}

.message-callout strong {
  display: block;
  margin-bottom: 4px;
  color: #1d4ed8;
}

.message-callout.warning {
  border-color: rgb(251 191 36 / 60%);
  background: rgb(255 251 235 / 86%);
}

.message-callout.warning strong {
  color: #b45309;
}

.message-callout.important {
  border-color: rgb(167 139 250 / 58%);
  background: rgb(245 243 255 / 84%);
}

.message-callout.important strong {
  color: #6d28d9;
}

.message-path-list {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-path,
.path-chip {
  border: 1px solid rgb(148 163 184 / 32%);
  border-radius: 7px;
  color: #334155;
  background: rgb(248 250 252 / 90%);
  font-family: Consolas, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: 12px;
}

.inline-path {
  display: inline;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.path-chip {
  max-width: 100%;
  padding: 6px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message.chat-message.assistant .message-text {
  overflow: hidden;
}

.message.chat-message.assistant .message-text.is-collapsed p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.message.chat-message.assistant .chat-output {
  width: 100%;
  max-width: 760px;
}

.message.chat-message.assistant .message-code-block {
  width: 100%;
  max-width: 100%;
  margin: 2px 0;
  overflow: hidden;
  border: 1px solid #e1e1e5;
  border-radius: 12px;
  background: #f4f4f5;
  box-shadow: inset 0 1px #fff;
}

.message.chat-message.assistant .message-code-block.terminal-card {
  border-color: #1f2937;
  background: #0f172a;
  box-shadow: 0 14px 30px rgb(15 23 42 / 14%);
}

.message.chat-message.assistant .message-code-block.prompt-card {
  border-color: #cfe0f7;
  background: #f8fbff;
}

.message.chat-message.assistant .message-code-block.config-card {
  border-color: #d8dee8;
  background: #f8fafc;
}

.message.chat-message.assistant .message-code-block figcaption,
.message.chat-message.assistant .code-header {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #dedee3;
  padding: 8px 10px 8px 13px;
  color: #565869;
  background: #ececf1;
  font-size: 12px;
  font-weight: 800;
}

.message.chat-message.assistant .terminal-card figcaption,
.message.chat-message.assistant .terminal-card .code-header {
  border-bottom-color: #263142;
  color: #dbeafe;
  background: #111827;
}

.message.chat-message.assistant .prompt-card figcaption,
.message.chat-message.assistant .prompt-card .code-header {
  border-bottom-color: #d7e5fb;
  color: #1d4ed8;
  background: #eef5ff;
}

.message.chat-message.assistant .config-card figcaption,
.message.chat-message.assistant .config-card .code-header {
  border-bottom-color: #d8dee8;
  color: #334155;
  background: #f1f5f9;
}

.message.chat-message.assistant .message-code-block figcaption span,
.message.chat-message.assistant .code-lang {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message.chat-message.assistant .code-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.message.chat-message.assistant .copy-code,
.message.chat-message.assistant .toggle-code {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 9px;
  color: #374151;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  opacity: .72;
  transition: opacity .18s ease, background .18s ease, border-color .18s ease;
}

.message.chat-message.assistant .message-code-block:hover .copy-code,
.message.chat-message.assistant .copy-code:hover,
.message.chat-message.assistant .message-code-block:hover .toggle-code,
.message.chat-message.assistant .toggle-code:hover {
  border-color: #d1d5db;
  background: #fff;
  opacity: 1;
}

.message.chat-message.assistant .terminal-card .copy-code,
.message.chat-message.assistant .terminal-card .toggle-code {
  color: #dbeafe;
}

.message.chat-message.assistant .terminal-card:hover .copy-code,
.message.chat-message.assistant .terminal-card .copy-code:hover,
.message.chat-message.assistant .terminal-card:hover .toggle-code,
.message.chat-message.assistant .terminal-card .toggle-code:hover {
  border-color: #334155;
  color: #eff6ff;
  background: #1f2937;
}

.message.chat-message.assistant .copy-code:disabled {
  cursor: default;
  opacity: .85;
}

.message.chat-message.assistant .message-code-block pre {
  max-height: 420px;
  margin: 0;
  overflow: auto;
  padding: 15px;
  color: #111827;
  background: #f4f4f5;
  font-size: 13px;
  line-height: 1.65;
  tab-size: 2;
}

.message.chat-message.assistant .terminal-card pre {
  color: #d1fae5;
  background: #101318;
}

.message.chat-message.assistant .prompt-card pre {
  color: #1f2937;
  background: #fbfdff;
  white-space: pre-wrap;
}

.message.chat-message.assistant .config-card pre {
  color: #172033;
  background: #f8fafc;
}

.message.chat-message.assistant .message-code-block.is-collapsed pre {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.message.chat-message.assistant .message-code-block code {
  font-family: Consolas, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  white-space: pre;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
}

@media (max-width: 720px) {
  .message.chat-message.assistant .message-code-block {
    max-width: calc(100vw - 74px);
  }
}

/* AI chat presentation upgrade */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 58%), rgb(248 251 255 / 88%)),
    radial-gradient(circle at 14% 18%, rgb(22 184 201 / 10%), transparent 28%),
    radial-gradient(circle at 88% 8%, rgb(240 106 138 / 9%), transparent 26%);
}

.message-row {
  animation: message-in .18s ease-out both;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-avatar {
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 10px;
  background: linear-gradient(145deg, #115de5, #16b8c9);
  box-shadow: 0 10px 22px rgb(20 99 243 / 18%);
  letter-spacing: 0;
}

.message-avatar.user {
  border-color: #d7e1ee;
  color: #273247;
  background: linear-gradient(145deg, #fff, #eef3f9);
}

.message.chat-message {
  max-width: min(840px, 90%);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.message.chat-message.assistant {
  width: min(840px, calc(100% - 48px));
  border: 0;
  background: transparent;
}

.message.chat-message.user {
  max-width: min(680px, 82%);
  color: inherit;
  background: transparent;
}

.message.chat-message .message-author {
  margin-bottom: 7px;
}

.message-author strong {
  color: #253148;
  font-size: 12px;
}

.message-author time {
  color: #98a2b3;
  font-size: 10px;
}

.message.chat-message.assistant .message-text {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe7f3;
  border-radius: 14px 14px 14px 5px;
  padding: 17px 18px;
  color: #1d2939;
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: 0 14px 34px rgb(31 52 88 / 8%);
}

.message.chat-message.assistant .message-text::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #1463f3, #16b8c9, #f06a8a);
  content: "";
}

.message.chat-message.user .message-text {
  border: 1px solid #bcd5fb;
  border-radius: 14px 14px 5px 14px;
  padding: 12px 15px;
  color: #17365f;
  background: linear-gradient(180deg, #eef6ff, #e6f1ff);
  box-shadow: 0 8px 20px rgb(20 99 243 / 8%);
}

.message.chat-message.user .message-text p {
  color: inherit;
  font-size: 14px;
  line-height: 1.75;
}

.message-rich-text {
  gap: 14px;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.78;
}

.message-rich-text p {
  color: #273247;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.message-rich-text h2,
.message-rich-text h3,
.message-rich-text h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 -2px;
  color: #111827;
  letter-spacing: 0;
}

.message-rich-text h2::before,
.message-rich-text h3::before,
.message-rich-text h4::before {
  width: 4px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #1463f3, #16b8c9);
  content: "";
}

.message-rich-text h2 {
  font-size: 18px;
}

.message-rich-text h3 {
  font-size: 16px;
}

.message-rich-text h4 {
  font-size: 14px;
}

.message-rich-text a {
  color: #0b63ce;
  font-weight: 700;
  text-decoration-thickness: 1px;
}

.message-rich-text code {
  border-color: #cfd8e6;
  border-radius: 5px;
  padding: 2px 6px;
  color: #0f3d66;
  background: #eef6ff;
  font-size: .9em;
}

.message-rich-text blockquote {
  border-left: 4px solid #16b8c9;
  border-radius: 0 10px 10px 0;
  padding: 11px 13px;
  color: #344054;
  background: #effafd;
}

.message-list-block {
  gap: 7px;
  padding-left: 0;
  list-style: none;
}

.message-list-block li {
  position: relative;
  padding: 6px 8px 6px 25px;
  border-radius: 8px;
  background: #f7faff;
}

.message-list-block li::before {
  position: absolute;
  top: 16px;
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16b8c9;
  content: "";
}

.message-steps {
  gap: 9px;
}

.message-steps li {
  border-color: #d6e5fb;
  border-radius: 10px;
  padding: 9px 12px 9px 45px;
  background: linear-gradient(180deg, #fbfdff, #f4f9ff);
  box-shadow: 0 6px 16px rgb(31 52 88 / 5%);
}

.message-steps li::before {
  top: 9px;
  left: 11px;
  width: 24px;
  height: 24px;
  background: linear-gradient(145deg, #1463f3, #16b8c9);
  box-shadow: 0 6px 12px rgb(20 99 243 / 16%);
}

.message-table-wrap {
  border-color: #d7e1ee;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgb(31 52 88 / 6%);
}

.message-table-wrap table {
  font-size: 13px;
}

.message-table-wrap th {
  color: #17365f;
  background: linear-gradient(180deg, #eef6ff, #eaf3ff);
}

.message-table-wrap td {
  color: #344054;
  background: #fff;
}

.message-callout {
  border-color: #bfd9ff;
  border-radius: 10px;
  padding: 11px 13px;
  background: linear-gradient(180deg, #f4f9ff, #eef6ff);
}

.message-callout p {
  color: #344054;
}

.message-callout.warning {
  border-color: #f6cf78;
  background: #fff8e8;
}

.message-callout.important {
  border-color: #c8d7ff;
  background: #f3f6ff;
}

.inline-path,
.path-chip {
  border-color: #cdd8e7;
  color: #21405f;
  background: #f4f8fc;
}

.path-chip {
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.path-chip:hover {
  border-color: #9ebcf0;
  background: #eef5ff;
  transform: translateY(-1px);
}

.message.chat-message.assistant .message-code-block {
  border-color: #d7e1ef;
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: 0 12px 28px rgb(31 52 88 / 8%);
}

.message.chat-message.assistant .message-code-block figcaption,
.message.chat-message.assistant .code-header {
  min-height: 40px;
  border-bottom-color: #dce5f0;
  color: #344054;
  background: linear-gradient(180deg, #f8fafc, #edf2f8);
}

.message.chat-message.assistant .code-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.message.chat-message.assistant .code-lang::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #16b8c9;
  content: "";
}

.message.chat-message.assistant .copy-code,
.message.chat-message.assistant .toggle-code {
  border-color: #d4deec;
  border-radius: 7px;
  color: #344054;
  background: #fff;
  opacity: 1;
}

.message.chat-message.assistant .copy-code:hover,
.message.chat-message.assistant .toggle-code:hover {
  border-color: #9ebcf0;
  color: #075ee8;
  background: #f3f8ff;
}

.message.chat-message.assistant .message-code-block pre {
  max-height: 480px;
  min-height: 96px;
  color: #1f2937;
  background:
    linear-gradient(90deg, rgb(20 99 243 / 4%) 0 1px, transparent 1px 100%) 0 0 / 44px 100%,
    #fbfcfe;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}

.message.chat-message.assistant .terminal-card {
  border-color: #182234;
}

.message.chat-message.assistant .terminal-card pre {
  color: #d7fbe8;
  background: #0d1320;
}

.message.chat-message.assistant .terminal-card .code-lang::before {
  background: #36d399;
}

.message.chat-message.assistant .prompt-card .code-lang::before {
  background: #f06a8a;
}

.message.chat-message.assistant.is-streaming .message-text::after {
  display: inline-block;
  width: 7px;
  height: 16px;
  margin-left: 3px;
  border-radius: 999px;
  background: #1463f3;
  content: "";
  vertical-align: -3px;
  animation: stream-caret 1s steps(2, start) infinite;
}

@keyframes stream-caret {
  50% {
    opacity: .18;
  }
}

.chat-thinking {
  border-color: #dfe7f3;
  border-radius: 14px 14px 14px 5px;
  padding: 13px 16px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 12px 28px rgb(31 52 88 / 8%);
}

.conversation {
  gap: 16px;
  overflow: hidden;
}

.message-list {
  padding-bottom: 42px;
  scroll-padding-bottom: 42px;
  overscroll-behavior: contain;
}

.message.chat-message.assistant .message-text {
  max-width: 100%;
}

.message.chat-message.assistant .message-code-block {
  max-width: min(100%, 760px);
}

.message.image-message.assistant {
  max-width: min(520px, 88%);
}

.message.image-message.assistant .message-text,
.message.image-message.assistant .message-rich-text,
.message.image-message.assistant .message-code-block,
.message.image-message.assistant .message-callout,
.message.image-message.assistant .message-list-block,
.message.image-message.assistant .message-steps {
  display: none;
}

.message.image-message.assistant .uploaded-gallery {
  margin-top: 0;
}

.message.image-message.assistant .message-actions {
  margin-top: 10px;
}

.message-renderer {
  contain: content;
}

.message-block-card {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #dfe7f3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgb(31 52 88 / 5%);
}

.message-block-head {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e4ebf4;
  padding: 8px 10px 8px 12px;
  color: #344054;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 900;
}

.message-block-body {
  padding: 12px;
}

.block-copy,
.message-action-button {
  border: 1px solid #d4deec;
  border-radius: 7px;
  padding: 5px 9px;
  color: #344054;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  opacity: .88;
  transition: opacity .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
}

.message-block-card:hover .block-copy,
.message.chat-message:hover .message-action-button,
.block-copy:hover,
.message-action-button:hover {
  border-color: #9ebcf0;
  color: #075ee8;
  background: #f3f8ff;
  opacity: 1;
}

.message-paragraph-block {
  position: relative;
}

.message-paragraph-block .inline-copy {
  margin-top: 8px;
}

.json-preview,
.prompt-preview,
.message-file-tree,
.message-error-log {
  max-width: 100%;
  max-height: 460px;
  margin: 0;
  overflow: auto;
  border-radius: 8px;
  padding: 12px;
  white-space: pre;
  font-family: Consolas, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
}

.json-preview {
  color: #1f2937;
  background: #f8fafc;
}

.prompt-preview {
  color: #20324c;
  background: #fbfdff;
  white-space: pre-wrap;
}

.message-file-tree {
  color: #12314f;
  background: #f5f9ff;
}

.message-error-log {
  color: #7a271a;
  background: #fff6f5;
}

.message-error-log strong,
.message-error-log mark {
  border-radius: 4px;
  padding: 1px 4px;
  color: #b42318;
  background: #ffe4e0;
}

.api-section + .api-section {
  margin-top: 12px;
}

.api-section > strong {
  display: inline-flex;
  margin-bottom: 6px;
  color: #075ee8;
  font-size: 12px;
}

.message-task-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.message-task-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f7faff;
}

.message-task-list li > span {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  margin-top: 3px;
  border: 1px solid #b8c7da;
  border-radius: 4px;
  background: #fff;
}

.message-task-list li.checked > span {
  border-color: #13915c;
  background: #13915c;
}

.message-task-list li.checked > span::after {
  color: #fff;
  content: "✓";
  font-size: 11px;
  font-weight: 900;
}

.message-faq-item {
  border-radius: 8px;
  padding: 9px 10px;
  background: #f7faff;
}

.message-faq-item + .message-faq-item {
  margin-top: 8px;
}

.message-faq-item summary {
  cursor: pointer;
  color: #1f2937;
  font-weight: 900;
}

.message-faq-item p {
  margin-top: 8px;
}

.message-media-item {
  margin: 0;
}

.message-media-item + .message-media-item {
  margin-top: 12px;
}

.message-media-item img,
.message-media-item video {
  display: block;
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
  object-fit: contain;
  background: #eef2f7;
}

.message-media-item figcaption {
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #667085;
  font-size: 12px;
}

.message-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.message-comparison-grid > div {
  border-radius: 8px;
  padding: 10px;
  background: #f7faff;
}

.chat-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  opacity: .28;
  transition: opacity .16s ease;
}

.message.chat-message:hover .chat-message-actions,
.chat-message-actions:focus-within {
  opacity: 1;
}

.favorite-message.active {
  border-color: #f0c45a;
  color: #936f00;
  background: #fff9e8;
}

.delete-message:hover {
  border-color: #f3b4ad;
  color: #b42318;
  background: #fff5f4;
}

@media (max-width: 720px) {
  .message-block-body {
    padding: 10px;
  }

  .message-comparison-grid {
    grid-template-columns: 1fr;
  }

  .chat-message-actions {
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .message-list {
    gap: 15px;
  }

  .message-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 9px;
  }

  .message.chat-message,
  .message.chat-message.assistant,
  .message.chat-message.user {
    max-width: calc(100% - 40px);
  }

  .message.chat-message.assistant .message-text,
  .message.chat-message.user .message-text {
    padding: 13px 14px;
  }
}

/* Video composer product layout */
.video-workbench {
  background: #f7f8fc;
}

.video-chat-panel {
  background: #f7f8fc;
}

.video-message-list {
  padding-right: max(22px, calc((100% - 920px) / 2));
  padding-left: max(22px, calc((100% - 920px) / 2));
}

.video-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  width: min(920px, calc(100% - 44px));
  max-height: min(620px, calc(100dvh - 132px));
  flex-direction: column;
  gap: 16px;
  margin: 0 auto 18px;
  overflow: visible;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  color: #1f2937;
  background: #fff;
  box-shadow: 0 14px 36px rgb(15 23 42 / 8%);
  backdrop-filter: none;
}

.video-composer.is-dragover,
.video-composer:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 18px 44px rgb(37 99 235 / 12%), 0 0 0 3px rgb(139 92 246 / 10%);
}

.video-input-section {
  display: grid;
  gap: 10px;
}

.video-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.video-section-heading label,
.video-section-heading strong {
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.video-section-heading span {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.video-prompt-wrap {
  position: relative;
}

.video-composer .video-prompt-wrap textarea {
  width: 100%;
  min-height: 104px;
  max-height: 180px;
  resize: none;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 13px 14px 30px;
  color: #1f2937;
  background: #f9fafb;
  font-size: 14px;
  line-height: 1.65;
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.video-composer .video-prompt-wrap textarea::placeholder {
  color: #9ca3af;
}

.video-composer .video-prompt-wrap textarea:focus {
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(139 92 246 / 10%);
}

.video-prompt-count {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
}

.video-upload-zone {
  display: flex;
  width: 100%;
  min-height: 78px;
  align-items: center;
  gap: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 14px 16px;
  color: #1f2937;
  background: linear-gradient(180deg, #fbfdff, #f8fafc);
  box-shadow: none;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.video-upload-zone:hover,
.video-composer.is-dragover .video-upload-zone {
  border-color: #8b5cf6;
  background: #f5f3ff;
  box-shadow: 0 10px 24px rgb(139 92 246 / 10%);
  transform: translateY(-1px);
}

.video-upload-zone > span:last-child {
  display: grid;
  gap: 4px;
}

.video-upload-zone strong {
  color: #1f2937;
  font-size: 14px;
}

.video-upload-zone small {
  color: #6b7280;
  font-size: 12px;
}

.video-upload-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 10px;
  background:
    radial-gradient(circle at 15px 15px, #fff 0 3px, transparent 4px),
    linear-gradient(135deg, transparent 45%, #fff 46% 54%, transparent 55%) 10px 22px / 22px 12px no-repeat,
    linear-gradient(135deg, #2563eb, #8b5cf6);
  box-shadow: 0 8px 18px rgb(37 99 235 / 18%);
}

.video-upload-preview.has-files {
  display: flex;
  max-height: 92px;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}

.video-upload-chip {
  position: relative;
  display: grid;
  width: 132px;
  min-width: 132px;
  height: 74px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  overflow: visible;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 28px 8px 8px;
  background: #fff;
}

.video-upload-chip img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
}

.video-upload-chip > span {
  overflow: hidden;
  color: #4b5563;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.video-upload-chip button {
  position: absolute;
  right: 6px;
  top: 6px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  color: #6b7280;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 4px 10px rgb(15 23 42 / 10%);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.video-upload-chip button::before,
.video-upload-chip button::after {
  position: absolute;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.video-upload-chip button::before {
  transform: rotate(45deg);
}

.video-upload-chip button::after {
  transform: rotate(-45deg);
}

.video-upload-chip button:hover {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff5f5;
}

.video-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.video-composer-error {
  display: none;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 9px 11px;
  color: #b91c1c;
  background: #fff5f5;
  font-size: 12px;
  line-height: 1.5;
}

.video-composer-error.visible {
  display: block;
}

.video-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #edf0f5;
  padding-top: 2px;
}

.video-composer-footer p {
  color: #6b7280;
  font-size: 12px;
}

.video-send-button {
  display: inline-flex;
  width: 38px;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: #2563eb;
  box-shadow: 0 10px 22px rgb(37 99 235 / 24%);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.video-send-arrow {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.video-send-arrow::before {
  position: absolute;
  top: 5px;
  left: 7px;
  width: 2px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.video-send-arrow::after {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
  content: "";
}

.video-send-button:not(:disabled):hover {
  background: #1d4ed8;
  box-shadow: 0 12px 26px rgb(37 99 235 / 30%);
  transform: translateY(-1px);
}

.video-send-button:not(:disabled):active {
  box-shadow: 0 6px 14px rgb(37 99 235 / 20%);
  transform: translateY(0);
}

.video-send-button:disabled {
  cursor: default;
  background: #d7dbe2;
  box-shadow: none;
}

.video-button-loader {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / 48%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@media (max-width: 1180px) {
  .video-message-list {
    padding-right: 18px;
    padding-left: 18px;
  }

  .video-composer {
    width: calc(100% - 36px);
  }
}

@media (max-width: 900px) {
  .video-workbench {
    height: 100dvh;
  }

  .video-history-panel,
  .video-player-panel {
    display: none;
  }

  .video-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .video-settings-grid {
    grid-template-columns: 1fr;
  }

  .video-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .video-section-heading span {
    text-align: left;
  }

  .video-composer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .video-send-button {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .video-message-list {
    padding: 14px 12px;
  }

  .video-composer {
    width: calc(100% - 24px);
    max-height: min(680px, calc(100dvh - 112px));
    margin-bottom: 12px;
    border-radius: 14px;
    padding: 16px;
  }

  .video-upload-chip {
    width: 120px;
    min-width: 120px;
  }
}

/* Direct-select video settings */
.video-composer {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  gap: 12px;
  padding: 16px;
}

.video-input-section {
  gap: 7px;
}

.video-composer .video-prompt-wrap textarea {
  min-height: 84px;
  padding-top: 11px;
  padding-bottom: 27px;
}

.video-upload-zone {
  min-height: 56px;
  gap: 11px;
  padding: 9px 12px;
}

.video-upload-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.video-settings-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.video-setting-group {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(118px, .32fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #fbfcfe;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.video-setting-group:focus-within {
  border-color: #bfdbfe;
  background: #fff;
  box-shadow: 0 8px 22px rgb(37 99 235 / 7%);
}

.video-setting-title {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: start;
  gap: 7px;
}

.video-setting-title > span {
  display: grid;
  gap: 3px;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.video-setting-title strong {
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.video-setting-title small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.video-option-row,
.video-resolution-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.video-resolution-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-option-pill,
.video-ratio-card {
  min-width: 0;
  border: 1px solid #dbe3ef;
  color: #374151;
  background: #f8fafc;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

.video-option-pill:focus-visible,
.video-ratio-card:focus-visible {
  outline: 3px solid rgb(37 99 235 / 18%);
  outline-offset: 2px;
}

.video-option-pill {
  height: 38px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
}

.video-option-pill:hover:not(:disabled),
.video-ratio-card:hover:not(:disabled) {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: #f3f8ff;
  transform: translateY(-1px);
}

.video-option-pill.selected,
.video-ratio-card.selected {
  border-color: #7c3aed;
  color: #1d4ed8;
  background: linear-gradient(180deg, #f5f3ff, #eff6ff);
  box-shadow: 0 8px 18px rgb(37 99 235 / 10%), inset 0 0 0 1px rgb(124 58 237 / 14%);
}

.video-option-pill[aria-disabled="true"],
.video-option-pill.is-disabled {
  cursor: not-allowed;
  border-color: #e5e7eb;
  color: #9ca3af;
  background: repeating-linear-gradient(-45deg, #f8fafc 0 6px, #f1f5f9 6px 12px);
  box-shadow: none;
  opacity: .66;
  transform: none;
}

.video-ratio-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.video-ratio-card {
  display: grid;
  min-height: 60px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border-radius: 11px;
  padding: 6px;
}

.video-constraint-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
}

.video-constraint-note::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 4px rgb(37 99 235 / 9%);
  content: "";
}

.video-composer-footer {
  position: sticky;
  z-index: 2;
  bottom: 0;
  padding-top: 10px;
  background: #fff;
}

.video-ratio-card strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.video-ratio-shape {
  display: block;
  border: 2px solid currentColor;
  border-radius: 5px;
  color: #2563eb;
  background: rgb(37 99 235 / 8%);
}

.video-ratio-shape.ratio-square {
  width: 25px;
  height: 25px;
}

.video-ratio-shape.ratio-portrait {
  width: 20px;
  height: 28px;
}

.video-ratio-shape.ratio-standard {
  width: 30px;
  height: 23px;
}

.video-ratio-shape.ratio-vertical {
  width: 17px;
  height: 31px;
}

.video-ratio-shape.ratio-wide {
  width: 34px;
  height: 20px;
}

.video-send-button:disabled .video-button-loader {
  opacity: 1;
}

@media (max-width: 1180px) {
  .video-setting-group {
    grid-template-columns: minmax(110px, .3fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .video-chat-panel {
    display: block;
    height: 100%;
    overflow-y: auto;
  }

  .video-message-list {
    min-height: auto;
    overflow: visible;
  }

  .video-message-list:has(> .video-welcome-card) {
    display: none;
  }

  .video-composer {
    position: relative;
    bottom: auto;
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .video-composer .video-prompt-wrap textarea {
    min-height: 96px;
  }

  .video-composer-footer {
    position: static;
  }

  .video-setting-group {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px;
  }

  .video-setting-title {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .video-option-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .video-ratio-grid {
    grid-template-columns: repeat(5, minmax(52px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .video-ratio-card {
    min-height: 68px;
  }

  .video-resolution-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .video-composer-footer p {
    display: none;
  }
}

@media (max-width: 420px) {
  .video-option-pill {
    height: 40px;
    padding: 0 6px;
    font-size: 12px;
  }
}

/* Compact video controls and settings popover */
.video-composer {
  max-height: none;
  overflow: visible;
  gap: 10px;
  padding: 14px;
}

.video-composer .video-prompt-wrap textarea {
  min-height: 94px;
}

.video-compact-toolbar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.video-compact-button {
  display: inline-flex;
  min-width: 0;
  height: 46px;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 12px;
  text-align: left;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.video-compact-button > span:not(.video-add-icon) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.video-compact-button strong,
.video-compact-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-compact-button strong {
  font-size: 13px;
  font-weight: 900;
}

.video-compact-button small {
  font-size: 10px;
  font-weight: 800;
  opacity: .72;
}

.video-add-image-button {
  flex: 0 0 auto;
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
}

.video-add-image-button:hover {
  border-color: #60a5fa;
  background: #dbeafe;
  box-shadow: 0 8px 18px rgb(37 99 235 / 12%);
  transform: translateY(-1px);
}

.video-add-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #2563eb;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.video-settings-control {
  position: relative;
  min-width: 0;
  flex: 0 0 120px;
}

.video-settings-trigger {
  width: 120px;
  border-color: #ddd6fe;
  color: #6d28d9;
  background: #f5f3ff;
}

.video-settings-trigger:hover,
.video-settings-trigger.active {
  border-color: #a78bfa;
  background: #ede9fe;
  box-shadow: 0 8px 18px rgb(109 40 217 / 12%);
}

.video-settings-popover {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(420px, calc(100vw - 32px));
  max-height: min(530px, calc(100dvh - 130px));
  overflow-y: auto;
  border: 1px solid #dfe3ec;
  border-radius: 12px;
  padding: 14px;
  color: #1f2937;
  background: #fff;
  box-shadow: 0 22px 60px rgb(15 23 42 / 20%);
}

.video-settings-popover[hidden] {
  display: none;
}

.video-settings-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.video-settings-popover-head > span {
  display: grid;
  gap: 2px;
}

.video-settings-popover-head strong {
  font-size: 15px;
  font-weight: 900;
}

.video-settings-popover-head small {
  color: #94a3b8;
  font-size: 11px;
}

.video-settings-popover-head button {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  background: #f8fafc;
  font-size: 20px;
  line-height: 1;
}

.video-settings-popover .video-settings-grid {
  gap: 9px;
}

.video-settings-popover .video-setting-group {
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 11px;
}

.video-settings-popover .video-setting-title small {
  display: none;
}

.video-settings-popover .video-option-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.video-settings-popover .video-ratio-card {
  min-height: 58px;
}

.video-compact-toolbar .video-send-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-self: center;
  margin-left: auto;
}

.video-prompt-wrap .video-upload-preview.has-files {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  left: 10px;
  display: flex;
  max-height: 68px;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 6px;
}

.video-prompt-wrap:has(.video-upload-preview.has-files) textarea {
  min-height: 174px;
  padding-top: 88px;
}

.video-prompt-wrap .video-upload-chip {
  width: 60px;
  min-width: 60px;
  height: 60px;
  display: block;
  padding: 3px;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.video-prompt-wrap .video-upload-chip img {
  width: 52px;
  height: 52px;
  border-radius: 7px;
}

.video-prompt-wrap .video-upload-chip > span {
  display: none;
}

.video-prompt-wrap .video-upload-chip button {
  right: 2px;
  top: 2px;
}

@media (max-width: 720px) {
  .video-composer {
    overflow: visible;
  }

  .video-compact-toolbar {
    display: flex;
  }

  .video-compact-toolbar .video-send-button {
    width: 38px;
  }

  .video-settings-popover {
    position: fixed;
    inset: auto 12px 76px;
    width: auto;
    max-height: calc(100dvh - 100px);
  }
}

.image-topbar,
.video-topbar,
.topbar.clean {
  padding-right: 250px;
}

@media (max-width: 720px) {
  .account-menu {
    top: 10px;
    right: 10px;
  }

  .account-trigger {
    height: 38px;
    padding-right: 10px;
  }

  .account-popover {
    width: min(250px, calc(100vw - 20px));
  }

  .image-topbar,
  .video-topbar,
  .topbar.clean {
    padding-right: 170px;
  }
}

.send-button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #d6dbe1;
  box-shadow: none;
  opacity: 1;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.send-button::before,
.send-button::after {
  position: absolute;
  display: block;
  content: "";
}

.send-button::before {
  width: 13px;
  height: 13px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translateY(3px) rotate(45deg);
}

.send-button::after {
  width: 3px;
  height: 17px;
  border-radius: 999px;
  background: #fff;
  transform: translateY(2px);
}

.send-button.has-content:not(:disabled) {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 12px 28px rgb(37 99 235 / 28%);
}

.send-button.has-content:not(:disabled):hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 16px 34px rgb(37 99 235 / 36%);
}

.send-button:disabled {
  cursor: not-allowed;
  background: #d5d9de;
  opacity: 1;
  box-shadow: none;
}

.send-button.is-loading {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.send-button.is-loading::before {
  display: none;
}

.send-button.is-loading::after {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: #fff;
  border-radius: 50%;
  background: transparent;
  transform: none;
  animation: spin .75s linear infinite;
}

.video-player-heading {
  justify-content: flex-start;
}

.video-player-meta {
  display: none;
}

.video-download-button {
  height: 36px;
  border-radius: 10px;
  padding: 0 16px;
}

.history-card-body > strong,
.video-history-card strong,
.detail-history-item strong {
  cursor: text;
}

.video-history-card {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

.video-history-main {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  padding: 9px;
  color: inherit;
  background: transparent;
  text-align: left;
}

.video-history-actions {
  position: absolute;
  right: 8px;
  bottom: 5px;
  display: flex;
  gap: 4px;
  overflow: visible;
  opacity: 0;
  white-space: normal;
  transition: opacity .16s ease;
}

.video-history-card:hover .video-history-actions,
.video-history-card.active .video-history-actions {
  opacity: 1;
}

.video-history-actions button,
.detail-history-actions button {
  border: 0;
  border-radius: 6px;
  padding: 3px 6px;
  color: #94a3b8;
  background: rgb(15 23 42 / 56%);
  font-size: 10px;
  font-weight: 800;
}

.video-history-actions button:hover,
.detail-history-actions button:hover {
  color: #bfdbfe;
  background: rgb(37 99 235 / 38%);
}

.video-history-actions button:last-child:hover,
.detail-history-actions button:last-child:hover {
  color: #fecaca;
  background: rgb(220 38 38 / 28%);
}

[data-delete-chat]:disabled,
[data-delete-video]:disabled,
[data-delete-detail]:disabled {
  cursor: wait;
  opacity: .58;
  pointer-events: none;
}

.detail-history-item {
  position: relative;
  display: block;
  min-height: 62px;
  padding: 0;
}

.detail-history-main {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 0;
  border-radius: inherit;
  padding: 8px 9px 25px;
  color: inherit;
  background: transparent;
  text-align: left;
}

.detail-history-fallback {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-top: 0;
  border-radius: 8px;
  color: #1463f3;
  background: #eaf3ff;
  font-size: 13px;
  font-weight: 900;
}

.detail-history-item strong,
.detail-history-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-history-item small {
  margin-top: 4px;
  color: #8a96a8;
  font-size: 10px;
}

.detail-history-actions {
  position: absolute;
  right: 8px;
  bottom: 5px;
  display: flex;
  gap: 4px;
  margin-top: 0;
  overflow: visible;
  opacity: 0;
  white-space: normal;
  transition: opacity .16s ease;
}

.detail-history-item:hover .detail-history-actions,
.detail-history-item.active .detail-history-actions {
  opacity: 1;
}

.video-history-title-editing {
  display: inline-block;
  max-width: 100%;
  border-radius: 7px;
  outline: 2px solid rgb(37 99 235 / 40%);
  outline-offset: 2px;
  color: #dbeafe;
  background: rgb(37 99 235 / 18%);
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.detail-history-main {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 9px 27px;
}

.detail-history-item .detail-history-preview-grid {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0;
  color: inherit;
  line-height: 1;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.detail-history-item .detail-history-preview-grid.single {
  grid-template-columns: 1fr;
}

.detail-history-item .detail-history-preview-grid img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2ff;
}

.detail-history-item .detail-history-preview-grid.single img {
  height: 60px;
}

.detail-history-item .detail-history-preview-grid i {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 50%;
  color: #dbeafe;
  background: linear-gradient(135deg, rgb(15 23 42 / 88%), rgb(37 99 235 / 62%));
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.detail-history-copy {
  min-width: 0;
}

/* Multi-generation video conversations */
.video-message-list {
  gap: 12px;
}

.video-generation-thread {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid rgb(148 163 184 / 16%);
  padding: 0 0 16px;
}

.video-generation-thread:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.video-generation-thread .video-message {
  max-width: min(740px, 92%);
  box-sizing: border-box;
}

.video-generation-thread .video-message.assistant {
  width: min(740px, 92%);
}

.video-generation-thread .video-message.user {
  width: fit-content;
  max-width: min(680px, 86%);
}

.video-message {
  border-radius: 14px;
}

.video-result-card {
  min-width: 0;
  margin-top: 12px;
  border: 1px solid rgb(99 102 241 / 18%);
  border-radius: 12px;
  padding: 12px;
  background: rgb(255 255 255 / 54%);
}

.video-result-card > * {
  min-width: 0;
}

.video-generation-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.video-generation-meta b,
.video-generation-meta span,
.video-result-status em {
  border-radius: 999px;
  padding: 4px 8px;
  color: #5b6472;
  background: #eef2f7;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.video-generation-meta b {
  color: #4338ca;
  background: #eef2ff;
}

.video-result-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.video-result-status em {
  color: #087b50;
  background: #eaf8f2;
}

.video-dynamic-status-text {
  min-height: 1.7em;
  transition: color .2s ease;
}

.video-message.assistant:has(.video-progress) .video-dynamic-status-text::after {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-radius: 50%;
  background: #6366f1;
  content: "";
  vertical-align: 2px;
  animation: videoStatusPulse 1.2s ease-in-out infinite;
}

@keyframes videoStatusPulse {
  50% { opacity: .25; transform: scale(.75); }
}

.video-history-card .video-history-main > span:last-child > span {
  color: #6b7280;
  font-weight: 700;
}

.video-task-status {
  display: grid;
  gap: 10px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 11px 12px;
  background: #fff;
}

.video-task-status header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-task-status header strong {
  color: #344054;
  font-size: 12px;
}

.video-task-status header code {
  max-width: 58%;
  overflow: hidden;
  border-radius: 5px;
  padding: 3px 6px;
  color: #667085;
  background: #f2f4f7;
  font-family: Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-task-status ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-task-status li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #98a2b3;
  font-size: 9px;
  text-align: center;
}

.video-task-status li:not(:last-child)::after {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  width: calc(100% - 16px);
  height: 2px;
  background: #e4e7ec;
  content: "";
}

.video-task-status li i {
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid #d0d5dd;
  border-radius: 50%;
  background: #fff;
}

.video-task-status li.complete,
.video-task-status li.active {
  color: #344054;
  font-weight: 800;
}

.video-task-status li.complete i {
  border-color: #12b76a;
  background: #12b76a;
  box-shadow: inset 0 0 0 3px #fff;
}

.video-task-status li.complete:not(:last-child)::after {
  background: #86efac;
}

.video-task-status li.active i {
  border-color: #6366f1;
  animation: videoTaskSpin 1s linear infinite;
}

@keyframes videoTaskSpin {
  50% { box-shadow: 0 0 0 4px rgb(99 102 241 / 16%); }
}

.video-inline-result {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #101828;
}

.video-inline-result video {
  display: block;
  width: 100%;
  max-height: 420px;
  background: #101828;
}

.video-inline-result a {
  position: absolute;
  right: 9px;
  top: 9px;
  border-radius: 7px;
  padding: 6px 9px;
  color: #fff;
  background: rgb(15 23 42 / 76%);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

@media (max-width: 720px) {
  .video-generation-thread .video-message,
  .video-generation-thread .video-message.assistant,
  .video-generation-thread .video-message.user { width: 100%; max-width: 100%; }
  .video-task-status ol { grid-template-columns: 1fr; gap: 7px; }
  .video-task-status li { grid-template-columns: 16px minmax(0, 1fr); justify-items: start; text-align: left; }
  .video-task-status li:not(:last-child)::after { top: 13px; bottom: -8px; left: 5px; width: 2px; height: auto; }
}

/* Streaming content grows inside its own scroller and must not make the page
   viewport participate in browser scroll anchoring. */
#message-list,
.message-list {
  overflow-anchor: none;
  contain: layout paint;
}

.message.chat-message.assistant .message-stream-text {
  min-height: 1.65em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #263244;
  font: inherit;
  line-height: 1.75;
}

.message.chat-message.assistant .message-stream-text.is-code {
  border: 1px solid #e1e1e5;
  border-radius: 10px;
  padding: 12px 14px;
  color: #172033;
  background: #f6f7f9;
  font-family: Consolas, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  tab-size: 2;
}

/* Existing rows are recreated when a response is finalized; replaying the
   entrance animation made the whole conversation flash once more. */
.message-list .message-row {
  animation: none;
}

/* Keep assistant output at the available conversation width. fit-content and
   min-content sizing could squeeze mixed Chinese/English text into columns. */
.message-row.assistant .message.chat-message {
  width: calc(100% - 45px);
  min-width: 0;
  flex: 1 1 auto;
}

.message.chat-message.assistant .message-text,
.message.chat-message.assistant .message-renderer,
.message.chat-message.assistant .message-rich-text,
.message.chat-message.assistant .message-paragraph-block,
.message.chat-message.assistant .message-block-card,
.message.chat-message.assistant .message-block-body {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.message.chat-message.assistant .message-renderer {
  contain: none;
}

.message.chat-message.assistant .message-paragraph-block p {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
}

.message.chat-message.assistant .message-code-block pre,
.message.chat-message.assistant .json-preview,
.message.chat-message.assistant .prompt-preview {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  .message-row,
  .message.is-streaming .message-text::after {
    animation: none !important;
  }
}

/* Creative Workshop refresh: reference-driven desktop composition. */
.brand-mark,
.app-logo,
.creative-icon,
.module-image-icon {
  overflow: hidden;
  padding: 0;
}

.creative-icon,
.module-image-icon {
  background: #17152f;
}

.brand-mark img,
.app-logo img,
.creative-icon img,
.module-image-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creative-icon img,
.module-image-icon img {
  transform: scale(1.08);
}

.brand-mark,
.app-logo {
  border: 1px solid #eef2ff;
  background: #fff;
}

.brand-mark img,
.app-logo img {
  transform: scale(1.34);
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgb(78 70 229 / 24%);
}

.main-nav {
  width: 94px;
  gap: 12px;
  padding: 20px 10px;
  background: #fff;
}

.module-tab {
  width: 74px;
  height: 76px;
  border-radius: 16px;
  color: #344054;
}

.module-tab:hover {
  color: #4338ca;
  background: #f5f6ff;
  transform: translateY(-1px);
}

.module-tab.active {
  border-color: #e7e9ff;
  color: #4f46e5;
  background: linear-gradient(180deg, #f1f2ff, #f7f7ff);
  box-shadow: 0 8px 22px rgb(79 70 229 / 10%);
}

.module-tab.active::after {
  display: none;
}

.module-tab .creative-icon,
.module-tab.active .creative-icon,
.module-tab .module-image-icon,
.module-tab.active .module-image-icon {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  filter: none;
}

.image-workbench {
  grid-template-columns: 306px minmax(0, 1fr);
  background: #fbfcff;
}

.chat-sidebar {
  padding: 24px 20px 18px;
  border-right-color: #e8ebf3;
  background: #fff;
  box-shadow: 8px 0 28px rgb(31 42 68 / 3%);
  backdrop-filter: none;
}

.app-brand {
  gap: 11px;
  margin-bottom: 20px;
}

.app-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
}

.app-brand h2 {
  color: #172033;
  font-size: 18px;
  font-weight: 900;
}

.app-brand p {
  max-width: 184px;
  color: #98a2b3;
  font-size: 10px;
  line-height: 1.45;
}

.new-chat {
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(100deg, #3b6df6, #6548f5);
  box-shadow: 0 10px 24px rgb(79 70 229 / 20%);
  letter-spacing: .01em;
}

.new-chat span {
  margin-right: 4px;
  font-size: 18px;
  font-weight: 500;
  vertical-align: -1px;
}

.history-search-box {
  margin-top: 14px;
}

.history-search-box input {
  height: 40px;
  border-color: #e4e7ec;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
}

.history-head {
  margin: 20px 4px 9px;
  color: #667085;
  font-size: 12px;
}

.history-card {
  border: 1px solid #eaecf0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(15 23 42 / 2%);
}

.history-card:hover {
  border-color: #c7d0ff;
  box-shadow: 0 9px 22px rgb(79 70 229 / 8%);
  transform: translateY(-1px);
}

.history-card.active {
  border-color: #7c73ff;
  background: linear-gradient(145deg, #f7f7ff, #fff);
  box-shadow: 0 0 0 2px rgb(99 102 241 / 8%), 0 10px 24px rgb(79 70 229 / 9%);
}

.history-card.active::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -1px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #5b5cf0;
  content: "";
}

.image-main {
  grid-template-rows: 86px minmax(0, 1fr);
  background:
    radial-gradient(circle at 55% 12%, rgb(91 92 240 / 4%), transparent 28%),
    #fcfdff;
}

.image-topbar {
  position: relative;
  height: 86px;
  padding: 0 30px;
  border-bottom-color: #eceef4;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 2px 12px rgb(15 23 42 / 3%);
  backdrop-filter: blur(16px);
}

.image-topbar h1 {
  color: #172033;
  font-size: 24px;
  letter-spacing: -.02em;
}

.image-topbar p {
  margin-top: 5px;
  color: #98a2b3;
  font-size: 12px;
}

.conversation {
  min-height: 0;
  gap: 18px;
  padding: 24px 28px 18px;
}

.conversation-body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.message-list {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 8px 24px 4px;
}

.welcome-card {
  width: min(760px, 92%);
  margin-top: clamp(24px, 6vh, 68px);
}

.welcome-badge {
  border-color: #dedcff;
  color: #4f46e5;
  background: #f3f2ff;
  box-shadow: 0 12px 30px rgb(79 70 229 / 12%);
}

.quick-create-grid button {
  border-color: #e6e8f0;
  background: #fff;
  box-shadow: 0 5px 18px rgb(15 23 42 / 4%);
}

.prompt-composer {
  width: 100%;
  border-color: #8685ff;
  border-radius: 20px;
  padding: 13px 14px 11px;
  background: #fff;
  box-shadow: 0 12px 34px rgb(79 70 229 / 10%);
  backdrop-filter: none;
}

.prompt-composer:focus-within {
  border-color: #5b5cf0;
  box-shadow: 0 14px 38px rgb(79 70 229 / 14%), 0 0 0 3px rgb(99 102 241 / 7%);
}

.prompt-composer textarea {
  min-height: 58px;
  height: 58px;
  padding: 10px 12px;
  background: transparent;
}

.image-mode-toggle {
  border-color: #dedcff;
  color: #4f46e5;
  background: #f7f6ff;
}

.send-button.has-content:not(:disabled),
.send-button.is-loading {
  background: linear-gradient(135deg, #665cf6, #3f67ee);
  box-shadow: 0 10px 24px rgb(79 70 229 / 28%);
}

.generation-card.failed,
.chat-error {
  border-color: #fecdca;
  color: #b42318;
  background: #fff8f7;
  box-shadow: 0 10px 26px rgb(217 45 32 / 7%);
}

/* Keep the creative conversation on the same readable left-hand rail as the
   reference workspace. This also gives image progress and failure states
   enough room for useful upstream error details instead of squeezing them. */
.image-workbench .message-row.user {
  flex-direction: row;
}

.image-workbench .message-row.user .message {
  margin-right: auto;
  margin-left: 0;
}

.image-workbench .message-row.user .message-author {
  justify-content: flex-start;
}

.image-workbench .message-row.assistant .message.image-message {
  width: min(680px, calc(100% - 48px));
  min-width: 0;
}

.image-workbench .message.image-message .generation-card {
  width: 100%;
  min-height: 132px;
  box-sizing: border-box;
}

@media (max-width: 1450px) {
  .conversation-body {
    display: grid;
  }
}

.generation-frame {
  position: relative;
  width: min(100%, var(--preview-width, 400px)) !important;
  max-height: none;
  aspect-ratio: var(--image-ratio, 1 / 1);
  overflow: hidden;
  align-content: center;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #f2f2ff, #eef5ff) !important;
}

.generation-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / 72%) 45%, transparent 65%);
  animation: generation-sheen 1.8s linear infinite;
}

.generation-frame > :not(.generation-sheen) { position: relative; z-index: 1; }
.uploaded-gallery { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.generated-image-gallery .message-image-button { overflow: visible; }
.generated-image-gallery .message-image-button img { width: auto; height: auto; max-width: min(720px, 74vw); max-height: 72vh; object-fit: contain; background: transparent; }
@keyframes generation-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.assets-workbench { height: 100%; overflow: auto; padding: 32px 24px 56px; background: #fff; }
.assets-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.assets-header h1 { margin: 0; color: #172033; font-size: 30px; }
.assets-header p { margin: 7px 0 0; color: #667085; }
.assets-search { display: flex; align-items: center; gap: 10px; min-width: 280px; border: 1px solid #e4e7ec; border-radius: 12px; padding: 0 14px; background: #fff; }
.assets-search span { color: #98a2b3; font-size: 12px; }
.assets-search input { width: 100%; height: 42px; border: 0; outline: 0; }
.assets-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 30px 0 0; border-bottom: 1px solid #f1f2f5; }
.assets-filter-group { display: flex; align-items: end; gap: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.assets-filter-group button { position: relative; border: 0; border-radius: 0; padding: 0 0 14px; color: #667085; background: transparent; font-size: 15px; }
.assets-filter-group button.selected { color: #172033; background: transparent; font-weight: 700; }
.assets-filter-group button.selected::after { content: ""; position: absolute; right: 5px; bottom: -1px; left: 5px; height: 3px; border-radius: 3px 3px 0 0; background: #4f6cf7; }
.assets-time-controls { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.assets-toolbar select { height: 34px; border: 1px solid #dfe3eb; border-radius: 8px; padding: 0 30px 0 14px; color: #475467; background: #fff; }
.assets-date-range { display: flex; align-items: center; min-height: 34px; border: 1px solid #dfe3eb; border-radius: 8px; padding: 0 10px; color: #98a2b3; background: #fff; }
.assets-date-range input { width: 132px; height: 32px; border: 0; outline: 0; color: #667085; background: transparent; font: inherit; }
.assets-date-range span { padding: 0 7px; color: #667085; }
.assets-favorite-filter { border: 1px solid #e5e7ef; border-radius: 12px; padding: 0 14px; color: #667085; background: #fff; }
.assets-favorite-filter.selected { border-color: #f5b942; color: #a15c00; background: #fffaeb; }
.assets-grid { display: block; }
.asset-day-group { margin-top: 28px; content-visibility: auto; contain-intrinsic-size: 380px; }
.asset-day-header { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; color: #172033; }
.asset-day-header strong { font-size: 16px; font-weight: 750; }
.asset-day-header span { position: relative; padding-left: 20px; color: #172033; font-size: 14px; }
.asset-day-header span::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 14px; background: #d0d5dd; transform: translateY(-50%); }
.asset-day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 278px)); align-items: start; gap: 18px; }
.asset-card { align-self: start; overflow: hidden; border: 0; border-radius: 6px; padding: 0; background: transparent; box-shadow: none; text-align: left; transition: .18s ease; }
.asset-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(31 42 68 / 12%); }
.asset-card-open { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.asset-media { position: relative; display: grid; width: 100%; min-height: 180px; place-items: center; overflow: hidden; border-radius: 6px; background: #f2f3f5; cursor: pointer; }
.asset-media img,.asset-media video { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.asset-media-error { display: grid; width: 100%; height: 100%; place-items: center; padding: 20px; color: #667085; background: linear-gradient(145deg,#f2f4f7,#eaecf0); font-size: 13px; text-align: center; }
.asset-media-error::before { content: "!"; display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 8px; border-radius: 50%; color: #667085; background: #fff; font-weight: 800; }
.asset-play { position: absolute; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; background: rgb(23 32 51 / 72%); }
.asset-card-meta { display: none; }
.asset-card-title { min-width: 0; overflow: hidden; border: 0; padding: 0; color: #172033; background: transparent; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-meta small { grid-column: 1 / -1; overflow: hidden; color: #98a2b3; text-overflow: ellipsis; white-space: nowrap; }
.asset-favorite { width: 30px; height: 30px; border: 0; border-radius: 50%; color: #d0d5dd; background: #f8f9fc; font-size: 17px; }
.asset-favorite.selected { color: #f5b942; background: #fffaeb; }
.asset-prompt-label { margin-bottom: 5px; color: #667085; font-size: 11px; font-weight: 800; }
.asset-card-skeleton { pointer-events: none; }
.asset-card-skeleton .asset-media { background: linear-gradient(90deg,#eef1f6 25%,#f8f9fb 40%,#eef1f6 65%); background-size: 300% 100%; animation: asset-skeleton 1.25s ease-in-out infinite; }
@keyframes asset-skeleton { from { background-position: 100% 0; } to { background-position: 0 0; } }
.assets-empty { grid-column: 1 / -1; padding: 80px 20px; color: #98a2b3; text-align: center; }
.assets-empty.error { color: #b42318; }
.assets-empty.error button,
.inspiration-empty.error button { min-height: 34px; margin-top: 12px; border: 1px solid #cfd7e6; border-radius: 9px; padding: 0 14px; color: #344054; background: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.assets-empty.error button:hover,
.inspiration-empty.error button:hover { border-color: #8b7cff; color: #5144d7; background: #f7f5ff; }
.asset-page-more { display: block; min-width: 132px; margin: 30px auto 0; border: 0; padding: 10px 18px; color: #98a2b3; background: transparent; font-weight: 500; }
.asset-page-more[hidden] { display: none; }
.assets-list-status { min-height: 20px; margin: 10px 0 0; color: #98a2b3; font-size: 12px; text-align: center; }
.asset-dialog { inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; overflow: hidden; border: 0; border-radius: 0; padding: 0; background: #fff; box-shadow: none; }
.asset-dialog::backdrop { background: #fff; }
.asset-dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #344054; background: rgb(255 255 255 / 90%); font-size: 24px; }
.asset-dialog.has-detail-page > .asset-dialog-close { display: none; }
#asset-dialog-content { height: 100%; min-height: 0; overflow: hidden; }
.asset-detail-page { display: grid; height: 100vh; min-height: 0; grid-template-rows: 64px minmax(0, 1fr); background: #fff; }
.asset-detail-topbar { display: grid; z-index: 2; grid-template-columns: 132px minmax(0, 1fr) 44px; align-items: center; gap: 18px; border-bottom: 1px solid #e9edf3; padding: 0 24px; background: #fff; }
.asset-detail-topbar button { height: 38px; border: 1px solid #e1e5ec; border-radius: 10px; color: #344054; background: #fff; font-weight: 700; }
.asset-detail-topbar .asset-detail-back { padding: 0 15px; }
.asset-detail-topbar .asset-detail-page-close { width: 38px; border: 0; border-radius: 50%; background: #f2f4f7; font-size: 24px; }
.asset-detail-topbar nav { display: flex; min-width: 0; align-items: center; gap: 9px; color: #98a2b3; font-size: 13px; }
.asset-detail-topbar nav i { color: #c5cad3; font-style: normal; }
.asset-detail-topbar nav strong { overflow: hidden; color: #344054; text-overflow: ellipsis; white-space: nowrap; }
.asset-detail-layout { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 420px; overflow: hidden; }
.asset-detail-stage { display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; padding: 26px; background: #f7f8fb; }
.asset-detail-stage.is-image { display: flex; width: 100%; height: 100%; box-sizing: border-box; justify-content: center; align-items: center; }
.asset-detail-media { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.asset-detail-zoom { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; box-sizing: border-box; justify-content: center; align-items: center; border: 0; padding: 0; overflow: hidden; background: transparent; cursor: zoom-in; }
.asset-detail-zoom .asset-detail-media { flex: 0 1 auto; width: auto; height: auto; max-width: min(100%, calc(100vw - 500px)); max-height: min(100%, calc(100vh - 150px)); margin: 0; object-fit: contain; object-position: center; border-radius: 12px; background: transparent; box-shadow: 0 14px 42px rgb(15 23 42 / 11%); cursor: zoom-in; opacity: 1; transform: scale(1); transition: opacity .26s ease, transform .26s ease; }
.asset-detail-zoom .asset-detail-media.is-loading { opacity: 0; transform: scale(.985); }
.asset-detail-zoom .asset-detail-media.is-ready { opacity: 1; transform: scale(1); }
.asset-detail-stage > video.asset-detail-media { width: 100%; height: 100%; background: #111827; }
.asset-detail-copy { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; border-left: 1px solid #e5e9f0; padding: 28px 26px 24px; background: #fff; }
.asset-detail-heading > span { color: #4f46e5; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.asset-detail-copy h2 { max-height: 58px; margin: 8px 0 22px; overflow: hidden; color: #172033; font-size: 19px; line-height: 1.5; }
.asset-detail-parameters { min-height: 0; overflow-y: auto; padding-right: 4px; }
.asset-detail-parameters h3 { margin: 0 0 16px; color: #172033; font-size: 15px; }
.asset-detail-copy dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #f0f1f5; }
.asset-detail-copy dt { color: #98a2b3; }.asset-detail-copy dd { margin: 0; color: #344054; text-align: right; }
.asset-detail-prompt-box { margin: 14px 0 18px; border: 1px solid #e4e7ec; border-radius: 12px; padding: 12px; background: #f8f9fc; }
.asset-detail-prompt-box.negative { background: #fffaf5; }
.asset-detail-prompt-box .asset-detail-prompt { max-height: 260px; margin: 0; overflow-y: auto; scrollbar-width: thin; }
.asset-task-id { max-width: 180px; overflow-wrap: anywhere; }
.asset-copy-status { min-height: 18px; margin: 10px 0 0; color: #027a48; font-size: 12px; }
.asset-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8px; }
.asset-detail-actions a,.asset-detail-actions button { min-height: 40px; border: 1px solid #daddea; border-radius: 10px; padding: 9px 12px; color: #344054; background: #fff; font-weight: 700; text-decoration: none; }
.asset-detail-actions button.primary { border-color: transparent; color: #fff; background: linear-gradient(135deg, #665cf6, #3f67ee); box-shadow: 0 8px 20px rgb(79 70 229 / 20%); }
.asset-detail-actions button.accent { border-color: #c7d7fe; color: #3f5ddd; background: #f4f7ff; }
.asset-detail-actions button:disabled { cursor: not-allowed; opacity: .48; }
.asset-detail-actions .danger { color: #b42318; border-color: #fecdca; }
.asset-detail-prompt { margin: 12px 0 24px; color: #172033; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.asset-lightbox { inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border: 0; padding: 0; overflow: hidden; background: rgb(2 6 18 / 94%); }
.asset-lightbox::backdrop { background: rgb(2 6 18 / 94%); backdrop-filter: blur(5px); }
.asset-lightbox-canvas { display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; overflow: hidden; }
.asset-lightbox img { display: block; width: auto; height: auto; max-width: 92vw; max-height: 84vh; margin: 0; touch-action: none; object-fit: contain; object-position: center; border-radius: 8px; background: transparent; box-shadow: 0 30px 100px rgb(0 0 0 / 55%); cursor: zoom-in; transform-origin: center center; transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s ease; user-select: none; -webkit-user-drag: none; }
.asset-lightbox img.is-loading { opacity: 0; }
.asset-lightbox img.is-ready { opacity: 1; }
.asset-lightbox img.is-dragging { transition: none; }
.asset-lightbox img.is-zoomed { cursor: grab; }
.asset-lightbox img.is-zoomed:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .asset-detail-zoom .asset-detail-media,
  .asset-lightbox img { transition: none; }
}
.asset-lightbox-close { position: fixed; z-index: 2; top: 18px; right: 22px; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; color: #fff; background: rgb(15 23 42 / 70%); font-size: 28px; line-height: 1; cursor: pointer; }
.asset-lightbox-nav { position: fixed; z-index: 2; top: 50%; width: 48px; height: 64px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 14px; color: #fff; background: rgb(15 23 42 / 62%); font-size: 40px; transform: translateY(-50%); }
.asset-lightbox-nav.prev { left: 20px; }.asset-lightbox-nav.next { right: 20px; }
.asset-lightbox-toolbar { position: fixed; z-index: 3; bottom: 22px; left: 50%; display: flex; height: 44px; align-items: center; gap: 6px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 12px; padding: 5px 7px; color: #fff; background: rgb(15 23 42 / 78%); box-shadow: 0 12px 34px rgb(0 0 0 / 28%); transform: translateX(-50%); backdrop-filter: blur(12px); }
.asset-lightbox-toolbar button { min-width: 34px; height: 32px; border: 0; border-radius: 8px; padding: 0 10px; color: #fff; background: rgb(255 255 255 / 9%); }
.asset-lightbox-toolbar output { min-width: 58px; text-align: center; font-size: 13px; font-weight: 800; }

/* Inspiration gallery: intrinsic image heights, progressive loading and no forced square crop. */
.inspiration-workbench { height: 100%; overflow-y: auto; padding: 26px 28px 56px; color: #172033; background: #fff; }
.inspiration-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.inspiration-header > div:first-child > span { color: #5b5cf0; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.inspiration-header h1 { margin: 3px 0 0; font-size: 30px; }
.inspiration-header p { margin: 6px 0 0; color: #98a2b3; font-size: 13px; }
.inspiration-search-tools { display: flex; align-items: center; gap: 10px; }
.inspiration-search-tools label { display: flex; width: min(360px, 34vw); align-items: center; border: 1px solid #e4e7ec; border-radius: 9px; padding: 0 12px; background: #fff; }
.inspiration-search-tools input { width: 100%; height: 38px; border: 0; outline: 0; color: #344054; }
.inspiration-search-tools label span { color: #98a2b3; font-size: 20px; }
.inspiration-search-tools select { height: 40px; border: 1px solid #e4e7ec; border-radius: 9px; padding: 0 34px 0 12px; color: #475467; background: #fff; }
.inspiration-types { display: flex; gap: 9px; margin: 22px 0 18px; }
.inspiration-types button { min-width: 60px; height: 32px; border: 1px solid #edf0f5; border-radius: 8px; padding: 0 16px; color: #667085; background: #fff; font-size: 12px; }
.inspiration-types button.selected { border-color: #6c63ff; color: #5548ea; background: #f6f5ff; box-shadow: 0 3px 10px rgb(91 92 240 / 10%); }
.inspiration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 8px; align-items: start; column-gap: 14px; row-gap: 14px; }
.inspiration-card { display: block; width: 100%; overflow: hidden; border: 1px solid #eef0f4; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgb(15 23 42 / 5%); transition: transform .25s ease, box-shadow .25s ease; }
.inspiration-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgb(0 0 0 / 10%); }
.inspiration-card > button { display: block; width: 100%; border: 0; padding: 0; background: #f5f6f8; cursor: zoom-in; }
.inspiration-card > button.is-video { position: relative; cursor: pointer; }
.inspiration-card img { display: block; width: 100%; height: auto; min-height: 120px; object-fit: contain; background: #f5f6f8; }
.inspiration-video-badge { position: absolute; top: 50%; left: 50%; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; color: #fff; background: rgb(15 23 42 / 65%); box-shadow: 0 8px 24px rgb(15 23 42 / 22%); transform: translate(-50%, -50%); }
.inspiration-media-placeholder { display: grid; min-height: 180px; place-items: center; color: #98a2b3; background: linear-gradient(135deg, #f5f6f8, #eaecf0); }
.inspiration-card > div { display: grid; gap: 4px; padding: 11px 12px 13px; }
.inspiration-card strong { overflow: hidden; color: #172033; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.inspiration-card span { color: #98a2b3; font-size: 11px; }
.inspiration-card.skeleton { height: 260px; border: 0; background: linear-gradient(90deg,#eef1f6 25%,#f8f9fb 40%,#eef1f6 65%); background-size: 300% 100%; animation: asset-skeleton 1.25s ease-in-out infinite; }
.inspiration-empty { padding: 80px 20px; color: #98a2b3; text-align: center; }
.inspiration-more { display: block; margin: 26px auto 0; border: 0; padding: 10px 18px; color: #98a2b3; background: transparent; }
.inspiration-more[hidden] { display: none; }
.inspiration-status { min-height: 20px; color: #98a2b3; font-size: 12px; text-align: center; }

/* Shared asset / inspiration viewer, modeled on the supplied two-panel reference. */
.media-viewer { width: 100vw; max-width: none; height: 100vh; max-height: none; overflow: hidden; border: 0; padding: 0; background: #fff; }
.media-viewer::backdrop { background: rgb(255 255 255 / 92%); }
.media-viewer-shell { display: grid; height: 100vh; max-height: 100vh; overflow: hidden; grid-template-columns: minmax(0, 1fr) 410px; }
.media-viewer-stage { position: relative; display: grid; min-width: 0; place-items: center; overflow: hidden; background: #fff; }
.media-viewer-viewport { display: grid; width: min(920px, calc(100% - 170px)); height: min(760px, calc(100vh - 96px)); place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.media-viewer-viewport.is-zoomed { cursor: grab; }
.media-viewer-viewport.is-zoomed:active { cursor: grabbing; }
.media-viewer-viewport img,
.media-viewer-viewport video { display: block; max-width: 100%; max-height: 100%; margin: auto; border-radius: 15px; object-fit: contain; box-shadow: 0 8px 30px rgb(15 23 42 / 8%); }
.media-viewer-viewport img { transform-origin: center; transition: opacity .18s ease; user-select: none; }
.media-viewer-viewport [hidden] { display: none; }
.media-viewer-viewport.is-video { cursor: default; }
.media-viewer-viewport img.is-loading { opacity: .35; }
.media-viewer-close { position: absolute; z-index: 3; top: 28px; right: 28px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: #172033; background: transparent; font-size: 25px; }
.media-viewer-nav { position: absolute; z-index: 2; top: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgb(23 32 51 / 62%); font-size: 27px; line-height: 1; transform: translateY(-50%); }
.media-viewer-nav.prev { left: 62px; }.media-viewer-nav.next { right: 62px; }
.media-viewer-nav:disabled { opacity: .25; }
.media-viewer-count { position: absolute; bottom: 32px; left: 50%; border-radius: 999px; padding: 7px 13px; color: #fff; background: rgb(15 23 42 / 72%); font-size: 12px; transform: translateX(-50%); }
.media-viewer-zoom-help { position: absolute; bottom: 34px; right: 34px; color: #98a2b3; font-size: 11px; }
.media-viewer-sidebar { display: grid; min-width: 0; max-height: 100vh; overflow: hidden; grid-template-rows: 68px minmax(0, 1fr); border-left: 1px solid #eef0f4; background: #fff; }
.media-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #eef0f4; padding: 0 30px; }
.media-viewer-toolbar button { border: 0; border-radius: 9px; padding: 9px 14px; color: #344054; background: #f2f4f7; }
.media-viewer-toolbar button.danger { color: #b42318; background: transparent; }
.media-viewer-info { display: grid; min-height: 0; overflow: hidden; grid-template-rows: auto auto minmax(180px, 1fr) auto; padding: 32px 30px; }
.media-viewer-source { color: #675ef2; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.media-viewer-title { max-height: 58px; margin: 9px 0 22px; overflow: hidden; color: #172033; font-size: 19px; line-height: 1.5; }
.media-viewer-info section { min-height: 0; overflow: hidden; border-top: 1px solid #eef0f4; padding-top: 24px; }
.media-viewer-info h3 { margin: 0 0 25px; font-size: 15px; }
.media-viewer-info small { color: #98a2b3; font-size: 12px; }
.media-viewer-prompt { max-height: calc(100% - 62px); margin: 10px 0 18px; overflow-y: auto; color: #172033; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.media-viewer-info dl { margin: auto 0 0; border: 1px solid #eef0f4; border-radius: 16px; padding: 12px 16px; }
.media-viewer-info dl div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; }
.media-viewer-info dt { color: #98a2b3; }.media-viewer-info dd { margin: 0; color: #475467; text-align: right; }

/* Generated results keep their intrinsic ratio and float without a card frame. */
.message.image-message.assistant .generated-image-gallery img,
.message.image-message.assistant .uploaded-gallery img {
  aspect-ratio: auto;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 8px 24px rgb(15 23 42 / 9%);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.message.image-message.assistant .generated-image-gallery .message-image-button {
  display: grid;
  width: min(400px, 100%);
  max-width: 100%;
  max-height: 400px;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  contain: none;
  border-radius: 14px;
  background: transparent;
}

.message.image-message.assistant .generated-image-gallery .message-image-button img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Completed media keeps its intrinsic ratio; text, image and controls occupy
   separate rows so chat output can never cover the generated result. */
.image-workbench .message-row.assistant .message.image-message {
  width: min(440px, calc(100% - 48px));
  max-width: min(440px, calc(100% - 48px));
  border: 0;
  background: transparent;
  box-shadow: none;
}

.message.image-message.assistant .generated-image-gallery {
  display: grid;
  grid-template-columns: minmax(0, 400px);
  gap: 14px;
  max-width: 100%;
  align-items: flex-start;
  overflow: visible;
}

.image-workbench .message-list > .message-row {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  isolation: isolate;
}

.image-workbench .message-list > .message-row + .message-row {
  margin-top: 4px;
}

.message.image-message.assistant .message-actions {
  position: static;
  z-index: auto;
  width: 100%;
  margin-top: 12px;
  opacity: 1;
  transform: none;
}

.message.image-message.assistant.is-new-result .generated-image-gallery .message-image-button {
  animation: generated-image-reveal .34s ease-out both;
}

@keyframes generated-image-reveal {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .message.image-message.assistant.is-new-result .generated-image-gallery .message-image-button { animation: none; }
}

.message.image-message.assistant:hover .generated-image-gallery img,
.message.image-message.assistant .message-image-button:hover img {
  filter: none;
  transform: none;
  box-shadow: 0 15px 35px rgb(0 0 0 / 12%);
}

.app-confirm-overlay { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(15 23 42 / 52%); backdrop-filter: blur(4px); }
.app-confirm-overlay[hidden] { display: none; }
.app-confirm-dialog { position: relative; width: min(420px, calc(100vw - 32px)); border: 1px solid rgb(255 255 255 / 55%); border-radius: 20px; padding: 30px; background: #fff; box-shadow: 0 28px 90px rgb(15 23 42 / 28%); text-align: center; }
.app-confirm-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #667085; background: #f2f4f7; font-size: 22px; }
.app-confirm-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 16px; border-radius: 50%; color: #b42318; background: #fee4e2; font-size: 22px; font-weight: 800; }
.app-confirm-dialog h2 { margin: 0; color: #172033; font-size: 20px; }
.app-confirm-dialog > p { margin: 12px 0 0; color: #475467; line-height: 1.7; overflow-wrap: anywhere; }
.app-confirm-error { padding: 9px 12px; border-radius: 9px; color: #b42318 !important; background: #fef3f2; font-size: 13px; }
.app-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.app-confirm-actions button { min-height: 42px; border: 1px solid #d0d5dd; border-radius: 11px; color: #344054; background: #fff; font-weight: 700; }
.app-confirm-actions .danger { border-color: #d92d20; color: #fff; background: #d92d20; }
.app-confirm-actions button:disabled,.app-confirm-close:disabled { cursor: wait; opacity: .65; }
body.has-modal { overflow: hidden; }

@media (max-width: 760px) {
  .assets-workbench { padding: 20px; }
  .assets-header { align-items: stretch; flex-direction: column; }
  .assets-search { min-width: 0; }
  .assets-toolbar { align-items: stretch; flex-direction: column; border-bottom: 0; }
  .assets-filter-group { max-width: 100%; overflow-x: auto; border-bottom: 1px solid #f1f2f5; }
  .assets-filter-group button { flex: 0 0 auto; }
  .assets-time-controls { align-items: stretch; flex-direction: column; }
  .assets-date-range { justify-content: space-between; }
  .assets-date-range input { min-width: 0; width: 44%; }
  .asset-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .asset-card-meta { padding: 9px 10px 11px; }
  .asset-dialog { width: 100vw; height: 100vh; max-height: none; }
  .asset-detail-page { grid-template-rows: 56px minmax(0, 1fr); }
  .asset-detail-topbar { grid-template-columns: 92px minmax(0, 1fr) 38px; gap: 8px; padding: 0 10px; }
  .asset-detail-topbar nav { gap: 5px; font-size: 11px; }
  .asset-detail-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 50vh) minmax(0, 1fr); }
  .asset-detail-stage { padding: 12px; }
  .asset-detail-media { max-height: 100%; }
  .asset-detail-zoom { min-height: 0; max-height: none; }
  .asset-detail-zoom .asset-detail-media { max-width: 100%; max-height: 100%; }
  .asset-detail-copy { padding: 16px 14px; border-top: 1px solid #eef0f4; border-left: 0; }
  .asset-detail-copy h2 { margin-bottom: 12px; }
  .asset-lightbox-nav { display: none; }
  .asset-lightbox-toolbar { bottom: 14px; }
  .media-viewer-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 62vh) minmax(0, 38vh); }
  .media-viewer-stage { min-height: 0; }
  .media-viewer-viewport { width: calc(100% - 72px); height: calc(100% - 58px); }
  .media-viewer-sidebar { max-height: 38vh; grid-template-rows: 52px minmax(0, 1fr); border-top: 1px solid #eef0f4; border-left: 0; }
  .media-viewer-toolbar { padding: 0 18px; }
  .media-viewer-info { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: 6px 16px; padding: 14px 18px; }
  .media-viewer-source { grid-column: 1; }
  .media-viewer-title { grid-column: 1; margin: 2px 0 0; }
  .media-viewer-info section { grid-column: 1; grid-row: 2; padding-top: 10px; }
  .media-viewer-info h3 { display: none; }
  .media-viewer-prompt { max-height: calc(100% - 24px); margin: 5px 0 0; }
  .media-viewer-info dl { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 6px 10px; }
  .media-viewer-info dl div { padding: 5px 0; font-size: 11px; }
  .media-viewer-nav.prev { left: 12px; }
  .media-viewer-nav.next { right: 12px; }
  .media-viewer-close { top: 10px; right: 10px; }
  .media-viewer-count { bottom: 12px; }
  .media-viewer-zoom-help { display: none; }
}

@media (max-width: 1250px) {
  .main-nav {
    width: 82px;
  }

  .module-tab {
    width: 64px;
  }

  .image-workbench {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .image-topbar {
    padding-left: 22px;
  }

}

/* 激活模块继承按钮本身的高对比度颜色，避免旧规则把标题固定成白色。 */
.module-tab strong,
.module-tab.active strong {
  color: inherit;
  opacity: 1;
  text-shadow: none;
}

/* AI详情图制作：规划模式与自选模块面板 */
#view-detail .detail-planning-switch {
  display: grid;
  height: 36px;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 12px;
  border-radius: 8px;
  padding: 3px;
  background: #eef1f8;
}

#view-detail .detail-planning-switch button {
  border: 1px solid transparent;
  border-radius: 6px;
  color: #475467;
  background: transparent;
  font-size: 12px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#view-detail .detail-planning-switch button.selected {
  border-color: #c9c5ff;
  color: #5b4ce6;
  background: #fff;
  box-shadow: 0 2px 8px rgb(77 61 196 / 10%);
  font-weight: 700;
}

#view-detail .detail-count-field {
  margin-top: 12px;
}

#view-detail .detail-count-field.is-module-trigger {
  border-color: #c9c5ff;
  background: #fbfaff;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

#view-detail .detail-count-field.is-module-trigger:hover,
#view-detail .detail-count-field.is-module-trigger:focus-within {
  border-color: #7565f4;
  box-shadow: 0 0 0 3px rgb(103 84 237 / 10%);
  outline: 0;
}

#view-detail .detail-count-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

#view-detail .detail-count-input-wrap input {
  width: 58px;
  padding: 0 5px;
}

#view-detail .detail-count-input-wrap input.is-readonly {
  border-color: transparent;
  color: #5b4ce5;
  background: transparent;
  cursor: pointer;
}

#view-detail .detail-count-input-wrap em {
  color: #667085;
  font-size: 11px;
  font-style: normal;
}

#view-detail .detail-mode-help {
  margin-top: 9px;
  color: #8490a5;
  font-size: 11px;
  line-height: 1.65;
}

#view-detail .detail-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
}

#view-detail .detail-module-modal[hidden] {
  display: none;
}

#view-detail .detail-module-modal {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  padding: 18px;
  background: rgb(45 50 70 / 18%);
  backdrop-filter: blur(2px);
}

#view-detail .detail-module-dialog {
  position: relative;
  display: flex;
  width: min(1040px, 100%);
  height: min(760px, 100%);
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e0e2ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(31 35 54 / 22%);
}

#view-detail .detail-module-selector-head {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 60px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #ebeef5;
  padding: 0 22px;
  background: rgb(255 255 255 / 96%);
}

#view-detail .detail-module-selector-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

#view-detail .detail-module-title-mark {
  width: 4px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #3678ff, #7462f4);
}

#view-detail .detail-module-selector-head h2 {
  overflow: hidden;
  color: #202637;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

#view-detail .detail-module-selector-head strong {
  flex: 0 0 auto;
  color: #697386;
  font-size: 12px;
  font-weight: 700;
}

#view-detail .detail-module-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
}

#view-detail .detail-module-head-actions #detail-module-close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #e2e5ee;
  border-radius: 8px;
  color: #697386;
  background: #f8f9fc;
  font-size: 20px;
  line-height: 1;
}

#view-detail .detail-module-head-actions #detail-module-close:hover,
#view-detail .detail-module-head-actions #detail-module-close:focus-visible {
  border-color: #c8c2ff;
  color: #5748da;
  background: #f4f2ff;
  outline: 0;
}

#view-detail .detail-module-head-actions .detail-module-text-action {
  border: 0;
  background: transparent;
  color: #315eea;
  font-size: 13px;
  line-height: 30px;
  padding: 0 4px;
  cursor: pointer;
}

#view-detail .detail-module-head-actions .detail-module-text-action:hover,
#view-detail .detail-module-head-actions .detail-module-text-action:focus-visible {
  color: #173db7;
  text-decoration: underline;
  outline: 0;
}

#view-detail .detail-module-footer {
  display: flex;
  min-height: 64px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #ebeef5;
  padding: 10px 22px;
  background: #fff;
}

#view-detail .detail-module-footer strong {
  color: #525b70;
  font-size: 13px;
}

#view-detail #detail-module-confirm {
  min-width: 96px;
  border: 0;
  border-radius: 8px;
  padding: 10px 24px;
  color: #fff;
  background: linear-gradient(135deg, #4f6ff1, #6d55e8);
  font-weight: 700;
  cursor: pointer;
}

#view-detail .detail-module-notice {
  position: absolute;
  z-index: 4;
  right: 22px;
  top: 68px;
  max-width: 260px;
  border: 1px solid #d8d4ff;
  border-radius: 7px;
  padding: 8px 12px;
  color: #5545d6;
  background: #f7f5ff;
  box-shadow: 0 8px 22px rgb(76 61 174 / 12%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 160ms ease, transform 160ms ease;
  font-size: 11px;
}

#view-detail .detail-module-notice.visible {
  opacity: 1;
  transform: translateY(0);
}

#view-detail .detail-module-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 22px 24px;
  scrollbar-color: #c9cbd3 transparent;
  scrollbar-width: thin;
}

#view-detail .detail-module-scroll::-webkit-scrollbar {
  width: 7px;
}

#view-detail .detail-module-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #c9cbd3;
  background-clip: padding-box;
}

#view-detail .detail-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 12px;
  align-items: start;
}

#view-detail .detail-module-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 102px;
  flex-direction: column;
  border: 1px solid #dfe4ee;
  border-radius: 9px;
  padding: 15px 46px 14px 15px;
  color: #1f2937;
  background: #fff;
  cursor: pointer;
  outline: 0;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#view-detail .detail-module-card:hover {
  border-color: #bbb4ff;
  box-shadow: 0 7px 20px rgb(66 55 145 / 8%);
  transform: translateY(-1px);
}

#view-detail .detail-module-card:focus-visible {
  box-shadow: 0 0 0 3px rgb(100 86 239 / 16%);
}

#view-detail .detail-module-card.selected {
  border-color: #7464f3;
  background: linear-gradient(145deg, #fff 12%, #faf9ff 100%);
  box-shadow: 0 6px 18px rgb(91 76 212 / 9%);
}

#view-detail .detail-module-card h3 {
  overflow-wrap: anywhere;
  color: #242a3a;
  font-size: 13px;
  line-height: 1.4;
}

#view-detail .detail-module-card > p {
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #8791a4;
  font-size: 11px;
  line-height: 1.55;
}

#view-detail .detail-module-check {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 18px;
  height: 18px;
  border: 1px solid #d7deea;
  border-radius: 50%;
  background: #fff;
}

#view-detail .detail-module-card.selected .detail-module-check {
  border-color: #6754ed;
  background: linear-gradient(135deg, #6f5cf4, #5145df);
}

#view-detail .detail-module-card.selected .detail-module-check::after {
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

#view-detail .detail-module-quantity {
  display: grid;
  width: 112px;
  height: 28px;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #ddd9ff;
  border-radius: 7px;
  background: #fff;
}

#view-detail .detail-module-quantity button {
  height: 100%;
  border: 0;
  color: #5b4ce5;
  background: #f4f2ff;
  font-size: 16px;
  line-height: 1;
}

#view-detail .detail-module-quantity button:disabled {
  color: #b7b6c6;
  background: #f7f7fa;
  cursor: not-allowed;
}

#view-detail .detail-module-quantity strong {
  color: #31384a;
  text-align: center;
  font-size: 12px;
}

#view-detail .generate-blue:disabled {
  cursor: not-allowed;
}

@media (max-width: 1320px) {
  #view-detail .detail-module-grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }
}

@media (max-width: 980px) {
  #view-detail .detail-module-modal {
    position: fixed;
    inset: 54px 0 0 82px;
    border-radius: 0;
    padding: 12px;
  }

  #view-detail .detail-module-dialog {
    width: min(620px, 100%);
  }

  #view-detail .detail-module-grid {
    grid-template-columns: 1fr;
  }

  #view-detail .detail-module-selector-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-block: 12px;
  }

  #view-detail .detail-module-head-actions {
    width: 100%;
    justify-content: space-between;
  }
}