/* ==========================================================================
   LibreChat 界面微调 · 对标 ChatGPT 官网
   --------------------------------------------------------------------------
   注入方式：改写 index.html，在 </head> 前加一个 <link>。
             不改前端源码、不重新构建，与既有的 Agent 补丁同一套路。
   生效方式：改动本文件后运行 `python build_index.py` 刷新版本号，然后重启容器。
   回滚方式：注释掉 docker-compose.local.yml 里 ui-tweaks 的两处挂载，重启。

   为什么需要刷新版本号：静态资源带 `Cache-Control: max-age=172800`（2 天）。
   只改 .css 而不改 URL，浏览器会一直用旧缓存。build_index.py 会把文件内容的
   哈希拼成 ?v=xxxxxxxx 追加到 URL 上，内容一变 URL 就变，缓存自然失效。
   ========================================================================== */


/* ==========================================================================
   1. 消息区：隐藏 AI 回复上方的「模型名 + 头像 + 时间戳」整行
   --------------------------------------------------------------------------
   这是"最不像官网"的来源 —— 每条回复都顶着一个 gpt-5.6 的标签，
   而官网此处什么都不显示。两个元素由同一个 <h2> 承载，一起隐去。

   结构（源：components/Chat/Messages/ui/MessageRow.tsx）：
     <div class="message-render group ...">
       <div class="relative flex min-w-0 flex-col agent-turn ...">
         <h2>                                          <- 本行，隐藏
           <span aria-hidden="true">端点/智能体图标</span>
           <span class="min-w-0 truncate">gpt-5.6</span>
           <MessageTimestamp/>
         </h2>
         <div class="flex w-full flex-col gap-1">
           <div data-testid="message-body">正文</div>
           <div class="w-full">footer（含 48s 计时器，本题不动）</div>
         </div>
       </div>
     </div>

   用户消息的头是 <h2 class="sr-only">，本就不可见，无需处理。
   系统事件头带闪电图标（svg.lucide-zap），予以保留以免误伤。
   ========================================================================== */
.message-render .agent-turn > h2 {
  display: none !important;
}

/* 系统事件（Wakeup 结果、子代理触发）保留自己的标题行 */
.message-render .agent-turn > h2:has(svg.lucide-zap) {
  display: flex !important;
}


/* ==========================================================================
   2. 【故意留白】生成中的「48s」计时器不做处理
   --------------------------------------------------------------------------
   元素：<span data-testid="stream-elapsed" class="shimmer tabular-nums">
   本项目的场景里生图 / 联网搜索要等 20~80 秒，有计时器用户才不会以为卡死，
   所以按你的决定（Q4=B）保留。官网没有它，是因为官网快。
   若哪天想隐藏，加下面这一条即可：
     [data-testid='stream-elapsed'], [data-testid='stream-elapsed'] + .sr-only
       { display: none !important; }
   ========================================================================== */


/* ==========================================================================
   3. 会话列表：隐藏每条对话左侧的端点/智能体图标（官网是纯文字列表）
   --------------------------------------------------------------------------
   结构（源：components/Conversations/ConvoLink.tsx）：
     <button class="flex w-full min-w-0 grow ... overflow-hidden rounded-lg px-2 ...">
       <span class="mr-0 ...">端点/智能体图标</span>
       <span class="min-w-0 flex-1 ...">对话标题</span>     <- 用它的存在做锚点
     </button>

   选择器含义：「带 overflow-hidden 且含直接子级 span.flex-1 的按钮中，
   排在标题之前的那些直接子元素」全部隐藏。
   用"排在标题之前"而不是 :first-child，是为了万一结构变化也不会误藏标题。
   ========================================================================== */
button.overflow-hidden:has(> span.flex-1) > *:has(~ span.flex-1) {
  display: none !important;
}


