/**
 * mobile.css
 * Capacitor / Android-specific tweaks layered on top of the website's CSS.
 * Loaded LAST so these rules win over styles-core.css and styles-components.css.
 */

/* Safe-area padding for notches / status bar on Android (display-cutout="shortEdges") */
header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
  padding-left: calc(env(safe-area-inset-left, 0px) + 1rem);
  padding-right: calc(env(safe-area-inset-right, 0px) + 1rem);
}
.app-footer {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
}

/* ============================================================
   HORIZONTAL OVERFLOW FIX
   ============================================================
   Multiple panels (file info bar, reading stats grid, export
   buttons row, upload format badges, mobile toggle bar) were
   growing wider than the viewport on narrow phones because
   their flex/grid children weren't enforcing min-width: 0.
   Long content (e.g. a 60-character filename) was pushing the
   container past the right edge, which then got clipped by
   body { overflow-x: hidden } so the user couldn't even scroll
   to see what was cut off.

   Applied as overrides here in mobile.css (loads last) so we
   don't have to touch the upstream website styles. */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
/* IMPORTANT: do NOT set overflow-x: hidden on `main` or `.output-panel`.
   The CSS spec says setting one overflow axis to anything other than visible
   flips the OTHER axis from visible to auto, creating a nested scroll
   container. */
main, .input-panel, .output-panel {
  max-width: 100vw;
  min-width: 0;
}

/* ============================================================
   CRITICAL SCROLL FIX (v1.0.7)
   ============================================================
   v1.0.5/1.0.6 attempts only partially fixed the SHIFT-MY-TEXT
   scroll freeze. User reports "can scroll a little but gets
   stuck". That's the classic symptom of SCROLL CHAIN BLOCKING.

   Root cause is a combination of FOUR things, all of which
   are now neutralised here:

   1. `overscroll-behavior-y: contain` on body (in our own
      mobile.css further down) BLOCKS scroll chaining. When
      any inner element with overflow hits its scroll limit,
      the body never receives the remaining scroll input.

   2. `.output-panel` has `overflow-y: auto` from base CSS.
      Even with overflow: visible !important from 1.0.6, the
      WebView may have already established it as a scroll
      container during the initial paint.

   3. `position: sticky` on `.tts-panel` (in styles-components.css)
      creates ambiguity about which element is the scroll
      container — body vs. main vs. the grid cell holding it.

   4. `#outputContent` is `contenteditable="true"`. On Android
      WebView, touching a contenteditable area defaults to
      cursor placement / text selection — touch-and-drag is
      consumed as a selection gesture, not a scroll. The fix
      is `touch-action: pan-y` which forces the browser to
      treat vertical drags as scroll first, selection second.

   Applied at the TOP of mobile.css so these rules win against
   anything else and run BEFORE downstream rules might re-trip
   the same issue. */

/* 1. Allow scroll chaining — never block scroll input from
      reaching the body. */
html, body {
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: auto !important;
}

/* 2. .output-panel must NOT be a scroll container. */
.output-panel {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: auto !important;
}

/* 3. Disable sticky positioning on the TTS panel — it sometimes
      creates an extra scroll container under Android WebView.
      Plain position: relative is enough. (mobile-nav.css re-fixes
      #ttsPanel with a higher-specificity ID selector when a bottom
      sheet is open — no conflict.) */
.tts-panel {
  position: relative !important;
  top: auto !important;
}

/* 4. Force the contenteditable output area to prefer vertical
      panning over text selection on touch-and-drag.
      `pan-y` = "I will handle horizontal gestures (selection),
      the browser handles vertical (scroll)". */
#outputContent {
  touch-action: pan-y !important;
}
/* Same for the docx-preview pages inside it, which can capture
   touch on their own once docx-preview renders them. */
#outputContent .docx-preview-wrapper-wrapper,
#outputContent section.docx-preview-wrapper,
#outputContent section.docx-preview-wrapper * {
  touch-action: pan-y !important;
}

