/**
 * @file styles/ai_chat.css
 * @description Premium AI Chat 専用スタイル（両モード対応）
 * @version 1.0.0
 * @date 2026-05-26
 *
 * Premium v1.4 §13 / chat_ui_components.md 準拠
 * - z-index 体系: R20-H シリーズ整合（--z-chat-* 追加）
 * - 両モード対応: feedback_dark_light_mode_pair 厳守
 * - WCAG 2.1 AA: R21-A 整合
 * - PWA standalone: R21-B 整合
 * - prefers-reduced-motion 対応: R21-A-1 整合
 *
 * R17-B1 (2026-05-28): Pro/Free にも事前ロード必須。
 *   index.html の `#ai-chat-launcher` DOM は全プラン共通ロードされ、
 *   このファイルの `.ai-chat-launcher { display: none }` で非表示制御する。
 *   CSS が無いと裸 DOM が露出するため、index.html で <link> 事前ロード必須。
 *   Pro/Free 影響: ~2-5ms CSS パース時間のみ（700 行・軽量）。
 */

/* ========================================
   CSS 変数（R20-H z-index 体系 + AI Chat 専用）
   ======================================== */

:root {
  --z-chat-button: 90;
  --z-chat-panel: 100;
  --z-chat-message-action: 105;
  --z-chat-slash-menu: 108;
  --z-chat-sessions-overlay: 110;
  /* --z-chat-confirm は既存 --z-overlay-critical (100000) を再利用（1_base.css:82 参照） */

  /* AI Chat 専用カラー（ダーク・デフォルト） */
  --ai-chat-bg-primary: #1a1a1a;
  --ai-chat-bg-secondary: #2a2a2a;
  --ai-chat-message-ai-bg: #2a2a2a;
  --ai-chat-message-user-bg: #3a3a4a;
  --ai-chat-accent: #9b7ac8;
  --ai-chat-accent-strong: #7a5aa8;
  --ai-chat-text-primary: #ffffff;
  --ai-chat-text-secondary: #d0c0e0;
  --ai-chat-border: #444;
  --ai-chat-input-bg: #2a2a2a;
  --ai-chat-focus-color: #9b7ac8;
  --ai-chat-success: #4ade80;
  --ai-chat-error: #f87171;
}

body.light-mode {
  --ai-chat-bg-primary: #fafafa;
  --ai-chat-bg-secondary: #f0f0f0;
  --ai-chat-message-ai-bg: #f0f0f0;
  --ai-chat-message-user-bg: #e8e0ff;
  --ai-chat-accent: #7a5aa8;
  --ai-chat-accent-strong: #5a3a8a;
  --ai-chat-text-primary: #000000;
  --ai-chat-text-secondary: #5a4a7a;
  --ai-chat-border: #ccc;
  --ai-chat-input-bg: #ffffff;
  --ai-chat-focus-color: #7a5aa8;
  --ai-chat-success: #16a34a;
  --ai-chat-error: #dc2626;
}

/* ========================================
   1. 大きいボタン（タブ下）
   ======================================== */

.ai-chat-launcher {
  display: none;
  position: sticky;
  top: 0;
  z-index: var(--z-chat-button);
  margin: 12px;
  padding: 0;
}

.ai-chat-launcher.is-premium {
  display: block;
}

.ai-chat-launcher-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #6a4a9a;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  /* ★Premium ホログラフィック: 紫の土台 + プリズムの光沢が流れる（Premium プラン文字と同系色） */
  background:
    linear-gradient(120deg, rgba(125,211,252,0) 0%, rgba(125,211,252,0.38) 18%, rgba(196,181,253,0.38) 36%, rgba(249,168,212,0.38) 54%, rgba(251,191,36,0.38) 72%, rgba(125,211,252,0) 92%),
    linear-gradient(135deg, #3a2a5a 0%, #5a3a8a 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 0% 0%, 0 0;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  box-shadow: 0 2px 8px rgba(155, 122, 200, 0.25), 0 0 22px rgba(196, 181, 253, 0.18);
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  animation: ai-launcher-prism 12s linear infinite;
}

