/* ws-ecom-modal.145835 — 电商工坊：套图配置弹窗化
   ─────────────────────────────────────────────────
   问题：12 张套图卡片（每张 253px）堆在主界面中段，
        把生图结果挤到页面最底部，配置区可视高度只剩 39px。
   方案：套图配置收进独立弹窗（空间独立、填完点完成、可反复打开），
        主界面只留「商品上下文（左，内部滚）＋ 套图配置入口（左下）／生图结果（右，跨两行）」。
   ============================================================ */

/* ── 主界面：两段式 ─────────────────────────────── */
.ecommerce-layout {
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "context results"
    "entry   results";
  gap: 14px;
}

.ecommerce-input-panel {
  grid-area: context;
  max-height: none;
  height: 100%;
  overflow: auto;
  align-content: start;
}

.ecommerce-entry-panel { grid-area: entry; }
.ecommerce-result-panel { grid-area: results; }

/* ── 套图配置入口卡 ─────────────────────────────── */
.ecommerce-entry-panel {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  border-color: rgba(180, 83, 42, 0.32);
  background: rgba(180, 83, 42, 0.07);
}

.ecommerce-entry-panel > .panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ecommerce-entry-panel .ecommerce-entry-summary {
  margin-left: auto;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(180, 83, 42, 0.18);
  border: 1px solid rgba(180, 83, 42, 0.38);
  color: #f3eee3;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.ecommerce-entry-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.ecommerce-entry-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted, #9a938a);
}

.ecommerce-open-spec-btn {
  height: 42px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── 弹窗：遮罩 + 卡片 ──────────────────────────── */
.spec-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.spec-modal[hidden] { display: none; }

.spec-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.66);
}

.spec-modal-card {
  position: relative;
  width: min(820px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--panel-strong, #201e1a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.spec-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.spec-modal-head h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text-bright, #f6f1e6);
}
.spec-modal-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted, #9a938a);
}

.spec-modal-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: var(--text, #ede7da);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}
.spec-modal-close:hover { background: rgba(255, 255, 255, 0.08); }

.spec-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 22px 18px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.spec-modal-template-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.spec-modal-template-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted, #9a938a);
}
.spec-modal-template-row select {
  height: 38px;
  min-width: 220px;
  border-radius: 12px;
  padding: 0 30px 0 12px;
  font-size: 12.5px;
}

.ecommerce-modal-spec-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-height: 0;
}

.spec-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  background: rgba(0, 0, 0, 0.18);
}
.spec-modal-count {
  font-size: 12.5px;
  color: var(--muted, #9a938a);
}
.spec-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.spec-modal-actions .ghost-btn,
.spec-modal-actions .primary-btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
}

body.spec-modal-open { overflow: hidden; }

/* 弹窗内卡片：展开态更舒展 */
.ecommerce-modal-spec-list .ecommerce-spec-item {
  background: rgba(180, 83, 42, 0.05);
}
.ecommerce-modal-spec-list .ecommerce-spec-item:not(.is-collapsed) {
  background: rgba(180, 83, 42, 0.10);
  border-color: rgba(180, 83, 42, 0.36);
}
.ecommerce-modal-spec-list .ecommerce-spec-item .spec-prompt-field textarea {
  min-height: 96px;
}

/* ── 响应式 ─────────────────────────────────────── */
@media (max-width: 1200px) {
  .ecommerce-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "context"
      "entry"
      "results";
    grid-template-rows: auto auto auto;
    height: auto;
    overflow: visible;
  }
  .ecommerce-input-panel {
    height: auto;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .spec-modal { padding: 12px; }
  .spec-modal-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px;
  }
  .spec-modal-head,
  .spec-modal-body,
  .spec-modal-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ecommerce-entry-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ecommerce-open-spec-btn { width: 100%; }
}