/* =====================================================================
   rheo for Salesforce — DS 版ページ共通コンポーネント上書き（Issue #163）
   ---------------------------------------------------------------------
   読み込み順: tokens.css → ds-tokens.css → base.css → components.css
               → ds-components.css → ds-shell.css → pages/<画面>.css

   ★ 読み込むのはアプリ 9 画面。impact.html だけが読み込まない ★
     base.css / components.css の宣言を DS（docs/ui/rheo Design
     System.dc.html §03〜§06）の見た目で上書きする。

   方針:
     - ボタンは丸み（ピル）＋ソフトな陰影のタクタイル形状（§04）
     - 状態は色だけに頼らずアイコン・記号を併記（必守原則 01）
     - フォーカスは 3px の Information リング（§04 STATES）
     - 型階層は Body 15 / Caption 12 / Code 13 / AI Chat 14.5（§03）
   ===================================================================== */

/* ── 基底（Q2: Body 15px / 和文はヒラギノ系） ── */
body {
    font-size: var(--fs-body);
}

/* 数字は Geist の等幅数字で桁揃え（§03）。和文フォールバックも保つ */
.ds-num {
    font-family: var(--font-latin);
    font-variant-numeric: tabular-nums;
}

/* ── フォーカスリング（§04 STATES — Focus）。マウス操作では出さない ── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── ボタン階層（§04 BUTTONS） ──
   base.css の素の button（アウトラインピル）を「セカンダリ」相当の
   半透明ピルへ。hover の白反転はやめ、輝度を一段上げる。 */
button {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 500;
}
button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled {
    opacity: 1; cursor: not-allowed;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
}

/* プライマリ: 白い充実ピル＋ソフトシャドウ（§04） */
.btn-primary {
    color: var(--ds-ink);
    background: var(--ds-white);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover:not(:disabled) {
    color: var(--ds-ink);
    background: #e6e6e6;
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { background: #cfcfcf; transform: scale(0.97); }

/* 削除: Error の淡い塗り＋枠（§04）。hover で Fill 変種に */
.btn-danger-outline {
    color: var(--err);
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.3);
}
.btn-danger-outline:hover:not(:disabled) {
    background: var(--err-fill);
    color: #fff;
    border-color: var(--err-fill);
}

/* フラットボタンは半透明サーフェスの角丸カードに */
.btn-flat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
    color: var(--text);
    border-radius: var(--r-field);
}
.btn-flat:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: none;
}

/* ── スクロールバー ── */
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }

/* マウスを乗せている間だけつまみを見せるスクロール領域。
   幅（base.css の 5px）は常に確保したままつまみの色だけを出すので、
   表示・非表示でレイアウトがずれない。長い一覧（チャット本文・
   サイドパネルのメニュー・会話履歴）に付ける。 */
.ds-hover-scroll { scrollbar-color: transparent transparent; }
.ds-hover-scroll:hover { scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.ds-hover-scroll::-webkit-scrollbar-thumb { background: transparent; transition: background 0.2s ease; }
.ds-hover-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }

/* ── 空状態の注記（Caption 12 / AA 準拠の Gray） ── */
.empty-note { font-size: var(--fs-caption); color: var(--text-dim); }

/* ── ヘッダー ── */
.topbar {
    background: rgba(20, 20, 23, 0.35);
    border-bottom: 1px solid var(--hairline);
}
.topbar .brand .brand-sub { color: var(--text-muted); font-family: var(--font-latin); }
.topbar .page-title {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}
.topbar a.back-link { color: var(--accent); }
.topbar a.back-link:hover { color: #7fbcff; }

/* ── パネル ── */
.panel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-card);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.panel-note { font-size: var(--fs-caption); }

/* ── タブバー（セグメンテッドコントロール §04 CONTROLS）──
   アクティブは白い充実ピル＋ダーク文字。アクセント色は使わない */
.tab-bar {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
    padding: 4px;
}
.tab-btn { color: rgba(255, 255, 255, 0.7); border: none; }
.tab-btn:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.08); border: none; }
.tab-btn.tab-active {
    color: var(--ds-ink);
    background: var(--ds-white);
    box-shadow: none;
    font-weight: 600;
}
.tab-btn.tab-active:hover { color: var(--ds-ink); background: var(--ds-white); }

/* ── モーダル（ガラス調 §06 に整合） ── */
.glass-dialog {
    background: rgba(23, 23, 26, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-card);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ── トースト（必守原則 01: 色＋記号で状態を伝える） ──
   showToast() は textContent しか入れないため、記号は CSS の ::before で
   併記する（js/ui.js を変えずに済む）。 */
.toast {
    font-size: var(--fs-caption);
    border: 1px solid rgba(52, 199, 123, 0.35);
    background: rgba(23, 23, 26, 0.92);
    color: var(--ok);
}
.toast::before { content: "✓ "; font-weight: 700; }
.toast.toast-err {
    border-color: rgba(255, 107, 107, 0.35);
    background: rgba(23, 23, 26, 0.92);
    color: var(--err);
}
.toast.toast-err::before { content: "✕ "; }

/* ── DS タグ / ステータス（§04 TAGS — 色＋アイコンの組で使うこと） ── */
.ds-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-caption); font-weight: 500;
    padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.ds-tag svg { width: 12px; height: 12px; stroke: currentColor; fill: none; flex-shrink: 0; }
