/* ================================
   reading.css
   — 英検二次音読AI採点：UIスタイル
   ================================ */

/* ---------- 1) 基本トークン / リセット ---------- */
:root {
  --bg: #0b1020;
  --card: #121a2b;
  --text: #e7ecf3;
  --muted: #9fb0c9;
  --accent: #49a6ff;
  --bar-h: 72px; /* control bar height (default) */
}

* { box-sizing: border-box; }
h1 { margin: 0; font-size: 20px; }

/* ---------- 2) レイアウト / タイプ ---------- */
main {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 16px;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

label { font-weight: 700; font-size: 14px; }
.small { color: var(--muted); }
.right { text-align: right; }

/* ---------- 3) ユーティリティ ---------- */
.hidden { display: none !important; }  /* 初期非表示の強制 */
.inline { display: inline; }

/* ---------- 4) コンポーネント ---------- */
button,
textarea {
  width: 100%;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .05s ease;
}
button:active { transform: translateY(1px); }

.primary { background: linear-gradient(180deg, #2a7bff, #1f64d9); border: 0; }
.danger  { background: #c0392b; border: 0; }
.ghost   { background: #0e1628; }

.pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #2a3e6b;
  color: var(--muted);
  font-size: 12px;
}

.meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.status { font-size: 13px; color: var(--muted); }

.passage {
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
  color: #232323;
  font-family: 'Zen Maru Gothic', sans-serif;
}

#passage-text { font-size: 17px; white-space: pre-line; }
.transcript { min-height: 80px; white-space: pre-wrap; }

canvas { border-radius: 12px; padding: 12px; }

/* ---------- 5) 固定コントロールバー ---------- */
@media (max-width: 991.98px){
  .control-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
    padding: 10px clamp(12px, 3vw, 20px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

.control-bar__inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.control-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
}
.control-meta .pill { border-color: #2a3e6b; font-size: 12px; padding: 4px 8px; }

.control-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}
.control-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 88px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1.3;
}
.control-buttons .btn i {
  font-size: 18px;
}

/* コンテンツがバーの下に隠れないように */
main { padding-bottom: calc(var(--bar-h) + 24px); }

/* ---------- 6) ローディングポップアップ（初期は完全非表示） ---------- */
#questionLoadingPopup,
#loadingPopup {
  display: none;                 /* 初期は見せない */
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,.32);
  z-index: 2000;                 /* control-bar(1000)より上 */
  justify-content: center;
  align-items: center;
  opacity: 0;                    /* フェード用 */
  transition: opacity .35s ease;
  pointer-events: none;
}

/* 表示状態（.show が付いたときだけ表示） */
#questionLoadingPopup.show,
#loadingPopup.show {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.loading-box {
  background: rgba(255,255,255,.92);
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  border: 2px solid #ebebeb;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  width: 280px;
  min-height: 200px;
  box-sizing: border-box;
  font-family: 'Zen Maru Gothic', sans-serif;
  color: #0c88cc;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.loading-image {
  width: 200px;
  height: auto;
  max-width: 100%;
  margin-bottom: 1rem;
}

/* ---------- 7) 見出し / 入力系 ---------- */
h2 { font-family: 'Zen Maru Gothic', sans-serif; }
.h2-ai {
  background: #fff;
  padding: .5em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #ebebeb;
}

.input-group-text {
  background-color: #dcecfd;
  border: 1px solid #aed4fa;
  color: #0c88cc;
  font-weight: bold;
}
#basic-addon1,
#level { font-family: 'Zen Maru Gothic', sans-serif; }

select.form-select { font-size: 16px !important; line-height: 1.4; }

.input-group .btn {
  padding: 1.5rem .75rem;
  min-width: 0;
}
.input-group .btn-primary {
  box-shadow: none;
  font-size: 13px;
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* ---------- 8) Evaluate アニメ（初期はHTMLで .hidden を付ける） ---------- */
#evaluate-area {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
#evaluate-area.is-revealing {
  opacity: 0;
  transform: translateY(6px);
}

/* ---------- 9) レスポンシブ ---------- */
@media (max-width: 768px) {
  /* iOSのフォーカスズーム防止（スマホのみ） */
  input.form-control,
  select.form-select,
  textarea.form-control {
    font-size: 16px !important;  /* 16px以上でズーム防止 */
    line-height: 1.4;
  }
  .loading-box { width: 82%; font-size: 1.2rem; }
}

@media (max-width: 480px) {
  :root { --bar-h: 64px; }
  .control-bar { padding: 8px 12px; }
  .control-buttons { gap: 6px; }
  .control-buttons .btn { min-width: auto; padding: 8px 10px; }
  .control-buttons .btn .label { display: none; }
  .control-meta .pill { font-size: 11px; padding: 3px 6px; }
}

/* input-group 内だけは横並びを優先 */
.input-group {
  display: flex;           /* 念のため明示 */
  flex-wrap: nowrap;       /* 折り返さない */
  align-items: stretch;    /* 高さを揃える */
}

.input-group .input-group-text {
  flex: 0 0 auto;
}

.input-group .form-select {
  flex: 1 1 auto;          /* セレクトは伸びる */
  min-width: 0;            /* 狭い画面でのはみ出し防止 */
}

.input-group .btn {
  width: auto !important;  /* グローバル100%を打ち消し */
  flex: 0 0 auto;          /* ボタンは伸びない */
  white-space: nowrap;     /* 文字の折返し防止 */
  padding: 1.5rem .75rem;   /* 高さを詰める（お好みで） */
  margin-left: -1px;       /* ボーダーの二重線を消す（任意） */
}

