/* PromptMeGood — Chassis v3
   "Definitive Redesign" shell per spec PDF.
   Active when html.pmg-chassis-v3 is set (default ON; ?chassis=off raw legacy).
   Chassis v2 was removed in cv3-22 cleanup pass.
   Scoped under html.pmg-chassis-v3 so the legacy site is bit-identical when the flag is off.
*/

/* ============ HARD HIDE — DELETE TARGETS (Step 0) ============ */
html.pmg-chassis-v3 #pmg-help-me-start-btn,
html.pmg-chassis-v3 [data-pmg-help-me-start],
html.pmg-chassis-v3 #guided-mode-btn,
html.pmg-chassis-v3 #guided-mode-dialog,
html.pmg-chassis-v3 #pmg-shortcuts-panel,
html.pmg-chassis-v3 .pmg-shortcuts-trigger,
html.pmg-chassis-v3 #pmg-result-confirm,
html.pmg-chassis-v3 #demo-next-step,
html.pmg-chassis-v3 .pmg-callout-slim,
html.pmg-chassis-v3 .pmg-tier-banner,
html.pmg-chassis-v3 .free-tier-copy,
html.pmg-chassis-v3 [data-pmg-cap],
html.pmg-chassis-v3 .run-section-meta,
html.pmg-chassis-v3 #pmg-t42-beta-banner,
html.pmg-chassis-v3 .auto-optimize-row,
html.pmg-chassis-v3 .post-uc-guidance,
html.pmg-chassis-v3 .tip-block,
html.pmg-chassis-v3 .demo-helper,
html.pmg-chassis-v3 .upload-field,
html.pmg-chassis-v3 .pmg-stack-card-head,
html.pmg-chassis-v3 .pmg-stack-helper,
html.pmg-chassis-v3 #fill-demo,
html.pmg-chassis-v3 .demo-stack,
html.pmg-chassis-v3 .demo-microcopy,
html.pmg-chassis-v3 .demo-loading,
html.pmg-chassis-v3 #image-generate-btn,
html.pmg-chassis-v3 #image-gen-hint,
html.pmg-chassis-v3 #random-prompt,
html.pmg-chassis-v3 #generateBtnTop,
html.pmg-chassis-v3 .pmg-t100-top-cta-row,
html.pmg-chassis-v3 [id^="generateBtnTop"] {
  display: none !important;
}

/* cv3-20 audit fix: exempt body-appended overlays (Visual Studio modal,
   Storyboard modal) from the universal hide. Both modals carry
   data-pmg-overlay-root="1" AND class="pmg-modal-overlay" — narrow
   exemption is intentional. Do NOT add :not([role="dialog"]) here:
   legacy dialogs (#pmg-quick-win-overlay, #compare-overlay, #bk-overlay,
   #ob-overlay) also use role="dialog" and must stay hidden in v3.
   Any new overlay that needs to survive v3 hide must add
   data-pmg-overlay-root="1" explicitly. */
html.pmg-chassis-v3 body > *:not(#pmg-chassis-v3-root):not(script):not(style):not(noscript):not(#pmg-splash):not(template):not([data-pmg-overlay-root]):not(.pmg-modal-overlay):not(#pmg-expert-center-root) {
  display: none !important;
  visibility: hidden !important;
}
/* Belt-and-suspenders: any element flagged as v3-collapsed must stay hidden */
html.pmg-chassis-v3 [data-pmgv3-collapsed="1"] {
  display: none !important;
  visibility: hidden !important;
}
/* Splash fades on its own; force hide promptly */
html.pmg-chassis-v3 #pmg-splash { display: none !important; }

/* Photography panel: ensure the relocated Photography Suite shows ALL of its
   pill groups (Style, Camera, Lighting, Composition, Palette, Aspect) and
   their headers regardless of legacy collapse / image-mode CSS that gates
   visibility on the old layout. */
html.pmg-chassis-v3 #pmgv3-panel-photo #photo-suite-section,
html.pmg-chassis-v3 #pmgv3-panel-photo #pmg-photo-suite,
html.pmg-chassis-v3 #pmgv3-panel-photo .pmg-photo-group,
html.pmg-chassis-v3 #pmgv3-panel-photo .pmg-photo-group-head,
html.pmg-chassis-v3 #pmgv3-panel-photo .pmg-photo-group-body,
html.pmg-chassis-v3 #pmgv3-panel-photo .pmg-photo-pill {
  display: revert !important;
  visibility: visible !important;
}
html.pmg-chassis-v3 #pmgv3-panel-photo .pmg-photo-group.is-collapsed .pmg-photo-group-body {
  display: block !important;
}
html.pmg-chassis-v3 #pmgv3-panel-photo #photo-suite-section[hidden],
html.pmg-chassis-v3 #pmgv3-panel-photo #pmg-photo-suite[hidden] {
  display: block !important;
}
html.pmg-chassis-v3 body { overflow: hidden !important; }

