/* VaeltrixAI — Responsive: all @media queries (loaded last so overrides win) */

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  /* Desktop: sidebar permanen, main content mengalir di sebelahnya (bukan ketiban) */
  @media (min-width: 901px) {
    #main { margin-left: var(--sidebar-w); }
    #sidebar.hidden ~ #main { margin-left: 0; }
    #overlay { display: none !important; }
  }
  /* Tablet & mobile: sidebar jadi drawer/overlay, hampir full screen tapi sisain celah dikit
     di kanan (~1.5cm) biar keliatan masih ada chat di belakangnya & gampang di-tap buat nutup */
  @media (max-width: 900px) {
    #sidebar {
      z-index: 100;
      width: calc(100vw - 56px) !important; width: calc(100dvw - 56px) !important;
      max-width: calc(100vw - 56px) !important; min-width: 0 !important;
    }
    #main { margin-left: 0 !important; }
    .sidebar-close-btn { display: flex; width: 36px; height: 36px; border-radius: 10px; }
    .sidebar-close-btn svg { width: 16px; height: 16px; }

    /* Sidebar full screen — dulu dibikin gede banget (padding 15px/18px, font 15.5px, ikon 22px)
       biar "gampang disentuh", tapi hasilnya malah kebesaran dibanding ChatGPT/Claude yang jadi
       acuan. Sekarang lebih rapat, deket ke versi desktop, tetep nyaman disentuh (~40-44px total
       tinggi per baris — masih di atas standar touch target minimum). */
    .sidebar-header { gap: 10px; padding: 18px 16px 12px; }
    .logo { font-size: 19px; }
    .logo-sub { font-size: 10px; }
    .plan-badge { padding: 7px 12px; font-size: 12px; gap: 6px; }
    #plan-badge-icon svg { width: 12px; height: 12px; }

    .new-chat-btn { padding: 9px 14px; font-size: 13.5px; border-radius: 10px; gap: 8px; }
    .new-chat-btn svg { width: 17px; height: 17px; }

    .history-label { font-size: 10px; padding: 12px 16px 6px; }
    .history-item { padding: 9px 10px; font-size: 13px; gap: 7px; border-radius: 9px; }
    .history-item > svg { width: 14px; height: 14px; }
    .history-item .pin-btn, .history-item .rename-btn, .history-item .folder-btn { padding: 5px; opacity: 1; }
    .history-item .pin-btn svg, .history-item .rename-btn svg, .history-item .folder-btn svg { width: 13px; height: 13px; }
    .history-item .del-btn { font-size: 16px; padding: 2px 6px; opacity: 1; }
    .history-item-actions { gap: 3px; }

    .settings-toggle { padding: 13px 16px; font-size: 14.5px; border-radius: 12px; gap: 10px; }
    .settings-toggle svg { width: 20px; height: 20px; }
  }

  /* Tablet (901px - 1024px): sidebar tetap permanen tapi lebih ramping */
  @media (max-width: 1024px) and (min-width: 901px) {
    :root { --sidebar-w: 230px; }
  }

  /* Mobile & tablet kecil (<=900px): sidebar drawer, spacing dirapatkan */
  @media (max-width: 900px) {
    #topbar { padding: 12px 16px; }
    #chat { padding: 20px 16px; }
    #input-area { padding: 12px 16px 16px; }
  }

  @media (max-width: 600px) {
    .msg { max-width: 92%; }
    .welcome-title { font-size: 26px; }
    .mode-btn { font-size: 10px; padding: 4px 10px; }
    #topbar { padding: 10px 14px; gap: 8px; }
    .topbar-title { font-size: 13px; letter-spacing: 1.5px; }
    #chat { padding: 16px 14px; gap: 12px; }
    #input-area { padding: 10px 14px 14px; }
    .bubble { font-size: 15px; padding: 11px 14px; }
    .modal-sheet, .vx-sheet { padding: 22px 16px 28px; }
  }

  /* Mobile kecil / layar sempit ekstrem */
  @media (max-width: 380px) {
    .welcome-title { font-size: 22px; letter-spacing: 4px; }
    .welcome-sub { font-size: 12.5px; }
    #send-btn, .input-icon-btn { flex-shrink: 0; }
    .stat-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 600px) {
    #scroll-bottom-btn { width: 36px; height: 36px; transform: translateX(-50%) translateY(-10px); }
    #scroll-bottom-btn:active { transform: translateX(-50%) translateY(-10px) scale(0.92); }
  }