:root {
  /* 配色は「上質・落ち着き」を軸にしたインクネイビー+温かみのある
     ポーセリン(生成りがかった白)。彩度の高い既製メッセンジャー風の
     色使いを避け、ホテルのコンシェルジュ・鉄道の上級サービスの趣に寄せる。 */
  --staff-color: #22344d;
  --staff-color-dark: #1a2940;
  --visitor-bg: #ffffff;
  --bg: #f3f2ee;
  --text-dark: #1c1e21;
  --text-mid: #6b6f76;
  --hairline: #e7e4de;
  --danger: #b3372f;
  --header-h: 64px;
  --mic-h: 150px;
  /* キオスク画面のテーマ設定(管理画面「見た目設定」)。テナントごとに
     kiosk.html側でインラインの style 属性から上書きされる。 */
  --header-bg: rgba(255, 255, 255, 0.88);
  --accent-color: #22344d;
  --kiosk-font-scale: 1;
  --kiosk-bg-image: none;
  --kiosk-bg-image-opacity: 0.15;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-feature-settings: "palt"; /* 日本語の字間を詰めて、締まった印象にする */
  letter-spacing: 0.01em;
  background: var(--bg);
  color: var(--text-dark);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

button, input {
  font-family: inherit;
}

/* ---------- ログイン画面 ---------- */
.login-body {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #24354e 0%, #161f2e 60%, #10151d 100%);
  padding: 24px;
}

.login-card {
  background: #fdfcfa;
  border-radius: 20px;
  padding: 40px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 70px rgba(6, 10, 16, 0.45);
  text-align: center;
}

.login-logo { font-size: 48px; margin-bottom: 8px; }
.login-card h1 { font-size: 24px; margin: 0 0 4px; }
.login-sub { color: var(--text-mid); margin: 0 0 24px; font-size: 15px; }
.login-error {
  background: #fdecec; color: var(--danger); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
}

.login-card label {
  display: block;
  text-align: left;
  font-size: 14px;
  color: var(--text-mid);
  margin-bottom: 16px;
}

.login-card label.login-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.login-card label.login-checkbox input {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 0;
  flex-shrink: 0;
  padding: 0;
}

.login-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px 16px;
  font-size: 17px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #f7f6f3;
}

.login-card input:focus { outline: none; border-color: var(--accent-color); background: #fff; }

.login-card button {
  width: 100%;
  padding: 16px;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--staff-color);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.login-card button:active { background: var(--staff-color-dark); }

/* ---------- 共通ヘッダー ---------- */
.kiosk-header {
  height: var(--header-h);
  /* 3カラムのグリッドにして中央列(タイトル)を画面の真ん中に固定する。
     flexのjustify-content:space-betweenだと、左(ログアウトアイコン1つ)と
     右(言語選択+アイコン複数)の幅が大きく違うため、中央の要素が左右の
     隙間の中間に来るだけで、見た目上は画面中央からずれてしまっていた。
     グリッドなら左右の列を1frずつにすることで、中身の幅に関わらず中央列が
     常に真ん中に来る。 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kiosk-title { display: flex; flex-direction: column; align-items: center; justify-self: center; min-width: 0; }
.kiosk-title-row { display: flex; align-items: center; gap: 6px; }
.header-logo { max-height: 32px; max-width: 120px; object-fit: contain; }
.kiosk-title-main { font-size: 1.0625em; font-weight: 600; letter-spacing: 0.06em; }
.partner-badge {
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent-color);
  padding: 0.16em 0.75em;
  border-radius: 999px;
  margin-top: 3px;
}

.header-actions { display: flex; align-items: center; gap: 4px; justify-self: end; }

/* ---------- 左のメニューパネル(2026-09-14) ----------
   ヘッダーに散らばっていた操作(自分の言語・マイク・音声出力・対面表示・
   会議モード・次のお客様・管理画面・ログアウト)を左上の1ボタンにまとめ、
   押すと左からパネルが開く。各操作の要素(id)はそのまま移しているので、
   kiosk.js側の動作は変わらない。 */
.side-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.35);
  z-index: 35;
}
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  padding: calc(env(safe-area-inset-top) + 8px) 0 env(safe-area-inset-bottom);
  background: #fff;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  z-index: 40;
  overflow-y: auto;
  transform: translateX(-104%);
  transition: transform 0.24s ease;
}
.side-menu.open { transform: translateX(0); }
.side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 4px 20px;
  border-bottom: 1px solid var(--hairline);
}
.side-menu-title { font-size: 1em; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dark); }
.menu-section { padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
.menu-section:last-child { border-bottom: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 2px 4px;
}
.menu-item-label {
  flex: 1;
  font-size: 0.95em;
  color: var(--text-dark);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.menu-item-select { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 4px; }
.menu-item-select .menu-item-label { font-size: 0.8em; color: var(--text-mid); }
.side-menu .staff-lang-wrap, .side-menu .mic-select-wrap { width: 100%; }
.side-menu .staff-lang-select, .side-menu .mic-device-select { max-width: none; width: 100%; height: 40px; font-size: 0.95em; }
.side-menu .meeting-mode-menu { left: 0; right: auto; }

.staff-lang-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.staff-lang-icon {
  position: absolute;
  left: 8px;
  width: 13px;
  height: 13px;
  fill: var(--text-mid);
  pointer-events: none;
}

.staff-lang-wrap::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-mid);
  pointer-events: none;
}

