/* ==========================================================================
   言語セレクタのカスタム listbox（国旗つき・候補が多いときだけ検索つき）
   - 挙動は lang_select.js（宣言的 data-vg-lang-select）。ここは見た目だけ。
   - 上下どちらに開くかは JS が `.vg-langdd--up` を付けて表す（可視領域は visualViewport 実測）。
   - **ネイティブ <select> は DOM に残す**（状態の真実源・送信・no-JS フォールバック）。
     .vg-langdd__native は「視覚的に隠す」だけで display:none にはしない。
   - 色は全てトークン参照（生 hex 禁止）＝ダーク/ライト両対応。
   - font-size は 16px 以上（--fs-base）で iOS の入力ズームを誘発しない。
   - タップ領域は --tap-min（44px）以上。
   ========================================================================== */

.vg-langdd {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
}

/* ネイティブ select を視覚的に隠す（DOM 保持＝送信・既存 change ハンドラ・a11y ラベル温存）。
   display:none / visibility:hidden は使わない（一部ブラウザで送信や束縛の扱いが変わる）。 */
.vg-langdd__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- トグル（現在選択の旗＋言語名＋▾） ---- */
.vg-langdd__button {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--tap-min, 44px);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
}
.vg-langdd__button:hover { border-color: var(--c-accent); }
.vg-langdd__button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.vg-langdd__button[disabled] { opacity: 0.55; cursor: not-allowed; }

.vg-langdd__current {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 auto;
}
.vg-langdd__current-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vg-langdd__caret {
  flex: 0 0 auto;
  color: var(--c-ink-muted);
  font-size: 0.75em;
  transition: transform 0.15s ease;
}
.vg-langdd.is-open .vg-langdd__caret { transform: rotate(180deg); }

/* ページ側が自前のトリガ表示を持つ場合（data-vg-langdd-trigger）。器は素通しにする。 */
.vg-langdd--bare { display: contents; }

/* ---- パネル ---- */
.vg-langdd__panel {
  position: absolute;
  z-index: var(--z-popover, 50);
  top: calc(100% + var(--sp-1));
  bottom: auto;
  inset-inline-start: 0;
  /* 高さを可視領域に合わせて切るのは JS（placePanel が max-height を付ける）。切った分を
     listbox 側のスクロールへ逃がすため、器を縦フレックスにして list だけ縮ませる。
     この契約が無いと max-height が検索欄ごと押し潰す／はみ出して見切れる。 */
  display: flex;
  flex-direction: column;
  /* JS は**外形**（getBoundingClientRect）で可視領域と突き合わせて max-height を決めるので、
     max-height も外形でなければ 18px（枠＋内側余白）はみ出す。app.css の全体リセットが
     既に border-box を敷いているため今は冗長だが、リセットの届かない場所へ移しても
     壊れないよう明示しておく（＝この1行だけ外しても現状は赤くならない）。 */
  box-sizing: border-box;
  min-width: 100%;
  /* 狭い親（ヘッダの言語スイッチャ等）でも読める幅を確保しつつ、画面幅は超えない。 */
  width: max-content;
  max-width: min(22rem, calc(100vw - 2 * var(--sp-3)));
  padding: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.vg-langdd__panel[hidden] { display: none; }

/* 下に入りきらないときは上へ開く（JS の placePanel が付ける）。
   iPhone でソフトキーボードが上がると可視領域は半分ほどに縮み、下開きのままでは候補が
   1件ほどしか見えない。「入るなら下・入らないなら上」を CSS 側の1クラスで表現する。 */
.vg-langdd--up .vg-langdd__panel {
  top: auto;
  bottom: calc(100% + var(--sp-1));
}
/* --bare は display:contents で器が消えるため、パネルは「トリガを含む position:relative の
   祖先」基準になる。static 位置（キャレットの後ろ）に落ちると横へ飛び出すので左端へ固定する。 */
.vg-langdd--bare .vg-langdd__panel { inset-inline-start: 0; inset-inline-end: auto; }

.vg-langdd__search {
  display: block;
  width: 100%;
  /* パネルの高さを切っても検索欄は縮ませない（縮むとタップ領域 44px を割る）。 */
  flex: 0 0 auto;
  min-height: var(--tap-min, 44px);
  margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg, var(--c-surface));
  color: var(--c-ink);
  font-family: inherit;
  /* **16px を下回らせない。** iOS Safari は 16px 未満の入力欄にフォーカスすると
     ページを自動ズームし、拡大された状態から戻れずパネルごと画面外へ出る。トークンが
     将来小さくされても割り込まないよう max() で下限を持たせる（トークン参照は維持）。 */
  font-size: max(16px, var(--fs-base));
}
.vg-langdd__search::placeholder { color: var(--c-ink-muted); opacity: 1; }
.vg-langdd__search:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }

