/* ============================================
   🌸 樱花绯梦 · Sakura Dream UI Theme 🌸
   主色调：樱花粉 + 梦幻紫
   ============================================ */

/* ---------- 全局背景 ---------- */
body, .chat-container, #chat, #sheld {
  background: 
    radial-gradient(circle at 20% 10%, rgba(255, 192, 218, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(200, 162, 230, 0.35) 0%, transparent 45%),
    linear-gradient(135deg, #fff0f6 0%, #fce4ec 40%, #f3e5f5 100%) !important;
  background-attachment: fixed !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  color: #5a3a5e !important;
}

/* 飘落花瓣装饰层 */
body::before {
  content: "🌸";
  position: fixed;
  top: -10%;
  left: 10%;
  font-size: 24px;
  opacity: 0.15;
  animation: petal-fall 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "🌸";
  position: fixed;
  top: -10%;
  right: 15%;
  font-size: 30px;
  opacity: 0.12;
  animation: petal-fall 22s linear infinite;
  animation-delay: -8s;
  pointer-events: none;
  z-index: 0;
}
@keyframes petal-fall {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(120vh) rotate(720deg); }
}

/* ---------- 聊天消息气泡 ---------- */
.mes {
  background: linear-gradient(145deg, rgba(255, 245, 250, 0.92), rgba(248, 230, 245, 0.88)) !important;
  border: 1px solid rgba(230, 160, 200, 0.4) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  margin: 12px 8px !important;
  box-shadow: 
    0 4px 16px rgba(230, 130, 180, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
  backdrop-filter: blur(8px) !important;
  position: relative;
  overflow: hidden;
}

.mes::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff8ec0, #c89aff, transparent);
  opacity: 0.7;
}

/* 用户消息差异化 */
.mes[is_user="true"] {
  background: linear-gradient(145deg, rgba(245, 225, 245, 0.92), rgba(255, 235, 245, 0.88)) !important;
  border-color: rgba(200, 150, 220, 0.45) !important;
}

/* 角色名 */
.mes .name_text, .mes .ch_name {
  color: #c2185b !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255, 192, 218, 0.6);
  letter-spacing: 0.5px;
}

/* 消息正文 */
.mes_text {
  color: #4a2c4e !important;
  line-height: 1.85 !important;
  font-size: 15px !important;
}

.mes_text p { margin: 8px 0 !important; }

.mes_text strong, .mes_text b {
  color: #d81b60 !important;
  background: linear-gradient(120deg, transparent 60%, rgba(255, 182, 213, 0.5) 60%);
  padding: 0 3px;
}

.mes_text em, .mes_text i {
  color: #8e4ec6 !important;
  font-style: italic;
}

.mes_text blockquote {
  border-left: 3px solid #e91e63 !important;
  background: rgba(255, 228, 240, 0.55) !important;
  padding: 8px 14px !important;
  border-radius: 0 12px 12px 0 !important;
  color: #6a3a6e !important;
}

