/* Breakpoint terpusat. Desktop = default di layout.css/chat.css; di sini
   HANYA override untuk tablet & mobile supaya mudah diaudit satu file. */

/* ---------- Tablet (<= 1024px): sidebar tetap ada tapi lebih ramping ---------- */
@media (max-width: 1024px) {
  :root { --sidebar-width: 232px; }
  .message-row { max-width: 84%; }
}

/* ---------- Mobile & tablet potrait (<= 860px): sidebar jadi drawer ---------- */
@media (max-width: 860px) {
  .app {
    height: 100dvh;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    width: min(82vw, 300px);
    transform: translateX(-100%);
    box-shadow: var(--shadow-float);
  }

  .app[data-sidebar-open="true"] .sidebar {
    transform: translateX(0);
  }

  .app[data-sidebar-collapsed="true"] .sidebar {
    width: min(82vw, 300px);
  }
  .app[data-sidebar-collapsed="true"] .brand-text,
  .app[data-sidebar-collapsed="true"] .sidebar__collapse-btn,
  .app[data-sidebar-collapsed="true"] .sidebar__label,
  .app[data-sidebar-collapsed="true"] .sidebar__nav span,
  .app[data-sidebar-collapsed="true"] .btn-new-chat span,
  .app[data-sidebar-collapsed="true"] .theme-toggle span,
  .app[data-sidebar-collapsed="true"] .sidebar__meta {
    display: initial;
  }
  .app[data-sidebar-collapsed="true"] .sidebar__hint { display: block; }

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

  .app[data-sidebar-open="true"] .sidebar-overlay {
    display: block;
  }

  .sidebar__collapse-btn { display: none; }

  .topbar__menu-btn {
    display: inline-flex;
  }

  .topbar {
    padding: 10px 14px;
    gap: 8px;
  }

  .topbar__identity h1 { font-size: 1rem; }
  .topbar__identity p { display: none; }
  .topbar__title-full { display: none; }
  .topbar__title-short { display: inline; }
  .topbar__status span:not(.status-dot) { display: none; }
  .topbar__status { padding: 5px 7px; }

  .debug-toggle span { display: none; }
  .debug-toggle { padding: 6px 8px; }

  .prototype-notice { margin: 12px 14px 0; }

  .chat-window { padding: 16px 14px 4px; }
  .composer-area { padding: 8px 14px 14px; }
  .message-row { max-width: 92%; }

  .typing-indicator { padding: 0 14px 12px; }
}

/* ---------- Mobile kecil (<= 480px) ---------- */
@media (max-width: 480px) {
  .message-row { max-width: 96%; }
  .empty-state { padding: 20px 8px; }
  .empty-state__examples { flex-direction: column; align-items: stretch; }
  .example-chip { text-align: left; }
  .modal-card { padding: 18px 16px 16px; }
}

/* Area sentuh minimum 44px untuk semua kontrol interaktif di mobile
   (Aksesibilitas -- lihat permintaan polishing bagian V). */
@media (pointer: coarse) {
  .icon-btn,
  .action-btn,
  .composer__send-btn,
  .history-item__delete,
  .prototype-notice__close {
    min-width: 44px;
    min-height: 44px;
  }
  .sidebar__nav button,
  .sidebar__nav .quick-action-btn {
    min-height: 44px;
  }
}