/* =====================================================================
   チャット画面（index.html）固有のスタイル（Issue #163）
   ---------------------------------------------------------------------
   読み込み順: tokens.css → ds-tokens.css → base.css → components.css
               → ds-components.css → ds-shell.css → pages/index.css

   ★ このファイルだけでページの見た目が完結している ★
     検査 [12] が pages/*.css を 1 ページ 1 枚・リンク列の最後に
     限定しているため、他のページ CSS を重ねることはできない。

   DS 適用の要点（旧デザインからの変更点）:
     - サイドバー節が無い（DS §07 パネルとして css/ds-shell.css へ移動）
     - 型階層: 本文 15 / AI発話 14.5(Zen Kaku) / 注釈 12 / コード 13(§03)
     - --accent 系の透過リテラル rgba(94,129,172,*) → rgba(77,163,255,*)
       （Q1: Information On-Dark #4DA3FF 整合）
     - ニューモーフィズム（--nm-*）→ フラットな半透明サーフェス
   ===================================================================== */

input[type="text"], input[type="email"], input[type="password"], textarea {
    font-family: inherit; width: 100%; border-radius: var(--r-field);
    background: rgba(255,255,255,0.06); color: var(--text);
    border: 1px solid rgba(255,255,255,0.12); box-shadow: none;
    outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; padding: 10px 12px;
    font-size: var(--fs-body);
}
input:focus, textarea:focus { border-color: rgba(77,163,255,0.6); box-shadow: var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--text-dim); }
label { color: var(--text-muted); }

/* ── アプリシェル ──
   §07 の地: パネルもメインも角丸カードとして黒キャンバスに浮かべる */
/* body の UA 既定 margin（8px）を落とす。この画面は app-base.css を
   読まないため残っていた（§2.2）。残したままだと
     .app-shell が height:100vh なので body が 8px はみ出す
       → ページ自体が 8px だけ縦スクロールできる
       → サイドパネル（通常フロー）は動くが、会話履歴のドロワー
         （viewport 基準の fixed）は動かず、上下位置がずれる
   という実害がある。ここを 0 にすると外周の余白は各パネルの
   margin: 14px だけで決まり、fixed 要素との座標も一致する。 */
body { margin: 0; }
.app-shell { display: flex; height: 100vh; width: 100%; overflow: hidden; }

/* ── メイン ── */
/* 地には DS モックの「光」を敷く。モックは blur 120〜140px を掛けた
   絶対配置の円 3 つだが、ぼかし済みの放射グラデーションで同じ見え方を
   作れるので background のレイヤーだけで表現する（markup を足さない・
   backdrop-filter を増やさない）。背景レイヤーは内容の後ろに描かれる。

   光の中心は会話が載る中央カラムに置く（四隅から差す形にすると、
   肝心の本文の後ろが一番暗くなってしまう）。3 層目だけ中心を外して
   左上に寄せ、完全な同心円＝ビネットに見えないようにしている。

   枠線と地の塗りは持たせない（板の上に載っている感じを消し、光と本文
   だけが見えている状態にする）。角丸と overflow:hidden は、光を角で
   丸く切ることと、データブラウザーのスライドインを内側に収めるために
   残している。 */
.app-main {
    flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    margin: 14px 14px 14px var(--sp-8);
    border-radius: var(--r-panel);
    border: none;
    background:
        radial-gradient(46% 52% at 50% 30%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.055) 44%, transparent 74%),
        radial-gradient(62% 58% at 54% 66%, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.025) 45%, transparent 76%),
        radial-gradient(40% 46% at 22% 12%, rgba(255,255,255,0.045) 0%, transparent 70%);
}
/* ── チャットヘッダー（markup は js/ds/chat-header.js） ──
   会話タイトル / 環境名・日時・メッセージ数 / 添付ファイル /
   利用者モードトグル / 通知アイコン / オーブ を 1 行に収める。 */
.ds-chat-header {
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0; height: 74px; padding: 0 var(--sp-32);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: transparent;
}
/* タイトルは自然幅（長ければ縮んで省略）。右側の余りは .dsh-right が押し出す */
.dsh-title-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 0 1 auto; }
.dsh-title {
    font-weight: 700; font-size: 16px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 環境名 · 日時 · メッセージ数。コード表記（JetBrains Mono）で 1 行に並べる */
.dsh-meta {
    font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 添付ファイル（この会話で送ったファイル名の一覧）。
   実体へのリンクは張らない（表示用テキストに S3 キーを持たせない設計）。 */
.dsh-files { position: relative; display: flex; flex-shrink: 0; }
.dsh-files-btn {
    display: inline-flex; align-items: center; gap: var(--sp-8);
    height: 36px; padding: 0 14px; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.85); font-size: var(--fs-caption);
    white-space: nowrap; box-shadow: none;
}
.dsh-files-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.28);
}
.dsh-files-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.dsh-files-count { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.6); }
.dsh-files-menu {
    position: absolute; top: 44px; left: 0; z-index: 2;
    min-width: 260px; max-width: 380px; max-height: 320px; overflow-y: auto;
    padding: var(--sp-8); border-radius: var(--r-field);
    background: var(--panel-glass-bg);
    backdrop-filter: var(--panel-glass-blur); -webkit-backdrop-filter: var(--panel-glass-blur);
    border: 1px solid var(--panel-glass-border); box-shadow: var(--panel-glass-shadow);
}
.dsh-file-item {
    display: flex; align-items: center; gap: var(--sp-8);
    padding: 7px 10px; border-radius: var(--r-pill);
    font-size: var(--fs-caption); color: rgba(255,255,255,0.82);
}
.dsh-file-item svg { width: 13px; height: 13px; flex-shrink: 0; color: rgba(255,255,255,0.55); }
.dsh-file-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dsh-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* データブラウザーの開閉（Issue #466）。形はファイルピルと揃え、開いている間
   （aria-pressed="true"）は利用者モードの選択中と同じ白い充実ピルにする */
