/* ═══════════════════════════════════════════✈️ 一日千里航空公司 · 情趣粉色全局主题
   适配 rili平台 · SillyTavern 通用
   ═══════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 全局变量定义
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* 主色系 */
  --yqpink-deep: #c2185b;
  --yqpink-main: #e91e7a;
  --yqpink-mid: #f06292;
  --yqpink-light: #f8bbd0;
  --yqpink-pale: #fce4ec;
  --yqpink-ghost: #fff0f5;
  --yqpink-white: #fffafb;

  /* 金色点缀 */
  --yqgold-main: #d4a056;
  --yqgold-light: #f0d9a8;
  --yqgold-glow: rgba(212, 160, 86, 0.3);

  /* 文字色 */
  --yqtext-primary: #4a1a2e;
  --yqtext-secondary: #8e4466;
  --yqtext-muted: #b07090;
  --yqtext-light: #d4a0b8;
  --yqtext-on-dark: #fce4ec;

  /* 背景色 */
  --yqbg-page: #1a0a12;
  --yqbg-chat: #200e18;
  --yqbg-card: rgba(40, 15, 28, 0.85);
  --yqbg-card-hover: rgba(50, 20, 35, 0.9);
  --yqbg-input: rgba(35, 12, 24, 0.9);

  /* 边框与阴影 */
  --yqborder: rgba(233, 30, 122, 0.25);
  --yqborder-light: rgba(248, 187, 208, 0.15);
  --yqshadow-pink: 0 4px 20px rgba(233, 30, 122, 0.15);
  --yqshadow-gold: 0 2px 12px rgba(212, 160, 86, 0.1);
  --yqglow-pink: 0 0 15px rgba(233, 30, 122, 0.2);

  /* 圆角 */
  --yqradius-sm: 8px;
  --yqradius-md: 12px;
  --yqradius-lg: 16px;
  --yqradius-xl: 20px;

  /* 过渡 */
  --yqtransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🌙 全局基础样式
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body {
  background-color: var(--yqbg-page) !important;
  color: var(--yqtext-on-dark) !important;
  font-family: "Noto Serif SC", "Source Han Serif CN", "Georgia", serif !important;
  line-height: 1.85 !important;
  letter-spacing: 0.02em;
}

/* 全局滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--yqbg-page);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--yqpink-main), var(--yqpink-deep));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--yqpink-mid), var(--yqpink-main));
}

/* 全局选中文字样式 */
::selection {
  background: rgba(233, 30, 122, 0.35);
  color: #fff;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   💬 聊天区域 · 整体容器
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#chat {
  background-color: var(--yqbg-chat) !important;
  padding: 20px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🤖 AI输出消息气泡（角色消息）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mes[is_user="false"] .mes_block {
  background: linear-gradient(135deg, 
    rgba(40, 12, 28, 0.92) 0%, 
    rgba(55, 18, 38, 0.88) 50%,
    rgba(45, 14, 32, 0.92) 100%) !important;
  border: 1px solid var(--yqborder) !important;
  border-left: 3px solid var(--yqpink-main) !important;
  border-radius: var(--yqradius-lg) !important;
  padding: 22px 26px !important;
  margin: 12px 4px !important;
  box-shadow: var(--yqshadow-pink), inset 0 1px 0 rgba(248, 187, 208, 0.05) !important;
  transition: var(--yqtransition);position: relative;
  overflow: hidden;
}

.mes[is_user="false"] .mes_block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yqpink-mid), transparent);
  opacity: 0.4;
}

.mes[is_user="false"] .mes_block:hover {
  border-color: var(--yqpink-mid) !important;
  box-shadow: var(--yqglow-pink), var(--yqshadow-pink) !important;
}

/* AI消息文字样式 */
.mes[is_user="false"] .mes_text {
  color: var(--yqpink-pale) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mes[is_user="false"] .mes_text p {
  margin-bottom: 0.8em !important;
  text-indent: 2em;
}

/* AI消息中的对话「」高亮 */
.mes[is_user="false"] .mes_text em {
  color: var(--yqpink-mid) !important;
  font-style: normal !important;
  text-shadow: 0 0 8px rgba(240, 98, 146, 0.3);
}

/* AI消息中的粗体 */
.mes[is_user="false"] .mes_text strong {
  color: var(--yqgold-main) !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px var(--yqgold-glow);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   👤 玩家输入消息气泡（用户消息）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mes[is_user="true"] .mes_block {
  background: linear-gradient(135deg, 
    rgba(194, 24, 91, 0.18) 0%, 
    rgba(233, 30, 122, 0.12) 50%,
    rgba(194, 24, 91, 0.18) 100%) !important;
  border: 1px solid rgba(233, 30, 122, 0.35) !important;
  border-right: 3px solid var(--yqgold-main) !important;
  border-radius: var(--yqradius-lg) !important;
  padding: 18px 24px !important;
  margin: 12px 4px !important;
  box-shadow: 0 4px 16px rgba(194, 24, 91, 0.12), var(--yqshadow-gold) !important;
  transition: var(--yqtransition);
  position: relative;
}

.mes[is_user="true"] .mes_block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yqgold-main), transparent);
  opacity: 0.3;
}

