/* ==========================================================================
   Hermes 网页端（手机为主 / 浏览器通用）统一主题 skin
   注入方式：hz nginx sub_filter → /hermes-web-skin.css（登录页 + Dashboard 同吃）
   改动纪律：只改「种子变量」+ 组件盒模型/排版属性；不碰 position/display/overflow/
             z-index/pointer-events 等交互关键属性；不隐藏任何元素；不引外网资源。
   ========================================================================== */

/* ---------- 0. 亮色一份、避免原生控件/滚动条按系统深色渲染打架 ---------- */
:root { color-scheme: light !important; }

:root,
html.dark {
  /* --- 层次：纸面 → 抬升面 → 卡片，三档而不是一档 --- */
  --background-base: #f6f8fc !important;   /* 应用底：冷调浅灰，不是纯白，衬得出白卡片 */
  --background:      #f6f8fc !important;
  --surface:         #f1f4fa !important;   /* 中间层：页头/侧栏 */
  --card:            #ffffff !important;   /* 卡片：纯白 */

  /* --- 文字墨色（四级灰阶，层次主要靠这个，不靠描边）--- */
  --foreground-base: #16233c !important;   /* 正文：深海军蓝，比纯黑柔 */
  --foreground:      #16233c !important;

  /* --- 强调色：钴蓝（按钮/链接/图标/选中态都从它 mix 派生）--- */
  --midground:      #2f5bff !important;
  --midground-base: #2f5bff !important;

  /* --- 圆角：整体比直角柔和，但不夸张 --- */
  --radius: 0.8rem !important;

  /* --- 字体：系统栈，中英文各一条回退链，零外网依赖 --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif !important;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace !important;

  /* --- 分隔线：登录页专用（极淡，代替原来偏硬的 midground 线）--- */
  --hairline:        rgba(22, 35, 60, 0.09) !important;
  --hairline-strong: rgba(22, 35, 60, 0.16) !important;
}

/* ---------- 1. 背景层次：给应用底铺一层极淡渐变，摆脱「一片平」 ---------- */
body,
#root > div:first-child {
  background-image: linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 46%, #eef2f9 100%) !important;
  background-attachment: fixed !important;
}
body { color: #16233c !important; font-family: var(--font-sans) !important; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ==========================================================================
   A. Dashboard（登录后，React 应用）
   ========================================================================== */

/* --- A1. 分隔线：原先 border-current/20 = 蓝色 20%，偏冷偏硬，改为中性细线 ---
   属性选择器与 Tailwind 原子类的特异度相同，本表后注入故胜出；!important 兜底。 */
[class~="border-current/20"] { border-color: rgba(22, 35, 60, 0.085) !important; }
[class~="border-current/10"] { border-color: rgba(22, 35, 60, 0.055) !important; }
[class~="border-current/30"] { border-color: rgba(22, 35, 60, 0.13)  !important; }
[class~="border-current/40"] { border-color: rgba(22, 35, 60, 0.17)  !important; }

/* --- A2. 移动端顶栏：加一层极淡底影、正文变主色（蓝留给可点元素）
   ⚠️ 顶栏高度必须保持不变：下方的占位 div 是固定 h-14，顶栏一长高内容就会被盖住。
   所以不抬 min-height，只把纵向内边距收到 4px，腾出空间给 44px 的按钮。 --- */
header[class*="min-h-14"][class*="lg:hidden"] {
  background-color: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  box-shadow: 0 1px 0 rgba(22, 35, 60, 0.055), 0 6px 18px -14px rgba(22, 35, 60, 0.28) !important;
  padding: 4px 0.75rem !important;
}
/* 汉堡按钮：28px → 44px 拇指友好方块（Apple HIG 下限），圆角 + hover/active 反馈 */
header[class*="min-h-14"] button[class*="aspect-square"] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 0.7rem !important;
  transition: background-color .15s ease, color .15s ease !important;
}
header[class*="min-h-14"] button[class*="aspect-square"]:hover {
  background-color: rgba(47, 91, 255, 0.09) !important;
}
header[class*="min-h-14"] button[class*="aspect-square"]:active {
  background-color: rgba(47, 91, 255, 0.16) !important;
}

