/*
 * =============================================================
 *   家宅迷影 — 聊天界面主题 · 臻藏版
 *   色板: 深靛蓝 / 暖杏灰 / 檀木棕·勃艮第酒红 / 象牙白·旧纸黄
 *   字体: Inter / Noto Serif SC / ZCOOL XiaoWei / Caveat
 *   设计语言: 东方含蓄 × 现代克制 — 温润、深邃、留白
 * =============================================================
 */

/* ═══════════════════════════════════════════════════════════
   B平台兼容层 — 表格 / 按钮组 / 分页控件 保护性重置
   ═══════════════════════════════════════════════════════════ */
.rili-markdown-renderer table {
  display: table !important;
  table-layout: auto !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
.rili-markdown-renderer table caption {
  display: table-caption !important;
  caption-side: top !important;
  text-align: center !important;
  padding: 8px !important;
}
.rili-markdown-renderer thead { display: table-header-group !important; }
.rili-markdown-renderer tbody { display: table-row-group !important; }
.rili-markdown-renderer tr    { display: table-row !important; }
.rili-markdown-renderer th,
.rili-markdown-renderer td    { display: table-cell !important; }

/* 按钮组容器保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5,
.is-user .bg-muted.rounded.flex.p-0\.5,
.is-assistant .bg-muted.rounded.flex.p-0\.5 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5 > button,
.is-user .bg-muted.rounded.flex.p-0\.5 > button,
.is-assistant .bg-muted.rounded.flex.p-0\.5 > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  clip: auto !important;
  clip-path: none !important;
}
.flex.items-center.gap-1.ml-auto.md\:opacity-0.group-hover\:opacity-100 {
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
.flex.w-full.items-center.justify-between.gap-2.px-2 {
  display: flex !important;
  visibility: visible !important;
  overflow: visible !important;
}
header.flex.justify-between {
  position: relative;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════
   根变量 — 色板 · 字体 · 阴影 · 缓动 · 纹理
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 主色板 */
  --theme-deep-blue:     #1e2d3d;
  --theme-slate-blue:    #2c3f56;
  --theme-warm-taupe:    #c8c3b8;
  --theme-sand:          #e8e3d6;
  --theme-teak:          #9b8465;
  --theme-dark-teak:     #6b5a45;
  --theme-burgundy:      #5c1f2a;
  --theme-deep-burgundy: #3d121a;
  --theme-ivory:         #faf7f0;
  --theme-cream-warm:    #f3ede2;
  --theme-parchment:     #e8ddc4;
  --theme-olive-moss:    #495a47;
  --theme-dusty-mauve:   #9b7fa8;
  --theme-slate-mauve:   #7d6692;
  --theme-pure-white:    #ffffff;
  --theme-ink:           #2c2416;
  --theme-soft-ink:      #5c5446;

  /* 功能色 */
  --theme-success:       #4a7c59;
  --theme-warning:       #c4944a;
  --theme-danger:        #b33a3a;

  /* 字体栈 */
  --font-display:  'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  --font-body:     'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
                   'Helvetica Neue', sans-serif;
  --font-reading:  'Noto Serif SC', 'Source Han Serif SC', Georgia,
                   'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                   'SF Mono', Consolas, monospace;
  --font-hand:     'Caveat', 'Ma Shan Zheng', cursive;

  /* 阴影层级 */
  --shadow-xs:       0 1px 2px rgba(44, 36, 22, .04);
  --shadow-sm:       0 2px 4px rgba(44, 36, 22, .06),
                     0 1px 2px rgba(44, 36, 22, .04);
  --shadow-md:       0 4px 12px rgba(44, 36, 22, .08),
                     0 2px 4px rgba(44, 36, 22, .04);
  --shadow-lg:       0 12px 28px rgba(44, 36, 22, .10),
                     0 4px 8px rgba(44, 36, 22, .05);
  --shadow-xl:       0 20px 48px rgba(44, 36, 22, .14),
                     0 8px 16px rgba(44, 36, 22, .06);
  --shadow-inner:    inset 0 2px 4px rgba(44, 36, 22, .06);
  --shadow-glow-wine: 0 0 0 3px rgba(92, 31, 42, .12),
                      0 0 20px rgba(92, 31, 42, .06);

  /* 缓动曲线 */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-bounce:   cubic-bezier(.34, 1.8, .64, 1);
  --ease-smooth:   cubic-bezier(.4, 0, .2, 1);

  /* 圆角体系 */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;
}