/* ==========================================================================
   4. 落地页：隐藏 Agent 的「联系：…」那一行
   --------------------------------------------------------------------------
   agents 端点下，Landing 会额外渲染 <AgentContact>（源：components/Agents/
   AgentContact.tsx）。我们的 Agent 没填 support_contact / owner_contact，
   于是它会显示「联系：无可用联系方式」——纯噪音，官网没有这一行。

   它固定是落地页内容容器（ref=contentRef）的最后一个子元素：
     <div class="... transform-gpu flex-col items-center justify-center pb-16 ...">
       <div class="flex flex-col items-center gap-0 p-2">      <- contentRef
         <div>图标 + 标题</div>
         <Description/>
         <div>联系：…</div>                                   <- 最后一个，隐藏
       </div>
     </div>
   选择器靠落地页容器那组类名锚定。若未来 UI 改版导致失效，删掉本节即可。
   ========================================================================== */
.transform-gpu.flex-col.items-center.justify-center.pb-16 > div > :last-child:has(> span:first-child) {
  display: none !important;
}


/* ==========================================================================
   5. 细节打磨
   ========================================================================== */

/* 用户消息气泡：官网的圆角更饱满 */
.message-render .user-turn > div > div[data-testid='message-body'] {
  border-radius: 1.25rem !important;
}


/* ==========================================================================
   6. 模型选择器：官网样式（配合 ui-tweaks.js 搬运）
   --------------------------------------------------------------------------
   【P2a 重写】官网 Plus 版参考截图（2026-10-08）：模型选择器在输入框内
   右下角、麦克风左边，样式是纯灰字 + 下拉箭头，没有图标没有边框
   （官方截图里显示「5.6 中 ⌄」）。LibreChat 对应改造：
     · 位置：搬到控件行里麦克风按钮之前（ui-tweaks.js）
     · 去掉 lucide-feather 小树叶图标（涛哥点名要删的）
     · 去边框、透明底、灰字、补一个 ⌄ 箭头
   ========================================================================== */
[data-lc-model-inline] {
  flex-direction: row !important;
  align-items: center !important;
  max-width: none !important;
  gap: 0 !important;
  margin: 0 !important;
}

[data-lc-model-inline] [data-testid='model-selector-button'] {
  height: 2rem !important;
  min-height: 2rem !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0.5rem !important;
  border: none !important;
  border-radius: 0.625rem !important;
  background: transparent !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  gap: 0.25rem !important;
  color: rgb(var(--text-secondary) / 1) !important;
}

[data-lc-model-inline] [data-testid='model-selector-button']:hover {
  background: var(--lc-row-hover, rgba(128, 128, 128, 0.12)) !important;
}

/* 小树叶：模型按钮里第一个子 div 包着 lucide-feather 图标，整个去掉 */
[data-lc-model-inline] [data-testid='model-selector-button'] > div:first-child {
  display: none !important;
}
[data-lc-model-inline] svg.lucide-feather {
  display: none !important;
}

/* 官网的下拉箭头（LibreChat 的按钮里没有箭头，CSS 补一个） */
[data-lc-model-inline] [data-testid='model-selector-button'] > span::after {
  content: '⌄';
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.9375rem;
  line-height: 0;
  transform: translateY(-3px);
  color: rgb(var(--text-secondary) / 1);
}


/* ==========================================================================
   7. 输入框附件按钮：回形针 → 官网那种「+」
   --------------------------------------------------------------------------
   源：components/Chat/Input/Files/AttachFile.tsx      id="attach-file-button"
       components/Chat/Input/Files/AttachFileMenu.tsx id="attach-file-menu-button"
   两个都是稳定 id（不是随机 class），直接按 id 命中，比猜类名可靠。
   做法：隐藏原图标，用 ::before 画一个加号。
   ========================================================================== */
#attach-file-button > div > svg,
#attach-file-button > svg,
#attach-file-menu-button > div > svg,
#attach-file-menu-button > svg {
  display: none !important;
}

#attach-file-button::before,
#attach-file-menu-button::before {
  content: '+' !important;
  display: block !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  /* 加号字形本身重心偏高，微调一下跟相邻图标对齐 */
  transform: translateY(-1px);
}


/* ==========================================================================
   8. 附件菜单：向官网的「添加」栏靠拢
   --------------------------------------------------------------------------
   官网是「图标 + 主标题 + 灰色小字副标题」的两行结构，LibreChat 只有一行。
   这里先只做不依赖 DOM 结构的视觉打磨（圆角 / hover 过渡）。
   副标题要逐项注入文本，等这版效果确认后再做，避免一次改太多不好回退。
   ========================================================================== */