.dsh-db-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.85); font-size: var(--fs-caption); font-weight: 500;
    white-space: nowrap; box-shadow: none; flex-shrink: 0;
}
.dsh-db-toggle:hover:not(:disabled) {
    background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.28);
}
.dsh-db-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.dsh-db-toggle[aria-pressed="true"],
.dsh-db-toggle[aria-pressed="true"]:hover:not(:disabled) {
    color: var(--ds-ink); background: var(--ds-white); border-color: transparent; font-weight: 700;
}
/* 問合せ件数の残り（料金メニュー Phase 5）。上限のある組織だけ出る。状態は色 + 文字 */
.dsh-quota {
    flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; white-space: nowrap;
    color: var(--text-muted); border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
    font-variant-numeric: tabular-nums;
}
.dsh-quota-warn { color: var(--warn); border-color: rgba(255,197,61,0.40); background: rgba(255,197,61,0.10); }
.dsh-quota-exceeded { color: var(--err); border-color: rgba(255,107,107,0.40); background: rgba(255,107,107,0.10); }

/* 通知センター（ベル + パネル）の見た目は css/ds-components.css が持つ
   （通知機能 PR7 で全 DS 画面へ共有化した）。チャットヘッダー固有の
   レイアウトだけがこのファイルに残る。 */

/* ── 利用者モードトグル（§04 CONTROLS） ──
   DS の連結ピルバーから配色（暗いグループ枠 + 白い充実ピル）だけを借りた
   セグメンテッドコントロール。高さはファイルピル・通知アイコンと揃える。

   ゴーイ接合（blur 9 + alpha contrast のフィルター）と先頭のアイコン円は
   使わない。前者は DS が「最小サイズ 60px、縮小すると接合が崩れるため
   不可」としていてヘッダー（74px）に収まる 36px では条件を満たせず、
   後者は実画面レビューで不要と判断した。 */
#modeToggle {
    display: flex; align-items: center; gap: 2px;
    height: 36px; padding: 3px; flex-shrink: 0;
    background: #0E0E11; border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--r-pill); box-shadow: none;
}
.mode-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 28px;
    padding: 0 13px; font-size: var(--fs-caption); font-weight: 500; border: none;
    color: rgba(255,255,255,0.72); background: transparent; border-radius: var(--r-pill);
    white-space: nowrap; box-shadow: none;
}
.mode-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.mode-btn:hover:not(:disabled):not(.mode-active) {
    background: rgba(255,255,255,0.10); color: #fff; border: none;
}
/* 選択中は白い充実ピル＋ダーク文字（DS モックの CTA） */
.mode-btn.mode-active {
    color: var(--ds-ink); background: var(--ds-white);
    font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.mode-btn.mode-active:hover { color: var(--ds-ink); background: var(--ds-white); }
.mode-btn:disabled { opacity: 0.35; cursor: not-allowed; }


/* ヘッダーの粒子球体（旧 .topbar-orb-wrap）は DS 版では置かないため
   スタイルも持たない。応答待ちの表示は .mini-mark（下の「応答待ち
   ローディング」節）。 */

/* ── チャット ── */
.chat-mid { flex: 1; display: flex; min-height: 0; }
/* 会話は中央の 1 本のカラムに載せる。ただし ★ .chat-col は全幅のまま ★ に
   して、カラムの幅は子側の左右インセット（--chat-inset）で作る。
   スクロール領域は #chatBox なので、#chatBox を全幅にしないとスクロール
   バーが本文カラムの右端に出てしまう。全幅にすることでバーはメイン領域の
   右端（＝画面の右端）に出て、本文の幅は padding で従来どおりに保たれる。

   インセットは % を含むので、使う側の包含ブロック（= .chat-col）の幅が
   基準になる。データブラウザーを開いて .chat-col が縮んでも追随する。
   .chat-col 自身の padding で作ってはいけない（% の基準が .chat-mid に
   なり、パネル開閉で余白が過大になる）。 */
.chat-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    padding: 0 0 var(--sp-16); overflow: hidden;
    --chat-inset: max(var(--sp-32), calc((100% - 916px) / 2));
}
#chatBox {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 26px;
    /* 上の余白は AI 発話のオーブ（30px）が上端に触れない量を確保する。
       それでもスクロール中は上端で切れるので、上 14px をフェードさせて
       ハードな切り口を出さない（mask はスクロールした中身にも効く）。
       左右は「カラムのインセット + 従来の 4px」で本文幅を据え置く。 */
    padding: 40px calc(var(--chat-inset) + 4px) 6px; margin-bottom: 12px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
/* スクロールバーの出し方は .ds-hover-scroll（css/ds-components.css）。
   markup 側で #chatBox に付けている。 */
/* 本文は Body 15 / 400（Q2）。行間は AI 発話側（.markdown-body）が持つ */
.chat-message {
    padding: 11px 15px; border-radius: var(--r-card); max-width: 82%; line-height: 1.7;
    word-break: break-word; font-size: var(--fs-body); font-weight: 400;
}
/* ユーザー発話: 明るい充実バブル＋ダーク文字（DS モック） */
.chat-message.msg-user {
    align-self: flex-end; max-width: 560px;
    padding: 14px 20px; border-radius: 20px 20px 6px 20px;
    background: var(--ds-white); color: var(--ds-ink);
    box-shadow: none; line-height: 1.8; white-space: pre-wrap;
}
/* AI 発話: 吹き出しを持たない（枠・地・影なし）。左肩に 30px のオーブを
   置き、本文はその右 44px から始める。オーブは ::before なので
   js/pages/index.js（旧画面と共有）を変えずに済む。 */