@keyframes ai-launcher-prism {
  0%   { background-position: 0% 0%, 0 0; }
  100% { background-position: 250% 0%, 0 0; }
}

body.light-mode .ai-chat-launcher-button {
  background:
    linear-gradient(120deg, rgba(56,189,248,0) 0%, rgba(56,189,248,0.45) 18%, rgba(167,139,250,0.45) 36%, rgba(244,114,182,0.45) 54%, rgba(251,191,36,0.50) 72%, rgba(56,189,248,0) 92%),
    linear-gradient(135deg, #e8e0ff 0%, #d8c8ff 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 0% 0%, 0 0;
  color: #2a1a4a;
  text-shadow: none;
  border-color: #b8a0d8;
  box-shadow: 0 2px 8px rgba(122, 90, 168, 0.18), 0 0 22px rgba(167, 139, 250, 0.18);
}

.ai-chat-launcher-content {
  flex: 1;
  min-width: 0;
}

.ai-chat-launcher-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.ai-chat-launcher-icon {
  font-size: 20px;
}

.ai-chat-launcher-subtitle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.3;
  color: #d0c0e0;
}

body.light-mode .ai-chat-launcher-subtitle {
  color: #5a4a7a;
}

.ai-chat-launcher-arrow {
  font-size: 20px;
  transition: transform 0.15s ease-out;
}

.ai-chat-launcher-button:hover {
  box-shadow: 0 4px 12px rgba(155, 122, 200, 0.3);
}
.ai-chat-launcher-button:hover .ai-chat-launcher-arrow {
  transform: translateX(2px);
}

body.light-mode .ai-chat-launcher-button:hover {
  box-shadow: 0 4px 12px rgba(122, 90, 168, 0.25);
}

.ai-chat-launcher-button:active {
  transform: scale(0.98);
}

.ai-chat-launcher-button:focus-visible {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-launcher-button,
  .ai-chat-launcher-arrow {
    transition: none;
  }
  .ai-chat-launcher-button {
    animation: none;  /* プリズムの流れを静止（動きが苦手な人向け・WCAG 2.3.3） */
  }
  .ai-chat-launcher-button:active {
    transform: none;
  }
}

@media (max-width: 768px) {
  .ai-chat-launcher {
    margin: 8px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);     /* R32-A2 (2026-05-31): iPhone notch / Dynamic Island 干渉防御 */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ai-chat-launcher-button {
    height: 64px;
    padding: 12px 16px;
    border-radius: 10px;
  }
  .ai-chat-launcher-title { font-size: 15px; }
  .ai-chat-launcher-subtitle { font-size: 12px; }
}

/* ========================================
   2. サイドパネル
   ======================================== */

.ai-chat-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100vh;
  height: 100dvh;  /* R32-A1 (2026-05-31): iOS Safari / PWA standalone のキーボード表示時に footer が隠れる問題対策 */
  z-index: var(--z-chat-panel);
  display: flex;
  flex-direction: column;
  background: var(--ai-chat-bg-primary);
  border-left: 1px solid var(--ai-chat-border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  transition: right 0.2s ease-out;
  visibility: hidden;
  color: var(--ai-chat-text-primary);
}

.ai-chat-panel.is-open {
  right: 0;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-panel { transition: none; }
}

/* === ヘッダー === */
.ai-chat-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ai-chat-border);
  flex-shrink: 0;
}

.ai-chat-panel-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ai-chat-panel-menu,
.ai-chat-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  border-radius: 6px;
  color: var(--ai-chat-text-primary);
}

.ai-chat-panel-menu:hover,
.ai-chat-panel-close:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-panel-menu:focus-visible,
.ai-chat-panel-close:focus-visible {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: 2px;
}

/* === セッションバー === */
.ai-chat-panel-session-bar {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ai-chat-border);
  flex-shrink: 0;
}

.ai-chat-session-current {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--ai-chat-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ai-chat-text-primary);
}

.ai-chat-session-current:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-new-session {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ai-chat-border);
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  font-size: 16px;
  color: var(--ai-chat-text-primary);
}

.ai-chat-new-session:hover {
  background: var(--ai-chat-bg-secondary);
}

