ai {
  /* CSS Variables for consistent theming ************************************/
  --rom-bg-dark: #1a1a1a;
  --rom-bg-medium-dark: #2a2a2a;
  --rom-bg-light-dark: #3a3a3a;
  --rom-text-primary: #eae0d0; /* A slightly creamy off-white */
  --rom-text-gold: #ffd700; /* Rich gold for highlights */
  --rom-accent-red-dark: #4b0000; /* Deep burgundy red */
  --rom-accent-red-medium: #8b0000; /* Brighter red for hover/accents */
  --rom-accent-russet: #8b4513; /* Earthy brown-red for rustic feel */
  --rom-border-subtle: rgba(var(--rom-accent-russet), 0.3);

  /* Fonts (assumed to be pre-loaded by user's setup) ***********************/
  --rom-font-trajan: 'TrajanPro', serif;
  --rom-font-fell: 'IM Fell French Canon SC', serif;

  /* Basic container styling for AI output ***********************************/
  font-family: var(--rom-font-fell);
  color: var(--rom-text-primary);
  line-height: 1.5;
  padding: 8px; /* Compact padding around the entire AI output block */
  background-color: var(--rom-bg-medium-dark); /* Base background for the AI generated block */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Soft shadow for depth */
  max-width: 100%; /* Ensure responsiveness */
  box-sizing: border-box; /* Include padding in element's total width and height */
  overflow: hidden; /* Prevent content overflow */
}

/* Details element for the collapsible status panel *************************/
ai details {
  background-color: var(--rom-bg-light-dark); /* Slightly lighter background for the panel */
  border: 1px solid var(--rom-accent-red-dark);
  border-radius: 6px;
  margin: 8px 0; /* Vertical spacing for clarity */
  padding-bottom: 4px; /* Small padding at the bottom of the panel content */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  /* Subtle geometric SVG background adds texture */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><rect width="80" height="80" fill="%233a3a3a"/><line x1="0" y1="0" x2="80" y2="80" stroke="%23ffd700" stroke-width="0.5" opacity="0.03"/><line x1="80" y1="0" x2="0" y2="80" stroke="%23ffd700" stroke-width="0.5" opacity="0.03"/><circle cx="40" cy="40" r="2" fill="%23ffd700" opacity="0.04"/></svg>');
  background-size: cover; /* Ensures pattern fills the entire details area */
}

/* Summary element for the panel title (always visible) *********************/
ai details summary {
  font-family: var(--rom-font-trajan);
  color: var(--rom-text-gold);
  font-size: 1.15em;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none; /* Remove default browser marker */
  display: flex; /* Allows custom icon positioning */
  align-items: center;
  position: relative;
  /* Gradient background for a rich, elevated look */
  background: linear-gradient(90deg, var(--rom-bg-light-dark) 0%, var(--rom-accent-red-dark) 100%);
  border-bottom: 1px solid var(--rom-accent-russet);
  border-radius: 6px 6px 0 0; /* Rounded top corners only */
  margin-bottom: 4px; /* Space between summary and first content item */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Subtle text depth */
  transition: background 0.3s ease; /* Smooth hover transition */
}

ai details summary:hover {
  background: linear-gradient(90deg, var(--rom-bg-light-dark) 0%, var(--rom-accent-red-medium) 100%);
}

/* Custom arrow for details expansion/collapse ******************************/
ai details summary::-webkit-details-marker {
  display: none; /* Hide default Webkit arrow */
}
ai details summary::before {
  content: '▶'; /* Right-pointing triangle as marker */
  margin-right: 8px;
  color: var(--rom-text-gold);
  font-size: 0.8em;
  transition: transform 0.2s ease-in-out; /* Smooth rotation */
}
ai details[open] summary::before {
  content: '▼'; /* Down-pointing triangle when opened */
  transform: rotate(0deg); /* Explicitly set for consistency */
}

/* Paragraphs with 't' attribute (section titles like '主角', 'NPC') ********/
ai p[t] {
  margin: 4px 8px; /* Compact margins for each section */
  padding: 6px 0;
  border-top: 1px dashed rgba(139, 69, 19, 0.3); /* Subtle dashed separator */
  position: relative;
  font-size: 0.9em;
}
ai p[t]:first-of-type {
  border-top: none; /* No top border for the very first section */
}

