/**
 * axia_ux_v3.css — AXIA UI v3 Design System (Rewrite)
 * ChatGPT / Manus / Genspark 級 "成果物が主役" UI
 *
 * 読み込み順: 最後（axia_ux_v2.css の直後）
 * 方針: 重複定義を完全排除。固定グリッドレイアウト。
 */

/* ═══════════════════════════════════════════════════════════
   §1. CSS変数（v3デザイントークン）
   ═══════════════════════════════════════════════════════════ */
:root {
  --v3-bg:           #0d1117;
  --v3-surface:      #161b22;
  --v3-surface2:     #1e2433;
  --v3-border:       rgba(48, 54, 61, 0.8);
  --v3-accent:       #6366f1;
  --v3-accent-dim:   rgba(99, 102, 241, 0.15);
  --v3-text:         #e2e8f0;
  --v3-text-muted:   #94a3b8;
  --v3-text-dim:     #475569;
  --v3-user-bg:      #2563eb;
  --v3-ai-bg:        #1e2433;
  --v3-sidebar-w:    260px;
  --v3-header-h:     64px;
  --v3-input-h:      80px;
  --v3-gpf-h:        36px;
}

/* ═══════════════════════════════════════════════════════════
   §2. 全体レイアウト基盤（app-wrapper → header + chat-layout）
   ═══════════════════════════════════════════════════════════ */

/* app-wrapper: 縦方向フレックス（既存構造を維持） */
.app,
.app-wrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* main-content: flex-1で残り高さを使用 */
.main-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* panel.active: flex-1で残り高さを使用 */
.panel.active {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   §3. Header（64px固定・blur背景）
   ═══════════════════════════════════════════════════════════ */
.header {
  height: var(--v3-header-h) !important;
  min-height: var(--v3-header-h) !important;
  max-height: var(--v3-header-h) !important;
  background: rgba(13, 17, 23, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--v3-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
}
.header-inner {
  height: var(--v3-header-h) !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   §4. chat-layout（2カラム：Sidebar + Chat）
   axia_ux_v2.cssの .chat-layout, .chat-layout.lc-open, .chat-layout.focus-mode（詳細度0,3,0）に勝つため詳細度を上げる
   ═══════════════════════════════════════════════════════════ */
.chat-layout,
.chat-layout.lc-open,
.chat-layout.focus-mode,
.chat-layout.layout-pc {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  /* grid定義を上書き（axia_ux_v2.cssのgrid-template-columnsを無効化） */
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}

/* ═══════════════════════════════════════════════════════════
   §5. Sidebar（260px固定・常時表示）
   ═══════════════════════════════════════════════════════════ */
.thread-sidebar,
#threadSidebar {
  width: var(--v3-sidebar-w) !important;
  min-width: var(--v3-sidebar-w) !important;
  max-width: var(--v3-sidebar-w) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0f172a !important;
  border-right: 1px solid rgba(99, 102, 241, 0.15) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Sidebar collapsed（折りたたみ時） */
.thread-sidebar.collapsed,
#threadSidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}

/* Sidebar Header */
.thread-sidebar-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  min-height: 52px !important;
}
.thread-sidebar-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--v3-text-muted) !important;
  letter-spacing: 0.02em !important;
}

/* 新規ボタン（常に見える） */
.new-thread-btn {
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #818cf8 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
}
.new-thread-btn:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #a5b4fc !important;
}

/* 検索バー */
.thread-search-bar {
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1) !important;
  flex-shrink: 0 !important;
}
.thread-search-input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: var(--v3-text) !important;
  font-size: 12px !important;
  outline: none !important;
}
.thread-search-input:focus {
  border-color: rgba(99, 102, 241, 0.5) !important;
}

/* スレッドリスト（スクロール可能） */
.thread-list {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 8px !important;
}
.thread-list::-webkit-scrollbar { width: 3px; }
.thread-list::-webkit-scrollbar-track { background: transparent; }
.thread-list::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.2); border-radius: 2px; }

/* スレッドアイテム */
.thread-item {
  border-radius: 8px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  margin-bottom: 2px !important;
}
.thread-item:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}
.thread-item.active {
  background: rgba(99, 102, 241, 0.15) !important;
}
.thread-item-title {
  font-size: 12px !important;
  color: var(--v3-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
}
.thread-item-date {
  font-size: 10px !important;
  color: var(--v3-text-dim) !important;
  margin-top: 2px !important;
}
.thread-empty {
  color: var(--v3-text-dim) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 24px 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   §6. center-chat（メインチャットエリア）
   axia_ux_v2.cssの .chat-layout .center-chat（詳細度0,2,0）に勝つため詳細度を上げる
   ═══════════════════════════════════════════════════════════ */
.center-chat,
.chat-layout .center-chat,
.chat-layout.lc-open .center-chat,
.chat-layout.focus-mode .center-chat {
  flex: 1 1 400px !important;
  display: flex !important;
  flex-direction: column !important;
  /* [hotfix-clean-css-panel] min-width:400px を 0 に変更。
     #axia-computer-panel(clamp 420px) + center-chat(400px) の合計が
     ビューポートを超えて空白コンテナが発生する問題を修正。
     flex:1 1 400px により内容に応じた適切な幅に縮小される。 */
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--v3-bg) !important;
}

/* ═══════════════════════════════════════════════════════════
   §7. chat-area（スクロール可能なメッセージエリア）
   ═══════════════════════════════════════════════════════════ */
.chat-area,
#chatArea {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* padding-bottomは入力欄の高さ + GPFの高さ分確保 */
  padding: 24px 20px calc(var(--v3-input-h) + var(--v3-gpf-h) + 24px) !important;
  scroll-behavior: smooth !important;
  min-height: 0 !important;
}
.chat-area::-webkit-scrollbar { width: 4px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.2); border-radius: 2px; }
.chat-area::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.4); }

/* ═══════════════════════════════════════════════════════════
   §8. メッセージ（ChatGPT風バブル）
   ═══════════════════════════════════════════════════════════ */

/* message-row: 全メッセージ共通コンテナ */
.message-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  max-width: 920px !important;
  margin: 0 auto 16px !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ユーザーメッセージ: 右寄せ */
.message-row.user {
  flex-direction: row-reverse !important;
}

/* AIメッセージのバブル */
.message-row:not(.user) .message-bubble {
  background: var(--v3-ai-bg) !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text) !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 14px 16px !important;
  line-height: 1.7 !important;
  font-size: 15px !important;
  max-width: 80% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ユーザーメッセージのバブル */
.message-row.user .message-bubble {
  background: var(--v3-user-bg) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 14px 16px !important;
  line-height: 1.7 !important;
  font-size: 15px !important;
  max-width: 80% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* message-text */
.message-row .message-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: inherit !important;
}

/* message-meta */
.message-row .message-meta {
  font-size: 11px !important;
  color: var(--v3-text-dim) !important;
  margin-top: 6px !important;
  padding: 0 4px !important;
}
.message-row.user .message-meta {
  text-align: right !important;
}

/* アバター非表示 */
.message-avatar {
  display: none !important;
}

/* 旧スタイル互換（.message クラス） */
.message {
  max-width: 920px !important;
  margin: 0 auto 16px !important;
  width: 100% !important;
  padding: 0 !important;
}
.message-body {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
.message.user .message-body {
  align-items: flex-end !important;
}
.message:not(.user) .message-body {
  align-items: flex-start !important;
}
.message.user .message-content {
  background: var(--v3-user-bg) !important;
  color: #fff !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 14px 16px !important;
  max-width: 80% !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.message:not(.user) .message-content {
  background: var(--v3-ai-bg) !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text) !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 14px 16px !important;
  max-width: 80% !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ═══════════════════════════════════════════════════════════
   §9. 入力欄（sticky・Main Chat下部固定）
   ═══════════════════════════════════════════════════════════ */

/*
 * 重要: position:fixed は使わない。
 * center-chat の flex子要素として flex-shrink:0 で最下部に固定する。
 * layout_foundation.css の定義を継承・強化する。
 */
.input-area,
.chat-input-area,
.chat-input-wrapper {
  /* position:relative で flex最下部固定（layout_input_responsive.jsと競合しない） */
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  /* 左右パディングをmax()関数で980px基準に統一（メッセージ幅と完全一致） */
  padding-top: 12px !important;
  padding-left: max(20px, calc((100% - var(--axia-main-width)) / 2)) !important;
  padding-right: max(20px, calc((100% - var(--axia-main-width)) / 2)) !important;
  padding-bottom: 88px !important;
  background: linear-gradient(to top, #0d1117 75%, rgba(13, 17, 23, 0)) !important;
  border-top: none !important;
  z-index: 50 !important;
  pointer-events: all !important;
  margin-bottom: 0 !important;
}

/* input-inner: ChatGPT風の丸い入力ボックス */
.input-inner {
  max-width: 100% !important;  /* input-area自体が980px基準のパディングで統一済み */
  margin: 0 auto !important;
  background: var(--v3-surface2) !important;
  border: 1px solid rgba(48, 54, 61, 0.9) !important;
  border-radius: 22px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.input-inner:focus-within {
  border-color: rgba(99, 102, 241, 0.6) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15) !important;
}

/* textarea */
.message-input,
#messageInput {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--v3-text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  outline: none !important;
  max-height: 160px !important;
  overflow-y: auto !important;
  resize: none !important;
  min-height: 24px !important;
}
.message-input::placeholder,
#messageInput::placeholder {
  color: var(--v3-text-dim) !important;
}

/* 送信ボタン */
.send-btn,
#sendBtn {
  background: var(--v3-accent) !important;
  border: none !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
  cursor: pointer !important;
}
.send-btn:hover,
#sendBtn:hover {
  background: #4f46e5 !important;
  transform: scale(1.05) !important;
}
.send-btn:disabled,
#sendBtn:disabled {
  background: #334155 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 添付・カメラ・音声ボタン */