.staff-lang-select {
  height: 34px;
  max-width: 104px;
  padding: 0 18px 0 27px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
  color: var(--text-dark);
  font-size: 0.8125em;
  appearance: none;
  -webkit-appearance: none;
}

.mic-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mic-select-icon {
  position: absolute;
  left: 8px;
  width: 13px;
  height: 13px;
  fill: var(--text-mid);
  pointer-events: none;
}

.mic-select-wrap::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-mid);
  pointer-events: none;
}

.mic-device-select {
  height: 34px;
  max-width: 84px;
  padding: 0 18px 0 27px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
  color: var(--text-dark);
  font-size: 0.8125em;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #333;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:active { background: #eee; }
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
/* hidden属性/プロパティでのsvg出し分けは環境によって反映が不安定なことが
   あるため(mic-icon/stop-icon、voice-on-icon/voice-off-icon等)、専用クラスで
   確実にdisplay:noneにする。JS側もこのクラスのtoggleで出し分ける。 */
.icon-btn svg.icon-svg-hidden { display: none !important; }
/* テストモード記録中を示す赤丸(svg内のcircle要素なので上のsvg用ルールとは
   別に指定する)。 */
#test-mode-dot.icon-svg-hidden { display: none !important; }

.icon-btn-badge {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.icon-btn-badge.visible {
  display: block;
}

/* ---------- キオスク本体 ---------- */
.kiosk-body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 管理画面の文字サイズ設定の基準。子要素はこれを基準にem単位で
     サイズ指定することで、ここを変えるだけで吹き出し等も比例して拡縮する。 */
  font-size: calc(16px * var(--kiosk-font-scale, 1));
  position: relative;
}

/* 背景画像(任意)。透過率を掛けた上で本文の背後に敷く。 */
.kiosk-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--kiosk-bg-image);
  background-size: cover;
  background-position: center;
  opacity: var(--kiosk-bg-image-opacity);
  pointer-events: none;
  z-index: 0;
}

/* テーマ背景画像(z-index:0)より上にコンテンツを重ねるための指定。
   ヘッダーをここに含めてはいけない: ヘッダーは元々 position:sticky;
   z-index:10 を持っており(=背景より上)、ここで z-index:1 に上書きすると
   本文(.kiosk-main z-index:1、DOM順で後)より下に沈み、ヘッダーから
   垂れ下がるドロップダウン(会議人数メニュー等)が「見えるのに押せない」
   状態になる(実際に起きた不具合)。 */
.kiosk-main, .mic-area {
  position: relative;
  z-index: 1;
}