[role='menu'] [role='menuitem'] {
  border-radius: 0.625rem !important;
  transition: background-color 120ms ease !important;
}


/* ==========================================================================
   9. 【P1】隐藏最左侧 rail 图标列（53px 竖排图标条）
   --------------------------------------------------------------------------
   结构（实测 recon3/recon4）：aside > div(flex h-full w-full) > [rail, nav]
     rail: class="flex h-full flex-shrink-0 flex-col gap-2 border-r
                  border-border-light bg-surface-primary-alt px-2 py-2"  宽 53px
   里面是 关闭侧栏 / 新对话 / 对话历史 / 智能体 / 技能 / 定时任务 / 提示词 /
   记忆 / 书签 / 附加文件 一串图标按钮 —— 官网没有这一列。

   双保险（【P2c 改】只在展开态隐藏 —— 收起态要靠这条 rail 当图标栏，
   和官网一致：收起后留 53px 图标列，点顶部按钮重新展开）：
   a) JS 按 new-chat-button 的祖先链找到 rail，打 data-lc-rail 标记（精准）；
   b) CSS 类名组合兜底（类名组合足够特异，nav 面板没有 border-r + gap-2 组合）。
   注意：隐藏 ≠ 删除，rail 里的按钮仍可被 ui-tweaks.js 程序化 click()。
   ========================================================================== */
aside[data-lc-sb-open] [data-lc-rail],
aside[data-lc-sb-open] div.flex-col.gap-2.border-r.border-border-light {
  display: none !important;
}


/* ==========================================================================
   10. 【P1】隐藏欢迎语「我能帮什么忙吗」上方的小树叶图标
   --------------------------------------------------------------------------
   目标元素：Landing 中心那颗 40px 的圆（ConvoIcon），
     class="shadow-stroke relative flex h-full items-center justify-center
            rounded-full bg-presentation …"
   shadow-stroke 在消息头像等其他地方也会出现，所以必须限定在落地页容器内
   （复用第 4 节验证过的落地页锚点类名），避免误伤。
   ========================================================================== */
.transform-gpu.flex-col.items-center.justify-center.pb-16 div.shadow-stroke {
  display: none !important;
}


/* ==========================================================================
   11. 【P1】侧边栏宽度 360px → 260px（官网实测 246 + 滚动条 ≈ 260）
   --------------------------------------------------------------------------
   aside 的宽度是 React 内联样式（width: 360px; min-width: 360px），
   且收起时 React 会写 width: 0px —— 如果无脑 !important，侧栏就永远关不上了。
   做法：ui-tweaks.js 监听 aside 的内联 style，解析出 React 写入的宽度，
   展开态打 data-lc-sb-open 标记；CSS 只对带标记的 aside 强制 260px。
   ========================================================================== */
aside[data-lc-sb-open] {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 80% !important;
}

/* 收起态（【P2c 改】官网式）：不再整体隐藏 aside —— 原版会收成 52px 的
   迷你图标栏，这就是官网收起后左侧那条图标列。做法：
   · 图标栏（rail）只在展开态隐藏（见第 9 节），收起态自动恢复显示
   · 52px 宽度走 React 原生内联样式，不用管
   · 只需把收起态的 nav 面板（历史列表等）藏起来，免得挤压变形
   · 重新展开 = 点图标栏顶部按钮（原生 toggle）或主顶栏按钮 */
aside[data-lc-sb-closed] nav {
  display: none !important;
}


/* ==========================================================================
   12. 【P1】注入的官网式菜单头部（配合 ui-tweaks.js，结构见那边注释）
   --------------------------------------------------------------------------
   颜色全部走 currentColor / 透明度叠加，明暗主题自动适配，不硬编码背景。
   ========================================================================== */
[data-lc-nav-head] {
  position: relative; /* 建立层叠上下文：否则下方 position:relative 的原生行
                         会按 DOM 顺序画在「更多」下拉的上面，文字叠影 */
  z-index: 50;
  flex-shrink: 0;
  padding: 0.5rem 0.625rem 0.25rem;
}