.mes[is_user="true"] .mes_block:hover {
  border-color: rgba(233, 30, 122, 0.5) !important;
  box-shadow: 0 0 20px rgba(233, 30, 122, 0.15), var(--yqshadow-gold) !important;
}

/* 玩家消息文字样式 */
.mes[is_user="true"] .mes_text {
  color: #fce4ec !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⌨️ 输入框美化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#send_textarea,
#send_form textarea {
  background: linear-gradient(135deg, 
    rgba(35, 12, 24, 0.95) 0%, 
    rgba(45, 16, 30, 0.92) 100%) !important;
  border: 1.5px solid var(--yqborder) !important;
  border-radius: var(--yqradius-md) !important;
  color: var(--yqpink-pale) !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  padding: 14px 18px !important;
  transition: var(--yqtransition);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(233, 30, 122, 0.08) !important;
}

#send_textarea:focus,
#send_form textarea:focus {
  border-color: var(--yqpink-main) !important;
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.3), 
    0 0 20px rgba(233, 30, 122, 0.2),
    0 0 40px rgba(233, 30, 122, 0.08) !important;
  outline: none !important;
}

#send_textarea::placeholder,
#send_form textarea::placeholder {
  color: var(--yqtext-muted) !important;
  font-style: italic;
}

/* 发送按钮 */
#send_but,
.send_button {
  background: linear-gradient(135deg, var(--yqpink-main), var(--yqpink-deep)) !important;
  border: none !important;
  border-radius: var(--yqradius-sm) !important;
  color: #fff !important;
  font-weight: 600 !important;
  transition: var(--yqtransition);
  box-shadow: 0 3px 12px rgba(233, 30, 122, 0.3) !important;
}

#send_but:hover,
.send_button:hover {
  background: linear-gradient(135deg, var(--yqpink-mid), var(--yqpink-main)) !important;
  box-shadow: 0 4px 20px rgba(233, 30, 122, 0.45) !important;
  transform: translateY(-1px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📂 折叠状态栏 <details> 美化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mes_text details {
  background: linear-gradient(135deg, 
    rgba(26, 10, 18, 0.95) 0%, 
    rgba(35, 14, 25, 0.92) 100%) !important;
  border: 1px solid var(--yqborder) !important;
  border-radius: var(--yqradius-md) !important;
  margin: 14px 0 !important;
  overflow: hidden;
  transition: var(--yqtransition);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(248, 187, 208, 0.05) !important;
}

.mes_text details:hover {
  border-color: var(--yqpink-mid) !important;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3), var(--yqglow-pink) !important;
}

/* 折叠标题 summary */
.mes_text details summary {
  background: linear-gradient(135deg, 
    rgba(194, 24, 91, 0.2) 0%, 
    rgba(233, 30, 122, 0.12) 50%,
    rgba(194, 24, 91, 0.2) 100%) !important;
  color: var(--yqpink-light) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.08em;
  padding: 12px 20px !important;
  cursor: pointer;
  user-select: none;
  transition: var(--yqtransition);
  border-bottom: 1px solid transparent;list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mes_text details summary::-webkit-details-marker {
  display: none;
}

.mes_text details summary::before {
  content: '▸';
  display: inline-block;
  font-size: 12px;
  color: var(--yqpink-mid);
  transition: transform 0.3s ease;margin-right: 4px;
}

.mes_text details[open] summary::before {
  transform: rotate(90deg);
}

.mes_text details summary:hover {
  background: linear-gradient(135deg, 
    rgba(194, 24, 91, 0.3) 0%, 
    rgba(233, 30, 122, 0.2) 50%,
    rgba(194, 24, 91, 0.3) 100%) !important;
  color: #fff !important;
}

.mes_text details[open] summary {
  border-bottom: 1px solid var(--yqborder) !important;color: var(--yqgold-main) !important;
}

/* 折叠内容区*/
.mes_text details > *:not(summary) {
  padding: 4px 10px !important;
}

.mes_text details blockquote {
  background: rgba(26, 10, 18, 0.5) !important;
  border: none !important;
  border-left: 2px solid var(--yqpink-mid) !important;
  border-radius: 0 var(--yqradius-sm) var(--yqradius-sm) 0 !important;
  margin: 10px 14px 14px !important;
  padding: 16px 20px !important;
  color: var(--yqpink-pale) !important;
  font-size: 13.5px !important;
  line-height: 2!important;
}

/* 状态栏中的粗体标签 */
.mes_text details blockquote strong {
  color: var(--yqgold-main) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-shadow: 0 0 4px var(--yqgold-glow);
}

/* 状态栏中的emoji图标增强 */
.mes_text details blockquote p {
  margin: 3px 0 !important;
  text-indent: 0 !important;
}

/* 状态栏分隔线 */
.mes_text details blockquote hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--yqpink-mid), transparent) !important;
  margin: 10px 0 !important;opacity: 0.4;
}

