/* chat-web tokens.css — デザイントークン正本（UI別紙 tokens v1.0 §1-§4 + UI-CLONE-2 CEO裁定 2026-07-18）
 * 生hexは本fileのみ（合格条件: トークン外hex grep=0）。
 * gradient.ai の使用は5箇所限定（siteマーカーコメントで機械検証・計5・UI-CLONE-2⑪でAVISドット追加授権）:
 *   ①入力コンポーザ枠+上端帯(ライトのみ) ②待ち時間バー ③作業中インジケータ ④録音リング ⑤AVISアバター小ドット(ライト) */

/* ライト=ベンチマークトークン（§1実装済の値・不変）。構造系の新varを追加し、
 * ダークはCEO裁定（ChatGPT徹底クローン）の供給値で上書きする。 */
:root, [data-theme="light"] {
  --bg-page: #E6E5EB;
  --bg-canvas: #FFFFFF;
  --bg-sidebar: #F2F2FE;
  --bg-surface-tint: #F7FAFC;
  --border-subtle: #ECEFF4;
  --text-primary: #111318;
  --text-secondary: #4A4F5A;
  --text-tertiary: #8A8F9B;
  --accent-primary: #5E76F2;
  --accent-primary-hover: #4C63E0;
  --accent-primary-active: #3F53C9;
  --badge-positive-bg: #DDF7EC;
  --badge-positive-text: #3E8E6E;
  --warm-user-tint: #F0E9E3;
  --glow-ambient: #F3EEF5;
  --gradient-ai: linear-gradient(90deg, #40D2F9, #60B5EC, #9797DB, #C08BC1, #F67DA6);
  --sem-warn: #E8A13D;
  --sem-error: #E0526B;
  --sem-info: #5E76F2;
  --scrim: rgba(17, 19, 24, 0.4);
  --shadow-1: 0 1px 2px rgba(17, 19, 24, 0.06);
  --shadow-2: 0 8px 24px rgba(17, 19, 24, 0.10);
  /* ⑩ ライト層構造: 白キャンバスカードの影（ベンチマーク） */
  --shadow-card: 0 8px 24px rgba(17, 19, 24, 0.08);
  /* 構造系（ライト=ベンチマーク準拠の既定） */
  --bubble-user-bg: var(--bg-surface-tint);   /* ⑪ 暖色→surface-tintへ（暖色はプロフィール行専用） */
  --bubble-user-border: var(--border-subtle);
  --composer-bg: var(--bg-canvas);
  --composer-border: transparent;
  /* 【6】送信=ChatGPTクローン: ライト活性=黒丸+白矢印/非活性=薄グレー円+グレー矢印（録音に見えない） */
  --send-bg: #0D0D0D;
  --send-bg-hover: #2A2A2A;
  --send-fg: #FFFFFF;
  --send-idle-bg: #E8E8EB;
  --send-idle-fg: #9B9FA8;
  --sidebar-hover: var(--bg-surface-tint);
  --sidebar-active: var(--bg-canvas);
  --profile-bg: var(--warm-user-tint);        /* ⑪ 暖色はプロフィール行専用 */
  --card-radius: 24px;
  --card-inset: 24px; /* ⑦ 外周に#E6E5EBの余白24px */
}

/* ダーク=ChatGPT徹底クローン（CEO供給値・UI-CLONE-2仕上げ）:
 * 本文#212121/サイドバー#171717/罫線#2F2F2F/コンポーザ#303030+枠rgba(255,255,255,.06)/
 * text主#ECECEC副#B4B4B4/userバブル#303030/hover#212121/送信=白丸+黒矢印。
 * ⑨ accent系はライト値から彩度10-15%減衰の派生値（CTO導出）。tertiary #8F8F8F等も導出。 */
[data-theme="dark"] {
  --bg-page: #212121;
  --bg-canvas: #212121;
  --bg-sidebar: #171717;
  --bg-surface-tint: #2F2F2F;
  --border-subtle: #2F2F2F;
  --text-primary: #ECECEC;
  --text-secondary: #B4B4B4;
  --text-tertiary: #8F8F8F;
  --accent-primary: #6478DE;
  --accent-primary-hover: #5568C8;
  --accent-primary-active: #4A5BB3;
  --badge-positive-bg: #1F2E27;
  --badge-positive-text: #7FD1AC;
  --warm-user-tint: #303030;
  --glow-ambient: #212121;
  --gradient-ai: linear-gradient(90deg, #40D2F9, #60B5EC, #9797DB, #C08BC1, #F67DA6);
  --sem-warn: #E8A13D;
  --sem-error: #E0526B;
  --sem-info: #6478DE;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-card: none;
  --bubble-user-bg: #303030;
  --bubble-user-border: transparent;
  --composer-bg: #303030;
  --composer-border: rgba(255, 255, 255, 0.06);
  --send-bg: #FFFFFF;
  --send-bg-hover: #ECECEC;
  --send-fg: #0D0D0D;
  --send-idle-bg: #3A3A3A;
  --send-idle-fg: #B4B4B4; /* ⑪ 非活性コントラスト是正 */
  --sidebar-hover: #212121;
  --sidebar-active: #212121;
  --profile-bg: #212121;
  --card-radius: 0px;
  --card-inset: 0px;
}

/* ---- 基本形状トークン（§3）。【8】文字サイズ3段=--fsc倍率（ui-meta供給・全fs変数連動=全画面適用） ---- */
:root {
  --font-stack: Inter, "Noto Sans JP", system-ui, sans-serif;
  --fsc: 1;
  --fs-12: calc(12px * var(--fsc)); --fs-13: calc(13px * var(--fsc)); --fs-14: calc(14px * var(--fsc));
  --fs-16: calc(16px * var(--fsc)); --fs-18: calc(18px * var(--fsc)); --fs-24: calc(24px * var(--fsc)); --fs-32: calc(32px * var(--fsc));
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-composer: 28px; --r-full: 999px;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --t-hover: 120ms; --t-appear: 200ms; --t-sheet: 300ms; --t-msg: 150ms;
  --readable-max: 768px; /* CEO裁定: 会話可読幅≈768px中央 */
  --sidebar-w: 280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* ③ グローバルscrollbar theming: 全スクロール領域でtrack完全非表示・つまみのみ（テーマ連動色）。
 * 白track残存を根絶（Firefox=thin+transparent track / WebKit=track透明+thumb色）。 */
* { scrollbar-width: thin; scrollbar-color: var(--text-tertiary) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: var(--r-full); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* CSP style-src 'self' により inline style属性は無効（SEV真因）。可視切替は本classで行う。
 * !important は表示ルールより常に優先させるため（specificity非依存の決定論） */
.hidden { display: none !important; }
body {
  font-family: var(--font-stack);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
}
h1, h2, h3 { line-height: 1.3; font-weight: 600; margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---- SVGアイコン（③ 16px・stroke1.5・currentColor・絵文字グリフ全廃） ---- */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.icon {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
svg.icon .fill-half, .svg-sprite .fill-half { fill: currentColor; stroke: none; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-secondary); padding: 0;
  transition: background var(--t-hover) var(--ease-standard), color var(--t-hover) var(--ease-standard);
}
.btn-icon:hover { background: var(--bg-surface-tint); color: var(--text-primary); }

/* ---- レイアウト（⑩ ライト=ページ背景の上に白キャンバスカード／ダーク=full-bleed） ---- */
.layout {
  display: flex;
  height: calc(100vh - var(--card-inset) * 2);
  margin: var(--card-inset);
  background: var(--bg-canvas);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-canvas); }
.thread { flex: 1; overflow-y: auto; padding: var(--sp-4); }
.thread-inner { max-width: var(--readable-max); margin: 0 auto; }

/* ---- サイドバー（④ 再構築: 新規行36px→検索→時系列グループ→会話行→プロフィール行） ---- */
.sidebar {
  width: var(--sidebar-w); background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; padding: var(--sp-2);
  transition: transform var(--t-sheet) var(--ease-standard);
}
.side-row {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-primary); font-size: var(--fs-14); text-align: left;
  transition: background var(--t-hover) var(--ease-standard);
}
.side-row:hover { background: var(--sidebar-hover); }
.side-search { cursor: text; color: var(--text-tertiary); }
.side-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: var(--fs-14); color: var(--text-primary);
}
.side-search input::placeholder { color: var(--text-tertiary); }
.session-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.group-head {
  font-size: var(--fs-12); color: var(--text-tertiary);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
}
.session-item {
  border-radius: var(--r-sm); padding: 0 var(--sp-2); height: 36px;
  cursor: pointer; color: var(--text-secondary);
  display: flex; align-items: center; gap: var(--sp-2);
  background: transparent; border: 1px solid transparent; text-align: left;
  transition: background var(--t-hover) var(--ease-standard);
}
.session-item:hover { background: var(--sidebar-hover); }
.session-item.active { background: var(--sidebar-active); border-color: var(--border-subtle); color: var(--text-primary); }
.session-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-item.unread .title { font-weight: 600; }
.session-item .pin { color: var(--text-tertiary); width: 12px; height: 12px; }
/* UI-CLONE-4⑪ 未読バッジ → UI-CLONE-7④(b): 赤系白数字に統一（バッジ3層の意匠統一） */
.unread-badge {
  min-width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--sem-error, #D0342C); color: #FFFFFF; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0;
}
/* ⑤ インラインリネーム入力（一覧/ヘッダ共通） */
.title-edit {
  border: 1px solid var(--accent-primary); border-radius: var(--r-sm);
  font-family: inherit; font-size: inherit; color: var(--text-primary);
  background: var(--bg-canvas); padding: 2px 6px; min-width: 0; width: 100%;
}
.btn-danger { background: var(--sem-error); }
.btn-danger:hover { background: var(--sem-error); filter: brightness(0.92); }
.pop-menu button.danger { color: var(--sem-error); }
.tag-pill {
  font-size: var(--fs-12); border-radius: var(--r-full);
  background: var(--bg-surface-tint); color: var(--text-tertiary); padding: 0 var(--sp-2);
  flex-shrink: 0;
}
/* プロフィール行（①ヘッダ解体の移設先・⑪暖色トーン=ライト） */
.profile-wrap { position: relative; margin-top: var(--sp-2); }
.profile-row {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; height: 44px; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-md);
  background: var(--profile-bg); color: var(--text-primary); text-align: left;
  transition: filter var(--t-hover) var(--ease-standard);
}
.profile-row:hover { filter: brightness(0.97); }
[data-theme="dark"] .profile-row { background: transparent; }
[data-theme="dark"] .profile-row:hover { background: var(--sidebar-hover); filter: none; }
.avatar-sm {
  width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--accent-primary); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-13); font-weight: 600; flex-shrink: 0;
}
.profile-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); }