/* === Round 8D: セッション進捗バー === */
.ai-chat-session-progress {
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--ai-chat-border);
  background: var(--ai-chat-bg-secondary, rgba(255, 255, 255, 0.02));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-chat-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.ai-chat-progress-text {
  color: var(--ai-chat-text-secondary);
  font-variant-numeric: tabular-nums;
}

.ai-chat-progress-new {
  padding: 4px 10px;
  background: var(--ai-chat-accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.ai-chat-progress-new:hover {
  background: var(--ai-chat-accent-strong, #00b386);
}

.ai-chat-progress-bar-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.ai-chat-progress-bar {
  height: 100%;
  width: 0%;
  background: #00b386;
  border-radius: 2px;
  transition: width 0.25s ease-out, background-color 0.25s;
}

.ai-chat-progress-bar.is-warning  { background: #ffb74d; }
.ai-chat-progress-bar.is-danger   { background: #ff8a3d; }
.ai-chat-progress-bar.is-urgent   { background: #ff5252; }

.ai-chat-progress-hint {
  font-size: 11px;
  color: var(--ai-chat-text-secondary);
  line-height: 1.4;
}

body.light-mode .ai-chat-session-progress {
  background: #f8f8f8;
  border-bottom-color: #ddd;
}
body.light-mode .ai-chat-progress-text { color: #666; }
body.light-mode .ai-chat-progress-bar-wrap { background: #e0e0e0; }
body.light-mode .ai-chat-progress-hint { color: #555; }

/* === ボディ === */
.ai-chat-panel-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* === フッター === */
.ai-chat-panel-footer {
  position: relative; /* R37: スラッシュメニューの絶対配置基準 */
  padding: 12px 16px;
  border-top: 1px solid var(--ai-chat-border);
  background: var(--ai-chat-bg-secondary);
  flex-shrink: 0;
}

/* ========================================
   R37 (2026-05-31): スラッシュコマンドメニュー
   入力欄で「/」を打つとスキル候補を表示・両モード対応（--ai-chat-* 変数使用）
   ======================================== */
.ai-chat-slash-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0 12px 4px 12px;
  padding: 0;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  background: var(--ai-chat-bg-primary);
  border: 1px solid var(--ai-chat-border);
  border-radius: 10px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  z-index: var(--z-chat-slash-menu);
}

.ai-chat-slash-menu-hint {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--ai-chat-text-secondary);
  border-bottom: 1px solid var(--ai-chat-border);
}

.ai-chat-slash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--ai-chat-border);
  transition: background 0.1s ease-out;
}

.ai-chat-slash-menu-item:last-child {
  border-bottom: none;
}

.ai-chat-slash-menu-item:hover,
.ai-chat-slash-menu-item[aria-selected="true"] {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-slash-menu-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.ai-chat-slash-menu-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-chat-slash-menu-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-chat-text-primary);
}

.ai-chat-slash-menu-desc {
  font-size: 11px;
  color: var(--ai-chat-text-secondary);
  line-height: 1.3;
}

.ai-chat-slash-menu-cat {
  font-size: 10px;
  color: var(--ai-chat-text-secondary);
  background: var(--ai-chat-bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-slash-menu-item {
    transition: none;
  }
}

@media (max-width: 768px) {
  .ai-chat-slash-menu {
    max-height: 220px;
  }
  .ai-chat-slash-menu-item {
    padding: 12px 14px; /* タップしやすく */
  }
}

.ai-chat-input-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.ai-chat-input-textarea {
  flex: 1;
  min-height: 40px;
  max-height: 200px;
  padding: 10px 12px;
  border: 1px solid var(--ai-chat-border);
  border-radius: 8px;
  background: var(--ai-chat-input-bg);
  color: var(--ai-chat-text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  overflow-y: auto;
}

.ai-chat-input-textarea:focus {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: -1px;
}

.ai-chat-input-send {
  flex: 0 0 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: var(--ai-chat-accent);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}

.ai-chat-input-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === メイン UI シフト（デスクトップ・1200px 以上のみ） === */
@media (min-width: 1200px) {
  body.ai-chat-panel-open .main-content {
    margin-right: 420px;
    transition: margin-right 0.2s ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    body.ai-chat-panel-open .main-content { transition: none; }
  }
}

/* ========================================
   3. フルスクリーン（モバイル）
   ======================================== */

@media (max-width: 768px) {
  .ai-chat-panel {
    width: 100%;
    right: -100%;
    border-left: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ai-chat-panel.is-open { right: 0; }

  .ai-chat-panel-header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .ai-chat-panel-footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ========================================
   4. メッセージ表示
   ======================================== */

.ai-chat-message {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.ai-chat-message-assistant {
  background: var(--ai-chat-message-ai-bg);
  border: 1px solid var(--ai-chat-border);
}

.ai-chat-message-user {
  background: var(--ai-chat-message-user-bg);
  margin-left: 24px;
}

.ai-chat-message.is-error {
  background: rgba(248, 113, 113, 0.15);
  border-color: var(--ai-chat-error);
}

.ai-chat-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--ai-chat-text-secondary);
  font-weight: 600;
}

.ai-chat-message-role {
  background: var(--ai-chat-accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.ai-chat-message-model {
  font-family: monospace;
  font-size: 10px;
  opacity: 0.6;
}

.ai-chat-message-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}

.ai-chat-message-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  z-index: var(--z-chat-message-action);
}

.ai-chat-message-actions button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  color: var(--ai-chat-text-primary);
}

.ai-chat-message-actions button:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-message-actions button.is-active {
  background: var(--ai-chat-accent);
  color: #fff;
}

.ai-chat-message-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* === R38 (2026-05-31): フォローアップ選択肢（クイックリプライ） ===
   AI 返答後の「次にできること」ボタン群・両モード対応（--ai-chat-* 変数） */
.ai-chat-message-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ai-chat-choice {
  padding: 8px 14px;
  border: 1px solid var(--ai-chat-accent);
  background: transparent;
  color: var(--ai-chat-accent);
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}

.ai-chat-choice:hover {
  background: var(--ai-chat-accent);
  color: #ffffff;
}

.ai-chat-choice:active {
  transform: scale(0.97);
}

.ai-chat-choice:focus-visible {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: 2px;
}

/* 「自分で書く」系（compose）は success 色で区別＝思考を促すボタン */
.ai-chat-choice[data-choice-type="compose"] {
  border-color: var(--ai-chat-success);
  color: var(--ai-chat-success);
}

.ai-chat-choice[data-choice-type="compose"]:hover {
  background: var(--ai-chat-success);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-choice {
    transition: none;
  }
  .ai-chat-choice:active {
    transform: none;
  }
}

@media (max-width: 480px) {
  .ai-chat-message-choices {
    flex-direction: column;
  }
  .ai-chat-choice {
    width: 100%;
    text-align: center;
    padding: 12px 14px; /* タップしやすく */
  }
}

/* === Tool 呼出表示 === */
.ai-chat-tool-calls-container {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-chat-tool-call {
  padding: 6px 10px;
  background: rgba(155, 122, 200, 0.1);
  border-radius: 6px;
  font-size: 12px;
}

body.light-mode .ai-chat-tool-call {
  background: rgba(122, 90, 168, 0.08);
}

.ai-chat-tool-call summary {
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: center;
}

.ai-chat-tool-name {
  font-family: monospace;
  font-weight: 600;
}

.ai-chat-tool-status {
  margin-left: auto;
  color: var(--ai-chat-success);
}

/* === 考え中アニメ === */
.ai-chat-thinking {
  display: inline-flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--ai-chat-message-ai-bg);
  border: 1px solid var(--ai-chat-border);
  border-radius: 12px;
}

.ai-chat-thinking-dot {
  width: 8px;
  height: 8px;
  background: var(--ai-chat-accent);
  border-radius: 50%;
  animation: ai-chat-thinking-bounce 1.4s ease-in-out infinite;
}

.ai-chat-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-chat-thinking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-chat-thinking-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-thinking-dot { animation: none; opacity: 0.7; }
}

/* R24-A (2026-05-28): 「考え中...」の中止ボタン */
.ai-chat-thinking {
  align-items: center;  /* dots と button の縦中央寄せ */
}

.ai-chat-thinking-cancel {
  margin-left: 12px;
  padding: 4px 12px;
  font-size: 12px;
  background: var(--ai-chat-bg-secondary);
  color: var(--ai-chat-text-secondary);
  border: 1px solid var(--ai-chat-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.ai-chat-thinking-cancel:hover {
  background: var(--ai-chat-error);
  color: #fff;
  border-color: var(--ai-chat-error);
}

.ai-chat-thinking-cancel:focus-visible {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: 2px;
}

/* R24-B (2026-05-28): AdminDashboard アラートセクション (両モード対応) */
.admin-dashboard-alerts {
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.35);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0 20px 0;
}

.admin-dashboard-alert {
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  line-height: 1.5;
}

.admin-dashboard-alert.alert-warning {
  border-left: 4px solid #ffb74d;
}

.admin-dashboard-alert.alert-critical {
  border-left: 4px solid #ef5350;
  background: rgba(239, 83, 80, 0.12);
}

.admin-dashboard-alert strong {
  margin-right: 8px;
}

.admin-alert-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ai-chat-text-secondary);
  margin-right: 8px;
}

.admin-dashboard-deadletter {
  color: #ef5350;
  font-weight: 600;
  padding: 8px 12px;
  background: rgba(239, 83, 80, 0.08);
  border-radius: 4px;
}

body.light-mode .admin-dashboard-alerts {
  background: rgba(255, 152, 0, 0.06);
  border-color: rgba(255, 152, 0, 0.4);
}

body.light-mode .admin-dashboard-alert {
  background: rgba(0, 0, 0, 0.03);
}

body.light-mode .admin-dashboard-alert.alert-critical {
  background: rgba(239, 83, 80, 0.06);
}

body.light-mode .admin-dashboard-deadletter {
  background: rgba(239, 83, 80, 0.04);
}

/* ========================================
   5. セッション一覧オーバーレイ
   ======================================== */

.ai-chat-sessions-overlay {
  position: absolute;
  inset: 0;
  background: var(--ai-chat-bg-primary);
  z-index: var(--z-chat-sessions-overlay);
  overflow-y: auto;
  display: none;
}

.ai-chat-sessions-overlay.is-open {
  display: block;
}

.ai-chat-session-list-inner {
  padding: 16px;
}

.ai-chat-session-list-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.ai-chat-session-list-header h3 {
  flex: 1;
  margin: 0;
  font-size: 14px;
}

.ai-chat-session-list-header button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--ai-chat-text-primary);
  border-radius: 4px;
}

.ai-chat-session-list-header button:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-session-new {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px dashed var(--ai-chat-accent);
  background: transparent;
  color: var(--ai-chat-accent);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.ai-chat-session-new:hover {
  background: rgba(155, 122, 200, 0.1);
}

.ai-chat-session-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-chat-session-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s;
}

.ai-chat-session-item:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-session-item.is-active {
  background: rgba(155, 122, 200, 0.2);
}

.ai-chat-session-item-button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--ai-chat-text-primary);
  min-width: 0;
}

