/* =========================================
   全局变量：白天/夜间双模式自适应色彩体系
   ========================================= */
yx {
  /* 【白天模式：晴空与气泡水】 */
  --bg-gradient: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #FFFBEB 100%);
  --panel-bg: rgba(255, 255, 255, 0.85);
  --panel-border: rgba(255, 255, 255, 0.9);
  --text-main: #0F172A; /* 极深的蓝黑，代替死黑 */
  --text-muted: #475569;
  --accent-blue: #0EA5E9; /* 活力晴空蓝 */
  --accent-green: #10B981; /* 清新薄荷绿 */
  --accent-yellow: #F59E0B; /* 暖阳黄 */
  --shadow-color: rgba(14, 165, 233, 0.08);
  
  /* 组件色彩 */
  --story-bg: rgba(255, 255, 255, 0.95);
  --tag-bg: #E0F2FE;
  --tag-text: #0284C7;
  --dialogue-bg: rgba(14, 165, 233, 0.08);
  --dialogue-text: #0284C7;
  --social-bg: #F8FAFC;
  --social-item-bg: #FFFFFF;
  --social-border: rgba(14, 165, 233, 0.15);
  --table-head: #F0F9FF;

  /* 移动端排版基准 */
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; /* 调大基础字号适配手机 */
  line-height: 1.7;
  color: var(--text-main);
  background: var(--bg-gradient);
  padding: 12px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* 【夜间模式：星空与霓虹青】（跟随手机系统设置自动切换） */
@media (prefers-color-scheme: dark) {
  yx {
    --bg-gradient: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #172033 100%);
    --panel-bg: rgba(30, 41, 59, 0.75);
    --panel-border: rgba(56, 189, 248, 0.15);
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --accent-blue: #38BDF8; /* 夜间发光青 */
    --accent-green: #34D399; /* 荧光薄荷 */
    --accent-yellow: #FCD34D;
    --shadow-color: rgba(0, 0, 0, 0.3);
    
    --story-bg: rgba(15, 23, 42, 0.6);
    --tag-bg: rgba(56, 189, 248, 0.15);
    --tag-text: #7DD3FC;
    --dialogue-bg: rgba(56, 189, 248, 0.1);
    --dialogue-text: #38BDF8;
    --social-bg: rgba(15, 23, 42, 0.5);
    --social-item-bg: rgba(30, 41, 59, 0.9);
    --social-border: rgba(56, 189, 248, 0.2);
    --table-head: rgba(56, 189, 248, 0.15);
  }
}

/* =========================================
   结构与美化：玻璃拟物、大字号、清纯活力
   ========================================= */

/* 动态背景修饰：网点纹理，增加校园青春手账感 */
yx::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(var(--text-muted) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* 状态面板：高透亮，大圆角 */
yx .coser-panel {
  position: relative;
  z-index: 1;
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px; /* 增加手机端点击区域 */
  margin-bottom: 14px;
  box-shadow: 0 4px 20px var(--shadow-color);
}

/* 折叠标题：活力排版，大字号，左侧清爽竖线 */
yx summary {
  list-style: none;
  font-weight: 800;
  font-size: 16px; /* 手机端醒目标题 */
  color: var(--text-main);
  padding: 4px 8px 4px 18px;
  cursor: pointer;
  position: relative;
  margin-bottom: 6px;
  transition: color 0.2s;
  letter-spacing: 0.5px;
}
yx summary::-webkit-details-marker { display: none; }
yx summary::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 16px;
  background: var(--accent-blue);
  border-radius: 4px;
  transition: height 0.3s, background 0.3s;
}
yx summary:active::before { height: 20px; background: var(--accent-yellow); }

/* <t> 分类标签：圆润胶囊，青春运动感 */
yx t {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--tag-text);
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  margin: 16px 0 8px 0;
  letter-spacing: 0.5px;
  border: 1px solid var(--panel-border);
}

/* 正文容器：阅读体验拉满，去除冗杂边框 */
yx .roco-story, yx .rev-main {
  display: block;
  background: var(--story-bg);
  border-radius: 12px;
  padding: 18px 16px;
  margin: 14px 0;
  font-size: 15.5px; /* 正文放大，阅读不累眼 */
  line-height: 1.8; /* 呼吸感行高 */
  box-shadow: inset 0 0 0 1px var(--panel-border);
  border-left: 4px solid var(--accent-green); /* 左侧薄荷绿高亮 */
}

/* 对话与系统提示：纯净色彩 */
yx .char-dialogue {
  color: var(--dialogue-text);
  font-weight: 700;
  background: var(--dialogue-bg);
  padding: 2px 6px;
  border-radius: 6px;
}
yx .inner-thought {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 500;
}
yx .system-alert {
  background: var(--accent-yellow);
  color: #FFF;
  text-align: center;
  padding: 8px 18px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 800;
  margin: 16px auto;
  max-width: fit-content;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* 社交信息模拟：现代手机气泡风格，完美自适应夜间模式 */
yx .comment-panel {
  background: var(--social-bg);
}
yx .comment-panel ul {
  display: flex;
  flex-direction: column;
  gap: 1px; 
  padding: 0;
  margin: 10px 0;
  background: var(--social-border); 
  border-radius: 12px;
  overflow: hidden;
}
yx .comment-panel li {
  background: var(--social-item-bg);
  padding: 12px 14px;
  margin: 0;
  border-radius: 0;
  font-size: 14.5px;
}
yx .comment-panel li::before { content: none; } /* 社交区去掉列表前缀点 */

/* 基础列表点缀：阳光四芒星 */
yx li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}
yx li::before {
  content: '✦';
  position: absolute;
  left: 0; top: 1px;
  color: var(--accent-blue);
  font-size: 14px;
}

