迷茫管家与懦弱的我

/* =========================================
   《迷茫管家与懦弱的我》主题美化
   Theme: The Butler & The Gynophobe
========================================= */

/* -----------------------------------------
   1. 消息气泡区 - 近卫昴的执事燕尾服 (AI)
----------------------------------------- */
/* AI 气泡背景：深色燕尾服蓝，带银色丝线边框 */
#customized-answer-content {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid #334155 !important;
  border-left: 4px solid #3b82f6 !important; /* 近卫昴的蓝色眼眸 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px 16px 16px 16px !important;
  padding: 16px 20px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#customized-answer-content:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

/* AI 文本：执事白手套般的纯净 */
#customized-answer-content .markdown-body,
#customized-answer-content .text-gray-900 {
  color: #f8fafc !important;
  font-family: 'Georgia', 'Times New Roman', serif, system-ui !important; /* 增加优雅感 */
  line-height: 1.7 !important;
}

/* AI 顶部装饰条：凉月大小姐的暗红色调 */
#customized-answer-content .bg-\[\#F1CBCB\] {
  background: linear-gradient(90deg, #991b1b, #ef4444) !important;
  opacity: 0.8 !important;
}

/* 模型名称与Token消耗：银色与怀表金 */
#customized-answer-content .text-purple-500.mt-1 {
  color: #94a3b8 !important;
}
#customized-answer-content .text-orange-500 {
  color: #fbbf24 !important;
  font-weight: 600 !important;
}

/* -----------------------------------------
   2. 消息气泡区 - 坂町近次郎的慌乱 (User)
----------------------------------------- */
/* User 气泡背景：微透着鼻血红的慌乱白 */
#customized-question-content {
  background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%) !important;
  border: 1px solid #fecdd3 !important;
  border-right: 4px solid #f43f5e !important; /* 鼻血警告色 */
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.08) !important;
  border-radius: 16px 4px 16px 16px !important;
  padding: 16px 20px !important;
}

/* User 文本颜色 */
#customized-question-content .markdown-body,
#customized-question-content .text-gray-900 {
  color: #1a1a1a !important;
  font-weight: 500 !important;
}

/* User 顶部装饰条：清爽的少年蓝 */
#customized-question-content .bg-\[\#c9e1e9\] {
  background: linear-gradient(90deg, #38bdf8, #0284c7) !important;
}

/* 头像装饰：执事与主人的圆环 */
#customized-answer-avatar {
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
  border-radius: 50% !important;
}
#customized-question-avatar {
  border: 2px solid #f43f5e !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.2) !important;
  border-radius: 50% !important;
}

/* -----------------------------------------
   3. 执事的怀表：加载动画替换
----------------------------------------- */
/* 隐藏默认的点状加载 */
#customized-answer-content [class*="dot-flashing"] {
  display: none !important;
}

/* 插入跳动的执事领结 SVG 动画 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 28px !important;
  height: 28px !important;
}

#customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  /* 跳动的领结/沙漏 动画 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8' stroke='%23e2e8f0' stroke-width='1'%3E%3Cpath d='M4 6l8 6-8 6V6zm16 0l-8 6 8 6V6z'%3E%3CanimateTransform attributeName='transform' type='scale' values='1;1.2;1' dur='1.2s' repeatCount='indefinite' transform-origin='12 12'/%3E%3C/path%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* -----------------------------------------
   4. 界面控制区 - 凉月大小姐的指令台
----------------------------------------- */
/* 底部输入框容器 */
.bg-white.border-\[1\.5px\] {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 20px !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.bg-white.border-\[1\.5px\]:focus-within {
  border-color: #3b82f6 !important;
  box-shadow: 0 -4px 25px rgba(59, 130, 246, 0.15) !important;
}

/* 输入框文字 */
#ai-chat-input {
  color: #1e293b !important;
  font-size: 15px !important;
}
#ai-chat-input::placeholder {
  color: #94a3b8 !important;
  font-style: italic !important;
}

/* 发送按钮：大小姐的红黑配色 */
#ai-send-button {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  border-radius: 50% !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#ai-send-button:hover {
  transform: scale(1.1) rotate(5deg) !important;
  background: linear-gradient(135deg, #991b1b, #dc2626) !important; /* 悬停时露出腹黑本性 */
}
#ai-send-button .icon-icon-send {
  color: #ffffff !important;
}

/* 快捷按钮组 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.8) !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
  background: #f1f5f9 !important;
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

/* -----------------------------------------
   5. 滚动条美化
----------------------------------------- */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。