.attach-btn,
#attachBtn,
.camera-btn,
#cameraBtn,
.voice-btn,
#voiceBtn {
  background: transparent !important;
  border: none !important;
  color: var(--v3-text-muted) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.attach-btn:hover,
#attachBtn:hover,
.camera-btn:hover,
#cameraBtn:hover,
.voice-btn:hover,
#voiceBtn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--v3-text) !important;
}

/* サジェストボタン */
.suggestion-bar {
  max-width: 100% !important;  /* input-area自体が980px基準のパディングで統一済み */
  margin: 8px auto 0 !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.suggest-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text-muted) !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
.suggest-btn:hover {
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #818cf8 !important;
}

/* 文字数カウンター */
.char-count {
  font-size: 11px !important;
  color: var(--v3-text-dim) !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   §10. Workspace Panel（右サイドパネル・flex子要素）
   ═══════════════════════════════════════════════════════════ */

/*
 * workspacePanel は chat-layout の flex子要素として右端に配置。
 * position:fixed は使わない（v2-workspace-drawer が別途 fixed で存在）。
 */
/* workspacePanelはv2-workspace-drawerに統合済みのため非表示 */
.workspace-panel,
#workspacePanel {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

/* Workspace非表示時: display:noneはapp.jsが設定するため、CSSではwidthのみ0にする */
.workspace-panel[style*="display:none"],
.workspace-panel[style*="display: none"],
#workspacePanel[style*="display:none"],
#workspacePanel[style*="display: none"] {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-left: none !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Workspace Header */
.workspace-panel-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  min-height: 52px !important;
}
.workspace-panel-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--v3-text) !important;
}
.workspace-panel-actions {
  display: flex !important;
  gap: 6px !important;
}
.workspace-minimize-btn,
.workspace-close-btn {
  background: transparent !important;
  border: none !important;
  color: var(--v3-text-muted) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.15s !important;
}
.workspace-minimize-btn:hover,
.workspace-close-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--v3-text) !important;
}

/* Workspace タブ */
.workspace-tabs {
  display: flex !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.15) !important;
  flex-shrink: 0 !important;
  padding: 0 8px !important;
}
.workspace-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--v3-text-muted) !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
.workspace-tab:hover {
  color: var(--v3-text) !important;
}
.workspace-tab.active {
  color: #818cf8 !important;
  border-bottom-color: #6366f1 !important;
}

/* Workspace コンテンツ */
.workspace-tab-content {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px !important;
}
.workspace-tab-content::-webkit-scrollbar { width: 4px; }
.workspace-tab-content::-webkit-scrollbar-track { background: transparent; }
.workspace-tab-content::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.2); border-radius: 2px; }

/* Workspace resize handle */
#uwResizeHandle,
.uw-resize-handle {
  width: 4px !important;
  cursor: col-resize !important;
  background: transparent !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
  transition: background 0.15s !important;
}
#uwResizeHandle:hover,
.uw-resize-handle:hover {
  background: rgba(99, 102, 241, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   §11. v2-workspace-drawer（右Drawerオーバーレイ）
   ═══════════════════════════════════════════════════════════ */

/* v2-workspace-open-btn: 右下固定 */
#v2-workspace-open-btn {
  position: fixed !important;
  bottom: calc(var(--v3-gpf-h) + 16px) !important;
  right: 20px !important;
  z-index: 800 !important;
  background: rgba(99, 102, 241, 0.9) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s !important;
}
#v2-workspace-open-btn:hover {
  background: rgba(99, 102, 241, 1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════
   §12. 開発者モードボタン（Workspace内 → 常に見える位置）
   ═══════════════════════════════════════════════════════════ */

/* ux-dev-mode-toggle: Workspaceヘッダーアクション内に配置 */
#ux-dev-mode-toggle,
.ux-dev-mode-toggle {
  background: transparent !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text-muted) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 12px !important;
  transition: all 0.15s !important;
  opacity: 0.7 !important;
  flex-shrink: 0 !important;
}
#ux-dev-mode-toggle:hover,
.ux-dev-mode-toggle:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #818cf8 !important;
  opacity: 1 !important;
}

/* v2-dev-toggle: 左下固定ボタンは非表示（v3ではヘッダー内に統合） */
#v2-dev-toggle {
  display: none !important;
}
/* v2-dev-toggle-hidden: 念のため */
#v2-dev-toggle-hidden {
  background: transparent !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text-muted) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
#v2-dev-toggle:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
}

/* ═══════════════════════════════════════════════════════════
   §13. 進行中カード
   ═══════════════════════════════════════════════════════════ */
.v3-progress-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
  max-width: 100%;  /* chat-area自体が980px基準パディングで統一済み */
  margin: 0 auto 16px;
  width: 100%;
}
.v3-progress-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.v3-progress-card-icon {
  font-size: 16px;
  animation: v3spin 2s linear infinite;
}
@keyframes v3spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.v3-progress-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--v3-text);
}
.v3-progress-card-status {
  font-size: 12px;
  color: var(--v3-text-muted);
  margin-bottom: 8px;
}
.v3-progress-bar-wrap {
  height: 4px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.v3-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 2px;
  transition: width 0.5s ease;
}
.v3-progress-card-current {
  font-size: 11px;
  color: var(--v3-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.v3-progress-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6366f1;
  animation: v3pulse 1.5s infinite;
  flex-shrink: 0;
}
@keyframes v3pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════════
   §14. 完了カード
   ═══════════════════════════════════════════════════════════ */
.v3-completion-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
  padding: 16px 18px;
  max-width: 100%;  /* chat-area自体が980px基準パディングで統一済み */
  margin: 0 auto 16px;
  width: 100%;
}
.v3-completion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.v3-completion-icon {
  font-size: 20px;
}
.v3-completion-title {
  font-size: 14px;
  font-weight: 700;
  color: #4ade80;
}
.v3-completion-summary {
  font-size: 13px;
  color: var(--v3-text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════
   §15. 成果物カード（チャット内インライン）
   ═══════════════════════════════════════════════════════════ */
.artifacts-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(48, 54, 61, 0.6);
}
.artifacts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.artifacts-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--v3-text-muted);
}
.artifacts-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.artifact-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--v3-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.artifact-card-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.artifact-card-info {
  flex: 1;
  min-width: 0;
}
.artifact-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--v3-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artifact-card-type {
  font-size: 11px;
  color: var(--v3-text-dim);
  margin-top: 2px;
}
.artifact-card-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.artifact-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
  border: 1px solid transparent;
}
.artifact-btn-preview {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.25);
}
.artifact-btn-preview:hover { background: rgba(99, 102, 241, 0.22); }
.artifact-btn-download {
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.2);
}
.artifact-btn-download:hover { background: rgba(34, 197, 94, 0.16); }

/* ═══════════════════════════════════════════════════════════
   §16. Live Action Feed（フローティング）
   ═══════════════════════════════════════════════════════════ */
#v3-live-feed {
  position: fixed;
  bottom: calc(var(--v3-gpf-h) + 80px);
  right: 20px;
  width: 320px;
  max-height: 280px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 700;
  display: none;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