/* Honor [hidden] attribute even on flex/grid sections */
html.pmg-chassis-v3 [hidden],
html.pmg-chassis-v3 .is-collapsed,
html.pmg-chassis-v3 .tuning-section.is-collapsed,
html.pmg-chassis-v3 .generate-section.is-collapsed,
html.pmg-chassis-v3 .output-box.is-collapsed,
html.pmg-chassis-v3 .ai-response-box.is-collapsed {
  display: none !important;
  visibility: hidden !important;
}

/* ============ SHELL (Step 1 — workstation chassis) ============ */
html.pmg-chassis-v3 body.app-page,
html.pmg-chassis-v3 body {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  margin: 0 !important;
  background: #0d2b1e !important;
  color: #fff !important;
  font-family: var(--font-stack, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif) !important;
}

#pmg-chassis-v3-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #0d2b1e;
  color: #fff;
  position: relative;
  z-index: 1;
}

/* ---- Topbar (Step 2) ---- */
.pmgv3-topbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #0a2218;
  border-bottom: 1px solid rgba(0, 200, 150, 0.15);
  z-index: 50;
}
.pmgv3-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  letter-spacing: -0.01em;
  /* cv3-48: brand is now a <button> acting as the global Home reset. */
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
}
.pmgv3-brand:hover { background: rgba(0, 200, 150, 0.08); }
.pmgv3-brand:active { background: rgba(0, 200, 150, 0.14); }
.pmgv3-brand:focus-visible { outline: 2px solid rgba(0, 200, 150, 0.55); outline-offset: 2px; }
.pmgv3-brand img { width: 28px; height: 28px; border-radius: 6px; }
.pmgv3-brand-beta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #00c896;
  border: 1px solid rgba(0, 200, 150, 0.4);
  border-radius: 4px;
  padding: 2px 5px;
  text-transform: uppercase;
}
.pmgv3-tb-r {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pmgv3-ico {
  /* 44x44 is the WCAG/Apple HIG minimum tap target. Forced with
     !important so no narrower override (legacy ?v= stylesheet, mobile
     compaction rule) can shrink the actual hit zone below it. */
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.pmgv3-ico:hover { background: rgba(0, 200, 150, 0.08); color: #00c896; }
/* Help icon is an <a> element so it opens /guide.html in a new tab; strip the
   default link styling so it sits visually flush with the other 44x44 icons. */
a.pmgv3-ico { text-decoration: none; }
a.pmgv3-ico:visited { color: rgba(255, 255, 255, 0.7); }
a.pmgv3-ico:hover { color: #00c896; }
/* Topbar tap targets are now hard-set to 44x44 with !important on the
   base .pmgv3-ico rule above (no longer media-query-gated). */
.pmgv3-upgrade {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #00c896;
  background: rgba(0, 200, 150, 0.12);
  color: #00c896;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.pmgv3-upgrade:hover { background: rgba(0, 200, 150, 0.22); }

/* ---- Module tabs (Step 3) ---- */
.pmgv3-tabs {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  background: #0a2218;
  border-bottom: 1px solid rgba(0, 200, 150, 0.1);
}
.pmgv3-tab {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.pmgv3-tab:hover { color: rgba(255, 255, 255, 0.85); }
.pmgv3-tab.is-active {
  background: rgba(0, 200, 150, 0.15);
  border-color: #00c896;
  color: #00c896;
  font-weight: 600;
}

/* ---- Body: container for the three module panels ---- */
.pmgv3-body {
  flex: 1;
  display: block;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

/* ---- Module panels (Text / Photography / Video) ---- */
.pmgv3-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
}
.pmgv3-body[data-active-panel="text"]         #pmgv3-panel-photo,
.pmgv3-body[data-active-panel="text"]         #pmgv3-panel-video,
.pmgv3-body[data-active-panel="photography"]  #pmgv3-panel-text,
.pmgv3-body[data-active-panel="photography"]  #pmgv3-panel-video,
.pmgv3-body[data-active-panel="video"]        #pmgv3-panel-text,
.pmgv3-body[data-active-panel="video"]        #pmgv3-panel-photo {
  display: none !important;
}

.pmgv3-left,
.pmgv3-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}
.pmgv3-left { padding-right: 8px; }

/* ---- Inline Visual Studio panels (vs-15) ---- */
.pmg-vs-inline-section { margin-bottom: 12px; }
#pmgv3-panel-photo textarea,
#pmgv3-panel-video textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  color: #e8f5f0;
  border: 1px solid rgba(0, 200, 150, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}
#pmgv3-panel-photo textarea:focus,
#pmgv3-panel-video textarea:focus {
  outline: none;
  border-color: #00c896;
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.18);
}
.pmg-vs-sora-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.pmg-vs-sora-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: rgba(232, 245, 240, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pmg-vs-sora-grid select {
  background: rgba(0, 0, 0, 0.3);
  color: #e8f5f0;
  border: 1px solid rgba(0, 200, 150, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
.pmg-vs-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pmg-vs-btn {
  background: rgba(0, 200, 150, 0.12);
  color: #3ee0a0;
  border: 1px solid rgba(0, 200, 150, 0.4);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}
.pmg-vs-btn:hover { background: rgba(0, 200, 150, 0.22); }
.pmg-vs-btn-primary {
  background: #00c896;
  color: #0a2218;
  border-color: #00c896;
}
.pmg-vs-btn-primary:hover { background: #00d8a3; }
.pmg-vs-full-width { width: 100%; }
.pmg-vs-reverse-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.25);
  color: #e8f5f0;
  border: 1px solid rgba(0, 200, 150, 0.25);
}
.pmg-vs-reverse-status--err { color: #ff8a8a; border-color: rgba(255, 138, 138, 0.4); }
.pmg-vs-reverse-status--ok  { color: #3ee0a0; }
.pmg-vs-media-container {
  flex: 1;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 200, 150, 0.2);
  border-radius: 12px;
  padding: 16px;
}
.pmg-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: rgba(232, 245, 240, 0.7);
}
.pmg-vs-sub { font-size: 12px; opacity: 0.65; }
#pmg-vs-generated-image,
#pmg-vs-generated-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
.pmg-vs-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(0, 200, 150, 0.2);
  border-top-color: #00c896;
  border-radius: 50%;
  animation: pmg-vs-spin 0.8s linear infinite;
}
@keyframes pmg-vs-spin { to { transform: rotate(360deg); } }

/* ---- Section labels ---- */
.pmgv3-section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 200, 150, 0.85);
  margin: 0 0 6px;
}
.pmgv3-section-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 10px;
}

