/* ==========================================================
   Mobile-First & Responsive Enhancements for MemeForge Web
   ========================================================== */

/* Universal mobile-safe viewport settings */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  -webkit-tap-highlight-color: transparent;
}

/* ── Mobile Header Optimization (< 768px) ── */
@media (max-width: 767px) {
  header {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    height: auto !important;
  }

  header > div {
    gap: 0.4rem !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Logo styling on mobile */
  header .brand-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  header h1 {
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }

  /* HIDE the center studio/popup mode switcher on phones so it NEVER overlaps logo */
  header div.bg-slate-800\/80.p-1.rounded-lg,
  header div[class*="bg-slate-800"][class*="rounded-lg"] {
    display: none !important;
  }

  /* HIDE zoom (- 100% +) controls on mobile screens */
  #zoom-out-btn,
  #zoom-in-btn {
    display: none !important;
  }

  /* Right-side action buttons on mobile: strict single line, never wraps */
  header > div > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }

  /* Compact header buttons */
  #header-add-text-btn,
  #open-full-studio-btn,
  #open-popup-btn,
  #copy-to-clipboard-btn,
  #download-meme-btn,
  #download-quality-dropdown-btn {
    height: 32px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  #copy-to-clipboard-btn {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  #download-meme-btn {
    padding-left: 0.6rem !important;
    padding-right: 0.5rem !important;
  }

  #download-quality-dropdown-btn {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }

  /* Ensure dropdown stays within mobile screen boundary */
  header div[ref] > div:last-child,
  header [class*="absolute"][class*="bg-slate-900"] {
    right: 0 !important;
    left: auto !important;
    max-width: 90vw !important;
    z-index: 99 !important;
  }
}

/* ── Canvas & Stage Responsiveness ── */
#meme-canvas-stage {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

canvas {
  touch-action: none;
}

/* ── Empty State / Drag & Drop Dropzone ── */
@media (max-width: 640px) {
  main {
    padding: 0.6rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Empty state card */
  div.border-dashed {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1rem !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Touch-friendly primary action button */
  div.border-dashed button,
  button:has(> svg + span) {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Popup tabs row */
  div[class*="bg-slate-900"][class*="rounded-xl"] button {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    font-size: 11px !important;
  }

  /* Prevent browser auto-zoom jump on form inputs */
  input[type="text"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Extra small devices (< 380px) */
@media (max-width: 379px) {
  header h1 span.text-amber-400 {
    display: none !important;
  }
  
  #header-add-text-btn span,
  #open-full-studio-btn span,
  #open-popup-btn span {
    display: none !important;
  }
}