/* ═══════════════════════════════════════════════════════════
   顶部导航栏 — 深邃靛蓝 × 酒红底线 × 微光渐变
   ═══════════════════════════════════════════════════════════ */
header.flex.justify-between {
  background:
    linear-gradient(
      175deg,
      var(--theme-deep-blue) 0%,
      #243548 40%,
      var(--theme-slate-blue) 100%
    ) !important;
  border-bottom: 2px solid var(--theme-burgundy) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .18),
    0 1px 0 rgba(255, 255, 255, .04) inset !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: visible;
  z-index: 50;
}

/* 顶部栏微光纹理覆盖 */
header.flex.justify-between::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 1px at 50% 100%,
      rgba(232, 227, 214, .15),
      transparent
    );
  pointer-events: none;
}

/* 顶部栏文字与图标 */
header.flex.justify-between.w-full.top-0 .truncate,
header.flex.justify-between.w-full.top-0 button svg,
header.flex.justify-between.w-full.top-0 svg[class*="lucide"],
#nav-middle button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left,
#nav-middle .shrink-0.flex.items-center svg,
#nav-right button,
#nav-right button svg {
  color: var(--theme-ivory) !important;
  fill: var(--theme-ivory) !important;
  stroke: var(--theme-ivory) !important;
  font-family: var(--font-body) !important;
  letter-spacing: .01em;
  transition: color .25s var(--ease-out),
              opacity .25s var(--ease-out);
}

/* 顶部栏按钮悬停 */
#nav-right button:hover svg {
  color: var(--theme-parchment) !important;
  fill: var(--theme-parchment) !important;
  stroke: var(--theme-parchment) !important;
  filter: drop-shadow(0 0 6px rgba(232, 221, 196, .3));
}

/* 顶部栏标题文字特殊处理 */
header.flex.justify-between.w-full.top-0 .truncate {
  font-family: var(--font-display) !important;
  font-size: 1.05em !important;
  letter-spacing: .03em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* 历史未读角标 — 脉搏动画 */
header.flex.justify-between.w-full.top-0 span.MuiBadge-dot {
  background-color: var(--theme-burgundy) !important;
  box-shadow:
    0 0 0 2px var(--theme-deep-blue),
    0 0 8px rgba(92, 31, 42, .5) !important;
  animation: badgePulse 2s var(--ease-in-out) infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--theme-deep-blue), 0 0 8px rgba(92, 31, 42, .5); }
  50%      { box-shadow: 0 0 0 2px var(--theme-deep-blue), 0 0 16px rgba(92, 31, 42, .7); }
}

/* ═══════════════════════════════════════════════════════════
   底部输入栏 — 暖沙色底 · 悬浮白卡片 · 诗意占位符
   ═══════════════════════════════════════════════════════════ */
#ai-chat-bottom-input {
  background:
    linear-gradient(
      0deg,
      var(--theme-sand) 0%,
      var(--theme-warm-taupe) 100%
    ) !important;
  border-top: 1px solid rgba(155, 132, 101, .18) !important;
  box-shadow: 0 -2px 12px rgba(44, 36, 22, .06) !important;
  padding: 14px 16px !important;
  position: relative;
}

/* 底部栏微光 */
#ai-chat-bottom-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(155, 132, 101, .25),
    transparent
  );
  pointer-events: none;
}