/* ---- Idea section (Step 4A) ---- */
.idea-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 200, 150, 0.18);
  border-radius: 14px;
  padding: 16px;
}
/* Re-style the legacy goal field once moved into idea-section */
html.pmg-chassis-v3 .idea-section .field.field-primary { margin: 0; }
html.pmg-chassis-v3 .idea-section .field-label-row { display: none; }
html.pmg-chassis-v3 .idea-section .helper { display: none; }
html.pmg-chassis-v3 .idea-section #goal {
  width: 100%;
  min-height: 100px;
  max-height: 160px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 200, 150, 0.3);
  border-radius: 10px;
  padding: 12px;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  font-family: inherit;
  box-sizing: border-box;
}
html.pmg-chassis-v3 .idea-section #goal:focus {
  outline: none;
  border-color: #00c896;
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.15);
}
.btn-analyze {
  width: 100%;
  padding: 12px;
  background: #00c896;
  color: #0d2b1e;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  margin-top: 12px;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-analyze:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 200, 150, 0.25);
}
.btn-analyze:active { transform: translateY(0); }

/* ---- Tuning section (Step 4B) ---- */
.tuning-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 200, 150, 0.18);
  border-radius: 14px;
  padding: 16px;
  animation: pmgv3-slide-in 0.35s ease-out;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 200, 150, 0.4) transparent;
}
.tuning-section::-webkit-scrollbar { width: 6px; }
.tuning-section::-webkit-scrollbar-thumb { background: rgba(0, 200, 150, 0.4); border-radius: 3px; }
@keyframes pmgv3-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* cv3-30: tuning header is now a <button> so it can act as the mobile
   accordion toggle. Reset native button styling and keep the original
   stacked layout on desktop. */