/* ポップメニュー（プロフィール/添付共通） */
.pop-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 200px; padding: var(--sp-1);
  background: var(--bg-canvas); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.pop-menu button {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; height: 36px; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-primary); font-size: var(--fs-14); text-align: left;
  transition: background var(--t-hover) var(--ease-standard);
}
.pop-menu button:hover { background: var(--bg-surface-tint); }
.pop-menu .menu-note { margin-left: auto; font-size: var(--fs-12); color: var(--text-tertiary); }

/* ---- ヘッダ（①解体: ドロワー開閉[モバイル]+会話タイトル+細リングのみ） ---- */
.header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-canvas);
}
.header .spacer { flex: 1; }
.header h3 {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-16); font-weight: 600;
}
#sidebar-toggle { display: none; } /* ドロワー開閉はモバイルのみ */

/* 記憶残量計はコンポーザ枠線の周回表現へ一本化（UI-CLONE-4②・ヘッダの○%リング廃止）。
 * 段階表現: warn/nudge はコンポーザ周回色を意味色へ寄せる（.composer.ctx-warn/.ctx-nudge） */
.composer.ctx-warn { background-image: conic-gradient(from -90deg, var(--sem-warn) 0deg var(--ctx-deg), var(--border-subtle) var(--ctx-deg) 360deg); }
.composer.ctx-nudge { background-image: conic-gradient(from -90deg, var(--sem-error) 0deg var(--ctx-deg), var(--border-subtle) var(--ctx-deg) 360deg); }
[data-theme="dark"] .composer.ctx-warn { background-image: conic-gradient(from -90deg, var(--sem-warn) 0deg var(--ctx-deg), var(--composer-border) var(--ctx-deg) 360deg); }
[data-theme="dark"] .composer.ctx-nudge { background-image: conic-gradient(from -90deg, var(--sem-error) 0deg var(--ctx-deg), var(--composer-border) var(--ctx-deg) 360deg); }

