/* ═══════════════════════════════════════════🏠 继母的别墅 · 木质书房 ×暧昧粉红
   书卷正文 + 木色背景 + 粉红点缀
   ═══════════════════════════════════════════ */

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

:root {
  /* 粉红点缀色系 */
  --pk-deep: #9b1b5a;
  --pk-main: #d63384;
  --pk-mid: #e8659a;
  --pk-light: #f4a6c6;
  --pk-pale: #fce4ec;
  --pk-ghost: #fff0f5;
  --pk-blush: #fff5f8;

  /* 金色点缀 */
  --pk-gold: #c9a45c;
  --pk-gold-light: #e8d4a8;
  --pk-gold-glow: rgba(201, 164, 92, 0.3);

  /* 书卷色系（AI正文用） */
  --pk-parchment: #fdf6ee;
  --pk-parchment2: #f8efe0;
  --pk-parchment-dark: #f0e4d0;
  --pk-ink: #3a2218;
  --pk-ink-light: #5c3d2e;
  --pk-ink-muted: #8c7060;

  /* 木质背景色系 */
  --wd-deep: #1a110a;
  --wd-dark: #231710;
  --wd-mid: #2e1e14;
  --wd-warm: #3a2a1a;
  --wd-light: #4a3828;
  --wd-highlight: #5c4832;
  --wd-text: #d4c4a8;
  --wd-text-dim: #9a8a6e;
  --wd-text-bright: #e8dcc4;

  /* 边框与阴影 */
  --pk-border: rgba(214, 51, 132, 0.22);
  --pk-border-light: rgba(244, 166, 198, 0.12);
  --wd-border: rgba(201, 164, 92, 0.2);
  --wd-border-light: rgba(201, 164, 92, 0.1);
  --pk-shadow: 0 4px 20px rgba(214, 51, 132, 0.1);
  --pk-glow: 0 0 15px rgba(214, 51, 132, 0.15);
  --pk-book-shadow: 4px 4px 15px rgba(0,0,0,0.3), -2px 0 8px rgba(0,0,0,0.15), inset 0 0 30px rgba(240,228,208,0.3);

  /* 圆角 */
  --pk-r-sm: 6px;
  --pk-r-md: 10px;
  --pk-r-lg: 14px;

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


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🌙 全局基础 — 木质书房底色
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body {
  background-color: var(--wd-deep) !important;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(58, 42, 26, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(42, 30, 18, 0.3) 0%, transparent 60%) !important;
  color: var(--wd-text) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  line-height: 1.85 !important;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--wd-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pk-gold), var(--wd-highlight));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--pk-gold-light), var(--pk-gold));
}

::selection {
  background: rgba(214, 51, 132, 0.35);
  color: #fff;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   💬 聊天区域 — 深木色
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#chat {
  background-color: var(--wd-dark) !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 120px,
      rgba(201, 164, 92, 0.02) 120px,
      rgba(201, 164, 92, 0.02) 121px
    ) !important;
  padding: 20px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📖 AI消息 — 书卷样式正文
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mes[is_user="false"] .mes_block {
  background:
    linear-gradient(180deg,
      var(--pk-parchment) 0%,
      var(--pk-parchment2) 40%,
      var(--pk-parchment) 70%,
      var(--pk-parchment-dark) 100%) !important;
  border: none !important;
  border-left: 4px solid var(--pk-gold) !important;
  border-right: 1px solid var(--pk-parchment-dark) !important;
  border-top: 1px solid rgba(201,164,92,0.3) !important;
  border-bottom: 1px solid var(--pk-parchment-dark) !important;
  border-radius: 2px 8px 8px 2px !important;
  padding: 28px 32px 24px !important;
  margin: 16px 4px !important;
  box-shadow: var(--pk-book-shadow) !important;
  transition: var(--pk-ease);position: relative;overflow: hidden;
}

/* 书页顶部装饰线 */
.mes[is_user="false"] .mes_block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--pk-gold),
    var(--pk-gold-light),
    var(--pk-gold),
    var(--pk-gold-light),
    var(--pk-gold));
  opacity: 0.6;
}

/* 书页底部装饰线 */
.mes[is_user="false"] .mes_block::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pk-gold), transparent);
  opacity: 0.35;
}

