/* ── MOBILE ────────────────────────────────────────── */
@media (max-width: 640px) {
  .mobile-menu-btn { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    width: 220px;
    align-items: flex-start;
    padding: 18px 14px 22px;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.35s, border-color 0.35s;
  }
  .sidebar.open { transform: translateX(0); width: 220px; }
  .sidebar .sb-label { display: block; }
  .sidebar .sb-hamburger { width: 100%; justify-content: flex-start; gap: 10px; padding: 0 6px; }
  .sidebar .sb-new-chat { width: 100%; border-radius: 12px; justify-content: flex-start; padding: 0 14px; gap: 12px; height: 42px; }
  .sidebar .sb-divider { width: 100%; }
  .sidebar .sb-action-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 0 10px; height: 38px; font-size: 14px; }
  .sidebar .sb-login-btn { width: 100%; border-radius: 12px; justify-content: flex-start; gap: 10px; padding: 0 14px; height: 42px; font-size: 14px; font-weight: 700; }
  .sidebar .sb-socials { width: 100%; }
  .sidebar .sb-socials a { width: 100%; justify-content: flex-start; padding: 0 10px; gap: 12px; border-radius: 10px; height: 38px; }
  .app { margin-left: 0; width: 100%; }
  .topbar { padding: 0 16px; }
  .btn-ghost:not(.btn-theme):not(.btn-back) { display: none; }
  .landing-scroll { padding: 28px 16px 40px; }
  .hero-title { font-size: clamp(22px, 6vw, 30px); }
  .cards { grid-template-columns: 1fr; }
  .messages { padding: 20px 16px 12px; }
  .chat-input-bar { padding: 10px 16px 16px; }
  .msg-bubble { max-width: 88%; }
}