<ai> {
  /* Scoped CSS Variables (取代 :root) */
  --ai-bg-color: #1a1a1a; /* Global dark background for the chat */
  --ai-paper-color: #2e2e2e; /* Card/panel background */
  --ai-text-color: #e0e0e0; /* Primary text color */
  --ai-text-muted-color: #999; /* Secondary/muted text color */
  --ai-header-color: #f0e6d2; /* Titles/important text color (a warm cream) */
  --ai-accent-color: #a93226; /* Accent color (deep red) */
  --ai-accent-hover-color: #c0392b; /* Slightly brighter red for hover */
  --ai-border-color: #444; /* General border color */
  --ai-active-border-color: #882a20; /* Darker red for active borders */

  --ai-font-serif: 'Noto Serif JP', Georgia, serif;
  --ai-font-sans: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;

  /* Basic Container Styling */
  display: block; /* Ensure it's a block-level element acting as the chat bubble */
  position: relative;
  max-width: 480px; /* Constrain width for mobile-first design */
  margin: 10px auto; /* Auto-center the bubble */
  background-color: var(--ai-paper-color);
  color: var(--ai-text-color);
  font-family: var(--ai-font-sans);
  font-size: 14px;
  line-height: 1.6;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  overflow: hidden; /* Contains child elements' overflow, e.g., shadows */

  /* Decorative background for the entire AI bubble */
  background-image:
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), /* Darken image */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect x="0" y="0" width="100" height="100" fill="%232e2e2e"/><path fill="%23444444" fill-opacity="0.1" d="M0 0h100v100H0zM25 50L50 25L75 50L50 75zM0 25h25v50H0zM75 25h25v50H75zM25 0v25h50V0zM25 75v25h50V75z"/></svg>');
  background-size: cover, 100px 100px; /* Cover for main, smaller for pattern */
  background-blend-mode: overlay; /* Blend the pattern subtly */
}

/* Header: Time, Location, Weather (hd) */
<ai> hd {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em; /* Space between items */
  padding: 12px 15px;
  background: linear-gradient(135deg, var(--ai-paper-color) 0%, #3a3a3a 100%);
  color: var(--ai-header-color);
  font-family: var(--ai-font-serif);
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--ai-accent-color);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  flex-wrap: wrap; /* Allow wrapping on small screens */
}
/* Separator for header elements */
<ai> .hdL {
  opacity: 0.6;
  font-weight: 400;
  color: var(--ai-text-muted-color);
}
<ai> hd > spn:nth-of-type(1) { /* Custom separator using list-item trick */
  display: list-item;
  list-style: disc; /* Use a disc for separation */
  color: var(--ai-text-muted-color);
  margin-left: -0.5em; /* Adjust to bring dot closer to text */
}
<ai> hd > spn.hdL:first-child { /* Hide dot if it's the very first element */
  list-style: none;
}

/* Article (Main Story/Dialogue) */
<ai> article {
  padding: 15px;
}
<ai> article > p {
  margin-bottom: 1em;
  font-weight: 300;
  color: var(--ai-text-color);
  font-size: 0.95em;
}
<ai> article > p:last-child {
  margin-bottom: 0;
}
<ai> article strong {
    color: var(--ai-header-color);
    font-weight: 400; /* Medium weight for emphasis */
}
<ai> article i {
    font-style: italic;
    color: var(--ai-accent-color);
}
/* Markdown h2 converted to <h2> */
<ai> h2 {
    font-family: var(--ai-font-serif);
    color: var(--ai-header-color);
    font-size: 1.2em; /* Smaller for internal H2 */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    padding-left: 0.6em;
    border-left: 3px solid var(--ai-accent-color);
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);
}

/* Details (Status Panel) */
<ai> details {
  background-color: var(--ai-bg-color); /* Darker background for status panel */
  border-top: 1px solid var(--ai-border-color);
  padding: 15px;
  margin-top: 15px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.3); /* Inner shadow for depth */
}
<ai> summary {
  display: flex;
  align-items: center;
  font-family: var(--ai-font-serif);
  font-size: 1.1em;
  font-weight: 700;
  color: var(--ai-header-color);
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--ai-border-color);
  list-style: none; /* Remove default marker */
  transition: color 0.2s ease;
}
<ai> summary:hover {
  color: var(--ai-accent-color);
}
/* Hide default marker for cross-browser consistency */
<ai> summary::-webkit-details-marker,
<ai> summary::marker {
  display: none;
}
/* Custom collapse indicator using pseudo-element */
<ai> summary::before {
  content: '▶'; /* Right arrow for closed state */
  margin-right: 0.6em;
  font-size: 0.8em;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease;
  color: var(--ai-accent-color);
}
<ai> details[open] summary::before {
  content: '▼'; /* Down arrow for open state */
  transform: rotate(0deg);
}

