/*
 * mobile.css ― スマホ簡易編集モード(テスト開発)のレイアウト。
 *   ext-mobile.js が html/body に .mdpe-mobile を付けたときだけ効く(全ルールにプレフィクス必須)。
 *   デスクトップ表示には一切影響しない。ボトムシート高さ・タブ高(56px)は ext-mobile.js の TAB_H と一致。
 * repo保管: mdpe/methoddraw-ext/mobile.css
 */

/* ── デスクトップchromeを隠す ── */
html.mdpe-mobile #pa_rail,
html.mdpe-mobile #tools_top,
html.mdpe-mobile #pa_canvasbar,
html.mdpe-mobile #pa_bottom,
html.mdpe-mobile #mdpe_sc_btn,
html.mdpe-mobile #mdpe_reframe,
html.mdpe-mobile #pa_pages,
html.mdpe-mobile #cur_context_panel,
html.mdpe-mobile #rulers,
html.mdpe-mobile #ruler_x,
html.mdpe-mobile #ruler_y { display: none !important; }

/* 上部バーをコンパクトに(タイトル非表示・横スクロール許容) */
html.mdpe-mobile #pa_topbar { overflow-x: auto; overflow-y: hidden; padding: 0 8px; }
html.mdpe-mobile #pa_topbar .pa-title { display: none; }
html.mdpe-mobile #pa_topbar .pa-center { position: static; transform: none; }
html.mdpe-mobile #pa_slot_size select { max-width: 118px; }

/* ── 作業領域: 全幅+下はタブバー分(56px)空ける ── */
html.mdpe-mobile #workarea {
  left: 0 !important;
  right: 0 !important;
  /* かんたん入力シート分を空ける(--mef-h は ext-easyform.syncReserve が設定。従来この変数は未消費で
     シートがカードを覆い、入力してもプレビューが見えなかった) */
  bottom: var(--mef-h, 56px) !important;
  top: var(--pa-topbar-h) !important;
  touch-action: none;             /* パン/ピンチは ext-mobile.js が制御 */
}
/* フライアウト開時の 332px 左シフト(print-atelier.css)を打ち消す(シートはオーバーレイ) */
html.mdpe-mobile body.pa-fly-open #workarea { left: 0 !important; }

/* ── フライアウト → ボトムシート ── */
html.mdpe-mobile #pa_flyout {
  left: 0; right: 0; top: auto; bottom: 56px;
  width: 100% !important; height: 0;
  border-right: 0; border-top: 1px solid var(--pa-border, #e6e8ec);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(20, 30, 50, .18);
  transition: height .18s ease;
  z-index: 99995;
  overflow: hidden;
}
html.mdpe-mobile #pa_flyout.open { height: 46vh; height: min(46dvh, 420px); }
html.mdpe-mobile #pa_flyout .pa-fly-body { width: auto; height: calc(100% - 48px); padding: 2px 14px 16px; }
/* キーボード表示中はシートを高めに(底上げ自体は ext-mobile.js が style.bottom で行う) */
html.mdpe-kb #pa_flyout.open { height: 38vh; }

/* ── 下タブバー ── */
html.mdpe-mobile #mdpe_tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56px;
  display: flex; align-items: stretch; z-index: 99996;
  background: var(--pa-surface, #fff);
  border-top: 1px solid var(--pa-border, #e6e8ec);
  padding-bottom: env(safe-area-inset-bottom);
}
html.mdpe-mobile .mdpe-tab {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--pa-text-sub, #79828f); font-family: inherit; cursor: pointer; padding: 4px 0;
}
html.mdpe-mobile .mdpe-tab.active { color: var(--pa-accent, #2a8a6d); }
html.mdpe-mobile .mdpe-tab-lbl { font-size: 10px; line-height: 1; white-space: nowrap; }
html.mdpe-mobile .mdpe-tab-ico { display: flex; align-items: center; justify-content: center; height: 24px; }

/* ── 選択アクションバー(タブバーの上に浮かぶピル) ── */
html.mdpe-mobile #mdpe_selbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 66px;
  display: flex; align-items: center; gap: 10px; z-index: 99997;
  background: var(--pa-surface, #fff); border: 1px solid var(--pa-border, #e6e8ec);
  border-radius: 22px; padding: 6px 14px; box-shadow: 0 6px 20px rgba(20, 30, 50, .16);
}
html.mdpe-mobile .mdpe-selcell { display: flex; flex-direction: column; align-items: center; gap: 1px; }
html.mdpe-mobile .mdpe-selcell input[type=color] {
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--pa-border, #e6e8ec);
  border-radius: 8px; background: #fff;
}
html.mdpe-mobile .mdpe-sellbl { font-size: 9.5px; color: var(--pa-text-sub, #79828f); line-height: 1; }
html.mdpe-mobile .mdpe-selbtn {
  border: 1px solid var(--pa-border, #e6e8ec); background: var(--pa-surface, #fff);
  color: var(--pa-text, #20242c); border-radius: 10px; padding: 9px 12px;
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
}
html.mdpe-mobile .mdpe-seldel { color: #b3261e; border-color: #e7b6b2; }

/* ── フライアウト開時はシートと重なるものを退避 ── */
html.mdpe-mobile body.pa-fly-open #mdpe_selbar { display: none !important; }

/* ── 通知チップ類はタブバーの上・画面中央へ ── */
html.mdpe-mobile #mdpe_dpichip { left: 50% !important; bottom: 116px !important; }
html.mdpe-mobile #mdpe_sgchip { left: 50% !important; bottom: 156px !important; }
html.mdpe-mobile .pa-flash { bottom: 120px; }

/* 図形ライブラリ等のフロート(.tools_flyout は非表示の #tools_left にアンカーしているため) */
html.mdpe-mobile .tools_flyout { left: 8px !important; top: auto !important; bottom: 130px !important; }

/* タッチターゲット底上げ(シート内のボタン) */
html.mdpe-mobile .pa-gridbtn, html.mdpe-mobile .pa-bigbtn { min-height: 44px; }

/* UI 部はダブルタップズーム等を無効化(click 遅延も除去) */
html.mdpe-mobile #mdpe_tabbar,
html.mdpe-mobile #pa_flyout,
html.mdpe-mobile #mdpe_selbar,
html.mdpe-mobile #pa_topbar { touch-action: manipulation; }


/* ── 注文ボタンとの重なり防止(undo/redoが下敷きになり誤タップで注文遷移していた) ── */
html.mdpe-mobile #mdpe-order-btn { top: 9px !important; right: 8px !important; padding: 9px 12px !important; font-size: 13px !important; }
html.mdpe-mobile #pa_topbar { padding-right: 138px !important; }
/* undo/redo は左端へ(トップバーはflex+overflow-x:auto。右側だと画面外へ押し出されタップ不能だった) */
html.mdpe-mobile #pa_undo, html.mdpe-mobile #pa_redo { order: -1; }