/* メイン画面の枠と左側（同期・モード切替・注文一覧・住所・追跡番号）とテンプレート選び
   ★見た目の設定は css/ の番号順に読み込む（base.html）。後の番号ほど優先される。
   ★2026-10-09 に style.css を順番を変えずに切り分けたもの（つなぐと元と同じ）。 */

/* ── メッセージ画面（2ペイン）───────────────────────────── */
.split {
  display: flex;
  gap: 14px;
  /* 上部の青いバー40px ＋ .container の上下余白12px×2 ＝ 64px。実測に合わせて隙間を残さない
     （2026-10-10 バーを52→40pxに統一したので76→64px） */
  height: calc(100vh - 64px);
  min-height: 420px;
}

.pane-left {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  overflow: hidden;
}

.pane-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  overflow: hidden;
}

.pane-left-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #eef1f4;
}

.pane-left-head .inline-form { margin-left: 0; display: flex; align-items: center; }

/* アカウント選択と同期ボタンの高さを揃える */
.pane-left-head select,
.pane-left-head .btn-secondary {
  height: 34px;
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid #c4ccd6;
  border-radius: 6px;
}
.pane-left-head select { max-width: 200px; padding: 0 8px; }
.pane-left-head .btn-secondary { padding: 0 16px; }
/* 「同期」⇄「同期中...」で文字数が変わってもボタン幅を一定に保ち、表示のガタつき（文字ズレ）を防ぐ */
#sync-btn { min-width: 92px; text-align: center; white-space: nowrap; }