#ai-chat-input {
  background-color: var(--theme-pure-white) !important;
  border: 1.5px solid rgba(155, 132, 101, .3) !important;
  color: var(--theme-ink) !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 16px !important;
  transition:
    border-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out),
    background-color .3s var(--ease-out),
    transform .2s var(--ease-out);
}

#ai-chat-input::placeholder {
  color: rgba(107, 90, 69, .42) !important;
  font-style: italic;
  font-family: var(--font-reading) !important;
  font-size: .95em;
  letter-spacing: .02em;
}

#ai-chat-input:hover {
  border-color: rgba(155, 132, 101, .5) !important;
  box-shadow: var(--shadow-sm) !important;
}

#ai-chat-input:focus {
  outline: none;
  border-color: var(--theme-burgundy) !important;
  box-shadow: var(--shadow-glow-wine) !important;
  background-color: #fdfcf7 !important;
  transform: translateY(-1px);
}

#ai-chat-input::selection {
  background-color: rgba(92, 31, 42, .18) !important;
  color: var(--theme-deep-burgundy) !important;
}

/* ═══════════════════════════════════════════════════════════
   底部按钮栏 — 檀木主按钮 · 诗意悬浮 · 弹簧动效
   ═══════════════════════════════════════════════════════════ */
#ai-mod-button2 button.MuiButton-root {
  background:
    linear-gradient(
      135deg,
      var(--theme-teak) 0%,
      var(--theme-dark-teak) 100%
    ) !important;
  color: var(--theme-ivory) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  border-radius: var(--radius-md) !important;
  padding: 9px 20px !important;
  min-width: 84px !important;
  border: none !important;
  box-shadow:
    var(--shadow-sm),
    0 1px 0 rgba(255, 255, 255, .08) inset !important;
  transition:
    all .25s var(--ease-out),
    transform .35s var(--ease-spring);
  position: relative;
  overflow: hidden;
}

/* 按钮光泽扫过 */
#ai-mod-button2 button.MuiButton-root::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .08),
    transparent
  );
  transition: left .6s var(--ease-out);
}

#ai-mod-button2 button.MuiButton-root:hover::after,
#ai-mod-button2 button.MuiButton-root:focus-visible::after {
  left: 100%;
}

#ai-mod-button2 button.MuiButton-root svg {
  fill: var(--theme-ivory) !important;
  stroke: var(--theme-ivory) !important;
  transition: transform .35s var(--ease-spring);
}

#ai-mod-button2 button.MuiButton-root:hover,
#ai-mod-button2 button.MuiButton-root:focus-visible,
#ai-mod-button2 button.MuiButton-root.Mui-selected {
  background:
    linear-gradient(
      135deg,
      var(--theme-burgundy) 0%,
      var(--theme-deep-burgundy) 100%
    ) !important;
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-lg),
    0 1px 0 rgba(255, 255, 255, .06) inset !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
  transform: scale(1.08);
}

#ai-mod-button2 button.MuiButton-root:active {
  transform: translateY(0) scale(.98);
  box-shadow: var(--shadow-sm) !important;
  transition: all .1s var(--ease-out);
}

/* 辅助轮廓按钮 */
button.MuiButton-outlinedPrimary {
  background: transparent !important;
  border: 1.5px solid rgba(155, 132, 101, .35) !important;
  color: var(--theme-dark-teak) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 16px !important;
  transition:
    all .25s var(--ease-out),
    transform .3s var(--ease-spring);
  backdrop-filter: blur(4px);
}

