/* Component Styles Start Here */ /* 中文：组件样式由此开始 */
.a { /* Formerly ui-beautifier-character-status-wrapper */ /* 中文：组件根容器的样式 */
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif; /* 中文：设置字体，优先Arial, 其次Helvetica Neue, Helvetica, 最后sans-serif */
max-width: 90vw; /* 中文：最大宽度为视口宽度的90% */
margin-left: auto; /* 中文：左外边距自动，用于水平居中 */
margin-right: auto; /* 中文：右外边距自动，用于水平居中 */
margin-bottom: 5px; /* 中文：下外边距20像素 */
display: flex; /* 中文：使用flex布局 */
flex-direction: column; /* 中文：flex子项垂直排列 */
align-items: center; /* 中文：flex子项在交叉轴上居中对齐 */
width: 100%; /* 中文：宽度为100% */
}
.a *,
.a *::before,
.a *::after { /* 中文：为.a内部所有元素及其伪元素设置通用盒模型及重置边距 */
box-sizing: border-box; /* 中文：盒模型采用border-box，宽度和高度包含内边距和边框 */
margin: 0; /* 中文：外边距为0 */
padding: 0; /* 中文：内边距为0 */
}
.a details { /* 新增规则 */
  text-align: center; /* 中文：使 details 元素内的行内块子元素 (如此处的 summary.c) 水平居中 */
}
.a summary.c { /* Formerly status-toggle-button, now applies to summary */ /* 中文：状态切换按钮（现为summary）样式 */
background-color: #10a049; /* 中文：背景颜色为绿色 */
color: white; /* 中文：文字颜色为白色 */
padding: 12px 25px; /* 中文：内边距，上下12px，左右25px */
border: none; /* 中文：无边框 */
border-radius: 25px; /* 中文：边框圆角25px，形成椭圆或胶囊形状 */
cursor: pointer; /* 中文：鼠标指针为手型 */
font-size: 1em; /* 中文：字体大小为当前上下文的1倍 */
font-weight: 500; /* 中文：字体粗细为500 (中等) */
text-align: center; /* 中文：文本居中对齐 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 中文：盒子阴影 */
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; /* 中文：背景色、阴影、变换的过渡效果，持续0.2秒，缓动函数ease */
margin-bottom: 5px; /* 中文：下外边距15px */
display: inline-block; /* 中文：显示为行内块元素，使其表现像按钮 */
list-style: none; /* 中文：移除summary默认的标记 (例如三角箭头) */
outline: none; /* 中文：移除点击时的浏览器默认焦点轮廓 (可根据可访问性需求调整) */
}
.a summary.c::-webkit-details-marker { /* 中文：移除 Webkit/Blink 浏览器中 summary 的默认标记 */
display: none;
}
.a summary.c::marker { /* 中文：移除 Firefox 等浏览器中 summary 的默认标记 */
display: none;
}
.a summary.c:hover { /* 中文：状态切换按钮（summary）鼠标悬停效果 */
background-color: #0056b3; /* 中文：背景颜色变为深蓝色 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 中文：阴影效果增强 */
transform: translateY(-2px); /* 中文：向上平移2px */
}
.a summary.c:active { /* 中文：状态切换按钮（summary）激活（点击时）效果 */
background-color: #004085; /* 中文：背景颜色变为更深的蓝色 */
transform: translateY(0px); /* 中文：恢复原始垂直位置 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 中文：阴影效果减弱 */
}
.a .d { /* Formerly status-bar-container, now content of details */ /* 中文：状态栏容器样式 (details 的内容区) */
background-color: #a1e9bd; /* 中文：背景颜色为淡绿色 */
border: 1px solid #dee2e6; /* 中文：1px宽的浅灰色实线边框 */
border-radius: 8px; /* 中文：边框圆角8px */
padding: 15px; /* 中文：内边距15px */
width: 100%; /* 中文：宽度为100% */
max-width: 1800px; /* 状态栏最大宽度，使其非常宽 */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* 中文：盒子阴影 */
color: #feb43f; /* 中文：文字颜色为橙黄色 */
opacity: 0; /* 中文：默认透明度为0 (完全透明，用于动画) */
transform: translateY(10px) scale(0.99); /* 中文：默认向下平移10px并缩小至99% (用于动画) */
transition: opacity 0.25s ease-out, transform 0.25s ease-out; /* 中文：透明度和变换的过渡效果，持续0.25秒，缓动函数ease-out */
max-height: calc(100vh - 180px); /* 中文：最大高度为视口高度减180px */
overflow-y: auto; /* 中文：垂直方向内容溢出时显示滚动条 */
}
.a details[open] > .d { /* 中文：当 details 元素展开时，其直接子元素 .d 的样式 */
display: block; /* 中文：确保在某些情况下正确显示并应用布局 */
opacity: 1; /* 中文：透明度为1 (完全不透明) */
transform: translateY(0) scale(1); /* 中文：恢复原始位置和大小 */
}
.a .e { /* Formerly status-header */ /* 中文：状态栏头部样式 */
text-align: center; /* 中文：文本居中对齐 */
font-size: 1.75em; /* 中文：字体大小为当前上下文的1.75倍 */
color: #0056b3; /* 中文：文字颜色为深蓝色 */
margin-bottom: 10px; /* 中文：下外边距10px */
padding-bottom: 10px; /* 中文：下内边距10px */
border-bottom: 2px solid #007bff30; /* 中文：2px宽的底部实线边框，颜色为带透明度的蓝色 */
font-weight: 600; /* 中文：字体粗细为600 (半粗) */
}
.a .f { /* Formerly header-subtitle */ /* 中文：头部副标题样式 */
text-align: center; /* 中文：文本居中对齐 */
font-size: 0.9em; /* 中文：字体大小为当前上下文的0.9倍 */
color: #b92d5d; /* 中文：文字颜色为深粉红色 (原注释为灰色) */
margin-bottom: 25px; /* 中文：下外边距25px */
font-style: italic; /* 中文：字体样式为斜体 */
}
.a .g { /* Formerly status-item */ /* 中文：状态条目样式 */
margin-bottom: 15px; /* 中文：下外边距15px */
display: flex; /* 中文：使用flex布局 */
align-items: flex-start; /* 中文：flex子项在交叉轴上顶部对齐 */
padding: 10px 0; /* 中文：上下内边距10px，左右为0 */
border-bottom: 1px solid #e9ecef; /* 中文：1px宽的浅灰色底部实线边框 */
}
.a .g:last-child { /* 中文：最后一个状态条目的样式 */
border-bottom: none; /* 中文：移除底部边框 */
}
.a .g strong { /* 中文：状态条目中strong元素（通常为标签）的样式 */
display: inline-block; /* 中文：显示为行内块元素 */
min-width: 90px; /* 中文：最小宽度90px */
color: #0056b3; /* 中文：文字颜色为深蓝色 */
margin-right: 20px; /* 中文：右外边距20px */
font-weight: 500; /* 中文：字体粗细为500 (中等) */
font-size: 0.95em; /* 中文：字体大小为当前上下文的0.95倍 */
flex-shrink: 0; /* 中文：flex项目不收缩 */
}
.a .g > span,
.a .g > div.h { /* div.h was div.emotion-wrapper */ /* 中文：状态条目中的span或div.h (原emotion-wrapper) 样式 */
flex-grow: 1; /* 中文：flex项目占据剩余空间 */
font-size: 0.95em; /* 中文：字体大小为当前上下文的0.95倍 */
color: #b92d5d; /* 中文：文字颜色为深粉红色 (原注释为深灰色) */
line-height: 1.6; /* 中文：行高为字体大小的1.6倍 */
}
.a .g > div.h { /* div.h was div.emotion-wrapper */ /* 中文：对div.h (原emotion-wrapper) 的特定样式 */
width: 0; /* 中文：宽度为0 (通常与flex-grow:1配合使用，以正确分配空间) */
}
.a .i { /* Formerly emotion-scale-container */ /* 中文：情绪刻度容器样式 */
display: flex; /* 中文：使用flex布局 */
align-items: center; /* 中文：flex子项在交叉轴上居中对齐 */
margin-bottom: 8px; /* 中文：下外边距8px */
width: 100%; /* 中文：宽度为100% */
}
.a .j { /* Formerly emotion-label */ /* 中文：情绪标签样式 */
font-size: 0.85em; /* 中文：字体大小为当前上下文的0.85倍 */
font-weight: 500; /* 中文：字体粗细为500 (中等) */
color: #555; /* 中文：文字颜色为中灰色 */
margin: 0 10px; /* 中文：上下外边距0，左右外边距10px */
flex-shrink: 0; /* 中文：flex项目不收缩 */
}
.a .k { color: #f08080; } /* Formerly label-purelove */ /* 中文：纯爱标签颜色 (淡珊瑚红) */
.a .l { color: #28a745; } /* Formerly label-ntr */ /* 中文：NTR标签颜色 (绿色) */
.a .m { /* Formerly progress-bar-wrapper */ /* 中文：进度条包装器样式 */
flex-grow: 1; /* 中文：flex项目占据剩余空间 */
background-color: #e9ecef; /* 中文：背景颜色为浅灰色 */
border-radius: 8px; /* 中文：边框圆角8px */
height: 20px; /* 中文：高度20px */
display: flex; /* 中文：使用flex布局 (用于内部进度段) */
overflow: hidden; /* 中文：内容溢出时隐藏 (确保圆角生效) */
}
.a .n { /* Formerly progress-segment */ /* 中文：进度段样式 */
height: 100%; /* 中文：高度为100% */
display: flex; /* 中文：使用flex布局 */
align-items: center; /* 中文：flex子项垂直居中 */
justify-content: center; /* 中文：flex子项水平居中 */
color: white; /* 中文：文字颜色为白色 */
font-weight: bold; /* 中文：字体加粗 */
font-size: 0.8em; /* 中文：字体大小为当前上下文的0.8倍 */
transition: width 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 中文：宽度变化的过渡效果，特定缓动函数 */
position: relative; /* 中文：相对定位 (为伪元素定位提供基准) */
}
.a .n::before { /* 中文：进度段的::before伪元素，用于条纹效果 */
content: ""; /* 中文：伪元素必需的content属性 */
position: absolute; /* 中文：绝对定位 */
top: 0; left: 0; /* 中文：定位到父元素左上角 */
width: 100%; height: 100%; /* 中文：占据整个父元素区域 */
background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent); /* 中文：45度角半透明白色条纹背景 */
background-size: 25px 25px; /* 中文：条纹图案的大小 */
opacity: 0.7; /* 中文：条纹透明度 */
}
.a .p { background-color: #28a745; } /* Formerly progress-bar-ntr */ /* 中文：NTR进度条颜色 (绿色) */
.a .p.q { border-top-left-radius: 7px; border-bottom-left-radius: 7px; } /* .progress-bar-ntr.left-rounded */ /* 中文：NTR进度条左侧圆角 */
.a .p.r { border-top-right-radius: 7px; border-bottom-right-radius: 7px; } /* .progress-bar-ntr.right-rounded */ /* 中文：NTR进度条右侧圆角 */
.a .o { background-color: #f08080; } /* Formerly progress-bar-purelove */ /* 中文：纯爱进度条颜色 (淡珊瑚红) */
.a .o.q { border-top-left-radius: 7px; border-bottom-left-radius: 7px; } /* .progress-bar-purelove.left-rounded */ /* 中文：纯爱进度条左侧圆角 */
.a .o.r { border-top-right-radius: 7px; border-bottom-right-radius: 7px; } /* .progress-bar-purelove.right-rounded */ /* 中文：纯爱进度条右侧圆角 */
.a .s { /* Formerly emotion-details */ /* 中文：情绪详情区域样式 */
font-size: 0.8em; /* 中文：字体大小为当前上下文的0.8倍 */
color: white; /* 中文：文字颜色为白色 */
margin-top: 10px; /* 中文：上外边距10px */
text-align: center; /* 中文：文本居中对齐 */
padding: 8px 10px; /* 中文：上下内边距8px，左右10px */
background-color: #43d37c; /* 中文：背景颜色为亮绿色 */
border-radius: 4px; /* 中文：边框圆角4px */
border: 1px solid #e9ecef; /* 中文：1px宽的浅灰色实线边框 */
}
.a .t { /* Formerly icon */ /* 中文：图标样式 */
margin-right: 8px; /* 中文：右外边距8px (用于图标和文本间距) */
}
/* Responsive Design */ /* 中文：响应式设计 */
@media (max-width: 768px) { /* 中文：当屏幕宽度小于等于768px时 */
.a {
max-width: 95vw; /* 中文：根容器最大宽度调整为视口宽度的95% */
}
.a .d { /* status-bar-container */ /* 中文：状态栏容器在平板设备上的样式调整 */
padding: 20px; /* 中文：内边距调整为20px */
}
.a .e { /* status-header */ /* 中文：状态头部在平板设备上的字体大小调整 */
font-size: 1.5em;
}
.a .g strong { /* status-item strong */ /* 中文：状态条目strong标签在平板设备上的样式调整 */
min-width: 80px; /* 中文：最小宽度调整为80px */
margin-right: 15px; /* 中文：右外边距调整为15px */
}
}
@media (max-width: 480px) { /* 中文：当屏幕宽度小于等于480px时 (针对手机等小屏幕设备) */
/* body styles here are external, not changed */ /* 中文：(此注释指外部body样式，非本组件内，不作更改) */
.a {
max-width: 100%; /* 中文：根容器最大宽度调整为100% */
}
.a summary.c { /* status-toggle-button (summary) */ /* 中文：状态切换按钮（summary）在小屏幕上的样式调整 */
font-size: 0.9em; /* 中文：字体大小调整为0.9em */
padding: 10px 20px; /* 中文：内边距调整为上下10px，左右20px */
}
.a .d { /* status-bar-container */ /* 中文：状态栏容器在小屏幕上的样式调整 */
padding: 15px; /* 中文：内边距调整为15px */
max-height: calc(100vh - 120px); /* 中文：最大高度调整为视口高度减120px */
}
.a .e { /* status-header */ /* 中文：状态头部在小屏幕上的字体大小调整 */
font-size: 1.3em;
}
.a .g { /* status-item */ /* 中文：状态条目在小屏幕上的布局调整 */
flex-direction: column; /* 中文：flex子项垂直排列 */
align-items: stretch; /* 中文：flex子项在交叉轴上拉伸以填充容器 */
padding: 8px 0; /* 中文：上下内边距调整为8px，左右0 */
}
.a .g strong { /* 中文：状态条目strong标签在小屏幕上的样式调整 */
min-width: auto; /* 中文：最小宽度设为自动 */
margin-right: 0; /* 中文：移除右外边距 */
margin-bottom: 5px; /* 中文：增加下外边距5px */
font-size: 0.9em; /* 中文：字体大小调整为0.9em */
}
.a .g > span,
.a .g > div.h { /* div.h was div.emotion-wrapper */ /* 中文：状态条目中span或div.h在小屏幕上的样式调整 */
font-size: 0.9em; /* 中文：字体大小调整为0.9em */
width: 100%; /* 中文：宽度设为100% (因父元素flex-direction为column) */
}
.a .j { /* emotion-label */ /* 中文：情绪标签在小屏幕上的样式调整 */
font-size: 0.75em; /* 中文：字体大小调整为0.75em */
margin: 0 5px; /* 中文：外边距调整为上下0，左右5px */
}
.a .m { /* progress-bar-wrapper */ /* 中文：进度条包装器在小屏幕上的高度调整 */
height: 18px;
}
.a .n { /* progress-segment */ /* 中文：进度段在小屏幕上的字体大小调整 */
font-size: 0.7em;
}
}
/* --- 开始：作用于 .chat-answer-container .bg-gray-100\/90.curtain-host-container 内部的样式 --- */
.chat-answer-container .bg-gray-100\/90.curtain-host-container {
  position: relative;
  padding: 5px;
  width: 111%;
  margin-left: -15px;
  margin-top: -15px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .curtain-toggle-input {
  display: none;
}
/* 修改：按钮包裹层(现在是label)样式 */
.chat-answer-container .bg-gray-100\/90.curtain-host-container .action-buttons-wrapper {
  display: block; /* 让 label 占据一行，以便 text-align 生效 */
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  /* position: relative; /* 如果按钮需要相对于它定位，可以加上 */
  /* z-index: 200; /* 确保label（按钮容器）在幕帘之上，但通常按钮自身的z-index足够 */
  /* cursor: default; /* label 默认可能是 text 光标，如果按钮span完全覆盖则不明显 */
}
/* 通用按钮样式 - 现在作用于 span */
.chat-answer-container .bg-gray-100\/90.curtain-host-container .curtain-trigger-button {
  display: inline-block;
  padding: 10px 30px;
  background-color: #28a745;
  color: white;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  position: relative; /* 确保 z-index 生效 */
  z-index: 200; /* 层叠顺序，确保按钮在窗帘之上 */
  transition: background-color 0.2s ease;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .curtain-trigger-button:hover {
  background-color: #218838;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .close-action-button {
  display: none; /* 初始隐藏 */
  background-color: #007bff;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .close-action-button:hover {
  background-color: #0056b3;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .initial-visible-content {
  opacity: 1;
  visibility: visible;
  height: 800px; /* 注意：如果内容可能超出，建议用 max-height */
  max-height: 800px;
  box-sizing: border-box;
  padding: 5px;
  overflow-y: auto;
  overflow-wrap: break-word;
  background-color: #cbf0ff;
  transition: opacity 0.3s ease-out 0.8s,
              visibility 0s linear 1.1s,
              max-height 0.3s ease-out 0.8s,
              padding-top 0.3s ease-out 0.8s,
              padding-bottom 0.3s ease-out 0.8s;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .curtain-revealed-main-content {
  opacity: 0;
  visibility: hidden;
  max-height: 0px;
  padding: 5px;
  background-color: #f0fff0;
  position: relative;
  z-index: 1;
  transition: opacity 0.5s ease-in-out 0.8s,
              visibility 0s linear 1.3s, /* 调整以匹配新的动画流程 */
              max-height 0.7s ease-in-out 0.7s;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .curtain-system-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .curtain-half {
  width: 50%;
  height: 100%;
  background-color: #006400;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.2)),
                    linear-gradient(to right, #006400, #007800);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  transform: translateX(0%);
  transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .left-curtain-panel {
  transform-origin: left;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .right-curtain-panel {
  transform-origin: right;
}
/* --- 当checkbox被选中时 (通过 :has() 和兄弟选择器 ~ ) --- */
/* 1. 按钮文本切换 (input 和 button spans 是兄弟) */
/* 选择器调整： .action-buttons-wrapper 现在是 label，它包含 input 和按钮 span */
.chat-answer-container .bg-gray-100\/90.curtain-host-container .action-buttons-wrapper .curtain-toggle-input:checked ~ .open-action-button {
  display: none;
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container .action-buttons-wrapper .curtain-toggle-input:checked ~ .close-action-button {
  display: inline-block;
}
/* 2. 使窗帘系统可见并覆盖 */
/* 选择器调整：使用 :has() 检查 label 内的 input 状态，然后作用于 label 的兄弟元素 .curtain-system-overlay */
.chat-answer-container .bg-gray-100\/90.curtain-host-container > .action-buttons-wrapper:has(.curtain-toggle-input:checked) ~ .curtain-system-overlay {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s, 0s;
}
/* 3. 窗帘打开动画 */
.chat-answer-container .bg-gray-100\/90.curtain-host-container > .action-buttons-wrapper:has(.curtain-toggle-input:checked) ~ .curtain-system-overlay .left-curtain-panel {
  transform: translateX(-100%);
}
.chat-answer-container .bg-gray-100\/90.curtain-host-container > .action-buttons-wrapper:has(.curtain-toggle-input:checked) ~ .curtain-system-overlay .right-curtain-panel {
  transform: translateX(100%);
}
/* 4. 隐藏初始内容 */
.chat-answer-container .bg-gray-100\/90.curtain-host-container > .action-buttons-wrapper:has(.curtain-toggle-input:checked) ~ .initial-visible-content {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-out,
              visibility 0s linear 0.2s,
              max-height 0.2s ease-out,
              padding-top 0.2s ease-out,
              padding-bottom 0.2s ease-out;
}
/* 5. 显示窗帘后的主要内容 */
.chat-answer-container .bg-gray-100\/90.curtain-host-container > .action-buttons-wrapper:has(.curtain-toggle-input:checked) ~ .curtain-revealed-main-content {
  opacity: 1;
  visibility: visible;
  height: 800px; /* 或者你希望的固定高度 */
  max-height: 800px; /* 确保内容区域有高度 */
  overflow-y: auto !important;
  overflow-wrap: break-word;
  box-sizing: border-box;
  /* 过渡效果定义在元素自身，由 :checked 状态触发 */
}
/* 6. 窗帘完全打开后，使其不再捕获鼠标事件 */
.chat-answer-container .bg-gray-100\/90.curtain-host-container > .action-buttons-wrapper:has(.curtain-toggle-input:checked) ~ .curtain-system-overlay {
    transition: pointer-events 0s linear 1.2s,
                opacity 0.3s ease-out, /* 保持原样 */
                visibility 0s linear 0.3s; /* 保持原样 */
    pointer-events: none;
}