/* ============================================================
   Redesign — 产品级视觉重构覆盖层(Apple 官网高级感 + OpenWebUI 结构)
   …………………………………………………………………………………………
   设计原则:
   · 色阶分层:近白画布 #fcfcfc + 白色面板,细 hairline 分隔,少边框多阴影
   · 大圆角(16-28px)+ 柔和多层阴影(Apple 式「浮起」)
   · 通透留白,信息密度克制
   · 品牌蓝仅用于关键动作(发送 / 主按钮 / 当前状态)
   · 无渐变、无玻璃拟态、无发光,靠阴影与层次营造高级感
   说明:本文件最后加载,统一覆盖 style/enhanced/refine 三层。
   ============================================================ */

/* ---------- 0. 设计 Token(统一覆盖,Apple 灰阶 + 品牌蓝) ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* 品牌 */
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: rgba(37, 99, 235, 0.08);
  --brand-soft-strong: rgba(37, 99, 235, 0.14);
  --ring-brand: rgba(37, 99, 235, 0.2);

  /* 画布与面板(Apple 风) */
  --bg-app: #fcfcfc;            /* 页面近白 */
  --bg-surface: #ffffff;
  --bg-surface-2: #fafafa;
  --bg-sidebar: rgba(250, 250, 252, 0.9);
  --bg-hover: rgba(0, 0, 0, 0.045);
  --bg-active: rgba(0, 0, 0, 0.08);
  --bg-input: #ffffff;
  --bg-code: rgba(0, 0, 0, 0.04);
  --bg-user-msg: rgba(0, 0, 0, 0.05);
  --bg-selected: rgba(37, 99, 235, 0.07);
  --bg-elevated: rgba(255, 255, 255, 0.82);
  --bg-mask: rgba(245, 245, 247, 0.85);

  /* 文字(Apple 灰阶) */
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --active-text: #2563eb;

  /* 线框与阴影(Apple 式极淡 hairline + 柔和分层阴影) */
  --hairline: rgba(0, 0, 0, 0.07);
  --hairline-strong: rgba(0, 0, 0, 0.14);
  --border: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.14);
  --active-bar: #2563eb;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06), 0 24px 60px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.1), 0 24px 64px rgba(0, 0, 0, 0.14);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-text: #ffffff;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --danger: #ff3b30;
  --danger-bg: rgba(255, 59, 48, 0.1);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --sidebar-w: 264px;
  --content-w: 820px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --brand: #4d8dff;
  --brand-hover: #7db0ff;
  --brand-soft: rgba(77, 141, 255, 0.12);
  --brand-soft-strong: rgba(77, 141, 255, 0.2);
  --ring-brand: rgba(77, 141, 255, 0.3);

  --bg-app: #000000;
  --bg-surface: #1d1d1f;
  --bg-surface-2: #161618;
  --bg-sidebar: rgba(24, 24, 26, 0.92);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-input: #1c1c1e;
  --bg-code: rgba(255, 255, 255, 0.06);
  --bg-user-msg: rgba(255, 255, 255, 0.08);
  --bg-selected: rgba(77, 141, 255, 0.14);
  --bg-elevated: rgba(32, 32, 34, 0.85);
  --bg-mask: rgba(0, 0, 0, 0.8);

  --text: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #6e6e73;
  --active-text: #7db0ff;

  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --active-bar: #4d8dff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.6), 0 24px 64px rgba(0, 0, 0, 0.7);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;

  --primary: #4d8dff;
  --primary-hover: #7db0ff;
  --accent: #4d8dff;
  --accent-hover: #7db0ff;
  --danger: #ff453a;
  --danger-bg: rgba(255, 69, 58, 0.14);
}

