/* ==========================================================================
   优讯云生图 · 生图页（默认首页）移动端定制层
   单屏应用式布局：紧凑导航 → 提示词 → 按钮化生成配置 → 结果区
   颜色 / 圆角 / 阴影全部取自 tokens.css；仅本页引入
   ========================================================================== */

body.t-site.gx {
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  background: var(--td-bg-color-page);
}

/* ---------- 顶部导航压缩 ---------- */
.gx .t-header.t-header--site {
  flex: none;
  height: 52px;
  padding: 0 10px;
}

.gx .t-header__inner {
  height: 100%;
  gap: 4px;
}

.gx .t-header__nav,
.gx .t-header__subtitle {
  display: none;
}

.gx .t-header__brand {
  gap: 5px;
  min-width: 0;
}

.gx .t-header__title {
  font-size: var(--td-font-size-l);
  font-weight: var(--td-font-weight-bold);
}

.gx .t-header__actions {
  margin-left: auto;
}

.gx .site-login-entry {
  height: 32px;
  padding: 0 12px;
  font-size: var(--td-font-size-body-small);
}

.gx .site-points {
  height: 30px;
}

.gx .t-header__user {
  height: 32px;
}

/* ---------- 主容器：一屏铺满 ---------- */
.gx-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gx-card {
  flex: none;
  background: var(--td-bg-color-container);
  border-radius: var(--td-radius-large);
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ---------- 提示词 ---------- */
.gx-prompt {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gx-prompt textarea {
  width: 100%;
  min-height: 54px;
  max-height: 32vh;
  padding: 2px 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow-y: auto;
  background: transparent;
  font: inherit;
  font-size: var(--td-font-size-l);
  line-height: 1.5;
  color: var(--td-text-color-primary);
  -webkit-tap-highlight-color: transparent;
}

.gx-prompt textarea::placeholder {
  color: var(--td-text-color-placeholder);
}

.gx-prompt__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 18px;
  font-size: var(--td-font-size-s);
  line-height: 18px;
  color: var(--td-text-color-placeholder);
}

.gx-prompt__foot.is-over {
  color: var(--td-error-color);
}

.gx-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.gx-prompt__foot.is-over .gx-count {
  font-weight: var(--td-font-weight-medium);
}

.gx-clear {
  display: none;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--td-font-size-s);
  color: var(--td-text-color-placeholder);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gx-clear .t-icon {
  width: 12px;
  height: 12px;
}

.gx-prompt.has-text .gx-clear {
  display: inline-flex;
}

/* 推荐提示词（服务端下发） */
.gx-sugg {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gx-sugg::-webkit-scrollbar {
  display: none;
}

.gx-sugg button {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-round);
  background: var(--td-bg-color-container);
  font: inherit;
  font-size: var(--td-font-size-s);
  color: var(--td-text-color-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gx-sugg button:active {
  border-color: var(--td-brand-color);
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
}

/* ---------- 参考图 / 反向提示词（默认收起） ---------- */
.gx-adv {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--td-font-size-s);
  color: var(--td-text-color-placeholder);
  cursor: pointer;
}

.gx-adv .t-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.gx-adv.is-open {
  color: var(--td-brand-color);
}

.gx-adv.is-open .t-icon {
  transform: rotate(180deg);
}

.gx-adv-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gx-adv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gx-upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border: 1px dashed var(--td-component-border);
  border-radius: var(--td-radius-medium);
  font-size: var(--td-font-size-m);
  color: var(--td-text-color-secondary);
  cursor: pointer;
}

.gx-adv-hint {
  font-size: var(--td-font-size-s);
  color: var(--td-text-color-placeholder);
}

/* 参考图缩略图网格：已上传图片 + 末尾加号 */
.gx-refs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.gx-ref {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--td-radius-medium);
  overflow: hidden;
  background: var(--td-bg-color-secondarycontainer);
  /* 长按拖拽排序需要独占触摸手势，故禁用默认触摸动作 */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.gx-ref img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.gx-ref__no {
  position: absolute;
  left: 4px;
  top: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-mask);
  color: var(--td-text-color-anti);
  font-size: var(--td-font-size-s);
  line-height: 16px;
  text-align: center;
}

