/* ========== 都市暗夜 · 聊天框美化 ========== */

/* 1. 统一气泡基底：半透明深色毛玻璃 + 暗夜霓虹光晕 */
.group.is-user > div:first-child,
.group.is-assistant > div:first-child {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(56, 189, 248, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(168, 85, 247, 0.18) 0%, transparent 50%),
    linear-gradient(145deg, rgba(10, 15, 30, 0.92) 0%, rgba(15, 10, 30, 0.95) 100%) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px 18px 18px 18px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 20px rgba(99, 102, 241, 0.12) !important;
  color: #f8fafc !important;
}

/* 2. AI 气泡：冷蓝黑城市夜空 */
.group.is-assistant > div:first-child {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(34, 211, 238, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
    linear-gradient(145deg, rgba(8, 15, 30, 0.94) 0%, rgba(18, 14, 40, 0.96) 100%) !important;
  border-radius: 18px 18px 18px 6px !important;
}

/* 3. 用户气泡：霓虹紫红都市 */
.group.is-user > div:first-child {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(236, 72, 153, 0.24) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(168, 85, 247, 0.22) 0%, transparent 50%),
    linear-gradient(145deg, rgba(30, 15, 45, 0.95) 0%, rgba(10, 8, 20, 0.96) 100%) !important;
  border-radius: 18px 18px 6px 18px !important;
}

/* 4. 正文文字：强制高亮可读 */
.rili-markdown-renderer,
.rili-markdown-renderer * {
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.rili-markdown-renderer {
  position: relative !important;
  z-index: 1 !important;
}

.rili-markdown-renderer a {
  color: #67e8f9 !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.rili-markdown-renderer blockquote {
  border-left: 3px solid rgba(139, 92, 246, 0.6) !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
}

.rili-markdown-renderer pre,
.rili-markdown-renderer code {
  background: rgba(2, 6, 23, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

.rili-markdown-renderer code {
  color: #a5f3fc !important;
}

/* 5. 底部操作按钮区：暗夜霓虹控制条 */
.bg-muted.rounded.flex {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.bg-muted.rounded.flex button svg.lucide {
  color: rgba(255, 255, 255, 0.9) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
}

.bg-muted.rounded.flex button:hover svg.lucide {
  color: #e2a8ff !important;
  stroke: #e2a8ff !important;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.6)) !important;
}

/* 6. 底部 token 消耗信息：半透明暗色底，浅色文字 */
.text-xs.font-mono.text-muted-foreground {
  color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
}

/* 7. 加载动画：隐藏原生三点，替换为三颗霓虹灯接力闪烁 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
  display: none !important;
}

.flex.gap-2.w-full.h-full.items-center.justify-center {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2764%27%20height=%2732%27%20viewBox=%270%200%2064%2032%27%3E%3Ccircle%20cx=%2716%27%20cy=%2716%27%20r=%276%27%20fill=%27%2322d3ee%27%20opacity=%270.3%27%3E%3Canimate%20attributeName=%27opacity%27%20values=%270.2;1;0.2%27%20dur=%271.2s%27%20begin=%270s%27%20repeatCount=%27indefinite%27/%3E%3C/circle%3E%3Ccircle%20cx=%2732%27%20cy=%2716%27%20r=%276%27%20fill=%27%23a78bfa%27%20opacity=%270.3%27%3E%3Canimate%20attributeName=%27opacity%27%20values=%270.2;1;0.2%27%20dur=%271.2s%27%20begin=%270.2s%27%20repeatCount=%27indefinite%27/%3E%3C/circle%3E%3Ccircle%20cx=%2748%27%20cy=%2716%27%20r=%276%27%20fill=%27%23f472b6%27%20opacity=%270.3%27%3E%3Canimate%20attributeName=%27opacity%27%20values=%270.2;1;0.2%27%20dur=%271.2s%27%20begin=%270.4s%27%20repeatCount=%27indefinite%27/%3E%3C/circle%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 64px 32px !important;
}

/* 8. 悬停消息时显示底部操作按钮（避免破坏暗夜氛围） */
.group:hover .md\:opacity-0 {
  opacity: 1 !important;
}

/* =====================================================
   都市夜晚 · 科技感主题
   覆盖：顶部栏 / 开场白 / 扩展按钮 / 底部输入 / 分页 / 评论
   ===================================================== */

/* ---------- 顶部栏 ---------- */
.sticky.w-full.top-0.flex.items-center {
    background:
        radial-gradient(circle at 15% 0%, rgba(0, 229, 255, 0.10), transparent 40%),
        radial-gradient(circle at 85% 0%, rgba(179, 136, 255, 0.12), transparent 40%),
        linear-gradient(90deg, rgba(8, 12, 24, 0.94), rgba(13, 22, 38, 0.95), rgba(8, 12, 24, 0.94)) !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.18) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 229, 255, 0.06) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

#ai-model-selector .group.flex.items-center {
    background: rgba(17, 26, 44, 0.85) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.12), inset 0 0 12px rgba(0, 229, 255, 0.04) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

#ai-model-selector .group.flex.items-center:hover {
    border-color: rgba(123, 97, 255, 0.65) !important;
    box-shadow: 0 0 22px rgba(123, 97, 255, 0.28), inset 0 0 14px rgba(123, 97, 255, 0.06) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #e8f0ff !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

#ai-model-selector .shrink-0.flex.items-center svg {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6));
}

.sticky.w-full.top-0 svg.lucide-clock-8 {
    color: #b388ff !important;
    filter: drop-shadow(0 0 6px rgba(179, 136, 255, 0.5));
}

.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background: #ff2d78 !important;
    box-shadow: 0 0 8px #ff2d78 !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
    color: #00e5ff !important;
}