button.MuiButton-outlinedPrimary:hover {
  background: rgba(155, 132, 101, .07) !important;
  color: var(--theme-burgundy) !important;
  border-color: var(--theme-burgundy) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════
   分页控件 — 温润瓷片质感 · 弹性缩放 · 涟漪扩散
   ═══════════════════════════════════════════════════════════ */
.MuiPaginationItem-root {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  color: var(--theme-ivory) !important;
  background:
    linear-gradient(
      135deg,
      var(--theme-teak) 0%,
      var(--theme-dark-teak) 100%
    ) !important;
  border-radius: var(--radius-sm) !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 3px !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  transition:
    all .25s var(--ease-out),
    transform .35s var(--ease-spring);
}

.MuiPaginationItem-root.Mui-selected {
  background:
    linear-gradient(
      135deg,
      var(--theme-burgundy) 0%,
      var(--theme-deep-burgundy) 100%
    ) !important;
  font-weight: 700 !important;
  box-shadow:
    var(--shadow-md),
    0 0 0 2px rgba(92, 31, 42, .2) !important;
  transform: scale(1.08);
}

.MuiPaginationItem-root:hover:not(.Mui-selected):not(.Mui-disabled) {
  background:
    linear-gradient(
      135deg,
      var(--theme-dusty-mauve) 0%,
      var(--theme-slate-mauve) 100%
    ) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.MuiPaginationItem-root.Mui-disabled {
  background: rgba(155, 132, 101, .2) !important;
  color: rgba(250, 247, 240, .35) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.MuiPaginationItem-ellipsis {
  color: var(--theme-warm-taupe) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.MuiPaginationItem-icon {
  fill: var(--theme-ivory) !important;
  stroke: var(--theme-ivory) !important;
}

/* 跳转输入 */
.flex.w-full.items-center.justify-between.gap-2.px-2.css-1uwir8f .MuiBox-root {
  color: var(--theme-dark-teak) !important;
  font-family: var(--font-body) !important;
  font-size: .9em !important;
}

.flex.w-full.items-center.justify-between.gap-2.px-2.css-1uwir8f .MuiInputBase-input {
  background: var(--theme-pure-white) !important;
  border: 1.5px solid rgba(155, 132, 101, .3) !important;
  color: var(--theme-ink) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  transition: border-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}

.flex.w-full.items-center.justify-between.gap-2.px-2.css-1uwir8f .MuiInputBase-input:focus {
  border-color: var(--theme-burgundy) !important;
  box-shadow: 0 0 0 3px rgba(92, 31, 42, .10) !important;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════
   聊天气泡 — 旧纸质感 · 微阴影层叠 · 诗意留白
   ═══════════════════════════════════════════════════════════ */

/* === 助手气泡 (我的输出) — 旧羊皮纸色泽 === */
.is-assistant > .border.border-muted {
  background:
    linear-gradient(
      160deg,
      var(--theme-parchment) 0%,
      #ece0c6 40%,
      var(--theme-parchment) 100%
    ) !important;
  border: 1px solid rgba(155, 132, 101, .12) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow:
    var(--shadow-md),
    0 1px 0 rgba(255, 255, 255, .4) inset !important;
  padding: 20px 22px !important;
  transition:
    box-shadow .4s var(--ease-out),
    transform .35s var(--ease-spring);
  position: relative;
}

/* 气泡顶部微光 */
.is-assistant > .border.border-muted::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, .5),
    transparent
  );
  pointer-events: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.is-assistant > .border.border-muted:hover {
  box-shadow:
    var(--shadow-lg),
    0 1px 0 rgba(255, 255, 255, .4) inset !important;
  transform: translateY(-1px);
}

/* === 用户气泡 (对方输入) — 纯白瓷器质感 === */
.is-user > .border.border-muted {
  background:
    linear-gradient(
      170deg,
      var(--theme-pure-white) 0%,
      #fdfcf9 100%
    ) !important;
  border: 1px solid rgba(155, 132, 101, .10) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow:
    var(--shadow-sm),
    0 1px 0 rgba(255, 255, 255, .6) inset !important;
  padding: 20px 22px !important;
  transition:
    box-shadow .4s var(--ease-out),
    transform .35s var(--ease-spring);
}

.is-user > .border.border-muted:hover {
  box-shadow:
    var(--shadow-md),
    0 1px 0 rgba(255, 255, 255, .6) inset !important;
  transform: translateY(-1px);
}

/* === 气泡内排版 — 正文气质 === */
.is-assistant .rili-markdown-renderer,
.is-user > .border.border-muted,
.is-assistant > .border.border-muted .rili-markdown-renderer {
  color: var(--theme-ink) !important;
  font-family: var(--font-reading) !important;
  line-height: 1.8 !important;
  font-size: 15px !important;
  letter-spacing: .01em !important;
  word-spacing: .03em !important;
}

/* === 标题 — 靛蓝 · 衬线 · 下划装饰 === */
.rili-markdown-renderer h1,
.rili-markdown-renderer h2,
.rili-markdown-renderer h3,
.rili-markdown-renderer h4 {
  color: var(--theme-deep-blue) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  border-bottom: 1px solid rgba(155, 132, 101, .18);
  padding-bottom: 8px;
  margin-top: 1.4em;
  margin-bottom: .7em;
  position: relative;
}

/* 标题微装饰点 */
.rili-markdown-renderer h2::after,
.rili-markdown-renderer h3::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2em;
  height: 2px;
  background: var(--theme-burgundy);
  border-radius: 1px;
}

.rili-markdown-renderer h1 { font-size: 1.55em; }
.rili-markdown-renderer h2 { font-size: 1.32em; }
.rili-markdown-renderer h3 { font-size: 1.15em; }

/* === 链接 — 酒红 · 渐变下划线 · 微动效 === */
.rili-markdown-renderer a {
  color: var(--theme-burgundy) !important;
  text-decoration: none;
  background:
    linear-gradient(
      to right,
      rgba(155, 132, 101, .3),
      rgba(155, 132, 101, .3)
    );
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition:
    background-size .3s var(--ease-out),
    color .3s var(--ease-out);
}

.rili-markdown-renderer a:hover {
  color: var(--theme-slate-mauve) !important;
  background-size: 100% 2px;
}

/* === 行内代码 — 暖调衬底 === */
.rili-markdown-renderer code {
  background: rgba(155, 132, 101, .10);
  color: var(--theme-burgundy);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: .88em;
  letter-spacing: 0;
  word-spacing: 0;
}

/* === 代码块 — 深色石板 · 左侧色带 === */
.rili-markdown-renderer pre {
  background: #1a2332;
  color: #d6deeb;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 14px 0;
  box-shadow:
    var(--shadow-inner),
    0 0 0 1px rgba(255, 255, 255, .04);
  font-family: var(--font-mono);
  font-size: .88em;
  line-height: 1.65;
  position: relative;
}

.rili-markdown-renderer pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--theme-burgundy),
    var(--theme-dusty-mauve)
  );
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.rili-markdown-renderer pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* === 引用块 — 檀木竖线 · 暖底 · 装饰引号 === */
.rili-markdown-renderer blockquote {
  border-left: 3px solid var(--theme-teak);
  margin: 14px 0;
  padding: 12px 18px;
  background:
    linear-gradient(
      90deg,
      rgba(155, 132, 101, .06) 0%,
      rgba(155, 132, 101, .02) 100%
    );
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--theme-soft-ink);
  font-style: italic;
  font-family: var(--font-reading);
  position: relative;
}