.chat-message.msg-agent {
    align-self: stretch; position: relative;
    max-width: 100%; width: 100%;
    padding: 2px 0 0 44px; border-radius: 0;
    background: none; border: none; box-shadow: none;
    color: rgba(255,255,255,0.92);
}
/* アバターは rheo（レオ）のシンボル。素材は白抜き透過の SVG なので、暗い地に
   そのまま置くだけでよい（反転も台座も不要）。応答待ちの .mini-mark と同じ
   素材を使い、回転が止まった位置にそのまま発話が載るように見せる。 */
.chat-message.msg-agent::before {
    content: ''; position: absolute; left: 0; top: 0;
    width: 30px; height: 30px;
    background: url('../../images/symbol/rheo-symbol.svg') center / contain no-repeat;
}
.chat-message.msg-system {
    align-self: center; max-width: 100%; font-size: var(--fs-caption); padding: 7px 18px;
    color: var(--warn); background: rgba(255,197,61,0.08); border: 1px solid rgba(255,197,61,0.25);
    border-radius: var(--r-pill); text-align: center;
}

/* Markdown（AI応答）の見た目は css/ds-components.css の .markdown-body が
   すべて持つ（フォント・行間・段落・表・コードブロック）。
   ★この画面専用の上書きをここへ足さないこと★ 同じ .markdown-body を
     エージェント画面の会話型セットアップも使うため、片方だけ直ると
     AI の発話が 2 通りの見た目になる。 */

/* 仕様書プレビュー（右パネル内・Issue #91） */
.spec-preview { padding: 4px 4px 24px; }
.spec-preview h1 { font-size: 1.35em; border-bottom: 2px solid rgba(255,255,255,0.25); padding-bottom: 0.3em; margin: 0.2em 0 0.7em; }
.spec-preview h2 { font-size: 1.12em; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 0.2em; margin-top: 1.3em; }
.spec-preview h3 { font-size: 1.02em; margin-top: 1em; }

/* ── コピーボタン（Issue #18） ── */
.code-block-wrap { margin: 0.5em 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(77,163,255,0.2); }
.code-block-wrap pre { margin: 0; border: none; border-radius: 0; }
.code-block-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: rgba(77,163,255,0.10); border-bottom: 1px solid rgba(77,163,255,0.15); }
.code-block-lang { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); }
.code-copy-btn {
    font-family: var(--font-sans); padding: 2px 11px; font-size: 10.5px;
    border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.22); background: transparent; color: rgba(255,255,255,0.7);
}
.code-copy-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.code-copy-btn.copied { color: var(--ok); border-color: rgba(52,199,123,0.5); background: transparent; }
.msg-copy-row { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.msg-copy-btn {
    padding: 2px 12px; font-size: 10.5px; border-radius: var(--r-pill);
    border: 1px solid rgba(255,255,255,0.15); background: transparent; color: var(--text-dim);
}
.msg-copy-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.msg-copy-btn.copied { color: var(--ok); border-color: rgba(52,199,123,0.5); background: transparent; }

/* ── 長い出力の折りたたみ（Issue #292） ──────────────────────────────
   一定量を超えたコードブロック・表にだけ js/pages/index.js が器を作り、
   畳んでいる間だけ is-collapsed を付ける。畳み方は要素で変える。
     - コード: 高さで切り、下端に覆い（グラデーション）を出す。何行あるかは
       ボタン文言で分かるので、途中で切れている見た目そのものが「続きがある」
       合図になる。
     - 表: 高さで切ると行が半分だけ残って値を読み違えるので、行ごと隠す。
   どちらも展開後は素の表示に戻る（畳む前後で本文の見え方を変えない）。 */
.code-block-wrap.is-collapsed .collapse-body { max-height: 320px; overflow: hidden; }
.collapse-body { position: relative; }
.collapse-fade { display: none; }
.code-block-wrap.is-collapsed .collapse-fade {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(14,16,21,0), var(--code-bg) 82%);
}
.collapse-table-wrap.is-collapsed .collapse-hidden-row { display: none; }
.collapse-toggle-row { display: flex; justify-content: center; }
/* コード側は枠の中に入るので地をコードブロックに合わせ、罫線で本文と分ける */
.code-block-wrap .collapse-toggle-row {
    background: var(--code-bg); border-top: 1px solid rgba(255,255,255,0.08); padding: 5px 0 6px;
}
.collapse-table-wrap .collapse-toggle-row { padding: 2px 0 4px; }
.collapse-toggle-btn {
    font-family: var(--font-sans); padding: 2px 14px; font-size: 10.5px;
    border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.22);
    background: transparent; color: rgba(255,255,255,0.7);
}
.collapse-toggle-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }

