/* ==========================================================================
   Easy3D tool — phone layout (≤640px). Loaded LAST, so it wins over
   style.css / app-organic.css. Kept in its own file so the phone fixes don't
   collide with feature branches that edit the main stylesheets.

   On desktop the page is locked to the viewport and the panel scrolls on its
   own. On a phone that left the controls in a ~200px strip under a tall stage.
   Here the page scrolls normally instead, the preview sticks to the top, and
   the download buttons stick to the bottom.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- compact topbar: brand + nav on one line, Text/QR on the next ---- */
  .topbar { padding: 8px 12px; gap: 6px 8px; flex-wrap: wrap; }
  .brand { gap: 6px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { display: none; } /* logo mark alone, so brand + nav fit one row */
  .brand-tag, .tier-badge { display: none; }
  .topbar-nav { gap: 6px; flex-wrap: nowrap; }
  .topbar-nav .btn-ghost,
  .auth-signin-btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .lang-select { font-size: 16px; } /* <16px makes iOS zoom in on focus */
  .mode-switch { flex: 1 1 100%; order: 3; }
  .mode-btn { min-height: 40px; font-size: 14px; }

  /* ---- let the page scroll instead of the panel ---- */
  body:not(.embed),
  html:has(body:not(.embed)) { height: auto; }
  body:not(.embed) .tool { display: block; }
  body:not(.embed) .panel {
    overflow: visible; border: 0; border-top: 1px solid var(--line);
    padding: 18px 16px 0;
  }

  /* ---- preview sticks to the top while you edit. Fixed svh height (not vh)
     so the mobile URL bar showing/hiding doesn't resize the canvas. ---- */
  body:not(.embed) .stage {
    position: sticky; top: 0; z-index: 5;
    height: 38svh; min-height: 220px; max-height: 340px;
    border-bottom: 1px solid var(--line);
  }
  .hud { top: 10px; font-size: 11px; padding: 4px 10px; }
  .hint { bottom: 8px; font-size: 11px; }
  .stage-corners .tl, .stage-corners .tr { top: 10px; }
  .stage-corners .bl, .stage-corners .br { bottom: 10px; }
  .stage-corners .tl, .stage-corners .bl { left: 10px; }
  .stage-corners .tr, .stage-corners .br { right: 10px; }

  .panel-head { margin-bottom: 14px; }
  .panel h1 { font-size: 21px; }

  /* ---- finger-sized controls ---- */
  .field select { font-size: 16px; }
  .segmented button,
  .shape-grid button { min-height: 42px; font-size: 13.5px; }
  .emoji-grid button { font-size: 20px; }
  input[type=range] { height: 32px; }
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -11px; }
  input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
  input.switch { width: 48px; height: 28px; }
  input.switch::after { width: 24px; height: 24px; }
  input.switch:checked::after { transform: translateX(20px); }
  .toggle-row { min-height: 40px; }

  /* ---- download buttons: always reachable, side by side at the bottom ---- */
  body:not(.embed) .download-group {
    position: sticky; bottom: 0; z-index: 4;
    flex-direction: row; gap: 8px;
    margin: 8px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper-2); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  }
  body:not(.embed) .download-group .btn-primary,
  body:not(.embed) .download-group .btn-outline {
    flex: 1 1 0; margin: 0; padding: 12px 8px; min-height: 48px;
    font-size: 13px; line-height: 1.2;
  }
  body:not(.embed) .download-title,
  body:not(.embed) .download-explain,
  body:not(.embed) .download-group .note { display: none; }
}

/* ---- the panels added after the phone layout: assistant, picture upload,
   presets and the keyring hole. Same rules as above: finger-sized, no iOS
   zoom on focus, and nothing wider than the panel. ---- */
@media (max-width: 640px) {
  .assistant-row input { font-size: 16px; }
  .upload-pick { min-height: 40px; padding: 10px 16px; font-size: 14px; }
  .assistant-go { min-height: 44px; padding: 10px 14px; }
  .assistant-chips button { min-height: 36px; padding: 6px 12px; font-size: 13px; }
  .preset-btn { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .upload-rights { min-height: 40px; }
  .upload-rights input[type="checkbox"] { width: 22px; height: 22px; }
  #upload-canvas { max-width: 100%; }
}