/* Visually distinct labels for each 'p[t]' section *************************/
ai p[t]::before {
  content: attr(t); /* Dynamically gets content from 't' attribute */
  font-family: var(--rom-font-trajan);
  color: var(--rom-text-gold);
  font-size: 0.95em;
  font-weight: bold;
  opacity: 0.8;
  display: block; /* Ensures it's on its own line */
  margin-bottom: 4px;
  border-bottom: 1px dotted rgba(255, 215, 0, 0.2); /* Subtle dotted underline */
  padding-bottom: 2px;
}

/* Individual data elements ('d' tags) **************************************/
ai d {
  display: block; /* Stack on new lines by default */
  margin-bottom: 2px;
  word-wrap: break-word;
  font-size: 0.9em;
  color: var(--rom-text-primary);
}

/* Special styling for context items (Time, Location, Weather) ***************/
ai p[t="ctx"] d {
  display: flex; /* Allows inline icon and text */
  align-items: center; /* Vertically align icon and text */
  margin-bottom: 4px;
  gap: 4px; /* Space between icon and text */
}

ai d[c="ti"]::before { content: '⏱️'; color: var(--rom-text-gold); }
ai d[c="lo"]::before { content: '📍'; color: var(--rom-text-gold); }
ai d[c="we"]::before { content: '☁️'; color: var(--rom-text-gold); }

/* Highlight first letter/icon of key data attributes ***********************/
ai d[c]::first-letter,
ai d[p_]::first-letter, /* Note: Used "p_" to avoid conflict with `p[t]` */
ai d[o]::first-letter,
ai d[k]::first-letter {
  color: var(--rom-text-gold);
  font-weight: bold;
}
/* For actual data attributes like 'p="id"' for Player Character section */
ai p[t="pc"] d::first-line {
  color: var(--rom-text-gold); /* Make the main label (e.g., "身份:") gold */
  font-weight: bold;
}
ai p[t="pc"] d {
  display: flex; /* Make pc details flow more horizontally */
  flex-wrap: wrap;
  gap: 4px 8px; /* Compact horizontal spacing */
}


/* Styling for player character name ('f' tag with 'n="nm"') ***************/
ai f[n="nm"] {
  font-family: var(--rom-font-trajan);
  color: var(--rom-text-gold);
  font-size: 1.25em; /* Larger font for main character name */
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); /* Glowing effect */
  display: inline-block; /* Allows vertical margin and shadow */
  margin-bottom: 6px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 215, 0, 0.5); /* Subtle underline */
}

/* Styling for NPC names (within 'd' tags) *********************************/
ai p[t="nc"] d {
  color: var(--rom-text-primary);
  display: flex; /* Ensure each NPC is on its own line by default, but content wraps */
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
ai p[t="nc"] d::first-line {
    color: var(--rom-text-gold); /* Highlight NPC names themselves */
    font-weight: bold;
}


/* Styling for Action items (making them look interactive) ******************/
ai p[t="ac"] d {
  cursor: pointer;
  background-color: var(--rom-bg-medium-dark);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--rom-bg-medium-dark); /* Default border to prevent jump on hover */
  display: block; /* Ensure each action is a separate block */
  color: var(--rom-text-primary);
}

ai p[t="ac"] d::before {
  content: ''; /* No default icon, can add later if wanted */
}

ai p[t="ac"] d:hover {
  background-color: var(--rom-accent-red-dark);
  color: var(--rom-text-gold);
  transform: translateX(4px); /* Slight shift to the right */
  border-color: var(--rom-accent-russet);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

/* Responsive adjustments for smaller screens *******************************/
@media (max-width: 768px) {
  ai {
    padding: 6px; /* Slightly less padding on very small screens */
  }
  ai details summary {
    font-size: 1.05em; /* Smaller summary title */
    padding: 6px 10px;
  }
  ai f[n="nm"] {
    font-size: 1.1em; /* Smaller protagonist name */
  }
  ai d {
    font-size: 0.85em; /* Smaller general text */
  }
  ai p[t] {
    margin: 2px 4px; /* Tighter section margins */
    padding: 4px 0;
  }
  ai p[t="ac"] d {
    font-size: 0.9em;
    padding: 3px 6px;
  }
}