/* ---------- 1. 基础 ---------- */
body {
  background: var(--bg-app);
  color: var(--text);
  font-size: 15px;
  letter-spacing: -0.011em;
}
::selection { background: color-mix(in srgb, var(--brand) 85%, transparent); color: #fff; }
.icon-btn { border-radius: 50%; transition: background 0.16s, color 0.16s, transform 0.1s; }
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* 消息输入框 textarea 聚焦不描蓝边(避免"蓝色矩形");输入卡光环由 .composer:focus-within 负责 */
.composer textarea:focus-visible,
.composer textarea:focus {
  outline: none;
  box-shadow: none;
}

/* 滚动条极细(Apple 风) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.28); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.44); }

/* ============================================================
   2. 侧边栏(OpenWebUI 式轻盈白色 + hairline,去掉硬边框)
   ============================================================ */
.sidebar,
[data-theme="dark"] .sidebar {
  width: var(--sidebar-w, 264px);
  min-width: var(--sidebar-w, 264px);
  background: var(--bg-sidebar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background-image: none;
  border-right: 1px solid var(--hairline);
}
.sidebar::after { display: none; }

.sidebar-brand { padding: 16px 16px 8px; }
.sidebar-collapse-btn {
  width: 32px; height: 32px;
  border-radius: 10px;
  color: var(--text-secondary);
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-brand .brand-logo {
  flex: 0 0 auto;
  margin-right: auto;
  max-width: 300px;
  max-height: 56px;
}

/* 新建对话:圆润品牌主按钮,柔和投影(与搜索框同高 46px) */
.sidebar-header { padding: 6px 12px 10px; }
.new-chat-btn {
  height: 46px;
  border-radius: 13px;
  background: var(--primary);
  color: var(--primary-text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: background 0.16s, box-shadow 0.16s, transform 0.1s;
}
.new-chat-btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.new-chat-btn:active { transform: translateY(0) scale(0.98); }

/* 模型选择器:圆润浅底胶囊(与搜索框同高 46px) */
.sidebar-model-wrap { padding: 2px 12px 8px; }
.sidebar-model-wrap .model-picker {
  height: 46px;
  padding: 0 12px;
  border-radius: 13px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.sidebar-model-wrap .model-picker:hover { background: var(--bg-surface); border-color: var(--hairline-strong); box-shadow: var(--shadow-sm); }
.sidebar-model-wrap .model-icon { color: var(--brand); }
.sidebar-model-wrap .model-name { font-size: 13.5px; font-weight: 550; }

/* 会话搜索:同款圆润 */
.chat-search {
  height: 46px;
  flex-shrink: 0;
  margin: 4px 12px 8px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.chat-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring-brand);
}
.chat-search svg { color: var(--text-tertiary); flex-shrink: 0; }
.chat-search input { font-size: 13.5px; }

/* 会话列表 */
.chat-list { padding: 2px 8px 10px; gap: 2px; }
.chat-group-section { display: contents; }
.chat-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  text-transform: none;
  border-top: none;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  transition: color 0.15s;
}
.chat-group:hover { color: var(--text-secondary); }
.chat-group-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.chat-group-section.collapsed .chat-group-chev { transform: rotate(-90deg); }
.chat-group-label { flex-shrink: 0; }
.chat-group-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-hover);
  padding: 1px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.chat-group-section.collapsed > .chat-item-wrap { display: none; }
.chat-group-section:not(.collapsed) > .chat-item-wrap { display: flex; }

/* 会话项全宽:短名称项背景也铺满整行,选中态(浅蓝底+左指示条)从左到右完整 */
.chat-list { padding-left: 0; padding-right: 0; }
.chat-item-wrap { width: 100%; min-width: 0; }
.chat-item { width: 100%; }
.chat-item .chat-title { min-width: 0; }

.chat-item {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13.5px;
  position: relative;
  color: var(--text);
}
.chat-item .chat-icon { color: var(--text-tertiary); }
.chat-item:hover { background: var(--bg-hover); }
.chat-item.active {
  background: var(--bg-selected);
  color: var(--active-text);
  font-weight: 600;
  box-shadow: none;
}
.chat-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--active-bar);
}
.chat-item.active .chat-icon { color: var(--active-text); }

/* 会话悬浮操作菜单:柔和浮层 */
.chat-item-menu {
  right: 6px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.chat-item-menu .menu-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-item-menu .menu-btn svg { width: 14px; height: 14px; }
.chat-item-menu .menu-btn.danger svg { color: var(--danger); }
.chat-item-menu .menu-btn.danger:hover { background: var(--danger-bg); }
.pin-mark { display: inline-flex; color: var(--brand); flex-shrink: 0; }
.pin-mark svg { width: 15px; height: 15px; }
.chat-list-empty { font-size: 12.5px; color: var(--text-tertiary); padding: 28px 12px; }

/* ============================================================
   3. 侧边栏底部:账户区 + 用户菜单
   ============================================================ */
.sidebar-footer {
  position: relative;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--hairline);
  margin-top: 6px;
}
.account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  border-radius: 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.16s;
}
.account-chip:hover { background: var(--bg-hover); }
.sidebar-footer .avatar {
  width: 34px; height: 34px;
  font-size: 13px;
  flex-shrink: 0;
  border-radius: 50%;
}
.user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-name { font-size: 13.5px; font-weight: 600; }
.quota { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.quota.low { color: var(--danger); font-weight: 600; }
.account-chip .account-chevron { color: var(--text-tertiary); flex-shrink: 0; display: flex; transition: transform 0.16s; }
.account-chip.menu-open .account-chevron { transform: rotate(180deg); }

.user-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 4px);
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: 5px;
  z-index: 60;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  background: none;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.13s, color 0.13s;
}
.user-menu-item svg { width: 16px; height: 16px; color: var(--text-secondary); flex-shrink: 0; }
.user-menu-item:hover { background: var(--bg-hover); }
.user-menu-item.danger { color: var(--danger); }
.user-menu-item.danger svg { color: var(--danger); }
.user-menu-item.danger:hover { background: var(--danger-bg); }
.user-menu-sep { height: 1px; background: var(--hairline); margin: 4px 6px; }