.gx-ref__del {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--td-radius-circle);
  background: var(--td-bg-color-mask);
  color: var(--td-text-color-anti);
  font-size: var(--td-font-size-m);
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}

.gx-ref.is-dragging {
  opacity: 0.55;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--td-brand-color);
}

.gx-ref-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background: transparent;
  color: var(--td-text-color-placeholder);
  font: inherit;
  font-size: var(--td-font-size-s);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.gx-ref-add .t-icon {
  width: 20px;
  height: 20px;
}

.gx-ref-add:active {
  border-color: var(--td-brand-color);
  color: var(--td-brand-color);
}

/* 大图预览 */
.gx-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--console-z-drawer);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.86);
}

.gx-viewer img {
  max-width: 94vw;
  max-height: 86vh;
  border-radius: var(--td-radius-medium);
}

.gx-viewer button {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--td-radius-circle);
  background: rgba(255, 255, 255, 0.18);
  color: var(--td-text-color-anti);
  font-size: var(--td-font-size-xl);
  line-height: 34px;
  cursor: pointer;
}

.gx-adv-panel textarea {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: var(--td-font-size-m);
  line-height: 1.5;
  color: var(--td-text-color-primary);
}

/* ---------- 生成配置：选择按钮 ---------- */
.gx-config {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.gx-label {
  flex: none;
  width: 40px;
  font-size: var(--td-font-size-s);
  color: var(--td-text-color-secondary);
}

.gx-chips {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gx-chips::-webkit-scrollbar {
  display: none;
}

.gx-chip {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 46px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-medium);
  background: var(--td-bg-color-container);
  font: inherit;
  font-size: var(--td-font-size-m);
  line-height: 1.05;
  color: var(--td-text-color-primary);
  cursor: pointer;
  transition: border-color var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    background var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    color var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
  -webkit-tap-highlight-color: transparent;
}

.gx-chip small {
  font-size: var(--td-font-size-s);
  color: var(--td-text-color-placeholder);
}

.gx-chip.is-active {
  border-color: var(--td-brand-color);
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
  font-weight: var(--td-font-weight-medium);
}

.gx-chip.is-active small {
  color: var(--td-brand-color);
}

.gx-chip[data-badge]::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 0 10px 0 7px;
  background: var(--td-brand-color);
}

.gx-chip:active {
  transform: scale(0.96);
}

/* 自定义宽高 */
.gx-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 48px;
}

.gx-custom input {
  width: 66px;
  height: 32px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-medium);
  text-align: center;
  font: inherit;
  font-size: var(--td-font-size-m);
  font-variant-numeric: tabular-nums;
  color: var(--td-text-color-primary);
}

.gx-custom input:focus {
  border-color: var(--td-brand-color);
  outline: 0;
}

.gx-custom span {
  font-size: var(--td-font-size-m);
  color: var(--td-text-color-placeholder);
}

/* 数量步进器 */
.gx-stepper {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-medium);
  overflow: hidden;
  background: var(--td-bg-color-container);
}

.gx-stepper button {
  width: 36px;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: var(--td-font-size-l);
  line-height: 1;
  color: var(--td-text-color-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gx-stepper button:active {
  background: var(--td-bg-color-container-active);
}

.gx-stepper button:disabled {
  color: var(--td-text-color-disabled);
  cursor: not-allowed;
}

.gx-stepper b {
  min-width: 34px;
  text-align: center;
  font-size: var(--td-font-size-m);
  font-weight: var(--td-font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--td-text-color-primary);
}

/* 费用提示（14px，位于数量行右侧） */
.gx-cost {
  margin-left: auto;
  font-size: var(--td-font-size-m);
  color: var(--td-text-color-secondary);
  white-space: nowrap;
}

.gx-cost b {
  color: var(--td-error-color);
  font-weight: var(--td-font-weight-bold);
}

/* ---------- 操作区 ---------- */
.gx-actions {
  flex: none;
  display: flex;
  gap: 8px;
}

.gx-actions .t-button {
  flex: 1 1 auto;
  height: 46px;
  border-radius: var(--td-radius-large);
  font-size: var(--td-font-size-l);
}

.gx-actions .t-button--ghost {
  flex: none;
  padding: 0 16px;
  color: var(--td-text-color-secondary);
}

/* ---------- 结果区 ---------- */
.gx-result {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gx-status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--td-font-size-m);
  color: var(--td-text-color-secondary);
}

.gx-status .t-progress {
  flex: 1 1 auto;
  max-width: none;
}

.gx-status.is-error {
  color: var(--td-error-color);
}

.gx-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  -webkit-overflow-scrolling: touch;
}