.rili-markdown-renderer blockquote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 10px;
  font-family: var(--font-display);
  font-size: 2em;
  color: rgba(155, 132, 101, .15);
  line-height: 1;
  pointer-events: none;
}

/* === 表格 — 檀木表头 · 斑马纹 · 悬浮高亮 === */
.rili-markdown-renderer table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: .9em;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.rili-markdown-renderer thead {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.rili-markdown-renderer th {
  background:
    linear-gradient(
      180deg,
      var(--theme-teak) 0%,
      var(--theme-dark-teak) 100%
    );
  color: var(--theme-ivory);
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92em;
  letter-spacing: .03em;
}

.rili-markdown-renderer td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(155, 132, 101, .12);
  font-family: var(--font-reading);
  transition: background .2s var(--ease-out);
}

.rili-markdown-renderer tbody tr:nth-child(even) td {
  background: rgba(155, 132, 101, .03);
}

.rili-markdown-renderer tbody tr:hover td {
  background: rgba(155, 132, 101, .07);
}

/* === 分割线 — 诗意渐变 · 菱形装饰 === */
.rili-markdown-renderer hr {
  border: none;
  height: 1px;
  background:
    linear-gradient(
      to right,
      transparent 5%,
      rgba(155, 132, 101, .2) 20%,
      var(--theme-teak) 50%,
      rgba(155, 132, 101, .2) 80%,
      transparent 95%
    );
  margin: 24px 0;
  position: relative;
}

