/* チャット本文のメッセージ毎翻訳（chat-translate.js が注入する要素のスタイル）。
   飯塚デザインの app.css には触らず、追加分だけをこのファイルで足す。 */

/* 「翻訳」ボタン: meta 行（時刻の並び）に小さくテキストリンク風で置く（YouTube 方式） */
.message-translate {
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-brand, #20b2aa);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.message-translate:disabled {
  opacity: 0.55;
  cursor: default;
}

/* 訳文: 原文 (.bubble-text) の下に淡色・区切り線付きでインライン展開。
   font-size は絶対値必須: 親 .bubble が font-size: 0（飯塚デザインの空白除去テク・
   app.css）のため、em 指定だと 0 に潰れて訳文が不可視になる（.bubble-text の 14px と対）。 */
.bubble-translation {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.72;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble-translation[hidden] {
  display: none;
}

/* 自分発バブル（ブランド色背景・白文字）内の訳文: 黒系の区切り線は沈むので白系に置き換え。
   文字色は .bubble の白を継承（opacity 0.72 は共通のまま）。 */
.message-row.is-me .bubble-translation {
  border-top-color: rgba(255, 255, 255, 0.4);
}

/* 取得失敗の一時表示（4 秒で自動消去） */
.message-translate-error {
  font-size: 11px;
  color: #c0392b;
}

/* マイページ「翻訳先の言語」select: 既存 .mypage-field input（app.css）と同じ見た目に揃える */
.mypage-field .mypage-locale-select {
  width: 100%;
  height: 51px;
  border: 1px solid #a9a9a9;
  border-radius: 16px;
  background: #fff;
  color: #000;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}