/* =========================================================
   深渊之茧｜诺斯特罗莫II号生存终端 CSS【通用版】
   Abyss Cocoon · Universal Survival Terminal UI

   适配目标：
   - 普通 Markdown 页面
   - AI聊天/角色卡网站
   - 酒馆类界面
   - details / summary 状态栏
   - 自定义标签：tl、row、tag、inf、danger、bond、system、res、r 等

   说明：
   - 已去掉对单一网站的强绑定依赖
   - 仍保留 #customized-answer-content / #customized-question-content 作为兼容项
   - 修复了不通用的 :contains() 写法
   - 保留科幻惊悚、飞船黑匣子、扫描线、警报、资源胶囊风格
========================================================= */


/* ==================== 0. 全局变量 ==================== */

:root {
  --abyss-bg: #05070b;
  --abyss-bg-2: #090d13;
  --abyss-card: rgba(8, 14, 22, 0.88);
  --abyss-card-2: rgba(12, 20, 31, 0.92);

  --ice-blue: #6fdcff;
  --ice-blue-soft: rgba(111, 220, 255, 0.45);
  --ice-blue-dim: rgba(68, 168, 210, 0.24);

  --x-purple: #a980ff;
  --x-purple-soft: rgba(169, 128, 255, 0.42);
  --x-purple-dim: rgba(130, 88, 230, 0.22);

  --alarm-red: #ff3b4f;
  --alarm-red-soft: rgba(255, 59, 79, 0.38);
  --alarm-red-dim: rgba(150, 18, 32, 0.28);

  --amber: #ffb55c;
  --amber-soft: rgba(255, 181, 92, 0.34);

  --text-main: #dbe9f2;
  --text-soft: #9fb7c8;
  --text-dim: #6f8392;

  --line: rgba(130, 210, 255, 0.22);
  --line-strong: rgba(145, 225, 255, 0.52);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-blue:
    0 0 18px rgba(76, 201, 255, 0.16),
    inset 0 0 20px rgba(76, 201, 255, 0.035);

  --shadow-purple:
    0 0 18px rgba(169, 128, 255, 0.16),
    inset 0 0 18px rgba(169, 128, 255, 0.035);

  --font-ui:
    "Rajdhani",
    "Orbitron",
    "Share Tech Mono",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  --font-body:
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans SC",
    sans-serif;
}


/* ==================== 1. 通用正文容器 ==================== */

:where(
  .markdown-body,
  .prose,
  .message-content,
  .message-body,
  .message,
  .chat-message,
  .chat-content,
  .mes_text,
  .mes-block,
  .swipes,
  .custom-html,
  .custom-content,
  .ai-response,
  .bot-message,
  .assistant-message,
  .response-content,
  .content,
  .reply-content,
  .text-content,
  .article-content,
  article,
  main
) {
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.78;
  letter-spacing: 0.02em;
}


/* ==================== 2. 页面底色 ==================== */
/* 不想影响网站整体背景的话，可以删掉 body 这一段 */

body {
  background:
    radial-gradient(circle at 16% 8%, rgba(78, 200, 255, 0.08), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255, 60, 80, 0.05), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(169, 128, 255, 0.06), transparent 34%),
    linear-gradient(180deg, #05070b 0%, #070b12 46%, #030508 100%);
}


/* ==================== 3. AI回复区 / 用户发言区兼容 ==================== */

:where(
  #customized-answer-content,
  .assistant-message,
  .bot-message,
  .ai-response,
  .message.assistant,
  .chat-message.assistant,
  .mes[is_user="false"],
  .mes_text
) {
  position: relative;
  color: var(--text-main);
}

#customized-answer-content {
  margin: 10px 0;
  padding: 14px 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(111, 220, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(8, 14, 22, 0.96), rgba(5, 8, 13, 0.92)),
    radial-gradient(circle at 10% 0%, rgba(111, 220, 255, 0.08), transparent 30%);
  box-shadow:
    0 0 22px rgba(76, 201, 255, 0.10),
    inset 0 0 24px rgba(76, 201, 255, 0.035);
  overflow: hidden;
}