.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
}

#header-setting-button {
    background: rgba(17, 26, 44, 0.8) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.10) !important;
    transition: all 0.25s ease;
}

#header-setting-button:hover {
    border-color: rgba(179, 136, 255, 0.7) !important;
    box-shadow: 0 0 20px rgba(179, 136, 255, 0.25) !important;
}

#header-setting-button svg {
    color: #b388ff !important;
    filter: drop-shadow(0 0 6px rgba(179, 136, 255, 0.5));
}

/* ---------- 开场白选择器 ---------- */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]) {
    background: linear-gradient(135deg, rgba(12, 18, 32, 0.9), rgba(19, 29, 48, 0.9)) !important;
    border-color: rgba(0, 229, 255, 0.30) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.12) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover,
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]):hover {
    border-color: rgba(123, 97, 255, 0.6) !important;
    box-shadow: 0 0 22px rgba(123, 97, 255, 0.28) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6)) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    color: #b388ff !important;
    filter: drop-shadow(0 0 6px rgba(179, 136, 255, 0.5)) !important;
}

/* ---------- 按钮栏 ---------- */
#ai-mod-button2 button.MuiButton-root {
    background: rgba(15, 22, 36, 0.7) !important;
    color: #dbe4f5 !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.06) !important;
    transition: all 0.25s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    background: rgba(23, 35, 58, 0.9) !important;
    border-color: rgba(0, 229, 255, 0.6) !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.25) !important;
}

#ai-mod-button2 button.MuiButton-root svg {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.5));
}

/* ---------- 底部输入栏 ---------- */
.bg-gradient-to-t {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(0, 229, 255, 0.08), transparent 50%),
        linear-gradient(180deg, rgba(8, 12, 23, 0.55), rgba(8, 12, 23, 0.96)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#ai-chat-bottom-input {
    background: rgba(13, 20, 34, 0.92) !important;
    border: 1px solid rgba(0, 229, 255, 0.20) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 255, 0.08) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#ai-chat-bottom-input:focus-within {
    border-color: rgba(0, 229, 255, 0.55) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 26px rgba(0, 229, 255, 0.22) !important;
}

#ai-chat-input {
    color: #e8f0ff !important;
    caret-color: #00e5ff !important;
    background: transparent !important;
}

#ai-chat-input::placeholder {
    color: #6b7a99 !important;
    opacity: 1 !important;
}

#ai-chat-input::selection {
    background: rgba(0, 229, 255, 0.35) !important;
    color: #ffffff !important;
}

/* ---------- 分页栏（仅视觉颜色） ---------- */
.MuiPaginationItem-root {
    color: #9aa8bd !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.MuiPaginationItem-root:hover {
    color: #00e5ff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.25) !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, #00a3c4, #7b61ff) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.40) !important;
}

.MuiPaginationItem-root.Mui-disabled {
    color: #3a4557 !important;
}

.MuiPaginationItem-icon {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.5)) !important;
}

.MuiStack-root.css-1uwir8f {
    background: rgba(15, 22, 36, 0.7) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 10px !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #aab8cf !important;
}

.MuiInputBase-input {
    color: #e8f0ff !important;
    caret-color: #00e5ff !important;
}

