/* 隐藏思维链，保持UI清爽 */
think { display: none; }

/* 基础容器字体与排版 */
ai { display: block; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #4a4a4a; line-height: 1.6; }

/* 顶部问候语：活泼可爱，增加微发光效果 */
.campus-greeting { color: #ff8fa3; font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(255,143,163,0.3); }

/* 顶部状态栏：增加底部加粗边框和内阴影，模拟实体亚克力板 */
hd { display: flex; flex-wrap: wrap; gap: 8px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); padding: 12px; border-radius: 12px; box-shadow: 0 4px 12px rgba(161,196,253,0.3), inset 0 2px 0 rgba(255,255,255,0.6); border-bottom: 3px solid #8cb4f5; margin-bottom: 15px; }
hd d { background: rgba(255, 255, 255, 0.75); padding: 4px 10px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: #3b5998; box-shadow: 0 2px 0 rgba(0,0,0,0.05); } 

/* 正文区域：微阴影白底，卡片质感强化 */
article { display: block; background: #ffffff; border: 1px solid #edf2f7; padding: 16px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.04), inset 0 2px 0 rgba(255,255,255,1); border-bottom: 2px solid #e2e8f0; margin-bottom: 15px; }

/* 对话与心理色彩标记 */
m_tlk { color: #4facfe; font-weight: 700; } 
f_tlk { color: #ff758c; font-weight: 700; } 
m_th { color: #8ba3c7; font-style: italic; } 
f_th { color: #d69db1; font-style: italic; } 

/* 底部状态栏容器 */
s-box { display: flex; flex-direction: column; gap: 12px; }

/* 折叠面板：厚重感与阴影 */
s-box details { background: #fcfcfd; border: 1px solid #e1e8ed; border-radius: 10px; overflow: hidden; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.03); border-bottom: 3px solid #d2dbe3; }
s-box summary { list-style: none; padding: 12px 15px; font-weight: bold; color: #5c6ac4; cursor: pointer; background: linear-gradient(to bottom, #ffffff, #f1f5f9); border-left: 6px solid #a1c4fd; text-shadow: 1px 1px 0 #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,1); user-select: none; }
s-box summary::-webkit-details-marker { display: none; }
s-box details[open] summary { border-left-color: #ff8fa3; background: linear-gradient(to bottom, #fff0f3, #ffe3e9); color: #d6336c; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 4px rgba(0,0,0,0.02); }

/* 内部分类块：凹陷容器质感 (内阴影) */
s-box p[t] { display: flex; flex-direction: column; gap: 8px; position: relative; margin: 24px 12px 14px 12px; padding: 18px 12px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.03); }
s-box p[t]::before { content: attr(t); position: absolute; top: -14px; left: 12px; background: #a1c4fd; color: white; padding: 3px 12px; font-size: 0.75rem; border-radius: 6px; font-weight: bold; letter-spacing: 1px; border: 1px solid #8caef2; box-shadow: 0 4px 6px rgba(161,196,253,0.4), inset 0 1px 0 rgba(255,255,255,0.4); text-shadow: 0 1px 1px rgba(0,0,0,0.2); }

/* Grid网格布局 */
s-box p[t="身体开发"], s-box p[t="生理状态"] { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
s-box p[t="身体开发"]::before, s-box p[t="生理状态"]::before { background: #ff8fa3; border-color: #f77087; box-shadow: 0 4px 6px rgba(255,143,163,0.4), inset 0 1px 0 rgba(255,255,255,0.4); }

/* ======== 最终排版核心魔法 ======== */

/* 1. 全局基础卡片样式：悬挂缩进（左右排布） */
s-box d { 
  background: #ffffff; padding: 8px 10px; font-size: 0.85rem; color: #475569; 
  border-radius: 8px; border: 1px solid #f1f5f9; border-bottom: 2px solid #e2e8f0; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
  display: flex; align-items: flex-start; justify-content: flex-start; 
  flex-wrap: nowrap; 
  gap: 6px; 
  word-break: break-word; 
}

/* 2. 确保前面加粗的标题（如：信息、选项序号、[X]）绝对不被压缩 */
s-box d b { 
  color: #334155; font-weight: 700; 
  flex-shrink: 0; 
}

/* 3. 例外处理：【仅】身体开发面板，强制标题与内容上下分行 */
s-box p[t="身体开发"] d { 
  flex-direction: column; 
  gap: 2px; 
}

/* 4. 流光渐变动效：马卡龙粉蓝交织 */
.magic-text {
  background: linear-gradient(90deg, #ff758c, #a1c4fd, #ff7eb3, #ff758c);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flowGlow 5s linear infinite;
  font-weight: 600;
  line-height: 1.4;
}
@keyframes flowGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* =========================================================
   【马卡龙手账风 - rili 全局 UI 覆写魔法】
   只针对输入框、顶部栏、功能按钮、页码等外部 UI，不碰聊天框
========================================================= */

/* 1. 顶部栏 (Header) - 亚克力手账封皮质感 */
header, .top-nav, .nav-bar, .app-header {
    background: linear-gradient(135deg, rgba(161,196,253,0.85) 0%, rgba(194,233,251,0.85) 100%) !important;
    backdrop-filter: blur(10px) !important; /* 磨砂玻璃效果 */
    border-bottom: 3px solid #8cb4f5 !important;
    box-shadow: 0 4px 15px rgba(161,196,253,0.3), inset 0 2px 0 rgba(255,255,255,0.8) !important;
    border-radius: 0 0 16px 16px !important; /* 底部圆角 */
}

/* 顶部栏里面的文字/标题颜色微调，保证可读性 */
header h1, header .title, .app-header div {
    color: #3b5998 !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8) !important;
}

/* 2. 底部输入栏 (Textarea / Input) - 纸张凹陷刻痕感 */
.chat-input-container textarea, .input-box, textarea, input[type="text"] {
    background-color: #f8fafc !important;
    border: none !important;
    border-radius: 12px !important;
    /* 核心魔法：内阴影营造物理凹陷感 */
    box-shadow: inset 4px 4px 8px rgba(161,196,253,0.25), inset -4px -4px 8px rgba(255,255,255,0.9) !important;
    color: #4a4a4a !important;
    transition: all 0.3s ease !important;
    padding: 12px !important;
}

/* 输入框聚焦时：边缘泛起初恋粉微光 */
.chat-input-container textarea:focus, textarea:focus, input[type="text"]:focus {
    outline: none !important;
    box-shadow: inset 4px 4px 8px rgba(161,196,253,0.15), inset -4px -4px 8px rgba(255,255,255,1), 0 0 0 2px rgba(255,143,163,0.4) !important;
}

/* 3. 底部功能键 (各类按钮：发送、Mod、流式等) - 橡皮擦凸起质感 */
button, .btn, .action-btn, .mod-btn, .tool-btn {
    background-color: #f1f5f9 !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px !important;
    color: #5c6ac4 !important;
    font-weight: 600 !important;
    /* 核心魔法：外阴影营造凸出的按键实体感 */
    box-shadow: 4px 4px 8px rgba(161,196,253,0.3), -4px -4px 8px rgba(255,255,255,1) !important;
    transition: all 0.2s ease !important;
    padding: 8px 16px !important;
}

/* 按钮悬浮时：悬浮便利贴效果 */
button:hover, .btn:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(to bottom, #ffffff, #f1f5f9) !important;
    box-shadow: 6px 6px 12px rgba(161,196,253,0.35), -6px -6px 12px rgba(255,255,255,1) !important;
    color: #ff8fa3 !important; /* 字体变粉 */
}

/* 按钮按下时：真实的物理按压塌陷感 */
button:active, .btn:active {
    transform: translateY(1px) !important;
    box-shadow: inset 3px 3px 6px rgba(161,196,253,0.3), inset -3px -3px 6px rgba(255,255,255,0.8) !important;
}

/* 针对核心按钮(比如发送/特定高亮键)加上流光特效 */
.btn-primary, .send-btn, .highlight-btn {
    background: linear-gradient(90deg, #ff758c, #a1c4fd, #ff7eb3, #ff758c) !important;
    background-size: 300% 100% !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(255,143,163,0.4) !important;
    animation: flowGlow 5s linear infinite !important;
}
.btn-primary:hover, .send-btn:hover {
    color: white !important;
    box-shadow: 0 6px 15px rgba(255,143,163,0.6) !important;
}

/* 4. 页码 (Pagination) - 悬浮小标贴 */
.pagination, .page-numbers {
    gap: 8px !important;
}
.pagination li, .page-item {
    background-color: #f1f5f9 !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 6px rgba(161,196,253,0.2), -3px -3px 6px rgba(255,255,255,0.9) !important;
    transition: all 0.2s !important;
}
/* 当前激活的页码：凹陷且变粉 */
.pagination li.active, .page-item.current {
    background-color: #ffe3e9 !important;
    color: #d6336c !important;
    box-shadow: inset 3px 3px 6px rgba(255,143,163,0.3), inset -3px -3px 6px rgba(255,255,255,0.8) !important;
}

/* 5. 评论区容器 - 手账档案袋 */
.comment-section, .comments-container {
    background-color: #fafbfc !important;
    border-radius: 16px !important;
    padding: 16px !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: inset 0 2px 10px rgba(161,196,253,0.1) !important;
}