/* Container for the entire AI output, to scope CSS */
ai {
  display: block;
  font-family: 'Noto Sans SC', sans-serif; /* 假设平台支持中文字体 */
  color: #E0E0E0; /* 整体字体颜色 */
  background: linear-gradient(135deg, #221A1A 0%, #150E0E 100%); /* 暗色系渐变背景 */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  padding: 10px;
  margin: 10px 0;
  overflow: hidden; /* 防止内容溢出 */
  position: relative;
  border: 1px solid rgba(255, 165, 0, 0.2); /* 淡淡的金色边框 */
}

/* Pseudo-element for decorative background texture */
ai::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="1" cy="1" r="0.5" fill="%233A2A2A"/><circle cx="6" cy="6" r="0.5" fill="%233A2A2A"/></svg>') repeat; /* 细微的纹理 */
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* General styling for details/summary */
details {
  background-color: rgba(30, 22, 22, 0.8); /* 深红色半透明背景 */
  border: 1px solid rgba(255, 165, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

details:hover {
  border-color: rgba(255, 165, 0, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

summary {
  font-weight: bold;
  cursor: pointer;
  padding: 12px 15px;
  background: linear-gradient(90deg, rgba(255, 165, 0, 0.2) 0%, rgba(255, 165, 0, 0.05) 100%); /* 金色渐变条 */
  color: #FFD700; /* 金色字体 */
  font-size: 1.1em;
  border-bottom: 1px solid rgba(255, 165, 0, 0.2);
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

summary::before {
  content: '▶'; /* 折叠图标 */
  display: inline-block;
  width: 1em;
  transition: transform 0.2s ease;
  color: #FFC107;
}

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

/* Content within details */
details > div, details > p, details > ul, details > table, details > strong {
  padding: 5px 15px 10px; /* 内部内容左右边距 */
  line-height: 1.6;
  font-size: 0.95em;
  color: #C0C0C0;
}

details > p > strong { /* 针对例如 "姓名：" 这样的键 */
  color: #FFC107; /* 强调色 */
  margin-right: 5px;
  font-size: 1em;
}

/* Specific styling for list items in description */
details li {
  list-style-type: '✧ '; /* 自定义列表前缀 */
  margin-left: 15px;
  margin-bottom: 3px;
  color: #B0B0B0;
}

details li strong {
  color: #FFD700; /* 金色，强调斗技/异火名称 */
}

/* Table styling for Memory Zone */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.85em;
}

th, td {
  border: 1px solid rgba(255, 165, 0, 0.15);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background-color: rgba(255, 165, 0, 0.1);
  color: #FFD700;
  font-weight: normal;
}

td {
  background-color: rgba(40, 30, 30, 0.7);
  color: #B0B0B0;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px dashed rgba(255, 165, 0, 0.2);
  margin: 15px 0;
}

/* Placeholder specific styling */
p { /* Using p for common text blocks, not actual paragraphs */
  margin: 0;
  padding: 0;
}

/* Top bar specific styling (assuming it's also a details block) */
details summary {
  /* No special adjustments needed here, as global summary style already applies */
}

/* Highlighted elements, like '当前情况' content */
details > *:first-child:not(summary) { /* Matches the first content element after summary */
  padding-top: 10px;
}

/* Specific styling for NPC descriptions when gender is female */
/* This part assumes the HTML will include comments like <!--如果NPC性别为女则显示如下内容-->
   and then the specific lines. Since CSS can't target based on comments,
   and we cannot modify the `状态栏设计` function, I'll style based on likely text patterns
   or assume there's a specific tag in the future. For now, general text styling. */
/* If those descriptions are always enclosed in specific tags, e.g., <d class="female-body">,
   then we can target them. For now, the markdown list item styling will apply. */

/* Custom styling for different sections inside details for better readability if needed */
/* Example: .task-description, .event-summary could be used if we had custom classes in HTML */

/* Adjustments for tight layout */
details > p > br { /* Reduce line breaks excessive spacing */
  display: block;
  content: "";
  margin-top: -0.5em; /* Adjust as needed */
}

/* Action Recommendation list */
details ul {
  padding-left: 20px;
  margin-top: 5px;
}

details ul li {
  list-style-type: decimal; /* Numbered list */
  color: #FFD700;
  margin-bottom: 5px;
}

details ul li span { /* For the actual action text */
  color: #E0E0E0;
}