button.tuning-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
}
.tuning-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.tuning-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.tuning-pick-count {
  font-size: 11px;
  font-weight: 600;
  color: #00c896;
  background: rgba(0, 200, 150, 0.12);
  border: 1px solid rgba(0, 200, 150, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.tuning-pick-count:empty { display: none; }
.tuning-chevron {
  margin-left: auto;
  color: rgba(0, 200, 150, 0.7);
  font-size: 14px;
  transition: transform 0.2s ease;
  display: inline-block; /* cv3-47: chevron always visible — tuning is now a tap-to-expand accordion on desktop too */
}
.tuning-section.is-mobile-open .tuning-chevron { transform: rotate(180deg); }
.tuning-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
/* cv3-47: tuning accordion is collapsed-by-default on ALL viewports.
   Previously the host was only hidden inside the ≤768px media query, so
   on desktop both the dense pill grid and the green Generate button were
   visible at once — competing for the user's attention. Now desktop
   behaves the same as mobile: header + badge + chevron until the user
   opts in by clicking the header. */
html.pmg-chassis-v3 .tuning-section:not(.is-mobile-open) .pmgv3-tuning-host,
html.pmg-chassis-v3 .tuning-section:not(.is-mobile-open) .tuning-hint {
  display: none !important;
}
button.tuning-header { cursor: pointer; }

/* cv3-57: collapsed tuning bar was clipping its own header text on
   desktop because the section had no min-height and the header sat
   inside 16px+16px padding with a 12px margin-bottom. Pin a min
   height that fits 16 + 24 + 16 = 56px and zero out the header's
   bottom margin while collapsed so the chevron line doesn't drift. */
html.pmg-chassis-v3 .tuning-section:not(.is-mobile-open) {
  height: auto;
  min-height: 56px;
}
html.pmg-chassis-v3 .tuning-section:not(.is-mobile-open) button.tuning-header {
  margin-bottom: 0;
}
/* cv3-47: small low-contrast "← Re-analyze" text link that replaces the
   green Analyze button after the user has analyzed. Intentionally NOT a
   button visually — it should never compete with Generate for attention. */
/* cv3-48: ✕ clear-textarea button — small, low-contrast, tucked into the
   top-right corner of the .pmgv3-idea-host (which is position:relative).
   Only rendered when #goal has content (toggled by JS). */
.pmgv3-idea-host { position: relative; }
.pmgv3-goal-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  z-index: 2;
}
.pmgv3-goal-clear[hidden] { display: none; }
.pmgv3-goal-clear:hover {
  color: #00c896;
  background: rgba(0, 200, 150, 0.1);
  border-color: rgba(0, 200, 150, 0.3);
}
/* cv3-48: ↺ Revert tuning link — sits inside the tuning section, just
   below the header. Subtle text-link style; never competes with pills. */
.pmgv3-revert-tuning {
  display: inline-block;
  background: none;
  border: 0;
  padding: 2px 0;
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.5);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.2);
}
.pmgv3-revert-tuning:hover { color: #00c896; text-decoration-color: rgba(0, 200, 150, 0.5); }
/* cv3-48: ↩ Start Over text links — one under Generate, one at the
   bottom of the result panel. Low-contrast; never competes with the
   green Generate or "Run with AI" buttons. */
.pmgv3-startover {
  display: block;
  background: none;
  border: 0;
  padding: 8px 0 2px 0;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.45);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-align: center;
  width: 100%;
}
.pmgv3-startover:hover { color: #00c896; text-decoration-color: rgba(0, 200, 150, 0.5); }
.pmgv3-startover-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pmgv3-reanalyze {
  display: inline-block;
  background: none;
  border: 0;
  padding: 4px 0;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.45);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.2);
}
.pmgv3-reanalyze:hover { color: #00c896; text-decoration-color: rgba(0, 200, 150, 0.5); }
/* cv3-47: subtle confirmation that the analyze step is done, sitting
   right above the green Generate CTA so the user understands what to do
   next. Mint accent without competing button styling. */
.pmgv3-ready-label {
  font-size: 12px;
  font-weight: 600;
  color: #00c896;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 2px;
}
/* Re-style relocated #settingsPanel */
html.pmg-chassis-v3 .tuning-section #settingsPanel {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
html.pmg-chassis-v3 .tuning-section .settings-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html.pmg-chassis-v3 .tuning-section .field { margin: 0; }
html.pmg-chassis-v3 .tuning-section .field > label,
html.pmg-chassis-v3 .tuning-section .field-label-row label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 200, 150, 0.7);
  margin-bottom: 6px;
}
html.pmg-chassis-v3 .tuning-section .field-label-row .btn-clear { display: none; }
html.pmg-chassis-v3 .tuning-section .pmg-tune-native { display: none; }
html.pmg-chassis-v3 .tuning-section .pmg-tune-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html.pmg-chassis-v3 .tuning-section .pmg-tune-pill,
html.pmg-chassis-v3 .tuning-section .pmg-pill {
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 200, 150, 0.25);
  background: rgba(0, 200, 150, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
html.pmg-chassis-v3 .tuning-section .pmg-tune-pill.is-active,
html.pmg-chassis-v3 .tuning-section .pmg-pill.is-active {
  background: rgba(0, 200, 150, 0.18);
  border-color: #00c896;
  color: #00c896;
  font-weight: 600;
}

/* ---- Right-column empty-state placeholder (cv3-29) ----
   Fixes the "looks broken" first impression: before any prompt is
   generated, the right column was just empty dark space. Now shows a
   friendly intro card. Hides automatically once a result lands
   (body.pmg-has-result, set by app.html) so it never competes with
   the real output box. */
.pmgv3-right-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
  border: 1px dashed rgba(0, 200, 150, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg,
    rgba(0, 200, 150, 0.06) 0%,
    rgba(0, 200, 150, 0.015) 100%);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  min-height: 340px;
  animation: pmgv3-slide-in 0.4s ease-out;
}
.pmgv3-rp-icon {
  font-size: 38px;
  line-height: 1;
  opacity: 0.85;
  filter: drop-shadow(0 2px 8px rgba(0, 200, 150, 0.35));
}
.pmgv3-rp-title {
  font-size: 17px;
  font-weight: 700;
  color: #e8fbf3;
  max-width: 360px;
}
.pmgv3-rp-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 380px;
  line-height: 1.5;
}
.pmgv3-rp-sub strong { color: #00c896; font-weight: 700; }
.pmgv3-rp-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  max-width: 320px;
  width: 100%;
}
.pmgv3-rp-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 200, 150, 0.05);
  border: 1px solid rgba(0, 200, 150, 0.12);
}
.pmgv3-rp-bullets li span {
  color: #00c896;
  font-weight: 700;
  font-size: 14px;
}
body.pmg-has-result .pmgv3-right-placeholder {
  display: none !important;
}