/* 5. Belt-and-braces: explicitly mark body as the scroll
      container so the WebView never picks an inner element. */
body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Honour curved-edge / display-cutout side insets for the main content
   the same way the header already does. Otherwise content can sit under
   the curved bezel on some phones. */
main {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Force every direct child of a flex container to be allowed to shrink. */
.input-panel > *,
.output-panel > *,
.file-info-bar > *,
.action-stats-row > *,
.output-actions > *,
.output-toggles-bar > * {
  min-width: 0;
}

/* File info bar — long filenames must truncate with an ellipsis, not push
   the X Remove button off-screen. The base CSS already sets text-overflow,
   but it wasn't winning against the flex layout's natural sizing. */
.file-info-bar {
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.file-info-bar .file-info-details {
  flex: 1 1 0 !important;   /* basis 0 so it doesn't claim its content width */
  min-width: 0 !important;
  overflow: hidden !important;
}
.file-info-bar #fileName {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.file-info-bar .file-remove {
  flex-shrink: 0;
}

/* Format badges (TXT / RTF / DOCX / …): allow them to wrap to a 2nd line
   rather than clip off-screen. flex-wrap is already wrap upstream; we just
   add justify-content so wrapped rows don't look ragged. */
.upload-formats {
  flex-wrap: wrap !important;
  justify-content: center !important;
  max-width: 100% !important;
}

/* Reading stats grid: on viewports <= 380px the labels CHARACTERS and
   BIONIC READING were truncating to "CHARACTER" / "BIONIC READI". Pull
   the value/label font down a notch and let labels wrap inside the cell. */
@media (max-width: 420px) {
  .reading-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
  }
  .stat-item { min-width: 0; padding: 0.25rem !important; }
  .stat-value { font-size: 0.9rem !important; }
  .stat-label { font-size: 0.55rem !important; white-space: normal !important; line-height: 1.2; }
}

/* Output actions row (Clear / Copy / HTML / DOCX / EPUB / PDF): wrap to a
   second row rather than clip. */
.output-actions {
  flex-wrap: wrap !important;
  max-width: 100% !important;
}
.output-actions .export-btn { flex-shrink: 0; }

/* Output toggles bar (Compare / Dark / Dyslexic / Bionic) — same. */
.output-toggles-bar {
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

/* App-like touch behaviour. Note we used to set overscroll-behavior-y: contain
   here to prevent rubber-banding, but that turned out to BLOCK scroll chaining
   from inner elements to the body, freezing the page after SHIFT MY TEXT.
   Removed in v1.0.7 — the !important auto rule at the top of this file now
   takes precedence regardless of the order rules cascade in. */
html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Prevent accidental text selection on UI chrome (buttons, headers, badges). Editable text areas still work. */
header, .toast, .usage-badge, .help-dropdown-menu, .dropdown-trigger,
.action-btn, .export-btn, .small-text-btn, .upgrade-btn, .inline-upgrade-btn,
.mnav-tab, .recent-file-item, .format-badge {
  -webkit-user-select: none;
  user-select: none;
}

/* The output editor and the input textarea must stay selectable. */
#outputContent, #inputText, .modal-content input, .modal-content textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Hide the “Home › Web App” breadcrumb if it slips back in via cached HTML. */
.app-breadcrumb { display: none !important; }

/* Bigger tap targets on mobile-only widgets the website hides on desktop. */
@media (max-width: 768px) {
  .action-btn, .upgrade-btn, .inline-upgrade-btn {
    min-height: 48px;
    font-size: 1rem;
  }
  .export-btn, .small-text-btn {
    min-height: 40px;
  }
  /* iOS-style 16px minimum to stop Android Chrome from zooming on focus. */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* ------------------------------------------------------------------
     Preview canvas sizing.
     The base stylesheet sets .preview-wrapper { max-height: calc(100vh - 280px); }
     which clips the canvas on mobile. We just kill that ceiling — natural
     content height takes over, and the BODY scrolls.

     Earlier versions of this rule set min-height: calc(100dvh - 90px),
     which combined with .output-panel's overflow-y: auto created a fixed
     viewport-height scroll trap. v1.0.6: removed the min-height forcing,
     so the preview is exactly as tall as its content needs to be, no more.
     ------------------------------------------------------------------ */
  .preview-wrapper {
    max-height: none !important;
    /* Reasonable minimum so a short document doesn't look like a tiny strip */
    min-height: 50vh;
  }
  .preview-container {
    min-height: auto !important;
  }
  #outputContent {
    /* Small reading gutter so text doesn't run flush to the screen edges.
       The canvas itself stays edge-to-edge — only the text content is padded. */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
    min-height: auto !important;
  }

  /* ------------------------------------------------------------------
     Customize Sizes & Colours panel — bump label legibility on mobile.
     Base style is font-size: 0.6rem, color: #a3a3a3 — tiny and dim.
     ------------------------------------------------------------------ */
  .customize-content .control-label {
    font-size: 0.95rem !important;
    color: #f5f5f5 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .customize-content .section-label {
    font-size: 0.85rem !important;
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
  }
  /* Section-label dots stay coloured but slightly larger for visibility. */
  .customize-content .section-label .dot {
    width: 9px !important;
    height: 9px !important;
  }
  /* Inputs inside the customize panel — keep them readable too. */
  .customize-content .size-input,
  .customize-content .color-hex {
    color: #f5f5f5 !important;
  }
}