#customized-answer-content::before {
  content: "◆ NARRATIVE ENGINE";
  display: block;
  margin: 0 0 10px;
  padding: 6px 10px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(111, 220, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 25, 36, 0.7);
  color: rgba(180, 235, 255, 0.86);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(111, 220, 255, 0.45);
}

:where(
  #customized-question-content,
  .user-message,
  .message.user,
  .chat-message.user
) {
  position: relative;
  color: #eaded0;
}

#customized-question-content {
  margin: 10px 0;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 181, 92, 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 181, 92, 0.10), transparent 28%),
    linear-gradient(135deg, rgba(13, 13, 14, 0.94), rgba(8, 10, 14, 0.92));
  box-shadow:
    0 0 18px rgba(255, 181, 92, 0.08),
    inset 0 0 18px rgba(255, 181, 92, 0.025);
}

#customized-question-content::before {
  content: "◇ CREW INPUT";
  display: block;
  margin-bottom: 8px;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 181, 92, 0.3);
  background: rgba(42, 25, 11, 0.42);
  color: rgba(255, 214, 160, 0.88);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
}


/* ==================== 4. 正文基础元素 ==================== */

:where(p, li) {
  color: inherit;
}

:where(
  .markdown-body,
  .prose,
  .message-content,
  .message-body,
  .chat-content,
  .mes_text,
  .ai-response,
  .response-content,
  article,
  main
) p {
  margin: 0.72em 0;
}

:where(
  .markdown-body,
  .prose,
  .message-content,
  .message-body,
  .chat-content,
  .mes_text,
  article,
  main
) strong {
  color: #f1fbff;
  text-shadow: 0 0 8px rgba(111, 220, 255, 0.18);
}

:where(
  .markdown-body,
  .prose,
  .message-content,
  .message-body,
  .chat-content,
  .mes_text,
  article,
  main
) em {
  color: #d7c9ff;
  font-style: normal;
  text-shadow: 0 0 8px rgba(169, 128, 255, 0.18);
}

:where(
  .markdown-body,
  .prose,
  .message-content,
  .message-body,
  .chat-content,
  .mes_text,
  article,
  main
) :where(h1, h2, h3, h4) {
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
  color: #e9f9ff;
  border-bottom: 1px solid rgba(111, 220, 255, 0.18);
  padding-bottom: 6px;
  text-shadow: 0 0 12px rgba(111, 220, 255, 0.22);
}

:where(
  .markdown-body,
  .prose,
  .message-content,
  .message-body,
  .chat-content,
  .mes_text,
  article,
  main
) hr {
  height: 1px;
  border: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(111, 220, 255, 0.42),
      rgba(169, 128, 255, 0.34),
      transparent
    );
  margin: 16px 0;
}

blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--x-purple);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(169, 128, 255, 0.075);
  color: #d8ccff;
}


/* ==================== 5. details / summary 通用资料卡 ==================== */

details {
  position: relative;
  box-sizing: border-box;
  margin: 13px 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(111, 220, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(9, 16, 24, 0.92), rgba(4, 7, 12, 0.94)),
    radial-gradient(circle at 100% 0%, rgba(111, 220, 255, 0.08), transparent 28%);
  box-shadow: var(--shadow-blue);
  overflow: hidden;
}

details::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(111, 220, 255, 0.08),
      transparent 18%,
      transparent 82%,
      rgba(111, 220, 255, 0.08)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%);
  opacity: 0.7;
}

summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 12px 58px 12px 16px;
  min-height: 24px;
  color: #e8f9ff;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  background:
    linear-gradient(
      90deg,
      rgba(111, 220, 255, 0.16),
      rgba(169, 128, 255, 0.06),
      transparent
    ),
    rgba(255, 255, 255, 0.018);
  border-bottom: 1px solid rgba(111, 220, 255, 0.14);
  border-left: 3px solid rgba(111, 220, 255, 0.45);
  text-shadow: 0 0 10px rgba(111, 220, 255, 0.28);
  user-select: none;
}

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