.ai-chat-session-item-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.ai-chat-session-item-info {
  flex: 1;
  min-width: 0;
}

.ai-chat-session-item-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chat-session-item-meta {
  font-size: 11px;
  color: var(--ai-chat-text-secondary);
  margin-top: 2px;
}

.ai-chat-session-item-menu {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--ai-chat-text-secondary);
  border-radius: 4px;
}

.ai-chat-session-item-menu:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-session-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--ai-chat-text-secondary);
  font-size: 13px;
}

/* ========================================
   6. 確認モーダル
   ======================================== */

.ai-chat-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-critical);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ai-chat-confirm-modal.is-open {
  display: flex;
}

.ai-chat-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.ai-chat-confirm-content {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--ai-chat-bg-primary);
  color: var(--ai-chat-text-primary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ai-chat-confirm-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ai-chat-border);
}

.ai-chat-confirm-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ai-chat-confirm-body {
  padding: 20px;
}

.ai-chat-confirm-tool {
  display: inline-block;
  margin: 12px 0;
  padding: 8px 12px;
  background: var(--ai-chat-bg-secondary);
  border: 1px solid var(--ai-chat-border);
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
}

.ai-chat-confirm-tool[data-side-effect="requires_double_confirmation"] {
  border-color: var(--ai-chat-error);
}