/* GENERATED-PHONE-MIRROR-START by scripts/mirror-phone-css.cjs from the block above.
   Edit THAT block and rerun the script; do not edit these lines. */
:where(html.ts-phone-layout) .action-btn, :where(html.ts-phone-layout) .upgrade-btn, :where(html.ts-phone-layout) .inline-upgrade-btn { min-height: 48px; font-size: 1rem; }
:where(html.ts-phone-layout) .export-btn, :where(html.ts-phone-layout) .small-text-btn { min-height: 40px; }
:where(html.ts-phone-layout) input, :where(html.ts-phone-layout) textarea, :where(html.ts-phone-layout) select { font-size: 16px !important; }
:where(html.ts-phone-layout) .preview-wrapper { max-height: none !important; min-height: 50vh; }
:where(html.ts-phone-layout) .preview-container { min-height: auto !important; }
:where(html.ts-phone-layout) #outputContent { padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; min-height: auto !important; }
:where(html.ts-phone-layout) .customize-content .control-label { font-size: 0.95rem !important; color: #f5f5f5 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
:where(html.ts-phone-layout) .customize-content .section-label { font-size: 0.85rem !important; color: #cbd5e1 !important; font-weight: 700 !important; letter-spacing: 0.08em !important; }
:where(html.ts-phone-layout) .customize-content .section-label .dot { width: 9px !important; height: 9px !important; }
:where(html.ts-phone-layout) .customize-content .size-input, :where(html.ts-phone-layout) .customize-content .color-hex { color: #f5f5f5 !important; }
/* GENERATED-PHONE-MIRROR-END */

/* ------------------------------------------------------------------
   Info button next to the Dyslexic toggle title — opens a tooltip modal
   explaining the on-screen-only / DOCX-template caveat.
   ------------------------------------------------------------------ */
.dyslexic-info-btn {
  background: transparent;
  border: 1px solid rgba(244, 114, 182, 0.4);
  color: #f472b6;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 0.35rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.dyslexic-info-btn:active {
  background: rgba(244, 114, 182, 0.15);
}

/* ------------------------------------------------------------------
   Dyslexic-mode font override.
   Lives outside the media query so it works on tablets too.
   The selectors need to win against docx-preview's inline font-family
   styles on every element it renders — hence the !important and the
   universal-child selector.
   ------------------------------------------------------------------ */
#outputContent.dyslexic-mode-on,
#outputContent.dyslexic-mode-on *,
#outputContent.dyslexic-mode-on .docx-preview-wrapper-wrapper *,
#outputContent.dyslexic-mode-on section.docx-preview-wrapper * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}