/* ============================================================================
   AI COMPOSER — SCENE 7 TEXTAREA (responsive growth)
   ----------------------------------------------------------------------------
   Goal: the "Tell buyers what they should feel" textarea should grow to fill
   the available card height on both desktop and small screens. It should
   only show a scrollbar when its content actually exceeds the box.

   The original CSS fixes the textarea height to ~9 lines, leaving wasted
   white space below on tall viewports and forcing premature scrolling.
   ============================================================================ */

/* Make scene 7 a flex column so the textarea can flex-grow into free space */
#psScene7,
.ps-ai-composer-scene,
[data-scene="7"].ps-step,
.ps-step.ai-composer {
    display: flex !important;
    flex-direction: column !important;
}

/* Common textarea selectors used by the composer */
#psScene7 textarea,
#psScene7 .ps-textarea,
#psScene7 .ai-composer-textarea,
.ai-composer-textarea,
textarea#aiComposerInput,
textarea[name="aiComposerInput"],
textarea.ps-ai-composer-input {
    /* Grow with the parent — no fixed height */
    flex: 1 1 auto !important;
    min-height: 220px !important;
    height: auto !important;
    max-height: none !important;
    /* Only show scrollbar when content overflows */
    overflow-y: auto !important;
    resize: none !important;
    box-sizing: border-box !important;
}
/* ─── Class for the JS to stamp on the matched textarea + its ancestors ─── */
textarea.ssmm-composer-textarea {
    flex: 1 1 auto !important;
  
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    resize: none !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* On desktop / tablet, give it a generous floor so it always feels roomy */
@media (min-width: 901px) {
    #psScene7 textarea,
    #psScene7 .ps-textarea,
    #psScene7 .ai-composer-textarea,
    .ai-composer-textarea,
    textarea#aiComposerInput,
    textarea[name="aiComposerInput"],
    textarea.ps-ai-composer-input {
        min-height: 320px !important;
    }
}

/* On large desktop screens, let it breathe even more */
@media (min-width: 1280px) and (min-height: 800px) {
    #psScene7 textarea,
    #psScene7 .ps-textarea,
    #psScene7 .ai-composer-textarea,
    .ai-composer-textarea,
    textarea#aiComposerInput,
    textarea[name="aiComposerInput"],
    textarea.ps-ai-composer-input {
        min-height: 420px !important;
    }
}

/* Mobile: respect the surrounding card padding and keep room for the
   "Let AI Write Your Story" CTA + Back/Continue row below */
@media (max-width: 900px) {
    #psScene7 textarea,
    #psScene7 .ps-textarea,
    #psScene7 .ai-composer-textarea,
    .ai-composer-textarea,
    textarea#aiComposerInput,
    textarea[name="aiComposerInput"],
    textarea.ps-ai-composer-input {
        min-height: 180px !important;
    }
}

/* If the textarea sits inside a wrapper that has its own height constraint,
   unlock the wrapper too so the textarea can actually fill it. */
#psScene7 .ps-textarea-wrap,
#psScene7 .ai-composer-textarea-wrap,
#psScene7 .ps-input-group {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}