.vg-langdd__list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* パネルの高さを切ったとき、縮む係はここだけ。overflow-y:auto のフレックス項目は
     自動最小サイズが既に 0 なので実質は明示に過ぎない（外しても現状は赤くならない）が、
     overflow を変えた瞬間に min-content で突っ張って見切れるため契約として書いておく。 */
  flex: 1 1 auto;
  min-height: 0;
  /* iOS のアドレスバー展開で 60vh が見切れるので svh 対応端末は小さい方を採る。 */
  max-height: min(50svh, 50vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 検索欄が無い画面（候補が少ない）では listbox 自身がフォーカスを受ける。輪郭を出さないと
   キーボード操作の人が「どこにいるのか」を見失う。 */
.vg-langdd__list:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.vg-langdd__option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min, 44px);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  cursor: pointer;
  user-select: none;
}
.vg-langdd__option[hidden] { display: none; }
.vg-langdd__label { min-width: 0; flex: 1 1 auto; }

/* ホバーとキーボードのアクティブ行（aria-activedescendant）は同じ強調にする。 */
.vg-langdd__option:hover,
.vg-langdd__option.is-active { background: var(--c-surface-2); }

/* 選択中は色だけに頼らず太字も併用（1.4.1 色のみで情報を伝えない）。 */
.vg-langdd__option[aria-selected="true"] { font-weight: var(--fw-semibold, 600); color: var(--c-accent); }

.vg-langdd__option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

.vg-langdd__empty {
  flex: 0 0 auto;
  margin: var(--sp-2) 0 0;
  padding: 0 var(--sp-3) var(--sp-2);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}
.vg-langdd__empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vg-langdd__caret { transition: none; }
}

/* ---- 設置先ごとの微調整（既存レイアウトを壊さない） ---- */
/* トップバーの言語スイッチャ: 既存 .vg-lang-select と同じコンパクトさに揃える。 */
.vg-lang-switch .vg-langdd__button {
  max-width: 9.5rem;
  min-height: 40px;
  padding: 4px 8px;
  border-radius: 10px;
}
@media (max-width: 480px) {
  .vg-lang-switch .vg-langdd__button { max-width: 8rem; }
}
/* トップバーは右端にあるのでパネルを右揃えにする（画面外へ出さない）。 */
.vg-lang-switch .vg-langdd__panel { inset-inline-start: auto; inset-inline-end: 0; }

/* /interpret は自前のトリガ（言語名＋▾）を借りる（data-vg-langdd-trigger）。昇格前は
   透明オーバレイ <select> が広い当たり判定を担っていたが、昇格でそれが隠れるため、
   借りた要素自身にタップ領域 44px を持たせる。**昇格後にだけ効かせる**ため、
   lang_select.js が付ける role="button" を条件にする（JS 無効時は現状のまま）。 */
[data-interpret-target-name][role="button"] {
  min-height: var(--tap-min, 44px);
  cursor: pointer;
}

/* 議事録の設定パネル/RTカードは幅が狭いので器を横いっぱいに使う。 */
.vg-tplpick .vg-langdd,
.vg-rt__ctrl .vg-langdd,
.vg-field .vg-langdd,
.vg-mtg-langpick .vg-langdd { display: block; width: 100%; }

/* ☰（その他メニュー）の中の言語ピッカー。
   背景: ログイン後は右上の言語スイッチャを出さない判断のため、ここが**唯一の常設導線**になる。
   他の行は <a> で行いっぱいが当たり判定なので、ここだけ小さいと押しづらさが目立つ。器を
   伸ばして、行のどこを押しても開くようにする（旗＋言語名は読めない言語からの復帰の手がかり）。 */
.vg-nav-link--lang { gap: var(--sp-2); }
.vg-nav-link--lang .vg-langdd { flex: 1 1 auto; min-width: 0; }
.vg-nav-link--lang .vg-langdd__button { width: 100%; }