/* AI回答への Good/Bad フィードバック（Issue #92） */
.fb-group { display: inline-flex; align-items: center; gap: 4px; }
.fb-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 6px; cursor: pointer;
    border: none; background: transparent; color: var(--text-dim);
}
.fb-icon-btn svg { width: 17px; height: 17px; display: block; }
.fb-icon-btn:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,0.07); }
.fb-icon-btn:disabled { opacity: 0.45; cursor: default; }
.fb-icon-btn.fb-active-good { color: var(--ok); }
.fb-icon-btn.fb-active-bad { color: var(--err); }
.fb-btn {
    padding: 5px 16px; font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill); cursor: pointer;
    color: var(--ds-ink); background: var(--ds-white);
    border: 1px solid transparent; box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.fb-btn:hover:not(:disabled) {
    color: var(--ds-ink); background: #e6e6e6; border-color: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
.fb-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.fb-status { font-size: 11px; color: var(--text-dim); margin-left: 4px; }

/* 参照した社内ナレッジへの「役に立った」（効率化可視化 PR2）。
   AI 回答の直下に小さく。押済み（✓）は色を落として押せないことを示す */
.docs-cited { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px 4px; }
.docs-cited-head { font-size: 11px; color: var(--text-dim); margin-right: 2px; }
.docs-cited-btn {
    font-size: 12px; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--panel-border-light); background: transparent; color: var(--text);
    cursor: pointer; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docs-cited-btn:hover:not(:disabled) { background: rgba(255,255,255,0.07); }
.docs-cited-btn:disabled { opacity: 0.6; cursor: default; }
.docs-cited-btn.docs-cited-done { color: var(--ok); border-color: var(--ok); }
.fb-comment-box { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; width: 100%; }
.fb-comment-box textarea {
    width: 100%; min-height: 58px; resize: vertical; box-sizing: border-box;
    border-radius: var(--r-field); padding: 8px; font-size: var(--fs-caption); font-family: inherit;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: var(--text);
}
.fb-comment-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* レコードコンテキストチップ行。
   .chat-col が全幅になったので、本文カラムと左端を揃えるインセットを自分で
   持つ（#chatBox は padding、こちらは margin で同じ位置を作る）。 */
.chip-row { margin-bottom: 8px; flex-shrink: 0; align-self: flex-start; margin-left: var(--chat-inset); }
#recordContextChip {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--text); padding: 6px 8px 6px 13px;
    background: rgba(77,163,255,0.14); border: 1px solid rgba(77,163,255,0.35);
    border-radius: var(--r-pill); white-space: nowrap;
}
#recordContextClear { border: none; background: transparent; color: var(--text-muted); padding: 0 4px; font-size: 14px; line-height: 1; box-shadow: none; }
#recordContextClear:hover { color: #fff; background: transparent; }

/* よくある質問サジェストチップ（Issue #100 Phase 1） */
.sq-row { display: flex; flex-wrap: wrap; gap: 6px; align-self: stretch; margin-right: var(--chat-inset); }
.sq-chip {
    padding: 6px 14px; font-size: var(--fs-caption); border-radius: var(--r-pill); cursor: pointer;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--text-muted);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sq-chip:hover { background: rgba(255,255,255,0.11); color: var(--text); border-color: rgba(255,255,255,0.24); }

/* 送信待ち添付ファイルのチップ行（チャット添付 第1弾） */
.attach-row { display: flex; flex-wrap: wrap; gap: 6px; align-self: stretch; margin-right: var(--chat-inset); }
.attach-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
    font-size: 11.5px; color: var(--text); padding: 5px 6px 5px 12px;
    background: rgba(77,163,255,0.14); border: 1px solid rgba(77,163,255,0.35);
    border-radius: var(--r-pill); white-space: nowrap;
}
.attach-chip .attach-name { overflow: hidden; text-overflow: ellipsis; }
.attach-chip .attach-status { font-size: 10.5px; color: var(--text-dim); flex-shrink: 0; }
.attach-chip.attach-error { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.10); }
.attach-chip.attach-error .attach-status { color: var(--err); }
.attach-chip-remove { border: none; background: transparent; color: var(--text-muted); padding: 0 4px; font-size: 14px; line-height: 1; flex-shrink: 0; box-shadow: none; }
.attach-chip-remove:hover { color: #fff; background: transparent; }
.msg-attachments { margin-top: 6px; font-size: 11.5px; opacity: 0.85; display: flex; flex-direction: column; gap: 2px; }

/* ファイルドラッグ中のドロップ先ハイライト */
.chat-col.drag-over {
    box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 24px rgba(77,163,255,0.18);
    border-radius: var(--r-field);
    transition: box-shadow 0.15s ease;
}

/* 入力エリア（アイコンボタンは §05: 円形・ヒット領域 44px 以上） */
.input-row { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-end; margin-left: var(--chat-inset); margin-right: var(--chat-inset); }
#recordSearchBtn, #attachBtn {
    flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.8); box-shadow: none; padding: 0;
}
#recordSearchBtn:hover, #attachBtn:hover:not(:disabled) { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.28); }
#recordSearchBtn svg, #attachBtn svg { width: 18px; height: 18px; fill: currentColor; }
#attachBtn:disabled { opacity: 0.45; cursor: default; }
#messageInput { flex: 1; resize: none; padding: 12px 16px; font-size: var(--fs-body); line-height: 1.6; min-height: 58px; max-height: 40vh; overflow-y: auto; border-radius: 22px; }
#sendBtn { flex-shrink: 0; padding: 0 26px; min-height: 46px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }

/* ── データブラウザー ── */
/* 掴みしろと閉じた状態の枠線は、閉じている間はチャット側の右端を 6px 占めて
   スクロールバーが端まで寄れない（掴みしろ 5px + 枠線 1px）。開いていない
   ときに掴むものは無いので、閉じている間は両方畳む。
   ★ 畳めるのはヘッダーの開閉ボタン（.dsh-db-toggle）が在るから ★
     以前はこのハンドルが唯一の開閉手段で、畳んだ結果「一度閉じると開き
     直せない」不具合になった（Issue #466 / U8-4-03。
     scripts/verify_data_browser_search.py が固定している）。 */
