/* ═══════════════════════════════════════════
   第一部分：作品输出格式 — xiu 作用域
   ═══════════════════════════════════════════ */

/* 基础变量 */
xiu {
  --pink: #FF69B4;
  --pink-2: #E91E63;
  --yellow: #FFE234;
  --blue: #64B5F6;
  --black: #1a1a1a;
  --white: #FFFDF7;
  --gray: #f5f5f5;
  --shadow: 3px 3px 0 #222;
  display: block;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.8;
  color: var(--black);
}

/* 正文区域 */
xiu .story-body {
  padding: 16px 14px;
  font-size: 15px;
  letter-spacing: 0.3px;
}

xiu .story-body p {
  text-indent: 2em;
  margin-bottom: 12px;
}

/* 通用卡片 */
xiu details.card {
  margin: 10px 0;
  border: 2.5px solid var(--black);
  border-radius: 6px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--white);
}

xiu details.card summary {
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  background: var(--gray);
  border-bottom: 2px solid var(--black);
  list-style: none;
}

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

xiu details.card summary::before {
  content: '▸ ';
  font-size: 11px;
}

xiu details.card[open] summary::before {
  content: '▾ ';
}

xiu details.card p {
  padding: 2px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

xiu details.card hr {
  border: none;
  border-top: 1.5px dashed #ccc;
  margin: 6px 12px;
}

xiu details.card b {
  color: var(--pink-2);
}

xiu details.card i {
  color: #7B1FA2;
  font-style: italic;
}

/* 各卡片左侧色条 */
xiu details.now-card {
  border-left: 6px solid var(--yellow);
}

xiu details.player-card {
  border-left: 6px solid var(--pink);
}

xiu details.rival-card {
  border-left: 6px solid var(--pink-2);
}

xiu details.npc-card {
  border-left: 6px solid var(--blue);
}

xiu details.gambit-card {
  border-left: 6px solid #9C27B0;
}

xiu details.quest-card {
  border-left: 6px solid var(--blue);
}

xiu details.memory-card {
  border-left: 6px solid #78909C;
}

xiu details.action-card {
  border-left: 6px solid var(--yellow);
}

/* 卡片小角标 */
xiu details.now-card::after {
  content: "NOW";
}

xiu details.player-card::after {
  content: "SELF";
}

xiu details.rival-card::after {
  content: "RIVAL";
}

xiu details.npc-card::after {
  content: "NPC";
}

xiu details.gambit-card::after {
  content: "GAMBIT";
}

xiu details.quest-card::after {
  content: "QUEST";
}

xiu details.memory-card::after {
  content: "MEM";
}

xiu details.action-card::after {
  content: "ACT";
}

xiu details.card::after {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #999;
  pointer-events: none;
}

xiu details.card {
  position: relative;
}

/* 状态栏行样式 */
xiu .stat-title {
  padding-top: 6px !important;
  font-size: 12px !important;
  letter-spacing: 1px;
  color: #555;
}

xiu .row {
  padding-left: 20px !important;
}

xiu .row .no {
  color: var(--pink);
  font-weight: 900;
  margin-right: 4px;
}

/* 记忆区 */
xiu .row.mem .time {
  color: #888;
  font-size: 11px;
}

xiu .row.mem .scene {
  color: var(--blue);
  font-size: 12px;
}

xiu .row.mem .event {
  font-size: 12px;
}

/* 行动推荐 */
xiu .action {
  padding: 8px 12px !important;
  margin: 4px 10px !important;
  border: 2px solid var(--black);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--white);
}

xiu .action:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
}

xiu .action:nth-of-type(1):hover {
  background: var(--yellow);
  color: var(--black);
}

xiu .action:nth-of-type(2):hover {
  background: var(--pink-2);
  color: #fff;
}

xiu .action:nth-of-type(3):hover {
  background: var(--blue);
  color: var(--black);
}

xiu .action:nth-of-type(4):hover {
  background: var(--yellow);
  color: var(--black);
}

xiu .action:nth-of-type(5):hover {
  background: var(--pink);
  color: #fff;
}

/* ═══════════════════════════════════════════
   第二部分：平台界面美化（稳定性较低，平台更新可能失效）
   ═══════════════════════════════════════════ */

/* --- 聊天气泡 --- */
.group.is-assistant > div:first-child {
  background: #FFFDF7 !important;
  border: 2.5px solid #222 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #222 !important;
  position: relative !important;
  overflow: visible !important;
  padding-top: 20px !important;
}