/* --- A3. 品牌排印：收掉「全大写 + 宽字距」的终端味 --- */
[class*="tracking-[0.0525rem]"] { letter-spacing: 0.012em !important; }      /* 侧栏 HERMES AGENT */
[class~="tracking-[0.05em]"]    { letter-spacing: 0.012em !important; }      /* 顶栏 Hermes Agent */
header[class*="min-h-14"] span[class*="font-sans"][class*="font-bold"] {
  font-size: 1.0625rem !important;
  letter-spacing: 0.008em !important;
  color: #16233c !important;
}
/* 侧栏品牌：保留原来的字号（1.125rem），只收字距 —— 不要顺手改大小，那会把品牌做小 */
aside#app-sidebar span[class*="uppercase"] {
  letter-spacing: 0.02em !important;
  font-size: 1.125rem !important;
}

/* --- A4. 侧栏：白底 + 中性细线，导航项字距收紧、行高加高更好按 --- */
aside#app-sidebar {
  background-color: #ffffff !important;
  border-right-color: rgba(22, 35, 60, 0.08) !important;
  box-shadow: 1px 0 0 rgba(22, 35, 60, 0.04), 24px 0 48px -40px rgba(22, 35, 60, 0.25) !important;
}
aside#app-sidebar a[class*="group/nav"] {
  letter-spacing: 0.045em !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  transition: color .16s ease, background-color .16s ease !important;
}
/* 导航 hover 高亮方块：直角 → 圆角，去掉左右各 0.375rem 的贴边 */
aside#app-sidebar a[class*="group/nav"] > span[class*="absolute"] {
  border-radius: 0.6rem !important;
}

/* --- A5. 页面标题（Sessions 等）：全大写 → 正常大小写观感，字重与字距放缓。
   ⚠️ Dashboard 的 1rem = 15px（html 设了 15px 基准），故标题用 px 定死。 --- */