/* 12.1 标题行：ChatGPT 字样 + 收起按钮 */
[data-lc-nav-head] .lc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 0.25rem 0 0.375rem;
}

[data-lc-nav-head] .lc-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgb(var(--text-primary) / 1);
}

[data-lc-nav-head] .lc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  transition: background-color 120ms ease;
}

[data-lc-nav-head] .lc-iconbtn:hover {
  background: var(--lc-row-hover, rgba(0, 0, 0, 0.06));
}

/* 12.2 菜单行（新聊天 / 更多）：官网规格 36px 高、圆角 10、字号 14 */
[data-lc-nav-head] .lc-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  height: 36px;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: 0.875rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease;
}

[data-lc-nav-head] .lc-row:hover {
  background: var(--lc-row-hover, rgba(0, 0, 0, 0.06));
}

[data-lc-nav-head] .lc-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 暗色主题（LibreChat 在根节点挂 .dark 类） */
.dark [data-lc-nav-head] .lc-row:hover,
.dark [data-lc-nav-head] .lc-iconbtn:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* .dark 下 token 自动变色，无需覆盖 */

/* 12.3 「⋯更多」下拉菜单（自有 DOM，挂 document.body 顶层，position:fixed 定位）
   —— 侧栏内部的层叠上下文压不住历史列表（滚动容器带 contain/transform），
   所以菜单必须挂到 body 最外层，用 z-index 9999 保证永远在最上面 */
.lc-more-menu {
  position: fixed;
  z-index: 9999;
  min-width: 168px;
  padding: 6px;
  background: rgb(var(--surface-primary) / 1); /* token 是 RGB 三元组，必须套 rgb() */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
}

.dark .lc-more-menu {
  background: #2f2f2f;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

.lc-more-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: rgb(var(--text-primary) / 1);
  text-align: left;
  cursor: pointer;
}

.lc-more-item:hover {
  background: var(--lc-row-hover, rgba(0, 0, 0, 0.06));
}

.dark .lc-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* 12.4 原有「项目 / 对话」标签行 → 官网行风格（节点不动，只换皮） */
aside [data-lc-offrow] {
  height: 36px !important;
  border-radius: 10px !important;
}

aside [data-lc-offrow] button {
  height: 36px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* 「最近」分组标题：官网是 12px 常规体灰字（原来是小号加粗） */
aside [data-lc-offrow][data-lc-recent] button {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: rgb(var(--text-secondary) / 1) !important;
}



/* ==========================================================================
   13.【P2a】输入框整体重做：官网 Plus 版单行胶囊（2026-10-08 实测参数）
   --------------------------------------------------------------------------
   官网参考截图实测（1043px 窗口，可能有系统缩放，按比例还原）：
     · 胶囊：单行高 ~52-54px，圆角 27-28，边框 #e9e9e9，白底，柔和阴影
     · 发送钮：蓝色圆 #3a83f7（PIL 取色确认）+ 白色↑，直径 ~28-32px
     · 左侧「+」距左缘 ~16px，与文字同行
     · 右侧：模型选择器（纯灰字+⌄）→ 麦克风 → 发送钮
   LibreChat 原生是「文字行 + 控件行」两行结构（总高 105px）。
   做法：JS 检测 textarea 是否单行（scrollHeight ≤ 60），单行时给 surface 打
   data-lc-single，CSS 把控件行绝对定位到右下角与文字重叠成一行；
   多行输入时标记自动摘除，回到原生两行布局（文字不会被控件压住）。
   ========================================================================== */

/* 13.1 宽度：官网 768px（xl 断点下 LibreChat 会跑到 896px） */
form[class*='max-w-3xl'] {
  max-width: 48rem !important;
}

/* 13.2 胶囊容器：圆角 / 边框 / 阴影（明暗主题都适配） */
[data-testid='composer-surface'] {
  border-radius: 1.75rem !important;
  border-color: #e9e9e9 !important;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.dark [data-testid='composer-surface'] {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

/* 13.3 单行态：控件行悬浮到右下角（不占布局高度 → 胶囊变矮） */
[data-testid='composer-surface'][data-lc-single] > div.flex-wrap {
  position: absolute !important;
  right: 0.5rem !important;
  bottom: 0.5rem !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
}

/* 单行态：文字左右都要留空间 —— 右侧给控件组（模型+麦克风+发送），
   左侧给「+」（官方「+ 询问 ChatGPT」布局，+ 与文字同行互不压） */
[data-testid='composer-surface'][data-lc-single] textarea {
  padding-right: 13.5rem !important;
  padding-left: 3.5rem !important;
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

/* 13.4 附件「+」：绝对定位到左侧文字行中心（JS 把它搬出控件行） */
[data-lc-attach] {
  position: absolute !important;
  left: 0.625rem !important;
  bottom: 0.5rem !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 5;
}

/* 多行态（两行布局）：+ 跟控件行对齐在底行，不再额外定位
   （继承上面的 left/bottom，正好落在底行左侧） */

/* 13.5 发送按钮：官网蓝 #3a83f7 + 白色箭头（PIL 实测取色） */
#send-button {
  width: 2rem !important;
  height: 2rem !important;
  background-color: #3a83f7 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
}

#send-button:disabled {
  opacity: 0.85;
  cursor: default;
}

#send-button:hover:not(:disabled) {
  background-color: #2c6fe3 !important;
}