/* ━━━ 分区标题样式 ━━━ */
.mes_text details blockquote strong:first-child {
  display: block;
  text-align: center;
  color: var(--yqpink-mid) !important;
  font-size: 12px !important;
  letter-spacing: 0.15em;
  margin: 8px 0 6px !important;
  text-shadow: 0 0 8px rgba(240, 98, 146, 0.3);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📊 特定状态栏个性化边框色
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 时间地点栏 —蓝粉色调 */
.mes_text details:first-of-type {
  border-left: 3px solid #7986cb !important;
}
.mes_text details:first-of-type summary {
  background: linear-gradient(135deg, 
    rgba(121, 134, 203, 0.15) 0%, 
    rgba(194, 24, 91, 0.1) 100%) !important;
}

/* 最后四个折叠栏的区分 — 通过nth-last-of-type */
/* 个人档案 — 粉色 */
.mes_text details:nth-last-of-type(4) {
  border-left: 3px solid var(--yqpink-main) !important;
}

/* 互动目标 — 玫红色 */
.mes_text details:nth-last-of-type(3) {
  border-left: 3px solid #e040a0 !important;
}
.mes_text details:nth-last-of-type(3) summary {
  background: linear-gradient(135deg, 
    rgba(224, 64, 160, 0.15) 0%, 
    rgba(194, 24, 91, 0.1) 100%) !important;
}

/* 回忆录 — 金色 */
.mes_text details:nth-last-of-type(2) {
  border-left: 3px solid var(--yqgold-main) !important;
}
.mes_text details:nth-last-of-type(2) summary {
  background: linear-gradient(135deg, 
    rgba(212, 160, 86, 0.15) 0%, 
    rgba(194, 24, 91, 0.08) 100%) !important;
}

/* 行动推荐 — 亮粉色 */
.mes_text details:nth-last-of-type(1) {
  border-left: 3px solid var(--yqpink-mid) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📝 正文叙事区域增强
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 分隔线美化 */
.mes_text hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--yqpink-deep) 20%, 
    var(--yqpink-mid) 50%, 
    var(--yqpink-deep) 80%, 
    transparent 100%) !important;
  margin: 20px 0 !important;
  opacity: 0.5;
}

/* 千里通APP通知样式 */
.mes_text p:has(> strong:first-child) {
  /* 通用段落无特殊处理 */
}

/* 引用块（用于APP通知等） */
.mes_text blockquote:not(details blockquote) {
  background: linear-gradient(135deg, 
    rgba(233, 30, 122, 0.08) 0%, 
    rgba(212, 160, 86, 0.05) 100%) !important;
  border: 1px solid rgba(233, 30, 122, 0.2) !important;
  border-left: 3px solid var(--yqpink-main) !important;
  border-radius: 0 var(--yqradius-sm) var(--yqradius-sm) 0 !important;
  padding: 12px 18px !important;
  margin: 12px 0 !important;
  color: var(--yqpink-light) !important;
  font-size: 14px !important;
}

/* 代码块（用于系统信息等） */
.mes_text code {
  background: rgba(233, 30, 122, 0.12) !important;
  color: var(--yqpink-mid) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-family: "Fira Code", "Consolas", monospace !important;
}