.rili-markdown-renderer hr::after {
  content: '\25C6';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6px;
  color: var(--theme-teak);
  background: var(--theme-parchment);
  padding: 0 8px;
}

/* === 无序列表 — 圆点标记 · 悬浮变色 === */
.rili-markdown-renderer ul {
  list-style: none;
  padding-left: 1.2em;
}

.rili-markdown-renderer ul li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-teak);
  margin-right: 10px;
  margin-left: -1.2em;
  vertical-align: middle;
  transition: transform .25s var(--ease-spring),
              background .25s var(--ease-out);
}

.rili-markdown-renderer ul li:hover::before {
  transform: scale(1.6);
  background: var(--theme-burgundy);
}

/* === 有序列表 — 数字圆标 === */
.rili-markdown-renderer ol {
  padding-left: 1.5em;
  counter-reset: ol-counter;
}

.rili-markdown-renderer ol li {
  counter-increment: ol-counter;
  list-style: none;
}

.rili-markdown-renderer ol li::before {
  content: counter(ol-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--theme-teak);
  color: var(--theme-ivory);
  font-family: var(--font-body);
  font-size: .7em;
  font-weight: 600;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: -1.6em;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   details / summary — 折叠面板 · 瓷器开合 · 东方气韵
   ═══════════════════════════════════════════════════════════ */
.rili-markdown-renderer details {
  margin: 16px 0;
  border: 1px solid rgba(155, 132, 101, .22);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--theme-pure-white);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow .35s var(--ease-out),
    border-color .35s var(--ease-out);
}

.rili-markdown-renderer details:hover {
  border-color: var(--theme-teak);
  box-shadow: var(--shadow-md);
}

.rili-markdown-renderer details[open] {
  border-color: var(--theme-burgundy);
  box-shadow:
    0 0 0 3px rgba(92, 31, 42, .06),
    var(--shadow-md);
}

.rili-markdown-renderer summary {
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95em;
  letter-spacing: .03em;
  color: var(--theme-deep-blue);
  background:
    linear-gradient(
      135deg,
      rgba(243, 237, 226, .7) 0%,
      rgba(232, 221, 196, .25) 100%
    );
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    background .3s var(--ease-out),
    color .3s var(--ease-out),
    padding-left .3s var(--ease-out);
}

.rili-markdown-renderer summary::-webkit-details-marker { display: none; }

/* 东方折扇式展开箭头 */
.rili-markdown-renderer summary::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: currentColor;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='8 6 14 12 8 18'/></svg>");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='8 6 14 12 8 18'/></svg>");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  transition: transform .4s var(--ease-spring);
  opacity: .7;
}

.rili-markdown-renderer details[open] > summary::before {
  transform: rotate(90deg);
  opacity: 1;
}

.rili-markdown-renderer summary:hover {
  background:
    linear-gradient(
      135deg,
      rgba(232, 221, 196, .45) 0%,
      rgba(155, 132, 101, .08) 100%
    );
  color: var(--theme-burgundy);
  padding-left: 22px;
}