/* ---- メッセージ（§4-1 + ⑤入場アニメ + ③hover-reveal操作 + ②時刻はtooltipのみ） ---- */
/* UI-CLONE-4⑱ 余白リズム: 連続同話者=4px/話者交代=16px（renderMessagesがclass付与・厳格適用） */
.msg-group { margin: 0; position: relative; }
.msg-group.gap-same { margin-top: var(--sp-1); }
.msg-group.gap-turn { margin-top: var(--sp-4); }
.thread-inner { padding-bottom: var(--sp-4); }
.msg-enter { animation: msg-in var(--t-msg) var(--ease-standard); }
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } }
.msg-user {
  background: var(--bubble-user-bg); border: 1px solid var(--bubble-user-border);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3); margin-left: auto; max-width: 85%;
  width: fit-content; white-space: pre-wrap; position: relative;
}
.msg-avis { display: flex; gap: var(--sp-2); }
.msg-avis .avatar {
  width: 12px; height: 12px; border-radius: var(--r-full); align-self: flex-start; margin-top: 6px;
  background-image: var(--gradient-ai); /* GRADIENT_AI_SITE 5: AVISアバター小ドット（⑪ライト・ダーク非表示） */
  flex-shrink: 0;
}
[data-theme="dark"] .msg-avis .avatar { display: none; } /* ダーク=ChatGPTクローン: 直流しのみ */
.msg-avis .body { white-space: pre-wrap; min-width: 0; }
.msg-state { font-size: var(--fs-12); color: var(--text-tertiary); }
.caret::after { content: "▍"; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* メッセージ操作: hover-reveal（モバイル=長押し .actions-open） */
.msg-actions {
  display: flex; gap: var(--sp-1); margin-top: var(--sp-1);
  opacity: 0; transition: opacity var(--t-hover) var(--ease-standard);
}
.msg-group:hover .msg-actions, .msg-group:focus-within .msg-actions, .msg-group.actions-open .msg-actions { opacity: 1; }
/* UI-CLONE-4⑱ hover操作列の視認性: 色を1段強め＋背景輝度連動の下地（テーマvar由来） */
.msg-actions .btn-icon { width: 26px; height: 26px; color: var(--text-secondary); }
.msg-actions .btn-icon:hover { color: var(--text-primary); background: var(--bg-surface-tint); }
.msg-actions .btn-icon.done { color: var(--badge-positive-text); }
@media (hover: none) { .msg-actions { opacity: 0; } .msg-group.actions-open .msg-actions { opacity: 1; } }

/* ---- 入力コンポーザ（⑦ ダーク=#303030+薄枠+radius28/1行pill・ライト=gradient枠維持） ---- */
.composer-wrap { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
/* UI-CLONE-4② コンテキスト計=コンポーザ枠線の周回表現（計器一本化・縦棒/ヘッダリング廃止）。
 * --ctx-deg = 使用量×3.6deg（app.js updateMeter がCSSOMで供給）。太さ不変（padding=枠厚）。
 * ライト=既存グラデが使用量に応じて一周・未使用部=薄neutral線／ダーク=細アクセント線で同挙動。 */
.composer {
  max-width: var(--readable-max); margin: 0 auto;
  background: var(--bg-canvas); border-radius: var(--r-composer);
  position: relative; padding: 2px; box-shadow: var(--shadow-2); /* ⑧ AIカード格上げ=カード影 */
  --ctx-deg: 0deg;
  /* GRADIENT_AI_SITE 1: コンポーザ枠=コンテキスト周回計（ライト・グラデ弧が使用量で伸びる） */
  background-image: conic-gradient(from -90deg,
    #40D2F9 0deg, #60B5EC, #9797DB, #C08BC1, #F67DA6 var(--ctx-deg),
    var(--border-subtle) var(--ctx-deg) 360deg);
}
.composer-inner {
  background: var(--composer-bg); border-radius: calc(var(--r-composer) - 2px);
  overflow: visible;
}
/* 1行時はpill（角丸フル）— autoGrowがclass切替 */
.composer.pill, .composer.pill .composer-inner { border-radius: var(--r-full); }
[data-theme="dark"] .composer {
  background: var(--bg-canvas); box-shadow: none; padding: 1px; border: 0;
  background-image: conic-gradient(from -90deg,
    var(--accent-primary) 0deg var(--ctx-deg),
    var(--composer-border) var(--ctx-deg) 360deg); /* ダーク=細アクセント線の周回・未使用部=薄枠線 */
}
.composer-band { height: 3px; background: transparent; }
.composer.waiting .composer-band { /* ③ 待ち時=ステータス行とトーン連動（脈動） */
  animation: band-pulse 1.2s ease-in-out infinite;
}
@keyframes band-pulse { 50% { opacity: 0.35; } }
[data-theme="dark"] .composer-band { display: none; }
/* 1行flex構造（＋/textarea/送信を同一行・textarea成長時はボタンが下端に張り付く=ChatGPT同型） */
.composer-inner {
  display: flex; align-items: flex-end; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
}
.attach-wrap { position: relative; display: flex; align-items: center; margin-bottom: 3px; }
.composer textarea {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: transparent;
  font-family: inherit; font-size: var(--fs-14); color: var(--text-primary); line-height: 1.6;
  padding: var(--sp-2) var(--sp-1); min-height: 38px; max-height: 200px;
  /* 【2+7】auto-grow上限超過時のみ細スクロールバー（テーマ連動・track非表示=白バー残骸是正） */
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--text-tertiary) transparent;
}
.composer textarea::-webkit-scrollbar { width: 6px; }
.composer textarea::-webkit-scrollbar-track { background: transparent; }
.composer textarea::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: var(--r-full); }
.composer textarea::placeholder { color: var(--text-tertiary); }
.composer-actions { display: flex; align-items: center; gap: var(--sp-2); padding: 0 0 3px; }

.btn-send {
  background: var(--accent-primary); color: #FFFFFF;
  border: 0; border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
  transition: background var(--t-hover) var(--ease-standard);
}
.btn-send:hover { background: var(--accent-primary-hover); }
.btn-send:active { background: var(--accent-primary-active); }
.btn-send:disabled { opacity: 0.5; cursor: default; }
/* 【6】送信/停止=同位置同サイズの円形（ChatGPTクローン）。
 * 活性=黒丸白矢印(ライト)/白丸黒矢印(ダーク)・非活性=薄グレー円+グレー矢印・応答中=同型円の停止(■)。 */
.btn-circle {
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--send-bg); color: var(--send-fg); opacity: 1;
  border-radius: var(--r-full);
  transform: scale(1);
  transition: background var(--t-hover) var(--ease-standard),
    color var(--t-hover) var(--ease-standard),
    transform var(--t-hover) var(--ease-standard);
}
.btn-circle:hover { background: var(--send-bg-hover); }
#send-btn:disabled { background: var(--send-idle-bg); color: var(--send-idle-fg); transform: scale(0.96); opacity: 1; cursor: default; }
#stop-btn { background: var(--send-bg); color: var(--send-fg); }
#stop-btn .icon { width: 12px; height: 12px; fill: currentColor; }

/* ---- ③ Claude型ステータス行（§3-2改定・返信位置・脈動ドット+作業文+gradient細バー+経過秒） ---- */
.status-row {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0; color: var(--text-secondary); font-size: var(--fs-13);
}
.status-dot {
  width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--text-secondary);
  animation: status-pulse 1.2s ease-in-out infinite;
}
@keyframes status-pulse { 50% { opacity: 0.35; transform: scale(0.85); } }
.status-bar {
  width: 120px; height: 3px; border-radius: var(--r-full);
  background: var(--bg-surface-tint); overflow: hidden; flex-shrink: 0;
}
.status-bar .fill {
  display: block; height: 100%; width: 0;
  background-image: var(--gradient-ai); /* GRADIENT_AI_SITE 2: ステータス行 進行細バー（旧待ち時間バーの後継） */
  transition: width 400ms var(--ease-standard);
}
.status-elapsed { font-size: var(--fs-12); color: var(--text-tertiary); }
/* SEV⑧(b) 超過=進行アニメ停止→鼓動（バーは満ち止め・ドットが脈動を強める）+続行ボタン */
.status-row.overrun .status-bar .fill { transition: none; animation: heartbeat 1.4s ease-in-out infinite; }
.status-row.overrun .status-dot { animation: heartbeat 1.4s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { opacity: 1; } 30% { opacity: 0.4; } 45% { opacity: 1; } 60% { opacity: 0.5; } }
/* ETA-REAL: 標本不足クラス=見込み秒を出さない中立表示。バーは不定（左右往復）にして進捗量を偽装しない。 */
.status-row.indeterminate .status-bar .fill {
  width: 40%; transition: none; animation: indeterminate-slide 1.4s ease-in-out infinite;
}
@keyframes indeterminate-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.status-row .bg-continue { margin-left: var(--sp-2); font-size: var(--fs-12); }