.ds-tag-ok   { color: var(--ok);   background: rgba(52, 199, 123, 0.15); border-color: rgba(52, 199, 123, 0.3); }
.ds-tag-err  { color: var(--err);  background: rgba(255, 107, 107, 0.14); border-color: rgba(255, 107, 107, 0.3); }
.ds-tag-warn { color: var(--warn); background: rgba(255, 197, 61, 0.15); border-color: rgba(255, 197, 61, 0.33); }
.ds-tag-info { color: var(--info); background: rgba(77, 163, 255, 0.14); border-color: rgba(77, 163, 255, 0.3); }

/* ── DS インラインアラート（§04 ALERTS A: 細長・右上からの放射光） ── */
.ds-alert {
    display: flex; align-items: flex-start; gap: 14px;
    padding: var(--sp-16) 18px; border-radius: var(--r-field);
    border: 1px solid rgba(77, 163, 255, 0.34);
    background: radial-gradient(120% 260% at 100% 0%, rgba(77, 163, 255, 0.50) 0%, rgba(77, 163, 255, 0.18) 38%, rgba(255, 255, 255, 0.05) 70%), #17171A;
}
.ds-alert-ok {
    border-color: rgba(52, 199, 123, 0.34);
    background: radial-gradient(120% 260% at 100% 0%, rgba(52, 199, 123, 0.50) 0%, rgba(52, 199, 123, 0.18) 38%, rgba(255, 255, 255, 0.05) 70%), #17171A;
}
.ds-alert-warn {
    border-color: rgba(255, 197, 61, 0.34);
    background: radial-gradient(120% 260% at 100% 0%, rgba(255, 197, 61, 0.50) 0%, rgba(255, 197, 61, 0.18) 38%, rgba(255, 255, 255, 0.05) 70%), #17171A;
}
.ds-alert-err {
    border-color: rgba(255, 107, 107, 0.34);
    background: radial-gradient(120% 260% at 100% 0%, rgba(255, 107, 107, 0.50) 0%, rgba(255, 107, 107, 0.18) 38%, rgba(255, 255, 255, 0.05) 70%), #17171A;
}
.ds-alert-title { font-weight: 700; font-size: 13.5px; color: #fff; }
.ds-alert-body  { font-size: var(--fs-code); color: rgba(255, 255, 255, 0.78); }

/* ── AI アクセント枠（進行・生成の演出に限定使用） ── */
.ds-ai-ring {
    position: relative;
    padding: 2px; border-radius: var(--r-pill);
    background: var(--ai-gradient);
    box-shadow: 0 0 40px rgba(120, 140, 255, 0.35), 0 0 40px rgba(242, 160, 60, 0.2);
}

/* ── Markdown（AI 応答）: AI の発話だけ Zen Kaku Gothic New（§03） ── */
.markdown-body {
    font-family: var(--font-ai);
    font-size: var(--fs-chat);
    line-height: var(--lh-chat);
    font-weight: 400;
}
.markdown-body code,
.markdown-body pre code {
    font-family: var(--font-mono);
}
.markdown-body pre { border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.markdown-body code { border-color: rgba(255, 255, 255, 0.10); }
.markdown-body a { color: var(--accent); }
.markdown-body a:hover { color: #7fbcff; }
.markdown-body th { background: rgba(77, 163, 255, 0.16); }

/* 段落・見出し・箇条書き・表・コードブロック。チャット画面（index.html）と
   エージェント画面の会話型セットアップ（agents.html）が共有する。
   agents.html は css/pages/index.css を読まないため、ここに置かないと
   エージェント画面の AI 発話だけ Markdown が素の HTML 既定値で出る。 */
.markdown-body p { margin: 0 0 0.5em; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-size: 1.02em; font-weight: 600; margin: 0.8em 0 0.4em; color: #fff; }
.markdown-body ul, .markdown-body ol { padding-left: 1.4em; margin: 0.3em 0 0.6em; }
.markdown-body li { margin: 0.15em 0; }
.markdown-body pre { background: var(--code-bg); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 0.5em 0; }
/* 表は横罫線だけで組む（DS モック）。縦罫と塗りを外し、見出しは
   JetBrains Mono の小さな大文字ラベルにする。列の右揃えは列が数値か
   どうかを CSS からは判定できないため行わない（Markdown の
   `---:` 記法が来れば marked が align を付けるので、それには従う）。 */
.markdown-body table {
    border-collapse: collapse; width: 100%; margin: 0.6em 0;
    font-size: var(--fs-code);
}
.markdown-body th {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
    letter-spacing: 0.1em; text-transform: uppercase;
    /* モックは .45 だが、地の光が乗る場所では小文字サイズの AA
       （4.5:1）を割るので一段明るくする（必守原則 02） */
    color: rgba(255,255,255,0.55); background: none;
    text-align: left; padding: 10px 12px 10px 2px; white-space: nowrap;
    border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.markdown-body td {
    color: rgba(255,255,255,0.85);
    padding: 12px 12px 12px 2px;
    border: none; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.markdown-body th:last-child, .markdown-body td:last-child { padding-right: 2px; }
.markdown-body tbody tr:last-child td { border-bottom: none; }
.markdown-body strong { color: #fff; font-weight: 600; }

/* ── 通知センター（ベル + パネル）。通知機能 PR2 / PR7 ─────────────────
   Issue #163 では見た目だけの span だったが、PR2 で押せる button になり、
   PR7 で全 DS 画面の共有コンポーネントになった。
   markup と振る舞いはどちらも js/ds/notifications.js が持つ。

   ★このファイル（ds-components.css）に置くのは、チャット画面だけでなく
     agents / dashboard / requests / docs / settings / bulk-extract / admin の
     各 DS 画面がベルを載せるため。pages/*.css に置くと 1 画面でしか効かない。 */

/* 通知パネルを重ねるため、トップバーへ重なり順を与える。
   ★.topbar は backdrop-filter を持つので独自の重ね合わせ文脈を作るが、
     DOM 順では後続の兄弟が上に描かれる。z-index を与えないとパネルが
     本文の下へ潜る。body.ds-page を持つ画面にだけ効かせ、それを持たない
     impact.html のカスケードには触れない。 */
.ds-page .topbar { position: relative; z-index: 30; }
.dsn-wrap { position: relative; flex-shrink: 0; }
.dsn-bell {
    position: relative; width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: none; border-radius: var(--r-icon);
    background: transparent; color: rgba(255,255,255,0.62); box-shadow: none;
}
.dsn-bell:hover:not(:disabled) { background: rgba(255,255,255,0.10); color: #fff; }
.dsn-bell[aria-expanded="true"] { background: rgba(255,255,255,0.14); color: #fff; }
.dsn-bell svg { width: 19px; height: 19px; }
/* 未読バッジ。件数が 1 桁なら丸、2 桁以上・99+ なら横に伸びるピル。
   未読 0 のときは .hidden で消える（JS が付け外しする）。 */
.dsn-bell-dot {
    position: absolute; top: 4px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill); background: var(--info); color: #0E0E11;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px rgba(20,20,23,0.9);
}

/* パネル（DS §07 Translucent Panel）。ヘッダー右端に出すため right 基準。 */
.dsn-panel {
    position: absolute; top: 44px; right: 0; z-index: 20;
    width: 320px; padding: var(--sp-8); border-radius: var(--r-panel);
    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);
}
.dsn-head {
    display: flex; align-items: center; gap: var(--sp-8);
    padding: 2px 10px var(--sp-8);
}
.dsn-head-label { font-size: 13px; color: rgba(255,255,255,0.55); }
.dsn-allread {
    margin-left: auto; padding: 0; border: none; background: transparent;
    box-shadow: none; font-size: 11.5px; color: rgba(255,255,255,0.5);
}
.dsn-allread:hover:not(:disabled) { color: #fff; background: transparent; }
.dsn-allread:disabled { opacity: 0.4; cursor: default; }

.dsn-empty {
    margin: 0; padding: var(--sp-24) 10px; text-align: center;
    font-size: var(--fs-caption); color: var(--text-dim);
}
.dsn-list { max-height: 380px; overflow-y: auto; }

.dsn-item {
    display: flex; gap: var(--sp-8); padding: 11px 10px;
    border-radius: var(--r-field); text-decoration: none;
}
a.dsn-item:hover { background: rgba(255,255,255,0.09); text-decoration: none; }
/* 未読は前面（読んだものは沈める）。モックの「既読はグレー」に対応する */
.dsn-unread { background: rgba(255,255,255,0.06); }
/* 自分が起動した処理（is_actor）。左の細い帯で「自分のもの」を示す */
.dsn-mine { box-shadow: inset 2px 0 0 var(--accent); }

.dsn-dot {
    width: 8px; height: 8px; flex-shrink: 0; margin-top: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.28);
}
.dsn-dot-info { background: var(--ok); }
.dsn-dot-action { background: var(--info); }
.dsn-dot-alert { background: var(--err); }
/* 既読はレベルによらず沈める（色は「新しさ」の合図として使う） */
.dsn-item:not(.dsn-unread) .dsn-dot { background: rgba(255,255,255,0.28); }

.dsn-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dsn-title {
    font-size: var(--fs-caption); line-height: 1.6; color: rgba(255,255,255,0.72);
}
.dsn-unread .dsn-title { color: #fff; }
.dsn-detail {
    font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.6);
    overflow: hidden; text-overflow: ellipsis;
}
.dsn-meta { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.45); }