.ai-chat-confirm-impact,
.ai-chat-confirm-summary {
  margin-top: 16px;
}

.ai-chat-confirm-impact h3,
.ai-chat-confirm-summary h3 {
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--ai-chat-text-secondary);
}

.ai-chat-confirm-impact ul,
.ai-chat-confirm-summary ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
}

.ai-chat-confirm-typed {
  margin-top: 20px;
  padding: 12px;
  background: rgba(248, 113, 113, 0.1);
  border-radius: 6px;
}

.ai-chat-confirm-typed label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}

.ai-chat-confirm-typed input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ai-chat-border);
  border-radius: 6px;
  background: var(--ai-chat-input-bg);
  color: var(--ai-chat-text-primary);
  font-family: monospace;
}

.ai-chat-confirm-typed input:focus {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: -1px;
}

/* R2-F1: 二重確認入力のヒント（スクリーンリーダー + 視覚両対応）*/
.ai-chat-confirm-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--ai-chat-text-secondary);
}

body.light-mode .ai-chat-confirm-hint {
  color: #666;
}

.ai-chat-confirm-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--ai-chat-border);
}

.ai-chat-confirm-cancel,
.ai-chat-confirm-execute {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

.ai-chat-confirm-cancel {
  background: transparent;
  border: 1px solid var(--ai-chat-border);
  color: var(--ai-chat-text-primary);
}

.ai-chat-confirm-cancel:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-confirm-execute {
  background: var(--ai-chat-accent);
  color: #fff;
}

.ai-chat-confirm-execute:not(:disabled):hover {
  background: var(--ai-chat-accent-strong);
}

.ai-chat-confirm-execute:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-chat-confirm-tool[data-side-effect="requires_double_confirmation"]
  ~ .ai-chat-confirm-footer .ai-chat-confirm-execute:not(:disabled) {
  background: var(--ai-chat-error);
}

.ai-chat-confirm-raw {
  background: var(--ai-chat-bg-secondary);
  padding: 12px;
  border-radius: 6px;
  font-size: 11px;
  overflow-x: auto;
  max-height: 200px;
}

/* ========================================
   7. エクスポートボタン（F 系 Tool 連動）
   ======================================== */

.ai-chat-export-button {
  display: inline-block;
  margin-top: 8px;
  margin-right: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ai-chat-accent);
  border-radius: 6px;
  background: rgba(155, 122, 200, 0.1);
  color: var(--ai-chat-text-primary);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.15s;
}

