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

/* ============================================
   LANDING PAGE — Tablet (≤1024px)
   ============================================ */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .about-visual { display: none; }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p { max-width: 100%; }
}

/* ============================================
   LANDING PAGE — Large Mobile + Tablet (≤768px)
   ============================================ */
@media (max-width: 768px) {

  /* --- Navbar --- */
  .navbar {
    padding: 0 var(--sp-4);
    height: 56px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 56px; left: 0; right: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
    flex-direction: column;
    gap: 2px;
    z-index: 99;
    box-shadow: var(--shadow-md);
  }

  .nav-links.open { display: flex; }

  .nav-links a {
    padding: 12px var(--sp-4);
    border-radius: var(--r-md);
    font-size: 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .menu-toggle { display: flex; }

  .nav-actions .nav-links { display: none; }

  /* --- Hero --- */
  .hero {
    min-height: 100svh;
    padding: 80px var(--sp-4) 60px;
    align-items: flex-start;
    padding-top: calc(56px + 40px);
  }

  .hero-content {
    gap: var(--sp-4);
    align-items: center;
  }

  .hero-badge {
    font-size: 11px;
    padding: 6px var(--sp-3);
  }

  .hero-logo {
    width: 72px; height: 72px;
    font-size: 34px;
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 42px);
    letter-spacing: -1px;
    line-height: 1.15;
  }

  .hero-subtitle {
    font-size: 15px;
    padding: 0;
    max-width: 100%;
  }

  .hero-input-wrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .hero-input-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    justify-content: flex-start;
  }

  .hero-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    flex: none;
    width: 100%;
  }

  .hero-chips .chip {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    min-height: 44px;
    padding: 10px var(--sp-3);
    font-size: 13px;
    border-radius: var(--r-lg);
  }

  .hero-input-footer .hero-send {
    width: 100% !important;
    height: 48px !important;
    border-radius: var(--r-md);
    align-self: stretch;
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-chips {
    order: 1;
  }

  .hero-note { font-size: 11px; }

  /* --- Features --- */
  .features-section {
    padding: 64px var(--sp-4);
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .section-subtitle {
    font-size: 14px;
    margin-bottom: var(--sp-8);
  }

  /* --- About --- */
  .about-section {
    padding: 64px var(--sp-4);
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .about-text { gap: var(--sp-4); }

  .about-text p { font-size: 15px; }

  .btn-launch.large {
    width: 100%;
    justify-content: center;
    padding: 14px var(--sp-6);
  }

  /* --- Footer --- */
  .landing-footer {
    padding: 48px var(--sp-4) 24px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-bottom: var(--sp-6);
  }

  .footer-brand { grid-column: auto; }

  .footer-brand p { max-width: 100%; font-size: 14px; }

  .footer-links-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .footer-links-group ul { gap: var(--sp-2); }

  .footer-links-group a,
  .footer-links-group .link-btn {
    min-height: 40px;
    font-size: 14px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }

  .footer-bottom p { font-size: 12px; }

  .made-in-india { font-size: 12px; }

  /* ---- Chat page — sidebar drawer ---- */
  .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%; }
  .chat-header { padding: 0 var(--sp-3); }
  .status-text { display: none; }
  .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-area { padding: var(--sp-3); }
  .chat-textarea { font-size: 16px; }
  .scroll-bottom-btn { right: 14px; bottom: 90px; }
  .modal { max-height: 90vh; border-radius: var(--r-xl); }
  .toast-container { bottom: var(--sp-4); right: var(--sp-3); left: var(--sp-3); }
  .toast { max-width: 100%; }
  .settings-actions { flex-direction: column; }
  .settings-actions button { width: 100%; justify-content: center; }
  .msg-actions { opacity: 1; }
}

/* ============================================
   LANDING PAGE — Normal Mobile (≤480px)
   ============================================ */
@media (max-width: 480px) {

  /* --- Navbar --- */
  .navbar { padding: 0 var(--sp-3); }
  .logo-text { font-size: 16px; }

  /* --- Hero --- */
  .hero {
    padding: calc(56px + 32px) var(--sp-3) 48px;
  }

  .hero-content { gap: var(--sp-4); }

  .hero-badge {
    font-size: 11px;
    padding: 5px var(--sp-3);
    max-width: 100%;
    text-align: center;
  }

  .hero-logo {
    width: 64px; height: 64px;
    font-size: 30px;
  }

  .hero h1 {
    font-size: clamp(26px, 9vw, 36px);
    letter-spacing: -0.8px;
  }

  .hero-subtitle {
    font-size: 14px;
    line-height: 1.7;
  }

  .hero-chips .chip {
    font-size: 12px;
    padding: 9px var(--sp-2);
    min-height: 44px;
  }

  .hero-input-footer .hero-send {
    height: 48px !important;
    width: 100% !important;
  }

  .hero-note { font-size: 11px; padding: 0 var(--sp-2); }

  /* --- Features --- */
  .features-section { padding: 56px var(--sp-3); }

  .section-title { font-size: clamp(22px, 6vw, 28px); }

  .section-subtitle { font-size: 14px; margin-bottom: var(--sp-6); }

  .feature-card { padding: var(--sp-4); }

  .feature-icon { font-size: 24px; margin-bottom: var(--sp-3); }

  .feature-card h3 { font-size: 15px; }

  .feature-card p { font-size: 13px; }

  /* --- About --- */
  .about-section { padding: 56px var(--sp-3); }

  .about-text p { font-size: 14px; line-height: 1.75; }

  .section-title.left { font-size: clamp(22px, 6vw, 28px); }

  /* --- Footer --- */
  .landing-footer { padding: 40px var(--sp-3) 20px; }

  .footer-inner { gap: var(--sp-5); }

  .footer-brand p { font-size: 13px; }

  .footer-links-group h4 { font-size: 10px; }

  .footer-links-group a,
  .footer-links-group .link-btn { font-size: 13px; }

  .footer-bottom p,
  .made-in-india { font-size: 12px; }

  /* --- Chat page small mobile --- */
  .chat-header-center { display: none; }
  .modal-body { padding: var(--sp-4); }
  .modal-header { padding: var(--sp-4); }
  .code-block-wrap pre { padding: var(--sp-3); }
  .code-block-wrap pre code { font-size: 12px !important; }
  .table-wrap { font-size: 13px; }
  .empty-state { padding: var(--sp-10) var(--sp-4); min-height: 50vh; }
  .empty-state h2 { font-size: 18px; }
  .empty-chips { gap: var(--sp-2); }
}

/* ============================================
   LANDING PAGE — Small phones (≤375px)
   ============================================ */
@media (max-width: 375px) {
  .hero h1 { font-size: 24px; letter-spacing: -0.5px; }
  .hero-subtitle { font-size: 13px; }
  .hero-badge { font-size: 10px; }
  .hero-logo { width: 56px; height: 56px; font-size: 26px; }
  .feature-card { padding: var(--sp-3) var(--sp-4); }
  .btn-launch { font-size: 13px; padding: 10px var(--sp-4); }
  .footer-inner { gap: var(--sp-4); }
}

/* ============================================
   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); }
  .features-section { padding: 100px var(--sp-6); }
  .about-section { padding: 100px var(--sp-6); }
  .landing-footer { padding: 60px var(--sp-6) 32px; }
}

/* ---- 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; }
  .btn-launch { min-height: 44px; }
  .nav-links a { min-height: 44px; }
}

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

/* ---- Prevent horizontal overflow globally ---- */
.landing-page,
.hero,
.features-section,
.about-section,
.landing-footer {
  max-width: 100vw;
  overflow-x: hidden;
}