/* ============================================================
   MatrixFlow AI 助手 高级界面 (2026-08-27)
   让 AI 助手模块更精致、不压抑：渐变氛围、卡片层级、柔和阴影
   ============================================================ */

.mf-ai-root {
  position: relative;
  max-width: 1200px !important;
  /* 自包含深色面板：不管客户端是 light 还是 dark 主题，AI 助手页都保持一致可读 */
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 55%, #111a2e 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  padding: 22px 26px 20px !important;
  color: #f1f5f9 !important;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35);
}

/* light 主题下强制所有文字浅色，保证可读 */
.mf-ai-root,
.mf-ai-root * {
  color: #f1f5f9 !important;
}

.mf-ai-root .text-muted-foreground,
.mf-ai-root [class*="text-muted-foreground"] {
  color: #94a3b8 !important;
}

.mf-ai-root .text-foreground,
.mf-ai-root [class*="text-foreground"] {
  color: #f1f5f9 !important;
}

/* 状态标签颜色（浅色主题下也保持高对比） */
.mf-ai-root .text-emerald-600,
.mf-ai-root [class*="text-emerald-600"] {
  color: #34d399 !important;
}

.mf-ai-root .text-amber-600,
.mf-ai-root [class*="text-amber-600"] {
  color: #fbbf24 !important;
}

.mf-ai-root .text-primary,
.mf-ai-root [class*="text-primary"] {
  color: #a78bfa !important;
}

.mf-ai-root .border-emerald-500\/30,
.mf-ai-root [class*="border-emerald-500/30"] {
  border-color: rgba(52, 211, 153, 0.4) !important;
  background: rgba(52, 211, 153, 0.12) !important;
}

.mf-ai-root .border-amber-500\/30,
.mf-ai-root [class*="border-amber-500/30"] {
  border-color: rgba(251, 191, 36, 0.4) !important;
  background: rgba(251, 191, 36, 0.12) !important;
}

.mf-ai-root .bg-emerald-500\/10,
.mf-ai-root [class*="bg-emerald-500/10"] {
  background: rgba(52, 211, 153, 0.12) !important;
}

.mf-ai-root .bg-amber-500\/10,
.mf-ai-root [class*="bg-amber-500/10"] {
  background: rgba(251, 191, 36, 0.12) !important;
}

/* 卡片、下拉、按钮等控件在浅色主题下的深色适配 */
.mf-ai-root .bg-card,
.mf-ai-root [class*="bg-card"] {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.mf-ai-root .bg-muted\/30,
.mf-ai-root .bg-muted\/40,
.mf-ai-root .bg-muted\/20,
.mf-ai-root [class*="bg-muted/"] {
  background: rgba(148, 163, 184, 0.1) !important;
}

.mf-ai-root .bg-muted\/10,
.mf-ai-root [class*="bg-muted/10"] {
  background: rgba(148, 163, 184, 0.08) !important;
}

.mf-ai-root [role="combobox"],
.mf-ai-root [data-radix-select-viewport],
.mf-ai-root [data-radix-select-content] {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

.mf-ai-root [data-radix-select-item][data-highlighted] {
  background: rgba(139, 92, 246, 0.35) !important;
  color: #fff !important;
}

.mf-ai-root label {
  color: #cbd5e1 !important;
}

.mf-ai-root .border-border,
.mf-ai-root [class*="border-border"] {
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.mf-ai-root .border-t {
  border-top-color: rgba(148, 163, 184, 0.14) !important;
}

.mf-ai-root input,
.mf-ai-root textarea {
  color: var(--shell-fg, #f1f5f9) !important;
  background-color: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

.mf-ai-root input::placeholder,
.mf-ai-root textarea::placeholder {
  color: var(--shell-muted-fg, #94a3b8) !important;
}

/* 背景氛围光 */
.mf-ai-root::before {
  content: "";
  position: absolute;
  inset: -40px -60px auto -60px;
  height: 260px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(600px 180px at 18% 0%, rgba(124, 58, 237, 0.14), transparent 65%),
    radial-gradient(520px 160px at 82% 0%, rgba(16, 185, 129, 0.12), transparent 65%),
    radial-gradient(420px 140px at 55% 6%, rgba(59, 130, 246, 0.08), transparent 60%);
}

.mf-ai-root > * {
  position: relative;
  z-index: 1;
}

/* 标题区 */
.mf-ai-root h1 {
  font-size: 26px;
  letter-spacing: 0.2px;
  background: linear-gradient(120deg, #fff 30%, rgba(167, 139, 250, 0.95));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff !important;
}

/* 状态胶囊 */
.mf-ai-root .inline-flex.h-6.items-center.rounded-full {
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 0 10px !important;
}

/* 左侧会话列表 */
.mf-ai-aside {
  width: 232px !important;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.72), rgba(17, 24, 39, 0.9)) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  padding: 10px !important;
  transition: box-shadow 0.25s ease;
}

.mf-ai-session {
  border: 1px solid transparent;
  transition: all 0.18s ease;
}

.mf-ai-session:hover {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.14);
}

.mf-ai-session.bg-muted\/70,
.mf-ai-aside [class*="bg-muted/70"] {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0.08)) !important;
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: inset 3px 0 0 0 rgba(167, 139, 250, 0.8);
}

/* 主对话卡片 */
.mf-ai-chat {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.78), rgba(17, 24, 39, 0.94)) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.mf-ai-scroll {
  background-image: radial-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* 消息气泡 */
.mf-ai-msg {
  animation: mfAiMsgIn 0.22s ease both;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  color: #f1f5f9 !important;
}

@keyframes mfAiMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mf-ai-msg-user {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 18px 18px 4px 18px !important;
}

.mf-ai-msg-ai {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(17, 24, 39, 0.92)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 18px 18px 18px 4px !important;
  color: #f1f5f9 !important;
}

/* 气泡内辅助文字/步骤/复制按钮：浅色下也要保持可读 */
.mf-ai-msg .whitespace-pre-wrap {
  color: #f1f5f9 !important;
}

.mf-ai-msg .text-muted-foreground,
.mf-ai-msg [class*="text-muted-foreground"] {
  color: #94a3b8 !important;
}

.mf-ai-msg button {
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

.mf-ai-msg .text-emerald-500,
.mf-ai-msg [class*="text-emerald-500"] {
  color: #34d399 !important;
}

.mf-ai-msg .text-red-400,
.mf-ai-msg [class*="text-red-400"] {
  color: #f87171 !important;
}

.mf-ai-msg .text-amber-400,
.mf-ai-msg [class*="text-amber-400"] {
  color: #fbbf24 !important;
}

/* 示例卡片 */
.mf-ai-example {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.03)) !important;
  transition: all 0.2s ease;
}

.mf-ai-example:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.45) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0.05)) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.16);
}