.filter-tabs-small { padding: 8px 10px; margin-bottom: 0; border-bottom: 1px solid #eef1f4; }
.filter-tabs-small a { padding: 5px 12px; font-size: 12px; }

.thread-list { overflow-y: auto; flex: 1; }

/* 左ペインのモード切替（メッセージ／オーダー） */
/* 案D：トグルスイッチ風のセグメント表示 */
.mode-tabs { display: flex; gap: 4px; margin: 8px 10px 4px; padding: 3px; background: #eef1f4; border-radius: 9px; }
.mode-tabs a {
  flex: 1; text-align: center; padding: 7px 0; font-size: 13px;
  color: #5a6573; text-decoration: none; border-radius: 7px; transition: background .12s;
}
.mode-tabs a:hover { background: #e2e7ee; }
.mode-tabs a.mode-active { font-weight: bold; background: #fff; }
.mode-tabs a.mode-msg.mode-active { color: #1d4f91; box-shadow: 0 0 0 2px #1d4f91 inset, 0 1px 3px rgba(0,0,0,0.12); }
.mode-tabs a.mode-ord.mode-active { color: #9a5b00; box-shadow: 0 0 0 2px #d98a00 inset, 0 1px 3px rgba(0,0,0,0.12); }

/* 案C：現在モードを左ペイン全体の縁取り色で示す */
.pane-left.pane-orders { border-color: #f0c277; box-shadow: 0 0 0 1px #ffd9a8; }
.pane-left.pane-messages { border-color: #bcd3f3; box-shadow: 0 0 0 1px #d3e3fb; }

/* 注文リスト */
.order-list { overflow-y: auto; flex: 1; }
.order-empty { padding: 20px; color: #8a93a0; font-size: 13px; text-align: center; }
.order-row { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eef1f4; cursor: pointer; }
.order-row:hover { background: #f7fafd; }
.order-active, .order-active:hover { background: #e8f1fd; }
.order-main { min-width: 0; flex: 1; }

/* オーダー選択時の右ペイン */
.buyer-tag { background: #d98a00; color: #fff; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 10px; }
.order-info-bar { padding: 8px 14px; border-top: 1px solid #eef1f4; background: #fafbfc; }
.oi-item { font-size: 13px; font-weight: bold; color: #2b3440; }
.oi-meta { font-size: 11px; color: #8a93a0; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.order-noconv { padding: 20px; color: #8a93a0; font-size: 13px; text-align: center; }
.order-line1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-buyer { position: relative; font-weight: bold; font-size: 13px; color: #2b3440; cursor: default; }
.cc-flag { width: 20px; height: 15px; border: 1px solid #e3e7ec; border-radius: 2px; }
.order-item { font-size: 12px; color: #44505e; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-line3 { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #8a93a0; margin-top: 4px; }
.sku-link { color: #b06000; text-decoration: none; font-family: Consolas, monospace; }
.sku-link:hover { text-decoration: underline; }
.order-badges { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.obadge { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.obadge-warn { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
.obadge-info { background: #fff4e5; color: #9a5b00; border: 1px solid #ffd9a8; }
.obadge-ok { background: #e6f4ea; color: #1a7f37; border: 1px solid #b7e1c3; }
.oi-tax { font-size: 11px; color: #44505e; margin-top: 4px; user-select: text; }

/* バイヤーID にカーソルを乗せると配送先を項目付きで表示 */
.addr-tooltip {
  display: none; position: absolute; left: 0; top: 100%; z-index: 50;
  min-width: 230px; background: #fff; border: 1px solid #c4ccd6; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12); padding: 10px 12px; margin-top: 4px;
  font-weight: normal;
}
/* 共有ポップアップ（JSがホバー/クリックで body 直下に表示・位置はJSが設定） */
.addr-popup { position: fixed; z-index: 1000; }
.addr-tooltip, .addr-tooltip * { user-select: text; cursor: text; }
.addr-title { font-size: 11px; color: #8a93a0; margin-bottom: 6px; cursor: default; }
.addr-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.6; }
.addr-k { flex: 0 0 64px; color: #8a93a0; }
.addr-v { color: #2b3440; word-break: break-word; }

.thread-row {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eef1f4;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.thread-row:hover { background: #f7fafd; }
.thread-active { background: #e8f1fd; }
.thread-active:hover { background: #e8f1fd; }

.thumb-link { flex-shrink: 0; display: block; }
.thumb-link:hover .thumb { outline: 2px solid #2d6cdf; }

.thumb {
  width: 76px;
  height: 76px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  background: #eef1f4;
}

.thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #9aa4b0;
}

.thread-main { min-width: 0; flex: 1; }

.thread-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.thread-buyer { font-weight: bold; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-date { font-size: 11px; color: #8a94a0; white-space: nowrap; }

/* 一覧の右側メタ（国旗＋国名＋日時）を縦の列で揃える */
.row-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #8a94a0;
  white-space: nowrap; flex-shrink: 0; }
.row-meta .flag-img { vertical-align: 0; flex-shrink: 0; }
.cc-name { display: inline-block; width: 7em; overflow: hidden; text-overflow: ellipsis; }
.row-dt { font-variant-numeric: tabular-nums; }

.thread-item, .thread-preview {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-item { color: #44505e; margin-top: 2px; }
.thread-preview { color: #8a94a0; margin-top: 2px; }

/* 商品のバリエーション（例「SATZ: Vol.1-12 East Blue mit BOX」）。無い商品では出ない */
.variation { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px;
  background: #eef1f4; color: #6b7684; font-size: 11px; }

/* 追跡番号。長い番号なのでクリック1回で控えられるようにする（コピーすると一瞬みどりになる） */
.order-track { margin-top: 4px; font-size: 11px; color: #8a93a0; }
.oi-track { font-size: 11px; color: #44505e; margin-top: 4px; }
.track-label { margin-right: 5px; margin-left: 6px; color: #8a93a0; font-size: 11px;
  white-space: nowrap; }   /* 「追跡」の2文字が行末で割れないようにする */
.order-track .track-label, .oi-track .track-label { margin-left: 0; }
.track-no {
  font-family: Consolas, monospace; font-size: 11px; color: #1f6feb;
  cursor: pointer; word-break: break-all; border-bottom: 1px dotted #a9c3ea;
}
.track-no:hover { background: #eef4fd; }
.track-copied { background: #e6f4ea; color: #1a7f37; border-bottom-color: #b7e1c3; }
/* 追跡サイトへのリンク（🔎・注文管理ツールと同じ形＝アイコン=リンク／番号=クリックでコピー） */
.track-link { text-decoration: none; font-size: 11px; margin-right: 3px; }
.track-link:hover { background: #eef4fd; border-radius: 3px; }

/* テンプレート選択（マウスだけで完結）。
   ★入力欄まわりの行は増やさない：ボタン1つをツールバーに置き、一覧は浮かせる。
   ★件数が増えても同じ操作感：左＝分類、右＝縦一覧（スクロール）。 */
.reply-tools { position: relative; }   /* 浮かせる基準 */
/* ★position:fixed にする。右ペインは overflow:hidden なので、absolute だと
   上が切り取られる（オーダー画面のように上の余白が少ない場面で顕著）。
   位置は template_picker.js が画面内に収まるよう計算して入れる。 */
.tpl-panel { position: fixed; z-index: 200; left: 0; top: 0;
  width: min(760px, 94vw); background: #fff; border: 1px solid #d3dae2; border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18); overflow: hidden; }
.tpl-panel-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #6b7684; padding: 8px 12px; border-bottom: 1px solid #eef1f4; }
.tpl-panel-close { border: none; background: transparent; cursor: pointer;
  font-size: 13px; color: #8a93a0; padding: 0 2px; }
.tpl-panel-close:hover { color: #2c3542; }
/* ★高さは固定。分類を切り替えても窓の大きさが変わらないようにする
   （件数が少ない分類では余白、多い分類では右側だけがスクロールする） */
.tpl-panel-body { display: flex; height: min(400px, 52vh); }

/* 左：分類 */
.tpl-cats { flex: 0 0 140px; border-right: 1px solid #eef1f4; padding: 6px;
  overflow-y: auto; background: #fafbfc; }
.tpl-cat { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; text-align: left; font-size: 12px; padding: 5px 9px; margin-bottom: 1px;
  border: none; border-radius: 6px; background: transparent; cursor: pointer; color: #44505e; }
.tpl-cat:hover { background: #eef1f4; }
.tpl-cat.is-active { background: #e8f1fd; color: #1d4f91; font-weight: 600; }
.tpl-cat-suggest { color: #1a7f37; }
.tpl-cat-suggest.is-active { background: #e6f4ea; color: #1a7f37; }
.tpl-cat-n { font-size: 11px; color: #8a93a0; }
.tpl-cat-sep { height: 1px; background: #e6e9ed; margin: 5px 4px; }

/* 右：一覧（1件1行・縦スクロール。100件でも同じ操作感） */
.tpl-list { flex: 0 0 200px; overflow-y: auto; padding: 6px;
  border-right: 1px solid #eef1f4; }
.tpl-group.is-hidden { display: none; }
.tpl-row { display: block; width: 100%; text-align: left; background: transparent;
  border: none; border-radius: 6px; padding: 5px 9px; cursor: pointer; line-height: 1.5; }
.tpl-row:hover { background: #eef4fd; }
.tpl-row-title { display: block; font-size: 13px; color: #2c3542;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 右列の内容表示：縦いっぱいに使う。マウスをまっすぐ右へ動かせば届くので、
   長い文面でもスクロールしやすい（他の行を横切らない） */
.tpl-preview-pane { flex: 1; overflow-y: auto; padding: 10px 12px; background: #fafbfc;
  font-size: 12px; line-height: 1.75; color: #44505e; white-space: pre-wrap; }
.tpl-preview-hint { color: #a7b0ba; }

/* ツールバーに出す「この会話に合いそう」の1件 */
.tpl-chip { font-size: 12px; padding: 4px 11px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1px solid #d3dae2; color: #2c3542; white-space: nowrap; }
.tpl-chip:hover { background: #eef4fd; border-color: #a9c4ec; }
.tpl-chip-suggest { background: #e6f4ea; border-color: #b7e0c4; color: #1a7f37; font-weight: 600; }
.tpl-chip-suggest:hover { background: #d7ecdd; }