/* ═══════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Make body the scroll container (iOS tap-to-top) ── */
  body { overflow: visible; height: auto; }
  #_sd_main { flex-direction: column; overflow: visible; }
  #_sd_left { min-height: 0; overflow: visible; }
  #_sd_content-area { overflow: visible; }
  html { scroll-padding-top: 44px; }

  /* ── Show short brand text on mobile ── */
  .toolbar-brand-full { display: none; }
  .toolbar-brand-short { display: inline; font-size: 13px; font-weight: 600; }

  /* ── Sticky left toolbar: horizontal scroll, left-aligned ── */
  #_sd_left-toolbar { position: sticky; top: 0; z-index: 99; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #_sd_left-toolbar > * { flex-shrink: 0; }
  #_sd_toolbar-brand { margin-right: 0; }

  /* ── Stack layout instead of side-by-side ── */
  #_sd_divider { display: none; }

  /* ── Content: tighter padding for small screens ── */
  #_sd_rendered { padding: 24px 20px 40px; max-width: 100%; overflow-x: hidden; }
  #_sd_write { padding: 24px 20px 40px; max-width: 100%; }
  #_sd_raw { padding: 20px 16px; min-height: calc(100dvh - 36px); font-size: 16px; }

  /* ── File-info card: match rendered padding so values align with body ── */
  #_sd_sdocs-file-info {
    max-width: 100%;
    margin: 0;
    padding: 20px 20px 0;
  }

  /* ── Write toolbar: sticky below left-toolbar ── */
  body.write-mode #_sd_write-toolbar { position: sticky; top: 36px; z-index: 98; justify-content: flex-start; }

  /* ── Left toolbar: hide drop hint ── */
  #_sd_drop-hint { display: none; }

  /* ── Status bar: hidden on mobile ── */
  #_sd_statusbar { display: none; }

  /* ── Right panel: bottom sheet overlay ── */
  #_sd_right {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(28,25,23,.15), 0 -1px 4px rgba(28,25,23,.08);
    z-index: 100;
    transition: max-height .32s cubic-bezier(.4,0,.2,1),
                transform .32s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
    overflow: hidden;
  }
  /* Style mode: show bottom sheet */
  body.style-mode #_sd_right {
    max-height: 52px;
    opacity: 1;
  }
  /* Expanded state */
  body.mobile-sheet-open #_sd_right {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* ── Drag handle indicator on the sheet ── */
  #_sd_right::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 6px auto 0px;
    flex-shrink: 0;
  }

  /* ── Make header tappable to expand ── */
  #_sd_right-header {
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    min-height: 42px;
    align-items: baseline;
    padding: 4px 12px 0px 12px;
  }

  /* ── Hide "Save as default styles" on mobile ── */
  #_sd_right .panel-section:last-child { display: none; }

  /* ── Export panel: bottom sheet overlay ── */
  #_sd_export-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(28,25,23,.15), 0 -1px 4px rgba(28,25,23,.08);
    z-index: 100;
    transition: max-height .32s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
    overflow: hidden;
  }
  body.export-mode #_sd_export-panel {
    max-height: 52px;
    opacity: 1;
  }
  body.mobile-export-open #_sd_export-panel {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* ── Export panel drag handle ── */
  #_sd_export-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 6px auto 0px;
    flex-shrink: 0;
  }

  /* ── Export panel header: tappable ── */
  #_sd_export-panel-header {
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    min-height: 42px;
    align-items: baseline;
    padding: 4px 12px 0px 12px;
  }

  /* ── Info panel: bottom sheet overlay ── */
  #_sd_info-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(28,25,23,.15), 0 -1px 4px rgba(28,25,23,.08);
    z-index: 100;
    transition: max-height .32s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
    overflow: hidden;
  }
  body.info-mode #_sd_info-panel {
    max-height: 52px;
    opacity: 1;
  }
  body.mobile-info-open #_sd_info-panel {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Drag handle */
  #_sd_info-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 6px auto 0px;
    flex-shrink: 0;
  }

  #_sd_info-panel-header {
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    min-height: 42px;
    align-items: baseline;
    padding: 4px 12px 0px 12px;
  }
}

/* ═══════════════════════════════════════════════════
   TOOLBAR SCROLL FADE HINT (< 560px / < 342px)
   Right-edge gradient that fades out when scrolled
═══════════════════════════════════════════════════ */
@media (max-width: 560px) {
  body.write-mode #_sd_write-toolbar.has-overflow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg) 90%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
  }
  body.write-mode #_sd_write-toolbar.scrolled-end::after {
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════
   NARROW MOBILE (< 366px)
═══════════════════════════════════════════════════ */
@media (max-width: 366px) {
  .toolbar-brand-short { display: none; }
  .toolbar-brand-tiny { display: inline; font-size: 13px; font-weight: 600; }
}

/* ═══════════════════════════════════════════════════
   VERY NARROW (< 342px)
═══════════════════════════════════════════════════ */
@media (max-width: 342px) {
  #_sd_left-toolbar {
    position: sticky;
  }
  #_sd_left-toolbar.has-overflow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg) 90%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
  }
  #_sd_left-toolbar.scrolled-end::after {
    opacity: 0;
  }
}