/* ============================================
   薰衣草 × 幻蓝星穹 — 联合适配版 (Mod 内置 CSS)
   视觉逻辑：深紫底色 + 幻蓝交互锚点 + 极光染色正文
   适配机型：桌面端双列布局 / 移动端流式堆叠
   ============================================ */

/* ----- 0. 核心变量 (融合幻蓝星穹发光因子) ----- */
#installedBuiltInCss {
  --lv-bg-deep: #070912;               /* 更深邃的宇宙底色 */
  --lv-bg-mid: rgba(22, 18, 42, 0.95);
  --lv-accent: #9f7aea;                /* 薰衣草主色 */
  --lv-cyan: #00e5ff;                  /* 幻蓝星穹发光色 */
  --lv-accent-soft: rgba(159, 122, 234, 0.2);
  --lv-cyan-soft: rgba(0, 229, 255, 0.15);
  --lv-text: #e5ddf0;
  --lv-text-dim: rgba(180, 170, 210, 0.65);
  --lv-panel-grad: linear-gradient(180deg, rgba(40, 30, 70, 0.6), rgba(15, 12, 30, 0.45));
  --lv-glow-cyan: 0 0 12px rgba(0, 229, 255, 0.25);
}

/* ----- 1. 聊天场域渲染 ----- */
#installedBuiltInCss {
  background: var(--lv-bg-deep) !important;
  color: var(--lv-text) !important;
}

.markdown-body {
  color: var(--lv-text) !important;
  background: transparent !important;
  line-height: 1.8 !important;
}

/* 重点逻辑染色：幻蓝发光 */
.markdown-body strong {
  color: var(--lv-cyan) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
  font-weight: 700 !important;
}

/* 感性描写染色：薰衣草柔光 */
.markdown-body em {
  color: #d6bcfa !important;
  font-style: normal !important;
  border-bottom: 1px dashed rgba(159, 122, 234, 0.4);
}

/* ----- 2. AI 气泡皮肤 (星穹琉璃感) ----- */
.chat-answer-container .bg-gray-100\/90,
.group .bg-gray-100\/90 {
  background: var(--lv-panel-grad) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--lv-accent-soft) !important;
  border-left: 3px solid var(--lv-cyan) !important; /* 幻蓝侧边逻辑锁 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* ----- 3. 顶部仪表盘 (逻辑同步栏) ----- */
.top-bar-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 20px;
  margin-bottom: 15px;
  background: rgba(15, 12, 35, 0.8);
  border: 1px solid var(--lv-cyan-soft);
  border-radius: 16px;
  box-shadow: var(--lv-glow-cyan);
}

.top-bar-container .status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-bar-container .icon {
  color: var(--lv-cyan) !important;
  animation: star-pulse 3s infinite ease-in-out;
}

.top-bar-container .value {
  color: #fff;
  font-family: 'Consolas', monospace;
  letter-spacing: 0.5px;
}

@keyframes star-pulse {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px var(--lv-cyan)); }
  50% { opacity: 0.6; transform: scale(1.1); filter: drop-shadow(0 0 8px var(--lv-cyan)); }
}

/* ----- 4. 叙事文本标签 ----- */
text {
  display: block;
  padding: 8px 4px;
  font-size: 15.5px;
  letter-spacing: 0.02em;
}

text p { margin-bottom: 1.2em; text-indent: 2em; }

/* ----- 5. 状态面板 (薰衣草毛玻璃) ----- */
.status-panel {
  margin: 12px 0;
  border: 1px solid var(--lv-accent-soft);
  border-radius: 14px;
  background: rgba(40, 30, 70, 0.3);
  backdrop-filter: blur(10px);
}

.status-panel .panel-title {
  padding: 12px 18px;
  color: var(--lv-cyan);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.status-panel .panel-title::after {
  color: var(--lv-violet);
}

/* ----- 6. 行动推荐 (双色交互按钮) ----- */
.recommended-actions-panel {
  margin-top: 20px;
  padding: 18px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 18px;
  border: 1px solid var(--lv-accent-soft);
}

.action-btn {
  background: rgba(159, 122, 234, 0.05) !important;
  border: 1px solid rgba(159, 122, 234, 0.15) !important;
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.action-btn:hover {
  transform: translateY(-2px) translateX(4px) !important;
  border-color: var(--lv-cyan) !important;
  background: rgba(0, 229, 255, 0.08) !important;
  box-shadow: var(--lv-glow-cyan) !important;
  color: var(--lv-cyan) !important;
}

/* ----- 7. 输入区沉浸式适配 ----- */
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--lv-bg-deep) 40%, transparent) !important;
}

[data-tour="chat-compose"] {
  background-color: var(--lv-bg-mid) !important