/* 13.6 麦克风按钮跟官网一样收敛到 32px */
#audio-recorder {
  width: 2rem !important;
  height: 2rem !important;
}


/* ==========================================================================
   14.【P2b】官网化收尾四件套（2026-10-08，涛哥确认）
   ========================================================================== */

/* 14.1 模型下拉列表：每个模型项左侧的小树叶（lucide-feather）去掉 */
[role='dialog'] div[role='option'] div:has(> svg.lucide-feather),
[role='dialog'] div[role='option'] svg.lucide-feather {
  display: none !important;
}

/* 14.2 落地页三个建议卡片：整行隐藏（卡片行是输入框容器里不含 textarea
   的直接子 div；输入框本体是 FORM 标签不受影响），欢迎语与输入框自然靠拢 */
[class*='view-transition-name:chat-form'] > div:not(:has(textarea)) {
  display: none !important;
}

/* 14.3 「临时对话」○ 圆圈开关：官网没有，隐藏 */
button[aria-label='临时对话'] {
  display: none !important;
}

/* 14.4 思考强度按钮（一期·外观版）：盖掉模型名，官网同款灰底胶囊
   —— 按钮还是原生的模型选择器（点击被 ui-tweaks.js 拦截弹出自绘滑杆） */
[data-lc-model-inline] [data-testid='model-selector-button'] {
  background: var(--lc-pill-bg, rgba(0, 0, 0, 0.05)) !important;
  border-radius: 9999px !important;
  padding: 0 0.75rem !important;
  gap: 0.375rem !important;
  color: rgb(var(--text-primary) / 1) !important;
}

