/* AI Fabric Studio — guided funnel (v2). Loads after styles.css; additive. */

.funnel-hide { display: none !important; }

/* Stack the workspace as a single centered column while in funnel mode */
.workspace.funnel { display: block; }
.workspace.funnel > .control-panel,
.workspace.funnel > .fabric-panel,
.workspace.funnel > .generate-panel,
.workspace.funnel > .results-panel {
  width: 100%;
  max-width: 680px;
  margin: 0 auto 1rem;
  float: none;
}

/* Funnel step header */
.funnel-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 680px;
  margin: 0 auto 0.6rem;
  padding: 0.5rem 0;
}
.funnel-head .ghost-action { font-size: 0.95rem; padding: 0.5rem 0.9rem; }
.funnel-step-label {
  font-family: var(--font-mono, "Share Tech Mono", monospace);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green, #4aff9a);
}
.funnel-cat-label { margin-left: auto; color: var(--muted, #8ab79e); font-size: 0.95rem; }

/* Landing category cards — bigger, more tappable */
#stepCategory .style-grid { gap: 0.8rem; }
#stepCategory .style-card { min-height: 74px; padding: 0.9rem; }
#stepCategory .style-card strong { font-size: 1.05rem; }

/* Big full-width Next buttons */
.fnext {
  width: 100%;
  margin-top: 1.1rem;
  padding: 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

/* Progress bar */
.progress-wrap { margin-top: 1.1rem; }
.progress-track {
  height: 14px;
  background: rgba(74, 255, 154, 0.12);
  border: 1px solid rgba(74, 255, 154, 0.25);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2fe082, #4aff9a);
  box-shadow: 0 0 14px rgba(74, 255, 154, 0.5);
  transition: width 0.35s ease;
}
.progress-pct {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--green, #4aff9a);
}

/* Full-screen result: make the preview modal truly full-screen */
.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 6, 4, 0.96);
  backdrop-filter: blur(6px);
}
.preview-modal .preview-frame { max-width: min(96vw, 620px); max-height: 92vh; }
.preview-modal .preview-close {
  position: fixed;
  top: 0.8rem;
  right: 0.9rem;
  z-index: 210;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
}

/* Customer photo: show the WHOLE photo (never crop) in a tall 4:5 portrait box */
#stepCustomer .upload-zone { aspect-ratio: 4 / 5; min-height: 0; }
#customerPreview { object-fit: contain; }

/* All funnel cameras: portrait 4:5 preview so full-body shots and vertical
   garments (saree, salwar) are framed properly (capture is centre-cropped to 4:5). */
.camera-panel video {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: calc(70vh * 4 / 5);
  height: auto;
  max-height: none;
  object-fit: cover;
  margin-inline: auto;
}

/* The `hidden` attribute must beat .field-line/.toggle-line display rules,
   so category-gated options (matching trouser, exact shade) actually hide. */
.field-line[hidden], .toggle-line[hidden] { display: none !important; }

/* ---- Guided choosers (customer / saree / blouse): pick one, the other fades ---- */
.chooser { display: flex; gap: 0.6rem; }
.chooser .chooser-btn { flex: 1; text-align: center; transition: opacity .2s ease, filter .2s ease; }
.chooser .chooser-btn.faded { opacity: 0.4; filter: grayscale(0.6); }
.chooser .chooser-btn.chosen { outline: 2px solid var(--green, #4aff9a); outline-offset: -2px; }
.chooser .chooser-btn:disabled { cursor: not-allowed; opacity: 0.35; filter: grayscale(0.8); }
.retake { margin-top: 0.6rem; }
.saree-hint { margin: 0.7rem 0 0.5rem; color: var(--muted, #8ab79e); font-weight: 700; }

/* Saree: hide the camera-framing guide when Catalog (gallery) is chosen */
#sareeBlousePanel.catalog-mode #sareeGuide,
#sareeBlousePanel.catalog-mode .saree-hint { display: none; }

/* Fabric section is reused for the simple "fabric", saree "saree", and "blouse" sub-steps.
   Reveal only the parts that belong to the active sub-step (set via #stepFabric[data-sub]). */
#stepFabric[data-sub="saree"] #salwarSuitPanel,
#stepFabric[data-sub="blouse"] #salwarSuitPanel,
#stepFabric[data-sub="saree"] #blouseCaptureTools,
#stepFabric[data-sub="fabric"] #blouseCaptureTools,
#stepFabric[data-sub="fabric"] #sareeBlousePanel,
#stepFabric[data-sub="blouse"] #sareeBlousePanel,
#stepFabric[data-sub="blouse"] #mainFabricBox { display: none !important; }

/* In the saree image step the fabric box's own title/add-row/hint are replaced by the choosers */
#stepFabric[data-sub="saree"] #mainFabricBox .panel-title-row,
#stepFabric[data-sub="saree"] #mainFabricBox .hint-line { display: none !important; }

/* The choosers ARE the entry points — hide the old empty placeholder boxes so each step is
   clean (two buttons + guidance). The preview/thumbnail appears only once a photo exists. */
#stepCustomer .upload-zone:not(.has-image),
#blouseCaptureTools .upload-zone:not(.has-image) { display: none !important; }
#stepFabric[data-sub="saree"] #fabricGrid .empty-state { display: none !important; }
#stepFabric[data-sub="saree"] #mainFabricBox { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }

/* Shirt + Matching Trouser sub-steps */
.panel-section[hidden] { display: none !important; }
#stepFabric[data-sub="trouser"] #mainFabricBox { display: none !important; }
#stepFabric[data-sub="shirt"] #mainFabricBox .panel-title-row,
#stepFabric[data-sub="shirt"] #mainFabricBox .hint-line,
#stepFabric[data-sub="shirt"] #fabricGrid .empty-state { display: none !important; }
#stepFabric[data-sub="shirt"] #mainFabricBox { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
#stepFabric[data-sub="gown"] #mainFabricBox .panel-title-row,
#stepFabric[data-sub="gown"] #mainFabricBox .hint-line,
#stepFabric[data-sub="gown"] #fabricGrid .empty-state { display: none !important; }
#stepFabric[data-sub="gown"] #mainFabricBox { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
.style-card .beta-tag { display: inline-block; font-size: 0.56em; font-weight: 700; letter-spacing: 0.08em; vertical-align: middle; margin-left: 0.35em; padding: 0.12em 0.45em; border-radius: 4px; background: rgba(74, 255, 154, 0.16); color: #4aff9a; }

/* Pathani Suit: three mutually exclusive fabric sources. The capture preview or
   selected solid-colour swatch remains available in the shared fabric box. */
#stepFabric[data-sub="pathani"] #mainFabricBox .panel-title-row,
#stepFabric[data-sub="pathani"] #mainFabricBox .hint-line,
#stepFabric[data-sub="pathani"] #fabricGrid .empty-state { display: none !important; }
#stepFabric[data-sub="pathani"] #mainFabricBox { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }

/* Trouser colour swatches */
.swatch-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0; }
.swatch { width: 42px; height: 42px; border-radius: 50%; background: var(--sw); border: 2px solid rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; }
.swatch.selected { border-color: var(--green, #4aff9a); box-shadow: 0 0 0 3px rgba(74, 255, 154, 0.35); }
.trouser-fabric-preview { max-width: 160px; height: auto; border-radius: 6px; display: block; margin: 0.5rem auto; }

/* Salwar Suit sub-steps */
#stepFabric[data-sub="reference"] #mainFabricBox { display: none !important; }
#stepFabric[data-sub="salwar"] #mainFabricBox .panel-title-row,
#stepFabric[data-sub="salwar"] #mainFabricBox .hint-line,
#stepFabric[data-sub="salwar"] #fabricGrid .empty-state { display: none !important; }
#stepFabric[data-sub="salwar"] #mainFabricBox { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
#salwarRefPanel .upload-zone:not(.has-image) { display: none !important; }

/* Keep these file inputs invisible but still label-activatable */
#blouseInput, #salwarExtraInput, #trouserFabricInput { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Mobile/tablet tuning */
@media (max-width: 820px) {
  .workspace.funnel > .control-panel,
  .workspace.funnel > .fabric-panel,
  .workspace.funnel > .generate-panel,
  .workspace.funnel > .results-panel,
  .funnel-head { max-width: 100%; }
  #stepCategory .style-grid { grid-template-columns: repeat(2, 1fr); }
  .fnext { position: sticky; bottom: 0.6rem; }
}