/* =====================================================================
   AI 问答面板（chat-embed.js）视觉增强
   挂件的样式是运行时注入的 <style>，晚于本文件加载，同特异性下它会
   赢，所以这里的覆盖统一加 !important。
   颜色全部复用挂件自己的主题变量（--p/--s/--side/--abg/--bd/--bd2/
   --ubg/--tx/--muted），light / dark 主题自动适配，无需硬编码。
   功能行为（ESC 关闭、输入内容保留）见 chat-enhance.js。
   ===================================================================== */

/* ---------- 打开动画：display 切换会重播 animation，正好实现淡入 ----------
   注意只动 opacity：面板自身带 transform: translateX(-50%) 水平居中，
   且支持全屏模式（transform 又不同），任何 transform 动画都会把
   这两种定位打断（面板会瞬移到左侧），所以不碰 transform。 */
@keyframes lce-panel-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lce-panel.open {
  animation: lce-panel-in 0.2s ease !important;
}

/* ---------- 侧栏背景：底部轻微渐变，替代一块死灰 ---------- */
.lce-sidebar {
  background: linear-gradient(180deg, var(--side) 72%, var(--abg)) !important;
}

/* ---------- 品牌徽标：主副色渐变 + 光影 ---------- */
.lce-brand-mark {
  background: linear-gradient(135deg, var(--p), var(--s)) !important;
  color: #fff !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 10px var(--ubg) !important;
}

/* ---------- 「＋ 新建会话」：主色渐变填充，一眼可点 ---------- */
.lce-side-head .lce-new {
  background: linear-gradient(135deg, var(--p), var(--s)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 12px var(--ubg) !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}

.lce-side-head .lce-new:hover {
  filter: brightness(1.12) !important;
  box-shadow: 0 3px 16px var(--ubg) !important;
}

.lce-side-head .lce-new:active {
  transform: scale(0.98) !important;
}

/* 底部「导出会话」保持低调：描边样式，悬停微亮 */
.lce-side-foot .lce-new {
  cursor: pointer !important;
  border: 1px solid var(--bd2) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.lce-side-foot .lce-new:hover {
  background: var(--abg) !important;
  border-color: var(--bd) !important;
}

/* ---------- 会话标题搜索框：圆角 + 聚焦高亮 ---------- */
.lce-side-filters input {
  background: var(--abg) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: 8px !important;
  color: var(--tx) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.lce-side-filters input:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px var(--ubg) !important;
  outline: none !important;
}

/* ---------- 会话列表项：hover 反馈 + 圆角 ---------- */
.lce-session {
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.lce-session:hover {
  background: var(--abg) !important;
}

/* ---------- 列表滚动条：细、圆角、半透明 ---------- */
.lce-list::-webkit-scrollbar,
.lce-sidebar::-webkit-scrollbar {
  width: 6px;
}

.lce-list::-webkit-scrollbar-thumb,
.lce-sidebar::-webkit-scrollbar-thumb {
  background: var(--bd2);
  border-radius: 3px;
}

.lce-list::-webkit-scrollbar-thumb:hover,
.lce-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--bd);
}

/* ---------- 底部设置折叠条：hover 反馈 ---------- */
details.lce-settings > summary {
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

details.lce-settings > summary:hover {
  background: var(--abg) !important;
}

/* ---------- 「添加图片」按钮：一眼可辨 ----------
   挂件原样是一个 38px 窄按钮 + emoji 🖼（Windows 下渲染得又小又灰），
   只有原生 title 提示，用户很难意识到那是传图入口。
   这里隐藏 emoji，用 SVG 图标 + 「图片」文字做成宽按钮，
   虚线边框暗示「添加」，悬停点亮。 */
.lce-icon-btn {
  width: auto !important;
  min-width: 38px;
  height: 38px;
  padding: 0 12px 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-size: 0 !important;               /* 隐藏 emoji 🖼 */
  border: 1px dashed var(--bd2) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--muted) !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* SVG 图标（image-plus：相框 + 山 + 加号），mask 上色随 currentColor */
.lce-icon-btn::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 19C13 19.7 13.13 20.37 13.35 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3H19C20.11 3 21 3.9 21 5V13.35C20.37 13.13 19.7 13 19 13V5H5V19H13M11.13 15.04L9 17.5L7.5 15.67L5 19H13.35C13.61 19.79 14.09 20.5 14.75 21H5L11.13 15.04M19 14V17H22V19H19V22H17V19H14V17H17V14H19Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 19C13 19.7 13.13 20.37 13.35 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3H19C20.11 3 21 3.9 21 5V13.35C20.37 13.13 19.7 13 19 13V5H5V19H13M11.13 15.04L9 17.5L7.5 15.67L5 19H13.35C13.61 19.79 14.09 20.5 14.75 21H5L11.13 15.04M19 14V17H22V19H19V22H17V19H14V17H17V14H19Z'/></svg>") center / contain no-repeat;
}

/* 文字标签 */
.lce-icon-btn::after {
  content: "图片";
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.lce-icon-btn:hover {
  border-color: var(--p) !important;
  border-style: solid !important;
  color: var(--p) !important;
  background: rgba(64, 81, 181, 0.06) !important;
}