.mes_text code {
  background: rgba(244, 200, 230, 0.4) !important;
  color: #ad1457 !important;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

/* ---------- 状态栏 <status> / <details> ---------- */
details {
  background: linear-gradient(135deg, rgba(255, 240, 248, 0.85), rgba(243, 229, 245, 0.85)) !important;
  border: 1px solid rgba(216, 27, 96, 0.25) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  box-shadow: 0 2px 10px rgba(216, 27, 96, 0.08);
}

details summary {
  cursor: pointer;
  font-weight: 700;
  color: #c2185b !important;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 192, 218, 0.4), rgba(206, 162, 230, 0.3));
  list-style: none;
  position: relative;
  padding-left: 28px;
  transition: all 0.3s;
}

details summary::before {
  content: "🌸";
  position: absolute;
  left: 8px;
  transition: transform 0.3s;
}
details[open] summary::before { transform: rotate(180deg); }

details summary:hover {
  background: linear-gradient(90deg, rgba(255, 182, 213, 0.6), rgba(200, 154, 230, 0.5));
}

details p {
  margin: 6px 0 !important;
  padding: 4px 10px;
  color: #5a3a5e;
  border-bottom: 1px dashed rgba(216, 27, 96, 0.15);
}

/* ---------- 记忆区表格 ---------- */
.mes_text table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0;
  box-shadow: 0 2px 8px rgba(216, 27, 96, 0.12);
}
.mes_text th {
  background: linear-gradient(135deg, #f8bbd0, #ce93d8) !important;
  color: #fff !important;
  padding: 8px 10px;
  font-weight: 600;
}
.mes_text td {
  background: rgba(255, 245, 250, 0.7);
  padding: 7px 10px;
  border-bottom: 1px solid rgba(216, 27, 96, 0.1);
  color: #5a3a5e;
}
.mes_text tr:hover td {
  background: rgba(255, 224, 240, 0.85);
}

/* ---------- 行动推荐按钮风格段落 ---------- */
details:last-of-type p {
  background: linear-gradient(90deg, rgba(255, 192, 218, 0.25), rgba(206, 162, 230, 0.2));
  border-radius: 10px;
  margin: 6px 0 !important;
  padding: 8px 14px;
  border: 1px solid rgba(216, 27, 96, 0.15);
  border-bottom: 1px solid rgba(216, 27, 96, 0.15);
  transition: all 0.25s;
  cursor: pointer;
}
details:last-of-type p:hover {
  background: linear-gradient(90deg, rgba(255, 158, 200, 0.5), rgba(186, 140, 220, 0.45));
  transform: translateX(4px);
  box-shadow: -4px 0 0 #e91e63;
}

/* ---------- 输入框美化（全覆盖） ---------- */
#send_form, #form_sheld, .form_create_bottom_buttons_block {
  background: linear-gradient(135deg, rgba(255, 228, 240, 0.95), rgba(238, 210, 240, 0.95)) !important;
  border: 1.5px solid rgba(216, 27, 96, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 4px 20px rgba(216, 27, 96, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  padding: 6px 10px !important;
}

#send_textarea {
  background: rgba(255, 250, 253, 0.85) !important;
  border: 1px solid rgba(216, 27, 96, 0.2) !important;
  border-radius: 14px !important;
  color: #5a2c5e !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  box-shadow: inset 0 1px 4px rgba(216, 27, 96, 0.08) !important;
  transition: all 0.3s ease !important;
}

#send_textarea::placeholder {
  color: rgba(194, 24, 91, 0.45) !important;
  font-style: italic;
}

#send_textarea:focus {
  border-color: #e91e63 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    0 0 0 3px rgba(255, 182, 213, 0.5),
    inset 0 1px 4px rgba(216, 27, 96, 0.1) !important;
  outline: none !important;
}

/* 发送 / 工具按钮 */
#send_but, #options_button, .send_but, .menu_button {
  background: linear-gradient(135deg, #f48fb1, #ce93d8) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  box-shadow: 0 3px 10px rgba(216, 27, 96, 0.35) !important;
  transition: all 0.25s !important;
  font-size: 16px !important;
}
#send_but:hover, .menu_button:hover {
  transform: translateY(-2px) scale(1.08);
  background: linear-gradient(135deg, #ec407a, #ab47bc) !important;
  box-shadow: 0 5px 18px rgba(216, 27, 96, 0.5) !important;
}

/* ---------- 顶部 / 侧边栏 ---------- */
#top-bar, #top-settings-holder, .drawer, .drawer-content {
  background: linear-gradient(135deg, rgba(255, 240, 248, 0.92), rgba(243, 229, 245, 0.92)) !important;
  border-color: rgba(216, 27, 96, 0.25) !important;
  backdrop-filter: blur(10px);
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: rgba(255, 228, 240, 0.4);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f48fb1, #ce93d8);
  border-radius: 10px;
  border: 2px solid rgba(255, 240, 248, 0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ec407a, #ab47bc);
}

/* ---------- 模组评论 / 引用块 / 通用卡片 ---------- */
.comment, .review, .module-card, .swipe_left, .swipe_right {
  background: linear-gradient(135deg, rgba(255, 240, 248, 0.85), rgba(243, 229, 245, 0.85)) !important;
  border: 1px solid rgba(216, 27, 96, 0.25) !important;
  border-radius: 12px !important;
  color: #5a3a5e !important;
  box-shadow: 0 2px 8px rgba(216, 27, 96, 0.1);
}

/* 头像光晕 */
.avatar img {
  border-radius: 50% !important;
  border: 2px solid rgba(255, 182, 213, 0.8) !important;
  box-shadow: 
    0 0 0 2px rgba(206, 154, 230, 0.5),
    0 2px 10px rgba(216, 27, 96, 0.3) !important;
}

/* ---------- 链接 ---------- */
a { color: #d81b60 !important; text-decoration: none; }
a:hover { color: #ab47bc !important; text-shadow: 0 0 6px rgba(216, 27, 96, 0.4); }

/* ---------- hr 分隔线 ---------- */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #f48fb1, #ce93d8, transparent) !important;
  margin: 16px 0 !important;
}