/* ---- Bottom bar quick-entry (cv3-29) ----
   Hidden on every viewport. The audit identified this as a "competing
   input box" — both #goal (top) and #quick-entry (bottom) ask the same
   question, confusing first-time users. The main #goal textarea is the
   single, unambiguous entry point. Footer markup is kept (script
   handlers reference #quick-entry / #quick-entry-submit) but visually
   removed across all breakpoints. */
.pmgv3-bottom {
  display: none !important;
}
/* When the bottom bar is hidden, the body no longer needs to reserve
   space for it. */
.pmgv3-body {
  padding-bottom: 16px !important;
}

/* ---- Generate section (Step 4C) ---- */
.generate-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: pmgv3-slide-in 0.35s ease-out;
}
.generate-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 150, 0.25), transparent);
  margin: 4px 0;
}
html.pmg-chassis-v3 .generate-section #generateBtn,
html.pmg-chassis-v3 .btn-generate {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #00c896, #00a878);
  color: #0d2b1e;
  font-weight: 800;
  font-size: 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 200, 150, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
html.pmg-chassis-v3 .generate-section #generateBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 200, 150, 0.4);
}

/* ============ RIGHT COLUMN ============ */
.output-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 200, 150, 0.2);
  border-radius: 14px;
  padding: 16px;
}

/* Strength bar (Step 5A) */
.strength-bar-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.strength-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.strength-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00c896;
}
.strength-score {
  font-size: 22px;
  font-weight: 800;
  color: #00c896;
}
.strength-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0c040, #00c896);
  border-radius: 4px;
  transition: width 0.8s ease;
  width: 0%;
}
.strength-status {
  font-size: 12px;
  color: #00c896;
  font-weight: 600;
}

/* Generated prompt textarea host */
.prompt-output-textarea,
html.pmg-chassis-v3 .pmgv3-output-host #resultBox {
  width: 100%;
  min-height: 140px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 200, 150, 0.2);
  border-radius: 10px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}
html.pmg-chassis-v3 .pmgv3-output-host #resultBox:focus {
  border-color: #00c896;
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.15);
}

.prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.btn-secondary {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(0, 200, 150, 0.4);
  border-radius: 8px;
  color: #00c896;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-secondary:hover { background: rgba(0, 200, 150, 0.08); }

.next-step-divider {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  margin: 14px 0 10px;
  position: relative;
}
.next-step-divider::before,
.next-step-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.next-step-divider::before { left: 0; }
.next-step-divider::after { right: 0; }

.btn-run-primary {
  width: 100%;
  padding: 14px;
  background: #00c896;
  color: #0d2b1e;
  font-weight: 800;
  font-size: 15px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
/* Safety net: once a result exists, force the Run with AI button
   visible. Defends against any legacy script that may stamp
   `display:none` onto #run-with-ai-btn after generation. */
body.pmg-has-result #run-with-ai-btn,
html.pmg-chassis-v3 body.pmg-has-result #run-with-ai-btn {
  display: block !important;
}
.btn-run-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 200, 150, 0.35);
}

/* cv3-53: send-to-row is now a 2×2 grid (4 destinations:
   ChatGPT, Claude, Gemini, Perplexity). */
.send-to-row,
.pmgv3-send-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 360px) {
  .send-to-row,
  .pmgv3-send-grid { grid-template-columns: 1fr; }
}

/* Quiet preview nudge that sits between the in-house Run With AI
   result output and the "Send your prompt to:" handoff label. Small,
   muted, not a warning, not a button — just a draft-check reframe. */
.pmgv3-send-nudge {
  font-size: 0.72rem !important;
  color: #8a9a8a !important;
  opacity: 0.6 !important;
  font-style: italic !important;
  text-align: center !important;
  margin: 8px 0 12px 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}
.pmgv3-send-label {
  margin: 8px 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}
/* cv3-53: Each send-to destination is brand-coloured (filled, not
   ghost) so the four buttons are visually distinct and recognisable.
   Base rule below holds layout/typography ONLY — colour is supplied
   per-destination by the [data-pmg-dest=...] selectors. */