.kiosk-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.notice-banner {
  background: #fff4e5;
  color: #8a5a00;
  font-size: 0.875em;
  padding: 10px 16px;
  text-align: center;
}
.notice-banner a { color: #8a5a00; font-weight: 700; }

.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px calc(16px + var(--mic-h));
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

/* .chat-areaはdisplay:flexを明示しているため、hidden属性のUA既定値(display:none)
   だけでは上書きされない。組み合わせセレクタで明示的に上書きする。 */
.chat-area[hidden] {
  display: none;
}

.empty-hint {
  margin: auto;
  text-align: center;
  color: var(--text-mid);
  font-size: 1.125em;
  max-width: 320px;
  line-height: 1.6;
}

.home-screen-display {
  margin: auto;
  text-align: center;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* 基準フォントサイズ(管理画面の文字サイズ設定を反映)。対面表示では収まり
     きらない時にJSがこの値をさらに縮小し、em単位の子要素すべてに比例して
     反映されるようにする。 */
  font-size: calc(16px * var(--kiosk-font-scale, 1));
}

.home-screen-line {
  color: var(--text-mid);
  font-size: 1.125em; /* 16px基準で18px相当 */
  line-height: 1.6;
  margin: 0;
}

.home-screen-line.home-screen-ja {
  color: var(--text-dark);
  font-size: 1.375em; /* 16px基準で22px相当 */
  font-weight: 700;
}

/* ---------- 対面表示（画面を上下に分け、片方を180度回転） ---------- */
.face-to-face-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.face-to-face-container[hidden] {
  display: none;
}

.face-to-face-pane { flex: 1; }

.face-to-face-top {
  transform: rotate(180deg);
  /* 手前側(bottom)と違い、マイクボタン分の余白は不要 */
  padding-bottom: 16px;
}

.face-to-face-divider {
  height: 3px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent);
}

.icon-btn.active {
  background: var(--staff-color);
  color: #fff;
}

/* 会議モードの人数選択(4人/6人/8人/OFF)。ヘッダーのボタンは1つのまま、
   タップすると人数を選べる小さな一覧を出す。 */
.meeting-mode-picker {
  position: relative;
}

.meeting-mode-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  min-width: 88px;
  background: #fff;
  border: 1.5px solid #dcdfe3;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.meeting-mode-menu.open {
  display: block;
}

.meeting-mode-option {
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 0.875em;
  color: var(--text-dark);
  text-align: center;
}

.meeting-mode-option[aria-selected="true"] {
  background: #e8f5ee;
  color: var(--staff-color-dark);
  font-weight: 700;
}

.meeting-mode-option-off {
  color: var(--text-mid);
  border-top: 1px solid #eef0f2;
  margin-top: 4px;
  padding-top: 10px;
}

/* ---------- 複数人会議モード(4人/6人/8人) ----------
   画面を上下2段に均等に分け、無駄な余白が出ないようにする。人数は
   data-count属性(4/6/8)で切り替え、上段の列数を変える。奥側(上段)に
   座る人から見て文字が正しい向きになるよう180度回転でき(回転ボタン)、
   手前側(下段)はそのままの向きで表示する(マイクボタンは通常時と同じ
   下部固定のまま)。マスのDOM自体は常に8個描画しておき、実際に使う
   人数を超える分はJSで非表示にする(人数切り替え時にDOMを作り直さずに
   済むようにするため)。 */
.meeting-container {
  flex: 1;
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
}
.meeting-container[hidden] {
  display: none;
}
.meeting-container[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.meeting-container[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.meeting-container[data-count="8"] { grid-template-columns: repeat(4, 1fr); }

.meeting-pane.pane-hidden {
  display: none;
}

/* 下段(手前側)のマスだけ、下部固定のマイクボタンに文字が隠れないよう
   余白を確保する。何番目までが下段かは人数によって変わる。 */
.meeting-container[data-count="4"] .meeting-pane:nth-child(n+3) { padding-bottom: calc(10px + var(--mic-h)); }
.meeting-container[data-count="6"] .meeting-pane:nth-child(n+4) { padding-bottom: calc(10px + var(--mic-h)); }
.meeting-container[data-count="8"] .meeting-pane:nth-child(n+5) { padding-bottom: calc(10px + var(--mic-h)); }

.meeting-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  border: 2px solid #e5e8eb;
  /* 上側2マスの回転(transform)はJSがインラインスタイルで切り替える
     (右上の回転ボタンで個別に180度反転できるようにするため)。ここでは
     アニメーションだけ指定しておく。下側2マスは回転機能自体が無いため
     常にCSSの初期値(回転なし)のまま。 */
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.3s ease;
}

.meeting-pane-rotate-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-mid);
}