/* ---------- 评论区：主容器 ---------- */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(0, 229, 255, 0.10), transparent 50%),
        radial-gradient(ellipse at 80% 0%, rgba(179, 136, 255, 0.10), transparent 50%),
        linear-gradient(180deg, #0b101c 0%, #0e1524 100%) !important;
    color: #dbe4f5 !important;
    border-top: 1px solid rgba(0, 229, 255, 0.22) !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.text-lg.font-bold {
    color: #e8f0ff !important;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
    letter-spacing: 0.02em;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] p.MuiTypography-body1.text-grey-600 {
    color: #9aa8bd !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] span.MuiRating-iconEmpty svg {
    color: #3b4a63 !important;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] span.MuiRating-iconFilled svg {
    color: #ffce45 !important;
    filter: drop-shadow(0 0 8px rgba(255, 206, 69, 0.55));
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] span.text-orange-500 {
    color: #ffce45 !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.flex.flex-col.border-gray-200 {
    border-color: rgba(0, 229, 255, 0.20) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] textarea.rc-textarea {
    background: rgba(7, 11, 20, 0.6) !important;
    color: #e8f0ff !important;
    caret-color: #00e5ff !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] textarea.rc-textarea::placeholder {
    color: #5c6c85 !important;
    opacity: 1 !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.bg-gray-100.text-gray-500 {
    background: rgba(20, 29, 48, 0.7) !important;
    color: #8b9bb4 !important;
    border-radius: 8px !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.cursor-pointer.group.flex.items-center.justify-center {
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.15) !important;
    transition: all 0.25s ease !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: rgba(0, 229, 255, 0.25) !important;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.35) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div[data-state="closed"] svg[data-icon="Send03"] {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6)) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.style_divider__mW0YX {
    border-color: rgba(0, 229, 255, 0.15) !important;
    background: rgba(0, 229, 255, 0.08) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] .MuiStack-root.css-1dmzxoz {
    background: rgba(15, 22, 36, 0.5) !important;
    border-radius: 12px !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.MuiButton-outlinedPrimary {
    color: #8aa4c8 !important;
    border-color: rgba(0, 229, 255, 0.35) !important;
    background: rgba(15, 22, 36, 0.5) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.MuiButton-containedPrimary {
    background: linear-gradient(135deg, #00a3c4, #7b61ff) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.35) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.MuiButton-outlinedPrimary:hover,
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.MuiButton-containedPrimary:hover {
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.5) !important;
    border-color: rgba(123, 97, 255, 0.6) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.group.ml-0 {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.group.ml-0:hover {
    background: rgba(0, 229, 255, 0.03) !important;
    border-color: rgba(0, 229, 255, 0.15) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.group img.rounded-full {
    border: 1px solid rgba(0, 229, 255, 0.40) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15) !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.text-sm.text-grey-600 {
    color: #b6c2d8 !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.text-sm.text-grey-600 span.font-bold {
    color: #00e5ff !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] span.text-\[10px\] {
    color: #b388ff !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.break-all {
    color: #cdd9ec !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.text-xs.text-grey-600 {
    color: #71809a !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.text-gray-400 {
    color: #7b8aa3 !important;
    transition: color 0.2s ease !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.text-gray-400:hover {
    color: #ff2d78 !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.text-gray-400 svg {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] button.text-gray-400:hover svg {
    filter: drop-shadow(0 0 6px rgba(255, 45, 120, 0.5));
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] span.cursor-pointer {
    color: #00e5ff !important;
    transition: color 0.2s ease !important;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] span.cursor-pointer:hover {
    color: #b388ff !important;
    text-shadow: 0 0 8px rgba(179, 136, 255, 0.5);
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.ml-8.border-l {
    border-color: rgba(0, 229, 255, 0.15) !important;
}

/* =====================================================
   可选增强：霓虹呼吸灯 + 评论滚动条
   如果不需要，删除以下部分即可
   ===================================================== */
@keyframes neonBreath {
    0%, 100% {
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.20);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 229, 255, 0.50), 0 0 60px rgba(123, 97, 255, 0.20);
    }
}

#header-setting-button,
#ai-chat-bottom-input,
.MuiPaginationItem-root.Mui-selected {
    animation: neonBreath 4s ease-in-out infinite;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.p-3.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.p-3.overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.6), rgba(123, 97, 255, 0.6));
    border-radius: 99px;
}

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] div.p-3.overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}