/* =========================================================
   GEXI — public/wf-runner.css   (build 20260507k)
   Workflow runner v2 — fully scoped under .wfr-* and .wfr-page.
   Mobile-first; desktop layered on top via @media (min-width: 720px).
   ========================================================= */

.wfr-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 12px calc(120px + env(safe-area-inset-bottom, 0));
  box-sizing: border-box;
}
.wfr-page * { box-sizing: border-box; }

@media (min-width: 720px) {
  .wfr-page { padding: 18px 24px 80px; }
}

/* ── Loading shell ── */
.wfr-loading-shell {
  text-align: center;
  padding: 40px 20px;
  color: var(--gx-text-2, #6b7280);
}
.wfr-loading-spinner {
  width: 28px; height: 28px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 3px solid rgba(22,163,74,0.2);
  border-top-color: #16a34a;
  animation: wfrSpin 0.7s linear infinite;
}
@keyframes wfrSpin { to { transform: rotate(360deg); } }

/* ── Header (workflow title + back) ── */
.wfr-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 0;
  font-size: 13.5px;
  color: var(--gx-text-2, #6b7280);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wfr-back:hover { color: var(--gx-text-1, #111827); }

.wfr-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 12px;
}
.wfr-header-emoji { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.wfr-header-text { flex: 1; min-width: 0; }
.wfr-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gx-text-1, #111827);
}
[data-theme="dark"] .wfr-header-title { color: #f3f4f6; }
.wfr-header-tagline {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--gx-text-2, #6b7280);
  line-height: 1.4;
}
.wfr-resume-banner {
  margin: 0 4px 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(34,197,94,0.04));
  border: 1px solid rgba(22,163,74,0.30);
  font-size: 13px;
  color: var(--gx-text-1, #111827);
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-theme="dark"] .wfr-resume-banner { color: #f3f4f6; border-color: rgba(34,197,94,0.45); }
.wfr-resume-banner button {
  appearance: none; border: 0; background: transparent;
  color: #16a34a; font-weight: 600; cursor: pointer;
  font: inherit; padding: 4px 8px; border-radius: 999px;
}
.wfr-resume-banner button:hover { text-decoration: underline; }

/* ── Style preset row (top) ── */
.wfr-presets {
  display: flex;
  gap: 6px;
  padding: 4px 4px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wfr-presets::-webkit-scrollbar { display: none; }
.wfr-preset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--gx-surface-2, rgba(0,0,0,0.04));
  border: 1px solid transparent;
  color: var(--gx-text-2, #6b7280);
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.wfr-preset:hover { color: var(--gx-text-1, #111827); }
.wfr-preset.is-active {
  background: linear-gradient(135deg, rgba(22,163,74,0.12), rgba(34,197,94,0.06));
  border-color: rgba(22,163,74,0.40);
  color: #16a34a;
}
[data-theme="dark"] .wfr-preset { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .wfr-preset.is-active { color: #4ade80; }

/* ── Progress bar + step counter ── */
.wfr-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 12px;
}
.wfr-progress {
  flex: 1;
  min-width: 0;
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
}
[data-theme="dark"] .wfr-progress { background: rgba(255,255,255,0.08); }
.wfr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #22c55e, #84cc16);
  border-radius: 999px;
  transition: width 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wfr-step-count {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--gx-text-2, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ── Step body ── */
.wfr-step {
  background: var(--gx-surface, #fff);
  border: 1px solid var(--gx-border, #e5e7eb);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 12px;
}
[data-theme="dark"] .wfr-step {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}
.wfr-step-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gx-text-1, #111827);
}
[data-theme="dark"] .wfr-step-title { color: #f3f4f6; }
.wfr-step-tag {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--gx-text-2, #6b7280);
  line-height: 1.45;
}
.wfr-input-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.wfr-input-label {
  font-size: 13px;
  color: var(--gx-text-2, #6b7280);
  font-weight: 600;
}
.wfr-input-example {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 12.5px;
  color: #16a34a;
  cursor: pointer;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.wfr-input-example:hover { text-decoration: underline; }
.wfr-input {
  width: 100%;
  min-height: 92px;
  padding: 12px 14px;
  font-size: 16px;     /* >=16px to prevent iOS zoom */
  line-height: 1.5;
  border-radius: 12px;
  border: 1px solid var(--gx-border, #e5e7eb);
  background: var(--gx-surface, #fff);
  color: var(--gx-text-1, #111827);
  resize: vertical;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
[data-theme="dark"] .wfr-input {
  background: rgba(255,255,255,0.03);
  color: #f3f4f6;
  border-color: rgba(255,255,255,0.10);
}
.wfr-input::placeholder { color: var(--gx-text-2, #9ca3af); opacity: 1; }
.wfr-input:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}

/* ── Variant grid ── */
.wfr-variants {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .wfr-variants {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.wfr-variant {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--gx-surface-2, rgba(0,0,0,0.03));
  border: 2px solid transparent;
  transition: border-color 160ms, transform 160ms;
  position: relative;
  min-width: 0;
}
[data-theme="dark"] .wfr-variant { background: rgba(255,255,255,0.04); }
.wfr-variant.is-selected {
  border-color: #16a34a;
  background: linear-gradient(135deg, rgba(22,163,74,0.06), rgba(34,197,94,0.02));
}
.wfr-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--gx-text-2, #6b7280);
}
.wfr-variant.is-selected .wfr-variant-head { color: #16a34a; }
.wfr-variant-tag-source {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  opacity: 0.75;
}
.wfr-variant-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gx-text-1, #111827);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 60px;
  outline: none;
}
[data-theme="dark"] .wfr-variant-text { color: #f3f4f6; }
.wfr-variant-text[contenteditable="true"] {
  background: rgba(22,163,74,0.06);
  border-radius: 8px;
  padding: 8px;
}
.wfr-variant-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0,0,0,0.03);
}
.wfr-variant-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wfr-variant-btn {
  appearance: none;
  border: 1px solid var(--gx-border, #e5e7eb);
  background: var(--gx-surface, #fff);
  color: var(--gx-text-1, #111827);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .wfr-variant-btn {
  background: rgba(255,255,255,0.04);
  color: #f3f4f6;
  border-color: rgba(255,255,255,0.12);
}
.wfr-variant-btn.is-primary {
  background: linear-gradient(135deg, #16a34a, #22c55e 60%, #65a30d);
  color: #fff;
  border-color: transparent;
}
.wfr-variant-btn:hover { filter: brightness(1.05); }
.wfr-variant-btn:active { transform: scale(0.97); }

/* Variant skeleton (loading state) */
.wfr-variant.is-loading { opacity: 0.85; pointer-events: none; }
.wfr-variant.is-loading .wfr-variant-text {
  background:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 50%, transparent 100%) 0 0/200% 100%,
    rgba(0,0,0,0.04);
  background-blend-mode: normal;
  border-radius: 6px;
  animation: wfrShimmer 1.4s linear infinite;
  color: transparent;
  min-height: 60px;
}
[data-theme="dark"] .wfr-variant.is-loading .wfr-variant-text {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%) 0 0/200% 100%,
    rgba(255,255,255,0.04);
}
@keyframes wfrShimmer { to { background-position: -200% 0; } }

/* ── Quick-adjust chips ── */
.wfr-adjust {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gx-border, #e5e7eb);
}
[data-theme="dark"] .wfr-adjust { border-top-color: rgba(255,255,255,0.08); }
.wfr-adjust-label {
  font-size: 11.5px;
  color: var(--gx-text-2, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 8px;
}
.wfr-adjust-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.wfr-adjust-chips::-webkit-scrollbar { display: none; }
.wfr-adjust-chip {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--gx-border, #e5e7eb);
  background: var(--gx-surface, #fff);
  color: var(--gx-text-1, #111827);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms;
}
[data-theme="dark"] .wfr-adjust-chip {
  background: rgba(255,255,255,0.04);
  color: #f3f4f6;
  border-color: rgba(255,255,255,0.10);
}
.wfr-adjust-chip:hover { border-color: #16a34a; color: #16a34a; }

/* ── Refine input row ── */
.wfr-refine {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.wfr-refine input {
  flex: 1; min-width: 0;
  font-size: 14px; padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--gx-border, #e5e7eb);
  background: var(--gx-surface, #fff);
  color: inherit;
  outline: none;
}
[data-theme="dark"] .wfr-refine input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
.wfr-refine input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }

/* ── History strip ── */
.wfr-history {
  display: flex;
  gap: 6px;
  padding: 4px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wfr-history::-webkit-scrollbar { display: none; }
.wfr-history-item {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--gx-border, #e5e7eb);
  background: var(--gx-surface, #fff);
  color: var(--gx-text-2, #6b7280);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .wfr-history-item {
  background: rgba(255,255,255,0.04);
  color: #9ca3af;
  border-color: rgba(255,255,255,0.10);
}
.wfr-history-item.is-active {
  background: linear-gradient(135deg, #16a34a, #22c55e 60%, #65a30d);
  color: #fff; border-color: transparent;
}

/* ── Error / info chips ── */
.wfr-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #dc2626;
  font-size: 13.5px;
  line-height: 1.4;
}
[data-theme="dark"] .wfr-error { color: #fca5a5; }

.wfr-anon-cta {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(34,197,94,0.04));
  border: 1px solid rgba(22,163,74,0.30);
  border-radius: 12px;
  font-size: 13px; line-height: 1.4;
  display: flex; align-items: center; gap: 10px;
}
.wfr-anon-cta a {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: linear-gradient(135deg, #16a34a, #22c55e 60%, #65a30d);
  color: #fff !important;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600; font-size: 13px;
}

/* ── Sticky bottom action bar (mobile) ── */
.wfr-action-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0)); /* sits above bottom nav */
  z-index: 80;
  padding: 10px 12px;
  background: var(--gx-surface, #ffffff);
  border-top: 1px solid var(--gx-border, #e5e7eb);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}
[data-theme="dark"] .wfr-action-bar {
  background: rgba(15,22,32,0.95);
  border-top-color: rgba(255,255,255,0.08);
}
.wfr-action-bar[hidden] { display: none; }
.wfr-action-bar .grow { flex: 1; }
.wfr-action-btn {
  appearance: none;
  border: 1px solid var(--gx-border, #e5e7eb);
  background: var(--gx-surface, #fff);
  color: var(--gx-text-1, #111827);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 120ms, transform 120ms;
}
[data-theme="dark"] .wfr-action-btn {
  background: rgba(255,255,255,0.04);
  color: #f3f4f6;
  border-color: rgba(255,255,255,0.12);
}
.wfr-action-btn.is-primary {
  background: linear-gradient(135deg, #16a34a, #22c55e 60%, #65a30d);
  color: #fff; border-color: transparent;
  min-width: 120px;
}
.wfr-action-btn:hover { filter: brightness(1.05); }
.wfr-action-btn:active { transform: scale(0.97); }
.wfr-action-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.wfr-action-btn.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
.wfr-action-btn.is-loading::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wfrSpin 0.7s linear infinite;
}

@media (min-width: 720px) {
  .wfr-action-bar {
    position: sticky;
    bottom: 0;
    border-radius: 16px;
    border: 1px solid var(--gx-border, #e5e7eb);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    margin-top: 16px;
  }
}

/* Hide bottom nav offset on desktop because sticky bar sits in flow */
@media (min-width: 720px) {
  .wfr-action-bar { bottom: 12px; }
}

/* ── Compose / final summary ── */
.wfr-compose {
  background: var(--gx-surface, #fff);
  border: 1px solid var(--gx-border, #e5e7eb);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 12px;
}
[data-theme="dark"] .wfr-compose {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}
.wfr-compose-row {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gx-border, #e5e7eb);
}
.wfr-compose-row:last-child { border-bottom: 0; }
[data-theme="dark"] .wfr-compose-row { border-bottom-color: rgba(255,255,255,0.06); }
.wfr-compose-label {
  flex: 0 0 110px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gx-text-2, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 4px;
}
.wfr-compose-value {
  flex: 1; min-width: 0;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.wfr-compose-edit {
  flex: 0 0 auto;
  appearance: none; border: 0;
  background: transparent;
  color: #16a34a; font-size: 12px;
  font-weight: 600; cursor: pointer;
}

/* Variant kind: image */
.wfr-image-out {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
}

/* tiny spinner */
.wfr-mini-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: wfrSpin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: -2px;
}