/* ---- 作業中インジケータ ---- */
.working-indicator {
  display: inline-block; width: 48px; height: 6px; border-radius: var(--r-full);
  background-image: var(--gradient-ai); /* GRADIENT_AI_SITE 3: AVIS作業中インジケータ */
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

/* 録音リングは削除（UI-CLONE-5【2】白バー残骸是正+【6】マイクは音声点灯まで非表示。
 * gradient.ai site数は4へ縮小=上限5以内・音声SEG点灯時に再設計） */

/* ---- 取消リング（§3-16(f)・UI-CLONE-4④ 数字廃止=アイコン+hover/長押しラベル+極細進行ライン） ---- */
.cancel-ring {
  position: absolute; right: -10px; bottom: -10px;
  width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--bg-canvas); border: 2px solid var(--accent-primary);
  color: var(--accent-primary); padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
}
.cancel-ring .icon { width: 12px; height: 12px; }
.cancel-tip { /* hover(PC)/長押し(mobile)で「送信取り消し」— 取消可能窓内のみ（ringごと消滅） */
  position: absolute; right: 0; bottom: calc(100% + 6px); white-space: nowrap;
  background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--r-full);
  padding: 2px var(--sp-2); font-size: var(--fs-12); color: var(--text-secondary);
  opacity: 0; pointer-events: none; box-shadow: var(--shadow-1);
  transition: opacity var(--t-hover) var(--ease-standard);
}
.cancel-ring:hover .cancel-tip, .cancel-ring.tip-open .cancel-tip { opacity: 1; }
.hold-line { /* バブル下端の極細進行ライン（残り窓の視覚化・幅はapp.jsがCSSOMで減算） */
  position: absolute; left: var(--sp-3); bottom: 3px; height: 2px; max-width: calc(100% - 2 * var(--sp-3));
  border-radius: var(--r-full); background: var(--accent-primary); opacity: 0.55; width: 100%;
}
.cancelled-placeholder { color: var(--text-tertiary); font-style: italic; }

/* ---- オフライン保留bubble（型④・保留中と分かる見た目＋復帰時自動再送） ---- */
.msg-user.queued { opacity: 0.75; border: 1px dashed var(--text-tertiary); }
.queued-note { text-align: right; }

/* ---- 空状態（【B】ヒーロー=thread全域の絶対配置で確実に中央・チップはコンポーザ直上） ---- */
.thread { position: relative; }
.empty-state {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-8) var(--sp-4);
  background: radial-gradient(ellipse at 50% 100%, var(--glow-ambient), transparent 70%);
}
.greeting { color: var(--text-primary); font-size: var(--fs-24); font-weight: 600; margin: 0; }
.chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center;
  max-width: var(--readable-max); margin: 0 auto var(--sp-2);
}
.chip {
  background: var(--bg-surface-tint); border: 1px solid transparent;
  border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3); color: var(--text-secondary);
  font-size: var(--fs-13);
  transition: border-color var(--t-hover) var(--ease-standard);
}
.chip:hover { border-color: var(--accent-primary); }

/* ---- 状態チップ（§4-7 mission） ---- */
.status-chip { font-size: var(--fs-12); border-radius: var(--r-full); padding: 2px var(--sp-3); }
.status-chip.received { background: var(--bg-surface-tint); color: var(--sem-info); }
.status-chip.done { background: var(--badge-positive-bg); color: var(--badge-positive-text); }
.status-chip.attention { background: var(--bg-surface-tint); color: var(--sem-warn); }

/* ---- 汎用ボタン ---- */
.btn-ghost {
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3); color: var(--text-secondary);
  transition: background var(--t-hover) var(--ease-standard);
}
.btn-ghost:hover { background: var(--bg-surface-tint); }
.follow-pill { position: fixed; bottom: 140px; right: 24px; background: var(--bg-canvas); box-shadow: var(--shadow-2); z-index: 20; }

/* ---- トースト/バナー（§4-11・小型ピル=ヘッダ非遮蔽） ---- */
.banner {
  position: fixed; top: var(--sp-2); left: 50%; transform: translateX(-50%);
  z-index: 40; max-width: 90vw; width: max-content;
  padding: var(--sp-1) var(--sp-4); text-align: center; font-size: var(--fs-13);
  color: #FFFFFF; border-radius: var(--r-full); box-shadow: var(--shadow-2);
}
.banner.offline { background: var(--text-tertiary); }
/* WS切断は「オフライン」ではない（誤爆根絶）— 再接続中を別バナーで分離 */
.banner.reconnect { background: var(--sem-info); }
.toast {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  background: var(--bg-canvas); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-4); z-index: 50; max-width: 90vw;
}
.toast.err-rails { border-left: 4px solid var(--sem-error); }
.toast.err-timeout { border-left: 4px solid var(--sem-warn); }
.toast.err-context { border-left: 4px solid var(--sem-info); }
.toast.err-offline { border-left: 4px solid var(--text-tertiary); }

/* ---- モーダル/シート（§4-12） ---- */
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: none; }
.modal {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg-canvas); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  padding: var(--sp-6); min-width: 280px; max-width: 90vw; display: none;
}
.modal.open, .modal-scrim.open { display: block; }

/* ---- ⑤ サイドバー3導線 ---- */
.nav-links { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-2); }

/* 会話メニュー（⋯・hoverで出現） */
.session-item .conv-menu-btn { width: 24px; height: 24px; opacity: 0; flex-shrink: 0; }
.session-item:hover .conv-menu-btn, .session-item:focus-within .conv-menu-btn { opacity: 1; }
.conv-pop { z-index: 45; }

/* パネル（成果物/会社情報） */
.modal.panel { width: min(560px, 92vw); }
.sort-row { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; }
.sort-row .chip.active { border-color: var(--accent-primary); color: var(--accent-primary); }
.panel-body { max-height: 50vh; overflow-y: auto; margin: var(--sp-2) 0 var(--sp-3); color: var(--text-secondary); }
.art-row { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); }
.art-title { color: var(--text-primary); }
.art-meta { font-size: var(--fs-12); color: var(--text-tertiary); }
.kv-row { display: flex; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border-subtle); }
.kv-k { min-width: 40%; color: var(--text-tertiary); font-size: var(--fs-12); overflow-wrap: anywhere; }
.kv-v { color: var(--text-primary); overflow-wrap: anywhere; }