/* 干净的分割线 */
yx hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--panel-border), transparent);
  margin: 20px 0;
}

/* 表格：清晰间距，自适应配色 */
yx table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--panel-border);
}
yx th {
  background: var(--table-head);
  color: var(--text-main);
  padding: 10px;
  text-align: left;
  font-weight: 700;
}
yx td {
  padding: 10px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-bg);
}
/* =========================================
   全局界面 UI 覆盖：青春校园悬浮拟物风
   ========================================= */

/* --- 1. 顶部栏：高透毛玻璃与胶囊模型选择器 --- */
.sticky.w-full.top-0.flex.items-center {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.06) !important;
  transition: all 0.3s ease !important;
}

/* 模型选择器变身青春胶囊 */
#ai-model-selector .group.flex.items-center {
  background: rgba(224, 242, 254, 0.9) !important; /* 匹配 tag-bg */
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
  background: #0EA5E9 !important; /* 悬浮变晴空蓝 */
}
#ai-model-selector .truncate.text-\[13px\] {
  color: #0284C7 !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
#ai-model-selector .group.flex.items-center:hover .truncate.text-\[13px\],
#ai-model-selector .group.flex.items-center:hover .shrink-0.flex.items-center svg {
  color: #FFFFFF !important; /* 悬浮时文字变白 */
}

/* 顶部各类功能图标染色 */
#header-setting-button svg,
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
  color: #0EA5E9 !important; 
  transition: transform 0.2s !important;
}
#header-setting-button:active svg {
  transform: rotate(45deg) scale(0.9) !important; /* 增加点击小动画 */
}

/* --- 2. 快捷按钮栏：果冻感与悬浮起飞 --- */
#ai-mod-button2 {
  gap: 10px !important;
  padding: 6px 12px !important;
}
#ai-mod-button2 button.MuiButton-root {
  background: #E0F2FE !important;
  color: #0284C7 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(14, 165, 233, 0.15) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: none !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
  background: #0EA5E9 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.25) !important;
}

/* --- 3. 底部输入栏：去黑边，做成悬浮气泡 --- */
/* 去除底部原本阻碍视觉的丑陋遮罩 */
.bg-gradient-to-t {
  background: transparent !important;
}

/* 输入框外层容器悬浮化 */
#ai-chat-bottom-input {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 24px rgba(14, 165, 233, 0.1) !important;
  margin: 0 12px 12px 12px !important; /* 留出边距，产生悬浮感 */
  padding: 6px 10px !important;
  transition: border 0.3s !important;
}
#ai-chat-bottom-input:focus-within {
  border: 1px solid #0EA5E9 !important; /* 聚焦时亮起薄荷蓝边框 */
}

/* 输入框本体净化 */
#ai-chat-input {
  background: transparent !important;
  color: #0F172A !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}
#ai-chat-input::placeholder {
  color: #94A3B8 !important;
  font-style: italic !important;
}
#ai-chat-input::selection {
  background: rgba(14, 165, 233, 0.2) !important;
}


/* =========================================
   夜间模式自适应：星空霓虹青
   ========================================= */
@media (prefers-color-scheme: dark) {
  /* 顶部栏暗化 */
  .sticky.w-full.top-0.flex.items-center {
    background: rgba(30, 41, 59, 0.75) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  }
  
  /* 模型胶囊夜间荧光 */
  #ai-model-selector .group.flex.items-center {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
  }
  #ai-model-selector .group.flex.items-center:hover {
    background: #38BDF8 !important; 
  }
  #ai-model-selector .truncate.text-\[13px\] {
    color: #7DD3FC !important;
  }
  #ai-model-selector .group.flex.items-center:hover .truncate.text-\[13px\],
  #ai-model-selector .group.flex.items-center:hover .shrink-0.flex.items-center svg {
    color: #0F172A !important;
  }

  /* 顶部图标发光青 */
  #header-setting-button svg,
  .sticky.w-full.top-0 svg.lucide-clock-8,
  .sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
  .sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
    color: #38BDF8 !important;
  }

  /* 快捷按钮暗黑风格 */
  #ai-mod-button2 button.MuiButton-root {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
  }
  #ai-mod-button2 button.MuiButton-root:hover {
    background: #38BDF8 !important;
    color: #0F172A !important;
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.2) !important;
  }

  /* 输入气泡夜间态 */
  #ai-chat-bottom-input {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  }
  #ai-chat-bottom-input:focus-within {
    border-color: #34D399 !important; /* 夜间打字亮起薄荷绿 */
  }
  #ai-chat-input {
    color: #F8FAFC !important;
  }
  #ai-chat-input::placeholder {
    color: #64748B !important;
  }
  #ai-chat-input::selection {
    background: rgba(56, 189, 248, 0.3) !important;
  }
}