.footer-actions, .footer-btn { display: none; }

/* ============================================================
   4. 主区域 / 顶栏
   ============================================================ */
.main { background: var(--bg-app); }
.topbar {
  height: 54px;
  padding: 0 18px;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}
.topbar::after { display: none; }
.topbar .icon-btn { width: 34px; height: 34px; border-radius: 10px; }

.sidebar-float-btn {
  top: 14px;
  left: 12px;
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.sidebar-mask { background: rgba(0, 0, 0, 0.4); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============================================================
   5. 空状态(Apple 式大留白首屏)
   ============================================================ */
.empty-state {
  flex: 1;
  justify-content: flex-start;
  padding-top: max(12vh, 72px);
  padding-bottom: 28px;
  gap: 0;
}
.empty-logo {
  width: 60px; height: 60px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--hairline));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, var(--shadow-soft), 0 6px 18px color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  transition: transform 0.2s, box-shadow 0.2s;
}
.empty-logo svg { width: 27px; height: 27px; }
.empty-state:hover .empty-logo { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 16%, transparent); }
.empty-state h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
}
.empty-state p.muted { font-size: 15px; margin-top: 12px; color: var(--text-secondary); }

/* 核心动作按钮:品牌主按钮 + 柔和投影 */
.empty-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 0 22px;
  height: 44px;
  border: none;
  border-radius: 14px;
  background: var(--primary);
  color: var(--primary-text);
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: background 0.16s, box-shadow 0.16s, transform 0.1s;
}
.empty-start-btn svg { width: 16px; height: 16px; }
.empty-start-btn:hover { background: var(--primary-hover); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 40%, transparent); transform: translateY(-1px); }
.empty-start-btn:active { transform: translateY(0) scale(0.98); }

/* 四个快捷入口:大圆角卡片,hover 浮起 */
.empty-suggests {
  margin-top: 30px;
  gap: 12px;
  max-width: 620px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.empty-suggest {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.empty-suggest:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--hairline));
}
.empty-suggest .es-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, transform 0.18s;
}
.empty-suggest .es-icon svg { width: 19px; height: 19px; }
.empty-suggest:hover .es-icon { background: var(--brand-soft-strong); transform: scale(1.05); }
.empty-suggest .es-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.empty-suggest .es-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.empty-suggest .es-desc { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; }
.empty-hint { margin-top: 18px; font-size: 12px; }

/* ============================================================
   6. 消息区(OpenWebUI 风:AI 宽幅极简 / 用户右侧气泡)
   ============================================================ */
.messages {
  max-width: var(--content-w);
  padding: 32px 28px 16px;
}
.msg { padding: 20px 0; }
.msg + .msg { border-top: none; margin-top: 2px; }

/* 头像:圆形,品牌色点缀 AI;用户消息不显示头像(右侧气泡) */
.msg .msg-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-hover);
  border: 1px solid var(--hairline);
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}
.msg .msg-avatar svg { width: 16px; height: 16px; }
.msg.assistant .msg-avatar { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand); }
.msg.user .msg-avatar { display: none; }

/* 用户消息:右侧气泡,浅品牌色底 + 非对称圆角,chat 感 */
.msg.user {
  justify-content: flex-end;
}
.msg.user .msg-content {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 82%;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 18px 18px 6px 18px;
  padding: 10px 16px;
}
.msg .msg-content { font-size: 15px; line-height: 1.7; }

/* 回复富文本 */
.msg.assistant pre,
.code-block { border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-code); }
.code-header { background: var(--bg-surface-2); border-bottom: 1px solid var(--hairline); }
.msg.assistant blockquote { border-left-color: var(--hairline-strong); background: transparent; }
.msg.assistant a { color: var(--brand); }
.reasoning-wrap, .tool-call { border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-surface-2); }