/* 背景ピッカー＋thread背景（クライアント側のみ・既存トークン流用） */
.bg-options { display: flex; gap: var(--sp-3); margin: var(--sp-3) 0; }
.bg-opt { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); background: transparent; border: 0; color: var(--text-secondary); font-size: var(--fs-12); }
.bg-swatch { width: 56px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); background: var(--bg-canvas); }
.bg-glow-sw { background: radial-gradient(ellipse at 50% 100%, var(--glow-ambient), var(--bg-canvas) 75%); }
.bg-mist-sw { background: linear-gradient(180deg, var(--bg-surface-tint), var(--bg-canvas)); }
.thread.bg-glow { background: radial-gradient(ellipse at 50% 110%, var(--glow-ambient), transparent 65%); }
.thread.bg-mist { background: linear-gradient(180deg, var(--bg-surface-tint), transparent 40%); }
/* UI-CLONE-4⑥ 自社生成の抽象画像ライブラリ（scripts/gen-chat-backgrounds.js・外部素材0） */
.thread.bg-aurora { background-image: url('/bg/bg-aurora.svg'); background-size: cover; background-position: center; }
.thread.bg-dawn { background-image: url('/bg/bg-dawn.svg'); background-size: cover; background-position: center; }
.thread.bg-weave { background-image: url('/bg/bg-weave.svg'); background-size: cover; background-position: center; }
.thread.bg-terra { background-image: url('/bg/bg-terra.svg'); background-size: cover; background-position: center; }
.bg-aurora-sw { background-image: url('/bg/bg-aurora.svg'); background-size: cover; background-position: center; }
.bg-dawn-sw { background-image: url('/bg/bg-dawn.svg'); background-size: cover; background-position: center; }
.bg-weave-sw { background-image: url('/bg/bg-weave.svg'); background-size: cover; background-position: center; }
.bg-terra-sw { background-image: url('/bg/bg-terra.svg'); background-size: cover; background-position: center; }
/* 画像背景時の可読性ベール（AVIS本文/ステータス行に半透明の下地） */
.thread.bg-img .msg-avis .body, .thread.bg-img .status-row {
  background: color-mix(in srgb, var(--bg-canvas) 84%, transparent);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.thread.bg-img .msg-user { box-shadow: var(--shadow-1); }

/* ---- ログイン面（⑩ ブランド行+label+状態意匠・背景=body.login-open） ---- */
body.login-open::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(640px 420px at 50% 28%, var(--glow-ambient), transparent 70%);
}
[data-theme="dark"] body.login-open::before {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45)); /* 微vignette */
}
.login-card {
  max-width: 380px; margin: 14vh auto; background: var(--bg-canvas);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative; overflow: hidden;
}
.login-band { /* カード上端グラデ帯（サイト①と同一様式=コンポーザ/カード上端帯・site数は5のまま） */
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background-image: var(--gradient-ai);
}
.brand { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }
.wordmark { font-size: var(--fs-24); font-weight: 700; letter-spacing: 0.08em; color: var(--text-primary); }
.tagline { font-size: var(--fs-12); color: var(--text-tertiary); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-12); color: var(--text-secondary); }
.login-card input {
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); font-family: inherit; font-size: var(--fs-14);
  background: var(--bg-surface-tint); color: var(--text-primary);
  transition: border-color var(--t-hover) var(--ease-standard);
}
.login-card input:focus { outline: none; border-color: var(--accent-primary); }
.btn-login { /* ⑨⑩ primary=indigo・彩度戻し（ダークでもaccent原色） */
  background: #5E76F2; color: #FFFFFF; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-14);
}
.btn-login:hover { background: #4C63E0; }
.btn-login:active { background: #3F53C9; }
.login-err { min-height: 1.4em; font-size: var(--fs-13); color: var(--sem-error); }

/* ---- inline style属性から移設（CSP対応） ---- */
#set-hold { width: 5em; }

/* ---- UI-CLONE-4③ 応答待機ヒント（内部用語なし・1行・文言=i18n） ---- */
.composer-hint {
  max-width: var(--readable-max); margin: 0 auto var(--sp-1);
  font-size: var(--fs-12); color: var(--text-tertiary); text-align: center;
}

/* ---- UI-CLONE-5 A-2: staged添付チップ ---- */
.staged-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) 0;
}
.staged-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-surface-tint); padding: var(--sp-1) var(--sp-2);
  max-width: 240px; position: relative; font-size: var(--fs-12); color: var(--text-secondary);
}
.staged-chip .thumb {
  width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0;
  background: var(--bg-canvas);
}
.staged-chip .fico { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-tertiary); }
.staged-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.staged-chip .sz { color: var(--text-tertiary); flex-shrink: 0; }
.staged-chip .rm { width: 20px; height: 20px; flex-shrink: 0; }
.staged-chip.failed { border-color: var(--sem-error); }
.staged-chip .prog { /* 進捗リング（アップロード中） */
  width: 16px; height: 16px; border-radius: var(--r-full); flex-shrink: 0;
  border: 2px solid var(--border-subtle); border-top-color: var(--accent-primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* D&Dドロップ受付の視覚 */
.composer.dragover .composer-inner { outline: 2px dashed var(--accent-primary); outline-offset: -4px; }

/* ---- A-7: バブル内添付表示 ---- */
.att-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.att-thumb { max-width: 220px; max-height: 160px; border-radius: var(--r-md); cursor: zoom-in; display: block; }
.att-video { max-width: 320px; border-radius: var(--r-md); display: block; }
.file-card {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-surface-tint); padding: var(--sp-2) var(--sp-3);
  color: var(--text-primary); font-size: var(--fs-13); text-decoration: none; max-width: 280px;
}
.file-card .meta { display: flex; flex-direction: column; min-width: 0; }
.file-card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .sz { font-size: var(--fs-12); color: var(--text-tertiary); }
.lightbox {
  position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: center; justify-content: center;
}
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: var(--r-md); }
.lightbox-close { position: fixed; top: 16px; right: 16px; color: #FFFFFF; }

/* A-4 登録確認チップ行（返信下・確認後は非表示） */
.register-ask { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.register-ask .q { font-size: var(--fs-13); color: var(--text-secondary); }

/* 【6】停止後の小ラベル */
.stopped-note { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: 2px; }

/* ---- 【8】設定v2 ---- */
.modal.settings-v2 { width: min(560px, 94vw); max-height: 84vh; overflow-y: auto; }
.set-top { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 36px; }
.set-label { color: var(--text-secondary); font-size: var(--fs-13); }
.seg { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: var(--r-full); overflow: hidden; }
.seg button {
  border: 0; background: transparent; color: var(--text-secondary);
  padding: var(--sp-1) var(--sp-3); font-size: var(--fs-12);
  transition: background var(--t-hover) var(--ease-standard);
}
.seg button.active { background: var(--accent-primary); color: #FFFFFF; }
.set-acc { border-top: 1px solid var(--border-subtle); }
.set-acc-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; background: transparent; color: var(--text-primary);
  padding: var(--sp-2) 0; font-size: var(--fs-14); text-align: left;
}
.set-acc-head .icon { transition: transform var(--t-hover) var(--ease-standard); }
.set-acc.open .set-acc-head .icon { transform: rotate(90deg); }
.set-acc-body { display: none; padding: 0 0 var(--sp-3); }
.set-acc.open .set-acc-body { display: block; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) 0; font-size: var(--fs-12); color: var(--text-secondary); }
.device-row .ua { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.set-note { font-size: var(--fs-12); color: var(--text-tertiary); }
.set-input { border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--bg-surface-tint); color: var(--text-primary); padding: var(--sp-1) var(--sp-2); font-family: inherit; font-size: var(--fs-13); }
:root[data-contrast="high"] {
  --text-secondary: var(--text-primary);
  --border-subtle: var(--text-tertiary);
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important;
}
:root[data-fs="large"] body { line-height: 1.7; }
:root[data-fs="small"] body { line-height: 1.55; }

/* 【8】ツアー */
.tour-tip {
  position: fixed; z-index: 90; max-width: 260px;
  background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: var(--sp-3);
}
.tour-tip p { margin: 0 0 var(--sp-2); font-size: var(--fs-13); }
.tour-highlight { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--r-sm); }