summary::after {
  content: "OPEN";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: 10px;
  color: rgba(111, 220, 255, 0.65);
  border: 1px solid rgba(111, 220, 255, 0.24);
  border-radius: 999px;
  padding: 2px 7px;
}

details[open] {
  border-color: rgba(169, 128, 255, 0.38);
  box-shadow: var(--shadow-purple);
}

details[open] summary::after {
  content: "LOCK";
  color: rgba(255, 181, 92, 0.86);
  border-color: rgba(255, 181, 92, 0.34);
}

details > *:not(summary) {
  position: relative;
  z-index: 1;
  margin-left: 15px;
  margin-right: 15px;
}

details > :last-child {
  margin-bottom: 14px;
}

details strong {
  color: #f2fbff;
}

details ul,
details ol {
  margin: 8px 0 10px;
  padding-left: 20px;
}

details li {
  margin: 4px 0;
}

details li::marker {
  color: var(--ice-blue);
}


/* ==================== 6. 不同 details 自动区分 ==================== */

details:nth-of-type(1) {
  border-color: rgba(169, 128, 255, 0.32);
  background:
    radial-gradient(circle at 0% 0%, rgba(169, 128, 255, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(13, 8, 20, 0.94), rgba(4, 6, 11, 0.96));
}

details:nth-of-type(1) summary {
  color: #eadfff;
  background:
    linear-gradient(
      90deg,
      rgba(169, 128, 255, 0.2),
      rgba(111, 220, 255, 0.06),
      transparent
    );
  text-shadow: 0 0 12px rgba(169, 128, 255, 0.34);
}

details:nth-of-type(1)::after {
  content: "COGNITIVE TRACE";
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(169, 128, 255, 0.28);
  pointer-events: none;
}

details:nth-of-type(4),
details:nth-of-type(5) {
  border-color: rgba(169, 128, 255, 0.36);
  background:
    radial-gradient(circle at 96% 10%, rgba(169, 128, 255, 0.13), transparent 32%),
    radial-gradient(circle at 10% 100%, rgba(111, 220, 255, 0.07), transparent 32%),
    linear-gradient(145deg, rgba(12, 9, 20, 0.96), rgba(5, 7, 12, 0.94));
}

details:nth-of-type(4) summary,
details:nth-of-type(5) summary {
  border-left-color: rgba(169, 128, 255, 0.62);
  color: #efe7ff;
}

details:nth-of-type(4) li::marker,
details:nth-of-type(5) li::marker {
  color: var(--x-purple);
}

details:nth-of-type(6) {
  border-color: rgba(255, 59, 79, 0.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 59, 79, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(16, 8, 11, 0.94), rgba(5, 7, 12, 0.96));
}

details:nth-of-type(6) summary {
  border-left-color: rgba(255, 59, 79, 0.58);
  color: #ffe6e9;
}

details:nth-of-type(6) li::marker {
  color: var(--alarm-red);
}

details:nth-of-type(7) {
  border-color: rgba(255, 181, 92, 0.3);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 181, 92, 0.09), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255, 59, 79, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(14, 12, 9, 0.96), rgba(5, 7, 12, 0.94));
}

details:nth-of-type(7) summary {
  border-left-color: rgba(255, 181, 92, 0.58);
  color: #fff1dc;
}

details:nth-of-type(7) li::marker {
  color: var(--amber);
}