/* 输入区 —— 整体一个输入容器，输入框与上传/模型按钮不再分家 */
.mf-ai-input-area {
  background: transparent;
  border-top-color: var(--mf-divider, rgba(148, 163, 184, 0.14)) !important;
}

.mf-ai-composer {
  display: flex;
  flex-direction: column;
  background: #111827 !important;
  border: 1px solid #1e293b !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mf-ai-composer textarea,
.mf-ai-composer input,
.mf-ai-composer button,
.mf-ai-composer span {
  color: #e5e7eb !important;
}

.mf-ai-composer textarea::placeholder {
  color: #8ea0b8 !important;
}

.mf-ai-composer button {
  border-color: rgba(148, 163, 184, 0.24) !important;
}

.mf-ai-composer .group {
  background: rgba(148, 163, 184, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.mf-ai-composer .mf-ai-send-btn,
.mf-ai-composer .mf-ai-stop-btn {
  color: #ffffff !important;
}

.mf-ai-composer:focus-within {
  border-color: rgba(139, 92, 246, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14), 0 10px 30px rgba(2, 6, 23, 0.28);
}

.mf-ai-root .mf-ai-input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none;
}

.mf-ai-root .mf-ai-input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.mf-ai-send-btn {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
  transition: all 0.2s ease;
}

.mf-ai-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.45);
}

.mf-ai-send-btn:disabled {
  opacity: 0.45;
  box-shadow: none;
}

.mf-ai-stop-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35) !important;
}

/* API 配置卡片 & 教程卡片 */
.mf-ai-root .rounded-xl.border.border-border.bg-card {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.72), rgba(17, 24, 39, 0.88)) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

/* 教程/配置卡片内的展开提示文字提亮 */
.mf-ai-root .rounded-xl.border.border-border.bg-card .text-xs.text-muted-foreground,
.mf-ai-root .rounded-xl.border.border-border.bg-card [class*="text-muted-foreground"] {
  color: #cbd5e1 !important;
}

/* 对话空状态机器人图标 */
.mf-ai-scroll .text-4xl {
  filter: drop-shadow(0 6px 16px rgba(124, 58, 237, 0.35));
}

/* 滚动条美化 */
.mf-ai-scroll::-webkit-scrollbar,
.mf-ai-aside::-webkit-scrollbar {
  width: 6px;
}

.mf-ai-scroll::-webkit-scrollbar-thumb,
.mf-ai-aside::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 999px;
}

.mf-ai-scroll::-webkit-scrollbar-thumb:hover,
.mf-ai-aside::-webkit-scrollbar-thumb:hover {
  background: rgba(167, 139, 250, 0.5);
}

/* ===== 2026-09-14：对话内容不再出现横向滚动条 =====
 * 现象：工具调用那一行带很长的 JSON（老历史里还有转义乱码），
 * 会把对话区撑出横向滚动条，客户必须拖动才能看全，看着像坏了。
 * 处理：对话区禁止横向滚动，长内容强制换行、就地折行显示完整。 */
.mf-ai-scroll {
  overflow-x: hidden !important;
}
.mf-ai-scroll > *,
.mf-ai-scroll .space-y-3,
.mf-ai-scroll .flex {
  min-width: 0;
}
.mf-ai-scroll .mf-ai-msg {
  max-width: 88% !important;
  overflow-wrap: anywhere;
}
.mf-ai-scroll .mf-ai-msg span,
.mf-ai-scroll .mf-ai-msg div,
.mf-ai-scroll .mf-ai-msg p,
.mf-ai-scroll .mf-ai-msg pre,
.mf-ai-scroll .mf-ai-msg code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mf-ai-scroll .mf-ai-msg pre,
.mf-ai-scroll .mf-ai-msg code {
  white-space: pre-wrap !important;
}
.mf-ai-scroll::-webkit-scrollbar {
  height: 6px;
}