/* 一覧のバッジ・バイヤー情報・言語切替・会話・入力欄・画像添付
   ★見た目の設定は css/ の番号順に読み込む（base.html）。後の番号ほど優先される。
   ★2026-10-09 に style.css を順番を変えずに切り分けたもの（つなぐと元と同じ）。 */

.thread-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.thread-badges .badge { font-size: 10px; padding: 1px 7px; }
/* メッセージ一覧のASINリンク（注文一覧と同じ見た目・少しだけ小さく） */
.thread-badges .sku-link { font-size: 11px; }

.badge-buyer { background: #e6f4ea; color: #1a7f37; }
.badge-repeater { background: #e8f1fd; color: #1d4f91; }

/* バイヤー情報バー */
.buyer-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid #eef1f4;
  background: #f7f9fb;
  flex-wrap: wrap;
}

.buyer-name { font-weight: bold; font-size: 14px; }

/* 国情報: 確実（国旗画像＋国名）と推定（控えめな文字のみ）を見た目で区別 */
.flag-img {
  width: 18px;
  height: 14px;
  vertical-align: -2px;
  border: 1px solid #dde3ea;
  border-radius: 2px;
}

.buyer-country { font-size: 13px; }
.buyer-country-est { font-size: 11px; color: #8a94a0; }

.buyer-dd { position: relative; font-size: 12px; }
.buyer-dd summary { cursor: pointer; color: #2d6cdf; user-select: none; }

/* 購入履歴・他の会話 共通のポップアップ:「日時＋商品名」を1リスト1行で表示 */
.dd-body {
  position: absolute;
  z-index: 10;
  top: 22px;
  left: 0;
  min-width: 480px;
  max-width: 820px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #c4ccd6;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 10px 14px;
}

.dd-body ul { margin: 0; padding-left: 0; list-style: none; }
.dd-body li { margin: 5px 0; white-space: nowrap; }
.dd-body li a { color: #2d6cdf; text-decoration: none; }
.dd-body li a:hover { text-decoration: underline; }
.dd-date { color: #8a94a0; font-size: 11px; margin-right: 6px; }

/* 日本語／原文 切り替え */
.lang-toggle { margin-left: auto; display: flex; gap: 0; }

.lang-btn {
  padding: 5px 14px;
  font-size: 12px;
  border: 1px solid #c4ccd6;
  background: #fff;
  cursor: pointer;
}

.lang-btn:first-child { border-radius: 6px 0 0 6px; }
.lang-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.lang-btn.lang-active { background: #2d6cdf; border-color: #2d6cdf; color: #fff; font-weight: bold; }

/* チャットスクロール領域 */
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px;    /* 外周の余白を詰めて、同じ範囲で読める通数を増やす */
}

/* 表示モード: 日本語（既定）= 訳のみ（原文の言語に関わらず併記しない） */
.chat-scroll[data-mode="ja"] .chat-original { display: none; }

/* 表示モード: 原文 = 原文のみ（言語はそのまま） */
.chat-scroll[data-mode="en"] .chat-ja { display: none; }

.chat-original {
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.purchase-marker {
  text-align: center;
  font-size: 12px;
  color: #9a6700;
  background: #fff8e6;
  border: 1px solid #f0dca8;
  border-radius: 14px;
  padding: 4px 12px;
  margin: 4px auto;
  width: fit-content;
  max-width: 90%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* 会話と入力欄の境目（掴んで上下に動かせる。高さは localStorage に記憶される） */
.pane-splitter {
  flex: 0 0 9px;
  height: 9px;
  cursor: row-resize;
  background: #f2f5f8;
  border-top: 1px solid #e6ebf1;
  border-bottom: 1px solid #e6ebf1;
  position: relative;
  touch-action: none;   /* 触って動かすとき、画面ごとスクロールしてしまうのを防ぐ */
}
.pane-splitter::before {          /* 掴めることが分かるように、中央に取っ手を描く */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 3px;
  margin: -1px 0 0 -22px;
  background: #b9c2cc;
  border-radius: 2px;
}
.pane-splitter:hover::before,
.pane-splitter.dragging::before { background: #2d6cdf; }
body.splitting { cursor: row-resize; user-select: none; }

/* 返信エリア（下部固定） */
.reply-area {
  border-top: 1px solid #eef1f4;
  padding: 6px 14px;
  background: #fbfcfd;
}

/* テンプレート選択は日本語欄の下の行に置く（選ぶと日本語欄に入るため、そばにある方が筋が通る）。
   専用の1行を廃止したぶん（約50px）が会話の表示に回る。 */
/* ※このファイルの後方（880行付近）にも別画面用の .reply-tools があり、そちらは flex-wrap:wrap。
   後から書かれているぶん、ここで打ち消さないと折り返して「← 英訳」が下の行に落ちる。 */
.reply-area .reply-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 0; flex-wrap: nowrap; }
.reply-area .reply-tools select {
  /* 幅が足りないときは選択欄だけが縮む（ボタンは縮ませない）。
     基準幅を 0 にしないと、選択肢の文字数ぶんの幅が残って横にはみ出す。 */
  flex: 1 1 0%; width: 0; min-width: 0;
  margin-top: 0;                  /* 別画面用の .reply-tools select の margin-top を打ち消す */
  padding: 6px 8px; font-size: 12px; border: 1px solid #c4ccd6; border-radius: 6px;
}
.reply-area .reply-tools .btn-secondary { flex: 0 0 auto; white-space: nowrap; align-self: center; }

/* 英訳の2つのボタン（「← 機械英訳」「AI英訳 ↗」）を1つの枠にまとめ、テンプレートと見分けがつくようにする（2026-10-10）。
   AI は薄い紫で区別する。矢印は行き先：「←」＝左の英文欄にすぐ入る／「↗」＝Claude のタブが開く */
.xl-group { display: inline-flex; flex: 0 0 auto; align-items: stretch; align-self: center;
  border: 1px solid #c4ccd6; border-radius: 6px; background: #fff; overflow: hidden; }
.xl-btn { padding: 4px 10px; font-size: 12px; color: inherit; background: #fff; border: none;
  cursor: pointer; white-space: nowrap; }
.xl-btn + .xl-btn { border-left: 1px solid #c4ccd6; }
.xl-btn:hover { background: #f3f6fa; }
.xl-btn:disabled { color: #9aa4b0; cursor: not-allowed; background: #eef1f4; }
.xl-ai { color: #6a3fb5; background: #f8f5fd; }
.xl-ai:hover { background: #efe8fb; }

/* 受信の吹き出しの「AIで訳す ↗」（名前・日時の行に小さく置く＝行は増やさない） */
.ai-read { margin-left: 8px; padding: 0 7px; font-size: 11px; line-height: 17px; color: #6a3fb5;
  background: #f8f5fd; border: 1px solid #ddd0f3; border-radius: 9px; cursor: pointer; vertical-align: 1px; }
.ai-read:hover { background: #efe8fb; }
.ai-read-done { color: #1a7f37; background: #e6f4ea; border-color: #b7e1c3; }

/* お知らせ（「翻訳中...」等）は専用の行を持たず、日本語欄の右下に薄く重ねて出す */
.reply-ja-wrap { position: relative; }
.reply-ja-wrap .notice {
  position: absolute;
  right: 8px;
  bottom: 6px;
  max-width: calc(100% - 16px);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  pointer-events: none;          /* 入力の邪魔をしない */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reply-ja-wrap .notice:empty { display: none; }

/* 左右の列は上端で揃える（中身の量が違っても入力欄の位置がずれないように） */
.reply-grid { display: flex; gap: 10px; align-items: flex-start; }
.reply-grid > div, .reply-grid > form { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.reply-grid textarea {
  width: 100%;
  /* 空のときは小さく、書くほど自動で伸びる（会話の表示領域を広く保つため）。
     実際に伸ばすのは right_pane.js の autoGrowReplyPair。ここでは下限と上限だけ決める。
     ※height を消すと HTML の rows="6" が効いてしまうので min-height で明示的に抑える。
     ※左右の高さは right_pane.js が揃える（従来の height:150px と同じ見た目を保つ）。 */
  min-height: 64px;
  max-height: 40vh;     /* 長文でも会話を潰さない。超えたら入力欄の中でスクロール */
  overflow-y: auto;
  padding: 8px;
  font-size: 13px;
  border: 1px solid #c4ccd6;
  border-radius: 6px;
  font-family: inherit;
  /* 高さの調整は境目（.pane-splitter）に一本化するため、右下の「掴んで伸ばす」印は出さない。
     両方あると、手で伸ばした直後に自動伸縮が上書きして動きが分かりにくくなる。 */
  resize: none;
}

.reply-grid button { align-self: flex-end; }

/* 添付画像（返信フォーム左側） */
/* 添付・説明・送信ボタンを必ず1行に収める。
   折り返すとボタンが下にずれて崩れるため wrap は使わず、
   幅が足りないときは説明文だけを「…」で詰める（全文はマウスを乗せると出る）。 */
.reply-attach { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.reply-attach input[type="file"] { font-size: 12px; flex: 0 1 auto; min-width: 0; }
.reply-attach .attach-hint {
  font-size: 11px;
  color: #6b7785;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 送信ボタンは幅いっぱいにしない（.btn-primary の width:100% を打ち消す）。
   添付の行に同居させて、ボタン専用の1行ぶん（約40px）を会話の表示に回す。 */
.reply-grid .btn-send { width: auto; margin-top: 0; padding: 7px 18px; }
.reply-attach .btn-send { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }  /* 縮ませず右端に寄せる */

.pane-empty { border: none; margin: auto; }
.empty-small { border: none; padding: 30px 10px; }

/* 送信前の確認の窓（2026-10-12・right_pane.js の openSendConfirm）。英文は出さず、送る英文の日本語訳を全文出す */
.sc-bg { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
.sc-box { width: 560px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); overflow: hidden; }
.sc-head { padding: 14px 18px; font-size: 16px; font-weight: 700; color: #2b2b2b; border-bottom: 1px solid #eef1f4; }
.sc-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 12px 18px 4px; font-size: 14px; }
.sc-info dt { color: #6b7684; }
.sc-info dd { margin: 0; color: #2b2b2b; font-weight: 600; overflow-wrap: anywhere; }
.sc-label { padding: 10px 18px 4px; font-size: 13px; font-weight: 700; color: #44505e; }
.sc-body { margin: 0 18px; padding: 10px 12px; min-height: 60px; overflow-y: auto; flex: 1 1 auto;
  font-size: 14px; line-height: 1.7; white-space: pre-wrap; color: #2b2b2b;
  background: #f7f9fb; border: 1px solid #e3e8ee; border-radius: 8px; }
.sc-note { padding: 0 18px; font-size: 12px; color: #6b7684; }
.sc-note:empty { display: none; }
.sc-note-warn { margin-top: 6px; color: #8a5a00; }
.sc-warn { padding: 10px 18px 0; font-size: 13px; font-weight: 700; color: #b3261e; }
.sc-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 16px; }
.sc-actions button { width: auto; margin: 0; padding: 9px 20px; font-size: 14px; }
.sc-actions button:disabled { opacity: .5; cursor: not-allowed; }