body.light-mode .ai-chat-export-button {
  background: rgba(122, 90, 168, 0.08);
}

.ai-chat-export-button:hover {
  background: var(--ai-chat-accent);
  color: #fff;
}

.ai-chat-export-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-chat-export-button:focus-visible {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: 2px;
}

.ai-chat-export-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(248, 113, 113, 0.15);
  border-left: 3px solid var(--ai-chat-error);
  border-radius: 4px;
  font-size: 13px;
  color: var(--ai-chat-error);
}

/* ========================================
   8. AI チャット設定セクション（設定タブ内）
   ======================================== */

.ai-chat-settings-section {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--ai-chat-border);
  border-radius: 12px;
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-settings-section .settings-section-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
}

.ai-chat-settings-section .settings-section-subtitle {
  margin-bottom: 20px;
  color: var(--ai-chat-text-secondary);
  font-size: 13px;
}

.ai-chat-setting-item {
  margin-bottom: 20px;
}

.ai-chat-setting-item:last-child {
  margin-bottom: 0;
}

.ai-chat-setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 6px;
}

.ai-chat-setting-title {
  font-weight: 600;
}

.ai-chat-setting-desc {
  margin: 0;
  padding-left: 26px;
  font-size: 12px;
  color: var(--ai-chat-text-secondary);
  line-height: 1.5;
}

