/* ライブコール「文字モード」の見た目（2026-10-24新設）。アプリ（index.html）と確認用プレビュー
   （tools/live-call-text/preview.html）の両方が読み込む。色は --color-* が無い環境でも崩れないよう既定値を持たせる。 */
/* =========================================================
   【2026-10-24新設・本人指示】ライブコール「文字モード」
   歌詞＝黒文字、コール＝赤文字の全文コール表（js/callTextView.js）。読むための表示なので
   自動スクロール・ハイライトはしない。同期モードの見た目には手を加えない。
   ========================================================= */
.live-call-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--color-primary-light, #ffe1ee);
}

.live-call-mode-tab {
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--color-primary-dark, #ff4f96);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.live-call-mode-tab.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(255, 111, 168, 0.18);
}

/* 文字モードのときは、同期モード用の歌詞パネル・案内・全画面ボタンを隠す（同期モードの状態そのものは変えない） */
#live-call-mode-player-screen.is-text-mode #live-call-mode-lyrics-panel,
#live-call-mode-player-screen.is-text-mode #live-call-mode-no-lyrics-notice,
#live-call-mode-player-screen.is-text-mode #live-call-mode-playback-error-notice,
#live-call-mode-player-screen.is-text-mode #live-call-mode-fullscreen-button {
  display: none !important;
}

.live-call-text-panel {
  padding: 4px 2px 24px;
}

.live-call-text-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-text, #4a2e42);
}

.call-text-view {
  padding: 14px 14px 18px;
  border-radius: 16px;
  background: #fff;
  color: #222;
  line-height: 1.75;
}

.call-text-group + .call-text-group,
.call-text-group + .call-text-block,
.call-text-block + .call-text-group {
  margin-top: 6px;
}

/* 本人が足した表示だけの黒い行（2026-10-29。コール表エディターの完成プレビュー・タイミングエディターと同じ見た目）。
   歌詞の行（.call-text-line）と同じ文字・間隔。空の行は1行分の高さを空ける */
.call-text-extra {
  margin: 6px 0 0;
  font-size: 1.02rem;
  overflow-wrap: anywhere;
  line-break: strict;
  white-space: pre-wrap;
}

.call-text-extra.is-empty::before {
  content: "\200b";
}

.call-text-extra + .call-text-block {
  margin-top: 6px;
}

.call-text-line {
  margin: 0;
  font-size: 1.02rem;
  /* 【2026-10-25 スマホ幅の改善】以前は word-break: break-word で、赤いコールが画面の端で
     「（開｜け！）」のように途中で切れていた。普通の折り返しにして、はみ出しそうなときだけ途中で折る */
  overflow-wrap: anywhere;
  line-break: strict;
}

.call-text-line-no {
  display: inline-block;
  min-width: 2em;
  margin-right: 6px;
  color: #999;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.call-text-lyric {
  color: #222;
}

.call-text-calls {
  margin: 0;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
  line-break: strict;
}

.call-text-call {
  color: #e0262d;
  font-weight: 700;
}

/* 【2026-10-25 スマホ幅の改善】コール1つを、折り返しの1単位として扱う。入りきらなければコールごと次の行へ送り、
   短いコールが途中で切れないようにする。画面幅より長いコール（MIXなど）だけ、コールの中で自然に折り返す */
.call-text-line .call-text-call,
.call-text-calls .call-text-call {
  display: inline-block;
  max-width: 100%;
  text-indent: 0;
}

/* 本人が改行を入れたコールは、ひとかたまりにせず文章と同じように流す（改行の位置は本人の指定どおり） */
.call-text-line .call-text-call.has-break,
.call-text-calls .call-text-call.has-break {
  display: inline;
}

/* 歌詞の横に入るコール。【2026-10-25 本人指示】以前は（ ）を自動で付けていたが、やめた
   （編集画面とスマホの見た目をそろえ、コールの文面そのものだけを見せる）。カッコの代わりに歌詞とのあいだを少し空ける */
.call-text-line .call-text-call {
  margin-left: 0.35em;
}

.call-text-block {
  margin: 12px 0;
  padding: 8px 10px;
  border-left: 3px solid #e0262d;
  border-radius: 6px;
  background: #fff5f5;
}

.call-text-block-label {
  margin: 0 0 2px;
  color: #b3141a;
  font-size: 0.78rem;
  font-weight: 800;
}


.call-text-call.is-review {
  text-decoration: underline dotted #e0262d;
  text-underline-offset: 3px;
}

.call-text-review-mark {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  background: #fff2bf;
  color: #8a6100;
  font-size: 0.6rem;
  font-weight: 800;
  vertical-align: 2px;
}

/* 本人が直した文章・表示用の歌詞は、入れた空白・改行をそのまま見せる（2026-10-25） */
.call-text-call.is-pre,
.call-text-lyric.is-pre {
  white-space: pre-wrap;
}