/* 对齐:操作栏按钮、快捷指令与「相关追问」都左对齐到回答正文第一个字,追问位于按钮下方 */
.msg .msg-actions,
.msg .quick-actions,
.msg-actions + .follow-ups,
.msg > .msg-actions ~ .follow-ups {
  flex: 1 1 100%;
  padding-left: 0;
}

/* ============================================================
   7. 输入区(OpenWebUI 式悬浮大圆角卡片,聚焦光环)
   ============================================================ */
.composer-area { padding: 10px 20px 20px; }
.composer-wrap { max-width: var(--content-w); }
.composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-radius: 24px;
  padding: 8px 8px 8px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.composer:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring-brand), var(--shadow-md);
}
.composer textarea { font-size: 15px; padding: 8px 2px; }
/* 仅去掉 textarea 自身的蓝色矩形 outline,保留输入卡整体的蓝色光环 */
.composer textarea:focus,
.composer textarea:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 附件/语音:圆形透明按钮 */
.attach-btn, .voice-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--text-secondary);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.attach-btn:hover, .voice-btn:hover { background: var(--bg-hover); color: var(--text); }

/* 发送:圆形品牌主按钮(Apple 作风的圆形图标按钮) */
.send-btn, .stop-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 30%, transparent);
  transition: background 0.16s, transform 0.12s, box-shadow 0.16s;
}
.send-btn:hover { background: var(--primary-hover); transform: scale(1.04); box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 40%, transparent); }
.send-btn:active { transform: scale(0.94); }
.send-btn:disabled, .send-btn.muted {
  background: var(--bg-active);
  color: var(--text-tertiary);
  box-shadow: none;
}
.send-btn:disabled:hover, .send-btn.muted:hover { background: var(--bg-active); transform: none; box-shadow: none; }
.stop-btn { background: var(--text-secondary); }
.stop-btn:hover { background: var(--text); transform: scale(1.04); }

.composer-hint { margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary); }
.attach-previews { max-width: var(--content-w); }
.file-card {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  border-radius: 12px;
}
.attach-img-preview { box-shadow: var(--shadow-soft); border: 1px solid var(--hairline); border-radius: 12px; }

.scroll-bottom-btn {
  right: 22px;
  bottom: 96px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.scroll-bottom-btn:hover { color: var(--brand); box-shadow: var(--shadow-lg); }

/* ============================================================
   8. 弹窗 / 设置 / 表单
   ============================================================ */
.modal {
  border-radius: 20px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
}
/* 修复:设置弹窗由 .hidden 控制显隐(openSettings 不加 .show),
   refine.css 的 :not(.show) 透明规则会导致弹窗"看不见" */
.modal-mask:not(.show),
.modal-mask:not(.show) .modal,
.modal-mask.hidden { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.modal-mask { opacity: 1 !important; }
.modal-mask .modal { opacity: 1 !important; transform: none !important; }
.modal-header { padding: 20px 24px 14px; }
.modal-header h3 { font-size: 17px; letter-spacing: -0.01em; }
.modal-body { padding: 6px 24px 26px; }
/* 小节标题:去掉 ALL-CAPS 模板痕迹,正常大小写 + 弱色分层 */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  text-transform: none;
}
.settings-tabs { padding: 0 24px 14px; }
.settings-tab {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13.5px;
}
.settings-tab.active { background: var(--bg-hover); color: var(--text); box-shadow: none; }

.field input, .select-box, .font-family-input {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-surface);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring-brand);
  background: var(--bg-surface);
}
.select-box:hover { border-color: var(--hairline-strong); background: var(--bg-surface); }

.btn {
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 500;
}
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); box-shadow: var(--shadow-soft); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.btn.small { border-radius: 10px; }

.switch input:checked + .slider { background: var(--brand); }
.badge.global { background: var(--brand-soft); color: var(--brand); }
.add-provider summary { color: var(--brand); }
.msg-retry-row .btn { border-color: var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); }

.oc-menu {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: 5px;
}
.oc-menu-search { border: 1px solid var(--hairline); background: var(--bg-surface); border-radius: 9px; }
.oc-menu-item { border-radius: 8px; }
.oc-menu-item:hover { background: var(--bg-hover); }
.oc-menu-item.active { background: var(--bg-selected); color: var(--active-text); }
.oc-menu-item.active .check { color: var(--brand); }