/* 【B】長ファイル名: バブルmax幅は既存85%・表示名はJSが中間省略（fullはtitle） */
.mobile-only { display: none; }
.pop-menu .dormant { color: var(--text-tertiary); }
/* ---- UI-CLONE-4⑨ markdown描画（DOM構築・innerHTML不使用=A-8維持） ---- */
.msg-avis .body.md { white-space: normal; }
.msg-avis .body.md .md-p { margin: var(--sp-1) 0; }
.msg-avis .body.md .md-h { font-weight: 600; margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-16); }
.msg-avis .body.md ul, .msg-avis .body.md ol { margin: var(--sp-1) 0; padding-left: 1.5em; }
.msg-avis .body.md li { margin: 2px 0; }
.msg-avis .body.md pre {
  background: var(--bg-surface-tint); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: var(--sp-3); overflow-x: auto;
  font-size: var(--fs-13); line-height: 1.5; margin: var(--sp-2) 0;
}
.msg-avis .body.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.msg-avis .body.md code.inline { background: var(--bg-surface-tint); border-radius: 4px; padding: 0 4px; }
.md-table-wrap { overflow-x: auto; margin: var(--sp-2) 0; }
.msg-avis .body.md table { border-collapse: collapse; }
.msg-avis .body.md th, .msg-avis .body.md td {
  border: 1px solid var(--border-subtle); padding: 4px 10px; font-size: var(--fs-13); text-align: left;
}
.msg-avis .body.md th { background: var(--bg-surface-tint); font-weight: 600; }
.msg-avis .body.md a { color: var(--accent-primary); }