.ai-chat-setting-select {
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--ai-chat-border);
  border-radius: 6px;
  background: var(--ai-chat-input-bg);
  color: var(--ai-chat-text-primary);
  font-family: inherit;
  font-size: 13px;
}

.ai-chat-setting-select:focus-visible {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: -1px;
}

.ai-chat-setting-divider {
  border: none;
  border-top: 1px solid var(--ai-chat-border);
  margin: 24px 0;
}

.ai-chat-setting-button {
  padding: 8px 16px;
  border: 1px solid var(--ai-chat-border);
  border-radius: 6px;
  background: transparent;
  color: var(--ai-chat-text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  margin-top: 6px;
  margin-bottom: 8px;
}

.ai-chat-setting-button:hover {
  background: var(--ai-chat-bg-primary);
}

.ai-chat-setting-button-danger {
  border-color: var(--ai-chat-error);
  color: var(--ai-chat-error);
}

.ai-chat-setting-button-danger:hover {
  background: rgba(248, 113, 113, 0.1);
}

/* ========================================
   9. 管理ダッシュボード（社長専用）
   ======================================== */

.admin-dashboard-section {
  margin-top: 24px;
  padding: 20px;
  border: 2px solid var(--ai-chat-accent);
  border-radius: 12px;
  background: var(--ai-chat-bg-secondary);
}

.admin-dashboard-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.admin-dashboard-content {
  min-height: 200px;
}

.admin-dashboard-loading,
.admin-dashboard-error {
  text-align: center;
  padding: 32px;
  color: var(--ai-chat-text-secondary);
}

.admin-dashboard-error {
  color: var(--ai-chat-error);
}

.admin-dashboard-month-title {
  margin: 0 0 12px;
  font-size: 16px;
}

.admin-dashboard-subtitle {
  margin: 24px 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.admin-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-dashboard-kpi {
  padding: 12px 16px;
  background: var(--ai-chat-bg-primary);
  border: 1px solid var(--ai-chat-border);
  border-radius: 8px;
}

.admin-dashboard-kpi-label {
  font-size: 11px;
  color: var(--ai-chat-text-secondary);
  margin-bottom: 4px;
}

.admin-dashboard-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ai-chat-accent);
}

.admin-dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}

.admin-dashboard-table th,
.admin-dashboard-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ai-chat-border);
  text-align: left;
}

.admin-dashboard-table th {
  font-weight: 600;
  background: var(--ai-chat-bg-primary);
}

.admin-dashboard-table td.num {
  text-align: right;
  font-family: monospace;
}

.admin-dashboard-table tr.alert-warning {
  background: rgba(255, 165, 0, 0.1);
}

.admin-dashboard-table tr.alert-critical {
  background: rgba(248, 113, 113, 0.15);
}

.admin-dashboard-feedback {
  display: flex;
  gap: 16px;
  font-size: 14px;
}

.admin-feedback-positive { color: var(--ai-chat-success); }
.admin-feedback-negative { color: var(--ai-chat-error); }
.admin-feedback-reports { color: #f59e0b; }
.admin-feedback-ratio { color: var(--ai-chat-text-secondary); font-size: 12px; }

.admin-dashboard-note {
  margin-top: 16px;
  font-size: 11px;
  color: var(--ai-chat-text-secondary);
}

/* ========================================
   10. 業者突合（Phase 2X-5）
   ======================================== */

.broker-reconciliation-section {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--ai-chat-border);
  border-radius: 12px;
}

.broker-recon-year-label {
  display: block;
  margin: 12px 0;
  font-size: 13px;
}

.broker-recon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 16px;
}

.broker-recon-table th,
.broker-recon-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ai-chat-border);
  text-align: left;
}

.broker-recon-table th {
  font-weight: 600;
  background: var(--ai-chat-bg-secondary);
}

.broker-recon-table td.num {
  text-align: right;
  font-family: monospace;
}

.broker-recon-input {
  width: 140px;
  padding: 6px 8px;
  border: 1px solid var(--ai-chat-border);
  border-radius: 4px;
  background: var(--ai-chat-input-bg);
  color: var(--ai-chat-text-primary);
  font-family: monospace;
  font-size: 12px;
}