details:last-of-type {
  border-color: rgba(111, 220, 255, 0.3);
  background:
    radial-gradient(circle at 50% 0%, rgba(111, 220, 255, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(8, 15, 22, 0.96), rgba(5, 7, 12, 0.96));
}

details:last-of-type summary {
  color: #eaffff;
}


/* ==================== 7. 行动推荐列表 ==================== */

details:last-of-type ol,
details:last-of-type ul {
  counter-reset: action;
  list-style: none;
  padding-left: 0;
  margin: 12px 0 14px;
}

details:last-of-type ol li,
details:last-of-type ul li {
  position: relative;
  margin: 9px 0;
  padding: 10px 12px 10px 44px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(111, 220, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(111, 220, 255, 0.10), rgba(111, 220, 255, 0.025));
  color: #e7f8ff;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

details:last-of-type ol li::before,
details:last-of-type ul li::before {
  counter-increment: action;
  content: "0" counter(action);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  color: var(--ice-blue);
  text-shadow: 0 0 8px rgba(111, 220, 255, 0.48);
}

details:last-of-type ol li:hover,
details:last-of-type ul li:hover {
  border-color: rgba(169, 128, 255, 0.42);
  background:
    linear-gradient(90deg, rgba(169, 128, 255, 0.14), rgba(111, 220, 255, 0.05));
  transform: translateX(2px);
}


/* ==================== 8. 自定义标签：危险 / 羁绊 / 系统 / 备注 ==================== */

danger,
.danger {
  display: block;
  margin: 10px 0;
  padding: 10px 12px 10px 38px;
  position: relative;
  border: 1px solid rgba(255, 59, 79, 0.34);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(255, 59, 79, 0.18), rgba(255, 59, 79, 0.035)),
    rgba(12, 6, 8, 0.78);
  color: #ffd9dd;
  box-shadow: 0 0 16px rgba(255, 59, 79, 0.12);
}

danger::before,
.danger::before {
  content: "!";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--alarm-red);
  color: #130306;
  font-weight: 900;
  text-align: center;
  line-height: 17px;
  box-shadow: 0 0 12px rgba(255, 59, 79, 0.6);
}

bond,
.bond {
  display: block;
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid rgba(169, 128, 255, 0.35);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 10% 0%, rgba(169, 128, 255, 0.16), transparent 36%),
    linear-gradient(90deg, rgba(169, 128, 255, 0.13), rgba(111, 220, 255, 0.04));
  color: #eadfff;
  box-shadow: 0 0 16px rgba(169, 128, 255, 0.11);
}

bond::before,
.bond::before {
  content: "X-23 / BOND";
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(210, 190, 255, 0.7);
}

system,
.system {
  display: block;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(111, 220, 255, 0.28);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(111, 220, 255, 0.12), transparent),
    rgba(5, 14, 20, 0.74);
  color: #dff8ff;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
}

system::before,
.system::before {
  content: "SYSTEM // ";
  color: var(--ice-blue);
}

note,
.note {
  display: block;
  margin: 10px 0;
  padding: 9px 12px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(255, 181, 92, 0.08);
  color: #ffe6c5;
}


/* ==================== 9. 生存资源胶囊标签 ==================== */

res,
.res {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

r,
.res-item {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(111, 220, 255, 0.22);
  background: rgba(8, 18, 26, 0.78);
  color: #dff8ff;
  font-size: 13px;
  box-shadow: inset 0 0 10px rgba(111, 220, 255, 0.04);
}

r[oxygen],
.r-oxygen {
  border-color: rgba(111, 220, 255, 0.38);
  color: #c7f4ff;
}

r[water],
.r-water {
  border-color: rgba(94, 230, 255, 0.34);
  color: #c9fbff;
}

r[food],
.r-food {
  border-color: rgba(255, 181, 92, 0.34);
  color: #ffe1b8;
}

r[med],
.r-med {
  border-color: rgba(210, 245, 255, 0.38);
  color: #effcff;
}

r[ammo],
.r-ammo {
  border-color: rgba(255, 96, 96, 0.36);
  color: #ffd1d1;
}

r[threat],
.r-threat {
  border-color: rgba(255, 59, 79, 0.46);
  color: #ffcfd5;
  background: rgba(55, 8, 14, 0.5);
}


/* ==================== 10. 表格 / 代码块 ==================== */

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(7, 13, 20, 0.8);
  border: 1px solid rgba(111, 220, 255, 0.18);
}

th,
td {
  padding: 9px 10px;
  border: 1px solid rgba(111, 220, 255, 0.13);
}

th {
  color: #eaffff;
  background: rgba(111, 220, 255, 0.10);
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
}

td {
  color: #cfe1ec;
}

code {
  padding: 2px 5px;
  border-radius: 6px;
  color: #9eeaff;
  background: rgba(111, 220, 255, 0.09);
  border: 1px solid rgba(111, 220, 255, 0.12);
  font-family:
    "Share Tech Mono",
    "Consolas",
    "Menlo",
    "Monaco",
    monospace;
}

