/*
 * p1.css — inline style 全廃のための置換クラス (CSP style-src 'self' 対応)
 * ------------------------------------------------------------------
 * 手書きCSS（Tailwind 処理を通さない）。設計トークンは tokens.css 由来の
 * CSS カスタムプロパティ（var(--sp-*) / var(--c-*) / var(--radius-md) /
 * var(--fs-*) 等）を参照する。生の hex/px 直書きは tap 最小 44px 等の機能値のみ。
 *
 * 動的値（幅%・色・CSS変数）は HTML に残さず data-vg-* 属性で渡し、
 * dyn-style.js が CSSOM（element.style）経由で適用する。本ファイルは
 * その「静的な土台」だけを定義する。
 */

/* ====================== レイアウト ヘルパー ====================== */
.vg-flex-1 { flex: 1; min-width: 0; }
.vg-flex-grow-14 { flex: 1 1 14rem; min-width: 0; }
.vg-w-full { width: 100%; }

.vg-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.vg-row-2 { display: flex; gap: var(--sp-2); align-items: center; }
.vg-row-end { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }

.vg-wrap { flex-wrap: wrap; }
.vg-justify-end { justify-content: flex-end; }
.vg-col-full { grid-column: 1 / -1; }

/* 余白 / 間隔 */
.vg-m0 { margin: 0; }
.vg-mt-3 { margin-top: var(--sp-3); }
.vg-mt-4 { margin-top: var(--sp-4); }
.vg-mb-3 { margin-bottom: var(--sp-3); }
.vg-mb-4 { margin-bottom: var(--sp-4); }
.vg-gap-2 { gap: var(--sp-2); }

/* タップ最小領域（機能値 44px は仕様上の固定値） */
.vg-min-h-tap { min-height: 44px; }

/* タイポ / リスト */
.vg-fs-base { font-size: var(--fs-base); }
.vg-list-reset { list-style: none; margin: 0; padding: 0; }

/* vg-field を行方向に上書き（ruby_popover のチェックボックス行など） */
.vg-field-row { flex-direction: row; align-items: center; gap: var(--sp-2); }

/* ====================== 動的値の土台 ====================== */
/* キャラ色の左ボーダー。色は data-vg-border-color を dyn-style.js が
   element.style.borderLeftColor へ適用して上書きする。 */
.vg-cast-color { border-left: 4px solid var(--c-border); }

/* 注:
   - ゲージ幅(width:%)は data-vg-width を dyn-style.js が付与するため定義不要。
     既存のバー高さ/色クラス(vg-quota__fill / Tailwind h-2 bg-*)は温存。
   - --seg-char-color は data-vg-seg-color を dyn-style.js が
     element.style.setProperty('--seg-char-color', ...) で付与するため定義不要。
     消費側(app.css:479)は border-left-color: var(--seg-char-color, var(--c-border))
     とフォールバック前提なので、JS 未適用でも安全。 */

/* ====================== 対話バブル コンポーネント ====================== */
/* dialogue_preview.html の A/B 吹き出し。配色は親の vg-bubble--a / --b で分岐
   （静的クラスのため data-* 不要）。dark: は light-dark() トークンで自動反転。 */
.vg-bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.vg-bubble {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  max-width: 100%;
  justify-content: flex-start;
}
.vg-bubble--b {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.vg-bubble__who {
  flex: 0 0 auto;
  min-width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--c-accent-ink);
  background: var(--c-accent);
}
.vg-bubble--b .vg-bubble__who { background: var(--c-ok); }
/* 話者C(ポッドキャスト3声目)。accent(青)/ok(緑)と異なる紫系。 */
.vg-bubble--c .vg-bubble__who { background: var(--c-accent2); color: var(--c-accent2-ink); }

.vg-bubble__body {
  max-width: 80%;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-ink);
}
.vg-bubble--b .vg-bubble__body { background: var(--c-ok-soft); }
.vg-bubble--c .vg-bubble__body { background: var(--c-accent2-soft); color: var(--c-ink); }

.vg-bubble__emotion {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-1);
}

.vg-bubble__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ====================== 管理画面テーブル（視覚ポリッシュ） ====================== */
/* 列構成に依存しない。管理画面適用エージェントが使う。 */
.vg-table {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.vg-table__head {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  background: var(--c-surface-hover, var(--c-surface));
  font-weight: 600;
}
.vg-table__row { border-top: 1px solid var(--c-border); }
.vg-table__row:hover { background: var(--c-surface-hover, var(--c-surface)); }
.vg-table__row:first-child { border-top: 0; }

/* ── 料金・使用量ページ（vg-billing__*）。従来 CSS 未定義でボタンが密着していた不具合を解消し、
      カード積層＋ボタン群を適切な余白でレイアウトする（商用水準の体裁）。 ── */
.vg-billing {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 56rem;
}
.vg-billing__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.vg-billing__plan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.vg-billing__plan-name { font-size: var(--fs-md, 1rem); }
.vg-billing__plan-fee { margin: var(--sp-2) 0 0; color: var(--c-muted); }
.vg-billing__gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.vg-billing__reset-note,
.vg-billing__manage-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.vg-billing__byok {
  background: var(--c-info-soft, var(--c-surface));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.vg-billing__byok p { margin: 0; }
/* お支払い・プラン変更カード: ラベル→プラン群→管理→追加購入 を縦に余白付きで積む。 */
.vg-billing__manage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.vg-billing__manage-label {
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-md, 1rem);
}
/* プラン変更ボタン群: 横並び＋折返し＋ギャップ（密着の解消）。 */
.vg-billing__plans {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* 各フォームは余白をゼロにし、ボタン間隔は親の gap が担う（縦密着を解消）。 */
.vg-billing__plan-form,
.vg-billing__portal-form,
.vg-billing__topup-form { margin: 0; }