#resizeHandle {
    width: 5px; cursor: col-resize; background: rgba(255,255,255,0.06); flex-shrink: 0;
    transition: background 0.15s; position: relative;
    display: none;
}
.chat-mid:has(#dataBrowserPanel.open) #resizeHandle { display: block; }
#resizeHandle:hover, #resizeHandle.dragging { background: var(--accent); }
#resizeHandle::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 2px; height: 32px; background: rgba(255,255,255,0.4); border-radius: 1px;
}
#dataBrowserPanel {
    width: 0; min-width: 0; overflow: hidden; transition: width 0.3s ease, min-width 0.3s ease;
    display: flex; flex-direction: column;
    background: rgba(20,20,23,0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-left: none;
}
#dataBrowserPanel.open {
    width: 480px; min-width: 220px;
    border-left: 1px solid var(--hairline);
}
#dataBrowserPanel.no-transition { transition: none !important; }
.db-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; background: rgba(255,255,255,0.02); }
.db-header .db-title { font-family: var(--font-latin); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
#dbRecordCount { margin-left: 8px; font-size: 11.5px; color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
#dataBrowserClose { border: none; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 2px 6px; box-shadow: none; }
#dataBrowserClose:hover { color: #fff; background: transparent; }
/* 「結果」「検索」タブ（Issue #466）。各ペインはパネルの残り高さを占め、
   表のスクロールはペイン内の .db-scroll が持つ */
.db-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.db-tab {
    font-size: var(--fs-caption); padding: 6px 14px; border: none; border-bottom: 2px solid transparent;
    border-radius: 0; background: transparent; color: var(--text-muted); box-shadow: none; cursor: pointer;
}
.db-tab:hover:not(:disabled):not(.db-tab-active) { color: #fff; background: transparent; border-color: transparent; border-bottom-color: rgba(255,255,255,0.25); }
.db-tab.db-tab-active { color: #fff; font-weight: 600; border-bottom-color: var(--accent); }
.db-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.db-search-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.db-search-row { display: flex; gap: 8px; align-items: center; }
.db-search-row input[type="text"] { flex: 1; min-width: 0; padding: 7px 10px; font-size: var(--fs-caption); }
/* 対象オブジェクトのコンボボックス。候補リストは入力欄の直下に重ねて出す
   （表のスティッキー見出し z-index:1 より上） */
.db-obj-combo { position: relative; flex: 1; min-width: 0; }
.db-obj-combo::after {
    content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px;
    border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim);
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.db-search-row .db-obj-combo input[type="text"] { width: 100%; padding-right: 30px; }
.db-obj-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
    max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
    background: #1b1b20; border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--r-field); box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.db-obj-group { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.db-obj-option {
    display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 6px;
    font-size: var(--fs-caption); color: var(--text); cursor: pointer;
}
.db-obj-option .db-obj-api { font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); }
.db-obj-option.db-obj-active { background: rgba(77,163,255,0.18); }
.db-obj-option.db-obj-selected { color: var(--accent); font-weight: 600; }
.db-obj-empty { padding: 8px 10px; font-size: var(--fs-caption); color: var(--text-dim); }
#dbSearchBtn { flex-shrink: 0; padding: 7px 16px; }
.db-search-note { margin: 0; font-size: 11px; color: var(--text-dim); line-height: 1.5; }
/* 行頭の「参照」（そのレコードをチャットの参照チップへ載せる） */
#dataBrowserPanel .db-table td.db-ref-cell { width: 1%; padding: 2px 6px; }
.db-ref-btn { font-size: 10.5px; padding: 2px 10px; }
#dbSoqlArea { padding: 10px 16px; background: var(--code-bg); border-bottom: 1px solid rgba(77,163,255,0.15); flex-shrink: 0; }
#dbSoqlText { font-size: 11px; color: var(--code-text); font-family: var(--font-mono); word-break: break-all; }
.db-scroll { overflow-x: auto; overflow-y: auto; flex: 1; padding: 8px; }
#dataBrowserPanel .db-table { border-collapse: collapse; width: 100%; font-size: var(--fs-code); }
#dataBrowserPanel .db-table th { background: #202027; color: #fff; padding: 0.45rem 0.7rem; text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 1; font-weight: 500; }
#dataBrowserPanel .db-table td { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0.4rem 0.7rem; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-variant-numeric: tabular-nums; }
#dataBrowserPanel .db-table tr:hover td { background: rgba(77,163,255,0.12); }
#dataBrowserPanel .db-table a { color: var(--accent); text-decoration: underline; }
#dataBrowserPanel .db-table a:hover { color: #7fbcff; }

/* ── データ一括編集（Issue #90） ── */
.db-actions { display: flex; gap: 6px; align-items: center; }
.db-btn {
    font-size: 11px; padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
    border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: var(--text-muted);
}
.db-btn:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.09); }
.db-btn:disabled { opacity: 0.45; cursor: default; }
.db-btn-primary { background: var(--ds-white); border-color: transparent; color: var(--ds-ink); font-weight: 600; }
.db-btn-primary:hover:not(:disabled) { background: #e6e6e6; border-color: transparent; color: var(--ds-ink); }
#dbEditNote { font-size: 11.5px; color: var(--text-muted); padding: 7px 16px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
#dbEditNote.db-note-err { color: var(--err); }
#dataBrowserPanel .db-table td.db-cell-input { padding: 2px 4px; max-width: none; overflow: visible; }
.db-input {
    width: 100%; min-width: 90px; box-sizing: border-box; font-size: var(--fs-code); padding: 4px 6px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 4px; color: var(--text);
}
.db-input:focus { outline: none; border-color: rgba(77,163,255,0.9); }
select.db-input { min-width: 110px; }
select.db-input option { background: #202027; color: #fff; }
input[type="checkbox"].db-input { width: auto; min-width: 0; cursor: pointer; }
#dataBrowserPanel .db-table td.db-cell-dirty { background: rgba(255,197,61,0.14); }
#dataBrowserPanel .db-table td.db-cell-dirty .db-input { border-color: rgba(255,197,61,0.65); }
#dataBrowserPanel .db-table tr.db-row-error td { background: rgba(255,107,107,0.10); }
#dataBrowserPanel .db-table tr.db-row-error-msg td {
    color: var(--err); font-size: 0.72rem; white-space: normal; max-width: none;
    border-bottom: 1px solid rgba(255,107,107,0.35); padding-top: 2px;
}
/* 差分プレビューモーダル */
#dataEditPreviewTable { border-collapse: collapse; width: 100%; font-size: 12.3px; }
#dataEditPreviewTable th { background: #202027; color: #fff; padding: 6px 10px; text-align: left; position: sticky; top: 0; font-weight: 500; }
#dataEditPreviewTable td { border-bottom: 1px solid rgba(255,255,255,0.07); padding: 5px 10px; color: var(--text); word-break: break-all; }
#dataEditPreviewTable td.diff-before { color: var(--text-dim); }
#dataEditPreviewTable td.diff-after { color: var(--warn); }
.empty-note { margin-top: 2rem; }

/* コードブラウザー（LWCデプロイ承認時） */
.code-file-header { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: rgba(77,163,255,0.10); border: 1px solid rgba(77,163,255,0.2); border-radius: 8px 8px 0 0; padding: 6px 10px; margin-top: 12px; text-transform: uppercase; }
.code-file-body { font-size: var(--fs-caption); background: var(--code-bg); border: 1px solid rgba(77,163,255,0.2); border-top: none; border-radius: 0 0 8px 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 0; color: #fff; font-family: var(--font-mono); }
.delete-warning { font-size: 11.5px; color: var(--err); margin-top: 10px; font-weight: 600; }

/* ── 選択肢 / 承認（ask_user_choice）── Information の淡い枠（§04 ALERTS） */
.choice-area {
    display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: var(--sp-16) 18px;
    background: rgba(23,23,26,0.55); border: 1px solid rgba(77,163,255,0.30);
    border-radius: var(--r-card); backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 20px rgba(77,163,255,0.1);
    /* AI 発話の本文と左端を揃える（オーブ 30px + 余白 14px）。
       align-self:stretch なので幅は「親幅 - margin-left」に決まる */
    align-self: stretch; margin-left: 44px;
    max-width: 100% !important;
}
.choice-question { color: var(--text); border: none; background: transparent; padding: 0; font-size: var(--fs-body); font-weight: 500; white-space: pre-wrap; line-height: 1.6; }
.choice-btn {
    display: inline-block; text-align: left; padding: 9px 18px; border-radius: var(--r-pill); font-size: 13px;
    font-weight: 500; cursor: pointer; border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82);
}
.choice-btn-primary { background: var(--ds-white); color: var(--ds-ink); border-color: transparent; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.choice-btn-primary:hover { background: #e6e6e6; color: var(--ds-ink); }
.choice-btn-secondary:hover { background: rgba(255,255,255,0.13); color: #fff; }
.choice-btn-danger { color: var(--err); background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.3); }
.choice-btn-danger:hover { background: var(--err-fill); color: #fff; border-color: var(--err-fill); }
.choice-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── チャット内データ更新の承認カード（du- 系） ── */
.du-card { border: 1px solid rgba(77,163,255,0.3); border-radius: 10px; padding: 10px 12px; background: rgba(10,14,22,0.35); overflow-x: auto; }
.du-card-head { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.du-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.du-table th { background: rgba(77,163,255,0.16); color: #fff; font-weight: 500; text-align: left; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.09); white-space: nowrap; }
.du-table td { padding: 6px 10px; border: 1px solid rgba(255,255,255,0.07); word-break: break-all; }
.du-arrow { color: var(--text-muted); white-space: nowrap; }
.du-after { color: #fff; font-weight: 600; }
.du-note { font-size: 11.5px; color: var(--text-muted); margin: 6px 0 0; }

/* ── 応答待ちローディング ──
   AI 発話と同じく枠を持たない。mini-mark が .msg-agent のシンボルの位置
   （左端 30px）に来るよう寸法と gap を合わせ、文言は 44px から始める。

   アニメーションは rheo シンボルの「45° スナップ回転」。シンボルは 8 枚の
   葉が 45° 間隔に並ぶので、45° 回すと次の葉の位置へぴたりと重なる。
   1 周 6 秒を 8 コマに割り、各コマは「止まる（約 7%）→ 弾むように 45°
   進む（約 5.5%）」。イージングの終端 1.25 で少し行き過ぎてから戻る
   ばね感を出す。周期・角度・イージングはデザイナー提供のスクリプト
   （45° snap rotation）の値をそのまま使っている。 */
#loadingIndicator { align-self: flex-start; display: flex; align-items: center; gap: 14px; padding: 2px 0; background: none; border: none; box-shadow: none; color: var(--text-muted); font-size: 12.5px; }
.mini-mark {
    width: 30px; height: 30px; flex-shrink: 0;
    background: url('../../images/symbol/rheo-symbol.svg') center / contain no-repeat;
    transform-origin: 50% 50%;
    animation: rheo-snap 6s infinite;
}
@keyframes rheo-snap {
    0%, 7%       { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    12.5%, 19.5% { transform: rotate(45deg);  animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    25%, 32%     { transform: rotate(90deg);  animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    37.5%, 44.5% { transform: rotate(135deg); animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    50%, 57%     { transform: rotate(180deg); animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    62.5%, 69.5% { transform: rotate(225deg); animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    75%, 82%     { transform: rotate(270deg); animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    87.5%, 94.5% { transform: rotate(315deg); animation-timing-function: cubic-bezier(.45, 0, .15, 1.25); }
    100%         { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .mini-mark { animation: none; } }
#loadingElapsed { margin-left: 4px; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* 応答待ちの文言（進捗）と、その下の長時間の案内（Issue #293） */
.loading-text { display: flex; flex-direction: column; gap: 2px; }
.loading-note { font-size: 11px; color: var(--text-dim); }
.loading-note[hidden] { display: none; }

/* ── 環境設定 ── */
.env-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem; border-radius: var(--r-field); background: rgba(255,255,255,0.05); box-shadow: none; border: 1px solid rgba(255,255,255,0.10); }
.env-item-active { border-color: rgba(77,163,255,0.45); box-shadow: 0 0 14px rgba(77,163,255,0.15); }
.env-item-inactive:hover { border-color: rgba(255,255,255,0.20); }
.env-name { font-weight: 500; color: var(--text); }
.env-name-active { color: #bcd8f6; }
.env-badge-active { flex-shrink: 0; font-size: 10px; letter-spacing: 0.06em; background: rgba(77,163,255,0.25); color: #d3e6fa; padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid rgba(77,163,255,0.4); }
.env-domain { font-size: 11.5px; color: var(--text-dim); font-family: var(--font-mono); }
.env-btn { font-size: 0.72rem; padding: 0.32rem 0.75rem; border-radius: var(--r-pill); border: 1px solid; cursor: pointer; white-space: nowrap; }
.env-btn-select { background: transparent; border-color: rgba(77,163,255,0.5); color: #a9cdf3; }
.env-btn-select:hover { background: var(--info-fill); color: #fff; border-color: var(--info-fill); }
.env-btn-edit { background: transparent; border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.env-btn-edit:hover { background: rgba(255,255,255,0.13); color: #fff; }
.env-btn-delete { background: transparent; border-color: rgba(255,107,107,0.4); color: var(--err); }
.env-btn-delete:hover { background: var(--err-fill); color: #fff; border-color: var(--err-fill); }
.login-orb-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto 6px; animation: login-orb-breathe 3.4s ease-in-out infinite; }
@keyframes login-orb-breathe {
    0%, 100% { filter: drop-shadow(0 0 22px rgba(255,255,255,0.34)) drop-shadow(0 0 60px rgba(255,255,255,0.12)); }
    50% { filter: drop-shadow(0 0 55px rgba(255,255,255,0.6)) drop-shadow(0 0 110px rgba(255,255,255,0.25)); }
}
.login-orb-wrap canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.login-panel { background: transparent; border: none; box-shadow: none; backdrop-filter: none; }
.login-brand .brand-sub { color: var(--text-muted); font-family: var(--font-latin); }

/* ── 会話履歴 = サイドパネルが右へ広がった 2 列目（§07 OPEN + HISTORY） ──
   旧実装の全画面ドロワー markup と openHistoryDrawer() はそのまま、
   サイドパネルの右隣にぴったり付けて「1 枚のパネルが広がった」ように
   見せる。地・ぼかし・影・上端のハイライトをパネルと共有し、左側は
   角丸も枠線も持たない（サイドパネル側の右枠線がそのまま仕切りになる）。

   位置と幅はサイドパネルの実幅（--ds-panel-w。ドラッグで変わる）に
   追従させる。そのため js/ds/sidebar.js はこの変数を :root に置いている
   （#appSidebar に置くと兄弟のこのパネルからは参照できない）。 */
#historyDrawer { z-index: var(--z-drawer); }
#historyDrawer .history-panel {
    /* ドロワーは viewport 基準の fixed。body の margin を 0 にしてあるので
       （上記）、左端は .ds-panel の左余白 14 + パネルの実幅でサイドパネルの
       右端にちょうど接する。上下もパネルと同じ 14px。 */
    left: calc(14px + var(--ds-panel-w, 300px));
    top: 14px; bottom: 14px;
    width: var(--ds-panel-w, 300px);
    border-radius: 0 var(--r-panel) var(--r-panel) 0;
    background: var(--panel-glass-bg);
    backdrop-filter: var(--panel-glass-blur); -webkit-backdrop-filter: var(--panel-glass-blur);
    border: 1px solid var(--panel-glass-border);
    border-left: none;
    /* 落ち影は持たない（サイドパネルとの継ぎ目に影が落ちて 2 枚に見えるため）。
       上端のハイライトだけパネルと共有する。 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
    overflow: hidden;
    animation: ds-history-open 0.22s ease;
}
/* サイドパネルの中から広がってくるように見せる（.hidden の付け外しは
   display 切替なので transition は乗らない。animation なら効く） */
@keyframes ds-history-open {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
}
/* 開いている間はサイドパネル側の右角も落として継ぎ目を消す */
body:has(#historyDrawer:not(.hidden)) .app-sidebar.ds-panel {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* 折りたたみ中（レール 72px）はレールの右に付ける。幅は既定値に戻す */
body:has(.app-sidebar.collapsed) #historyDrawer .history-panel {
    left: 86px; width: 300px;   /* 左余白 14 + レール 72 */
}
.history-item { padding: 9px 12px; margin: 2px 10px; cursor: pointer; border-radius: var(--r-pill); transition: background 0.15s ease; }
.history-item:hover { background: rgba(255,255,255,0.10); }
.history-title { font-size: 12.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-sub { margin-top: 3px; font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.history-mode-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.history-mode-dot.mode-admin-dot { background: var(--accent); box-shadow: 0 0 5px var(--accent-glow); }
.history-mode-dot.mode-business-dot { background: var(--ok); box-shadow: 0 0 5px rgba(52,199,123,0.5); }
.history-info-row { padding: 1rem; font-size: 0.85rem; color: var(--text-dim); text-align: center; }
.history-search-bar { padding: 12px 16px 6px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.history-search-bar input[type="text"] { font-size: 12.5px; padding: 8px 12px; border-radius: var(--r-pill); }
.history-owner-filter { display: flex; gap: 4px; margin-top: 8px; }
.history-owner-btn {
    flex: 1; padding: 6px 4px; font-size: 11.5px; cursor: pointer;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-dim); border-radius: var(--r-pill); transition: all 0.15s ease;
}
.history-owner-btn:hover:not(.active) { color: var(--text); border-color: rgba(255,255,255,0.24); }
.history-owner-btn.active { background: var(--ds-white); border-color: transparent; color: var(--ds-ink); font-weight: 600; }
.history-search-note { margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }
.history-mine-badge {
    flex-shrink: 0; font-size: 9.5px; font-weight: 700; color: var(--accent);
    border: 1px solid rgba(77,163,255,0.5); border-radius: 6px; padding: 0 5px; line-height: 15px;
}
/* 本人権限の内容（Box のファイル本文）を含む会話（所有者以外には一覧に出ない） */
.history-scoped-badge {
    flex-shrink: 0; font-size: 9.5px; font-weight: 700; color: var(--warn);
    border: 1px solid rgba(255,197,61,0.5); border-radius: 6px; padding: 0 5px; line-height: 15px;
}
.history-rename-btn {
    flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0 2px;
    font-size: var(--fs-caption); color: var(--text-dim); line-height: 1; opacity: 0; transition: opacity 0.15s ease; box-shadow: none;
}
.history-item:hover .history-rename-btn { opacity: 1; }
.history-rename-btn:hover { color: var(--accent); background: transparent; }
.history-rename-input {
    flex: 1; min-width: 0; font-size: 13px; padding: 4px 8px;
    border-radius: var(--r-pill); background: rgba(255,255,255,0.08); color: var(--text); box-shadow: none;
}

/* ── レコード検索モーダル ── */
#recordSearchModal .rs-dialog {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 480px; max-width: 95vw; height: 80vh; max-height: 80vh;
    display: flex; flex-direction: column; z-index: calc(var(--z-modal) + 1);
}
#recordSearchModal .rs-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; background: rgba(255,255,255,0.03); border-radius: var(--r-card) var(--r-card) 0 0; }
#recordSearchModal .rs-header h3 { color: #fff; }
#recordSearchModal .rs-body { flex: 1; overflow-y: auto; padding: 0; }
#recordSearchModal .rs-search-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.rs-record-item { display: flex; align-items: center; gap: 12px; padding: 0.6rem 1.25rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rs-record-item:hover { background: rgba(77,163,255,0.10); }
.rs-record-item .rs-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18); font-family: var(--font-latin); }
.rs-type-Account .rs-icon { background: #7c5cbf; }
.rs-type-Opportunity .rs-icon { background: #c9873a; }
.rs-type-Contact .rs-icon { background: #3a8fa8; }
.rs-type-Lead .rs-icon { background: #d1662e; }
.rs-type-Case .rs-icon { background: #4a9d5f; }
.rs-type-default .rs-icon { background: #6b7280; }
.rs-record-name { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.rs-record-type { font-size: 0.7rem; color: var(--text-dim); }
.rs-empty { text-align: center; padding: 2rem; color: var(--text-dim); font-size: 0.85rem; }
.rs-loading { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem; }
.rs-section-heading { padding: 0.7rem 1.25rem 0.3rem; font-size: 0.7rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-latin); }

.rs-slide-viewport { flex: 1; overflow: hidden; position: relative; min-height: 0; }
.rs-slide-container { width: 100%; height: 100%; position: relative; }
.rs-slide-page { width: 100%; height: 100%; display: none; flex-direction: column; position: absolute; top: 0; left: 0; }
.rs-slide-page.rs-page-active { display: flex; }
#rsContent, #rsObjContent, #rsObjRecContent { flex: 1; overflow-y: auto; min-height: 0; }
.rs-obj-section-header { padding: 0.5rem 1.25rem; font-size: 0.7rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; z-index: 1; }
.rs-obj-item { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.25rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rs-obj-item:hover { background: rgba(77,163,255,0.10); }
.rs-obj-label { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.rs-obj-api { font-size: 0.7rem; color: var(--text-dim); font-family: var(--font-mono); }
.rs-obj-arrow { color: var(--text-dim); font-size: 0.85rem; }
.rs-objrec-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rs-objrec-item:hover { background: rgba(77,163,255,0.10); }
.rs-objrec-hash { color: var(--text-dim); font-weight: 700; font-size: 0.85rem; }
.rs-objrec-name { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.rs-back-btn { display: flex; align-items: center; gap: 0.25rem; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; background: none; border: none; padding: 2px 4px; box-shadow: none; }
.rs-back-btn:hover { color: #fff; background: transparent; }
.rs-browse-objects-link { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; cursor: pointer; border-top: 1px solid var(--hairline); color: var(--accent); font-size: 0.85rem; font-weight: 600; flex-shrink: 0; }
.rs-browse-objects-link:hover { background: rgba(77,163,255,0.10); }
/* 閉じるボタン。ヒット領域を 32px 確保する（旧: 22px 前後） */
.icon-x {
    border: none; background: transparent; color: var(--text-muted);
    font-size: 18px; line-height: 1; padding: 0;
    min-width: 32px; min-height: 32px; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%; box-shadow: none;
}
.icon-x:hover { color: #fff; background: rgba(255,255,255,0.10); }

@media (max-width: 640px) {
    .ds-panel { width: 72px; }
    .ds-panel .sidebar-brand, .ds-panel .sidebar-item span, .ds-panel .sidebar-user span { display: none; }
    .app-main { margin: 10px 10px 10px 6px; }
    .ds-chat-header { padding: 0 var(--sp-16); gap: var(--sp-8); }
    /* 狭い幅ではモードのラベルを畳んでアイコンだけにする */
    /* 狭い幅ではモードのラベルを畳んでアイコンだけにする */
    .mode-btn span { display: none; }
    .mode-btn { padding: 0 10px; gap: 0; }
    .chat-col { padding: 0 0 var(--sp-8); --chat-inset: max(var(--sp-16), calc((100% - 916px) / 2)); }
    #chatBox { padding-top: var(--sp-32); }
}