.btn-send-to {
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.btn-send-to:hover  { filter: brightness(1.10); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.btn-send-to:active { transform: translateY(1px); }

/* ChatGPT — OpenAI green */
.btn-send-to[data-pmg-dest="chatgpt"],
button[data-pmg-dest="chatgpt"].btn-send-to    { background: #10A37F !important; border-color: #10A37F !important; color: #ffffff !important; }
/* Claude — Anthropic sand gold */
.btn-send-to[data-pmg-dest="claude"],
button[data-pmg-dest="claude"].btn-send-to     { background: #D4A574 !important; border-color: #D4A574 !important; color: #1a1a1a !important; }
/* Perplexity — teal */
.btn-send-to[data-pmg-dest="perplexity"],
button[data-pmg-dest="perplexity"].btn-send-to { background: #20B2AA !important; border-color: #20B2AA !important; color: #ffffff !important; }
/* Gemini — Google blue */
.btn-send-to[data-pmg-dest="gemini"],
button[data-pmg-dest="gemini"].btn-send-to     { background: #4285F4 !important; border-color: #4285F4 !important; color: #ffffff !important; }

/* Desktop default: photo accordion header is hidden, suite is always shown.
   Mobile rules above (≤768px) take over to collapse it. */
.pmg-vs-photo-accordion .pmg-vs-photo-acc-header { display: none; }
.pmg-vs-photo-accordion #pmg-vs-photo-suite-container { display: block; }

/* Box 2 — AI response */
.ai-response-box { margin-top: 12px; }
html.pmg-chassis-v3 .pmgv3-air-host #aiResponseSection {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
html.pmg-chassis-v3 .pmgv3-air-host .run-section-divider { display: none; }
/* cv3-57: defensive — if any divider/hr lands inside the AI response
   surface (e.g. the section is rendered outside .pmgv3-air-host, or a
   nested container inherits a background), it shows up as a green
   horizontal stripe across the response text. Force-transparent any
   such element and downgrade the visible separator (if anyone needs
   one) to a 1px subtle border. */
html.pmg-chassis-v3 #aiResponseSection .run-section-divider,
html.pmg-chassis-v3 #aiResponseSection hr,
html.pmg-chassis-v3 #aiResponseSection .divider,
html.pmg-chassis-v3 .ai-response-section .run-section-divider,
html.pmg-chassis-v3 .ai-response-section hr,
html.pmg-chassis-v3 .ai-response-section .divider,
html.pmg-chassis-v3 .ai-response-box .run-section-divider,
html.pmg-chassis-v3 .ai-response-box hr,
html.pmg-chassis-v3 .ai-response-box .divider {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 1px !important;
  margin: 8px 0 !important;
  box-shadow: none !important;
}
html.pmg-chassis-v3 #aiResponseSection .ai-response-output,
html.pmg-chassis-v3 .ai-response-section .ai-response-output {
  background-image: none !important;
}
html.pmg-chassis-v3 .pmgv3-air-host .run-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #00c896;
  margin: 0 0 6px;
}
html.pmg-chassis-v3 .pmgv3-air-host .run-section-helper {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 10px;
}
html.pmg-chassis-v3 .pmgv3-air-host .ai-response-output {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 200, 150, 0.15);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}

/* When right-column inherits #result-panel — strip duplicate chrome */
html.pmg-chassis-v3 #result-panel {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
html.pmg-chassis-v3 #result-panel .panel-head,
html.pmg-chassis-v3 #result-panel .pill-row,
html.pmg-chassis-v3 #result-panel #pinned-note,
html.pmg-chassis-v3 #result-panel .result-box-toggle,
html.pmg-chassis-v3 #result-panel .improve-block,
html.pmg-chassis-v3 #result-panel .what-next,
html.pmg-chassis-v3 #result-panel .quality-row,
html.pmg-chassis-v3 #result-panel .actions-row,
html.pmg-chassis-v3 #result-panel .result-top-actions,
html.pmg-chassis-v3 #result-panel .result-edit-row,
html.pmg-chassis-v3 #result-panel #strength-score:not(.pmgv3-relocated),
html.pmg-chassis-v3 #result-panel .run-section-meta {
  display: none !important;
}
/* Re-show strength-score when relocated into pmgv3 strength slot */
html.pmg-chassis-v3 .strength-bar-container #strength-score {
  display: block !important;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
html.pmg-chassis-v3 .strength-bar-container #strength-score .strength-score-head { display: none; }
html.pmg-chassis-v3 .strength-bar-container #strength-score #strength-score-insights { display: none; }
html.pmg-chassis-v3 .strength-bar-container #strength-score .strength-score-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin: 0;
}
html.pmg-chassis-v3 .strength-bar-container #strength-score .strength-score-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0c040, #00c896);
  border-radius: 4px;
  transition: width 0.8s ease;
}

/* ============ BOTTOM BAR (Step 8) ============ */
.pmgv3-bottom {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #0a2218;
  border-top: 1px solid rgba(0, 200, 150, 0.15);
}
.quick-entry-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 200, 150, 0.2);
  border-radius: 22px;
  padding: 6px 10px 6px 16px;
  max-width: 720px;
  margin: 0 auto;
}
.quick-entry-icon { color: rgba(255, 255, 255, 0.4); font-size: 14px; }
#quick-entry {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
#quick-entry::placeholder { color: rgba(255, 255, 255, 0.4); }
.quick-entry-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00c896;
  color: #0d2b1e;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quick-entry-btn:hover { background: #00d8a3; }

