/* Application workspace: align the composer with the 1120px application shell. */
.novelist-welcome-layout > .app-composer {
  width: min(1120px, 100%) !important;
  padding: 12px clamp(38px, 4vw, 64px) 16px !important;
}

.novelist-welcome-layout > .app-composer > div {
  width: 100% !important;
  max-width: none !important;
}

/* The child .app-welcome owns vertical scrolling. A second outer scroller keeps
   its old position when an app is reopened and makes the hero look cropped. */
.novelist-welcome-layout > .div-not-login {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-gutter: auto;
}

/* Make the restored attachment action recognizable and keep its hit target usable. */
.app-composer .inpBox .btnBox > .btnItem1 {
  width: auto !important;
  min-width: 72px;
  padding: 0 12px;
  gap: 6px;
  color: #dce7df;
  border-color: #34413a !important;
  background: #151a18;
}

.app-composer .inpBox .btnBox > .btnItem1::after {
  content: "上传";
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.app-composer .inpBox .btnBox > .btnItem1:hover {
  color: #83f071;
  border-color: #65c957 !important;
  background: #19231b;
}

.app-composer .inpBox .btnBox > .btnItem1 img {
  width: 19px;
  height: 17px;
  filter: brightness(0) invert(1);
  opacity: .9;
}

@media (max-width: 900px) {
  .novelist-welcome-layout .app-shell {
    width: calc(100% - 32px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .novelist-welcome-layout > .app-composer {
    width: calc(100% - 32px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 640px) {
  .novelist-welcome-layout .app-shell,
  .novelist-welcome-layout > .app-composer {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Application submit action: match the rectangular image-generation CTA. */
.app-composer .inpBox .btnBox > .app-action-submit {
  width: 126px !important;
  min-width: 126px !important;
  height: 40px !important;
  padding: 0 18px !important;
  gap: 12px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #2d2d2f !important;
  color: #f3f5f4 !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  transition: background-color .18s ease, color .18s ease;
}

.app-composer .inpBox .btnBox > .app-action-submit:hover {
  background: #383a3b !important;
}

.app-composer .inpBox .btnBox > .app-action-submit > img {
  display: none !important;
}

.app-composer .inpBox .btnBox > .app-action-submit::before {
  content: attr(data-action-label);
  white-space: nowrap;
}

.app-composer .inpBox .btnBox > .app-action-submit::after {
  content: "→";
  color: #aeb7bc;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.app-composer .inpBox .btnBox > .app-action-submit[data-action-label="停止生成"]::after {
  content: "■";
  font-size: 12px;
}

/* Custom application form: remove the redundant title strip and keep the
   submit action in normal layout so the final choices are never covered. */
.custormParam > .custormHeader {
  display: none !important;
}

.custormParam > .custormMain {
  height: 100% !important;
  min-height: 0;
}

.custormParam .custormMain .leftSlider {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.custormParam .custormMain .leftSlider .inputShu {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0;
  padding-bottom: 24px !important;
  scroll-padding-bottom: 24px;
  box-sizing: border-box;
}

.custormParam .custormMain .leftSlider > .btnBox {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 48px;
  width: calc(100% - 36px) !important;
  max-width: 430px;
  margin: 12px auto 20px;
}

/* Custom form example recommendation: neutral white action requested by UI. */
.custormParam .custormMain .leftSlider .inputBg .exampleRecom {
  background: #ffffff !important;
  border: 1px solid #d8dce1 !important;
  color: #111111 !important;
  font-weight: 500;
}

.custormParam .custormMain .leftSlider .inputBg .exampleRecom:hover {
  background: #f5f6f7 !important;
  border-color: #bfc5cc !important;
  color: #000000 !important;
}

/* Bound the application workspace to the available page height. Without this,
   long welcome pages expand behind the clipped route container and cannot scroll. */
.gpt-page-content > .novelist-welcome-layout,
.novelist-welcome-layout {
  width: 100%;
  height: 100% !important;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.novelist-welcome-layout > .div-not-login {
  height: auto !important;
  min-height: 0 !important;
}

.novelist-welcome-layout > .div-not-login > .app-welcome {
  height: 100% !important;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Keep the white example button distinct from the white editor surface. */
.custormParam .custormMain .leftSlider .inputBg .exampleRecom {
  border: 1px solid #6f7882 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 1px rgba(17, 24, 39, .06);
}

.custormParam .custormMain .leftSlider .inputBg .exampleRecom:hover {
  border-color: #313940 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22), 0 0 0 1px rgba(17, 24, 39, .12);
}

/* Custom-form attachment action: white surface with a black link icon. */
.custormParam .custormMain .leftSlider .inputBg .btnBox2 > .btnItem1 {
  background: #ffffff !important;
  border: 1px solid #6f7882 !important;
  color: #111111 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

.custormParam .custormMain .leftSlider .inputBg .btnBox2 > .btnItem1:hover {
  background: #f5f6f7 !important;
  border-color: #313940 !important;
}

.custormParam .custormMain .leftSlider .inputBg .btnBox2 > .btnItem1 img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}

.custormParam .custormMain .leftSlider .inputBg .btnBox2 > .btnItem1 svg {
  color: #111111 !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Custom-form text fields: use the same dark rounded surface as the chat composer. */
.custormParam .custormMain .leftSlider .inputBg.n-input,
.custormParam .custormMain .leftSlider .inputBg .n-input-wrapper {
  background: #12171c !important;
  border-radius: 15px !important;
}

.custormParam .custormMain .leftSlider .inputBg.n-input {
  overflow: hidden;
  border: 1px solid #30383f !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.custormParam .custormMain .leftSlider .inputBg.n-input:hover {
  border-color: #49545d !important;
}

.custormParam .custormMain .leftSlider .inputBg.n-input:focus-within {
  border-color: #4f8d59 !important;
  box-shadow: 0 0 0 2px rgba(98, 201, 87, .12), 0 10px 24px rgba(0, 0, 0, .2) !important;
}

.custormParam .custormMain .leftSlider .inputBg .n-input__border,
.custormParam .custormMain .leftSlider .inputBg .n-input__state-border {
  display: none !important;
}

.custormParam .custormMain .leftSlider .inputBg .n-input-wrapper,
.custormParam .custormMain .leftSlider .inputBg .n-input__textarea {
  padding: 0 !important;
}

.custormParam .custormMain .leftSlider .inputBg textarea.n-input__textarea-el {
  padding: 14px 16px !important;
  color: #eef2f1 !important;
  line-height: 1.65;
  caret-color: #82e96e;
}

.custormParam .custormMain .leftSlider .inputBg textarea.n-input__textarea-el::placeholder {
  color: #7f8993 !important;
  opacity: 1;
}

/* Recommendation-enabled editor: one continuous dark composer surface. */
.custormParam .custormMain .leftSlider .inputShu div.inputBg {
  background: #12171c !important;
  border: 1px solid #30383f !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.custormParam .custormMain .leftSlider .inputShu div.inputBg:hover {
  border-color: #49545d !important;
}

.custormParam .custormMain .leftSlider .inputShu div.inputBg:focus-within {
  border-color: #4f8d59 !important;
  box-shadow: 0 0 0 2px rgba(98, 201, 87, .12), 0 10px 24px rgba(0, 0, 0, .2) !important;
}

.custormParam .custormMain .leftSlider .inputShu div.inputBg > .n-input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.custormParam .custormMain .leftSlider .inputShu div.inputBg .n-input__border,
.custormParam .custormMain .leftSlider .inputShu div.inputBg .n-input__state-border {
  display: none !important;
}

/* Video clone v172: photo-only workflow, matching the app flow. */
.clone-page .human-selector-card {
  display: none !important;
}

.clone-page .reference-check .section-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clone-page .reference-check .section-head h2 {
  margin: 0;
}

/* Video clone v173: make the person-photo review/upload area readable and balanced. */
.clone-page .reference-check {
  padding: 24px 26px !important;
}

.clone-page .reference-check .section-head {
  margin-bottom: 16px !important;
}

.clone-page .reference-check .video-preview {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  padding: 18px 20px !important;
  border: 1px solid #2b3a42;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(35, 58, 47, .22), rgba(8, 14, 18, .72));
}

.clone-page .reference-check .video-preview:has(> img) {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
}

.clone-page .reference-check .video-preview > img {
  width: 100% !important;
  max-width: none !important;
  max-height: 300px !important;
  border: 1px solid #34454d;
  border-radius: 12px;
  background: #080d10;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.clone-page .reference-check .video-preview > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.clone-page .reference-check .video-preview > div > p {
  flex: 1 0 100%;
  max-width: 900px;
  margin: 0 0 8px !important;
  color: #dbe6e8;
  font-size: 14px;
  line-height: 1.8;
}

.clone-page .reference-check .video-preview .n-button {
  min-width: 156px;
  height: 42px;
  padding: 0 18px;
  border-color: #4d7659 !important;
  border-radius: 10px !important;
  background: #172b1d !important;
  color: #8cf29e !important;
  font-weight: 700;
}

.clone-page .reference-check .video-preview .n-button:hover:not(:disabled) {
  border-color: #6cf183 !important;
  background: #1d3825 !important;
}

.clone-page .reference-check .video-preview .text-button {
  min-height: 42px;
}

.clone-page .reference-check .video-preview small {
  flex: 1 1 360px;
  min-width: 220px;
  color: #91a1a7;
  font-size: 12px;
  line-height: 1.65;
}

.clone-page .reference-check > label {
  margin-top: 16px !important;
  padding: 15px 17px;
  border: 1px solid #27363d;
  border-radius: 12px;
  background: #0c1418;
  color: #d5dfe2;
  font-size: 13px;
  line-height: 1.65;
}

.clone-page .reference-check > label:hover {
  border-color: #3f554d;
  background: #0e181c;
}

@media (max-width: 800px) {
  .clone-page .reference-check {
    padding: 18px !important;
  }

  .clone-page .reference-check .video-preview,
  .clone-page .reference-check .video-preview:has(> img) {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 16px !important;
  }

  .clone-page .reference-check .video-preview > img {
    width: min(100%, 240px) !important;
    justify-self: center;
  }

  .clone-page .reference-check .video-preview .n-button,
  .clone-page .reference-check .video-preview .text-button {
    width: 100%;
  }

  .clone-page .reference-check .video-preview small {
    min-width: 0;
    flex-basis: 100%;
  }
}

/* Assets v174: compact three-action row with a clear painting download action. */
.asset-library .asset-draw-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, .82fr) !important;
  align-items: center;
  gap: 6px !important;
}

.asset-library .asset-draw-actions > .n-button {
  width: 100%;
  min-width: 0 !important;
  height: 32px;
  padding: 0 4px !important;
  font-size: 12px !important;
}

.asset-library .asset-draw-actions > .n-button .n-button__content {
  min-width: 0;
  white-space: nowrap;
}

.asset-library .asset-draw-actions > .asset-download-button {
  border-color: #58ce70 !important;
  background: #17361f !important;
  color: #84f398 !important;
  font-weight: 700;
}

.asset-library .asset-draw-actions > .asset-download-button:hover:not(:disabled) {
  border-color: #7cf291 !important;
  background: #1c4427 !important;
  color: #a0f8ae !important;
}

/* Assets v176: download enhancement is isolated from the Vue route module. */
.asset-library .asset-draw-actions > .asset-download-native {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 4px;
  border: 1px solid #58ce70;
  border-radius: 8px;
  background: #17361f;
  color: #84f398;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  white-space: nowrap;
  cursor: pointer;
}

.asset-library .asset-draw-actions > .asset-download-native:hover:not(:disabled) {
  border-color: #7cf291;
  background: #1c4427;
  color: #a0f8ae;
}

.asset-library .asset-draw-actions > .asset-download-native:disabled {
  cursor: wait;
  opacity: .62;
}