/* ============================================
   RESPONSIVE — All breakpoints
   ============================================ */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .about-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .about-visual { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- Mobile Sidebar ---- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: 50;
    box-shadow: var(--shadow-xl);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.visible { display: block; }
  .chat-main { width: 100%; }

  /* Navbar */
  .nav-links {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3);
    flex-direction: column;
    gap: var(--sp-1);
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
  .menu-toggle { display: flex; }

  /* Hero */
  .hero { padding: 100px 5% 60px; }
  .hero-input-footer { flex-direction: column; align-items: stretch; }
  .hero-chips { justify-content: flex-start; }
  .hero-send { align-self: flex-end; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--sp-2); }

  /* Chat header */
  .chat-header { padding: 0 var(--sp-3); }
  .status-text { display: none; }

  /* Messages */
  .messages-area { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .msg-row { gap: var(--sp-2); padding: var(--sp-3) 0; }
  .msg-avatar { width: 28px; height: 28px; font-size: 13px; }
  .msg-bubble { font-size: 14px; }
  .user-bubble { max-width: 95%; }

  /* Input */
  .input-area { padding: var(--sp-3); }
  .chat-textarea { font-size: 16px; } /* prevent iOS zoom */

  /* Scroll btn */
  .scroll-bottom-btn { right: 14px; bottom: 90px; }

  /* Modal */
  .modal { max-height: 90vh; border-radius: var(--r-xl); }

  /* Toast */
  .toast-container { bottom: var(--sp-4); right: var(--sp-3); left: var(--sp-3); }
  .toast { max-width: 100%; }

  /* Settings */
  .settings-actions { flex-direction: column; }
  .settings-actions button { width: 100%; justify-content: center; }

  /* Message actions always visible on touch */
  .msg-actions { opacity: 1; }
}

/* ---- Small Mobile (≤480px) ---- */
@media (max-width: 480px) {
  .hero h1 { font-size: 30px; letter-spacing: -0.8px; }
  .hero-logo { width: 64px; height: 64px; font-size: 30px; }
  .hero-badge { font-size: 11px; }
  .btn-launch { padding: 9px 16px; font-size: 13px; }
  .section-title { font-size: 24px; }
  .feature-card { padding: var(--sp-5); }

  .empty-state { padding: var(--sp-10) var(--sp-4); min-height: 50vh; }
  .empty-state h2 { font-size: 18px; }
  .empty-chips { gap: var(--sp-2); }
  .chip { font-size: 12px; padding: 6px 12px; }

  .chat-header-center { display: none; }

  .modal-body { padding: var(--sp-4); }
  .modal-header { padding: var(--sp-4); }

  /* Code blocks on small screens */
  .code-block-wrap pre { padding: var(--sp-3); }
  .code-block-wrap pre code { font-size: 12px !important; }

  /* Tables on small screens */
  .table-wrap { font-size: 13px; }
}

/* ---- Wide screens (≥1400px) ---- */
@media (min-width: 1400px) {
  :root {
    --msg-max-w: 860px;
    --input-max-w: 840px;
  }
  .messages-area { padding: var(--sp-8) var(--sp-6) var(--sp-6); }
}

/* ---- Sidebar close button: only on mobile ---- */
@media (min-width: 769px) {
  #sidebar-close { display: none; }
}

/* ---- Touch device optimizations ---- */
@media (hover: none) and (pointer: coarse) {
  .msg-actions { opacity: 1; }
  .conv-item-actions { display: flex; }
  .chip { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }
  .send-btn { width: 40px; height: 40px; }
  .msg-action-btn { padding: 6px 10px; }
}

/* ---- Keyboard visible (mobile) — push input up ---- */
@supports (height: 100dvh) {
  .chat-app { height: 100dvh; }
}