.gx-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--td-radius-large);
  background: var(--td-bg-color-secondarycontainer);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--td-text-color-placeholder);
  overflow: hidden;
}

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

.gx-thumb__tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-mask);
  color: var(--td-text-color-anti);
  font-size: var(--td-font-size-s);
  line-height: 20px;
}

/* ---------- 键盘弹出（输入提示词时） ----------
   移动端软键盘会压缩可视区域，固定 100vh + overflow:hidden 会遮挡入口，
   因此聚焦时放开高度限制，交由文档滚动把输入区顶到键盘上方 */
body.t-site.gx.is-typing {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  overflow-x: hidden;
}

body.t-site.gx.is-typing .gx-main {
  flex: none;
  min-height: 0;
  overflow: visible;
}

/* ==========================================================================
   桌面 / 平板模板（≥ 900px）：左「参数列」右「结果舞台」两栏，一屏不滚动
   移动端模板保持原样（< 900px 命中下方的小屏规则）
   ========================================================================== */

/* 参数列：移动端是普通纵向堆叠，桌面端独立滚动 */
.gx-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

@media (min-width: 900px) {
  body.t-site.gx {
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    overflow: hidden;
  }

  /* 桌面端导航完整展开（移动端隐藏导航、只留汉堡菜单） */
  .gx .t-header.t-header--site {
    height: 60px;
    padding: 0 20px;
  }

  .gx .t-header__inner {
    gap: 12px;
  }

  .gx .t-header__nav {
    display: flex;
  }

  .gx .t-header__subtitle {
    display: inline;
  }

  .gx .t-header__title {
    font-size: 16px;
  }

  /* 主容器：两栏舞台，占满剩余高度 */
  .gx-main {
    max-width: 1440px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
    gap: 16px 20px;
    overflow: hidden;
  }

  /* 左列：自身滚动，右侧结果区保持固定高度 */
  .gx-panel {
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-right: 2px;
  }

  /* 结果区：占满右列，网格内部滚动 */
  .gx-result {
    min-height: 0;
  }

  /* 提示词框：桌面给更高输入区，仍是紧凑型 */
  .gx-prompt textarea {
    min-height: 96px;
    max-height: 30vh;
    font-size: 14px;
  }

  /* 推荐提示词：桌面允许换行，不再横向滚动 */
  .gx-sugg {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* 参考图缩略图：桌面一行放更多张 */
  .gx-refs {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  /* 生成配置：桌面行高略增，便于鼠标点选 */
  .gx-config {
    gap: 10px;
  }

  .gx-row {
    min-height: 40px;
  }

  .gx-label {
    width: 52px;
  }

  .gx-chip {
    min-width: 56px;
    height: 38px;
  }

  .gx-chip:hover {
    border-color: var(--td-brand-color);
    color: var(--td-brand-color);
  }

  /* 操作按钮：桌面不需要全宽，避免"手机按钮"的观感 */
  .gx-actions .t-button {
    flex: 0 0 auto;
    min-width: 168px;
    height: 44px;
    padding: 0 28px;
    align-self: flex-start;
  }

  /* 结果区：桌面用更密的网格与更大的舞台 */
  .gx-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }

  .gx-status {
    font-size: 14px;
  }

  .gx-viewer img {
    max-width: 80vw;
    max-height: 84vh;
  }
}

/* 平板（640 ~ 899px）：保持单列，放宽容器与结果网格 */
@media (min-width: 640px) and (max-width: 899px) {
  .gx-main {
    max-width: 720px;
    gap: 10px;
  }

  .gx-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 小屏微调 ---------- */
@media (max-height: 640px) {
  .gx-prompt {
    min-height: 84px;
  }

  .gx-prompt textarea {
    min-height: 64px;
  }

  .gx-row {
    min-height: 36px;
  }
}