h1[class*="tracking-[0.08em]"] {
  letter-spacing: 0.01em !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

/* --- A6. 二级页头（标题条）：与纸面拉开一档，线更淡 --- */
[class*="z-1"][class*="border-b"][class*="shrink-0"] {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-bottom-color: rgba(22, 35, 60, 0.07) !important;
}

/* --- A7. 控件通用：输入框 / 下拉 / 按钮 —— 统一「白底 + 中性细线 + 圆角 + focus 柔光环」 --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background-color: #ffffff !important;
  color: #16233c !important;
  border-color: rgba(22, 35, 60, 0.13) !important;
  border-radius: calc(var(--radius) * 0.72) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
input::placeholder, textarea::placeholder { color: rgba(22, 35, 60, 0.38) !important; }
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
  border-color: rgba(22, 35, 60, 0.22) !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: rgba(47, 91, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.14) !important;
}
/* 原生下拉箭头统一由系统画（浅色下已协调），这里只保证控件底色干净 */
select { background-image: none !important; }

/* 按钮通用：更低饱和的描边 + 明确按压反馈 */
button {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .08s ease !important;
}
button[class*="border"]:not([class*="border-transparent"]) {
  border-color: rgba(22, 35, 60, 0.14) !important;
  border-radius: calc(var(--radius) * 0.72) !important;
}
button[class*="border"]:hover { border-color: rgba(22, 35, 60, 0.24) !important; }
button:not([disabled]):active { transform: translateY(1px) !important; }
button[disabled] { opacity: 0.5 !important; }

/* --- A8. 列表行 / 卡片：hover 有反馈、卡片有极淡投影与细边 --- */
li > a, li > div[role="button"] { border-radius: 0.7rem !important; }
[class*="rounded-lg"][class*="border"], [class*="rounded-xl"][class*="border"],
[class*="rounded-2xl"][class*="border"] {
  border-color: rgba(22, 35, 60, 0.09) !important;
}
[class*="shadow-sm"], [class*="shadow-md"], [class*="shadow-lg"] {
  box-shadow: 0 1px 2px rgba(22, 35, 60, 0.04), 0 10px 26px -18px rgba(22, 35, 60, 0.22) !important;
}

/* --- A9. 滚动条：手机端细、不抢视线（桌面端也就一小条）--- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(22, 35, 60, 0.16) !important;
  border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(22, 35, 60, 0.28) !important; }

/* --- A10. 去「终端感」：这才是「像 DOS 时代」的真正来源 ---
   实测三条根因（都在 app 自己的样式里，皮肤层可覆盖）：
   ① DOM 文本本来就是句首大写（"Chat"/"Sessions"/"Create"），是全大写工具类把它变成 CHAT/SESSIONS；
   ② 控件上挂了等宽/复古字体（font-mono / font-mondwest / font-courier）+ 0.1~0.2em 宽字距；
   ③ 实体按钮带 Windows 95 式 inset 斜面高光（shadow-[inset_-1px...]）+ active:invert 反色闪一下。
   注意：只收「UI 控件」的字体与大小写，pre/code/.font-mono 这类真正的代码/日志区一律不动。 */

/* ① 句首大写：把纯装饰性的 all-caps 还原成正常大小写 */
[class*="uppercase"] { text-transform: none !important; }

/* 占位符：默认太浅（实测 2.3:1），抬到 ≥3:1，但明显浅于正文以示区别 */
::placeholder { color: rgba(22, 35, 60, 0.52) !important; opacity: 1 !important; }

/* ② UI 控件统一无衬线正文栈（button/select 里不会有代码，安全） */
button, select, option {
  font-family: var(--font-sans) !important;
  letter-spacing: normal !important;
}
aside#app-sidebar a[class*="group/nav"] { font-family: var(--font-sans) !important; }
/* 表格/分组小标题：保留小字号但收掉大字距，不再像终端输出 */
th, legend { letter-spacing: 0.01em !important; }

/* ③ 去掉 95 式斜面高光，换成现代的一层柔影 */
[class*="inset_-1px"], [class*="inset_1px"] {
  box-shadow: 0 1px 2px rgba(22, 35, 60, 0.10), 0 6px 16px -12px rgba(22, 35, 60, 0.35) !important;
}
[class*="active:invert"]:active { filter: none !important; }

/* ④ 圆角统一：只给「本来完全没有圆角」的控件加，带 rounded-full / rounded-lg 的保持原样 */
button:not([class*="rounded"]), select:not([class*="rounded"]),
a[class*="group/nav"]:not([class*="rounded"]):not([class*="absolute"]) {
  border-radius: 0.5rem !important;
}
/* ⑤ 蓝底半透明描边（border-midground/15、/25 …）是「边框偏深偏硬」的元凶 → 换中性。
   注意用带斜杠的子串匹配：只命中带透明度的那些，纯 border-midground（真·强调边）保持蓝色。 */
[class*="border-midground/"]          { border-color: rgba(22, 35, 60, 0.13) !important; }
[class*="border-midground/"]:hover    { border-color: rgba(22, 35, 60, 0.24) !important; }
[class*="border-midground/"]:focus-visible { border-color: rgba(47, 91, 255, 0.55) !important; }
/* ⑥ 不再单独覆盖 bg-midground —— 它已由 --midground 种子变量自动变成新强调色，
   显式覆盖反而会误伤 hover:bg-midground/10、disabled:bg-midground/15 这类半透明态。 */

/* ==========================================================================
   B. 登录页（后端渲染的独立 HTML，非 React）
   ========================================================================== */

/* 底噪点/网格暗纹在浅色下显脏，去掉；改用柔和渐晕代替，不再是一片平
   ⚠️ 用 body 的 background-image 而不是 ::before 叠层 —— 背景永远画在内容之下，
   不会像绝对定位的伪元素那样盖到卡片上（position/层叠相关属性一律不碰）。 */
body {
  background-image:
    radial-gradient(120% 62% at 50% 0%, rgba(47, 91, 255, 0.10) 0%, rgba(47, 91, 255, 0) 58%),
    linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 46%, #eef2f9 100%) !important;
  background-attachment: fixed !important;
  min-height: 100dvh !important;
}

/* ==========================================================================
   ⚠️ 登录页专属规则统一加 `html:not(:has(#root))` 前缀
   —— 登录页是后端渲染的独立 HTML，没有 React 的 #root；Dashboard 有。
   —— 不加这层，`h1::after{content:"登录"}` 会串到 Dashboard 的「Sessions」标题上。
   —— 若浏览器不支持 :has()，本段整体不生效 → 优雅回退英文，不影响功能。
   ========================================================================== */

/* --- B1. 品牌字：Nous Research 保留原名（不改中英混排的品牌名），
       但收掉「全大写 + 宽字距」的终端排印，方块点缩小成真正的一个点 --- */
.brand {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0.008em !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #16233c !important;
}
.brand .dot {
  width: 5px !important;
  height: 5px !important;
  margin: 0 0.32em !important;        /* 给两词之间留出呼吸，避免贴成「Nous•Research」 */
  border-radius: 50% !important;
  background: #2f5bff !important;
  transform: translateY(-1px) !important;
}

/* --- B2. 卡片：更大的圆角、更柔的扩散投影、极淡描边（不再是「一张纸片」）--- */
.card {
  background: #ffffff !important;
  border: 1px solid rgba(22, 35, 60, 0.07) !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 1px 2px rgba(22, 35, 60, 0.04),
              0 18px 50px -22px rgba(22, 35, 60, 0.22) !important;
  padding: 2.25rem 1.75rem 1.75rem !important;
}
html:not(:has(#root)) h1 {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  color: #16233c !important;
}
html:not(:has(#root)) .subtitle {
  color: rgba(22, 35, 60, 0.62) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

/* --- B3. 字段：标签不再是小灰字，改为清晰可读的次级墨色；输入框加大更好按 --- */
.form-title,
.field-label {
  text-transform: none !important;
  font-family: var(--font-sans) !important;
}
.field-label {
  color: rgba(22, 35, 60, 0.7) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 0.4rem !important;
}
.field { margin-bottom: 0.9rem !important; }
.field-input {
  background: #ffffff !important;
  color: #16233c !important;
  border: 1px solid rgba(22, 35, 60, 0.14) !important;
  border-radius: 0.72rem !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;         /* 16px：iOS 以下不再触发聚焦缩放 */
  padding: 0.85rem 0.9rem !important;
  min-height: 3rem !important;        /* 48px 拇指目标 */
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.field-input:hover { border-color: rgba(22, 35, 60, 0.24) !important; }
.field-input:focus,
.field-input:focus-visible {
  border-color: rgba(47, 91, 255, 0.6) !important;
  box-shadow: 0 0 0 3.5px rgba(47, 91, 255, 0.15) !important;
  outline: none !important;
}

/* --- B4. 主按钮：更大的高度、按压有反馈、hover 有一层青光 --- */
.provider-btn {
  background: #2f5bff !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border-radius: 0.8rem !important;
  min-height: 3.125rem !important;    /* 50px */
  padding: 0.9rem 1rem !important;
  box-shadow: 0 8px 20px -10px rgba(47, 91, 255, 0.55) !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease !important;
}
.provider-btn:hover {
  background: #2148e6 !important;
  filter: none !important;
  box-shadow: 0 10px 24px -10px rgba(47, 91, 255, 0.6) !important;
}
.provider-btn:active {
  background: #1b3ccc !important;
  filter: none !important;
  transform: translateY(1px) !important;
  box-shadow: 0 4px 12px -8px rgba(47, 91, 255, 0.55) !important;
}
.provider-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3.5px rgba(47, 91, 255, 0.28),
              0 8px 20px -10px rgba(47, 91, 255, 0.55) !important;
}
.provider-form { margin-top: 0.35rem !important; }
.form-title {
  color: rgba(22, 35, 60, 0.55) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.55rem !important;
}

/* --- B5. 页脚：装饰线更淡，文字更清楚 --- */
html:not(:has(#root)) footer {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: rgba(22, 35, 60, 0.5) !important;
  font-size: 0.78rem !important;
}
html:not(:has(#root)) footer .sep { background: rgba(22, 35, 60, 0.12) !important; }

/* ==========================================================================
   C. 登录页文案中文化（CSS 覆盖式）
   —— 只作用于「纯文本叶子元素」：原文字用 font-size:0 收起宽度，::after 显示中文。
   —— 全部带 `html:not(:has(#root))` 前缀，只命中登录页，绝不串到 Dashboard。
   —— 失效是优雅的：Hermes 若改类名/不支持 :has，本段不生效、回退英文，不影响功能。
   —— 品牌字 Nous Research 是专有名词，按判断保留英文（见变更说明）。
   ========================================================================== */

html:not(:has(#root)) h1 { font-size: 0 !important; }
html:not(:has(#root)) h1::after {
  content: "登录";
  font-size: 1.6rem; font-weight: 650; letter-spacing: 0; line-height: 1.3;
  color: #16233c;
}

html:not(:has(#root)) .subtitle { font-size: 0 !important; }
html:not(:has(#root)) .subtitle::after {
  content: "登录后进入 Hermes Agent 控制台。";
  font-size: 0.95rem; font-weight: 400; line-height: 1.55;
  color: rgba(22, 35, 60, 0.62);
}

html:not(:has(#root)) .form-title { font-size: 0 !important; }
html:not(:has(#root)) .form-title::after {
  content: "使用账号密码登录";
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(22, 35, 60, 0.64);   /* AA：小字号文字不低于 4.5:1 */
}

html:not(:has(#root)) .provider-form label.field:first-of-type .field-label { font-size: 0 !important; }
html:not(:has(#root)) .provider-form label.field:first-of-type .field-label::after {
  content: "账号";
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(22, 35, 60, 0.7);
}
html:not(:has(#root)) .provider-form label.field:last-of-type .field-label { font-size: 0 !important; }
html:not(:has(#root)) .provider-form label.field:last-of-type .field-label::after {
  content: "密码";
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(22, 35, 60, 0.7);
}

html:not(:has(#root)) .provider-btn { font-size: 0 !important; }
html:not(:has(#root)) .provider-btn::after {
  content: "登录";
  font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; color: #ffffff;
}

html:not(:has(#root)) footer { font-size: 0 !important; }
html:not(:has(#root)) footer::before {
  content: "公网访问 · 需要登录";
  font-size: 0.78rem; font-weight: 400; letter-spacing: 0.01em;
  color: rgba(22, 35, 60, 0.64);   /* AA：原 0.50 只有 3.1:1 */
}
html:not(:has(#root)) footer .sep {
  width: 0 !important; height: 0 !important;
  background: transparent !important; margin: 0 !important;
}
/* ==========================================================================
   D. 手机适配（窄屏 ≤ 640px）
   —— dashboard 原生布局是桌面优先：统计卡 5 项 flex-wrap 挤成一行、字号偏大、
      控件偏小、留白按桌面给。这一段只在窄屏生效，桌面端完全不受影响。
   —— 选择器只匹配「结构特征」而非猜类名，避免 dashboard 改版后失效。
   ========================================================================== */
@media (max-width: 640px) {

  /* --- D1. 统计卡：5 项挤一行 → 3 列网格，数字与标签成组对齐 ---
     结构：div > (div.flex-col > span.tabular-nums + span) × N */
  div:has(> div.flex-col > span[class*="tabular-nums"]) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.875rem 0.5rem !important;
    align-items: start !important;
    padding: 0.875rem 0.75rem !important;
    border-radius: 0.9rem !important;
    background-color: #ffffff !important;
  }
  div:has(> div.flex-col > span[class*="tabular-nums"]) > div.flex-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  /* --- D2. 统计数字：默认继承的蓝色太重（一屏 5 个大蓝字很吵），
     改深墨蓝；成功/告警等语义色保留原样。 --- */
  div:has(> div.flex-col > span[class*="tabular-nums"]) span[class*="tabular-nums"] {
    font-size: 1.1875rem !important;
    line-height: 1.15 !important;
  }
  div:has(> div.flex-col > span[class*="tabular-nums"])
    span[class*="tabular-nums"]:not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-destructive"]) {
    color: #16233c !important;
  }
  /* 数字下方的英文标签：手机上略放大一点点，避免过小看不清 */
  div:has(> div.flex-col > span[class*="tabular-nums"]) span[class*="text-muted-foreground"] {
    font-size: 0.75rem !important;
    letter-spacing: 0.01em !important;
  }

  /* --- D3. 页面底衬留白：桌面给到 2rem + 安全区，手机上收窄，
     把竖向空间还给内容（底部安全区仍保留，避免被手势条盖住）。 --- */
  [class*="pb-[calc(2rem"] {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- D4. 触摸目标：手机上所有图标按钮至少 40×40（Apple HIG 建议下限），
     并把紧凑的 tab/分段控件加高，减少误触。 --- */
  main button[class*="aspect-square"],
  main a[class*="aspect-square"] {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  main [role="tab"],
  main button[class*="text-xs"] {
    min-height: 36px !important;
  }

  /* --- D5. 会话卡片：手机上加大内边距与行距，卡片之间拉开距离，
     让「一条会话」在拇指下更容易点准。 --- */
  main [class*="divide-y"] > * {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* ==========================================================================
   E. 终端配色（浅色界面里的黑框）
   —— xterm.js 自带样式表把 .xterm-viewport 涂成 #000，而当前主题没有下发
      内联背景，于是在浅色界面里就成了一块突兀的黑框。这里显式改成浅色，
      与 TUI 的浅色渲染（display.tui_theme=light）保持一致。
   —— 只在网页端生效（本样式表由 nginx 注入），桌面 app 走皮肤，不受影响。
   ========================================================================== */
.xterm .xterm-viewport {
  background-color: #FFFFFF !important;
}
.xterm .xterm-screen,
.xterm .xterm-rows {
  background-color: transparent !important;
}

/* 终端外框：给这块区域一个浅色底，避免任何缝隙露出深色 */
.hermes-chat-xterm-host {
  background-color: #FFFFFF !important;
}
/* ChatPage 的父层把 terminalBg 作为 inline background-color 写成黑色；
   仅改 viewport 会留下截图里的黑色上/下/左右外框。 */
div:has(> .hermes-chat-xterm-host) {
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 14px rgba(22, 35, 60, 0.10) !important;
}

/* ==========================================================================
   F. 手机适配 · 会话页（≤ 640px）
   —— 标题栏本身已是 truncate + shrink-0（长标题省略号、按钮不被挤），
      这里只补触摸目标与留白。
   ========================================================================== */
@media (max-width: 640px) {

  /* 右下角悬浮复制按钮：原生 28×36，低于可用触摸尺寸，放大并留安全边距 */
  .hermes-chat-xterm-host ~ button,
  .hermes-chat-xterm-host + button {
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0.75rem !important;
  }

  /* 终端区域留白：贴边太近时手指容易误触滚动条 */
  main .hermes-chat-xterm-host {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

/* ==========================================================================
   G. 手机原生布局（≤ 640px）
   —— 不是把电脑版缩小：把聊天当成一张全屏工作面，把工具区改成底部抽屉，
      终端卡片去掉桌面阴影与厚边框，顶部只保留手机真正需要的入口。
   —— 网页代理注入，不改 Hermes 源码；桌面端不受影响。
   ========================================================================== */
@media (max-width: 640px) {
  html, body, #root {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 手机顶部导航：固定高度、触摸目标统一，避免桌面间距把聊天空间吃掉 */
  header[class*="min-h-14"][class*="lg:hidden"] {
    min-height: 52px !important;
    height: 52px !important;
    padding: 4px 10px !important;
  }
  header[class*="min-h-14"][class*="lg:hidden"] button[class*="aspect-square"] {
    width: 44px !important;
    height: 44px !important;
  }

  /* Chat 页面标题栏：手机保留标题 + 一个明确的工具入口 */
  header[class*="z-1"][class*="border-b"][class*="shrink-0"] {
    min-height: 48px !important;
    height: 48px !important;
    padding: 4px 10px !important;
  }
  header[class*="z-1"][class*="border-b"][class*="shrink-0"] h1 {
    font-size: 1rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
  }
  header[class*="z-1"][class*="border-b"][class*="shrink-0"] button {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* 聊天工作面：全宽、浅色、轻边界；不再像桌面终端嵌在黑色卡片里 */
  div:has(> .hermes-chat-xterm-host) {
    margin: 8px 8px 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(22, 35, 60, 0.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(22, 35, 60, 0.08) !important;
  }
  .hermes-chat-xterm-host {
    border-radius: 10px !important;
    padding: 3px 4px !important;
  }

  /* TUI 在手机上不再沿用桌面字号；稍微放大并增加行距，优先可读性 */
  .hermes-chat-xterm-host .xterm,
  .hermes-chat-xterm-host .xterm-rows {
    font-size: 10px !important;
    line-height: 1.18 !important;
  }
  .hermes-chat-xterm-host .xterm-screen {
    padding: 2px 0 !important;
  }

  /* Model & tools：桌面右侧面板 → 手机底部抽屉，宽度和手指路径按手机设计 */
  #chat-side-panel {
    top: max(52px, env(safe-area-inset-top, 0px)) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: calc(100dvh - 52px) !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: 0 !important;
    box-shadow: 0 -12px 36px rgba(22, 35, 60, 0.18) !important;
  }
  #chat-side-panel > div:first-child {
    height: 58px !important;
    min-height: 58px !important;
    padding: 8px 14px !important;
  }
  #chat-side-panel > div:first-child button {
    width: 44px !important;
    height: 44px !important;
  }
  #chat-side-panel button {
    min-height: 42px !important;
  }
  #chat-side-panel [class*="overflow-y-auto"] {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 复制按钮固定在内容右下，不遮住输入提示 */
  .hermes-chat-xterm-host + button {
    min-width: 44px !important;
    min-height: 44px !important;
    right: 10px !important;
    bottom: 10px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(22, 35, 60, 0.16) !important;
    color: #16233c !important;
    box-shadow: 0 2px 8px rgba(22, 35, 60, 0.12) !important;
  }
}