#v3-live-feed.v3-visible {
  display: flex;
}
.v3-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  flex-shrink: 0;
  cursor: move;
}
.v3-feed-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--v3-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.v3-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: v3pulse 1.5s infinite;
}
.v3-feed-close {
  background: none;
  border: none;
  color: var(--v3-text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
}
.v3-feed-close:hover { color: var(--v3-text); }
.v3-feed-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}
.v3-feed-log::-webkit-scrollbar { width: 3px; }
.v3-feed-log::-webkit-scrollbar-track { background: transparent; }
.v3-feed-log::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.2); }
.v3-feed-line {
  padding: 2px 0;
  color: var(--v3-text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.v3-feed-line.v3-feed-info { color: var(--v3-text-muted); }
.v3-feed-line.v3-feed-warn { color: #fbbf24; }
.v3-feed-line.v3-feed-error { color: #f87171; }
.v3-feed-line.v3-feed-success { color: #4ade80; }

/* ═══════════════════════════════════════════════════════════
   §17. Header 進捗バー（作業中に表示）
   ═══════════════════════════════════════════════════════════ */
#v3-header-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0 16px;
  max-width: 400px;
  margin: 0 auto;
}
#v3-header-task-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--v3-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: none;
}
#v3-header-task-label.v3-visible { display: block; }
#v3-header-progress-wrap {
  width: 180px;
  display: none;
}
#v3-header-progress-wrap.v3-visible { display: block; }
#v3-header-progress-bar {
  height: 3px;
  background: rgba(99, 102, 241, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
#v3-header-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 2px;
  transition: width 0.5s ease;
  width: 0%;
}

/* ═══════════════════════════════════════════════════════════
   §18. ALBバー（Live Status Bar）
   ═══════════════════════════════════════════════════════════ */
.axia-live-bar,
#axiaLiveStatusBar {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  flex-shrink: 0 !important;
  /* 高さをコンテンツに合わせる（832pxに伸びないように） */
  height: fit-content !important;
  max-height: fit-content !important;
  align-self: flex-start !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   §19. Global Persistent Footer（GPF）保護
   ═══════════════════════════════════════════════════════════ */
/* GPF保護ルール：位置のみ保護、displayはJS制御に委ねる */
.global-persistent-footer,
#globalPersistentFooter {
  /* position/z-indexのみ保護（displayはJSに委ねる） */
  z-index: 60 !important;
}

/* ═══════════════════════════════════════════════════════════
   §20. ローディング・エラー
   ═══════════════════════════════════════════════════════════ */
.loading-bubble {
  background: var(--v3-ai-bg) !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text-muted) !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 14px 16px !important;
  max-width: 80% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.error-bubble {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 14px 16px !important;
  max-width: 80% !important;
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   §21. モバイル対応（768px以下）
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebarは左Drawerとして折りたたみ */
  .thread-sidebar,
  #threadSidebar {
    position: fixed !important;
    top: var(--v3-header-h) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--v3-sidebar-w) !important;
    min-width: var(--v3-sidebar-w) !important;
    z-index: 500 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4) !important;
  }
  .thread-sidebar.mobile-open,
  #threadSidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* center-chat: 全幅 */
  .center-chat {
    width: 100% !important;
    flex: 1 !important;
  }

  /* chat-area: パディング調整（モバイルは固定12pxでMain Columnの計算をリセット） */
  .chat-area,
  #chatArea {
    padding-top: 16px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(var(--v3-input-h) + var(--v3-gpf-h) + 16px) !important;
  }

  /* 入力欄 */
  .input-area,
  .chat-input-area,
  .chat-input-wrapper {
    padding-top: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 20px !important;
  }
  .input-inner {
    border-radius: 18px !important;
    padding: 10px 14px !important;
  }

  /* メッセージバブル */
  .message-row:not(.user) .message-bubble,
  .message-row.user .message-bubble {
    max-width: 90% !important;
    font-size: 14px !important;
  }

  /* Workspace非表示 */
  .workspace-panel,
  #workspacePanel {
    display: none !important;
  }

  /* Live Feed位置調整 */
  #v3-live-feed {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    left: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   §22. タブレット対応（769px〜1024px）
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .thread-sidebar,
  #threadSidebar {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
  .workspace-panel,
  #workspacePanel {
    width: 320px !important;
    min-width: 280px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   §23. unified-workspace-panel（旧Workspace）との競合解決
   ═══════════════════════════════════════════════════════════ */

/* unified-workspace-panelはv2-workspace-drawerに統合されているため非表示 */
.unified-workspace-panel {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   §24. focus-mode（チャット集中モード）
   ═══════════════════════════════════════════════════════════ */
.chat-layout.focus-mode .thread-sidebar,
.chat-layout.focus-mode #threadSidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}
.chat-layout.focus-mode .workspace-panel,
.chat-layout.focus-mode #workspacePanel {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  border-left: none !important;
}

/* ═══════════════════════════════════════════════════════════
   §25. stream-panel（SSEログ）
   ═══════════════════════════════════════════════════════════ */
.stream-panel {
  flex-shrink: 0 !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border-top: 1px solid var(--v3-border) !important;
  max-height: 200px !important;
}
.stream-log {
  overflow-y: auto !important;
  max-height: 160px !important;
  font-size: 11px !important;
  font-family: 'JetBrains Mono', monospace !important;
  padding: 8px 12px !important;
  color: var(--v3-text-dim) !important;
}
.stream-log::-webkit-scrollbar { width: 3px; }
.stream-log::-webkit-scrollbar-track { background: transparent; }
.stream-log::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.2); }

/* ═══════════════════════════════════════════════════════════
   §26. ウェルカム画面
   ═══════════════════════════════════════════════════════════ */
.welcome {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  text-align: center !important;
  color: var(--v3-text-muted) !important;
}
.welcome-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--v3-text) !important;
  margin-bottom: 12px !important;
}
.welcome-subtitle {
  font-size: 15px !important;
  color: var(--v3-text-muted) !important;
  max-width: 480px !important;
  line-height: 1.6 !important;
}

/* ===============================================================
   §99. v3 クリーンアップ: 不要な固定ボタンを非表示
   =============================================================== */

/* axiaDebugTrigger: 右下のデバッグボタンを非表示（v3では不要） */
#axiaDebugTrigger,
.axia-debug-trigger {
  display: none !important;
}

/* ===============================================================
   §100. lc-mini-computer: Workspaceボタンの左隣に配置
   =============================================================== */
.lc-mini-computer {
  bottom: calc(var(--v3-gpf-h) + 16px) !important;
  right: calc(20px + 117px + 12px) !important;
  width: 200px !important;
}


/* ═══════════════════════════════════════════════════════════
   §101. axia-progress-timeline 位置調整
   ═══════════════════════════════════════════════════════════ */
/* デフォルト: Workspaceボタンの左横・同じ高さに配置 */
#axia-progress-timeline {
  right: 149px !important;  /* 20px(右端) + 117px(Workspaceボタン幅) + 12px(マージン) */
  bottom: 52px !important;  /* Workspaceボタンと同じ下端位置 */
  top: auto !important;
  transform: none !important;
}
/* v2-workspace-drawerが開いている時: ドロワー幅(380px)+マージン(12px)分左にずらす */
body:has(#v2-workspace-drawer.v2-open) #axia-progress-timeline {
  right: calc(380px + 149px) !important;
  bottom: 52px !important;
  top: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   §101b. axia-timeline-toggle ボタン位置調整
   ═══════════════════════════════════════════════════════════ */
/* タイムライン表示ボタンをWorkspaceボタンの上に配置 */
#axia-timeline-toggle {
  position: fixed !important;
  bottom: calc(var(--v3-gpf-h) + 16px + 48px + 8px) !important; /* Workspaceボタンの上 */
  right: 16px !important;
  z-index: 8800 !important;
}

/* ═══════════════════════════════════════════════════════════
   §102. thread-artifacts-restore（「このスレッドの成果物」カード）
   チャット中央に大きく表示されるのを防ぐ
   ═══════════════════════════════════════════════════════════ */
/* 成果物カードをチャット内では非表示にする（Workspaceパネルで見る）
   .message-row.thread-artifacts-restore で詳細度を上げる（.message-row { display:flex }に勝つため） */
.thread-artifacts-restore,
.message-row.thread-artifacts-restore,
.ai-row.thread-artifacts-restore,
.message-row.ai-row.thread-artifacts-restore {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   § chatモード返答カード & 候補ボタン
   ═══════════════════════════════════════════════════════ */
/* chatモードの返答バブル */
.chat-reply-card {
  background: var(--surface2, #1e2533);
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 520px;
}

/* 候補ボタンコンテナ */
.suggestions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* 候補ボタン */
.suggestion-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-align: left;
  max-width: 240px;
}
.suggestion-btn:hover {
  background: rgba(88, 166, 255, 0.18);
  transform: translateY(-1px);
}
.suggestion-btn:active { transform: translateY(0); }

.suggestion-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #58a6ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.suggestion-action {
  font-size: 11px;
  color: var(--text-secondary, #8b949e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ═══════════════════════════════════════════════════════
   § LIVE ACTION FEED - デフォルト位置を右下に変更（チャット欄に被らない）
   ═══════════════════════════════════════════════════════ */
/* ux_human_grade_v2.jsの left:50% / transform:translateX(-50%) を上書き */
#axia-live-feed {
  left: auto !important;
  right: 160px !important;
  bottom: 60px !important;
  transform: none !important;
  width: 420px !important;
  max-width: calc(100vw - 200px) !important;
}

/* ドラッグ中はtransformをリセット（ux_outcome_patch.jsがstyle直接操作するため） */
#axia-live-feed[style*="left"] {
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════
   § Workspace拡張バグ修正（ChatGPTアドバイス対応）
   lc-open時もflexを維持し、unifiedWorkspacePanelの幅を制限する
   ═══════════════════════════════════════════════════════ */

/* lc-open時もgrid化を禁止してflexを維持（詳細度を上げて上書き） */
html body .chat-layout,
html body .chat-layout.lc-open {
  display: flex !important;
  flex-direction: row !important;
  grid-template-columns: none !important;
}

/* unifiedWorkspacePanelは非表示（AXIA Computer統合後は不要） */
html body #unifiedWorkspacePanel {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* lc-open時・is-open時も非表示を維持 */
html body #unifiedWorkspacePanel.is-open,
html body .chat-layout.lc-open #unifiedWorkspacePanel {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
}
@media (max-width: 768px) {
  html body #unifiedWorkspacePanel {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   § 「AXIAが作業しています」カードの横幅制限
   チャット幅いっぱいに広がらないよう最大幅を設定
   ═══════════════════════════════════════════════════════ */
.hui-status-card,
#huiStatusCard {
  max-width: 600px !important;
  width: auto !important;
  align-self: flex-start !important;
}