.dark [data-lc-model-inline] [data-testid='model-selector-button'] {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* 模型名 span 藏起来；【P2d 改】胶囊文字改为 JS 注入的动态档位
   （低/中/高，跟随选择变化 —— CSS 伪元素写不了动态值）
   注意排除注入的档位节点，否则它会跟着一起被藏掉 */
[data-lc-model-inline] [data-testid='model-selector-button'] > span:not([data-lc-effort-label]) {
  display: none !important;
}

[data-lc-effort-label] {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* 箭头从 span 挪到按钮上（span 已隐藏） */
[data-lc-model-inline] [data-testid='model-selector-button'] > span::after {
  content: none;
}

[data-lc-model-inline] [data-testid='model-selector-button']::after {
  content: '⌄';
  font-size: 0.9375rem;
  line-height: 0;
  transform: translateY(-2px);
  color: rgb(var(--text-secondary) / 1);
}

/* 14.5 思考强度弹窗（自绘，挂 body 顶层 fixed，官网同款） */
.lc-effort-menu {
  position: fixed;
  z-index: 9999;
  width: 256px;
  padding: 14px 16px 18px;
  background: rgb(var(--surface-primary) / 1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.dark .lc-effort-menu {
  background: #2f2f2f;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.lc-effort-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 22px; /* 【P2q】子元素全部绝对定位后需要显式高度，否则塌缩为 0 不可点 */
  font-size: 0.9375rem;
  font-weight: 400; /* 【P2c】官方是常规体，600 太粗 */
  color: rgb(var(--text-primary) / 1);
  cursor: pointer;
  user-select: none;
}

.lc-effort-head:hover {
  opacity: 0.75;
}

.lc-effort-head .lc-effort-model {
  position: absolute;
  right: calc(50% + 8px);
  top: 50%;
  transform: translateY(-50%);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 【P2q】「中」档字固定在弹层水平正中 —— 正下方就是滑杆轨道中点（中档滑块位置） */
.lc-effort-head .lc-effort-level {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #3a83f7;
}

.lc-effort-head .lc-effort-arrow {
  position: absolute;
  left: calc(50% + 8px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: rgb(var(--text-secondary) / 1);
}

/* ↺ 重置按钮（右上角） */
.lc-effort-reset {
  position: absolute;
  right: -6px;
  top: -2px;
  width: 26px;
  height: 26px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 9999px;
  color: rgb(var(--text-secondary) / 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lc-effort-reset:hover {
  background: var(--lc-row-hover, rgba(0, 0, 0, 0.06));
}

.dark .lc-effort-reset:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* 滑杆：轨道 + 蓝色填充 + 白色圆钮（官网同款），两端有小灰点 */
.lc-effort-track {
  position: relative;
  margin-top: 18px;
  height: 20px;
  cursor: pointer;
  touch-action: none;
}

.lc-effort-track::before,
.lc-effort-track::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: rgb(var(--text-secondary) / 1);
  transform: translateY(-50%);
  opacity: 0.6;
}

.lc-effort-track::before {
  left: 0;
}

.lc-effort-track::after {
  right: 0;
}

.lc-effort-rail {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: #e3e3e3;
  overflow: visible;
}

.dark .lc-effort-rail {
  background: rgba(255, 255, 255, 0.18);
}

.lc-effort-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 9999px;
  background: #3a83f7;
  transition: width 120ms ease;
}

.lc-effort-thumb {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  transition: left 120ms ease;
}

/* 14.6 【P2c】字体对齐官网（常规体） */
/* 模型下拉列表项：官方是常规体 */
[role='dialog'] div[role='option'] {
  font-weight: 400 !important;
}

/* 「思考强度」胶囊文字：常规体 */
[data-lc-model-inline] [data-testid='model-selector-button']::before {
  font-weight: 400;
}


/* ==========================================================================
   15.【P2d】图标栏精简 + 删「添加多个对话」
   ========================================================================== */
/* 收起态图标栏：去掉 提示词/记忆/书签/附加文件 四个图标（涛哥框选），
   功能保留在「⋯更多」菜单里（菜单项 = 程序化点击这些隐藏按钮） */
aside[data-lc-sb-closed] [data-testid='nav-panel-prompts'],
aside[data-lc-sb-closed] [data-testid='nav-panel-memories'],
aside[data-lc-sb-closed] [data-testid='nav-panel-bookmarks'],
aside[data-lc-sb-closed] [data-testid='nav-panel-files'] {
  display: none !important;
}

/* 「添加多个对话」⊕ 按钮（主区左上角）：官网没有，删除 */
[data-testid='add-multi-convo-button'] {
  display: none !important;
}


/* ==========================================================================
   16.【P2e】展开态侧栏底部账户条（官网式：头像 + 名字，副标题按涛哥要求留空）
   --------------------------------------------------------------------------
   LibreChat 0.8.8 原生只在收起态图标栏底部放账户（nav-user），展开态没有。
   做法：展开态 nav 底部注入自绘账户行；点击 = 程序化点击 nav-user，
   弹出原生账户菜单（设置/退出登录全保留）。nav 需要改成纵向 flex，
   让历史列表占剩余高度、账户行贴底不随滚动。
   ========================================================================== */
aside nav {
  display: flex;
  flex-direction: column;
}

/* 注入的导航头：固定高度，不许被 flex 拉伸/压缩 */
aside nav > [data-lc-nav-head] {
  flex: 0 0 auto !important;
  height: auto !important;
}

/* 历史列表容器：从 h-full 改为占据剩余空间。
   ⚠️ 不能用 div:first-of-type —— 注入的导航头排在 nav 第一位会被误命中，
   flex:1 1 0 把它拉压后内部菜单全部堆叠（涛哥真实界面已复现）。
   改用 JS 打的 data 标记（markNavList，认 class 带 overflow-y-auto 的直接子 div） */
aside nav > [data-lc-nav-list] {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

[data-lc-account-row] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.25rem 0.625rem 0.625rem;
  padding: 0.375rem 0.5rem;
  width: calc(100% - 1.25rem);
  box-sizing: border-box;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background-color 120ms ease;
}

[data-lc-account-row]:hover {
  background: var(--lc-row-hover, rgba(0, 0, 0, 0.06));
}

.dark [data-lc-account-row]:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-lc-account-row] .lc-account-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  background: #3a83f7;
}

[data-lc-account-row] .lc-account-avatar img {
  width: 100%;
  height: 100%;
  display: block;
}

[data-lc-account-row] .lc-account-name {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgb(var(--text-primary) / 1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   17.【P2h】思考强度菜单向上弹 + 模型按钮图标兜底隐藏
   --------------------------------------------------------------------------
   a) 之前隐藏模型按钮图标（叶子/圆圈）的规则挂在 [data-lc-model-inline]
      标记上，对话生成中等状态下标记会丢 → 图标容器露出（涛哥截图的 ◯）。
      改为按 testid 直接匹配的兜底规则，不依赖任何 JS 标记。
   b) 思考强度菜单原向下弹（top = 按钮bottom+6），输入框在页面底部时被视口
      裁掉。官网式是向上弹 → JS 里改为优先上方，上方放不下才向下兜底。
   ========================================================================== */
[data-testid='model-selector-button'] > div:first-child,
[data-testid='model-selector-button'] svg {
  display: none !important;
}

/* 上下文窗口用量圈（点开弹 Context window 面板的那个圆圈，涛哥要求去掉） */
[data-testid='token-usage'] {
  display: none !important;
}

/* ==========================================================================
   18.【P2l】附件预览改官网式竖版大卡片
   --------------------------------------------------------------------------
   原生：226×54 横条胶囊（粉图标+文件名+Document+删除），挤在控件区。
   官网：输入框左上角 130×110 竖卡 —— 上部大图标居中，底部一行文件名。
   纯 CSS 重排 React 结构：button > div.w-56 > div.flex-row 三层改纵向。
   对所有文件类型（图片/文档/表格）统一生效。
   ========================================================================== */
[data-lc-attach-list] {
  position: absolute !important;
  top: 6px !important;
  left: 56px !important; /* + 按钮右侧，官网位置 */
  z-index: 6 !important;
  margin: 0 !important;
  gap: 10px !important;
  max-width: calc(100% - 190px) !important; /* 不压住右侧控件区 */
}

/* 有附件时：输入框撑高，文字区下移，给卡片让出官网式上方空间 */
form:has([data-lc-attach-list] button) [data-testid='composer-surface'] {
  min-height: 168px !important;
}
/* 有附件时：输入框撑高，文字区下移（具体 padding 由 JS 按 + 按钮位置动态对齐） */
form:has([data-lc-attach-list] button) textarea {
  min-height: 150px !important;
}

/* 卡片本体：竖版 128×116 白底圆角卡
   （:not(.rounded-full) 排除卡片右上角原生的「删除」小圆钮，
     否则小圆钮被撑成 128×116 白块盖住卡片 —— P2l 实测踩坑） */
[data-lc-attach-list] button:not(.rounded-full) {
  width: 128px !important;
  height: 116px !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--lc-card-bg, #fff) !important;
  border: 1px solid var(--lc-capsule-border, #e9e9e9) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}
.dark [data-lc-attach-list] button:not(.rounded-full) {
  background: rgb(var(--surface-secondary) / 1) !important;
  border-color: rgb(var(--border-light) / 1) !important;
}

/* 层1：w-56.p-1.5 → 占满、去内边距、纵向 */
[data-lc-attach-list] button > div {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 层2：flex-row → 改纵向：图标区在上、文件名贴底 */
[data-lc-attach-list] button > div > div {
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* 图标容器：44×44 居中，留出顶部呼吸 */
[data-lc-attach-list] button > div > div > div:first-child {
  width: 44px !important;
  height: 44px !important;
  margin: 18px auto 0 !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
[data-lc-attach-list] button > div > div > div:first-child svg {
  width: 44px !important;
  height: 44px !important;
}
[data-lc-attach-list] button > div > div > div:first-child img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* 文字区：贴底一行，居中截断；「Document」类型行隐藏（官网只有一行文件名） */
[data-lc-attach-list] button > div > div > div:last-child {
  order: 3 !important;
  margin-top: auto !important;
  width: 100% !important;
  padding: 8px 10px 10px !important;
  text-align: center !important;
}
[data-lc-attach-list] button > div > div > div:last-child > div:last-child {
  display: none !important;
}
[data-lc-attach-list] button > div > div > div:last-child > div:first-child {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

/* 对话页顶部书签按钮（添加书签，涛哥要求去掉） */
[data-testid='bookmark-menu'] {
  display: none !important;
}

/* 导出/共享菜单里的「共享」项去掉，只留「导出」（涛哥要求） */
[data-testid='share-conversation-menu-item'] {
  display: none !important;
}

/* ============================================================
   §19 【P2o】附件卡片文件类型徽章（对齐官网）
   JS syncFileBadges() 往 P2l 图标容器注入 .lc-file-badge；
   徽章填满 44x44 图标容器，白字粗体居中。
   ============================================================ */
[data-lc-attach-list] [data-lc-badge] {
  overflow: hidden !important;
  border-radius: 10px !important;
}
.lc-file-badge {
  width: 100% !important;
  height: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 10px !important;
  font-family: 'Söhne', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* ============================================================
   §20 【P2r】模型选择列表：隐藏「搜索模型...」搜索框（涛哥要求）
   搜索框区 = 弹层(role=dialog.animate-popover)内第一个 sticky 头部
   （含浮标 LABEL + input），整体 display:none，列表直接从模型项开始。
   ============================================================ */
[role='dialog'].animate-popover > div.sticky.top-0 {
  display: none !important;
}

/* ============================================================
   §21 【P2f/车队】侧边栏「车队ID」标签（对标 aishare，无到期无切换）
   注入位置：aside nav 内「新聊天/更多」组之后；明暗主题自适应。
   ============================================================ */
aside nav .lc-fleet-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 8px 2px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(127, 127, 127, 0.12) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  user-select: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
aside nav .lc-fleet-badge .lc-fleet-ico {
  font-size: 13px !important;
  line-height: 1 !important;
}
aside nav .lc-fleet-badge .lc-fleet-txt {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ============================================================
   §22 【P2g/车队】品牌中转页（对标 ShareAI 导航页）：跳转过渡时
   全屏浅色覆盖 + 进度条 + 步骤点亮，替代生硬白屏/黑屏。
   ============================================================ */
.lc-relay {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 2147483647 !important;
  background: #f6f7f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important;
}
.lc-relay-box { text-align: center; width: 340px; max-width: 88vw; }
.lc-relay-logo { font-size: 22px; font-weight: 700; color: #10a37f; margin-bottom: 4px; }
.lc-relay-title { font-size: 18px; font-weight: 600; color: #1f2329; margin-bottom: 6px; }
.lc-relay-sub { font-size: 13px; color: #8a919f; margin-bottom: 22px; }
.lc-relay-bar { height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.lc-relay-bar i { display: block; height: 100%; width: 0; background: #10a37f; border-radius: 99px; transition: width .25s ease; }
.lc-relay-steps { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #c0c5cd; }
.lc-relay-steps span { transition: color .2s; }
.lc-relay-steps span.on { color: #10a37f; font-weight: 600; }