/* 色や大きさの基本設定（ここを変えると全体の見た目が変わる）
   パッと見で画面がついていると分からないよう、背景は真っ黒・文字は暗めにしている */
:root {
  --bg: #000000;
  --surface: #0b0b0c;     /* 枠の中の背景 */
  --text: #8b9097;
  --muted: #5d6268;
  --interim: #43474c;     /* 確定前の文字の色 */
  --border: #1d1f22;
  --accent: #5a7fbd;      /* 選択中のタブ・リンクの文字色 */
  --accent-bg: #15223a;   /* 主なボタンの背景 */
  --accent-weak: #1b2a45;
  --danger: #b05858;
  --danger-border: #3b2020;
  --rec: #a5464b;
  --warn: #a8782f;
  --banner-bg: #17140a;
  --banner-border: #352d13;
  --star: #9c8434;        /* ★の色（暗めの黄色） */
  --star-border: #3a3214;
  --radius: 8px;
  color-scheme: dark;
  font-family: system-ui, "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-size: 16px;
  color: var(--text);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  height: 100dvh; /* スマホのアドレスバーの出入りに合わせた高さ */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  -webkit-tap-highlight-color: transparent; /* タップ時に光らせない */
}

[hidden] { display: none !important; }

/* 上部のタブ */
.topbar {
  flex: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.tabs { display: flex; }

.tabs a {
  flex: 1;
  padding: 12px 4px;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.rec-badge {
  margin-left: 4px;
  color: var(--rec);
  font-size: 12px;
  font-weight: 600;
}

/* 画面の中身 */
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
}

.placeholder { color: var(--muted); text-align: center; margin-top: 40px; }

/* ボタン・入力欄（全画面共通） */
.btn {
  flex: 1;
  min-height: 48px; /* 指で押しやすい高さ */
  padding: 10px 0;
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.btn.primary { background: var(--accent-bg); border-color: var(--accent-bg); color: #b4c3dc; }
.btn.danger { color: var(--danger); border-color: var(--danger-border); }
.btn:disabled, .link-btn:disabled { opacity: 0.35; cursor: default; }

.link-btn {
  padding: 8px 6px;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

textarea, input[type="text"], input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
textarea { resize: vertical; }
textarea:focus, input:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }
::placeholder { color: var(--muted); }

.note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ===== 録音画面 ===== */
.banner {
  flex: none;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #a89a6c;
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  border-radius: var(--radius);
}

/* 状態の表示（左）と録音時間（右） */
.status-row { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rec-time { flex: none; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.status-row .status { flex: 1; min-width: 0; }
.rec-mode { flex: none; font-size: 13px; color: var(--muted); }
/* 見た目は小さく、押せる範囲は広く（上下にはみ出させて行の高さは変えない） */
.blackout-btn { flex: none; padding: 12px 4px 12px 12px; margin: -12px -4px -12px 0; color: var(--muted); }

.status { flex: none; margin: 0; font-size: 14px; color: var(--muted); }
.status.recording { color: var(--rec); font-weight: 600; }
.status.warn { color: var(--warn); font-weight: 600; }

.transcript {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 10px 12px;
  line-height: 1.7;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.transcript p { margin: 0 0 4px; white-space: pre-wrap; word-break: break-word; }
.transcript .interim { color: var(--interim); }  /* 確定前は薄い色 */
.transcript .empty { margin-top: 30px; text-align: center; font-size: 14px; color: var(--muted); }

/* ★ボタン（大きく押しやすく） */
.star-btn {
  flex: none;
  min-height: 64px;
  font-size: 30px;
  line-height: 1;
  color: var(--star);
  background: #0e0c06;
  border-color: var(--star-border);
}

/* 文字起こしの行頭の★（タップで外せる） */
.star-mark {
  margin: -6px 0;
  padding: 6px 6px 6px 0;
  font: inherit;
  color: var(--star);
  background: none;
  border: none;
  cursor: pointer;
}

.controls { flex: none; display: flex; gap: 8px; }

/* 録音画面の「全文コピー」（文字起こし欄のすぐ上の右端。行の高さは小さく） */
.copy-row.record-copy { flex: none; margin: 0 0 -6px; }
.copy-actions { display: flex; gap: 2px; }

/* オン・オフのスイッチ（「口ぐせを消す」） */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track {
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #1a1b1e;
  border: 1px solid var(--border);
  transition: background 0.15s;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s;
}
.switch input:checked + .switch-track { background: var(--accent-bg); border-color: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(14px); background: var(--accent); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent-weak); }

.rec-badge.paused { color: var(--muted); }

/* 「終了」を押したときの選択 */
.end-dialog {
  width: min(320px, calc(100% - 32px));
  padding: 16px;
  color: var(--text);
  background: #111214;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.end-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.end-dialog p { margin: 0 0 12px; text-align: center; font-weight: 600; }
.end-dialog .btn + .btn { margin-top: 8px; }

/* ===== 履歴・詳細・設定（画面全体を縦にスクロール） ===== */
.screen.scroll { display: block; overflow-y: auto; }
.screen.scroll > * + *, #detailMain > * + * { margin-top: 10px; }

.btn.wide { display: block; width: 100%; }

/* 履歴一覧 */
.meeting-list { list-style: none; margin: 0; padding: 0; }

.meeting-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.meeting-list a {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.meeting-list .date { font-size: 13px; color: var(--muted); }
.meeting-list .title { margin-top: 2px; font-weight: 600; word-break: break-word; }
.meeting-list .date-only { font-weight: 600; }

.delete-btn { flex: none; color: var(--danger); }

/* 詳細 */
.detail-head { display: flex; justify-content: space-between; align-items: center; }
#detailTitle { font-weight: 600; }

/* 「Claude用にコピー」「Claudeを開く」を横に並べる */
.claude-row { display: flex; gap: 8px; }

.paste-box {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.paste-box summary { cursor: pointer; font-size: 15px; color: var(--accent); }
.paste-box[open] summary { margin-bottom: 8px; }
.paste-box textarea { margin-bottom: 8px; }

/* タブはスマホの幅いっぱいに均等に並べる */
.subtabs {
  display: flex;
  padding: 3px;
  background: #121315;
  border-radius: var(--radius);
}
.subtabs button {
  flex: 1;
  min-height: 40px;
  padding: 6px 2px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.subtabs button.active { color: var(--text); background: #222428; font-weight: 600; }

/* タブの下の行（左：メモの保存状態、右：全文コピー） */
.copy-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#detailMain > .copy-row { margin-top: 2px; }

.detail-body {
  min-height: 160px;
  padding: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.detail-body .empty { margin: 0; color: var(--muted); font-size: 14px; }

#detailMemo { min-height: 240px; line-height: 1.8; }

/* 設定 */
.card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card h2 { margin: 0 0 8px; font-size: 16px; }
.card > * + * { margin-top: 8px; }
.card p { margin-bottom: 0; }

/* 画面下に一瞬出るお知らせ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: var(--radius);
  background: rgba(30, 32, 35, 0.95);
  color: #a9adb3;
  font-size: 14px;
  z-index: 10;
}

/* 「真っ黒にする」の幕：何も映さない（お知らせより手前に重ねる） */
.blackout {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  cursor: none;
  touch-action: none; /* 幕の上で画面がスクロール・拡大しないように */
}