/* =============================================
   🍬 甜甜校园风 · 禁忌花园 v8.0 完整版
   日间明亮清爽 / 黑夜柔和护眼 / 自动切换
   包含：平台基础样式 + 对话标签 + tg-HTML组件
   ============================================= */

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,150,160,0.3); border-radius: 10px; }
* { scrollbar-color: rgba(255,150,160,0.3) transparent; }

/* ============================================
   💬 对话角色标签（日间鲜亮 / 黑夜柔和）
   ============================================ */
c { color: #c8851a !important; font-weight: 700; }
g { color: #e05570 !important; font-weight: 600; }
m { color: #4488cc !important; font-weight: 600; }
[data-theme="dark"] c { color: #f5d06b !important; }
[data-theme="dark"] g { color: #ff9eb5 !important; }
[data-theme="dark"] m { color: #8dc8f0 !important; }

/* ========== 💗 用户消息气泡（日间-奶油底） ========== */
.group.is-user div.border.border-muted {
    background: #fff8f6 !important;
    border: 1.5px solid #fccdd3 !important;
    border-radius: 6px 20px 6px 20px !important;
    color: #4a3035 !important;
    box-shadow: 0 2px 8px rgba(255,180,180,0.12) !important;
}

/* ========== 💙 AI消息气泡（日间-天蓝底） ========== */
.group.is-assistant div.border.border-muted {
    background: #f8fafd !important;
    border: 1.5px solid #cdddf5 !important;
    border-radius: 20px 6px 20px 6px !important;
    color: #303648 !important;
    box-shadow: 0 2px 8px rgba(180,200,240,0.12) !important;
}

/* ========== 🌙 黑夜 - 用户气泡 ========== */
[data-theme="dark"] .group.is-user div.border.border-muted {
    background: #26202a !important;
    border-color: #543a48 !important;
    color: #ddc8ce !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
}

/* ========== 🌙 黑夜 - AI气泡 ========== */
[data-theme="dark"] .group.is-assistant div.border.border-muted {
    background: #1e2430 !important;
    border-color: #364860 !important;
    color: #ccd4e0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
}

/* ========== ✏️ 输入框（日间-笔记本格线感） ========== */
#prompt-input [data-slot="input-group"] {
    border: 1.5px solid #e8ccd0 !important;
    border-radius: 16px !important;
    background: rgba(255,252,250,0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
}
#prompt-input [data-slot="input-group"]:focus-within {
    border-color: #f08c9e !important;
    box-shadow: 0 0 0 3px rgba(240,140,158,0.1) !important;
}
#prompt-input textarea {
    border-radius: 16px !important;
    caret-color: #f08c9e !important;
    font-size: 0.94rem !important;
}
#prompt-input textarea::placeholder { color: #c0a8ae !important; font-style: italic; }

/* ========== 🌙 输入框黑夜 ========== */
[data-theme="dark"] #prompt-input [data-slot="input-group"] {
    border-color: #4a3840 !important;
    background: rgba(22,18,24,0.7) !important;
}
[data-theme="dark"] #prompt-input [data-slot="input-group"]:focus-within {
    border-color: #e07088 !important;
    box-shadow: 0 0 0 3px rgba(224,112,136,0.15) !important;
}
[data-theme="dark"] #prompt-input textarea::placeholder { color: #7a6a70 !important; }

/* ========== 📨 发送按钮 ========== */
button[type="submit"] {
    background: #f08c9e !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(240,140,158,0.3) !important;
    transition: all 0.2s ease !important;
}
button[type="submit"]:hover {
    background: #f5a0b0 !important;
    transform: scale(1.06) !important;
    box-shadow: 0 4px 16px rgba(240,140,158,0.4) !important;
}
button[type="submit"]:active { transform: scale(0.95) !important; }
[data-theme="dark"] button[type="submit"] { background: #d06078 !important; }

/* ========== 🔘 工具栏按钮 ========== */
#prompt-input-header button,
#prompt-input-footer button:not([type="submit"]) {
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}
#prompt-input-header button:hover,
#prompt-input-footer button:not([type="submit"]):hover {
    background: rgba(240,140,158,0.1) !important;
}

/* ========== 💮 文中强调 ========== */
.rili-markdown-renderer em, [class*="markdown"] em { color: #e05570 !important; }
.rili-markdown-renderer strong, [class*="markdown"] strong { color: #d04460 !important; }

/* ========== 🖱 选中文字 ========== */
::selection { background: rgba(240,140,158,0.2) !important; }

/* ========== 🔗 链接 ========== */
.rili-markdown-renderer a { color: #e05570 !important; }
.rili-markdown-renderer a:hover { color: #c04058 !important; }

/* ========== 🔲 代码块 ========== */
.rili-markdown-renderer code, [class*="markdown"] code {
    background: rgba(240,140,158,0.06) !important;
    border: 1px solid rgba(240,140,158,0.18) !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
    font-size: 0.9em !important;
    color: #d04460 !important;
}
[data-theme="dark"] .rili-markdown-renderer code { color: #ff9eb5 !important; }

/* ========== 📋 引用块 ========== */
.rili-markdown-renderer blockquote, [class*="markdown"] blockquote {
    border-left: 3px solid #fccdd3 !important;
    background: rgba(240,140,158,0.03) !important;
    padding: 8px 16px !important;
    border-radius: 0 6px 6px 0 !important;
}

/* ========== ✨ 消息入场（轻弹入） ========== */
.group.is-user > div > div, .group.is-assistant > div > div {
    animation: msgIn 0.35s cubic-bezier(0.34,1.3,0.64,1) !important;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== 🌈 水平线 ========== */
.rili-markdown-renderer hr, [class*="markdown"] hr {
    border: none !important; height: 1px !important;
    background: linear-gradient(to right, transparent, #e8ccd0, transparent) !important;
    margin: 16px 0 !important;
}

/* ========== 📊 表格 ========== */
.rili-markdown-renderer th, [class*="markdown"] th {
    background: rgba(240,140,158,0.08) !important;
    padding: 8px 12px !important;
    border-bottom: 2px solid rgba(240,140,158,0.2) !important;
}
.rili-markdown-renderer td, [class*="markdown"] td {
    padding: 6px 12px !important;
    border-bottom: 1px solid rgba(240,140,158,0.08) !important;
}

/* ========== 🎀 顶栏 ========== */
nav.sticky.top-0 {
    border-bottom: 1px solid rgba(240,140,158,0.12) !important;
}
[data-theme="dark"] nav.sticky.top-0 {
    border-bottom-color: rgba(224,112,136,0.15) !important;
}

/* ========== 📱 移动端 ========== */
@media (max-width: 768px) {
    .group.is-user div.border.border-muted { border-radius: 4px 16px 4px 16px !important; }
    .group.is-assistant div.border.border-muted { border-radius: 16px 4px 16px 4px !important; }
    #prompt-input [data-slot="input-group"] { border-radius: 14px !important; }
}

/* =================================================================
   禁忌花园 v8.0 · tg- HTML 状态栏组件
   包含：CSS变量 + HUD标签 + 对话头像块 + 折叠面板 + 
         角色面板 + NPC栏 + 灯箱
   适配：平台日间/黑夜模式 [data-theme="dark"]
   ================================================================= */

/* ===== CSS 变量（日间） ===== */
:root {
  --tg-card: rgba(255,252,250,0.5);
  --tg-muted: rgba(240,140,158,0.04);
  --tg-fg: #4a3035;
  --tg-border: #e8ccd0;
  --tg-accent: #e05570;
  --tg-gold: #c8851a;
  --tg-blue: #4488cc;
  --tg-purple: #7c5cbf;
  --tg-text-muted: #999;
  --tg-shadow: 0 2px 12px rgba(200,120,140,0.08);
  --tg-avatar-w: 72px;
  --tg-avatar-h: 108px;
  --tg-hero-w: 120px;
  --tg-hero-h: 180px;
  --tg-npc-w: 56px;
  --tg-npc-h: 84px;
  --tg-radius-sm: 8px;
  --tg-radius-md: 12px;
  --tg-radius-lg: 18px;
}
[data-theme="dark"] {
  --tg-card: rgba(22,18,24,0.45);
  --tg-muted: rgba(255,255,255,0.03);
  --tg-fg: #ddc8ce;
  --tg-border: #4a3840;
  --tg-accent: #e07088;
  --tg-gold: #f0c860;
  --tg-blue: #8dc8f0;
  --tg-purple: #a78bfa;
  --tg-text-muted: #9ca3af;
  --tg-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

/* ===== HUD 标签 ===== */
.tg-hud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tg-hud-tag {
  font-size: 10px; padding: 4px 10px; border-radius: 14px;
  background: var(--tg-muted); color: var(--tg-fg);
  border: 1px solid var(--tg-border);
  display: inline-flex; align-items: center; gap: 3px;
}
.tg-hud-tag.world { border-color: var(--tg-accent); color: var(--tg-accent); }
.tg-hud-tag.time  { border-color: var(--tg-blue); color: var(--tg-blue); }

/* ===== 分割线 ===== */
.tg-divider { border: none; border-top: 1px solid var(--tg-border); margin: 14px 0; }

/* ===== 叙事正文 ===== */
.tg-narrative { font-size: 15px; line-height: 1.9; }
.tg-narrative p { text-indent: 2em; margin: 0 0 12px; }
.tg-narrative p:last-child { margin-bottom: 0; }
.tg-scene-label {
  text-indent: 0 !important; font-size: 11px; color: var(--tg-text-muted);
  margin-bottom: 6px !important; letter-spacing: 0.04em;
}
.tg-scene {
  border-left: 3px solid var(--tg-accent); padding-left: 12px; margin: 10px 0;
  background: var(--tg-muted); border-radius: 0 var(--tg-radius-sm) var(--tg-radius-sm) 0;
}

/* ===== 对话头像块 ===== */
.tg-dialogue {
  display: flex; gap: 14px; margin: 10px 0; padding: 12px 16px;
  background: var(--tg-muted); border-radius: 10px; border: 1px solid var(--tg-border);
}
.tg-dialogue-avatar {
  flex-shrink: 0; width: var(--tg-avatar-w); height: var(--tg-avatar-h);
  border-radius: var(--tg-radius-sm); background: var(--tg-muted);
  border: 2px solid var(--tg-border); display: flex; align-items: center;
  justify-content: center; font-size: 28px; font-weight: 700; color: var(--tg-text-muted);
  background-size: cover; background-position: center top; cursor: pointer;
}
.tg-dialogue-avatar.pc { border-color: var(--tg-gold); }
.tg-dialogue-avatar.female { border-color: var(--tg-accent); }
.tg-dialogue-avatar.male { border-color: var(--tg-blue); }
.tg-dialogue-content { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.tg-dialogue-speaker { font-weight: 700; font-size: 13px; }
.tg-dialogue-speaker.pc { color: var(--tg-gold); }
.tg-dialogue-speaker.female { color: var(--tg-accent); }
.tg-dialogue-speaker.male { color: var(--tg-blue); }
.tg-dialogue-text { font-size: 14px; line-height: 1.6; color: var(--tg-fg); }

/* ===== 折叠面板 ===== */
.tg-panel {
  border: 1px solid var(--tg-border); border-radius: var(--tg-radius-md);
  margin: 10px 0; overflow: hidden; background: var(--tg-card);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tg-panel > summary {
  cursor: pointer; padding: 10px 16px; font-size: 12px; font-weight: 600;
  background: var(--tg-muted); list-style: none;
  display: flex; align-items: center; gap: 6px; color: var(--tg-fg);
}
.tg-panel > summary::-webkit-details-marker { display: none; }
.tg-panel > summary::before {
  content: '▸'; font-size: 10px; transition: transform 0.2s;
  color: var(--tg-text-muted);
}
.tg-panel[open] > summary::before { transform: rotate(90deg); }
.tg-panel-content { padding: 14px 16px; }

/* ===== 角色面板内部（主角和配角共用） ===== */
.tg-status-panel { display: flex; flex-wrap: wrap; gap: 16px; }
.tg-status-left {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 8px; min-width: 120px;
}
.tg-hero-avatar {
  width: var(--tg-hero-w); height: var(--tg-hero-h);
  border-radius: var(--tg-radius-md); background: var(--tg-muted);
  border: 2px solid var(--tg-accent); display: flex; align-items: center;
  justify-content: center; font-size: 38px; font-weight: 700; color: var(--tg-accent);
  background-size: cover; background-position: center top; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(224,85,112,0.06);
}
.tg-hero-avatar.pc-card {
  border-color: var(--tg-gold); box-shadow: 0 0 0 4px rgba(200,133,26,0.08);
}
.tg-hero-name { font-size: 15px; font-weight: 700; text-align: center; color: var(--tg-fg); }
.tg-hero-identity { font-size: 11px; color: var(--tg-text-muted); text-align: center; }
.tg-hero-state { font-size: 11px; text-align: center; line-height: 1.4; color: var(--tg-fg); }
.tg-eip-badge {
  display: inline-block; font-size: 14px; font-weight: 600; color: var(--tg-purple);
  background: rgba(124,92,191,0.06); padding: 1px 8px; border-radius: 6px; margin: 2px 0;
}
.tg-status-right {
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; min-width: 200px;
}
.tg-bar-group { display: flex; flex-direction: column; gap: 6px; }
.tg-progress-row { display: flex; flex-direction: column; gap: 2px; }
.tg-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--tg-fg); }
.tg-progress { height: 5px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; }
.tg-progress-fill { height: 100%; border-radius: 3px; }
.tg-fill-pink  { background: linear-gradient(90deg,#f08c9e,#e05570); }
.tg-fill-gold  { background: linear-gradient(90deg,#fbbf24,#d4a843); }
.tg-fill-blue  { background: linear-gradient(90deg,#60a5fa,#4488cc); }
.tg-fill-red   { background: linear-gradient(90deg,#f87171,#ef4444); }
.tg-fill-green { background: linear-gradient(90deg,#4ade80,#34d399); }
.tg-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tg-tag {
  font-size: 10px; padding: 3px 8px; border-radius: 10px;
  background: var(--tg-muted); border: 1px solid var(--tg-border); color: var(--tg-fg);
}
.tg-tag.pink { border-color: var(--tg-accent); color: var(--tg-accent); }
.tg-tag.gold { border-color: var(--tg-gold); color: var(--tg-gold); }
.tg-tag.blue { border-color: var(--tg-blue); color: var(--tg-blue); }
.tg-info-row { display: flex; gap: 6px; font-size: 11px; line-height: 1.5; }
.tg-info-label { color: var(--tg-text-muted); flex-shrink: 0; min-width: 40px; }
.tg-info-content { color: var(--tg-fg); }
.tg-relation {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 6px 10px; background: var(--tg-muted); border-radius: 8px;
}
.tg-stage { font-weight: 600; color: var(--tg-accent); }
.tg-stage-desc { font-size: 10px; color: var(--tg-text-muted); }
.tg-stats-row { display: flex; gap: 12px; }
.tg-stat-item { text-align: center; }
.tg-stat-label { font-size: 9px; color: var(--tg-text-muted); }
.tg-stat-value { font-weight: 700; font-size: 14px; color: var(--tg-fg); }

/* ===== NPC 栏 ===== */
.tg-npc-section {
  border: 1px solid var(--tg-border); border-radius: var(--tg-radius-md);
  margin: 10px 0; overflow: hidden; background: var(--tg-card);
}
.tg-npc-header {
  padding: 10px 16px; background: var(--tg-muted); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; color: var(--tg-fg);
  border-bottom: 1px solid var(--tg-border);
}
.tg-npc-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
.tg-npc-card {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--tg-muted); border-radius: 10px; border: 1px solid var(--tg-border);
  min-width: 130px; flex: 1 1 auto; max-width: calc(50% - 6px);
}
.tg-npc-avatar {
  width: var(--tg-npc-w); height: var(--tg-npc-h); border-radius: var(--tg-radius-sm);
  background: var(--tg-muted); border: 2px solid var(--tg-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--tg-text-muted);
  background-size: cover; background-position: center top; cursor: pointer; flex-shrink: 0;
}
.tg-npc-avatar.female { border-color: var(--tg-accent); }
.tg-npc-avatar.male { border-color: var(--tg-blue); }
.tg-npc-info { display: flex; flex-direction: column; gap: 1px; }
.tg-npc-name { font-weight: 600; font-size: 12px; color: var(--tg-fg); }
.tg-npc-role { font-size: 9px; color: var(--tg-text-muted); }

/* ===== 系统维护块折叠 ===== */
.tg-sys-fold {
  font-family: 'SF Mono','Consolas',monospace; font-size: 10px; line-height: 1.5;
  color: var(--tg-text-muted); white-space: pre-wrap; word-break: break-all;
}

/* ===== 灯箱 ===== */
.tg-lightbox {
  display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.9); z-index: 99999; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tg-lightbox-active {
  display: flex !important; align-items: center; justify-content: center;
}
.tg-lightbox-img {
  width: 80vw; height: 70vh; background-size: contain; background-position: center;
  background-repeat: no-repeat; border-radius: 16px;
  box-shadow: 0 0 60px rgba(120,100,200,0.35); border: 3px solid rgba(160,140,220,0.4);
}
.tg-lightbox-close {
  position: absolute; top: 16px; right: 24px; color: #fff; font-size: 28px;
  cursor: pointer; z-index: 100001; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(0,0,0,0.4);
}

/* ========== tg- 组件移动端 ========== */
@media (max-width: 500px) {
  :root {
    --tg-avatar-w: 52px; --tg-avatar-h: 78px;
    --tg-hero-w: 80px; --tg-hero-h: 120px;
    --tg-npc-w: 44px; --tg-npc-h: 66px;
  }
  .tg-status-panel { flex-direction: column; align-items: center; }
  .tg-npc-card { max-width: 100%; }
  .tg-dialogue { gap: 10px; padding: 10px 12px; }
  .tg-dialogue-text { font-size: 13px; }
}