.broker-recon-input:focus-visible {
  outline: 2px solid var(--ai-chat-focus-color);
  outline-offset: -1px;
}

.broker-recon-alert {
  background: rgba(248, 113, 113, 0.1);
}

.diff-zero { color: var(--ai-chat-text-secondary); }
.diff-positive { color: var(--ai-chat-success); }
.diff-negative { color: var(--ai-chat-error); }

.broker-recon-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
}

.broker-recon-status {
  font-size: 12px;
}

.broker-recon-note {
  font-size: 12px;
  color: var(--ai-chat-text-secondary);
}

.broker-recon-empty {
  text-align: center;
  padding: 24px;
  color: var(--ai-chat-text-secondary);
}

/* ========================================
   11. オンボーディングモーダル
   ======================================== */

.ai-chat-onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-critical);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ai-chat-onboarding-modal.is-open {
  display: flex;
}

.ai-chat-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.ai-chat-onboarding-content {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--ai-chat-bg-primary);
  color: var(--ai-chat-text-primary);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.ai-chat-onboarding-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: transparent;
  color: var(--ai-chat-text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}

.ai-chat-onboarding-skip:hover {
  color: var(--ai-chat-text-primary);
}

.ai-chat-onboarding-icon {
  font-size: 56px;
  margin-bottom: 16px;
  line-height: 1;
}

.ai-chat-onboarding-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
}

.ai-chat-onboarding-body {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
  text-align: left;
  color: var(--ai-chat-text-primary);
  background: var(--ai-chat-bg-secondary);
  padding: 16px;
  border-radius: 8px;
}

.ai-chat-onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.ai-onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ai-chat-border);
}

.ai-onboarding-dot.is-active {
  background: var(--ai-chat-accent);
  transform: scale(1.3);
}

.ai-chat-onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ai-chat-onboarding-prev,
.ai-chat-onboarding-next {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--ai-chat-border);
  background: transparent;
  color: var(--ai-chat-text-primary);
}

.ai-chat-onboarding-prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-chat-onboarding-prev:not(:disabled):hover,
.ai-chat-onboarding-next:hover {
  background: var(--ai-chat-bg-secondary);
}

.ai-chat-onboarding-next.ai-chat-onboarding-finish {
  background: var(--ai-chat-accent);
  border-color: var(--ai-chat-accent);
  color: #fff;
}

.ai-chat-onboarding-next.ai-chat-onboarding-finish:hover:not(:disabled) {
  background: var(--ai-chat-accent-strong);
}

.ai-chat-onboarding-next.ai-chat-onboarding-finish:disabled {
  background: var(--ai-chat-bg-disabled, #555);
  border-color: var(--ai-chat-bg-disabled, #555);
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-chat-onboarding-progress {
  font-size: 12px;
  color: var(--ai-chat-text-secondary);
}

/* R2-A1: Onboarding 規約同意ブロック（最終ページ・両モード対応） */
.ai-chat-onboarding-consent {
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid var(--ai-chat-border, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  background: var(--ai-chat-bg-secondary, rgba(255, 255, 255, 0.04));
  text-align: left;
}

.ai-chat-onboarding-legal {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ai-chat-text-secondary);
}

.ai-chat-onboarding-legal a {
  color: var(--ai-chat-accent);
  text-decoration: underline;
}

.ai-chat-onboarding-legal a:hover {
  color: var(--ai-chat-accent-strong);
}

.ai-chat-onboarding-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ai-chat-text);
  cursor: pointer;
}

.ai-chat-onboarding-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

body.light-mode .ai-chat-onboarding-consent {
  background: #fafafa;
  border-color: #999;
}

body.light-mode .ai-chat-onboarding-legal {
  color: #666;
}

body.light-mode .ai-chat-onboarding-checkbox {
  color: #000;
}

@media (max-width: 768px) {
  .ai-chat-onboarding-content {
    padding: 24px 20px;
  }
  .ai-chat-onboarding-icon {
    font-size: 48px;
  }
  .ai-chat-onboarding-title {
    font-size: 18px;
  }
}