pre {
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(111, 220, 255, 0.18);
  background: rgba(2, 6, 10, 0.82);
  color: #dff8ff;
  overflow-x: auto;
}

pre code {
  padding: 0;
  border: none;
  background: transparent;
}


/* ==================== 11. 输入框 / 按钮通用兼容 ==================== */

:where(
  #ai-chat-input,
  textarea,
  input[type="text"],
  input[type="search"],
  input:not([type]),
  [contenteditable="true"]
) {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(111, 220, 255, 0.28) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(111, 220, 255, 0.08), transparent 30%),
    rgba(5, 9, 14, 0.94) !important;
  color: #e9f9ff !important;
  box-shadow:
    0 0 18px rgba(111, 220, 255, 0.08),
    inset 0 0 18px rgba(111, 220, 255, 0.035) !important;
  outline: none !important;
}

:where(
  #ai-chat-input,
  textarea,
  input[type="text"],
  input[type="search"],
  input:not([type]),
  [contenteditable="true"]
):focus {
  border-color: rgba(169, 128, 255, 0.46) !important;
  box-shadow:
    0 0 20px rgba(169, 128, 255, 0.18),
    inset 0 0 20px rgba(111, 220, 255, 0.04) !important;
}

:where(
  #ai-send-button,
  #ai-mod-button2,
  button,
  input[type="button"],
  input[type="submit"],
  [role="button"]
) {
  border-radius: 999px !important;
  border: 1px solid rgba(111, 220, 255, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(111, 220, 255, 0.18), rgba(169, 128, 255, 0.12)),
    rgba(6, 12, 18, 0.88) !important;
  color: #e9f9ff !important;
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
  box-shadow:
    0 0 14px rgba(111, 220, 255, 0.10),
    inset 0 0 10px rgba(255, 255, 255, 0.025);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

:where(
  #ai-send-button,
  #ai-mod-button2,
  button,
  input[type="button"],
  input[type="submit"],
  [role="button"]
):hover {
  border-color: rgba(169, 128, 255, 0.45) !important;
  background:
    linear-gradient(135deg, rgba(169, 128, 255, 0.24), rgba(111, 220, 255, 0.14)),
    rgba(8, 14, 22, 0.96) !important;
  transform: translateY(-1px);
  box-shadow:
    0 0 18px rgba(169, 128, 255, 0.18),
    inset 0 0 14px rgba(111, 220, 255, 0.04);
}


/* ==================== 12. 常见自定义面板标签兼容 ==================== */

tl,
time,
ap,
cal,
tr,
row,
tag,
inf,
design,
name,
tags,
tg,
q {
  box-sizing: border-box;
}

tl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(111, 220, 255, 0.2);
  border-radius: var(--radius-md);
  background: rgba(6, 12, 18, 0.74);
}

tl time,
tl cal {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(111, 220, 255, 0.09);
  color: #dff8ff;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.05em;
}

ap {
  margin-left: 6px;
  color: #b7d9e7;
}

tr {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(111, 220, 255, 0.14);
  background: rgba(7, 13, 20, 0.72);
}

tag {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  color: #041018;
  background: var(--ice-blue);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

inf {
  color: #d8eaf4;
}

design {
  display: block;
  margin: 10px 0;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(169, 128, 255, 0.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(169, 128, 255, 0.12), transparent 30%),
    rgba(7, 10, 16, 0.82);
}

name {
  display: block;
  margin-bottom: 8px;
  color: #f2ecff;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

name i {
  margin-left: 8px;
  color: rgba(169, 128, 255, 0.65);
  font-size: 12px;
  font-style: normal;
}

tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}

tg {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(169, 128, 255, 0.28);
  background: rgba(169, 128, 255, 0.08);
  color: #e8dcff;
  font-size: 12px;
}

q {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--x-purple);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(169, 128, 255, 0.07);
  color: #e6ddff;
}


/* ==================== 13. 可选关键词高亮类 ==================== */

.hl-danger {
  color: #ffd5da;
  text-shadow: 0 0 8px rgba(255, 59, 79, 0.38);
}

