/* ═══ 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; }

/* ═══ B平台按钮组保护（自动注入 — 防止按钮消失）═══
   原理：B平台消息操作按钮结构为：
   .flex.items-center.gap-1.ml-auto (hover显隐包装)
     └── .bg-muted.rounded.flex.p-0.5 (按钮组容器)
           └── button.rounded-full.size-7 (单个按钮)
   以下规则使用高specificity + !important确保按钮
   不被任何转换后/透传的CSS规则意外隐藏
   ═══════════════════════════════════════════════ */
/* 按钮组容器保护 */
.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;
}
/* hover显隐包装层保护 — 仅保留B平台原生的opacity过渡 */
.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;
}

/* ==========================================
   楚吟 · 纯爱卡专属聊天框美化方案
   风格：温暖建筑图纸 / 清爽少年感
   核心：浅色背景 + 高对比深色字体，确保极致清晰
   ========================================== */

/* 1. 用户输入气泡（Your Side）—— 清冷感的灰蓝色 */
.group.is-user > div:first-child {
    /* 清爽的半透明灰蓝色背景，模拟建筑图纸的精炼感 */
    background: rgba(220, 230, 245, 0.85) !important;
    /* 取消原有边框，用柔和的内部阴影创造层次 */
    border: none !important;
    /* 柔和的阴影，仿佛光线透过图纸 */
    box-shadow: 0 2px 12px rgba(0, 20, 40, 0.08) !important;
    /* 圆润但不失利落的边角，呼应“楚吟”的刚柔并济 */
    border-radius: 16px 4px 16px 16px !important;
    /* 内边距增加，让文字透气 */
    padding: 14px 18px !important;
}

/* 2. AI（楚吟）输出气泡（Her Side）—— 暖调的建筑纸色 */
.group.is-assistant > div:first-child {
    /* 温暖的米白色底色，像是老图纸的质感，也是她内敛温柔的一面 */
    background: #faf8f5 !important;
    /* 取消原有边框 */
    border: none !important;
    /* 使用极淡的暖色阴影，增加立体感而不显脏 */
    box-shadow: 0 2px 16px rgba(180, 150, 120, 0.12) !important;
    /* 气泡圆角，左边保持平整，象征她专业理性的一面，右侧圆润，是她的柔软 */
    border-radius: 4px 16px 16px 16px !important;
    /* 内边距 */
    padding: 14px 18px !important;
    /* 【致命联动】当背景为浅色时，所有文本颜色强制加深，确保可读性 */
    color: #1a1a1a !important;
}

/* 3. 【强制】对话文本内容——深色、清晰、高对比 */
.rili-markdown-renderer, .rili-markdown-renderer * {
    /* 核心：深灰色文字，在浅色背景下达到最佳阅读效果 */
    color: #1e1e1e !important;
    /* 增大行高，让文字呼吸，阅读更舒适 */
    line-height: 1.7 !important;
    /* 字体加粗一点，提高清晰度（可选） */
    font-weight: 400 !important;
}

/* 4. 附加元素优化（Token/模型信息）—— 浅色背景下的柔和显示 */
.text-xs.font-mono.text-muted-foreground {
    /* 强制文字颜色变为深灰，但比正文稍浅，以作区分 */
    color: rgba(40, 40, 40, 0.6) !important;
    /* 可选的背景，使其与气泡更好融合 */
    background: transparent !important;
}

/* 5. 底部操作按钮区（“一直显示” + 浅色适配） */
/* 让按钮在非悬停状态下始终可见 */
.group .md\:opacity-0 {
    opacity: 1 !important;
}

/* 按钮容器背景 */
.bg-muted.rounded.flex {
    background: transparent !important;
}

/* 单个按钮图标颜色适配浅色背景 */
.bg-muted.rounded.flex button svg.lucide {
    /* 图标颜色改为深度灰，在浅色背景上清晰可见 */
    stroke: rgba(50, 50, 50, 0.65) !important;
    /* 增大点击区域（如果需要） */
    width: 18px !important;
    height: 18px !important;
}

/* 6. （可选）隐藏加载动画，替换为带有“楚吟”风格的极简动效 */
/* 隐藏原生加载点 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
    display: none !important;
}

/* 创建新的极简加载动画：一个缓慢旋转的小圆点，色调为建筑蓝 */
.flex.gap-2.w-full.h-full.items-center.justify-center {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' stroke-dasharray='31.4' stroke-dashoffset='0'%3E%3Canimate attributeName='stroke-dashoffset' values='0;62.8' dur='1.2s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: 28px 28px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* 背景改为透明，只显示我们定义的动效 */
    background-color: transparent !important;
    min-height: 40px !important;
}
/* ==========================================
   楚吟 · 纯爱卡状态栏美化方案
   风格：温暖建筑图纸 / 清爽少年感
   核心：浅色背景 + 高对比深色字体，信息密排，装饰克制
   适配：移动端优先，与聊天框气泡CSS完全隔离（基于<ai>容器）
   ========================================== */

