/* ============================================================
   ProPDF Editor — Mobile Responsive Styles
   Optimized for Android Moto G Power (412×892 viewport)
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --left-toolbar-w: 56px;
    --right-panel-w: 0px;
    --header-h: 52px;
    --ctx-toolbar-h: 48px;
  }

  /* HEADER */
  .editor-header { padding: 0 8px; }
  .doc-title-input { max-width: 120px; font-size: 13px; }
  .zoom-controls { display: none; }
  .btn-export { display: none; }
  .mobile-menu-btn { display: inline-flex !important; }
  .logo-small { display: none; }

  /* CONTEXT TOOLBAR */
  .context-toolbar {
    height: auto; min-height: var(--ctx-toolbar-h);
    flex-wrap: nowrap; padding: 6px 8px;
    gap: 2px;
  }
  .ctx-group { flex-shrink: 0; }
  .ctx-font-select { min-width: 100px; max-width: 120px; }

  /* LEFT TOOLBAR */
  .left-toolbar {
    width: var(--left-toolbar-w);
    min-width: var(--left-toolbar-w);
    padding: 6px 4px;
  }
  .tool-btn { width: 48px; height: 48px; }
  .tool-label { display: none; }
  .tool-btn .material-icons-round { font-size: 20px; }

  /* RIGHT PANEL — hidden on mobile, shown as bottom sheet */
  .right-panel {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    width: 100%; max-height: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: 300; border-left: none;
    border-top: 1px solid var(--border);
  }
  .right-panel.mobile-open { display: flex; }

  /* CANVAS */
  .canvas-scroll-container { padding: 16px; }

  /* PAGE NAV */
  .page-nav-overlay { bottom: 12px; padding: 4px 10px; }
  .page-nav-btn { width: 28px; height: 28px; }
  .page-indicator { font-size: 12px; }

  /* MODALS */
  .modal-panel { max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-overlay.open .modal-panel { transform: scale(1) translateY(0); }

  .new-doc-templates { grid-template-columns: repeat(2, 1fr); }
  .export-options { flex-wrap: wrap; }
  .export-option { min-width: calc(50% - 4px); }

  .threed-preview-wrap { flex-direction: column; }
  .threed-preview-wrap canvas { width: 100%; height: 180px; }

  /* SPLASH */
  .splash-content { gap: 16px; }
  .splash-title { font-size: 28px; }
  .splash-features { gap: 6px; }
  .feature-pill { font-size: 11px; padding: 5px 10px; }
  .upload-zone { padding: 28px 20px; }

  /* STATUS BAR */
  .status-bar { padding: 0 10px; gap: 10px; font-size: 10px; }
  #status-coords { display: none; }

  /* TOUCH IMPROVEMENTS */
  .tool-btn, .ctx-btn, .icon-btn, .page-nav-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  canvas { touch-action: none; }
}

/* MOBILE BOTTOM NAVIGATION */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-secondary); border-top: 1px solid var(--border);
    display: flex; justify-content: space-around; align-items: center;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 200;
  }
  .mobile-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 12px; border-radius: var(--radius-md);
    background: transparent; border: none; color: var(--text-secondary);
    cursor: pointer; transition: var(--transition);
  }
  .mobile-nav-btn.active { color: var(--accent); }
  .mobile-nav-btn .material-icons-round { font-size: 22px; }
  .mobile-nav-btn span { font-size: 9px; font-weight: 500; }
}

/* LANDSCAPE MOBILE */
@media (max-width: 768px) and (orientation: landscape) {
  :root { --header-h: 44px; }
  .canvas-scroll-container { padding: 8px; }
  .page-nav-overlay { display: none; }
}

/* TABLET */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --right-panel-w: 220px;
    --left-toolbar-w: 64px;
  }
  .tool-label { font-size: 8px; }
  .ctx-font-select { min-width: 110px; }
}

/* LARGE DESKTOP */
@media (min-width: 1400px) {
  :root { --right-panel-w: 280px; }
}

/* TOUCH DEVICE IMPROVEMENTS */
@media (hover: none) and (pointer: coarse) {
  .tool-btn { min-height: 48px; }
  .ctx-btn { min-height: 40px; min-width: 40px; }
  .icon-btn { width: 40px; height: 40px; }
  .page-nav-btn { width: 40px; height: 40px; }
  select, input[type="number"], input[type="text"] { font-size: 16px; }
}

/* SAFE AREA INSETS (notch support) */
@supports (padding: max(0px)) {
  .editor-header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .status-bar {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* MOBILE CONTEXT MENU */
.mobile-context-menu {
  position: fixed; z-index: 400;
  background: var(--bg-panel); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 8px;
  box-shadow: var(--shadow-lg); min-width: 180px;
}
.mobile-context-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition);
  font-size: 13px; color: var(--text-primary);
}
.mobile-context-item:hover { background: var(--bg-hover); }
.mobile-context-item .material-icons-round { font-size: 18px; color: var(--text-muted); }
.mobile-context-item.danger { color: var(--danger); }
.mobile-context-item.danger .material-icons-round { color: var(--danger); }

/* PINCH ZOOM INDICATOR */
.pinch-indicator {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 8px 16px; border-radius: 20px;
  font-size: 14px; font-weight: 600;
  pointer-events: none; z-index: 999;
  opacity: 0; transition: opacity 0.3s;
}
.pinch-indicator.visible { opacity: 1; }