/* 【最新版のlogarea.css】 */

/* デフォルト（PC・ノート・大型画面） */
#logArea {
  /* display: block; */
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 65vw;
  max-width: 900px;
  min-width: 0;
  background: rgba(32,32,32);
  color: #fff;
  border-radius: 22px;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
  font-size: 48px;
  bottom: 5vh;
  overflow: hidden;
}

/* ログエリアサイズ切替（親にだけ指定） */
/* PC 基本（デスクトップ用の高さ） */
.logarea-large  #logArea { height: 85vh; }
.logarea-medium #logArea { height: 55vh; }
.logarea-small  #logArea { height: 25vh; }

/* その他サブスタイル（スクロール/注意書き領域などは既存でOK） */
.logAreaScroll {
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  /* display: block; */
  display: flex;
  flex-direction: column;
}

.logText {
  display: flex;
  flex-direction: column;
  padding: 18px 14px 0 14px;
}

/* 注意書きエリア */
#transcribeNotice {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.5vh;
  width: 65vw;
  max-width: 900px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #cccccc;
  text-align: center;
  border-radius: 8px;
}

/* 最新行に戻る矢印ボタン */
#scroll-to-bottom-btn {
  position: absolute;              /* logArea の中に重ねる */
  left: 50%;                       /* 横の真ん中 */
  bottom: 25px;                    /* logArea の下から16px 上 */
  transform: translateX(-50%);     /* きっちり中央 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;                     /* 枠線を消す */
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: #f5f5f5;
  color: #222222;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  display: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);  /* ちょっとした影 */
  z-index: 10;
}

/* スクロールバー装飾（必要ならラッパーにも適用） */
.logAreaScroll::-webkit-scrollbar {
  width: 7px !important;
  background: rgba(32,32,32) !important;
}
.logAreaScroll::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 9px !important;
  border: none !important;
}

/* 話者ごとの色分け用クラス */
.speaker-0-line {
  background-color: #FAFFA0;
  /* background-color: #caf3ff; */
  color: #303030;
}
.speaker-1-line {
  background-color: #b3e9af;
  color: #303030;
}

/* 共通のバブル風スタイル */
.bubble-line {
  padding: 4px 14px;
  border-radius: 24px;
  margin-top: 4px;
  margin-bottom: 8px;
  max-width: 80%;
  position: relative; /* しっぽのために必要 */
}
.bubble-left {
  align-self: flex-start;
  margin-left: 8px;
}
.bubble-right {
  align-self: flex-end;
  margin-right: 8px;
}

/* 途中文字起こし（仮）バブルスタイル */
.temp-line {
  background-color: #e0e0e0;
  color: #303030;
  border-radius: 24px;
  padding: 4px 14px;
  margin: 4px 18px 8px 18px;
  align-self: flex-start;
}

/* 吹き出し＋タイムスタンプのラッパー */
.bubble-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  margin-top: 4px;
  margin-bottom: 2px;
}
.bubble-wrapper-left {
  align-self: flex-start;
  margin-left: 8px;
  align-items: flex-start;
}
.bubble-wrapper-right {
  align-self: flex-end;
  margin-right: 8px;
  align-items: flex-end;
}
/* タイムスタンプ */
.bubble-timestamp {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
  line-height: 1.2;
}
.bubble-wrapper-left .bubble-timestamp {
  padding-left: 12px;
}
.bubble-wrapper-right .bubble-timestamp {
  padding-right: 12px;
}



/* タブレット縦持ち */
@media (min-width: 768px) and (max-width: 1023px) {
  .logarea-large  #logArea { height: 80vh; }
  .logarea-medium #logArea { height: 55vh; }
  .logarea-small  #logArea { height: 25vh; }
  /* ← ここを追加（横幅を広げる） */
  #logArea {
    width: 80vw;      /* 65vw の約1.2倍 */
    max-width: 700px; /* 画面に合わせて少し広げてもOK */
  }
  #transcribeNotice {
    width: 85vw;
    max-width: 700px;
  }
}

/* タブレット横持ち */
@media (min-width: 820px) and (max-width: 1366px) and (orientation: landscape) {
  /* 必要なら高さ・幅もここで上書き */
  .logarea-large  #logArea { height: 85vh; }
  .logarea-medium #logArea { height: 55vh; }
  .logarea-small  #logArea { height: 25vh; }

  #logArea {
    width: 75vw;
    max-width: 700px;
  }
  
  #transcribeNotice {
    width: 72vw;
    max-width: 700px;
    bottom: 1vh;  /* ← ここを好みの位置に調整（例：2vh や 1.5vhなど） */
  }
}

/* スマホ縦持ち */
@media (max-width: 767px) {
  .logarea-large  #logArea { height: 74vh; }
  .logarea-medium #logArea { height: 55vh; }
  .logarea-small  #logArea { height: 25vh; }
  /* ← ここを追加（横幅を広げる） */
  #logArea {
    width: 90vw;      /* 65vw の約1.4倍。大きすぎるなら 85vw でもOK */
    max-width: 500px; /* 必要なら上限も調整 */
  }
  #transcribeNotice {
    width: 95vw;
    max-width: 500px;
    font-size: 12px;
    bottom: 2vh;
  }
}

/* スマホ横持ち用（幅は小さいけど orientation: landscape） */
@media (max-width: 767px) and (orientation: landscape) {
  .logarea-large  #logArea { height: 48vh; }  /* 例：縦の半分ちょい */
  .logarea-medium #logArea { height: 33vh; }
  .logarea-small  #logArea { height: 25vh; }
  /* ← ここを追加（横幅を広げる） */
  #logArea {
    width: 90vw;      /* 必要なら少し広げる or そのままでもOK */
    max-width: 700px;
  }
  #transcribeNotice {
    width: 95vw;
    max-width: 500px;
    font-size: 12px;
    bottom: 0.25vh;
  }
}