/* =====================================================================
   OpenFill mobile shell (phones ≤ 640px)
   Additive: the desktop engine stays intact and hidden; a mobile top-tool
   row, bottom action bar and slide-up tools sheet drive it via proxy
   buttons that forward .click() to the real controls. Nothing is moved
   except appending these containers, so all app.js wiring keeps working.
   ===================================================================== */

/* mobile-only containers are hidden on every screen by default */
#mtools, #mbottom, #msheet, #msheetBack { display: none; }

/* Let a touch that starts on a placed item DRAG it instead of scrolling the
   page (fixes "drag is confused with scrolling"). Applies on any touch device. */
.annot { touch-action: none; }

@media (max-width: 640px) {
  /* never let anything cause a sideways scroll on phones */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* ---- top bar: brand + account only; desktop tool row hidden ---- */
  #topbar { gap: .5rem; padding: .5rem .8rem; overflow: visible; flex-wrap: wrap; }
  #topbar .toolbar { display: none !important; }
  .brand { font-size: 1.2rem; }
  .brand-mark { width: 30px; height: 30px; font-size: 1rem; border-radius: 8px; }
  #acctBtn { margin-left: auto; }

  /* ---- primary tools, second row of the (sticky) top bar ---- */
  #mtools {
    display: flex; flex: 1 0 100%; order: 3;
    gap: .35rem; margin-top: .45rem; padding-top: .45rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--line);
  }
  #mtools::-webkit-scrollbar { display: none; }
  body.no-doc #mtools { display: none; }
  .mtool {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 52px; padding: .34rem .3rem; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
    font-size: .58rem; font-weight: 600;
  }
  .mtool .mic { font-size: 1.15rem; line-height: 1; }
  .mtool.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ---- hide desktop palette / per-PDF bar / side arrows / marketing ---- */
  #sidebar   { display: none !important; }
  #docbar    { display: none !important; }
  .features-main { display: none !important; }
  /* keep the multi-PDF switch arrows — needed to move between separately-added
     PDFs on phones (their show/hide is driven by updateDocNav). */
  .doc-arrow { width: 42px; height: 54px; font-size: 1.5rem; opacity: .92; top: 44%; }

  /* ---- empty state: full width, no sidebar gutter ---- */
  #empty { margin-left: 0 !important; padding: 1.4rem 1.1rem 3rem !important; width: 100%; }

  /* ---- viewer: drop the desktop sidebar gutter, clear the bottom bar ----
     `safe center` keeps a zoomed page reachable from BOTH edges (plain
     `center` clips the left/top overflow so you can't pan to it). ---- */
  #viewer {
    margin-left: 0 !important;
    padding: .6rem .3rem calc(88px + env(safe-area-inset-bottom)) !important;
    align-items: safe center; overflow: auto; overscroll-behavior: contain;
  }

  /* ---- bottom action bar (thumb zone) ---- */
  #mbottom {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    align-items: stretch; gap: .2rem;
    padding: .35rem .35rem calc(.35rem + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(31, 36, 39, .10);
  }
  body.no-doc #mbottom { display: none; }
  .mbtn {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 48px; border: none; border-radius: 10px; background: transparent; color: var(--ink);
    font-size: .58rem; font-weight: 600; cursor: pointer;
  }
  .mbtn .mic { font-size: 1.2rem; line-height: 1; }
  .mbtn:disabled { opacity: .38; }
  .mbtn.accent  { background: var(--accent); color: #fff; }
  .mbtn.accent2 .mic { color: var(--accent); font-weight: 800; }

  /* ---- compact "Done adding…" hint bar pinned at the TOP (under the top bar).
     The on-screen keyboard covers the bottom while placing text/dates, so a
     bottom bar would be hidden — keep the Done button up top where it's always
     visible. mobile.js refines the exact top to the live top-bar height.
     (Desktop anchors it with top:4.4rem; we must clear that or a fixed element
     with both top+bottom stretches into a full-screen black panel.) ---- */
  #toolhint {
    top: 100px !important; bottom: auto !important;
    left: 10px !important; right: 10px !important;
    transform: none !important; max-width: none !important;
    justify-content: space-between; gap: .6rem;
    padding: .55rem .55rem .55rem .9rem; z-index: 70;
  }
  #toolhint #toolhintText { font-size: .78rem; }
  #toolhint #toolhintDone { flex: 0 0 auto; }

  /* ---- tools sheet (slide-up) ---- */
  #msheetBack { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .38); }
  #msheetBack.open { display: block; }
  #msheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
    max-height: 80vh; overflow-y: auto;
    background: var(--card); border-radius: 18px 18px 0 0;
    padding: .3rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .22s ease;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .28);
  }
  #msheet.open { transform: translateY(0); }
  .msheet-grip { width: 42px; height: 4px; border-radius: 2px; background: var(--line); margin: .55rem auto .2rem; }
  .msheet-x {
    position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 50%; background: #fff;
    color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer;
  }
  .msheet-h {
    font-size: .68rem; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; margin: .75rem .15rem .35rem;
  }
  .msheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .mcell {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: .55rem .2rem; cursor: pointer; text-align: center; line-height: 1.15;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
    font-size: .62rem; font-weight: 600;
  }
  .mcell .mic { font-size: 1.4rem; line-height: 1; }
  .mcell:active { background: #f2f9f5; }

  /* ---- reuse the Aa popover as a bottom "Text style" sheet ---- */
  #textStylePop {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important; z-index: 72;
    flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem;
    padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; background: var(--card);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .28);
  }
  #textStylePop input, #textStylePop select { min-height: 42px; font-size: 1rem; }
  #textStylePop #colorPick { width: 54px; height: 42px; padding: 0; }
  #textStylePop #sizePick { width: 84px; }

  /* ---- modals: full-width bottom sheets with room to breathe ---- */
  .modal { align-items: flex-end; padding: 0; }
  .modal-card, .modal-card.wide, .modal-card.small {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh; border-radius: 18px 18px 0 0;
    padding: 1.15rem 1rem calc(1.15rem + env(safe-area-inset-bottom));
  }
  .modal-actions { flex-wrap: wrap; }

  /* ---- selection property bar → bottom sheet, never off-screen ---- */
  #floatbar {
    position: fixed !important; left: 8px !important; right: 8px !important;
    top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    max-width: none !important; flex-wrap: wrap; justify-content: center;
    gap: .45rem; z-index: 66;
  }
  #floatbar select, #floatbar input[type=number] { min-height: 40px; }
  #floatbar button { min-height: 40px; min-width: 40px; }
  #floatbar input[type=color] { width: 44px; height: 40px; }

  /* keep the install banner + rating card above the bottom action bar */
  #installBanner, #rateCard { bottom: calc(96px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; max-width: none; width: auto; }

  /* ---- bigger touch targets on placed items ---- */
  .annot .del  { width: 30px; height: 30px; top: -16px; right: -16px; font-size: 15px; }
  .annot .grip { width: 22px; height: 22px; right: -11px; bottom: -11px; }
  .fl-move     { width: 30px; height: 30px; left: -16px; top: -16px; }
}