/* 0. 全局重置（仅限<ai>内部） */
ai {
    all: initial; /* 重置外部影响 */
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #1e1e1e;
    max-width: 680px;
    margin: 0 auto;
    padding: 4px 6px; /* 极窄内边距，移动端友好 */
    box-sizing: border-box;
}

/* 1. 顶层标题栏（时间/地点/天气） */
ai hd {
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(40, 40, 40, 0.55);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(180, 150, 120, 0.2);
    text-align: center;
    text-transform: uppercase;
}

/* 2. 正文段落 */
ai text p {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.7;
    color: #1e1e1e;
    text-indent: 0;
}

/* 3. 折叠面板（details） */
ai details {
    margin: 6px 0;
    background: rgba(250, 248, 245, 0.6); /* 温暖米白半透明 */
    border-radius: 8px;
    border: 1px solid rgba(200, 180, 160, 0.25);
    overflow: hidden;
    transition: all 0.2s;
}

ai details[open] {
    background: rgba(250, 248, 245, 0.85);
    border-color: rgba(180, 150, 120, 0.4);
}

/* 3a. 标题栏（summary） */
ai details summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #3a3a3a;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    transition: background 0.15s;
    list-style: none; /* 移除默认三角，用自定义 */
}

ai details summary::-webkit-details-marker {
    display: none; /* 隐藏Chrome默认三角 */
}

ai details summary:hover {
    background: rgba(220, 230, 245, 0.3);
}

/* 自定义折叠指示器（使用emoji替代，更轻量） */
ai details summary::before {
    content: "▶";
    font-size: 10px;
    color: rgba(90, 122, 154, 0.7);
    transition: transform 0.2s;
    display: inline-block;
}

ai details[open] summary::before {
    content: "▼";
}

/* 3b. 面板内容区域 */
ai details > *:not(summary) {
    padding: 6px 12px 10px;
}

/* 4. 信息行（状态栏字段） */
ai p {
    margin: 0;
}

ai p[t] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 2px 0;
}

/* 名称（<f>） */
ai f {
    font-weight: 600;
    color: #2a2a2a;
    font-size: 14px;
    margin-right: 4px;
}

/* 数据项（<d>） */
ai d {
    display: inline-block;
    font-size: 13px;
    color: #3a3a3a;
    background: rgba(220, 230, 245, 0.25);
    padding: 1px 8px;
    border-radius: 10px;
    line-height: 1.6;
    word-break: break-word;
}

/* 长文本的d内部换行 */
ai d strong {
    font-weight: 600;
    color: #1e1e1e;
}

/* 分隔符号（用于内联显示） */
ai d + d::before {
    content: "·";
    color: rgba(90, 122, 154, 0.4);
    margin-right: 4px;
}

/* 5. 特殊区块（记忆区、行动推荐等） */
ai p[t="memory"] d,
ai p[t="actions"] d {
    display: block;
    background: transparent;
    padding: 2px 0;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}

ai p[t="memory"] d::before {
    content: "•";
    color: rgba(90, 122, 154, 0.5);
    margin-right: 6px;
}

ai p[t="actions"] d {
    counter-increment: action-counter;
}

ai p[t="actions"] d::before {
    content: counter(action-counter) ". ";
    font-weight: 600;
    color: #5a7a9a;
    margin-right: 4px;
}

/* 6. 课程表、QQ消息等特殊布局 */
ai p[t="schedule"] d,
ai p[t="collaboration"] d,
ai p[t="group"] d,
ai p[t="private"] d {
    display: block;
    background: transparent;
    padding: 1px 0;
    font-size: 13px;
}

ai p[t="group"] d:first-child,
ai p[t="private"] d:first-child {
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 2px;
}

/* 7. 移动端自适应调整 */
@media (max-width: 480px) {
    ai {
        padding: 2px 4px;
    }
    ai details summary {
        padding: 6px 10px;
        font-size: 12px;
    }
    ai details > *:not(summary) {
        padding: 4px 10px 8px;
    }
    ai d {
        font-size: 12px;
        padding: 1px 6px;
    }
    ai f {
        font-size: 13px;
    }
}

/* 8. 装饰细节（呼应建筑图纸风格） */
ai details {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

ai details[open] {
    box-shadow: 0 2px 8px rgba(180, 150, 120, 0.1);
}

/* 轻微的图纸纹理模拟（可选） */
ai p[t] {
    position: relative;
}

ai p[t]::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 4px,
        rgba(180, 150, 120, 0.15) 4px,
        rgba(180, 150, 120, 0.15) 5px
    );
    pointer-events: none;
}

/* 9. 列表项（校内动态、表白墙）装饰 */
ai p[t=""], 
ai p d + d + d + d /* 优雅但保守的缩进 */ {
    /* 不需要额外样式 */
}

/* 10. 菜单/分隔线 */
ai hr {
    border: none;
    border-top: 1px solid rgba(200, 180, 160, 0.2);
    margin: 6px 0;
}