/* ---- UI-CLONE-4⑰ 出典チップ（AVIS返信のsource_ref契約枠・不在=非表示） ---- */
.source-refs { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.src-chip {
  font-size: var(--fs-12); border: 1px solid var(--border-subtle); border-radius: var(--r-full);
  padding: 0 var(--sp-2); color: var(--text-tertiary); text-decoration: none;
  transition: color var(--t-hover) var(--ease-standard), border-color var(--t-hover) var(--ease-standard);
}
.src-chip:hover { color: var(--accent-primary); border-color: var(--accent-primary); }

/* ---- WS3-BATCH-1 PART A (RESPONSIVE-TOTAL): 横溢れの原因除去（band-aid禁止・要素側是正） ---- */
/* A2(i) 長い連続文字列(ID/URL/sha)は箱幅で折返す。本文・markdown段落/見出し/リスト・承認要点。
 *   code/pre/表は既存の overflow-x:auto（.md pre 725 / .md-table-wrap 732）でブロック内スクロールへ
 *   閉込め済＝ページ/threadを横に引かせない。inbox詳細本文/タイトルは既に overflow-wrap:anywhere(844/846)。 */
.msg-user,
.msg-avis .body,
.msg-avis .body.md .md-p,
.msg-avis .body.md .md-h,
.msg-avis .body.md li,
.appr-point {
  overflow-wrap: anywhere;
}
.msg-avis .body.md code.inline { overflow-wrap: anywhere; word-break: break-all; }
/* A2(iii) flex/grid子のmin-width:0欠落是正（子が縮まず内容幅で親を押し広げる漏れを断つ） */
.msg-user, .msg-avis { min-width: 0; }
/* A2(iv) 画像/メディア=箱幅上限（固定px指定の要素はより特異なclass規則が優先=退行なし） */
img { max-width: 100%; height: auto; }

/* ---- モバイル（⑥ dock+safe-area+44px+キーボード時ヘッダ最小化・本文16px/1.6） ---- */
@media (max-width: 720px) {
  /* ①UI-CLONE-6 ChatGPTモバイルクローン: full-bleed・ドロワー+scrim・下部dock・safe-area・44px */
  .layout { margin: 0; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .main { min-height: 0; }
  /* ドロワー（左スライド・scrim付き・面外タップで閉じる） */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 45; transform: translateX(-100%);
    width: min(86vw, 330px); box-shadow: var(--shadow-2);
    padding-top: calc(var(--sp-2) + env(safe-area-inset-top));
  }
  .sidebar.open { transform: translateX(0); }
  #drawer-scrim { position: fixed; inset: 0; z-index: 44; background: var(--scrim); display: none; }
  #drawer-scrim.open { display: block; }
  #sidebar-toggle { display: inline-flex; }
  /* ヘッダ=safe-area top・タイトル中央寄せ余地 */
  .header { padding-top: calc(var(--sp-2) + env(safe-area-inset-top)); }
  /* 下部dock=sticky・safe-area bottom */
  .composer-wrap {
    position: sticky; bottom: 0; background: var(--bg-canvas); z-index: 20;
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
  .composer textarea { font-size: var(--fs-16); }
  #send-btn, #stop-btn { width: 44px; height: 44px; }
  .btn-icon { width: 40px; height: 40px; } /* 44px近傍のタップ域 */
  .attach-wrap .btn-icon { width: 44px; height: 44px; }
  .staged-chips { flex-wrap: nowrap; overflow-x: auto; }
  .kb-open .header { padding: 2px var(--sp-3); }
  .kb-open .header h3 { font-size: var(--fs-13); }
  /* モーダル=下からのシート（safe-area） */
  .modal { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
  .modal.settings-v2 { max-height: 88vh; }
  .lightbox img { max-width: 96vw; }
  .mobile-only { display: flex; }
  /* UI-CLONE-5 A-2: ＋メニュー=下からのシート（safe-area対応） */
  #attach-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    border-radius: var(--r-xl) var(--r-xl) 0 0; min-width: 0;
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
  #attach-menu button { height: 44px; }
  /* ⑤ ワードマークはドロワー内でも最上部 */
  .brand-mark { padding-top: var(--sp-1); }
  /* tour-tip=モバイルでは画面下部固定（viewport外れ防止） */
  .tour-tip { left: var(--sp-3) !important; right: var(--sp-3); max-width: none;
    top: auto !important; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
}

/* ---- アクセシビリティ（§3-16(l)・⑤全演出はreduced motionで停止） ---- */
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- UI-LOGIN-V2（③ 再設計の追補: 目アイコン/CapsLock/招待/フッタ/リンクボタン） ---- */
.pass-wrap { position: relative; display: block; }
.pass-wrap input { width: 100%; padding-right: 40px; }
.eye-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.capslock-warn { font-size: var(--fs-12); color: var(--sem-warn); }
.link-btn {
  background: transparent; border: 0; padding: 0; align-self: flex-start;
  color: var(--accent-primary); font-size: var(--fs-13); cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.invite-note { font-size: var(--fs-12); color: var(--text-tertiary); margin: var(--sp-1) 0 0; }
/* SEV-OTPFIELD: OTP任意欄ヒント（両テーマ=token変数経由） */
.otp-hint { font-size: var(--fs-12); color: var(--text-tertiary); margin: calc(-1 * var(--sp-1)) 0 var(--sp-1); }
/* UI-CLONE-8: 受信箱（Inbox・Linear型・CTO裁定 2026-07-20 設計是正）。
 * 会話面と排他の第2画面（PC=main内スワップ／モバイル=下シート）・両テーマ=token変数経由。 */
.inbox-badge {
  background: var(--sem-error, #D0342C); color: #FFFFFF;
  border-radius: var(--r-full); font-size: var(--fs-12); font-weight: 600;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.inbox-badge-head {
  background: var(--sem-error, #D0342C); color: #FFFFFF; border: none; cursor: pointer;
  border-radius: var(--r-full); font-size: var(--fs-12); font-weight: 600;
  padding: 4px 10px; min-height: 28px; flex-shrink: 0;
}
.inbox-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-canvas, var(--bg-primary)); }
.inbox-view.hidden { display: none; }
/* A3 独立ビュー: 会話面（スレッド+コンポーザ）と排他・会話タイトル/進行チップも面から外す */
body.inbox-open .thread, body.inbox-open .composer-wrap { display: none; }
body.inbox-open #conv-title, body.inbox-open #mission-chip { display: none; }
/* A2 2ペイン: 左一覧+右詳細 */
.inbox-panes { flex: 1; min-height: 0; display: flex; }
.inbox-detail {
  width: min(46%, 560px); min-width: 320px; border-left: 1px solid var(--border-subtle, var(--border));
  overflow-y: auto; padding: var(--sp-3) var(--sp-4) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-2); background: var(--bg-secondary);
}
.inbox-detail.hidden { display: none; }
.inbox-detail-head { display: flex; align-items: center; gap: var(--sp-2); }
.inbox-detail-title { font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.inbox-detail-sect { font-size: var(--fs-12); font-weight: 600; color: var(--text-tertiary); margin-top: var(--sp-2); }
.inbox-detail-body { font-size: var(--fs-13, var(--fs-12)); color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-detail-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.inbox-noreason { color: var(--text-tertiary); font-style: normal; }
.inbox-kv { display: flex; gap: var(--sp-2); font-size: var(--fs-12); }
.inbox-kv .k { color: var(--text-tertiary); flex-shrink: 0; min-width: 72px; }
.inbox-kv .v { color: var(--text-secondary); overflow-wrap: anywhere; }
.inbox-keys-hint { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: auto; padding-top: var(--sp-3); }
.inbox-back { display: none; }
/* A4 グループ折畳 */
.inbox-group-head {
  display: flex; align-items: center; gap: var(--sp-1); width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; color: var(--text-secondary);
  font-size: var(--fs-13, var(--fs-12)); font-weight: 600; padding: var(--sp-1) var(--sp-2);
}
.inbox-group-head .icon { transition: transform .15s ease; }
.inbox-group-head.open .icon { transform: rotate(90deg); }
.inbox-sect.collapsible { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; gap: var(--sp-1); }
.inbox-sect.collapsible .icon { transition: transform .15s ease; }
.inbox-sect.collapsible.open .icon { transform: rotate(90deg); }
.inbox-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle, var(--border)); }
.inbox-title { font-weight: 700; font-size: var(--fs-16); color: var(--text-primary); }
.inbox-filters { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); flex-wrap: wrap; }
.inbox-type-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.inbox-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2) var(--sp-4) var(--sp-6); }
/* A6 統一密度: 行=meta/タイトル/要約の3行固定構成・カーソル/選択状態・hover reveal操作 */
.inbox-row {
  display: flex; align-items: flex-start; gap: var(--sp-2); position: relative;
  background: var(--surface-raised, var(--bg-secondary));
  border: 1px solid var(--border-default, var(--border));
  border-radius: var(--radius-md, 8px); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1);
  min-height: 68px; cursor: pointer;
}
.inbox-row:hover { background: var(--bg-hover, rgba(128,128,128,.08)); }
.inbox-row.active { border-color: var(--accent-primary); }
.inbox-row.cursor { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.inbox-row-ops {
  position: absolute; right: var(--sp-2); top: var(--sp-2); display: none; gap: 2px;
  background: var(--surface-raised, var(--bg-secondary)); border-radius: var(--r-sm);
}
.inbox-row:hover .inbox-row-ops, .inbox-row.cursor .inbox-row-ops { display: flex; }
.inbox-row.unread { border-left: 3px solid var(--accent-primary); }
.inbox-row.done { opacity: .72; }
/* ④ SEV警報=赤系強調（最上位ピンはDOM順で担保・sev-headセクション） */
.inbox-row.sev { border-left: 3px solid var(--sem-error, #D0342C); background: var(--sev-row-bg, rgba(208, 52, 44, .07)); }
.sev-head { color: var(--sem-error, #D0342C); }
.inbox-main { flex: 1; min-width: 0; }
.inbox-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.inbox-type-chip { font-size: var(--fs-12); border-radius: var(--r-full); padding: 1px var(--sp-2); background: var(--bg-surface-tint, rgba(128,128,128,.12)); color: var(--text-secondary); }
.inbox-type-chip.approval { color: var(--sem-info, var(--accent-primary)); }
.inbox-type-chip.sev { background: var(--sem-error, #D0342C); color: #FFFFFF; }
.inbox-sev-level { font-size: var(--fs-12); font-weight: 700; color: var(--sem-error, #D0342C); }
.inbox-time { font-size: var(--fs-12); color: var(--text-tertiary); }
.inbox-state { font-size: var(--fs-12); color: var(--text-secondary); }
.inbox-row-title { font-size: var(--fs-14); font-weight: 600; color: var(--text-primary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-reason { font-size: var(--fs-13, var(--fs-12)); color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-empty { text-align: center; color: var(--text-tertiary); padding: var(--sp-6) var(--sp-4); }
/* ⑤(i) A-18: push深リンク着地の一瞬ハイライト */
.inbox-jump-flash { outline: 2px solid var(--sem-warn); outline-offset: 2px; transition: outline-color 1.2s ease; }
/* A2 モバイル=独立フル画面+一覧→詳細のpush遷移（詳細が右からスライドイン） */
@media (max-width: 640px) {
  .inbox-view { position: fixed; inset: 0; z-index: 45; background: var(--bg-canvas, var(--bg-primary)); }
  .inbox-detail {
    position: fixed; inset: 0; z-index: 46; width: 100%; min-width: 0; max-width: none;
    border-left: none; transform: translateX(100%); transition: transform .22s ease;
  }
  body.inbox-detail-open .inbox-detail { transform: translateX(0); }
  .inbox-detail.hidden { display: flex; visibility: hidden; } /* transition用に保持・非表示はvisibilityで */
  body.inbox-detail-open .inbox-detail:not(.hidden) { visibility: visible; }
  .inbox-back { display: inline-flex; }
  .inbox-row-ops { display: flex; } /* touch環境=hoverなし→常時表示 */
}
/* ---- WS3-BATCH-1 PART A3 (タッチ操作の成立・CTO裁定是正) ---- */
/* 受信箱行の既読/スヌーズ hover-reveal はタッチ端末で到達不能。幅基準(640px媒体)では広幅タブレット
 * (768/1024)が漏れるため pointer 基準で常時表示（省スペース型=行右上集約）。タップ標的は44px級。
 * ★source順で base の .inbox-row-ops{display:none}(871系)より後に置く=同特異性で本rule勝ち。 */
@media (hover: none), (pointer: coarse) {
  .inbox-row-ops { display: flex; }
  .inbox-row-ops .btn-icon { min-width: 44px; min-height: 44px; }
}
/* 承認操作部品（受信箱内で使用・旧カードから継承） */
.appr-deadline { font-size: var(--fs-12); color: var(--sem-warn); margin-top: var(--sp-1); }
.appr-point { font-size: var(--fs-13, var(--fs-12)); color: var(--text-secondary); margin-top: var(--sp-1); }
.appr-btn { min-height: 36px; }
.appr-err { font-size: var(--fs-12); color: var(--sem-error, var(--sem-warn)); flex-basis: 100%; }
.appr-reason { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex-basis: 100%; margin-top: var(--sp-2); }
.appr-reason-input { flex-basis: 100%; min-height: 56px; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-default, var(--border)); border-radius: var(--radius-md, 8px); padding: var(--sp-2); }
.login-footer { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); }
.login-footer a { font-size: var(--fs-12); color: var(--text-tertiary); text-decoration: none; }
.login-footer a:hover { color: var(--text-secondary); text-decoration: underline; }

/* ======== UI-CLONE-6+WIRE-1（CTO授権 2026-07-19） ======== */

/* ② 文字サイズ3段: --fscで全fs連動。data-fsで行間/見出し/チップの段別微調整（体感差を出す） */
:root[data-fs="small"] body { line-height: 1.5; }
:root[data-fs="medium"] body { line-height: 1.65; }
:root[data-fs="large"] body { line-height: 1.8; }
:root[data-fs="large"] .msg-avis .body.md .md-h { font-size: calc(var(--fs-18)); }
:root[data-fs="large"] .chip { padding: var(--sp-2) var(--sp-4); }
:root[data-fs="large"] .greeting { font-size: var(--fs-32); }

/* ④ 全体配色プリセット4種（サイドバー/ヘッダの色調・自由色は不採用=コントラスト保証）。
 * チャット背景(bg-*)とは独立。data-palette で --bg-sidebar/--bg-page 系を上書き。 */
:root[data-palette="slate"] {
  --bg-sidebar: #EDF0F4; --bg-page: #DFE3EA; --profile-bg: #E3E8F0;
}
:root[data-palette="slate"][data-theme="dark"] { --bg-sidebar: #14181F; --bg-page: #1B2027; --bg-canvas: #1B2027; }
:root[data-palette="sand"] {
  --bg-sidebar: #F5F0E8; --bg-page: #EBE4D8; --profile-bg: #EFE7DA;
}
:root[data-palette="sand"][data-theme="dark"] { --bg-sidebar: #201C16; --bg-page: #26211A; --bg-canvas: #26211A; }
:root[data-palette="forest"] {
  --bg-sidebar: #E9F1EC; --bg-page: #DCE8E0; --profile-bg: #E1EBE4;
}
:root[data-palette="forest"][data-theme="dark"] { --bg-sidebar: #131C17; --bg-page: #18221C; --bg-canvas: #18221C; }
.palette-swatches { display: flex; gap: var(--sp-2); }
.palette-sw {
  width: 40px; height: 28px; border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer;
  background: linear-gradient(135deg, var(--pv-side) 50%, var(--pv-canvas) 50%);
}
.palette-sw.active { border-color: var(--accent-primary); }
.palette-sw[data-p="default"] { --pv-side: #F2F2FE; --pv-canvas: #FFFFFF; }
.palette-sw[data-p="slate"] { --pv-side: #EDF0F4; --pv-canvas: #FFFFFF; }
.palette-sw[data-p="sand"] { --pv-side: #F5F0E8; --pv-canvas: #FFFFFF; }
.palette-sw[data-p="forest"] { --pv-side: #E9F1EC; --pv-canvas: #FFFFFF; }

/* ⑤ 面別ブランドワードマーク（サイドバー最上部・その下に「新しいチャット」=ChatGPT同構造） */
.brand-mark {
  display: flex; align-items: baseline; gap: 6px;
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  font-weight: 800; letter-spacing: 0.06em; color: var(--text-primary);
  font-size: var(--fs-18);
}
.brand-mark .sub { font-size: var(--fs-12); font-weight: 500; letter-spacing: 0; color: var(--text-tertiary); }

/* ⑥ カメラモーダル（PC=選択→Webカメラ起動 or ファイル選択・mobile=capture直行） */
.cam-body { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-3) 0; }
.cam-video, .cam-shot { width: 100%; max-height: 50vh; border-radius: var(--r-md); background: #000; }
.cam-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cam-choice { display: flex; flex-direction: column; gap: var(--sp-2); }
.cam-err { font-size: var(--fs-13); color: var(--sem-error); min-height: 1.2em; }

/* ⑦ 設定polish: ON/OFF→スイッチ部品・背景行=プレビューサムネ+変更 */
.switch { position: relative; width: 42px; height: 24px; border-radius: var(--r-full); background: var(--send-idle-bg); border: 0; padding: 0; cursor: pointer; transition: background var(--t-hover) var(--ease-standard); flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--r-full); background: #FFFFFF; transition: transform var(--t-hover) var(--ease-standard); box-shadow: var(--shadow-1); }
.switch.on { background: var(--accent-primary); }
.switch.on::after { transform: translateX(18px); }
.bg-row { display: flex; align-items: center; gap: var(--sp-2); }
.bg-preview { width: 44px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle); background-size: cover; background-position: center; flex-shrink: 0; }

/* ⑨ WIRE: mission状態チップ（会話一覧/ヘッダ・read model接続時） */
.mission-chip { font-size: var(--fs-12); border-radius: var(--r-full); padding: 1px var(--sp-2); background: var(--bg-surface-tint); color: var(--sem-info); flex-shrink: 0; }
.mission-chip.done { background: var(--badge-positive-bg); color: var(--badge-positive-text); }
.mission-chip.attention { color: var(--sem-warn); }

/* ⑨WIRE-1(a) 成果物パネル: プレビューサムネ+メタ実データ行 */
.art-row { display: flex; align-items: center; gap: var(--sp-3); }
.art-thumb-sm { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-surface-tint); }
.art-textcol { min-width: 0; flex: 1; }