/* ============ MOBILE (Step 9 + cv3-16 polish) ============ */
@media (max-width: 768px) {
  /* Body: single column, more breathing room. No bottom-bar clearance needed
     since cv3-17 hides .pmgv3-bottom on mobile. */
  .pmgv3-body {
    overflow-y: auto;
    padding: 12px;
    padding-bottom: 32px;
  }
  .pmgv3-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    height: auto;
  }
  .pmg-vs-sora-grid { grid-template-columns: 1fr; }
  .pmg-vs-media-container { min-height: 240px; }
  /* Columns shouldn't have their own scrollbars on mobile — let body scroll */
  .pmgv3-left, .pmgv3-right {
    overflow-y: visible;
    padding-right: 0;
  }
  /* Topbar + tabs: more breathing room */
  .pmgv3-topbar { padding: 0 16px; }
  .pmgv3-tabs {
    overflow-x: auto;
    padding: 0 16px;
    gap: 8px;
  }
  .pmgv3-tab { white-space: nowrap; padding: 6px 16px; font-size: 14px; }
  .pmgv3-brand { font-size: 14px; min-width: 0; overflow: hidden; }
  .pmgv3-brand > span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .pmgv3-tb-r { gap: 6px; flex-shrink: 0; }
  .pmgv3-upgrade { padding: 6px 10px; font-size: 12px; }
  /* cv3-17: Bottom bar entirely hidden on mobile. The Quick Entry pill is
     a desktop-only convenience — on mobile the main #goal textarea at the top
     is the single, clear entry point. Removing it kills visual clutter (the
     duplicate "What do you want to build?" prompt) and reclaims viewport. */
  .pmgv3-bottom {
    display: none !important;
  }
  /* cv3-17 friction fix: hide the noisy Live Feedback panel on mobile.
     It pre-shows "Too vague / 805 chars / 201 tokens" before the user has
     typed anything, eating ~280px of above-the-fold space and confusing
     first-paint. Strength score still renders in the v3 prompt-output box
     after Generate, so no signal is lost. */
  [class*="pmg-tff-"],
  .pmg-text-feedback,
  #pmg-text-feedback,
  #pmg-tf-feedback {
    display: none !important;
  }
  /* cv3-30 audit 3.1: tuning section is a tap-to-expand accordion on
     mobile. Header stays visible (with pick-count badge + chevron) and
     the dense pill grid only appears once the user opts in. Keeps
     Generate above the fold on a 390px viewport. */
  .tuning-section {
    max-height: none;
    overflow: visible;
    padding: 12px 14px;
  }
  button.tuning-header {
    cursor: pointer;
    margin-bottom: 0;
    padding: 4px 0;
    -webkit-tap-highlight-color: rgba(0, 200, 150, 0.15);
  }
  button.tuning-header:active .tuning-chevron { opacity: 0.6; }
  .tuning-chevron {
    display: inline-block !important;
  }
  .tuning-section.is-mobile-open .tuning-chevron {
    transform: rotate(180deg);
  }
  .tuning-section.is-mobile-open {
    max-height: 60vh;
    overflow-y: auto;
  }
  .tuning-section.is-mobile-open button.tuning-header {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 200, 150, 0.18);
    padding-bottom: 10px;
  }
  /* cv3-47: the desktop-equivalent rule now lives outside the media
     query (above) so the accordion is collapsed-by-default everywhere.
     Mobile-only sizing tweaks remain here. */
  /* Tuning pills: shrink from 44px touch target to 36px so they fit comfortably */
  .pmg-prompt-tuning .pmg-tune-pills,
  html.pmg-chassis-v3 .tuning-section .pmg-tune-pills {
    gap: 8px;
  }
  .pmg-prompt-tuning .pmg-tune-pill,
  html.pmg-chassis-v3 .tuning-section .pmg-tune-pill {
    min-height: 36px !important;
    min-width: auto !important;
    padding: 6px 12px !important;
    font-size: 13px;
  }
  /* cv3-36: Photography Suite is a tap-to-expand accordion on mobile.
     Mirrors the text-panel tuning accordion so the "Build My Image
     Prompt" button stays above the fold on a 390px viewport. */
  .pmg-vs-photo-accordion .pmg-vs-photo-acc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 200, 150, 0.08);
    border: 1px solid rgba(0, 200, 150, 0.28);
    border-radius: 10px;
    color: #d4f5e8;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 200, 150, 0.15);
  }
  .pmg-vs-photo-accordion .pmg-vs-photo-acc-hint {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.65;
    font-weight: 400;
  }
  .pmg-vs-photo-accordion .pmg-vs-photo-acc-chevron {
    font-size: 14px;
    color: #00c896;
    transition: transform 0.18s ease;
  }
  .pmg-vs-photo-accordion.is-mobile-open .pmg-vs-photo-acc-chevron {
    transform: rotate(180deg);
  }
  .pmg-vs-photo-accordion:not(.is-mobile-open) #pmg-vs-photo-suite-container {
    display: none !important;
  }
  .pmg-vs-photo-accordion.is-mobile-open #pmg-vs-photo-suite-container {
    margin-top: 10px;
    max-height: 55vh;
    overflow-y: auto;
  }

  /* cv3-29: shrink Photography Suite + Sora video pills on mobile too.
     They previously inherited desktop padding/min-height (44px touch
     target), making each pill row tower over the next and pushing
     Generate well below the fold on a 390px viewport. */
  .pmg-photo-pill,
  .pmg-pill,
  .pmg-vs-pill {
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  .pmg-vs-pill-row,
  .pmg-photo-pills {
    gap: 6px !important;
  }
  /* Tighten the placeholder on small screens — less padding so the
     intro card doesn't dominate above the fold when the panel stacks
     under the prompt area. */
  .pmgv3-right-placeholder {
    min-height: 200px;
    padding: 22px 18px;
    gap: 10px;
  }
  .pmgv3-rp-icon { font-size: 30px; }
  .pmgv3-rp-title { font-size: 15px; }
  .pmgv3-rp-sub { font-size: 12px; }
  .pmgv3-rp-bullets { font-size: 12px; }
}
/* cv3-22 fix: at ≤400px the brand + 2 icons + Upgrade overflow the row.
   Shrink the right cluster (icon size + button padding) and tighten the
   topbar gutter so the row fits a 360px viewport without the
   `overflow-x: hidden` band-aid the overflow-360 test forbids. */
