/* Create composer: every control must remain inside the card on narrow phones. */
@media (max-width: 640px) {
  .gen-bar-top { flex-direction: column; align-items: stretch; min-width: 0; }
  .gen-bar-input,
  .gen-bar-go { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .gen-bar-go { justify-content: center; }
  .gen-bar-controls { align-items: stretch; min-width: 0; }
  .gen-model-wrap { width: 100%; min-width: 0; }
  .gen-model-wrap .gen-bar-select { width: 100%; max-width: 100% !important; min-width: 0; }
  .gen-bar-controls > .gen-bar-select { max-width: 100% !important; min-width: 0; }
  .gen-bar-accounts { width: 100%; min-width: 0; margin-left: 0; }
}

/* Create composer disclosure.
   The bar carried five control clusters at once — media, model, offer, reference photo and the
   account chips — so the primary action competed with four refinements a customer rarely changes.
   Media and accounts stay inline because they change what gets made and where it goes; the rest sit
   behind one control. Video-only controls keep their own display logic and are simply inside it. */
.gen-more-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text-muted);font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 12px;cursor:pointer;}
.gen-more-btn:hover,.gen-more-btn:focus-visible{color:var(--text);border-color:var(--cyan,#2BD0C5);}
.gen-more-btn[aria-expanded="true"]{color:var(--text);border-color:var(--cyan,#2BD0C5);}
.gen-more-btn svg{transition:transform .18s ease;}
.gen-more-btn[aria-expanded="true"] svg{transform:rotate(45deg);}
.gen-more{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1 1 100%;min-width:0;margin-top:2px;}
.gen-more[hidden]{display:none;}
@media (max-width: 640px){
  .gen-more-btn{width:100%;justify-content:center;}
  .gen-more{width:100%;min-width:0;}
  .gen-more>*{min-width:0;}
}