/* ═══════════════════════════════════════════════════════
   § 「待機中」バー（axiaLiveStatusBar）のレイアウトシフト防止
   display:none/block の切り替えでチャット画面がガタつかないよう
   visibility:hidden で高さを維持する
   ═══════════════════════════════════════════════════════ */
#axiaLiveStatusBar {
  /* display:none の代わりに visibility:hidden + height:0 で非表示 */
  /* ただしdisplay:noneはapp.jsが制御するため、最小高さを確保してシフトを防ぐ */
  min-height: 0 !important;
}

/* display:noneの時はスペースを取らない（既存の動作を維持） */
#axiaLiveStatusBar[style*="display:none"],
#axiaLiveStatusBar[style*="display: none"] {
  display: none !important;
}

/* 表示時は高さを固定してシフトを防ぐ */
#axiaLiveStatusBar[style*="display:block"],
#axiaLiveStatusBar[style*="display: block"],
#axiaLiveStatusBar:not([style*="display:none"]):not([style*="display: none"]) {
  min-height: 36px !important;
  height: auto !important;
}

/* ═══════════════════════════════════════════════════════
   § axiaLiveStatusBar レイアウトシフト根本解決
   chat-layoutのflex子要素から切り離し、position:fixedで表示
   これにより表示/非表示切り替えでチャット画面がガタつかない
   ═══════════════════════════════════════════════════════ */
#axiaLiveStatusBar {
  position: fixed !important;
  top: 56px !important;  /* JSで動的に上書きされる */
  left: 220px !important; /* サイドバー220px分右 */
  right: 0 !important;
  z-index: 150 !important;
  width: auto !important;
  /* flex子要素としての影響を排除 */
  flex: none !important;
  align-self: auto !important;
  height: fit-content !important;
  max-height: fit-content !important;
  min-height: 0 !important;
  /* 視認性改善 */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  /* 内側コンテンツを980px基準に揃える（Main Columnと同一基準線） */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: max(20px, calc((100% - var(--axia-main-width)) / 2)) !important;
  padding-right: max(20px, calc((100% - var(--axia-main-width)) / 2)) !important;
  box-sizing: border-box !important;
}

/* サイドバーが折りたたまれている時は左端から */
#threadSidebar.collapsed ~ #axiaLiveStatusBar,
.thread-sidebar.collapsed ~ #axiaLiveStatusBar {
  left: 0 !important;
}

/* チャットエリアの上部にバーの高さ分のpaddingを追加（バーが表示中の時のみ） */
/* これはJSで制御するため、CSSでは対応しない */

/* ═══════════════════════════════════════════════════════════════════
   § AXIA Main Column Layout System（980px基準）
   全メイン要素を同じコンテナ幅に揃えて中央UIとして統一感を出す
   ChatGPT / Manus / Claude系の高級SaaS UIに準拠
   ═══════════════════════════════════════════════════════════════════ */

/* ── デザイントークン ─────────────────────────────────────────── */
:root {
  --axia-main-width:    980px;
  --axia-message-width: 760px;
}

/* ── chat-areaの内側パディングで980px中央揃えを実現 ─────────────── */
.chat-area,
#chatArea {
  padding-left: max(20px, calc((100% - var(--axia-main-width)) / 2)) !important;
  padding-right: max(20px, calc((100% - var(--axia-main-width)) / 2)) !important;
  padding-top: 24px !important;
  padding-bottom: calc(var(--v3-input-h) + var(--v3-gpf-h) + 24px) !important;
}

