assets/responsive.css

/* ── 16:9 (landscape ≥ 900 px) — side-by-side ── */
@media (min-width: 900px) {
  #main-row { flex-direction: row !important; }
  #input-panel { max-width: 400px; }
}

/* ── 9:16 (portrait < 600 px) — stacked ── */
@media (max-width: 599px) {
  #main-row { flex-direction: column !important; }
  #input-panel { width: 100% !important; max-width: 100%; }
  #output-panel { width: 100% !important; }
  /* Larger tap targets */
  button, .gr-button { min-height: 48px !important; font-size: 1.1rem !important; }
  textarea, input[type="text"] { font-size: 16px !important; } /* prevents iOS zoom */
}

/* ── Tablet mid-range (600 – 899 px) ── */
@media (min-width: 600px) and (max-width: 899px) {
  #main-row { flex-direction: column !important; }
  #input-panel { width: 100% !important; }
}