/* ===================================================
   NanobananaPro2 — Responsive
   =================================================== */

@media (max-width: 1024px) {
  .panel-layout { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .panel-controls { max-height: 65vh; overflow-y: auto; }
  .panel-result { min-height: 50vh; }
  .result-meta { grid-template-columns: repeat(2, 1fr); }
  .main-content { padding: 10px; }
}

@media (max-width: 768px) {
  .app-header { padding: 10px 14px; }
  .logo-text { font-size: 1rem; }
  .main-content { padding: 8px; }
  .panel-controls { max-height: 60vh; }
  .panel-scroll { padding: 10px; gap: 12px; }
  .mode-tab { min-width: 54px; padding: 6px 8px; font-size: .58rem; }
  .chip { padding: 3px 10px; font-size: .72rem; }
  .section-title { font-size: .72rem; }
  .form-textarea { min-height: 60px; }
  .btn-generate { padding: 12px 16px; font-size: .9rem; }
  .aspect-ratio-grid { grid-template-columns: repeat(3, 1fr); }
  .history-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 4px; }
  .position-grid { grid-template-columns: repeat(3, 40px); }
  .pos-btn { width: 40px; height: 40px; }
  /* Tag dict modal mobile */
  #tagDictModal .modal-content { width: 100vw; height: 95vh; max-width: 100vw; border-radius: var(--radius-md); }
  #tagCategories { width: 120px !important; font-size: .75rem; }
  #tagGrid { padding: 12px !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 8px !important; }
}

@media (max-width: 480px) {
  html { font-size: 13px; }
  .logo-text { font-size: .85rem; }
  .app-header { padding: 8px 10px; }
  .mode-tab { min-width: 48px; padding: 5px 6px; font-size: .55rem; gap: 2px; }
  .panel-controls { max-height: 55vh; }
  .panel-scroll { padding: 8px; gap: 10px; }
  .generate-area { padding: 8px 10px; }
  .chip { padding: 3px 8px; font-size: .68rem; }
  .aspect-ratio-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .aspect-btn { padding: 6px 2px; gap: 2px; }
  .aspect-btn span { font-size: .55rem; }
  .toast-container { right: 8px; bottom: 8px; left: 8px; }
  .toast { font-size: .78rem; padding: 8px 12px; }
  /* Tag dict full screen on small devices */
  #tagDictModal .modal-content { width: 100vw; height: 100vh; border-radius: 0; }
  #tagCategories { width: 80px !important; }
}