/* ── Responsive ──────────────────────────────────────────────────── */
/* Mobile-first rewrite. Desktop (>900px) uses the unscoped rules
   in layout.css / detail.css / dashboard.css / overlays.css / docs.css. */

/* Prevent any horizontal overflow at the root */
html, body { overflow-x: hidden; }

/* ── Tablet (≤ 900px): tighter paddings, docs TOC flows inline ──── */
@media (max-width: 900px) {
  .nav-inner { padding: 0 0.85rem; gap: 0.35rem; }
  .nav-link.soon { display: none; }
  #dashboard { padding: 1.25rem 1rem 2rem; }

  .detail-bar { padding: 0.6rem 0.9rem; }
  .query-top { padding: 0.95rem 1.1rem; }
  .answer-scroll { padding: 1.1rem 1.2rem; }
  .sources-section { padding: 0.75rem 1.2rem; max-height: none; }

  /* Docs: TOC no longer sticky, stacks above body */
  #docs.active {
    display: block !important;
    padding: 1rem 0.9rem 3rem;
    min-height: 0;
    max-width: 100%;
  }
  .docs-toc {
    position: static;
    width: auto; max-height: none;
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r);
  }
  .docs-toc-title { margin-bottom: 0.35rem; }
  .docs-toc a { padding: 0.38rem 0.55rem; font-size: 0.85rem; }
  .docs-body { padding: 0; max-width: 100%; min-width: 0; }
  .docs-section { max-width: 100%; }
  .docs-section h2,
  .docs-section h3,
  .docs-section p,
  .docs-section li { overflow-wrap: anywhere; word-break: break-word; }
  .docs-section p code,
  .docs-section li code,
  .docs-section table code { word-break: break-word; overflow-wrap: anywhere; }
  .docs-code-block { max-width: 100%; }
  .docs-code-block pre { font-size: 0.74rem; overflow-x: auto; }
  .docs-code-block code { white-space: pre; }
  .docs-section table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ── Tablet mid (600–900px): narrower files panel ───────────────── */
@media (min-width: 600px) and (max-width: 900px) {
  .detail-body { grid-template-columns: 240px 1fr; }
}

/* ── Mobile (≤ 600px): chat-first, files as full-screen sheet ──── */
@media (max-width: 600px) {
  /* Nav: compact links, tight actions, sign-out becomes a small icon */
  .nav-inner { padding: 0 0.6rem; gap: 0.25rem; height: 56px; }
  .nav-links { gap: 0.1rem; flex: 0 1 auto; min-width: 0; }
  .nav-link { padding: 0.3rem 0.5rem; font-size: 0.78rem; }
  #nav-collections { display: none; }
  .logo-img { height: 28px; }
  .logo { margin-right: 0.25rem; }
  .nav-actions { gap: 0.3rem; }
  .nav-actions .nav-key-btn { padding: 0.35rem 0.45rem; }
  .nav-signout-btn { padding: 0.35rem 0.5rem; gap: 0; }
  .nav-signout-btn .signout-icon { display: inline-block; }
  .nav-signout-btn .signout-label { display: none; }

  /* Dashboard */
  .collection-grid { grid-template-columns: 1fr; }
  .dashboard-header { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .dashboard-header .btn-primary { width: 100%; justify-content: center; }
  .stats-strip { flex-wrap: wrap; }
  .stat-item { min-width: 45%; }
  .feature-strip { grid-template-columns: 1fr; }
  .filter-search-wrap { min-width: 0; flex: 1 1 100%; }
  .sort-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 0.2rem;
  }
  .sort-group::-webkit-scrollbar { display: none; }

  /* Detail bar: back arrow only; hide sep; share/embed icon-only */
  .detail-bar { padding: 0.5rem 0.7rem; gap: 0.35rem; }
  .detail-bar .bc-sep { display: none; }
  .back-btn-label { display: none; }
  .detail-bar .btn-ghost.btn-sm { padding: 0.35rem 0.55rem; gap: 0.2rem; }
  .btn-ghost.btn-sm .btn-label { display: none; }
  .mobile-files-btn { display: inline-flex; }
  .detail-title {
    font-size: 0.9rem;
    max-width: 42vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Detail body: single column. Files panel hidden by default. */
  #detail.active { height: auto; overflow: visible; }
  .detail-body { grid-template-columns: 1fr; height: auto; display: block; }

  .files-panel {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 451;
    background: var(--surface-s, #fff);
    border: none;
    box-shadow: none;
    overflow: hidden;
  }
  .files-panel.open {
    display: flex; flex-direction: column;
    animation: files-sheet-in 0.22s ease;
  }
  @keyframes files-sheet-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .files-panel-header { padding: 0.85rem 1rem; gap: 0.5rem; border-bottom: 1px solid var(--border); }
  .files-panel-close { display: inline-flex; margin-left: auto; align-items: center; justify-content: center; }
  .files-drawer-overlay { display: none !important; }

  /* Query panel: full width, takes over the view */
  .query-panel { width: 100%; min-height: calc(100dvh - 56px - 48px); }

  /* Model picker: horizontal scroll */
  .model-picker {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
    padding-bottom: 0.15rem;
  }
  .model-picker::-webkit-scrollbar { display: none; }
  .model-btn { flex-shrink: 0; }

  /* Question wrap: input full-width, buttons wrap below */
  .question-wrap {
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    border-radius: 14px;
    gap: 0.4rem;
  }
  .question-input {
    font-size: 0.95rem;
    flex: 1 1 100%;
    padding: 0.35rem 0;
    order: -1;
  }
  .question-wrap .btn-deep-research,
  .question-wrap .btn-multilingual,
  .question-wrap .btn-conversation {
    font-size: 0.72rem;
    padding: 0.32rem 0.55rem;
  }
  .mode-tips { flex-direction: column; }
  .mode-tip-card { flex: none; }
  .question-wrap #ask-btn { margin-left: auto; padding: 0.45rem 1rem; }

  /* Drawers become full-screen sheets so the close button is always reachable */
  .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important; right: 0 !important;
    transform: translateX(100%);
  }
  .drawer.open { transform: translateX(0); }
  .drawer-header { padding: 0.85rem 1rem; }
  .drawer-body { padding: 1rem !important; }

  /* Full-doc modal safety */
  .doc-modal-box { width: 96vw; max-height: 88vh; }
}

/* ── Small phone (≤ 500px): tighter spacing, bigger touch ───────── */
@media (max-width: 500px) {
  .answer-scroll { padding: 0.9rem 0.9rem; }
  .query-top { padding: 0.85rem 0.9rem; }
  .pagination .btn,
  .pagination button { min-height: 40px; }
  .detail-title { max-width: 36vw; font-size: 0.85rem; }
}

/* ── Tiny phone (≤ 420px): stats stack, tighter title ──────────── */
@media (max-width: 420px) {
  .stat-item { min-width: 100%; }
  .detail-title { max-width: 32vw; }
  .mobile-files-btn { padding: 0.32rem 0.45rem; }
}