.mes_text pre {
  background: rgba(26, 10, 18, 0.9) !important;
  border: 1px solid var(--yqborder) !important;
  border-radius: var(--yqradius-sm) !important;
  padding: 16px !important;
  overflow-x: auto;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🖼️ 头像美化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.avatar img,
.mes .avatar img {
  border-radius: 50% !important;
  border: 2px solid var(--yqpink-mid) !important;
  box-shadow: 0 0 12px rgba(233, 30, 122, 0.25) !important;
  transition: var(--yqtransition);
}

.avatar img:hover,
.mes .avatar img:hover {
  border-color: var(--yqgold-main) !important;
  box-shadow: 0 0 20px rgba(212, 160, 86, 0.35) !important;
  transform: scale(1.05);
}

/* 用户头像金色边框区分 */
.mes[is_user="true"] .avatar img {
  border-color: var(--yqgold-main) !important;
  box-shadow: 0 0 12px var(--yqgold-glow) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎛️ 侧边栏 &顶栏美化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 顶栏 */
#top-bar,
.top-bar,
header {
  background: linear-gradient(135deg, 
    rgba(26, 10, 18, 0.97) 0%, 
    rgba(40, 15, 28, 0.95) 100%) !important;
  border-bottom: 1px solid var(--yqborder) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

/* 侧边栏 */
#left-nav-panel,
#right-nav-panel,
.drawer-content {
  background: linear-gradient(180deg, 
    rgba(26, 10, 18, 0.98) 0%, 
    rgba(35, 14, 22, 0.96) 100%) !important;
  border-color: var(--yqborder) !important;
}

/* 侧边栏按钮 */
.drawer-icon,
.nav-toggle {
  color: var(--yqpink-light) !important;
  transition: var(--yqtransition);
}

.drawer-icon:hover,
.nav-toggle:hover {
  color: var(--yqpink-main) !important;
  text-shadow: 0 0 10px rgba(233, 30, 122, 0.4);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔘 通用按钮美化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.menu_button,
button:not(#send_but):not(.send_button) {
  background: rgba(40, 15, 28, 0.8) !important;
  border: 1px solid var(--yqborder) !important;
  border-radius: var(--yqradius-sm) !important;
  color: var(--yqpink-light) !important;
  transition: var(--yqtransition);
}

.menu_button:hover,
button:not(#send_but):not(.send_button):hover {
  background: rgba(233, 30, 122, 0.15) !important;
  border-color: var(--yqpink-mid) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(233, 30, 122, 0.15) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✨ 动画效果
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 消息淡入动画 */
@keyframes yqFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mes .mes_block {
  animation: yqFadeIn 0.5s ease-out;
}

/* 折叠栏展开动画 */
@keyframes yqSlideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 2000px;
  }
}

.mes_text details[open] > *:not(summary) {
  animation: yqSlideDown 0.4s ease-out;
}

/* 金色光晕呼吸动画（用于特殊元素） */
@keyframes yqGoldPulse {
  0%, 100% {
    box-shadow: 0 0 8px var(--yqgold-glow);
  }
  50% {
    box-shadow: 0 0 18px rgba(212, 160, 86, 0.45);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 移动端响应式适配
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 768px) {
  .mes[is_user="false"] .mes_block,
  .mes[is_user="true"] .mes_block {
    padding: 14px 16px !important;margin: 8px 2px !important;
    border-radius: var(--yqradius-md) !important;
  }

  .mes[is_user="false"] .mes_text,
  .mes[is_user="true"] .mes_text {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .mes_text details summary {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  .mes_text details blockquote {
    margin: 8px 8px 10px !important;
    padding: 12px 14px !important;
    font-size: 12.5px !important;
    line-height: 1.9 !important;
  }

  #send_textarea,
  #send_form textarea {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
}

@media screen and (max-width: 480px) {
  .mes[is_user="false"] .mes_block,
  .mes[is_user="true"] .mes_block {
    padding: 12px 12px !important;
    border-radius: var(--yqradius-sm) !important;
  }

  .mes_text details blockquote {
    margin: 6px 4px 8px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎀 装饰性细节
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 消息时间戳 */
.mes .mesIDDisplay,
.mes .timestamp {
  color: var(--yqtext-muted) !important;
  font-size: 11px !important;
  opacity: 0.6;
}

/* 角色名称 */
.mes .ch_name,
.mes .name_text {
  color: var(--yqpink-mid) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(240, 98, 146, 0.25);
}

/* 用户名称 */
.mes[is_user="true"] .ch_name,
.mes[is_user="true"] .name_text {
  color: var(--yqgold-main) !important;
  text-shadow: 0 0 8px var(--yqgold-glow);
}

/* 底部工具栏 */
#form_sheld,
.form_sheld,
#send_form {
  background: linear-gradient(0deg, 
    rgba(26, 10, 18, 0.98) 0%, 
    rgba(26, 10, 18, 0.9) 80%,
    transparent 100%) !important;
  border-top: 1px solid var(--yqborder-light) !important;
  padding-top: 12px !important;
}

/* 消息操作按钮（编辑、删除等） */
.mes_buttons .mes_button,
.extraMesButtons .mes_button {
  color: var(--yqtext-muted) !important;
  opacity: 0.5;
  transition: var(--yqtransition);
}

.mes_buttons .mes_button:hover,
.extraMesButtons .mes_button:hover {
  color: var(--yqpink-mid) !important;
  opacity: 1;
}