.mes[is_user="false"] .mes_block:hover {
  box-shadow: var(--pk-book-shadow),0 0 25px rgba(201,164,92,0.12) !important;
}

/* 正文文字 —墨色，书卷感 */
.mes[is_user="false"] .mes_text {
  color: var(--pk-ink) !important;
  font-size: 15.5px !important;
  line-height: 2!important;
  font-family: "Noto Serif SC", "Source Han Serif CN", "Georgia", "PingFang SC", serif !important;
}

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

/* 对话文字 — 与正文统一，不特殊高亮 */
.mes[is_user="false"] .mes_text em {
  color: var(--pk-ink) !important;
  font-style: normal !important;
  font-weight: 400;
}

/* 粗体 — 金色 */
.mes[is_user="false"] .mes_text strong {
  color: var(--pk-gold) !important;font-weight: 700 !important;
}

/* 正文中的分隔线 */
.mes[is_user="false"] .mes_text hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pk-gold) 15%,
    var(--pk-gold-light) 50%,
    var(--pk-gold) 85%,
    transparent 100%) !important;
  margin: 22px 0 !important;opacity: 0.45;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   👤 玩家消息 — 木质暖色对话框 + 粉红点缀
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mes[is_user="true"] .mes_block {
  background: linear-gradient(135deg,
    rgba(58, 42, 26, 0.85) 0%,
    rgba(74, 56, 40, 0.75) 50%,
    rgba(58, 42, 26, 0.85) 100%) !important;
  border: 1px solid var(--wd-border) !important;
  border-right: 3px solid var(--pk-main) !important;
  border-radius: var(--pk-r-lg) !important;
  padding: 18px 24px !important;
  margin: 14px 4px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25),inset 0 1px 0 rgba(201, 164, 92, 0.08) !important;
  transition: var(--pk-ease);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(--pk-gold), transparent);
  opacity: 0.2;
}

.mes[is_user="true"] .mes_block:hover {
  border-color: rgba(201, 164, 92, 0.35) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(214, 51, 132, 0.08) !important;
}

/*玩家消息文字 — 默认黑色/深色 */
.mes[is_user="true"] .mes_text {
  color: var(--wd-text-bright) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ⌨️ 输入框 — 木质底色
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#send_textarea,
#send_form textarea {
  background: linear-gradient(135deg,
    rgba(30, 20, 12, 0.95) 0%,
    rgba(42, 30, 18, 0.92) 100%) !important;
  border: 1.5px solid var(--wd-border) !important;
  border-radius: var(--pk-r-md) !important;
  color: var(--wd-text-bright) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  padding: 14px 18px !important;
  transition: var(--pk-ease);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.35) !important;
}

#send_textarea:focus,
#send_form textarea:focus {
  border-color: var(--pk-main) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.35),
    0 0 20px rgba(214, 51, 132, 0.15) !important;
  outline: none !important;
}

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

/* 发送按钮 —粉红 */
#send_but, .send_button {
  background: linear-gradient(135deg, var(--pk-main), var(--pk-deep)) !important;
  border: none !important;
  border-radius: var(--pk-r-sm) !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: var(--pk-ease);
  box-shadow: 0 3px 12px rgba(214, 51, 132, 0.3) !important;
}

#send_but:hover, .send_button:hover {
  background: linear-gradient(135deg, var(--pk-mid), var(--pk-main)) !important;
  box-shadow: 0 4px 20px rgba(214, 51, 132, 0.4) !important;
  transform: translateY(-1px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📂 折叠状态栏 — 木质暗色卡片
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mes_text details {
  background: linear-gradient(135deg,
    rgba(26, 17, 10, 0.94) 0%,
    rgba(35, 23, 16, 0.92) 50%,
    rgba(30, 20, 12, 0.94) 100%) !important;
  border: 1px solid var(--wd-border) !important;
  border-radius: var(--pk-r-md) !important;
  margin: 16px 0 !important;
  overflow: hidden;transition: var(--pk-ease);box-shadow: 0 3px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(201, 164, 92, 0.06) !important;
}

.mes_text details:hover {
  border-color: rgba(214, 51, 132, 0.3) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.4), var(--pk-glow) !important;
}

