/* スマホ表示（横740px以下）・2026-10-10
   ★PC表示には一切影響させない（変更は必ずこの @media の中だけで完結させること）。注文管理ツールと同じ決まり。
   ★入力欄の文字は16px未満にしない（iPhoneが入力時に画面を勝手に拡大するため）。
   ★スマホは「一覧」と「会話（注文）」を1画面ずつ切り替える。
     会話を開いているときは messages.html が .split に split-pane-open を付ける（注文はAJAXで left_pane.js が付ける）。 */

/* PCでは出さない：スマホの会話画面の上に出す「← 一覧へ」 */
.back-to-list { display: none; }

@media (max-width: 740px) {
  /* 上のバー（スマホでは2段）は css/shared_header.css（3ツール共通）にある */

  .container, .container:has(.split) { padding: 8px; }

  /* ── 一覧と会話を1画面ずつ ──
     上のバーの高さは2段で決まるので、数字で引き算せず「バーの残りを全部使う」並べ方にする */
  body:has(.split) { display: flex; flex-direction: column; height: 100dvh; }
  .container:has(.split) { flex: 1 1 auto; min-height: 0; width: 100%; margin: 0; display: flex; flex-direction: column; }
  .split { flex: 1 1 auto; height: auto; min-height: 0; gap: 0; }
  .split .pane-left { flex: 1 1 auto; }
  .split .pane-right { display: none; }
  .split.split-pane-open .pane-left { display: none; }
  .split.split-pane-open .pane-right { display: flex; }
  .back-to-list { display: flex; align-items: center; gap: 4px; padding: 9px 12px; font-size: 14px;
    color: #2d6cdf; text-decoration: none; background: #fff; border-bottom: 1px solid #eef1f4; flex: 0 0 auto; }

  /* 一覧の上部（アカウント・同期・最終同期）は折り返して並べる */
  .pane-left-head { flex-wrap: wrap; }
  .pane-left-head form:first-child { flex: 1 1 auto; }
  .pane-left-head select { max-width: none; width: 100%; font-size: 16px; }
  .cc-name { width: auto; max-width: 6em; }

  /* ── 会話 ── */
  .buyer-bar { gap: 6px 12px; padding: 6px 10px; }
  .dd-body { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; max-width: none; }
  .dd-body li { white-space: normal; }
  .chat-bubble { max-width: 88%; padding: 10px 12px; }

  /* ── 返信欄：縦に並べる。日本語欄（書く場所）を上、英文欄（送る文）を下にして、書く順番どおりに進める ── */
  .reply-area { padding: 6px 10px; }
  .reply-grid { flex-direction: column; align-items: stretch; gap: 6px; }
  .reply-grid > div { order: -1; }
  /* 2つの欄が縦に重なるので、1つの高さは画面の22%まで（会話を潰さない。right_pane.js の replyBaseMax と揃える） */
  .reply-grid textarea { font-size: 16px; max-height: 22vh; }
  .reply-area .reply-tools { flex-wrap: wrap; }
  .reply-attach .attach-hint { display: none; }
  .reply-attach input[type="file"] { flex: 1 1 auto; }

  /* ── テンプレートのパネル：画面いっぱいに開く。分類は上に横並び、各行の下に日本語の中身を2行まで出す
     （スマホにはマウスを乗せる操作が無く、右側の内容表示が使えないため） ── */
  .tpl-panel { left: 0 !important; top: 0 !important; width: 100vw; height: 100dvh;
    border: none; border-radius: 0; box-shadow: none; }
  .tpl-panel-head { font-size: 13px; padding: 10px 12px; }
  .tpl-panel-close { font-size: 20px; padding: 0 6px; }
  .tpl-panel-body { flex-direction: column; height: calc(100dvh - 42px); }
  .tpl-cats { flex: 0 0 auto; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid #eef1f4; }
  .tpl-cat { width: auto; flex: 0 0 auto; white-space: nowrap; font-size: 13px; padding: 6px 10px; margin: 0; }
  .tpl-cat-sep { display: none; }
  .tpl-list { flex: 1 1 0; border-right: none; padding: 4px 8px; }
  .tpl-row { padding: 10px 6px; border-bottom: 1px solid #eef1f4; border-radius: 0; }
  .tpl-row-title { font-size: 15px; white-space: normal; }
  .tpl-row::after { content: attr(data-ja); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-top: 2px; font-size: 12px; line-height: 1.5; color: #6b7684; white-space: normal; }
  .tpl-preview-pane { display: none; }

  /* ── ほかの画面（テンプレート管理・休暇設定・設定）共通 ── */
  /* 入力欄はどの画面も16px（iPhoneの勝手な拡大を防ぐ） */
  input[type="text"], input[type="password"], input[type="search"], select, textarea { font-size: 16px; }
  /* 表は画面からはみ出さず、表の中だけ横にずらせる（設定のアカウント一覧・Excel取り込みの確認など） */
  .data-table { display: block; overflow-x: auto; }
  .settings-card { min-width: 0; padding: 14px; }
  .add-account-form { flex-direction: column; align-items: stretch; }

  /* テンプレート管理：上のボタンと検索は折り返す */
  .toolbar { flex-wrap: wrap; gap: 6px; }
  .toolbar .btn-link { font-size: 13px; padding: 7px 10px; }
  .filter-bar { flex-wrap: wrap; gap: 6px; }
  .filter-bar select, .filter-bar input[type="text"] { width: 100%; }

  /* テンプレート管理の一覧：表をやめて1件ずつのカードにする
     （1行目＝分類・タイトル・使用回数／2行目＝英文の先頭／3行目＝編集・削除） */
  .tpl-table { display: block; overflow: visible; }
  .tpl-table thead { display: none; }
  .tpl-table tbody { display: block; }
  .tpl-table tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 4px 8px; padding: 10px 12px; border-bottom: 1px solid #eef1f4; }
  .tpl-table td { display: block; padding: 0; border: none; }
  .tpl-table .cell-cat { grid-column: 1; grid-row: 1; }
  .tpl-table .cell-title { grid-column: 2; grid-row: 1; min-width: 0; }
  .tpl-table .col-num { grid-column: 3; grid-row: 1; font-size: 12px; color: #6b7684; text-align: right; }
  .tpl-table .col-num::before { content: "使用 "; }
  .tpl-table .cell-preview { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  .tpl-table .col-actions { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: flex-end;
    gap: 6px; width: auto; }
}