/* ── メッセージ行（.message）の幅を920pxに統一 ───────────────── */
.message {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

/* ── message-row（新スタイル）の幅を920pxに統一 ─────────────── */
.message-row {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ── 進行中カード・完了カードの幅を100%（親が920px制御）に ────── */
.v3-progress-card,
.v3-completion-card {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ── hui-status-card・hui-result-card を100%幅・左寄せに ────── */
.hui-status-card,
#huiStatusCard,
.hui-result-card {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
}

/* ── 成果物カード（artifact-card）を100%幅に ─────────────────── */
.artifact-card,
.artifact-card-v4,
.v2-artifact-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── input-inner / suggestion-bar / input-hint / chat-legal-links ─────────────── */
/* input-area自体が980px基準のパディングで統一済みのため、内側要素は100%幅で一致 */
.input-inner {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.suggestion-bar {
  max-width: 100% !important;
}
.input-hint {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.chat-legal-links {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── v26カード（app.jsが生成するカード）を100%幅に ─────────── */
.v26-card,
[class*="v26-card"] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* v26完了・エラー・部分成功カード: message-row内でflex子要素として全幅 */
.v26-completion-card,
.v26-error-card,
.v26-partial-card,
.v26-task-summary-card {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
/* v26-completion-rowのmessage-avatar非表示を確実に */
.v26-completion-row .message-avatar,
.v26-error-row .message-avatar,
.v26-partial-row .message-avatar {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── モバイル（768px以下）────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-area,
  #chatArea {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .input-inner {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   § Closed Beta バナー（ヘッダー直下・z-index競合解消）
   ═══════════════════════════════════════════════════════════ */
.axia-beta-banner {
  position: relative !important;
  top: auto !important;
  z-index: 95 !important;
  background: rgba(99, 102, 241, 0.12) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.35) !important;
  padding: 10px 20px !important;
  text-align: center !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.axia-beta-banner[style*="display:none"],
.axia-beta-banner[style*="display: none"] {
  display: none !important;
}
/* ラベル：Closed Beta 参加受付中 */
.axia-beta-label {
  color: #818cf8 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}
/* 説明文 */
.axia-beta-desc {
  color: #c8c8d8 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  flex: 1 !important;
  min-width: 200px !important;
  text-align: left !important;
}
.axia-beta-cta {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: #6366f1 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: background 0.2s !important;
}
.axia-beta-cta:hover {
  background: #818cf8 !important;
}
.axia-beta-close {
  background: none !important;
  border: none !important;
  color: #888 !important;
  cursor: pointer !important;
  font-size: 18px !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .axia-beta-banner {
    padding: 10px 12px !important;
    font-size: 12px !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .axia-beta-desc {
    font-size: 12px !important;
    text-align: left !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .axia-beta-cta {
    align-self: flex-start !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   §Phase 10.5-8: AXIA Deploy Panel (Production Flow UI)
   ═══════════════════════════════════════════════════════════ */

/* Deploy Panel コンテナ */
.axia-deploy-panel {
  padding: 12px;
  font-size: 13px;
  color: var(--v3-text);
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}

/* セクション */
.adp-section {
  background: var(--v3-surface2);
  border: 1px solid var(--v3-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.adp-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--v3-text-muted);
  margin-bottom: 8px;
}

/* 行 */
.adp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-height: 22px;
}

.adp-label {
  font-size: 11px;
  color: var(--v3-text-dim);
  min-width: 80px;
  flex-shrink: 0;
}

.adp-value {
  font-size: 12px;
  color: var(--v3-text);
  word-break: break-all;
}

.adp-link {
  font-size: 12px;
  color: #60a5fa;
  text-decoration: none;
  word-break: break-all;
}
.adp-link:hover {
  text-decoration: underline;
}

/* バッジ */
.adp-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Risk バッジ */
.adp-risk[data-risk="LOW"] {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
.adp-risk[data-risk="MEDIUM"] {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
.adp-risk[data-risk="HIGH"] {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Changed Files */
.adp-files {
  margin-top: 4px;
}
.adp-file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
  color: var(--v3-text-muted);
}
.adp-file-status {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.adp-file-status.added    { background: rgba(34,197,94,0.2); color: #86efac; }
.adp-file-status.modified { background: rgba(245,158,11,0.2); color: #fcd34d; }
.adp-file-status.removed  { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* Deploy Steps */
.adp-steps {
  margin-top: 6px;
}
.adp-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.adp-step:last-child { border-bottom: none; }
.adp-step-icon {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}
.adp-step-name {
  color: var(--v3-text-muted);
  min-width: 100px;
}
.adp-step-elapsed {
  color: var(--v3-text-dim);
  font-size: 10px;
  margin-left: auto;
}
.adp-step.ok     .adp-step-icon { color: #22c55e; }
.adp-step.failed .adp-step-icon { color: #ef4444; }
.adp-step.running .adp-step-icon { color: #f59e0b; }
.adp-step.skipped .adp-step-icon { color: #64748b; }
.adp-step.warn   .adp-step-icon { color: #f59e0b; }

/* Production Checks */
.adp-checks {
  margin-bottom: 8px;
}
.adp-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
}
.adp-check-icon { font-size: 12px; }
.adp-check-name { color: var(--v3-text-muted); }
.adp-check-status { margin-left: auto; font-size: 10px; }

/* Input */
.adp-input {
  background: var(--v3-bg);
  border: 1px solid var(--v3-border);
  border-radius: 4px;
  color: var(--v3-text);
  font-size: 12px;
  padding: 4px 8px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.adp-input:focus {
  border-color: var(--v3-accent);
}

/* Input Section */
.adp-input-section .adp-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.adp-input-section .adp-label {
  min-width: unset;
}

/* Actions */
.adp-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* Buttons */
.adp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, background 0.15s;
  flex: 1;
}
.adp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.adp-btn-preview {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.4);
}
.adp-btn-preview:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.35);
}

.adp-btn-deploy {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.adp-btn-deploy:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.35);
}

.adp-btn-rollback {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.adp-btn-rollback:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.35);
}

.adp-btn-check {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.4);
  width: 100%;
}
.adp-btn-check:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.35);
}

/* Log */
.adp-log {
  background: #0a0e1a;
  border: 1px solid var(--v3-border);
  border-radius: 6px;
  padding: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: #94a3b8;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.adp-log-line {
  display: block;
  padding: 1px 0;
}
.adp-log-line.ok     { color: #22c55e; }
.adp-log-line.error  { color: #ef4444; }
.adp-log-line.warn   { color: #f59e0b; }
.adp-log-line.info   { color: #60a5fa; }

/* ======================================================================
   AXIA Phase 11 - Beta Fix Panel (実サイト修正 β運用ゲート)
   ====================================================================== */
.axia-beta-fix-panel {
  padding: 8px 4px;
  font-size: 12px;
  color: var(--v3-text, #e2e8f0);
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}
.abf-section {
  background: var(--v3-surface2, rgba(255,255,255,0.04));
  border: 1px solid var(--v3-border, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.abf-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v3-accent, #6366f1);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.abf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.abf-label { font-size: 11px; color: var(--v3-text-muted, #94a3b8); min-width: 90px; flex-shrink: 0; }
.abf-input {
  flex: 1;
  background: var(--v3-surface, rgba(255,255,255,0.06));
  border: 1px solid var(--v3-border, rgba(255,255,255,0.12));
  border-radius: 4px;
  color: var(--v3-text, #e2e8f0);
  font-size: 11px;
  padding: 4px 8px;
  outline: none;
  transition: border-color 0.2s;
}
.abf-input:focus { border-color: var(--v3-accent, #6366f1); }
.abf-textarea {
  flex: 1;
  background: var(--v3-surface, rgba(255,255,255,0.06));
  border: 1px solid var(--v3-border, rgba(255,255,255,0.12));
  border-radius: 4px;
  color: var(--v3-text, #e2e8f0);
  font-size: 11px;
  padding: 6px 8px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.abf-textarea:focus { border-color: var(--v3-accent, #6366f1); }
.abf-select {
  flex: 1;
  background: var(--v3-surface, rgba(255,255,255,0.06));
  border: 1px solid var(--v3-border, rgba(255,255,255,0.12));
  border-radius: 4px;
  color: var(--v3-text, #e2e8f0);
  font-size: 11px;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
}
.abf-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.abf-btn { padding: 5px 12px; border: none; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.1s; }
.abf-btn:hover { opacity: 0.85; }
.abf-btn:active { transform: scale(0.97); }
.abf-btn-register { background: var(--v3-accent, #6366f1); color: #fff; }
.abf-btn-list     { background: rgba(255,255,255,0.1); color: var(--v3-text, #e2e8f0); }
.abf-btn-check    { background: #2196f3; color: #fff; }
.abf-btn-approve  { background: #4caf50; color: #fff; }
.abf-btn-cancel   { background: rgba(255,255,255,0.1); color: var(--v3-text, #e2e8f0); }
.abf-btn-rollback { background: #f44336; color: #fff; }
.abf-btn-sm { padding: 2px 8px; background: rgba(255,255,255,0.08); border: none; border-radius: 3px; font-size: 10px; color: var(--v3-text-muted, #94a3b8); cursor: pointer; margin-left: 6px; }
.abf-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.1); color: var(--v3-text, #e2e8f0); }
.abf-risk[data-risk="LOW"]       { background: rgba(76,175,80,0.25); color: #81c784; }
.abf-risk[data-risk="MEDIUM"]    { background: rgba(255,152,0,0.25); color: #ffb74d; }
.abf-risk[data-risk="HIGH"]      { background: rgba(244,67,54,0.25); color: #e57373; }
.abf-risk[data-risk="FORBIDDEN"] { background: rgba(156,39,176,0.25); color: #ce93d8; }
.abf-site-list { margin-top: 8px; }
.abf-site-item { background: var(--v3-surface, rgba(255,255,255,0.04)); border: 1px solid var(--v3-border, rgba(255,255,255,0.08)); border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; transition: border-color 0.2s; }
.abf-site-item:hover { border-color: var(--v3-accent, #6366f1); }
.abf-site-item.selected { border-color: var(--v3-accent, #6366f1); background: rgba(99,102,241,0.1); }
.abf-site-name { font-weight: 700; font-size: 12px; color: var(--v3-text, #e2e8f0); }
.abf-site-url  { font-size: 10px; color: var(--v3-text-muted, #94a3b8); margin-top: 2px; }
.abf-site-meta { font-size: 10px; color: var(--v3-text-dim, #475569); margin-top: 2px; }
.abf-precheck-result { margin-top: 10px; }
.abf-check-card { background: var(--v3-surface, rgba(255,255,255,0.04)); border: 1px solid var(--v3-border, rgba(255,255,255,0.1)); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.abf-check-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.abf-check-label { font-size: 10px; color: var(--v3-text-muted, #94a3b8); min-width: 90px; flex-shrink: 0; }
.abf-check-value { font-size: 11px; color: var(--v3-text, #e2e8f0); word-break: break-all; }
.abf-approval-gate { background: rgba(255,152,0,0.08); border: 1px solid rgba(255,152,0,0.3); border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
.abf-gate-title { font-size: 11px; font-weight: 700; color: #ffb74d; margin-bottom: 6px; }
.abf-gate-msg { font-size: 11px; color: var(--v3-text, #e2e8f0); margin-bottom: 8px; line-height: 1.5; }
.abf-gate-high { background: rgba(244,67,54,0.08); border-color: rgba(244,67,54,0.3); }
.abf-gate-high .abf-gate-title { color: #e57373; }
.abf-session-info { font-size: 11px; line-height: 1.7; }
.abf-session-row { display: flex; gap: 8px; margin-bottom: 3px; }
.abf-session-key { color: var(--v3-text-muted, #94a3b8); min-width: 90px; flex-shrink: 0; font-size: 10px; }
.abf-session-val { color: var(--v3-text, #e2e8f0); font-size: 11px; word-break: break-all; }
.abf-prod-checks { margin-bottom: 8px; }
.abf-prod-check-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; }
.abf-prod-check-icon { font-size: 12px; }
.abf-prod-check-name { color: var(--v3-text-muted, #94a3b8); min-width: 120px; }
.abf-prod-check-status { color: var(--v3-text, #e2e8f0); }
.abf-log-list { max-height: 200px; overflow-y: auto; }
.abf-log-item { background: var(--v3-surface, rgba(255,255,255,0.03)); border: 1px solid var(--v3-border, rgba(255,255,255,0.06)); border-radius: 4px; padding: 6px 10px; margin-bottom: 4px; font-size: 10px; line-height: 1.6; }
.abf-log-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.abf-log-item-site { font-weight: 700; color: var(--v3-accent, #6366f1); }
.abf-log-item-time { color: var(--v3-text-dim, #475569); }
.abf-log-item-status { font-weight: 600; }
.abf-log-item-status.ok      { color: #81c784; }
.abf-log-item-status.fail    { color: #e57373; }
.abf-log-item-status.pending { color: #ffb74d; }
.abf-log-item-body { color: var(--v3-text-muted, #94a3b8); }
.abf-log { background: rgba(0,0,0,0.3); border: 1px solid var(--v3-border, rgba(255,255,255,0.08)); border-radius: 4px; padding: 8px 10px; font-size: 10px; font-family: monospace; color: #a8d8a8; max-height: 120px; overflow-y: auto; margin-top: 8px; white-space: pre-wrap; word-break: break-all; }


/* ══════════════════════════════════════════════════════════
   AXIA Phase 12 — Autonomous UX Audit Panel
   ══════════════════════════════════════════════════════════ */

.aap-panel {
  padding: 12px;
  font-size: 13px;
  color: #e2e8f0;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

/* ヘッダー */
.aap-header { margin-bottom: 10px; }
.aap-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}
.aap-icon { font-size: 18px; }
.aap-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #3b82f6;
  color: #fff;
  font-weight: 600;
}
.aap-header-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

/* URL 入力行 */
.aap-url-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.aap-url-input {
  flex: 1;
  min-width: 160px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  padding: 6px 10px;
  font-size: 12px;
}
.aap-url-input:focus { outline: none; border-color: #3b82f6; }

/* ボタン */
.aap-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: opacity .15s;
}
.aap-btn:hover { opacity: .85; }
.aap-btn:disabled { opacity: .4; cursor: not-allowed; }
.aap-btn-primary  { background: #3b82f6; color: #fff; }
.aap-btn-secondary{ background: #334155; color: #e2e8f0; }
.aap-btn-danger   { background: #7f1d1d; color: #fca5a5; }
.aap-btn-sm { padding: 4px 8px; font-size: 11px; }

/* ステータスバー */
.aap-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #94a3b8;
}
.aap-status-bar.aap-status-error { border-color: #ef4444; color: #fca5a5; }
.aap-spinner {
  width: 14px; height: 14px;
  border: 2px solid #334155;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: aap-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes aap-spin { to { transform: rotate(360deg); } }

/* サマリカード */
.aap-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.aap-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.aap-card-label { font-size: 10px; color: #94a3b8; margin-bottom: 4px; }
.aap-card-value { font-size: 18px; font-weight: 700; }

/* タブ */
.aap-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #334155;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.aap-tab {
  background: none;
  border: none;
  color: #94a3b8;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.aap-tab:hover { color: #e2e8f0; }
.aap-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }
.aap-count {
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  margin-left: 3px;
}

/* タブコンテンツ */
.aap-tab-content { min-height: 200px; }
.aap-tab-pane { animation: aap-fadein .2s ease; }
@keyframes aap-fadein { from { opacity: 0; } to { opacity: 1; } }
.aap-empty { color: #64748b; font-size: 12px; padding: 16px; text-align: center; }

/* 問題カード */
.aap-issue-card {
  background: #1e293b;
  border-left: 3px solid #334155;
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.aap-sev-high  { border-left-color: #ef4444; }
.aap-sev-medium{ border-left-color: #f59e0b; }
.aap-sev-low   { border-left-color: #22c55e; }
.aap-issue-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.aap-sev-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
}
.aap-sev-badge-high   { background: #7f1d1d; color: #fca5a5; }
.aap-sev-badge-medium { background: #78350f; color: #fde68a; }
.aap-sev-badge-low    { background: #14532d; color: #86efac; }
.aap-issue-category { font-size: 10px; color: #64748b; }
.aap-issue-title { font-size: 12px; font-weight: 600; color: #f1f5f9; }
.aap-issue-desc { font-size: 11px; color: #94a3b8; }
.aap-issue-affected { font-size: 10px; color: #64748b; margin-top: 2px; }

/* 改善提案カード */
.aap-proposal-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.aap-proposal-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.aap-proposal-gain { font-size: 11px; color: #22c55e; font-weight: 600; }
.aap-proposal-risk { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
.risk-low    { background: #14532d; color: #86efac; }
.risk-medium { background: #78350f; color: #fde68a; }
.risk-high   { background: #7f1d1d; color: #fca5a5; }
.aap-proposal-title { font-size: 13px; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }
.aap-proposal-strategy { font-size: 11px; color: #94a3b8; margin-bottom: 6px; }
.aap-proposal-branch { font-size: 10px; color: #64748b; margin-bottom: 4px; }
.aap-proposal-files { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.aap-file-tag {
  background: #0f172a; border: 1px solid #334155; border-radius: 4px;
  padding: 1px 6px; font-size: 10px; color: #94a3b8;
}
.aap-proposal-actions { display: flex; gap: 6px; }

/* 実行プラン */
.aap-plan-header { font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
.aap-plan-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: #1e293b; border: 1px solid #334155; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px;
}
.aap-plan-auto   { border-left: 3px solid #22c55e; }
.aap-plan-manual { border-left: 3px solid #f59e0b; }
.aap-plan-step {
  background: #0f172a; border-radius: 50%; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #94a3b8; flex-shrink: 0;
}
.aap-plan-info { flex: 1; }
.aap-plan-title { font-size: 12px; font-weight: 600; color: #f1f5f9; margin-bottom: 4px; }
.aap-plan-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.aap-plan-gain  { font-size: 10px; color: #22c55e; }
.aap-plan-score { font-size: 10px; color: #64748b; }
.aap-plan-branch{ font-size: 10px; color: #64748b; }
.aap-auto-badge   { font-size: 10px; background: #14532d; color: #86efac; padding: 2px 6px; border-radius: 4px; }
.aap-manual-badge { font-size: 10px; background: #78350f; color: #fde68a; padding: 2px 6px; border-radius: 4px; }
.aap-plan-actions { margin-top: 10px; }

/* 承認キュー */
.aap-approval-header { font-size: 11px; color: #f59e0b; margin-bottom: 8px; }
.aap-approval-card {
  background: #1e293b; border: 1px solid #ef4444; border-radius: 8px;
  padding: 10px; margin-bottom: 8px;
}
.aap-approval-header-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.aap-approval-title { font-size: 12px; font-weight: 600; color: #f1f5f9; }
.aap-approval-strategy { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.aap-approval-gain { font-size: 11px; color: #22c55e; margin-bottom: 4px; }
.aap-approval-notice { font-size: 10px; color: #f59e0b; }

/* 学習メモリ */
.aap-memory-header { font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
.aap-memory-card {
  background: #1e293b; border: 1px solid #334155; border-radius: 6px;
  padding: 8px; margin-bottom: 6px;
}
.aap-memory-issue { font-size: 11px; font-weight: 600; color: #3b82f6; margin-bottom: 2px; }
.aap-memory-fix   { font-size: 11px; color: #e2e8f0; margin-bottom: 2px; }
.aap-memory-meta  { font-size: 10px; color: #64748b; }

/* 品質Gate */
.aap-quality-result {
  margin-top: 10px; background: #1e293b; border: 1px solid #334155;
  border-radius: 8px; padding: 10px;
}
.aap-quality-header {
  font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
}
.aap-quality-pass { background: #14532d; color: #86efac; }
.aap-quality-fail { background: #7f1d1d; color: #fca5a5; }
.aap-quality-score { font-size: 12px; color: #94a3b8; margin-bottom: 8px; }
.aap-gate-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.aap-gate-table th { color: #64748b; padding: 4px 6px; text-align: left; border-bottom: 1px solid #334155; }
.aap-gate-table td { padding: 4px 6px; border-bottom: 1px solid #1e293b; }
.aap-gate-pass { color: #22c55e; font-weight: 600; }
.aap-gate-fail { color: #ef4444; font-weight: 600; }
.aap-quality-fails { font-size: 11px; color: #f59e0b; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════
   AXIA Phase 13 — Orchestrator Panel Styles
══════════════════════════════════════════════════════════════ */

.orch-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  height: 100%;
  overflow-y: auto;
  font-size: 13px;
  color: #e2e8f0;
}

.orch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-radius: 10px;
  border: 1px solid #4338ca;
}

.orch-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #c7d2fe;
}

.orch-icon { font-size: 20px; }

.orch-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #3b82f6;
  color: #fff;
  animation: orchPulse 1.5s ease-in-out infinite;
}

.orch-badge-done    { background: #22c55e; animation: none; }
.orch-badge-blocked { background: #ef4444; animation: none; }
.orch-badge-paused  { background: #f59e0b; animation: none; }
.orch-badge-running { background: #3b82f6; }

@keyframes orchPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.orch-header-actions {
  display: flex;
  gap: 8px;
}

/* ─── Section ─── */
.orch-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px;
}

.orch-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Form ─── */
.orch-form { display: flex; flex-direction: column; gap: 10px; }

.orch-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.orch-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.orch-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 10px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.orch-input:focus { border-color: #6366f1; }

.orch-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ─── Buttons ─── */
.orch-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.orch-btn-primary   { background: #6366f1; color: #fff; }
.orch-btn-primary:hover { background: #4f46e5; }
.orch-btn-secondary { background: rgba(255,255,255,0.08); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.12); }
.orch-btn-secondary:hover { background: rgba(255,255,255,0.14); }
.orch-btn-success   { background: #22c55e; color: #fff; }
.orch-btn-success:hover { background: #16a34a; }
.orch-btn-danger    { background: #ef4444; color: #fff; }
.orch-btn-danger:hover { background: #dc2626; }
.orch-btn-xs        { padding: 3px 8px; font-size: 10px; }

/* ─── Plan Info ─── */
.orch-plan-info { display: flex; flex-direction: column; gap: 6px; }

.orch-plan-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.orch-plan-label {
  font-size: 11px;
  color: #64748b;
  min-width: 80px;
  font-weight: 600;
}

.orch-plan-value {
  font-size: 12px;
  color: #e2e8f0;
  word-break: break-all;
}

.orch-plan-value a { color: #818cf8; text-decoration: none; }
.orch-plan-value a:hover { text-decoration: underline; }

/* ─── Task Graph ─── */
.orch-task-graph {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.orch-task-stats {
  font-size: 10px;
  color: #64748b;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.orch-task-node {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.2s;
}

.orch-task-node.task-running  { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
.orch-task-node.task-done     { border-color: #22c55e; background: rgba(34,197,94,0.06); }
.orch-task-node.task-failed   { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.orch-task-node.task-blocked  { border-color: #ef4444; background: rgba(239,68,68,0.06); }
.orch-task-node.task-retrying { border-color: #f59e0b; background: rgba(245,158,11,0.08); }
.orch-task-node.task-replanning { border-color: #8b5cf6; background: rgba(139,92,246,0.08); }
.orch-task-node.task-skipped  { border-color: #475569; opacity: 0.6; }
.orch-task-node.task-paused   { border-color: #f59e0b; }

.orch-task-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.orch-task-icon { font-size: 14px; }

.orch-task-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
}

.orch-risk-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.risk-low    { background: rgba(34,197,94,0.2);  color: #4ade80; }
.risk-medium { background: rgba(245,158,11,0.2); color: #fbbf24; }
.risk-high   { background: rgba(239,68,68,0.2);  color: #f87171; }

.orch-task-progress {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.orch-task-progress-bar {
  height: 100%;
  width: 60%;
  background: #3b82f6;
  border-radius: 2px;
  animation: orchProgressAnim 1.5s ease-in-out infinite;
}

@keyframes orchProgressAnim {
  0%   { width: 20%; }
  50%  { width: 80%; }
  100% { width: 20%; }
}

.orch-task-meta {
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
}

.orch-task-error {
  font-size: 10px;
  color: #f87171;
  margin-top: 4px;
  background: rgba(239,68,68,0.1);
  padding: 3px 6px;
  border-radius: 4px;
}

.orch-task-skipped-reason { color: #475569; }

.orch-task-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ─── Queues ─── */
.orch-queues {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.orch-queue {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px;
}

.orch-queue-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 8px;
}

.orch-queue-list { display: flex; flex-direction: column; gap: 4px; }

.orch-queue-item {
  font-size: 11px;
  color: #e2e8f0;
  padding: 4px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}

.orch-queue-done    { color: #4ade80; }
.orch-queue-running { color: #60a5fa; }
.orch-queue-pending { color: #94a3b8; }

/* ─── Issues ─── */
.orch-issues-list { display: flex; flex-direction: column; gap: 6px; }

.orch-issue-item {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 8px 10px;
  border-left: 3px solid #475569;
}

.orch-issue-blocked  { border-left-color: #ef4444; }
.orch-issue-failed   { border-left-color: #ef4444; }
.orch-issue-retrying { border-left-color: #f59e0b; }
.orch-issue-replanning { border-left-color: #8b5cf6; }

.orch-issue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.orch-issue-status {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.orch-issue-error { font-size: 11px; color: #f87171; }
.orch-issue-meta  { font-size: 10px; color: #64748b; margin-top: 2px; }

/* ─── Branches ─── */
.orch-branches-list { display: flex; flex-direction: column; gap: 6px; }

.orch-branch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 11px;
}

.orch-branch-icon  { font-size: 14px; }
.orch-branch-name  { font-family: monospace; color: #a5b4fc; flex: 1; word-break: break-all; }
.orch-branch-task  { color: #94a3b8; }
.orch-branch-status { font-size: 10px; font-weight: 700; }

/* ─── Sessions ─── */
.orch-session-list { display: flex; flex-direction: column; gap: 6px; }

.orch-session-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.orch-session-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
.orch-session-active { border-color: #6366f1 !important; background: rgba(99,102,241,0.08) !important; }

.orch-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.orch-session-goal {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
}

.orch-session-status { font-size: 11px; font-weight: 700; }

.orch-session-meta {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: #64748b;
}

/* ─── Memory ─── */
.orch-memory-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.orch-mem-tab {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}

.orch-mem-tab:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
.orch-mem-tab.active { background: #6366f1; color: #fff; border-color: #6366f1; }

.orch-memory-content { display: flex; flex-direction: column; gap: 6px; }

.orch-memory-item {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 8px 10px;
}

.orch-memory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
  color: #e2e8f0;
}

.orch-memory-ts { font-size: 10px; color: #64748b; }
.orch-memory-detail { font-size: 11px; color: #94a3b8; }

/* ─── Log ─── */
.orch-log {
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 10px;
  font-family: monospace;
  font-size: 11px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orch-log-entry { display: flex; gap: 8px; }
.orch-log-ts    { color: #475569; min-width: 60px; }
.orch-log-event { color: #818cf8; min-width: 80px; }
.orch-log-msg   { color: #94a3b8; }

/* ─── Status Message ─── */
.orch-status-msg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.orch-status-info    { background: rgba(59,130,246,0.15); color: #60a5fa; }
.orch-status-success { background: rgba(34,197,94,0.15);  color: #4ade80; }
.orch-status-error   { background: rgba(239,68,68,0.15);  color: #f87171; }

/* ─── Empty ─── */
.orch-empty {
  font-size: 12px;
  color: #475569;
  text-align: center;
  padding: 12px;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .orch-queues { grid-template-columns: 1fr; }
  .orch-header { flex-direction: column; gap: 10px; }
}



/* ═══════════════════════════════════════════════════════════
   §40. AXIA Computer Panel（3カラム右パネル）
   axia_computer_large_view.js が生成する #axia-computer-panel を
   chat-layout の flex 子要素として右端に常時表示する。
   ═══════════════════════════════════════════════════════════ */
/* ─── 旧Workspace・liveComputerPanel・Mini Workspaceボタンを完全非表示 ─── */
html body #unifiedWorkspacePanel,
html body .unified-workspace-panel,
html body #liveComputerPanel,
html body .live-computer-panel,
html body #workspacePanel,
html body .workspace-panel,
html body #v2-workspace-open-btn,
html body #axia-wb-toggle-btn,
html body .workspace-mini-widget,
html body #workspaceMiniWidget,
html body #uwOpenBtn {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  flex: none !important;
  pointer-events: none !important;
}
/* chat-layout を flex row に保持（grid 化を禁止） */
html body #chatLayout,
html body .chat-layout {
  display: flex !important;
  flex-direction: row !important;
  grid-template-columns: none !important;
}
/* AXIA Computer Panel: 右カラム */
/* [hotfix-clean-css-panel] axia_computer_large_view.js の acp-style と競合しないよう
   min-width を 420px に統一し、flex を clamp ベースに変更。
   center-chat の min-width:400px との合計がビューポートを超えないよう修正。 */
html body #axia-computer-panel {
  flex: 0 0 clamp(420px, 35vw, 720px) !important;
  width: clamp(420px, 35vw, 720px) !important;
  min-width: 420px !important;
  max-width: 720px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0f172a !important;
  border-left: 1px solid rgba(99, 102, 241, 0.2) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 10 !important;
}
/* Mini モード時は非表示 */
html body #axia-computer-panel.acp-mini {
  display: none !important;
}
/* タブレット（768px-1199px）: 右パネルを縮小 */
/* [hotfix-clean-css-panel] axia_computer_large_view.js のタブレット設定と統一 */
@media (min-width: 768px) and (max-width: 1199px) {
  html body #axia-computer-panel {
    flex: 0 0 320px !important;
    width: 320px !important;
    min-width: 280px !important;
    max-width: 480px !important;
  }
}
/* モバイル（767px以下）: 右パネルを非表示 */
@media (max-width: 767px) {
  html body #axia-computer-panel {
    display: none !important;
  }
}
/* AXIA Computer 再表示ボタン */
#axia-computer-reopen-btn {
  position: fixed !important;
  bottom: calc(var(--v3-gpf-h, 0px) + 16px) !important;
  right: 20px !important;
  z-index: 800 !important;
  background: rgba(99, 102, 241, 0.9) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s !important;
}
#axia-computer-reopen-btn.acp-reopen-visible {
  display: flex !important;
}


/* ═══════════════════════════════════════════════════════════
   §99. Mobile Chat Layout Fix（<=767px専用 / PC不干渉）
   ───────────────────────────────────────────────────────────
   目的:
     スマホでチャット入力欄が「画面中央寄り（上すぎる）」になり、
     結果カードと重なる、下部ナビと重なる、送信ボタンが押しづらい
     などの問題を修正する。

   方針:
     - すべて @media (max-width: 767px) 内に閉じ込め、PC（>=768px）には
       一切影響を与えない。
     - 入力欄を画面下部に固定（下部ナビの上にスタック）。
     - safe-area-inset-bottom（iPhoneノッチ/ホームバー）を考慮。
     - メインチャット領域には十分な padding-bottom を確保し、
       最後のカードが入力欄や下部ナビに隠れないようにする。
     - 右パネル（Live Computer / Workspace）はモバイルでは非表示。
   ─────────────────────────────────────────────────────────── */
:root {
  --v3-mobile-input-h:     76px;  /* 入力欄の実効高さ（input-inner + padding） */
  --v3-mobile-nav-h:       60px;  /* axia-mobile-nav の高さ（style.css §v16.0） */
  --v3-mobile-input-gap:   8px;   /* 入力欄と下部ナビの隙間 */
}

@media (max-width: 767px) {
  /* ── (1) 入力欄: 画面下部に固定（下部ナビの上） ─────── */
  /* 詳細度: html body 要素加2 + .input-area:not(.modal-overlay):not([class*="-overlay"]) クラス3
     → (0,3,2) で layout_foundation.css の (0,3,1) より高く、!important と合わせて確実に勝つ。 */
  html body .input-area:not(.modal-overlay):not([class*="-overlay"]),
  html body .chat-input-area:not(.modal-overlay):not([class*="-overlay"]),
  html body .chat-input-wrapper:not(.modal-overlay):not([class*="-overlay"]) {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--v3-mobile-nav-h) + var(--v3-mobile-input-gap) + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    padding-top: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    z-index: 1000 !important;
    /* 既存 §21 の padding-top: 80px !important;（[v15.2-D]）を打ち消す */
    background: transparent !important;
  }

  /* 入力枠は実体（input-inner）が見た目を担うのでこちらは透明背景で OK */
  html body .input-area .input-inner,
  html body .chat-input-area .input-inner,
  html body .chat-input-wrapper .input-inner {
    border-radius: 18px !important;
    padding: 10px 14px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
    background: var(--v3-bg-input, #1a1a1f) !important;
  }

  /* 送信/添付/カメラ/マイク 押しやすさ確保（最低タップ領域36px） */
  html body .input-controls .attach-btn,
  html body .input-controls .camera-btn,
  html body .input-controls .voice-btn,
  html body .input-controls .send-btn,
  html body .input-controls .stop-btn {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* ── (2) チャット本文エリア: 入力欄＋下部ナビ＋safe-area分の下余白 ── */
  html body .chat-area,
  html body #chatArea,
  html body .messages,
  html body #chatMessages,
  html body .messages-container {
    padding-bottom: calc(
      var(--v3-mobile-input-h) +
      var(--v3-mobile-input-gap) +
      var(--v3-mobile-nav-h) +
      env(safe-area-inset-bottom) +
      32px
    ) !important;
  }

  /* center-chat 全体の下端 padding は不要（入力欄が fixed のため） */
  html body .center-chat,
  html body .chat-layout .center-chat {
    padding-bottom: 0 !important;
  }

  /* ── (3) 結果カード/メッセージリストの下端余白 ────────────── */
  /* 最後のカードが入力欄/下部ナビで隠れないよう、リスト末尾にも余白 */
  html body .messages > :last-child,
  html body #chatMessages > :last-child,
  html body .messages-container > :last-child {
    margin-bottom: 24px !important;
  }

  /* ── (4) サジェスト・文字数カウンター・凡例リンクは入力欄の上に折り畳む ── */
  /* input-area が fixed になったため、内包の suggestion-bar / char-counter-bar /
     long-instruction-bar / chat-legal-links / agent-mode-bar は子要素として
     入力欄と一緒に下部固定枠内に存在する。本文エリアのスクロールには干渉しない。 */
  html body .input-area .suggestion-bar,
  html body .input-area .input-hint,
  html body .input-area .chat-legal-links,
  html body .input-area .agent-mode-bar {
    /* スマホでは入力欄をすっきりさせるため、これらは非表示にする
       （PCでは表示される。fixed枠内に積むと画面の半分を覆ってしまうため） */
    display: none !important;
  }

  /* 文字数カウンターは小さく表示してスペースを取らない */
  html body .input-area .char-counter-bar {
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
  }
  html body .input-area .char-counter-bar .char-counter {
    font-size: 10px !important;
  }

  /* ── (5) 右パネル系をモバイルで完全非表示 ──────────────── */
  html body #axia-computer-panel,
  html body .axia-computer-large,
  html body .axia-computer-panel,
  html body .live-computer-panel,
  html body #liveComputerPanel,
  html body .right-panel,
  html body .workspace-panel,
  html body #workspacePanel {
    display: none !important;
  }

  /* AXIA Computer 再表示ボタンは入力欄に隠れないよう上にずらす */
  html body #axia-computer-reopen-btn {
    bottom: calc(
      var(--v3-mobile-input-h) +
      var(--v3-mobile-input-gap) +
      var(--v3-mobile-nav-h) +
      env(safe-area-inset-bottom) +
      12px
    ) !important;
    right: 12px !important;
  }

  /* ── (6) §21 既存の padding-top: 80px（v15.2-D シフト）を打ち消す ── */
  /* index.html のインライン !important スタイルにも勝つよう 詳細度を上げる */
  html body .input-area:not(.modal-overlay):not([class*="-overlay"]),
  html body .chat-input-area:not(.modal-overlay):not([class*="-overlay"]),
  html body .chat-input-wrapper:not(.modal-overlay):not([class*="-overlay"]) {
    padding-top: 8px !important;
  }
}

/* ── (7) PC（768px以上）には絶対に影響を与えないことの保証 ──
   この §99 内の規則はすべて @media (max-width: 767px) 内に閉じ込めている。
   :root の追加変数は CSS Custom Property なので、参照されない限り副作用なし。
*/


/* ============================================================
 * §100 UNIMPLEMENTED_ROUTES_CHECK Table Header Contrast Fix
 * ------------------------------------------------------------
 * 中央カードに表示される 5 ルート安全停止確認テーブルの
 * ヘッダーが白背景で文字が読めない問題を修正する。
 * - ヘッダー: ダーク背景 + 白文字 + 太字
 * - ボディ : 明るいグレー文字
 * - PC/モバイル両対応、横スクロールで折り返しも保持
 * OS のルート判定ロジック・サーバー処理は一切変更しない。
 * ============================================================ */

html body .axia-os-routes-audit-table,
html body table.unimplemented-routes-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.9em !important;
  background: transparent !important;
}

html body .axia-os-routes-audit-table thead,
html body .axia-os-routes-audit-table .table-header,
html body table.unimplemented-routes-table thead,
html body table.unimplemented-routes-table .table-header {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #f8fafc !important;
}

html body .axia-os-routes-audit-table thead tr,
html body table.unimplemented-routes-table thead tr {
  background: rgba(30, 41, 59, 0.95) !important;
}

html body .axia-os-routes-audit-table th,
html body table.unimplemented-routes-table th {
  color: #f8fafc !important;
  font-weight: 700 !important;
  background: rgba(30, 41, 59, 0.95) !important;
  border-bottom: 2px solid rgba(148, 163, 184, 0.45) !important;
  padding: 8px 10px !important;
  text-align: left;
  letter-spacing: 0.02em;
}

html body .axia-os-routes-audit-table th:nth-child(n+3):nth-child(-n+7),
html body table.unimplemented-routes-table th:nth-child(n+3):nth-child(-n+7) {
  text-align: center;
}

html body .axia-os-routes-audit-table tbody tr,
html body table.unimplemented-routes-table tbody tr {
  background: rgba(15, 23, 42, 0.55) !important;
}

html body .axia-os-routes-audit-table tbody tr:nth-child(odd),
html body table.unimplemented-routes-table tbody tr:nth-child(odd) {
  background: rgba(30, 41, 59, 0.45) !important;
}

html body .axia-os-routes-audit-table td,
html body table.unimplemented-routes-table td {
  color: #e5e7eb !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  padding: 6px 10px !important;
  vertical-align: top;
  word-break: break-word;
}

html body .axia-os-routes-audit-table td.mono,
html body table.unimplemented-routes-table td.mono {
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
}

/* 表全体を包む overflow:auto ラッパに最低幅をかけて、
   PCでは折り返しせず、モバイルでは横スクロールで読めるように */
html body .orch-result-card .axia-os-routes-audit-table,
html body .axia-os-route-card .axia-os-routes-audit-table {
  min-width: 720px;
}

/* モバイル（767px 以下）でも横スクロールで読めるように */
@media (max-width: 767px) {
  html body .axia-os-routes-audit-table,
  html body table.unimplemented-routes-table {
    font-size: 0.82em !important;
  }
  html body .axia-os-routes-audit-table th,
  html body table.unimplemented-routes-table th {
    padding: 6px 8px !important;
    white-space: nowrap;
  }
  html body .axia-os-routes-audit-table td,
  html body table.unimplemented-routes-table td {
    padding: 5px 8px !important;
  }
  html body .axia-os-routes-audit-table td:last-child,
  html body table.unimplemented-routes-table td:last-child {
    min-width: 220px;
  }
}
/* ─── AXIA Chat Persistence: 復元カードバッジ ─────────────────────────────── */
.axia-restored-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  opacity: 0.75;
  color: #9ca3af;
}