/* Mobile breakpoint (<=760px), per design_handoff_notes_vps/README.md section 8.

   Approach (see ARCH.md "Frontend layout" + this phase's brief): reuse the
   existing desktop classes wherever possible and layer @media(max-width:760px)
   rules on top of them. A handful of elements only exist for mobile chrome
   (bottom tab bar, notes FAB, notes mobile header/toolbar, settings trash
   link, notes search icon) — those are always present
   in the DOM (cheapest way to avoid extra render branching) but hidden by
   default via plain (non-media) rules right below, then shown inside the
   media query. That keeps every other rule in this file scoped to the
   breakpoint, and guarantees zero effect on desktop even if a selector here
   has a bug.

   Mobile screen-picker decisions (only 4 of 6 screens fit the bottom tab bar):
     - ค้นหา (search): a "⌕" icon button in the notes screen's mobile title row.
     - ถังขยะ (trash): a "ถังขยะ" row at the top of the settings screen.
   Both are documented at their call sites in notes.js / settings.js. */

#mobile-tabbar,
.notes-mobile-title-row,
.notes-fab,
.editor-head-mobile,
.editor-mobile-toolbar,
.mobile-trash-link {
  display: none;
}

@media (max-width: 760px) {

  /* ─── APP SHELL: sidebar -> bottom tab bar ────────────────────────────── */

  #sidebar { display: none; }
  #app { grid-template-columns: 1fr; }
  #main-content { display: block; }

  #mobile-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--surface-sidebar);
    border-top: 1px solid var(--border-main);
    padding: var(--sp-12) 0 var(--sp-18);
  }
  #mobile-tabbar.editor-hidden { display: none; }
  .tab-item {
    flex: 1; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; cursor: pointer;
  }
  .tab-glyph { font-family: var(--font-mono); font-size: 16px; color: var(--text-dim-2); }
  .tab-label { font-size: var(--fs-11-5); color: var(--text-dim-2); }
  .tab-item.selected .tab-glyph { color: var(--accent); }
  .tab-item.selected .tab-label { color: var(--text-primary); font-weight: 600; }

  /* Baseline touch-target bump (guardrail: every tappable element on mobile
     >= 44px). Chips/buttons keep their design padding but gain a min-height. */
  .btn-primary, .btn-ghost, .modal-btn,
  .owner-chip, .file-owner-chip, .tag-chip, .editor-tag-chip, .editor-tag-add {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .mode-switch-btn { min-height: 40px; }

  /* ─── PIN SCREEN ───────────────────────────────────────────────────────── */

  .pin-dots-row { max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center; row-gap: var(--sp-10); }
  .pin-dot { width: 34px; height: 42px; }

  /* ─── NOTES SCREEN: list <-> full-screen editor ───────────────────────── */

  .notes-screen { display: block; position: relative; height: 100%; }
  .notes-list-col, .notes-editor-col { width: 100%; height: 100%; }
  .notes-list-col { display: none; }
  .notes-editor-col { display: none; }
  .notes-screen.mobile-list .notes-list-col { display: flex; }
  .notes-screen.mobile-editor .notes-editor-col { display: flex; }

  .notes-mobile-title-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-14) var(--sp-14) 0;
  }
  .notes-mobile-title { font-size: var(--fs-22); font-weight: 700; }
  .mobile-search-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-button);
    background: transparent; border: 1px solid var(--border-button);
    color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-16-5);
  }

  .notes-list { padding-bottom: 80px; } /* clears the fixed tab bar + FAB */

  .notes-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 18px; bottom: 78px; z-index: 60;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent); color: var(--accent-text-on); border: none;
    font-size: 26px; line-height: 1; box-shadow: var(--shadow-card);
  }

  /* full-screen editor: mobile head replaces the desktop breadcrumb/actions row */
  .editor-head { display: none; }
  .editor-head-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10);
    padding: 0 var(--sp-14); min-height: 52px; flex-shrink: 0;
    border-bottom: 1px solid var(--border-row);
  }
  .editor-mobile-back, .editor-mobile-done {
    background: transparent; border: none; min-height: 44px; padding: 0 var(--sp-6);
    font-size: var(--fs-14-5); color: var(--text-secondary);
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .editor-mobile-done { color: var(--accent); font-weight: 600; flex-shrink: 0; }

  .editor-toolbar { display: none; } /* replaced by .editor-mobile-toolbar below */

  .editor-mobile-toolbar {
    display: flex; align-items: center; gap: var(--sp-8);
    padding: var(--sp-8) var(--sp-12);
    border-top: 1px solid var(--border-row);
    background: var(--surface-frame); flex-shrink: 0;
    overflow-x: auto;
  }
  .editor-mobile-toolbar .tb-btn {
    flex-shrink: 0; min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-16-5);
  }
  .editor-mobile-toolbar .btn-ghost { flex-shrink: 0; white-space: nowrap; }

  /* ─── FILES SCREEN: single-column list, 30px thumbs, ⋮ menu ─────────────── */

  .files-title { display: none; } /* redundant with the tab bar label at this width */
  .files-header { padding: var(--sp-14); }
  .files-search { min-width: 0; }

  .files-grid {
    display: flex; flex-direction: column; gap: var(--sp-8);
    padding: var(--sp-14); padding-bottom: 80px;
  }
  .file-card {
    flex-direction: row; align-items: center; gap: var(--sp-10);
    padding: var(--sp-10) var(--sp-12); min-height: 56px;
  }
  .file-check { position: static; flex-shrink: 0; width: 20px; height: 20px; visibility: visible; }
  .file-thumb { width: 30px; height: 30px; border-radius: 6px; font-size: 9px; flex-shrink: 0; }
  .file-thumb.folder-thumb { font-size: var(--fs-14); }
  .file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

  /* app.css's .files-grid.list-view rules share this same specificity
     (0,0,3,0 via ".files-grid.list-view .file-check" etc.) so they win over
     the plain .file-check/.file-info rules above regardless of load order —
     re-assert mobile behavior explicitly for list view too: checkboxes must
     stay tappable (mobile has no click-to-select, only checkbox-to-select)
     and name/meta must stay stacked, not crammed onto one row. */
  .files-grid.list-view .file-check { visibility: visible; }
  .files-grid.list-view .file-info { flex-direction: column; }

  /* No hover on touch — ⋮ must always be visible (desktop shows it on
     .file-card:hover only; mobile has no hover). */
  .file-menu-btn { visibility: visible; }

  .file-dropzone { grid-column: auto; min-height: 76px; }

  /* Desktop hides this by translating it 100px below its bottom:22px resting
     spot — at mobile's shorter viewport + the bottom:78px offset (clearing
     the fixed tab bar) that 100px isn't enough and it peeks back into view.
     Push it further off-screen so the hidden state is actually hidden. */
  .file-selbar { bottom: 78px; transform: translateX(-50%) translateY(220px); }
  .file-selbar.show { transform: translateX(-50%) translateY(0); }

  /* ─── AI ACTIVITY SCREEN: condensed, single column, no side panel ───────── */

  .ai-screen { flex-direction: column; }
  .ai-side-col { display: none; } /* token panel + rules duplicated on Settings */
  .ai-main-col { padding: var(--sp-14); padding-bottom: 80px; gap: var(--sp-16); }
  .queue-card { padding: var(--sp-12); }
  .queue-card-desc { white-space: normal; }
  .queue-card-actions { row-gap: var(--sp-8); }

  /* ─── SEARCH SCREEN: stacked results ─────────────────────────────────── */

  .search-screen { padding: var(--sp-14); padding-bottom: 80px; }
  .search-results { grid-template-columns: 1fr; }

  /* ─── TRASH SCREEN ────────────────────────────────────────────────────── */

  .trash-screen { padding: var(--sp-14); padding-bottom: 80px; }
  .trash-row-actions { flex-wrap: wrap; }

  /* ─── SETTINGS SCREEN: single column + mobile trash link ────────────────── */

  /* Desktop has two independently-scrolling flex siblings (row layout, each
     fills the full height). Stacked at mobile that would fight over a fixed
     container height (body/#main-content are overflow:hidden — see app.css),
     so instead make .settings-screen itself the one scroll container and let
     both children size to their natural content height within it. */
  .settings-screen { flex-direction: column; overflow-y: auto; height: 100%; }
  .settings-main-col {
    flex: none; overflow-y: visible; height: auto;
    padding: var(--sp-14);
  }
  .settings-side-col {
    flex: none; overflow-y: visible; height: auto;
    width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--border-main);
    padding: var(--sp-14); padding-bottom: 80px;
  }
  .kv-val { max-width: 60vw; }

  .mobile-trash-link {
    display: flex; align-items: center; gap: var(--sp-8);
    min-height: 44px; padding: 0 var(--sp-5);
    background: transparent; border: none; text-align: left;
    font-size: var(--fs-14-5); color: var(--text-primary);
  }

  /* Row-level tap target for switches (README's 34x19px pill stays as
     designed; the surrounding row is what's actually >=44px — see the
     comment above ruleRowHtml/switchRowHtml in ai.js/settings.js). */
  .rule-row, .automation-row { min-height: 44px; }

  /* ─── SHARED overlays: keep comfortably within the 390px frame ──────────── */

  .modal-box, .preview-card, .move-card { width: calc(100vw - 32px); }
  .preview-close { width: 44px; height: 44px; }
  .move-node { min-height: 44px; display: flex; align-items: center; }
  .attachment-remove { min-width: 44px; min-height: 44px; }
}