.meeting-pane-rotate-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.meeting-pane-drag-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-mid);
  /* ドラッグ中にブラウザ側のスクロール等が割り込まないようにする */
  touch-action: none;
}

.meeting-pane-drag-handle svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.meeting-pane.dragging {
  opacity: 0.5;
}

.meeting-pane.drop-target {
  outline: 3px dashed var(--staff-color);
  outline-offset: -3px;
}

/* 各マスの枠色を、そのマスの発言が他のマスで表示される時の吹き出し色
   (bubble-speaker-1〜4)と揃える。マスの色を見れば、他のマスでどの色の
   吹き出しがその人の発言かが一目で分かるようにするため。話している間は
   同じ色のまま枠を濃く(box-shadowで強調)する。カスタムプロパティ経由の
   間接参照はSafari等で話者切り替え時に再描画されないことがあるため、
   組み合わせごとに直接色を指定する。 */
.meeting-pane.pane-color-1 { border-color: #f3cf8e; }
.meeting-pane.pane-color-2 { border-color: #d8b4fe; }
.meeting-pane.pane-color-3 { border-color: #99e2da; }
.meeting-pane.pane-color-4 { border-color: #f3a8a8; }
.meeting-pane.pane-color-5 { border-color: #a8c8f8; }
.meeting-pane.pane-color-6 { border-color: #a8e0a0; }
.meeting-pane.pane-color-7 { border-color: #f5cd85; }
.meeting-pane.pane-color-8 { border-color: #f5aed4; }

/* 話している間は枠を太くして点滅させ、誰が話しているか一目で分かるようにする。 */
@keyframes meeting-pane-blink-1 {
  0%, 100% { border-color: #a15c00; box-shadow: 0 0 0 4px #a15c00; }
  50% { border-color: #f3cf8e; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-2 {
  0%, 100% { border-color: #7e22ce; box-shadow: 0 0 0 4px #7e22ce; }
  50% { border-color: #d8b4fe; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-3 {
  0%, 100% { border-color: #0d7d72; box-shadow: 0 0 0 4px #0d7d72; }
  50% { border-color: #99e2da; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-4 {
  0%, 100% { border-color: #b91c1c; box-shadow: 0 0 0 4px #b91c1c; }
  50% { border-color: #f3a8a8; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-5 {
  0%, 100% { border-color: #1d4ed8; box-shadow: 0 0 0 4px #1d4ed8; }
  50% { border-color: #a8c8f8; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-6 {
  0%, 100% { border-color: #15803d; box-shadow: 0 0 0 4px #15803d; }
  50% { border-color: #a8e0a0; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-7 {
  0%, 100% { border-color: #b45309; box-shadow: 0 0 0 4px #b45309; }
  50% { border-color: #f5cd85; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-8 {
  0%, 100% { border-color: #be185d; box-shadow: 0 0 0 4px #be185d; }
  50% { border-color: #f5aed4; box-shadow: 0 0 0 4px transparent; }
}
@keyframes meeting-pane-blink-staff {
  0%, 100% { border-color: var(--staff-color); box-shadow: 0 0 0 4px var(--staff-color); }
  50% { border-color: #e5e8eb; box-shadow: 0 0 0 4px transparent; }
}

.meeting-pane.speaking { border-width: 4px; }
.meeting-pane.pane-color-1.speaking { animation: meeting-pane-blink-1 1s ease-in-out infinite; }
.meeting-pane.pane-color-2.speaking { animation: meeting-pane-blink-2 1s ease-in-out infinite; }
.meeting-pane.pane-color-3.speaking { animation: meeting-pane-blink-3 1s ease-in-out infinite; }
.meeting-pane.pane-color-4.speaking { animation: meeting-pane-blink-4 1s ease-in-out infinite; }
.meeting-pane.pane-color-5.speaking { animation: meeting-pane-blink-5 1s ease-in-out infinite; }
.meeting-pane.pane-color-6.speaking { animation: meeting-pane-blink-6 1s ease-in-out infinite; }
.meeting-pane.pane-color-7.speaking { animation: meeting-pane-blink-7 1s ease-in-out infinite; }
.meeting-pane.pane-color-8.speaking { animation: meeting-pane-blink-8 1s ease-in-out infinite; }
.meeting-pane.speaking:not([class*="pane-color-"]) {
  animation: meeting-pane-blink-staff 1s ease-in-out infinite;
}

/* 会議モード中は、1対1のキオスク画面向けの操作(自分の言語・対面表示・
   次のお客様・相手の言語バッジ)を隠して混乱を避ける。 */
body.meeting-mode-active .menu-item:has(.staff-lang-wrap),
body.meeting-mode-active #face-to-face-btn,
body.meeting-mode-active #reset-btn,
body.meeting-mode-active #partner-badge {
  display: none;
}

/* マスは180deg回転していることがあるが、ネイティブの<select>のドロップ
   ダウン一覧はOS側で描画されるためCSSの回転が効かず、選択欄だけ逆さまで
   一覧だけ正立、という向きの食い違いが起きてしまう。そのため、マスの中に
   収まる自前のドロップダウン(ボタン+リスト)に置き換え、マスの回転ごと
   一覧も一緒に回転するようにしている。 */
.meeting-lang-picker {
  position: relative;
  width: 100%;
  max-width: 160px;
  flex-shrink: 0;
}

.meeting-lang-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid #dcdfe3;
  border-radius: 8px;
  background: #f8f9fa;
  color: var(--text-dark);
  font-size: 0.8125em;
  font-family: inherit;
}

.meeting-lang-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-lang-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: var(--text-mid);
}

.meeting-lang-trigger[aria-expanded="true"] .meeting-lang-caret {
  transform: rotate(180deg);
}

.meeting-lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 132px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1.5px solid #dcdfe3;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.meeting-lang-menu.open {
  display: block;
}

.meeting-lang-option {
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 0.8125em;
  color: var(--text-dark);
}

.meeting-lang-option[aria-selected="true"] {
  background: #e8f5ee;
  color: var(--staff-color-dark);
  font-weight: 700;
}

/* 各マスの会話表示は、対面表示・通常画面と同じ吹き出し(bubble-row/bubble)を
   再利用する。マスが画面の1/4しかないため、文字サイズ・余白だけ少し
   小さくしている。 */
.meeting-chat {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px;
  -webkit-overflow-scrolling: touch;
}

.meeting-pane .bubble-row { max-width: 92%; }
.meeting-pane .bubble { padding: 0.5em 0.75em; }
.meeting-pane .bubble-main { font-size: 1.05em; }
.meeting-pane .bubble-sub { font-size: 0.85em; margin-top: 4px; }
.meeting-pane .bubble-tag { font-size: 0.7em; }
.meeting-pane .empty-hint { font-size: 0.8em; margin: auto; }

.bubble-row { display: flex; flex-direction: column; max-width: 82%; }
.bubble-row.visitor { align-self: flex-start; align-items: flex-start; }
.bubble-row.staff { align-self: flex-end; align-items: flex-end; }

.bubble-tag {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #8e9299;
  margin-bottom: 5px;
  padding: 0 4px;
}

.bubble {
  border-radius: 18px;
  padding: 0.9em 1.2em;
  box-shadow: 0 2px 10px rgba(28, 30, 33, 0.05);
}

.bubble-row.visitor .bubble {
  background: var(--visitor-bg);
  border: 1px solid var(--hairline);
  border-top-left-radius: 6px;
}
.bubble-row.staff .bubble {
  /* テーマでどんな色に変えても成立するよう、固定色のグラデーションではなく
     insetハイライトで上品な立体感を出す */
  background: var(--staff-color);
  color: #fff;
  border-top-right-radius: 6px;
  box-shadow:
    0 4px 14px rgba(26, 41, 64, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* 声紋で識別した話者の色分け。会話中に登場した順に1→2→3→4と別の色を
   割り当てる(同じ話者の声が再度出てきたら同じ色)。彩度を抑えた
   上品なトーンで、地の白との調和を保ちながら判別できるようにする。 */
.bubble-row.bubble-speaker-1 .bubble { background: #faf3e6; border: 1px solid #e5d3ac; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-1 .bubble-tag { color: #8a6414; }

.bubble-row.bubble-speaker-2 .bubble { background: #f4eef7; border: 1px solid #d5c3e0; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-2 .bubble-tag { color: #6d4d85; }

.bubble-row.bubble-speaker-3 .bubble { background: #e9f4f2; border: 1px solid #b8d9d3; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-3 .bubble-tag { color: #2c6e63; }

.bubble-row.bubble-speaker-4 .bubble { background: #f9edec; border: 1px solid #e3bcb8; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-4 .bubble-tag { color: #9c3f38; }

/* 6人・8人会議モードでは話者(マス)の数が増えるため、色も8種類まで
   用意しておく。 */
.bubble-row.bubble-speaker-5 .bubble { background: #edf1f9; border: 1px solid #bfcbe6; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-5 .bubble-tag { color: #3b5488; }

.bubble-row.bubble-speaker-6 .bubble { background: #eef4e9; border: 1px solid #c3d6b6; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-6 .bubble-tag { color: #4c7038; }

.bubble-row.bubble-speaker-7 .bubble { background: #f8f1e7; border: 1px solid #e0cba6; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-7 .bubble-tag { color: #8a5f1e; }

.bubble-row.bubble-speaker-8 .bubble { background: #f8eef3; border: 1px solid #e0bfd0; border-top-left-radius: 6px; }
.bubble-row.bubble-speaker-8 .bubble-tag { color: #97456e; }

/* 2段目の高精度照合で吹き出しの内容が事後に差し替わった時の一瞬のハイライト。
   無言で文字が変わると読んでいる最中に混乱するため、控えめなパルスで
   「今更新された」ことだけを知らせる。 */
@keyframes bubble-corrected-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}
.bubble-row.bubble-corrected-flash .bubble {
  animation: bubble-corrected-pulse 1.2s ease-out;
}

/* 吹き出しの「未確定/確定」の印(2026-09-13)。表示直後は数秒後の事後照合で
   文言が変わり得るため、右下に小さな点をゆっくり明滅させて「まだ直るかも
   しれない」ことを示す。サーバーの確定合図(settled)で小さなチェックに
   変わり、2秒ほどで消える。大げさにならないよう、点は7px・チェックは
   文字サイズの半分程度に抑える。 */
@keyframes bubble-settled-fade {
  0% { opacity: 0.85; transform: scale(1.15); }
  25% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.bubble-row.bubble-pending .bubble,
.bubble-row.bubble-settled .bubble {
  position: relative;
}
/* 未確定の印: 小さな輪がゆっくり回る(ローディング型。2026-09-14 ユーザー選択)。
   輪は薄い文字色、上側の一部だけ少し濃くして回転が分かるようにする。 */
@keyframes bubble-pending-spin {
  to { transform: rotate(360deg); }
}
.bubble-row.bubble-pending .bubble::after {
  content: "";
  position: absolute;
  right: 0.55em;
  bottom: 0.5em;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 16%, transparent);
  border-top-color: color-mix(in srgb, currentColor 60%, transparent);
  animation: bubble-pending-spin 1s linear infinite;
  pointer-events: none;
}
.bubble-row.bubble-settled .bubble::after {
  content: "\2713";
  position: absolute;
  right: 0.45em;
  bottom: 0.3em;
  font-size: 0.75em;
  line-height: 1;
  color: currentColor;
  opacity: 0;
  animation: bubble-settled-fade 2.4s ease-out forwards;
  pointer-events: none;
}

.bubble-main {
  font-size: 1.625em;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

.bubble-sub {
  font-size: 0.9375em;
  margin-top: 8px;
  opacity: 0.75;
  line-height: 1.4;
  word-break: break-word;
}

.bubble-row.staff .bubble-sub { color: rgba(255,255,255,0.85); }
.bubble-row.visitor .bubble-sub { color: var(--text-mid); }

.bubble-error {
  align-self: center;
  color: var(--danger);
  background: #f9ecea;
  border: 1px solid #eccfcb;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.875em;
}

.bubble-notice {
  align-self: center;
  color: var(--text-mid);
  background: #ecebe6;
  border: 1px solid var(--hairline);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.8125em;
  letter-spacing: 0.02em;
}

/* ---------- マイクエリア ---------- */
.mic-area {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--mic-h);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(243,242,238,0) 0%, rgba(243,242,238,0.96) 30%);
}

.mic-status { font-size: 0.875em; color: var(--text-mid); letter-spacing: 0.03em; margin: 0; }

.mic-btn {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* テーマのアクセント色がどんな色でも成立するよう、色はvarのまま
     insetハイライト+影で質感を出す */
  background: var(--accent-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 12px 30px rgba(20, 30, 48, 0.35),
    inset 0 2px 2px rgba(255, 255, 255, 0.22),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.mic-btn:active { transform: scale(0.96); }
.mic-btn svg { width: 36px; height: 36px; fill: currentColor; }
.mic-btn svg.icon-svg-hidden { display: none !important; }
.mic-btn:disabled { background: #b7b5b0; border-color: transparent; box-shadow: none; }

.mic-btn.recording {
  background: linear-gradient(160deg, #c8564d 0%, var(--danger) 55%, #8d2a23 100%);
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(179, 55, 47, 0.4), 0 12px 30px rgba(20,30,48,0.3); }
  70% { box-shadow: 0 0 0 22px rgba(179, 55, 47, 0), 0 12px 30px rgba(20,30,48,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(179, 55, 47, 0), 0 12px 30px rgba(20,30,48,0.3); }
}

.mic-btn.processing { background: linear-gradient(160deg, #d9a13a 0%, #b9821f 100%); }

.mic-btn.listening {
  animation: pulse-listening 2.4s infinite;
}

@keyframes pulse-listening {
  0% { box-shadow: 0 0 0 0 rgba(34, 52, 77, 0.35), 0 12px 30px rgba(20,30,48,0.35); }
  70% { box-shadow: 0 0 0 18px rgba(34, 52, 77, 0), 0 12px 30px rgba(20,30,48,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(34, 52, 77, 0), 0 12px 30px rgba(20,30,48,0.35); }
}

.mic-btn.starting {
  background: #8b93a0;
  animation: pulse-starting 0.9s infinite;
  cursor: wait;
}

@keyframes pulse-starting {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.bubble-loading {
  display: inline-flex;
  gap: 4px;
}
.bubble-pending .bubble { opacity: 0.85; }

/* ---------- 設定画面 ---------- */
.settings-body { height: 100dvh; background: var(--bg); }
.settings-main { padding: 24px 16px; display: flex; justify-content: center; }
.settings-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.settings-card h2 { margin-top: 0; font-size: 19px; }
.settings-desc { color: var(--text-mid); font-size: 14px; line-height: 1.6; }
.settings-saved { color: var(--staff-color-dark); font-weight: 700; font-size: 14px; }
.settings-form label { display: block; font-size: 14px; color: var(--text-mid); margin-bottom: 12px; }
.settings-form input {
  display: block; width: 100%; margin-top: 6px; padding: 14px 16px;
  font-size: 16px; border: 1.5px solid #dcdfe3; border-radius: 12px; background: #f8f9fa;
}
.settings-form button {
  padding: 12px 24px; font-size: 15px; font-weight: 700; color: #fff;
  background: #0c4a8c; border: none; border-radius: 10px; cursor: pointer;
}
.settings-current { font-size: 14px; color: var(--text-mid); margin-top: 16px; }
.settings-empty { color: var(--danger); }