@media (max-width: 400px) {
  .pmgv3-topbar { padding: 0 10px; }
  .pmgv3-tb-r { gap: 4px; }
  /* .pmgv3-ico stays at the 44x44 tap-target size set on the base
     rule (with !important). Only shrink the visual glyph (font-size)
     to keep the topbar visually tight on ≤400px. */
  .pmgv3-ico { font-size: 14px; padding: 0; }
  .pmgv3-upgrade { padding: 5px 8px; font-size: 11px; }
  .pmgv3-brand { gap: 6px; font-size: 13px; }
  .pmgv3-brand img { width: 24px; height: 24px; }
  .pmgv3-brand-beta { display: none; }
}

/* ====================================================================
   cv3-58 — Text Prompting Suite "Epic" upgrade
   New advanced controls inside #pmgv3-epic-tuning (sits inside
   #tuning-panel below the legacy #settingsPanel host).
   ==================================================================== */
.pmgv3-epic-tuning {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 200, 150, 0.20);
}
.pmgv3-epic-tuning .pmgv3-section-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 6px;
}
.pmgv3-epic-tuning .pmgv3-style-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
}

/* Select dropdown — !important needed because the global theme's
   generic <select> rule (pmg-g-theme.css) wins on specificity tie. */
.pmgv3-epic-tuning .pmgv3-select,
.pmgv3-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(0, 200, 150, 0.30) !important;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  margin-bottom: 8px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0, 200, 150, 0.7) 50%),
    linear-gradient(135deg, rgba(0, 200, 150, 0.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.pmgv3-select:focus {
  outline: none;
  border-color: #00c896 !important;
  box-shadow: 0 0 0 2px rgba(0, 200, 150, 0.25);
}

/* Toggle switch row (Strict Fact-Checking Mode) */
.pmgv3-confidence-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  background: rgba(0, 200, 150, 0.05);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 200, 150, 0.15);
}
.pmgv3-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pmgv3-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.pmgv3-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.10);
  transition: background-color 0.25s ease;
  border-radius: 22px;
}
.pmgv3-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}
.pmgv3-switch input:checked + .pmgv3-slider { background-color: #00c896; }
.pmgv3-switch input:checked + .pmgv3-slider::before { transform: translateX(18px); }
.pmgv3-switch input:focus-visible + .pmgv3-slider {
  box-shadow: 0 0 0 2px rgba(0, 200, 150, 0.45);
}
.pmgv3-switch-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pmgv3-switch-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.pmgv3-switch-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

/* Target-audience text input */
.pmgv3-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.pmgv3-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.pmgv3-input:focus {
  outline: none;
  border-color: #00c896;
  box-shadow: 0 0 0 2px rgba(0, 200, 150, 0.25);
}

/* ============================================================================
   cv3-60 — Inline length warning (replaces alert() for >6000 char prompts)
   ============================================================================ */
.pmgv3-inline-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 184, 0, 0.10);
  border: 1px solid rgba(255, 184, 0, 0.30);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 12px;
  animation: pmgv3-warning-slide 0.3s ease-out;
}
.pmgv3-inline-warning .warning-icon {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.pmgv3-inline-warning .warning-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.45;
}
.pmgv3-inline-warning .warning-text strong { color: #ffb800; }

@keyframes pmgv3-warning-slide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse the Send-To grid to draw attention when the warning appears */
@keyframes pmgv3-pulse-highlight {
  0%   { box-shadow: 0 0 0 0    rgba(0, 200, 150, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 200, 150, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(0, 200, 150, 0);    }
}
.highlight-pulse {
  animation: pmgv3-pulse-highlight 1.5s ease-out;
  border-radius: 8px;
}