.hl-bond {
  color: #eadfff;
  text-shadow: 0 0 8px rgba(169, 128, 255, 0.38);
}

.hl-system {
  color: #baf1ff;
  text-shadow: 0 0 8px rgba(111, 220, 255, 0.38);
}


/* ==================== 14. 动画：扫描 / 警报呼吸 ==================== */

@keyframes abyssScan {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }

  15% {
    opacity: 0.45;
  }

  100% {
    transform: translateY(260%);
    opacity: 0;
  }
}

@keyframes alarmPulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(255, 59, 79, 0.08);
  }

  50% {
    box-shadow: 0 0 22px rgba(255, 59, 79, 0.22);
  }
}

details[open]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 34%;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(111, 220, 255, 0.08),
      transparent
    );
  animation: abyssScan 3.8s ease-in-out infinite;
}

danger,
.danger,
r[threat],
.r-threat {
  animation: alarmPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  details[open]::after,
  danger,
  .danger,
  r[threat],
  .r-threat {
    animation: none !important;
  }

  * {
    transition: none !important;
  }
}


/* ==================== 15. 图片 / 链接 / 长内容兜底 ==================== */

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(111, 220, 255, 0.18);
  box-shadow: 0 0 18px rgba(111, 220, 255, 0.10);
}

* {
  word-break: break-word;
}

a {
  color: #8ee8ff;
  text-decoration: none;
  border-bottom: 1px dashed rgba(142, 232, 255, 0.35);
}

a:hover {
  color: #e9fbff;
  border-bottom-color: rgba(169, 128, 255, 0.55);
  text-shadow: 0 0 8px rgba(111, 220, 255, 0.32);
}


/* ==================== 16. 手机端适配 ==================== */

@media screen and (max-width: 768px) {
  :where(
    .markdown-body,
    .prose,
    .message-content,
    .message-body,
    .chat-message,
    .chat-content,
    .mes_text,
    .ai-response,
    .response-content,
    article,
    main
  ) {
    font-size: 14px;
    line-height: 1.72;
  }

  #customized-answer-content,
  #customized-question-content {
    padding: 12px 10px;
    border-radius: 14px;
  }

  #customized-answer-content::before,
  #customized-question-content::before {
    font-size: 10px;
    letter-spacing: 0.1em;
    max-width: calc(100% - 8px);
    white-space: normal;
  }

  details {
    margin: 10px 0;
    border-radius: 14px;
  }

  summary {
    padding: 11px 58px 11px 12px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  summary::after {
    right: 10px;
    font-size: 9px;
    padding: 2px 6px;
  }

  details > *:not(summary) {
    margin-left: 11px;
    margin-right: 11px;
  }

  details:last-of-type ol li,
  details:last-of-type ul li {
    padding: 9px 10px 9px 38px;
    font-size: 13.5px;
  }

  res,
  .res,
  tags {
    gap: 6px;
  }

  r,
  .res-item,
  tg {
    font-size: 12px;
    padding: 4px 8px;
  }

  tl {
    padding: 8px;
  }

  tl time,
  tl cal {
    font-size: 12px;
    padding: 4px 8px;
  }

  row {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  tag {
    min-width: auto;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  danger,
  .danger,
  bond,
  .bond,
  system,
  .system,
  note,
  .note {
    font-size: 13.5px;
  }
}


/* ==================== 17. 超窄屏适配 ==================== */

@media screen and (max-width: 420px) {
  :where(
    .markdown-body,
    .prose,
    .message-content,
    .message-body,
    .chat-content,
    .mes_text,
    article,
    main
  ) {
    font-size: 13px;
  }

  summary {
    font-size: 13px;
    padding-right: 54px;
  }

  :where(h1, h2, h3) {
    font-size: 1.05em;
  }

  #customized-answer-content::before {
    content: "◆ NARRATIVE";
  }

  #customized-question-content::before {
    content: "◇ CREW";
  }

  details:last-of-type ol li,
  details:last-of-type ul li {
    transform: none !important;
  }

  name {
    font-size: 16px;
  }
}