/* =========================================
   pages/companion.css
   FINAL REPLACEMENT (NO HTML CHANGE)
   目的:
   - タイトル「AIコンパニオン：はるか」を折り返さない（省略OK）
   - 右側の「現在：ユーザー名・編集」と「読み上げON・速度」を崩さない
   - ★読み上げON/速度は “縦並び” にしてタイトルを隠さない
   - 右下ボタン(音声/リセット/送信)を横3つで並べる（padding詰め）
   - 吹き出しをこのページで確実に適用（範囲限定）
   - ★音声入力中はボタンを緑に（再クリックで元に戻る）
========================================= */


/* =========================
   Header（上部：1行・右寄せ・小さく）
========================= */
.ph-companion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* 左（アイコン + タイトル） */
.ph-companion .ph-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* タイトルは折り返さず、必要なら省略 */
.ph-companion .ph-text{
  min-width:0;
}
.ph-companion .ph-text h1,
.ph-companion .ph-text .title,
.ph-companion .ph-text .ph-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 右側（ユーザー名 + 読み上げON + 速度）を “コンパクト” に */
.ph-companion .ph-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
  min-width:0;
}

/* 「現在：名前 + 編集」 */
.ph-companion .ph-side-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width: 38vw;
  overflow:hidden;
  justify-content:flex-end;
}

/* 名前は省略可（レイアウト優先） */
.ph-companion .ph-side-row #whoName{
  display:inline-block;
  max-width: 26vw;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}

/* ✅ ここが本命：読み上げON/速度ブロックを “縦並び” に */
.ph-companion .ph-side-row.ph-tts{
  display:inline-flex;
  flex-direction:column;     /* ★縦 */
  align-items:flex-end;      /* ★右揃え */
  gap:6px;                   /* ★間隔 */
  max-width: 22vw;           /* ★取りすぎ防止（タイトルを守る） */
  overflow:visible;
}

/* 読み上げONを小さく */
.ph-companion .ph-side label.toggle{
  font-size:12px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* 速度ブロックを小さく */
.ph-companion .ph-speed{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  line-height:1;
}

/* 速度バーを短く */
.ph-companion .ph-speed input[type="range"]{
  width: 92px;
}

/* 速度値表示 */
.ph-companion #speedVal{
  min-width: 34px;
  text-align:right;
}


/* =========================
   Chat Card：余白を詰めて密度を戻す
========================= */
.card[aria-label="チャット"]{
  padding:0;
  overflow:hidden;
  border-radius:14px;
}

/* 濃紺帯 */
.card[aria-label="チャット"] .bar{
  background: var(--navy);
  color:#fff;
  padding:12px 14px;
  margin:0;
  border-radius:14px 14px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.card[aria-label="チャット"] .bar .status{
  color: rgba(255,255,255,.88);
  font-weight:700;
}

/* bar下 */
.card[aria-label="チャット"] .chat-layout{
  padding:10px 12px;
}


/* =========================================================
   チャット内レイアウト（grid）
========================================================= */
.chat-layout{
  display:grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: 1fr auto;
  gap:10px;
  align-items:stretch;
}

.chat-main{ display:contents; }

/* 左上：会話 */
.body{
  grid-column:1;
  grid-row:1;
  min-height:200px;
  max-height:420px;
  overflow:auto;
  padding-right: 4px;
}

/* 右上：はるか */
.chat-side{
  grid-column:2;
  grid-row:1;
  width:260px;
  min-width:0;
  align-self:start;
}
.chat-side-inner{
  position:sticky;
  top:0;
}

.avatar-frame{
  width:100%;
  max-width:260px;
  aspect-ratio: 3 / 4;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow-sm);
}
.avatar-frame img,
#avatarImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* =========================
   入力/ボタン
========================= */
.input{ display:contents; }

/* 左下：入力 */
.input .row[style*="flex:1"]{
  grid-column:1;
  grid-row:2;
  align-self:end;
  min-width:0;
}
#mText{ width:100%; }

/* 右下：ボタン */
.input .row:not([style*="flex:1"]){
  grid-column:2;
  grid-row:2;
  align-self:end;
  justify-self:end;

  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  justify-content:flex-end;
}

#micBtn, #resetBtn, #sendBtn{
  padding: 10px 10px;
  border-radius: 12px;
  white-space:nowrap;
  font-size: 13px;
}

/* ★録音中：緑に（再クリックで class が外れて元に戻る）
   JS側が .recording を付ける実装ならこれでOK。
   もし JS が .is-recording を付ける実装なら、下の追記も併用。 */
#micBtn.recording,
#micBtn.is-recording{
  background: var(--green, #16a34a);
  border-color: var(--green, #16a34a);
}

/* SVGは白のまま */
#micBtn svg,
#resetBtn svg,
#sendBtn svg{
  fill:#fff;
}
#micBtn svg *,
#resetBtn svg *,
#sendBtn svg *{
  fill:#fff;
  stroke:#fff;
}
#sendBtn svg{ pointer-events:none; }


/* =========================
   吹き出し（このページで確実に出す）
========================= */
#mBody{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#mBody .msg{
  max-width: 92%;
  padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#mBody .msg.me{
  margin-left:auto;
  border-color: #c7d2fe;
  background: #eef2ff;
}

#mBody .msg.bot{
  background:#eff6ff;
}


/* =========================
   Responsive
========================= */
@media (max-width:980px){
  .ph-companion{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .ph-companion .ph-side{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    white-space:normal;
  }

  .ph-companion .ph-side-row{
    max-width:100%;
  }
  .ph-companion .ph-side-row #whoName{
    max-width: 70vw;
  }

  .ph-companion .ph-side-row.ph-tts{
    align-items:flex-start;   /* モバイルは左に寄せて見やすく */
    max-width:100%;
  }

  .chat-layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .body{ grid-column:1; grid-row:1; }

  .chat-side{
    grid-column:1;
    grid-row:2;
    width:100%;
  }
  .chat-side-inner{ position:static; }
  .avatar-frame{ max-width:320px; margin:0 auto; }

  .input .row[style*="flex:1"]{
    grid-column:1;
    grid-row:3;
  }

  .input .row:not([style*="flex:1"]){
    grid-column:1;
    grid-row:4;
    justify-self:start;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}