.rili-markdown-renderer summary:focus-visible {
  outline: 2px solid var(--theme-burgundy);
  outline-offset: -2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* 折叠面板内容区 — 柔滑展开动画 */
.rili-markdown-renderer details > :not(summary) {
  padding: 16px 18px;
  margin: 0;
  animation: detailsReveal .4s var(--ease-out);
}

@keyframes detailsReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 嵌套 details */
.rili-markdown-renderer details details {
  margin: 10px 0;
  border-radius: var(--radius-sm);
  border-color: rgba(155, 132, 101, .14);
  box-shadow: none;
}

.rili-markdown-renderer details details summary {
  padding: 10px 14px;
  font-size: .88em;
  border-radius: 0;
  background: rgba(155, 132, 101, .04);
}

/* 助手气泡内 details 适配 */
.is-assistant .rili-markdown-renderer details {
  background: rgba(255, 255, 255, .5);
  border-color: rgba(155, 132, 101, .3);
}

.is-assistant .rili-markdown-renderer summary {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .45) 0%,
      rgba(232, 221, 196, .3) 100%
    );
}

/* ═══════════════════════════════════════════════════════════
   评论区 — 温润卡片 · 象牙底色 · 层次分明
   ═══════════════════════════════════════════════════════════ */

/* 主容器 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background-color: var(--theme-ivory) !important;
}

/* 标题 */
div.text-lg.font-bold {
  color: var(--theme-deep-blue) !important;
  font-family: var(--font-display) !important;
  letter-spacing: .04em !important;
}

/* 评分星星 — 酒红色泽 */
span.MuiRating-iconEmpty svg {
  fill: var(--theme-warm-taupe) !important;
  stroke: var(--theme-warm-taupe) !important;
  opacity: .5;
}

span.MuiRating-iconFilled svg {
  fill: var(--theme-burgundy) !important;
  stroke: var(--theme-burgundy) !important;
  filter: drop-shadow(0 0 3px rgba(92, 31, 42, .25));
}

/* 评论输入框 — 底线风格 */
textarea.rc-textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(155, 132, 101, .25) !important;
  color: var(--theme-ink) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  padding: 10px 2px !important;
  border-radius: 0 !important;
  resize: vertical !important;
  transition:
    border-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out),
    background .3s var(--ease-out);
}

textarea.rc-textarea::placeholder {
  color: rgba(107, 90, 69, .35) !important;
  font-style: italic;
}

textarea.rc-textarea:focus {
  border-bottom-color: var(--theme-burgundy) !important;
  box-shadow: 0 2px 0 0 var(--theme-burgundy) !important;
  outline: none;
  background: rgba(250, 247, 240, .5) !important;
}

/* 字数统计 */
div.bg-gray-100.text-gray-500 {
  background: rgba(155, 132, 101, .08) !important;
  color: var(--theme-soft-ink) !important;
  font-family: var(--font-body) !important;
  font-size: .82em !important;
  padding: 6px 12px !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  letter-spacing: .02em;
}

/* 发送按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
  background:
    linear-gradient(
      135deg,
      var(--theme-teak) 0%,
      var(--theme-dark-teak) 100%
    ) !important;
  color: var(--theme-ivory) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    all .25s var(--ease-out),
    transform .35s var(--ease-spring);
  position: relative;
  overflow: hidden;
}

div.cursor-pointer.group.flex.items-center.justify-center::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .08),
      transparent
    );
  transform: translateX(-100%);
  transition: transform .5s var(--ease-out);
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
  background:
    linear-gradient(
      135deg,
      var(--theme-burgundy) 0%,
      var(--theme-deep-burgundy) 100%
    ) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

div.cursor-pointer.group.flex.items-center.justify-center:hover::after {
  transform: translateX(100%);
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
  background:
    linear-gradient(
      135deg,
      var(--theme-burgundy) 0%,
      var(--theme-deep-burgundy) 100%
    ) !important;
  color: var(--theme-ivory) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    all .25s var(--ease-out),
    transform .3s var(--ease-spring);
}

button.MuiButton-containedPrimary:hover {
  background:
    linear-gradient(
      135deg,
      var(--theme-deep-blue) 0%,
      var(--theme-slate-blue) 100%
    ) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* 评论卡片 */