/* summary 标题 */
.mes_text details summary {
  background: linear-gradient(135deg,
    rgba(92, 72, 50, 0.25) 0%,
    rgba(155, 27, 90, 0.08) 50%,
    rgba(92, 72, 50, 0.25) 100%) !important;
  color: var(--wd-text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em;
  padding: 11px 18px !important;
  cursor: pointer;
  user-select: none;
  transition: var(--pk-ease);
  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: '♡';
  font-size: 11px;
  color: var(--pk-mid);
  transition: transform 0.3s ease;margin-right: 4px;
}

.mes_text details[open] summary::before {
  content: '♥';
  color: var(--pk-main);
}

.mes_text details summary:hover {
  background: linear-gradient(135deg,
    rgba(92, 72, 50, 0.35) 0%,
    rgba(155, 27, 90, 0.15) 50%,
    rgba(92, 72, 50, 0.35) 100%) !important;
  color: var(--wd-text-bright) !important;
}

.mes_text details[open] summary {
  border-bottom: 1px solid var(--wd-border) !important;
  color: var(--pk-gold) !important;
}

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

/* 状态栏内的引用块 */
.mes_text details blockquote {
  background: rgba(26, 17, 10, 0.5) !important;
  border: none !important;
  border-left: 2px solid var(--pk-mid) !important;
  border-radius: 0 var(--pk-r-sm) var(--pk-r-sm) 0 !important;
  margin: 10px 14px 14px !important;
  padding: 14px 18px !important;
  color: var(--wd-text) !important;
  font-size: 13.5px !important;
  line-height: 2 !important;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

.mes_text details blockquote strong {
  color: var(--pk-gold) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.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(--pk-gold), transparent) !important;
  margin: 10px 0 !important;
  opacity: 0.3;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📊 各状态栏个性化左边框
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 场景信息栏 —暖蓝 */
.mes_text details:first-of-type {
  border-left: 3px solid #7e8cc7 !important;
}
.mes_text details:first-of-type summary {
  background: linear-gradient(135deg,
    rgba(126, 140, 199, 0.12) 0%,
    rgba(92, 72, 50, 0.15) 100%) !important;
}

/* 个人信息 — 粉红 */
.mes_text details:nth-last-of-type(6) {
  border-left: 3px solid var(--pk-main) !important;
}

/* 互动目标 — 玫红 */
.mes_text details:nth-last-of-type(5) {
  border-left: 3px solid #c2185b !important;
}
.mes_text details:nth-last-of-type(5) summary {
  background: linear-gradient(135deg,
    rgba(194, 24, 91, 0.15) 0%,
    rgba(92, 72, 50, 0.12) 100%) !important;
}

/* 关系总览 — 暖金 */
.mes_text details:nth-last-of-type(4) {
  border-left: 3px solid var(--pk-gold) !important;
}
.mes_text details:nth-last-of-type(4) summary {
  background: linear-gradient(135deg,
    rgba(201, 164, 92, 0.15) 0%,
    rgba(92, 72, 50, 0.12) 100%) !important;
}

/*秘密档案 — 暗红 */
.mes_text details:nth-last-of-type(3) {
  border-left: 3px solid #e53935 !important;
}
.mes_text details:nth-last-of-type(3) summary {
  background: linear-gradient(135deg,
    rgba(229, 57, 53, 0.1) 0%,
    rgba(92, 72, 50, 0.12) 100%) !important;
}

/* 回忆录 — 淡紫 */
.mes_text details:nth-last-of-type(2) {
  border-left: 3px solid #ab47bc !important;
}
.mes_text details:nth-last-of-type(2) summary {
  background: linear-gradient(135deg,
    rgba(171, 71, 188, 0.1) 0%,
    rgba(92, 72, 50, 0.12) 100%) !important;
}

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


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📝 正文引用块（非状态栏）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mes_text blockquote:not(details blockquote) {
  background: rgba(92, 72, 50, 0.12) !important;
  border: 1px solid rgba(201, 164, 92, 0.15) !important;
  border-left: 3px solid var(--pk-main) !important;
  border-radius: 0 var(--pk-r-sm) var(--pk-r-sm) 0 !important;
  padding: 12px 18px !important;
  margin: 14px 0 !important;
  color: var(--pk-ink-light) !important;
  font-size: 14px !important;
}

/* 代码块 */
.mes_text code {
  background: rgba(155, 27, 90, 0.1) !important;
  color: var(--pk-deep) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🖼️ 头像
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.avatar img, .mes .avatar img {
  border-radius: 50% !important;
  border: 2px solid var(--pk-mid) !important;
  box-shadow: 0 0 10px rgba(214, 51, 132, 0.18) !important;
  transition: var(--pk-ease);
}

.avatar img:hover, .mes .avatar img:hover {
  border-color: var(--pk-gold) !important;
  box-shadow: 0 0 18px var(--pk-gold-glow) !important;
  transform: scale(1.05);
}

.mes[is_user="true"] .avatar img {
  border-color: var(--pk-gold) !important;
  box-shadow: 0 0 10px var(--pk-gold-glow) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎛️ 顶栏 /侧边栏 — 深木色
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#top-bar, .top-bar, header {
  background: linear-gradient(135deg,
    rgba(26, 17, 10, 0.97) 0%,
    rgba(46, 30, 20, 0.95) 100%) !important;
  border-bottom: 1px solid var(--wd-border) !important;
  box-shadow: 0 2px 15px rgba(0,0,0,0.45) !important;
}

#left-nav-panel, #right-nav-panel, .drawer-content {
  background: linear-gradient(180deg,
    rgba(26, 17, 10, 0.98) 0%,
    rgba(35, 23, 16, 0.96) 100%) !important;
  border-color: var(--wd-border) !important;
}

.drawer-icon, .nav-toggle {
  color: var(--wd-text) !important;
  transition: var(--pk-ease);
}

.drawer-icon:hover, .nav-toggle:hover {
  color: var(--pk-main) !important;
}


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

.menu_button,
button:not(#send_but):not(.send_button) {
  background: rgba(46, 30, 20, 0.8) !important;
  border: 1px solid var(--wd-border) !important;
  border-radius: var(--pk-r-sm) !important;
  color: var(--wd-text) !important;
  transition: var(--pk-ease);
}

.menu_button:hover,
button:not(#send_but):not(.send_button):hover {
  background: rgba(214, 51, 132, 0.1) !important;
  border-color: var(--pk-mid) !important;
  color: var(--wd-text-bright) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✨ 动画
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes pkFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.mes .mes_block {
  animation: pkFadeIn 0.45s ease-out;
}

@keyframes pkSlideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 2000px; }
}

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


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

.mes .mesIDDisplay, .mes .timestamp {
  color: var(--wd-text-dim) !important;
  font-size: 11px !important;
  opacity: 0.5;
}

.mes .ch_name, .mes .name_text {
  color: var(--pk-mid) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em;
}

.mes[is_user="true"] .ch_name,
.mes[is_user="true"] .name_text {
  color: var(--pk-gold) !important;
}

#form_sheld, .form_sheld, #send_form {
  background: linear-gradient(0deg,
    rgba(26, 17, 10, 0.98) 0%,
    rgba(26, 17, 10, 0.88) 80%,
    transparent 100%) !important;
  border-top: 1px solid var(--wd-border-light) !important;
}

.mes_buttons .mes_button,
.extraMesButtons .mes_button {
  color: var(--wd-text-dim) !important;
  opacity: 0.4;
  transition: var(--pk-ease);
}

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


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 移动端适配
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 768px) {
  .mes[is_user="false"] .mes_block {
    padding: 18px 18px 16px !important;
    margin: 10px 2px !important;
  }.mes[is_user="true"] .mes_block {
    padding: 14px 16px !important;
    margin: 10px 2px !important;
  }
  .mes[is_user="false"] .mes_text {
    font-size: 14.5px !important;line-height: 1.9 !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;
  }
}

@media screen and (max-width: 480px) {
  .mes[is_user="false"] .mes_block {
    padding: 14px 12px !important;
    border-radius: 2px 6px 6px 2px !important;
  }
  .mes_text details blockquote {
    margin: 6px 4px 8px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}