/* ═══════════════════════════════════
   mobile.css — Responsive & touch styles
   ═══════════════════════════════════ */

/* ─── TABLET (≤ 900px) ─── */
@media (max-width: 900px) {
  :root { --sidebar-w: 240px; }
}

/* ─── MOBILE (≤ 680px) ─── */
@media (max-width: 680px) {

  /* Sidebar becomes a slide-in drawer */
  #sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 160;
    transform: translateX(-100%);
    box-shadow: 4px 0 30px rgba(0,0,0,0.5);
    width: 80vw;
    max-width: 300px;
    min-width: unset;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Light theme — lighter sidebar shadow */
  [data-theme="light"] #sidebar {
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.10);
  }

  /* Overlay */
  #sidebar-overlay.visible {
    display: block;
  }

  /* Main fills full screen */
  #main {
    width: 100vw;
  }

  /* Show hamburger button */
  #menu-btn {
    display: flex;
  }

  /* Header adjustments */
  #chat-header {
    padding: 0 10px;
    gap: 8px;
  }
  #chat-title {
    font-size: 13px;
  }

  /* Simplify version button on mobile */
  .ver-prefix { display: none; }
  #version-btn { padding: 4px 8px; gap: 4px; }

  /* Messages */
  #messages-container {
    padding: 10px 10px;
  }

  .msg-body {
    padding: 10px 12px;
    font-size: 14px;
  }

  /* Always show message actions on mobile (no hover) */
  .msg-actions { opacity: 1; }

  /* Larger touch targets for action buttons */
  .msg-action-btn {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Input area */
  #input-area {
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .input-box {
    padding: 10px;
  }
  #message-input {
    font-size: 16px; /* prevent iOS zoom */
  }
  #send-btn {
    width: 40px; height: 40px;
    font-size: 16px;
  }
  #stop-btn {
    height: 40px;
    padding: 0 14px;
  }
  .input-hint { display: none; }

  /* Modals go full-screen on mobile */
  .modal-overlay {
    align-items: flex-end;
  }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .modal-overlay.open .modal {
    transform: translateY(0);
  }

  /* Tabs scroll on mobile */
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* Profile list on mobile */
  .profile-actions { flex-direction: column; gap: 4px; }
  .profile-action-btn { width: 100%; text-align: center; justify-content: center; }
  .profile-item { flex-wrap: wrap; }

  /* Slider value input — smaller on mobile */
  .slider-value { width: 50px; }

  /* Role selector */
  .role-selector { gap: 6px; }
  .role-option label { padding: 8px 4px; font-size: 11px; }

  /* Sidebar footer buttons */
  .sidebar-footer-btn { padding: 10px 6px; font-size: 12px; }

  /* Conv delete always visible on mobile */
  .conv-delete { opacity: 1; }

  /* Version dropdown */
  #version-dropdown {
    right: auto;
    left: 0;
    min-width: 200px;
  }

  /* Modal footer buttons stack */
  .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn {
    flex: 1;
    justify-content: center;
    min-width: 80px;
  }
}

/* ─── VERY SMALL (≤ 380px) ─── */
@media (max-width: 380px) {
  #sidebar { width: 85vw; }
  .msg-action-btn span { display: none; }
  #version-btn { gap: 3px; padding: 4px 6px; }
}

/* ─── iOS safe area ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #input-area {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* ─── Touch improvements ─── */
@media (hover: none) {
  /* On touch devices, show actions by default */
  .msg-actions { opacity: 1; }
  .conv-delete { opacity: 1; }

  /* Larger tap targets */
  .msg-action-btn { min-height: 36px; }
  .btn { min-height: 40px; }
  .form-input { min-height: 44px; }
  .tab-btn { min-height: 36px; }
}