div.group.ml-0 {
  margin-bottom: 16px !important;
  padding: 16px 18px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    box-shadow .3s var(--ease-out),
    transform .3s var(--ease-spring);
  font-family: var(--font-body) !important;
}

div.group.ml-0:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* 自己的评论 — 旧纸色 */
div.group.ml-0:has(span.text-\[10px\]) {
  background:
    linear-gradient(
      160deg,
      var(--theme-parchment) 0%,
      #ece0c6 100%
    ) !important;
  color: var(--theme-ink) !important;
  border: 1px solid rgba(155, 132, 101, .1) !important;
}

/* 他人的评论 — 纯白 + 左侧檀木色带 */
div.group.ml-0:not(:has(span.text-\[10px\])) {
  background: var(--theme-pure-white) !important;
  color: var(--theme-ink) !important;
  border-left: 3px solid var(--theme-teak) !important;
  padding-left: 20px !important;
}

/* 嵌套回复缩进 */
div.ml-8.border-l {
  border-left: 2px solid rgba(155, 132, 101, .15) !important;
}

/* 用户名 */
div.text-sm.text-grey-600 span.font-bold {
  color: var(--theme-deep-blue) !important;
  font-family: var(--font-display) !important;
  letter-spacing: .03em !important;
}

/* "(你)" 标签 */
span.text-\[10px\] {
  color: var(--theme-burgundy) !important;
  font-weight: 600 !important;
  margin-left: 8px !important;
  background: rgba(92, 31, 42, .07);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: .05em;
}

/* 时间戳 */
div.text-xs.text-grey-600 {
  color: rgba(155, 132, 101, .5) !important;
  font-family: var(--font-body) !important;
  font-size: .78em !important;
  margin-top: 12px !important;
  letter-spacing: .02em;
}

/* 点赞按钮 */
button.text-gray-400 {
  color: var(--theme-teak) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 12px !important;
  transition: all .25s var(--ease-out);
  border: 1px solid transparent !important;
}

button.text-gray-400:hover {
  color: var(--theme-burgundy) !important;
  background: rgba(92, 31, 42, .06) !important;
  border-color: rgba(92, 31, 42, .12) !important;
}

button.text-gray-400 svg {
  fill: var(--theme-teak) !important;
  stroke: var(--theme-teak) !important;
  transition: transform .3s var(--ease-spring);
}

button.text-gray-400:hover svg {
  fill: var(--theme-burgundy) !important;
  stroke: var(--theme-burgundy) !important;
  transform: scale(1.15);
}

/* 回复链接 */
span.cursor-pointer {
  color: var(--theme-deep-blue) !important;
  font-family: var(--font-body) !important;
  font-size: .88em !important;
  margin-left: 16px !important;
  transition: color .25s var(--ease-out);
  position: relative;
}

span.cursor-pointer::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--theme-burgundy);
  transition: width .3s var(--ease-out);
}

span.cursor-pointer:hover {
  color: var(--theme-burgundy) !important;
}

span.cursor-pointer:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   全局微交互 · 滚动条 · 选中 · 无障碍 · 打印
   ═══════════════════════════════════════════════════════════ */

/* 滚动条 — 纤细檀木色 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(155, 132, 101, .25);
  border-radius: var(--radius-full);
  transition: background .3s var(--ease-out);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 132, 101, .45);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* 选中文字 */
::selection {
  background: rgba(92, 31, 42, .15);
  color: var(--theme-deep-burgundy);
}

/* 聚焦环全局 */
:focus-visible {
  outline: 2px solid var(--theme-burgundy);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 打印适配 */
@media print {
  header.flex.justify-between,
  #ai-chat-bottom-input {
    background: white !important;
    color: black !important;
  }
  .is-assistant > .border.border-muted,
  .is-user > .border.border-muted {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}