/**
 * ClawMarketing — Mobile Responsive Overrides
 * Breakpoints: 768px (tablet), 480px (mobile)
 * Only adds @media overrides — does NOT redefine existing desktop rules.
 */

/* ============================================
   GLOBAL: touch targets + font sizing
   ============================================ */
@media (max-width: 768px) {
  button, a, input[type="submit"], .quick-reply, .quick-action,
  .platform-toggle, .topic-card, .setup-tone-btn, .button-response-btn {
    min-height: 44px;
    min-width: 44px;
  }

  input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}

/* ============================================
   WORKSPACE: Sidebar
   ============================================ */
@media (max-width: 768px) {
  .sidebar, .sidebar-v2 {
    position: fixed;
    left: -260px;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: none;
  }

  .sidebar.open, .sidebar-v2.open {
    left: 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }

  .sidebar-overlay.active {
    display: block;
  }

  /* Hamburger button */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 998;
    background: white;
  }

  /* Main content takes full width */
  .main-content, .chat-container, .workspace-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
}

@media (min-width: 769px) {
  .mobile-menu-btn {
    display: none !important;
  }
  .sidebar-overlay {
    display: none !important;
  }
}

/* ============================================
   WORKSPACE: Chat area
   ============================================ */
@media (max-width: 768px) {
  .chat-area, #chatArea {
    padding: 12px !important;
    padding-bottom: 80px !important; /* space for fixed input */
  }

  .chat-input-container, .input-area {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border-top: 1px solid var(--border, #d1d5db);
    padding: 8px 12px !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }

  .chat-input-container input,
  .chat-input-container textarea {
    width: 100% !important;
  }

  .chat-bubble .bubble {
    max-width: 90% !important;
  }
}

/* ============================================
   CONTENT SETUP: Topic cards
   ============================================ */
@media (max-width: 768px) {
  .topic-grid, .topics-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .topic-card {
    padding: 14px !important;
  }

  .content-setup-panel {
    padding: 16px !important;
    margin: 8px !important;
    border-radius: 12px !important;
  }

  .setup-form-header h2 {
    font-size: 18px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .topic-grid, .topics-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================
   CONTENT SETUP: Platform selection
   ============================================ */
@media (max-width: 768px) {
  .platform-list, .platform-toggles {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .platform-toggle {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
  }
}

/* ============================================
   PREVIEW CARDS: Content results
   ============================================ */
@media (max-width: 768px) {
  .preview-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .preview-card, .content-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .preview-card img, .content-card img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Google Business preview */
  .gbp-preview, .google-preview {
    max-width: 100% !important;
  }

  .gbp-preview img {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100% !important;
  }

  /* Facebook preview */
  .fb-preview, .facebook-preview {
    max-width: 100% !important;
  }

  /* Nextdoor preview */
  .nd-preview, .nextdoor-preview {
    max-width: 100% !important;
  }

  /* Instagram preview */
  .ig-preview, .instagram-preview {
    max-width: 100% !important;
  }

  /* Action buttons in cards */
  .card-actions, .preview-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .card-actions button, .preview-actions button {
    flex: 1 1 auto !important;
    min-width: 80px !important;
  }
}

/* ============================================
   LANDING PAGE: Hero + features
   ============================================ */
@media (max-width: 768px) {
  .hero, .hero-section {
    padding: 40px 16px !important;
    text-align: center;
  }

  .hero h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  .hero p, .hero-subtitle {
    font-size: 16px !important;
  }

  .features-grid, .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  .cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .cta-buttons a, .cta-buttons button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================
   PRICING PAGE: Cards
   ============================================ */
@media (max-width: 768px) {
  .pricing-grid, .pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  .pricing-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pricing-toggle {
    flex-direction: row !important;
    justify-content: center !important;
  }
}

/* ============================================
   LOGIN PAGE
   ============================================ */
@media (max-width: 768px) {
  .login-container, .login-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    border-radius: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .login-card h1 {
    font-size: 24px !important;
  }
}

/* ============================================
   PROFILE PAGE
   ============================================ */
@media (max-width: 768px) {
  .profile-container {
    padding: 16px !important;
  }

  .profile-form .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .profile-form .form-row > * {
    width: 100% !important;
  }

  .trade-chips {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .trade-chip {
    flex: 0 1 auto !important;
  }
}

/* ============================================
   GLOBAL HEADER: Mobile
   ============================================ */
@media (max-width: 768px) {
  .global-header {
    padding: 8px 12px !important;
  }

  .global-header .nav-links {
    display: none !important;
  }

  .global-header .logo {
    font-size: 16px !important;
  }

  .header-actions {
    gap: 8px !important;
  }
}

/* ============================================
   HISTORY OVERLAY (My Posts)
   ============================================ */
@media (max-width: 768px) {
  #historyOverlay {
    padding: 12px !important;
  }

  #historyOverlay h2 {
    font-size: 20px !important;
  }

  #historySearch {
    max-width: 100% !important;
  }

  .session-item {
    padding: 12px !important;
  }

  .session-item .session-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .session-item .session-actions button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

/* ============================================
   QUICK REPLIES / BUTTON RESPONSES
   ============================================ */
@media (max-width: 768px) {
  .quick-replies {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .quick-reply {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 10px 16px !important;
  }

  .button-response {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .button-response-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================
   ONBOARDING
   ============================================ */
@media (max-width: 768px) {
  .trade-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .trade-card {
    padding: 12px 8px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .trade-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hero h1 {
    font-size: 24px !important;
  }

  .chat-bubble .bubble {
    max-width: 95% !important;
    font-size: 14px !important;
  }
}