/* Mobile layout overrides for Markpad.
   Loaded for all viewports; rules only apply under the breakpoint.
   Keep desktop styles in index.html — do not put shared/desktop rules here. */

@media (max-width: 720px) {
  /* ---- Viewport height + scroll lock ----
     --app-height comes from window.innerHeight (mobile.js). Beat base .app { height:100vh }.
     Footer is in normal flex flow (not position:fixed) so it can't float above a bottom gap. */
  html {
    height: -webkit-fill-available;
    height: var(--app-height, 100%);
  }
  html, body {
    height: var(--app-height, 100%) !important;
    max-height: var(--app-height, 100%) !important;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
  }
  .app {
    flex-direction: column;
    height: var(--app-height, 100%) !important;
    max-height: var(--app-height, 100%) !important;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .main {
    flex: 1 1 auto;
    order: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .sidebar-left {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .notes,
  .search-results,
  #mobileFoldersList,
  .editor-wrap.preview-mode,
  .editor-wrap.edit-mode textarea.editor-area {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Top bar: » | Edit/Preview | ⋯ ---- */
  .mobile-only { display: inline-flex !important; }
  .more-wrap.mobile-only { display: block !important; }

  .editor-top {
    padding: calc(12px + env(safe-area-inset-top)) 14px 10px;
    background: var(--panel);
    /* box-shadow avoids corner hairline artifacts that border-bottom can leave on mobile */
    border-bottom: none;
    box-shadow: 0 1px 0 var(--border);
    position: relative;
    z-index: 2;
  }
  .editor-top-inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .editor-left { order: 1; gap: 8px; flex: none; }
  .editor-meta-row { order: 2; }
  .editor-right { order: 3; gap: 8px; margin-left: 0; }

  #focusBtn { display: none !important; }
  #addToFolderBtn,
  #removeFromFolderBtn,
  #downloadBtn { display: none !important; }

  /* In-bar » replaces the floating expand control while a note is open */
  .app.sidebar-collapsed.note-open #sidebarExpand { display: none; }
  /* Match New Note (.btn) vertical padding: 7px top/bottom */
  #mobileNotesBtn,
  #moreBtn,
  #editBtn,
  #previewBtn {
    padding-top: 7px;
    padding-bottom: 7px;
    min-height: 0;
    justify-content: center;
    box-sizing: border-box;
  }
  #mobileNotesBtn {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 18px;
    line-height: 1;
  }
  #moreBtn {
    padding-left: 9px;
    padding-right: 9px;
  }

  /* Dates stacked beside Edit, pushed to the right with the action buttons */
  .editor-meta-row {
    width: auto;
    max-width: none;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    margin-left: auto;
    padding-bottom: 0;
    line-height: 1.25;
  }
  .editor-meta-row .meta-created,
  .editor-meta-row .meta-edited {
    flex: none;
    width: auto;
    max-width: 100%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .editor-meta-row .meta-created { opacity: .8; }
  .editor-meta-row .meta-edited { opacity: 1; }

  .editor-wrap { padding: 0 12px; }
  /* Kill card chrome under the top bar — leftover pane borders showed as corner ticks */
  .editor-pane,
  .editor-wrap.edit-mode .editor-pane,
  .editor-wrap.preview-mode .editor-pane {
    padding: 12px 4px 8px;
    border: none !important;
    box-shadow: none !important;
    min-height: 0;
    background: transparent;
  }

  /* Preview: one scroll owner (the wrap). Edit: one scroll owner (the textarea).
     Footer is in-flow now — no large padding needed to clear a fixed bar. */
  .editor-wrap.preview-mode {
    overflow-x: hidden;
    overflow-y: auto;
    align-items: flex-start;
    padding-bottom: 12px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .editor-wrap.edit-mode {
    overflow: hidden;
    align-items: stretch;
    padding-bottom: 12px;
    overscroll-behavior: none;
  }
  .editor-wrap.preview-mode .editor-pane {
    height: auto;
    min-height: 0;
  }
  .editor-wrap.edit-mode .editor-pane {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .editor-wrap.preview-mode .preview {
    flex: none;
    overflow: visible;
  }
  .editor-wrap.edit-mode textarea.editor-area {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Left sidebar becomes an overlay drawer */
  .sidebar-left {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 48;
    width: min(84vw, 320px); min-width: 0;
    box-shadow: 6px 0 24px rgba(0,0,0,.28);
    padding-left: env(safe-area-inset-left);
  }
  .app.sidebar-collapsed .sidebar-left { margin-left: calc(-1 * (min(84vw, 320px) + env(safe-area-inset-left) + 8px)); }
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 47; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .app:not(.sidebar-collapsed) .sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }

  /* Left sidebar: Folders button above Search */
  .sidebar-left .side-foot {
    display: flex; flex-direction: column; gap: 8px;
  }
  #mobileFoldersBtn {
    display: flex !important;
    justify-content: center;
    /* Match #newBtn (.btn.primary.block): same padding / height */
    padding: 7px 11px;
    font-size: 13px;
    min-height: 0;
    box-sizing: border-box;
  }

  /* Account footer in normal document flow (not position:fixed) — closes iOS standalone gap */
  .sidebar-right {
    position: relative;
    left: auto; right: auto; bottom: auto;
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    z-index: 30;
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: none;
    height: auto;
    background: var(--white);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sidebar-right .folders-pane { display: none !important; }

  /* Footer: brand row always visible; Push/Fetch/Settings/Log out toggle open */
  .sidebar-right .brand {
    align-items: center;
    border-top: none;
    padding: 10px 12px;
  }
  .sidebar-right.footer-actions-open .brand {
    padding-bottom: 10px;
  }
  #footerToggleBtn {
    display: inline-flex !important;
    flex: none;
    width: 38px; height: 38px; min-width: 38px; min-height: 38px;
    padding: 0; padding-bottom: 2px; margin: 0;
    align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
    box-sizing: border-box;
    transform: rotate(-90deg);
  }
  .sidebar-right.footer-actions-open #footerToggleBtn {
    transform: rotate(90deg);
  }
  .sidebar-right .side-foot {
    display: none;
    padding-bottom: 14px;
  }
  .sidebar-right.footer-actions-open .side-foot {
    display: flex;
  }

  /* Mobile folders popup list spacing */
  #mobileFoldersList {
    padding: 10px 12px 12px;
    display: flex; flex-direction: column; gap: 8px;
  }
  #mobileFoldersList .folder-row { width: 100%; }
  #mobileFoldersList .empty-list { padding: 24px 12px; }

}