.provider-card, .group-card, .access-row {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.provider-card:hover, .group-card:hover { background: var(--bg-surface-2); }
.table-wrap { border-radius: 10px; border-color: var(--hairline); }

.toast { border-radius: 999px; box-shadow: var(--shadow-md); }

/* ============================================================
   9. 登录页(Apple 风)
   ============================================================ */
.auth-body { background: var(--bg-app); }
.auth-card {
  border-radius: 24px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  padding: 44px 42px 38px;
}
.auth-logo .logo-wrap {
  width: 60px; height: 60px;
  border-radius: 18px;
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: none;
  background-image: none;
}
.auth-card input {
  background: var(--bg-surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
}
.auth-card input:focus {
  background: var(--bg-surface) !important;
  /* 聚焦只保留外圈 focus-visible 环,去掉内层蓝边与光晕,避免"两层蓝框" */
  border-color: color-mix(in srgb, var(--text) 16%, transparent) !important;
  box-shadow: none !important;
}
.auth-card .btn.primary { background: var(--primary); box-shadow: var(--shadow-soft); }
.auth-card .btn.primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* ============================================================
   10. 管理后台(与主界面统一)
   ============================================================ */
.admin-body { background: var(--bg-app); }
.stat-card, .admin-card {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.admin-tab.active { box-shadow: none; background: var(--bg-surface); }
.admin-toolbar .search-input { border: 1px solid var(--hairline); background: var(--bg-surface); border-radius: 12px; }
.admin-toolbar .search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring-brand); }
.log-filter-btn { border-radius: 999px; }
.meta-row span { border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--hairline); }
.mini-user { border-radius: 12px; background: var(--bg-surface); }

/* ============================================================
   11. 响应式
   ============================================================ */
@media (max-width: 768px) {
  .sidebar { width: 280px; min-width: 280px; box-shadow: var(--shadow-lg); }
  .topbar { height: 50px; padding: 0 12px; }
  .messages { padding: 20px 16px 10px; }
  .msg.user .msg-content { max-width: 88%; }
  .msg-actions, .quick-actions, .reply-cost { padding-left: 0; }
  .composer-area { padding: 6px 12px 12px; }
  .composer { border-radius: 20px; }
  .scroll-bottom-btn { right: 14px; bottom: 88px; }
  .empty-state { padding-top: max(8vh, 48px); }
  .empty-suggest .es-desc { font-size: 12px; }
}
@media (max-width: 480px) {
  .empty-suggests { grid-template-columns: 1fr; }
  .empty-state h2 { font-size: 24px; }
}
/* ============================================================
   12. 细节抛光(Apple 风:统一缓动 / 滚动条 / 焦点 / 文本)
   ============================================================ */
:root {
  /* Apple 式"快速出"缓动,替代混杂的 ease */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* 统一交互过渡节奏 */
button, .chat-item, .msg-action, .menu-btn, .empty-suggest,
.settings-tab, .switch .slider, .icon-btn, .footer-btn,
input, select, textarea, .model-picker, .search-input {
  transition-timing-function: var(--ease-out);
}
button, .icon-btn, .footer-btn, .msg-action, .menu-btn {
  transition-duration: var(--dur-fast);
}
.chat-item, .empty-suggest, .settings-tab {
  transition-duration: var(--dur-base);
}

/* 会话悬浮操作按钮补上过渡(原为 0s,生硬) */
.menu-btn {
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.menu-btn:hover { background: var(--bg-hover); }

/* 滚动条:细、圆角、hover 显现(Apple 风) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-tertiary) 32%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-tertiary) 55%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.sidebar, .messages, .modal-body, .admin-body, .admin-table-wrap, .logs-body {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-tertiary) 40%, transparent) transparent;
}

/* 键盘焦点:Apple 式 3px 品牌色光环(仅键盘) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-brand);
  border-radius: inherit;
}
button:focus-visible, .chat-item:focus-visible, .msg-action:focus-visible,
.menu-btn:focus-visible, .settings-tab:focus-visible, .icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ring-brand);
}

/* 文本选中:品牌色系 */
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* 占位符:更轻 */
::placeholder { color: var(--text-tertiary); opacity: 0.75; }

/* 消息进场:更柔和的流水感(位移收敛) */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.msg { animation: msgIn 260ms var(--ease-out); }

/* 弹窗/浮层进场:Apple 式 scale+fade(会话项的「更多」按钮由 polish.css 接管,不参与进场动画) */
.modal, .user-menu, .oc-menu, .dropdown-menu {
  animation: popIn 200ms var(--ease-out);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* 输入区聚焦光环:更平滑 */
.composer { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }

/* 按钮按下反馈统一 */
button:active:not(:disabled) { transform: scale(0.97); }
.new-chat-btn:active, .empty-start-btn:active, .send-btn:active { transform: scale(0.96); }

/* 操作栏按钮保留轻触感(0.9),不被统一 0.97 覆盖 */
.msg-action:active { transform: scale(0.9); }