/* reading.css に追加 */
.btn-circle{
  width: 96px;           /* お好みで */
  height: 96px;
  border-radius: 50%;
  display: flex;         /* ここで中央寄せ */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;    /* 水平中央 */
  line-height: 1.1;      /* 2行の行間を少し詰める */
  white-space: normal;   /* 念のため。text-wrap を使う場合は不要でもOK */
  padding: 0.25rem;      /* 文字が食い込まないように */
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* モバイルで文字が大きすぎる場合の調整（任意） */
@media (max-width: 480px){
  .btn-circle{ width: 84px; height: 84px; }
  .btn-circle{ font-size: .95rem; }
}

/* === コントロールバーのレイアウトを中央寄せに === */
.control-bar__inner{
  display: flex;
  flex-direction: column;         /* 上:ボタン / 下:メタ */
  align-items: center;            /* X軸センター */
  gap: 12px;                      /* ボタンとメタの間隔 */
}

/* 既存CSSで左右配置が効いていても上書き */
.control-buttons{
  order: 1;                       /* 先に表示（上段） */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;                      /* ボタン間 */
  width: 100%;
}

/* ボタン内のアイコンとテキストも中央揃え */
.control-buttons .btn{
  display: inline-flex;
  flex-direction: column;         /* アイコンの下にテキスト */
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 下段のメタ情報（録音状態・経過・語速・ステータス）を中央に */
.control-meta{
  order: 2;                       /* 後に表示（下段） */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;        /* センター */
  gap: 8px 12px;                  /* pill間 */
  width: 100%;
  text-align: center;
}

/* 余裕があれば小画面の余白を少し調整 */
@media (max-width: 480px){
  .control-buttons{ gap: 8px; }
  .control-meta{ gap: 6px 10px; }
}

/* 5等分ユーティリティ（Bootstrapに無いので追加） */
.col-15 { width: 20%; flex: 0 0 20%; }

/* スコアバッジの見た目 */
.score-badge{
  display:inline-flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f7fb;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  line-height: 1.1;
  width: 90%;
}

.score-badge .score-item{
  font-size: .85rem;
  color: #4a5668;
  letter-spacing: .02em;
}
.score-badge .score-number{
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2a44;
}

/* 総合は少し大きめ＆色付き */
.score-overall{
  min-width: 120px;
  padding: 14px 16px;
  background: #e9f7ef;
  border-color: #d1f0de;
}
.score-overall .score-number{ font-size: 1.8rem; color: #0f6b3a; }

/* 各項目の軽い色分け（任意） */
.score-pron   { background:#f0f7ff; border-color:#d9e9ff; }
.score-flu    { background:#f6f3ff; border-color:#e5defe; }
.score-acc    { background:#fff7ef; border-color:#ffe6cc; }
.score-pace   { background:#f2fbf9; border-color:#d9f3ed; }
.score-inton  { background:#fff0f5; border-color:#ffd6e6; }

/* 小画面での改行/幅 */
@media (max-width: 575.98px){
  .col-15 { width: 50%; flex: 0 0 50%; } /* 2列 */
  .score-badge{ min-width: 0; width: 100%; }
}

/* ================================
   Control Bar（録音コントロール）
   PC：右サイドの縦配置
   SP/Tablet：下部固定の横並び
   ================================ */

/* 共通 */
:root{
  --toolbar-w: 108px;      /* 右サイド時の幅（PC） */
  --toolbar-gap: 18px;    /* 本文とのすき間（PC） */
  --toolbar-top: 35vh;    /* ヘッダー下の開始位置（PC） */
}

/* ボタンの共通見た目（丸ボタン） */
.btn-circle{
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; line-height: 1.1;
  padding: .25rem; white-space: normal;
  font-family: 'Zen Maru Gothic', sans-serif;
}
@media (max-width: 480px){
  .btn-circle{ width: 84px; height: 84px; font-size: .95rem; }
}

/* ===== PC (>=992px)：右サイド固定・縦並び ===== */
@media (min-width: 992px){
  .control-bar.control-bar--side{
    position: fixed;
    top: var(--toolbar-top);
    right: 24px;
    width: var(--toolbar-w);
    background: #fff;
    border-radius: 54px;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    z-index: 1030;
  }
  .control-bar.control-bar--side .control-bar__inner{
    display: flex;
    flex-direction: column;        /* 縦積み */
    align-items: center;
    padding: 10px 10px;
    gap: 10px;
  }
  .control-bar.control-bar--side .control-buttons{
    display: flex;
    flex-direction: column;        /* ボタンも縦 */
    gap: 10px;
    margin: 0;
  }
  .control-bar.control-bar--side .btn.btn-circle{
    width: 88px; height: 88px;     /* PCでは少し小さめ */
    padding: 6px 4px; font-size: 12px;
  }

  /* 本文側が隠れない“避け” */
  /*body.has-side-toolbar .container,
  body.has-side-toolbar .container-fluid{
    padding-right: calc(var(--toolbar-w) + var(--toolbar-gap));
  }:/
}

/* ===== SP/Tablet (<992px)：下部固定・横並び ===== */
@media (max-width: 991.98px){
  .control-bar{
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 10px 12px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e9ecef;
    z-index: 1030;
  }
  .control-bar .control-bar__inner{
    display: flex;
    flex-direction: row;           /* ★横並びに固定 */
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto;
  }
  .control-bar .control-buttons{
    display: flex;
    flex-direction: row;           /* ★ボタン横並び */
    flex-wrap: nowrap;             /* 折り返さない */
    gap: 10px;
    margin: 0;
  }

  /* 下部固定バー分の“避け”（高さはJSで --control-bar-h に反映） */
  #sb-site{
    padding-bottom: calc(var(--control-bar-h, 72px) + env(safe-area-inset-bottom));
  }
}

/* 補助：ボタン行の中央寄せ（広い画面でも崩れない） */
.control-buttons{
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}