/* Status Sections (sec) */
<ai> sec {
  display: block;
  padding-top: 10px;
  margin-bottom: 15px;
  border-top: 1px dotted rgba(var(--ai-border-color), 0.5); /* Subtle separator between sections */
}
<ai> sec:first-of-type {
  border-top: none; /* No top border for the very first section */
}
<ai> sec:last-of-type {
  margin-bottom: 0;
}
/* Section Title using 't' attribute */
<ai> sec::before {
  content: attr(t);
  display: block;
  font-family: var(--ai-font-serif);
  font-size: 1em;
  color: var(--ai-accent-color); /* Use accent for section titles */
  font-weight: 700;
  margin-bottom: 8px;
  padding-left: 5px;
  border-left: 2px solid var(--ai-accent-color);
}

/* Key-Value List (dl, dt, dd) Styling */
<ai> dl {
  display: grid;
  grid-template-columns: auto 1fr; /* Label fixed width, value takes rest */
  gap: 4px 10px; /* Row and column gap */
  margin-bottom: 6px;
  align-items: baseline;
}
<ai> dl:last-child {
  margin-bottom: 0;
}
<ai> dt {
  color: var(--ai-text-muted-color);
  font-family: var(--ai-font-sans); /* Use sans for labels */
  font-size: 0.9em;
  font-weight: 400;
  white-space: nowrap; /* Prevent label wrapping */
  display: flex;
  align-items: center;
}
<ai> dd {
  color: var(--ai-text-color);
  font-size: 0.9em;
  line-height: 1.4;
  word-wrap: break-word; /* Ensure long text breaks */
  display: flex; /* Allow inline elements to align */
  flex-wrap: wrap; /* Allow wrapping of inline items */
  align-items: center;
}

/* Inline Separators */
<ai> .iSep, <ai> .iSec {
  display: inline-block;
  color: var(--ai-border-color);
  margin: 0 0.4em;
  font-weight: normal;
  font-size: 0.9em;
  vertical-align: middle;
}
<ai> .iSep::before { content: '/'; } /* Primary separator */
<ai> .iSec::before { content: '·'; } /* Secondary separator */

/* Custom Attribute Styling for DD Values */
/* Reputation Level (lv) */
<ai> dd[lv="1"] { color: #888; } /* Low (grey) */
<ai> dd[lv="2"] { color: var(--ai-text-color); } /* Medium (default text) */
<ai> dd[lv="3"] { color: var(--ai-header-color); font-weight: 500;} /* High (cream) */
<ai> dd[lv="4"] { color: #fccb6c; font-weight: 500;} /* Elite (gold) */
<ai> dd[lv="5"] { color: #e74c3c; font-weight: 600;} /* Legendary (red) */

/* Character Status (st) */
<ai> dd[st^="健康"] { color: #2ecc71; } /* Green for health */
<ai> dd[st^="警惕"] { color: #f1c40f; } /* Yellow for alert */
<ai> dd[st^="暗伤"] { color: var(--ai-accent-color); } /* Red for injury */
<ai> dd[st^="疲惫"] { color: #d35400; } /* Orange for tiredness */

/* Relationship Label (lbl rlt) */
<ai> lbl {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  font-family: var(--ai-font-sans);
  font-weight: bold;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 5px;
}
<ai> lbl[rlt="主从"] { background-color: var(--ai-accent-color); color: white; }
<ai> lbl[rlt="同盟"] { background-color: #27ae60; color: white; }
<ai> lbl[rlt="观望"] { background-color: #f39c12; color: white; }
<ai> lbl[rlt="敌对"] { background-color: #e74c3c; color: white; }
<ai> lbl[rlt="中立"] { background-color: #888; color: white; }

/* Influence Label (lbl inf) */
<ai> lbl[inf="高"] { background-color: #c0392b; color: white; }
<ai> lbl[inf="中"] { background-color: #f39c12; color: white; }
<ai> lbl[inf="低"] { background-color: #888; color: white; }

/* Status Text (st) for NPCs or General Status */
<ai> st {
  font-style: italic;
  color: var(--ai-text-muted-color);
}
<ai> st[data-status="危机"] { color: #e74c3c; font-weight: bold; }
<ai> st[data-status="安全"] { color: #2ecc71; }

/* Markdown Lists (Action Options) */
<ai> sec[t="行动"] dl dd {
  display: block; /* Each action option on its own line */
  cursor: pointer;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
  padding: 3px 0; /* Minimal padding */
}
<ai> sec[t="行动"] dl dd:hover {
  background-color: rgba(var(--ai-accent-color), 0.15); /* Light highlight on hover */
  border-radius: 4px;
  padding-left: 5px; /* Slight indent on hover */
}
/* Custom numbered list for actions */
<ai> sec[t="行动"] {
    counter-reset: action-item; /* Reset counter for each action section */
}
<ai> sec[t="行动"] dd::before {
  content: counter(action-item) ". ";
  counter-increment: action-item;
  color: var(--ai-accent-color);
  font-weight: bold;
  margin-right: 0.5em;
}

/* Ensure empty placeholders don't break layout too much */
<ai> dd:empty::before {
  content: '——'; /* More pronounced dash for empty fields */
  color: var(--ai-border-color);
}