.group.is-user > div:first-child {
  background: linear-gradient(135deg, #FF69B4, #E91E63) !important;
  border: 2.5px solid #222 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #222 !important;
  position: relative !important;
  overflow: visible !important;
  padding-top: 20px !important;
}

/* 气泡标签 */
.group.is-assistant > div:first-child::after {
  content: 'AI♡' !important;
  position: absolute !important;
  top: -10px !important;
  right: 12px !important;
  background: var(--pink, #FF69B4) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  padding: 2px 7px !important;
  border: 2px solid #222 !important;
  border-radius: 3px !important;
  box-shadow: 2px 2px 0 #222 !important;
  transform: rotate(3deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.group.is-user > div:first-child::after {
  content: 'ME♡' !important;
  position: absolute !important;
  top: -10px !important;
  left: 12px !important;
  background: #FFE234 !important;
  color: #222 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  padding: 2px 7px !important;
  border: 2px solid #222 !important;
  border-radius: 3px !important;
  box-shadow: 2px 2px 0 #222 !important;
  transform: rotate(-3deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* --- 气泡内文字颜色（修正版，不再用 * 暴力覆盖） --- */
.group.is-assistant .rili-markdown-renderer {
  color: #0a0a0a !important;
}

.group.is-user .rili-markdown-renderer {
  color: #FFF0F5 !important;
}

/* --- 加载动画（波普像素小剑） --- */
.group.is-assistant .flex.gap-2.w-full.h-full.items-center.justify-center > span {
  display: none !important;
}

.group.is-assistant .flex.gap-2.w-full.h-full.items-center.justify-center {
  position: relative !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.group.is-assistant .flex.gap-2.w-full.h-full.items-center.justify-center::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='11' y='0' width='2' height='2' fill='%23FFE234'/%3E%3Crect x='13' y='0' width='2' height='2' fill='%23FFE234'/%3E%3Crect x='9' y='2' width='2' height='2' fill='%23E91E63'/%3E%3Crect x='11' y='2' width='2' height='2' fill='%23FF69B4'/%3E%3Crect x='13' y='2' width='2' height='2' fill='%23E91E63'/%3E%3Crect x='7' y='4' width='2' height='2' fill='%23E91E63'/%3E%3Crect x='9' y='4' width='2' height='2' fill='%23FF69B4'/%3E%3Crect x='11' y='4' width='2' height='2' fill='%23E91E63'/%3E%3Crect x='5' y='6' width='2' height='2' fill='%23E91E63'/%3E%3Crect x='7' y='6' width='2' height='2' fill='%23FF69B4'/%3E%3Crect x='9' y='6' width='2' height='2' fill='%23E91E63'/%3E%3Crect x='3' y='8' width='2' height='2' fill='%23555'/%3E%3Crect x='5' y='8' width='2' height='2' fill='%23888'/%3E%3Crect x='7' y='8' width='2' height='2' fill='%23E91E63'/%3E%3Crect x='1' y='10' width='2' height='2' fill='%23555'/%3E%3Crect x='3' y='10' width='2' height='2' fill='%23888'/%3E%3Crect x='5' y='10' width='2' height='2' fill='%23555'/%3E%3Crect x='0' y='12' width='2' height='2' fill='%23FFE234'/%3E%3Crect x='1' y='12' width='2' height='2' fill='%23555'/%3E%3Crect x='3' y='12' width='2' height='2' fill='%23555'/%3E%3Crect x='0' y='14' width='2' height='2' fill='%23FFE234'/%3E%3Crect x='2' y='14' width='2' height='2' fill='%23FFE234'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated !important;
  animation: swordBounce 0.8s ease-in-out infinite !important;
}

.group.is-assistant .flex.gap-2.w-full.h-full.items-center.justify-center::after {
  content: '⚔ LOADING ⚔' !important;
  display: block !important;
  margin-left: 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #E91E63 !important;
  font-family: monospace !important;
  animation: dotFloat 1s ease-in-out infinite !important;
}

@keyframes swordBounce {
  0%, 100% { transform: translateY(0) rotate(-45deg); }
  50% { transform: translateY(-6px) rotate(-45deg); }
}

@keyframes dotFloat {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.5; transform: translateY(-3px); }
}

/* --- 顶部导航栏 --- */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(135deg, #FFFDF7, #FFF0F5) !important;
  border-bottom: 2.5px solid #222 !important;
  box-shadow: 0 3px 0 #222 !important;
}

/* --- 底部渐变遮罩 --- */
.bg-gradient-to-t {
  background: linear-gradient(to top, #FFFDF7 0%, transparent 100%) !important;
}

/* --- 输入框区域（通用选择器，兼容性更好） --- */
textarea,
div[contenteditable="true"],
input[type="text"] {
  border: 2.5px solid #222 !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 #222 !important;
  background: #fff !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}

textarea:focus,
div[contenteditable="true"]:focus,
input[type="text"]:focus {
  box-shadow: 4px 4px 0 #FF69B4 !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* --- 发送按钮（匹配截图中右下角的圆形/方形按钮） --- */
button[type="submit"],
div.cursor-pointer.flex.items-center.justify-center[class*="rounded"] {
  background: linear-gradient(135deg, #FF69B4, #E91E63) !important;
  border: 2.5px solid #222 !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 #222 !important;
  transition: all 0.15s ease !important;
}

button[type="submit"]:hover,
div.cursor-pointer.flex.items-center.justify-center[class*="rounded"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 4px 5px 0 #222 !important;
}

button[type="submit"]:active,
div.cursor-pointer.flex.items-center.justify-center[class*="rounded"]:active {
  transform: translateY(1px) !important;
  box-shadow: 1px 1px 0 #222 !important;
}

button[type="submit"] svg,
div.cursor-pointer.flex.items-center.justify-center[class*="rounded"] svg {
  fill: #fff !important;
  stroke: #fff !important;
}

/* --- 设置按钮图标 --- */
.sticky.w-full.top-0 svg {
  stroke: #E91E63 !important;
}

/* --- 聊天页面背景 --- */
div.group.ml-0 {
  background: #FFFDF7 !important;
}

/* --- 快捷回复按钮 --- */
span.cursor-pointer {
  border: 2px solid #222 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--white, #FFFDF7) !important;
  box-shadow: 2px 2px 0 #222 !important;
  transition: all 0.12s ease !important;
}

span.cursor-pointer:hover {
  background: #FFE234 !important;
  transform: translateY(-1px) !important;
}

span.cursor-pointer:active {
  transform: translateY(1px) !important;
  box-shadow: 0px 0px 0 #222 !important;
}