/* ============================================================
   PresenceAI components.css
   仕様: docs/18_frontend_design.md

   再利用される UI コンポーネント定義の集約先。
   - badge / agent-badge / precision / status / panel
   - card-link / choice-card / chip / avatar-img
   - metric-grid / metric-value / summary-clickable / empty-state
   - notification-card / code-inline / divider / quote-block
   - flash / modal / avatar / avatar-upload / public-profile / auth-card / footer
     （元 base.css の component セクションを末尾に集約）

   base.css 側に残っているのは「変数 / リセット / typography / app-shell の layout /
   既存基本コンポーネント（btn / form / card / data-table / page-header / pagination /
   list-item / danger-zone / filter-bar）」。
   ============================================================ */

/* ===== バッジ =====
   形（padding/radius/font-size）+ 改行禁止 + flex 親で縮まない を 1 箇所に集約。

   使い方:
     <span class="badge badge--neutral">タグ</span>
     <span class="badge badge--info">処理中</span>
     <span class="badge badge--danger">エラー</span>
     <span class="badge badge--pill">{{ count }} 未読</span>  (角丸999px)

   white-space:nowrap / flex-shrink:0 は .agent-badge / .precision にも適用
   （flex 親で squeeze されて日本語が文字単位で縦折返しするのを防ぐ。
   show.html の「ルール」が縦に崩れた事例）。
*/
.badge,
.agent-badge,
.precision {
    white-space: nowrap;
    flex-shrink: 0;
}
.badge {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}
.badge--neutral { background: var(--color-bg-subtle); color: var(--color-text); }
.badge--info    { background: #1d4ed8; color: #fff; }
.badge--success { background: #dcfce7; color: #166534; }
.badge--warning { background: #fef3c7; color: #92400e; }
.badge--danger  { background: var(--color-danger); color: #fff; }
.badge--accent  { background: #dbeafe; color: #1e40af; }
/* Solid バリアント（背景が単色濃色のバッジ） */
.badge--success-solid { background: #166534; color: #fff; }
.badge--warning-solid { background: #b45309; color: #fff; }
.badge--neutral-solid { background: #6b7280; color: #fff; }
/* 会議録音／取込議事録の種別識別 */
.badge--imported      { background: #7c3aed; color: #fff; }
.badge--recording     { background: #1f2937; color: #fff; }
/* 処理中（オレンジ。文字起こし・チャンク化等の進行中状態） */
.badge--processing    { background: #ea580c; color: #fff; }
/* テーマタグ（紫系。memos / minutes 等の自動分類ラベル） */
.badge--theme   { background: #ede9fe; color: #5b21b6; }

/* ===== Agent Badge =====
   エージェント種別（Person / Rule）の識別バッジ。 */
.agent-badge {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: #fff;
}
.agent-badge--person { background: var(--color-person-tag); }
.agent-badge--rule   { background: var(--color-rule-tag); }
/* チャット画面など縦余白を詰めたい場面で使う薄型バリアント */
.agent-badge--xs     { padding: 1px var(--sp-2); }

/* ===== 認識精度バッジ（文字起こし試行ログ） =====
   読み取り精度を色分けして表示する。
   95% 以上=良好、80-95%=注意、80% 未満=不足（= 自動再試行の境界）。 */
.precision {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
}
.precision--good { background: #d1fae5; color: #065f46; }
.precision--warn { background: #fef3c7; color: #854d0e; }
.precision--bad  { background: #fee2e2; color: #991b1b; }

/* 細形ピル: 通知件数バッジなど（背景に丸い形を残したいケース） */
.badge--pill { border-radius: 999px; padding: 2px 8px; }
/* 上下 padding を 1px に絞った薄型バッジ（memos / admin 一覧で多用） */
.badge--xs   { padding: 1px var(--sp-2); border-radius: 3px; }

/* ===== Panel: 内部 box 表示 =====
   グレー背景・角丸・padding 内蔵の小ブロック（コードブロック / 内訳表示等）。
   使い方: <div class="panel">...</div>
           <pre class="panel panel--code">...</pre>

   背景色は #f9fafb（青みのあるほぼ白）。--color-bg-subtle (#f5f5f5) より青寄りで
   議事録プレビュー等で長文を読むときに目に優しい。元 inline で多用されていた
   var(--color-surface-alt, #f9fafb) のフォールバック値を踏襲。 */
.panel {
    background: #f9fafb;
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
}
.panel--bordered { border: 1px solid var(--color-border); background: var(--color-bg); }
.panel--code {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    white-space: pre-wrap;
    overflow: auto;
    max-height: 400px;
}
.panel--scroll    { overflow-y: auto; max-height: 600px; }
.panel--scroll-md { overflow-y: auto; max-height: 400px; }
/* Card 上に直接 bg を被せる「ソフト」バリアント（panel と異なり padding/radius は親 .card に任せる） */
.panel--warning-soft { background: #fef3c7; }
.panel--success-soft { background: #ecfdf5; }
.panel--info-soft    { background: #eff6ff; }

/* ===== Key-Value List =====
   「ラベル：値」を縦に並べる定義リスト（dl > dt/dd）。grid の max-content 列で
   すべての dt が最長ラベル幅に揃うため、ラベル列幅と値（dd）の左端が自動で揃う。
   識別子の確認表示など（例: 初期パスワード変更ゲートのアカウント情報）に使う。 */
.kv-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--sp-3);
    row-gap: var(--sp-1);
    margin: 0;
}
.kv-list dt { color: var(--color-text-muted); }
.kv-list dd { margin: 0; }

/* danger 枠の Card（削除等の取消不能ブロックを囲む際に使う。
   .card クラスの border-color だけを上書きする想定） */
.card--danger-border { border-color: var(--color-danger); }

/* ===== Meta Row =====
   バッジ・メタ情報（更新日時・件数など）を横一列に並べる汎用行。
   使い方: <div class="meta-row">...</div>
   （guest_threads/show.html でゲスト種別バッジ＋メール＋操作ボタンの整列に使用） */
.meta-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}

/* ===== Card Link =====
   ブロック全体がリンクになるカード型 a 要素。下線なし・文字色継承・下余白。
   一覧画面でカードリンクとして並べる用途で多用される。
   使い方: <a class="card-link card" href="...">...</a> */
.card-link {
    display: block;
    margin-bottom: var(--sp-3);
    text-decoration: none;
    color: inherit;
}
.card-link:hover { text-decoration: none; }

/* ===== Choice Card =====
   radio / checkbox を選択肢として並べるための、囲い付き label。
   使い方:
     <label class="choice-card">
       <input type="radio" name="x" value="a">
       <span>...</span>
     </label>
*/
.choice-card {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}
.choice-card--top {
    align-items: flex-start;
    border-radius: var(--radius-sm);
}

/* ===== Metric Grid / Metric Value =====
   ダッシュボード・メトリクス画面の「カード並べ」と「大数字表示」。
   - .metric-grid: auto-fit minmax で、画面幅に応じてカラム数を自動調整
   - .metric-value: 大きく目立たせる数字表示 */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
}
.metric-grid--md { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.metric-grid--lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }

.metric-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary, #2E4D8A);
    margin-top: var(--sp-1);
}
.metric-value--lg { font-size: 2rem; }

/* ===== Summary Clickable =====
   <details><summary> 内で「クリックできる」見た目を出す共通装飾。
   既定で cursor + 上下余白を持つ。Flex 行で使うときは .summary-clickable--flex。
   使い方:
     <summary class="summary-clickable">タイトル</summary>
     <summary class="summary-clickable--flex">アイコン 名前 メタ</summary>
*/
.summary-clickable {
    cursor: pointer;
    padding: var(--sp-2) 0;
}
.summary-clickable--flex {
    cursor: pointer;
    padding: var(--sp-2) 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* ===== Empty State =====
   「該当データなし」「まだ通知がありません」等のセンタリング + ミュート文字。 */
.empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--sp-4);
}

/* ===== Inline Code Chip =====
   本文中で <code> をハイライト表示する小さな bg + radius のチップ。
   .panel--code は複数行のコードブロック用なので、こちらは 1 行向け。 */
.code-inline {
    background: #f3f4f6;
    padding: 2px 4px;
    border-radius: 3px;
}

/* ===== Divider =====
   フォーム内の論理的セクション区切り（hr 代替）。 */
.divider {
    margin: var(--sp-3) 0;
    border: none;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* ===== Chip =====
   インライン small タグ（バッジより枠線あり / 細余白）。 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

/* ===== Avatar img =====
   <img> 要素のみで丸型アバター表示するときの共通装飾。 */
.avatar-img {
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-subtle);
}

/* ===== 引用ブロック =====
   チャット履歴・メッセージ等の引用部分（左罫線 + ミュート文字）。 */
.quote-block {
    font-size: var(--fs-sm);
    color: #374151;
    padding-left: var(--sp-3);
    border-left: 3px solid var(--color-border, #e5e7eb);
}

/* ===== Panel soft (panel--bordered よりも色味が薄い、囲いなし) =====
   inline で表示するパネル風ブロック。 */
.panel--soft {
    background: var(--color-bg-subtle);
    border-radius: var(--radius);
    color: var(--color-text);
}

/* ===== Notification Card =====
   通知一覧の各通知カード。未読時はうっすら青背景で識別する。 */
.notification-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: #fff;
}
.notification-card--unread { background: #f0f9ff; }


/* ============================================================
   base.css から移管したコンポーネント
   ============================================================ */

/* ===== フラッシュメッセージ ===== */
.flash {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
}

.flash--success { background: #d1fae5; color: #065f46; border: 1px solid var(--color-success); }
.flash--error   { background: #fee2e2; color: #991b1b; border: 1px solid var(--color-danger); }

/* ===== 認証ページ ===== */
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
}

.auth-card { width: 100%; max-width: 420px; }

.auth-card__title    { text-align: center; margin-bottom: var(--sp-1); font-size: var(--fs-2xl); }
.auth-card__subtitle { text-align: center; margin-bottom: var(--sp-6); color: var(--color-text-muted); font-size: var(--fs-sm); }
.auth-card__logo {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 280px;
    height: auto;
}

/* ===== フッター ===== */
.footer {
    padding: var(--sp-6) var(--sp-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
    margin-top: var(--sp-8);
}

/* ===== アバター ===== */
.avatar {
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface, #f1f5f9);
    flex-shrink: 0;
    vertical-align: middle;
}
.avatar--sm { width: 32px; height: 32px; }
.avatar--md { width: 40px; height: 40px; }
.avatar--lg { width: 128px; height: 128px; }

/* ===== モーダル（<dialog> ベース） =====
   docs/18_frontend_design.md §モーダル

   ⚠️ 重要: <dialog> の中央配置は CSS だけでは確実に効かない（過去 2 回ハマった）。
   コミット 5d42758 で確立した 3 層対策を必ず守ること:
     1. <dialog> タグに inline style で
        position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0
        を直接書く（CSS specificity / cache / 親 transform の影響を排除）
     2. <div class="modal__body"> に inline style で padding と
        max-height:90vh; overflow-y:auto を直接書く
     3. JS で開く直前に document.body.appendChild(dialog) して <body> 直下に移動
        （親要素の position / transform が中央配置を妨げる現象を回避）
   実例: src/app/templates/agents/person_profile.html L260-283
   ここの base.css ルールは fallback。inline style に上書きされる前提。

   modal__close を absolute 配置するための containing block として
   position: relative を残す（inline style で fixed に上書きされる）。 */
dialog.modal {
    border: none;
    border-radius: var(--radius-md);
    padding: 0;
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    /* dialog 全体でスクロール（max-height を超えた分を内部スクロール）*/
    overflow-y: auto;
    overflow-x: hidden;
}
/* ワイドモーダル（フォーム多めのコンテンツ向け）*/
dialog.modal.modal--wide {
    width: min(720px, 90vw);
}
dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}
.modal__body {
    padding: var(--sp-5);
    box-sizing: border-box;
}
/* 内容が長いモーダル: ヘッダ・フッターを固定し、本文だけスクロール（常時表示・スマホ対応）。
   dialog 側 modal__body を「padding:0 + flex 縦 + overflow:hidden」にし、
   ヘッダを .modal-header、本文を .modal-scroll、ボタンを .modal-footer に入れる。 */
.modal-header {
    flex: 0 0 auto;
    /* 右は × ボタン(32px+余白)分あけ、長いタイトルが × に重ならないようにする */
    padding: var(--sp-5) 44px var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}
.modal-header h2 {
    margin: 0;
}
.modal-scroll {
    flex: 1 1 auto;
    min-height: 0;             /* flex 子で内部スクロールを効かせるのに必須 */
    overflow-y: auto;
    overscroll-behavior: contain; /* 端まで来ても親ページへスクロールを伝播させない */
    padding: var(--sp-5);
}
.modal-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;           /* スマホでは折り返す */
    justify-content: flex-end; /* 操作ボタンは右下（閉じるが最右） */
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--color-border);
    background: #fff;
}
/* モーダル表示中は背景（親ページ）のスクロールを固定し、スクロール抜けを防ぐ。
   modal.js が開閉時に html.modal-open を付与/除去（スクロールバー幅は JS が padding 補正）。 */
html.modal-open {
    overflow: hidden;
}
/* 公開URL QR コードモーダルの画像 */
.qr-modal__img {
    width: 240px;
    height: 240px;
    max-width: 100%;
}
.modal__close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    border: none;
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-xl);
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    z-index: 1;
}
.modal__close:hover { background: var(--color-surface, #f1f5f9); }

/* ===== 公開プロフィール ===== */
.public-profile__header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.public-profile__heading { flex: 1; min-width: 0; }
.public-profile__name {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: 1.3;
}
.public-profile__title {
    margin: var(--sp-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.public-profile__intro {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
.public-profile__intro--empty { color: var(--color-text-muted); }

/* ===== アバター入力プレビュー ===== */
.avatar-upload {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.avatar-upload__preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface, #f1f5f9);
    border: 1px solid var(--color-border);
}

/* ===== インライン SVG アイコン =====
   docs/18_frontend_design.md §7 アイコン
   _layout/_icon_sprite.html の <symbol> を <use> で参照するときのベースクラス。
   サイズは em ベースで親要素の font-size に追従する。
   `stroke: currentColor` により親要素の文字色（録音中の白文字など）を継承する。
   線の属性をここで一括指定し、symbol 側には書かない（定義を 1 箇所に保つ）。 */
.icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* 塗りベースのアイコン（star-filled 等）。線ではなく面で描くため反転させる。 */
.icon--filled {
    fill: currentColor;
    stroke: none;
}

/* 文字と同じ高さに抑えるサイズ修飾子。行内の補助アイコンや、
   ラベルを持たない小さなアイコンボタンで使う。 */
.icon--sm {
    width: 1em;
    height: 1em;
}

/* スプライト本体。symbol の器なので描画させない。
   `display: none` は use の参照ごと無効化してしまうため使えない。
   レイアウトから外し、サイズをゼロにして視覚的にだけ取り除く。 */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ===== 音声入力 =====
   docs/18_frontend_design.md §音声入力 UX
   voice-input.js (data-voice-input 属性) と対になる、横断的に使う共通スタイル。
   円形マイクアイコン + 録音中の脈動アニメーション。PC/スマホ共通で表示する。 */
.voice-input-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;             /* タップターゲット 44px (Apple HIG) */
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}
.voice-input-btn:hover {
    background: var(--color-surface-alt, #f3f4f6);
}
.voice-input-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.voice-input-btn:disabled,
.voice-input-btn[hidden] {
    cursor: not-allowed;
    opacity: 0.5;
}
.voice-input-btn[hidden] { display: none; }

/* 録音中: 赤く脈動。voice-input.js が data-voice-input 要素に
   .is-recording を付け外しする。
   ボタンの形（円形 .voice-input-btn / 矩形 .btn）に関わらず統一した
   ビジュアルにするため、セレクタは [data-voice-input] ベースにする。
   アクセシビリティのため aria-pressed=true も同時に設定される。 */
[data-voice-input].is-recording {
    background: #ef4444;
    color: #fff;
    border-color: #dc2626;
    animation: voice-input-pulse 1.2s infinite ease-in-out;
}
@keyframes voice-input-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* 状態テキスト。voice-input.js が data-state を切り替えて色分けする。
   録音中はテキスト無し（ボタンの脈動が指標）でレイアウトに干渉しない。
   :empty 時は完全に非表示にして、空のときに行や余白を取らないようにする。 */
.voice-input-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.voice-input-status:empty { display: none; }
/* 録音中はテキスト指定がある場合（メモ等）に限り表示される。
   赤系の色で視認性を上げる。 */
.voice-input-status[data-state="recording"]   { color: #dc2626; }
.voice-input-status[data-state="error"]       { color: var(--color-danger); }
.voice-input-status[data-state="unsupported"] { color: var(--color-text-muted); }

/* ===== content_schemas 項目定義の行（種別スキーマ管理の fields エディタ） ===== */
.cs-field-row {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--color-bg);
}
.cs-field-row:last-child { margin-bottom: 0; }
/* 1 行目: 項目名（可変で伸びる）／項目型（固定の狭幅）／削除ボタン。
   狭幅では折り返す。form-field__input/select の width:100% は flex-basis が優先するため上書き不要。 */
.cs-field-row__main {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}
.cs-field-row__label  { flex: 1 1 12rem; min-width: 0; }
.cs-field-row__type   { flex: 0 0 8rem; width: auto; }
.cs-field-row__main [data-remove] { flex: 0 0 auto; }
/* 2 行目: 選択肢入力（可変）＋必須/絞り込みチェック。 */
.cs-field-row__opts {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}
.cs-field-row__choices { flex: 1 1 16rem; min-width: 0; }

/* ===== 既定/お気に入り選択の星トグル（一覧で「既定にする」を1アイコンに統一） =====
   各行を同じ星アイコンに揃えて列のバランスを取る。
   既定は塗りの星（i-star-filled）、非既定は線の星（i-star）。どちらも
   currentColor なので、下の color 指定だけで金／グレーを塗り分けられる。 */
.star-toggle {
    font-size: 1.25rem;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    color: var(--color-text-muted);  /* 非既定（線のみの星）= 淡いグレー */
}
.star-toggle--on { color: #f59e0b; }  /* 現在の既定（塗りの星）= 金（amber-500） */
button.star-toggle { cursor: pointer; transition: color 150ms; }
button.star-toggle:hover { color: #f59e0b; }  /* hover で金（クリックで既定化を示唆） */
button.star-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ===== 話し方・口調（声の再現）の感情×口調エディタ ===== */
.voice-emotion {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--sp-3);
    margin: 0 0 var(--sp-3);
    background: var(--color-bg);
}
.voice-emotion > legend {
    font-weight: 600;
    padding: 0 var(--sp-2);
    color: var(--color-text);
}
.voice-emotion > legend .vp-emo-state {
    font-weight: 600;
    min-width: 14rem;
}
/* 引き金 / 口調の変化 を横並び、各セルに小見出し（入力後も何の欄か分かるように） */
.voice-emotion__row {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.voice-emotion__cell {
    display: block;
    flex: 1 1 12rem;
    min-width: 0;
}
.voice-emotion__cap {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-1);
}


/* ===== チャット添付ファイル（1:1・グループチャット共有）=====
   docs/15_agent_types.md §チャット添付ファイル / docs/27 §4.8。
   1 対 1（chat/index.html）とグループチャット（rooms/show.html）で同一の見た目を
   使うため、page 固有の chat.css ではなく共通の components.css に置く。 */
.chat-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 50%;
    color: var(--color-text);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}
.chat-attach-btn:hover {
    background: var(--color-surface-alt, #f3f4f6);
}
/* 添付を扱えない状態（グループチャットの編集中など）。押せないことを見た目でも示す */
.chat-attach-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.chat-attach-btn:disabled:hover {
    background: transparent;
}

/* 送信前プレビュー（入力カード内の一行） */
.chat-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.chat-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--color-surface-alt, #f3f4f6);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    font-size: var(--fs-sm, 0.875rem);
    max-width: 280px;
}
.chat-attachment-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-attachment-chip__remove {
    background: transparent;
    border: none;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
}
.chat-attachment-chip__remove:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
}

/* 送信済みメッセージ内の添付表示（画像サムネ / ファイルチップ） */
.chat-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    max-width: 100%;
}
.chat-attachment-thumb-link {
    display: inline-block;
    line-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-alt, #f3f4f6);
    text-decoration: none;
}
.chat-attachment-thumb-link:hover {
    border-color: var(--color-accent, #00a4e3);
}
.chat-attachment-thumb {
    display: block;
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.chat-attachment-chip--link {
    text-decoration: none;
    color: var(--color-text, #1f2937);
    cursor: pointer;
}
.chat-attachment-chip--link:hover {
    border-color: var(--color-accent, #00a4e3);
    background: var(--color-surface);
}
.chat-attachment-chip__icon {
    flex-shrink: 0;
    font-size: var(--fs-md, 1rem);
}