/**
 * Chat 用户端主题覆盖 - 现代高级感 UI 美化
 * 设计思路：极简美学 + 细腻光影 + 流畅过渡 + 高级灰调
 */

/* =======================
   左上角 Logo 替换
   ======================= */

/* 隐藏原有图标和 VFX 文字，用自定义 logo 图片替代 */
#app .brand-shine img,
#app .brand-shine span,
#app [class*="brand-shine"] img,
#app [class*="brand-shine"] span {
  display: none !important;
}

/* IMAGE CREATION UPLOAD THUMB REMOVE BUTTON
   Keep the delete action visible on small uploaded-image thumbnails. */
#app
  [class*="overflow-x-auto"]:has(
    [class*="relative"][class*="w-14"][class*="h-14"]
      > button[class*="absolute"][class*="-top-1"][class*="-right-1"]
  ),
#app
  [class*="overflow-x-auto"]:has(
    [class*="relative"][class*="w-16"][class*="h-16"]
      > button[class*="absolute"][class*="-top-1"][class*="-right-1"]
  ),
#app
  [class*="overflow-x-auto"]:has(
    [class*="relative"][class*="w-14"][class*="h-14"]
      > button[class*="absolute"][class*="top-0"][class*="right-0"]
  ),
#app
  [class*="overflow-x-auto"]:has(
    [class*="relative"][class*="w-16"][class*="h-16"]
      > button[class*="absolute"][class*="top-0"][class*="right-0"]
  ) {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-top: 8px !important;
  padding-right: 10px !important;
  margin-top: -2px !important;
}

#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"],
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"] {
  overflow: visible !important;
  isolation: isolate !important;
}

#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"][class*="overflow-hidden"],
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"][class*="overflow-hidden"] {
  overflow: visible !important;
}

#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"]
  > img,
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"]
  > img {
  border-radius: 10px !important;
}

#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"]
  > button[class*="absolute"][class*="-top-1"][class*="-right-1"],
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"]
  > button[class*="absolute"][class*="-top-1"][class*="-right-1"],
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"]
  > button[class*="absolute"][class*="top-0"][class*="right-0"],
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"]
  > button[class*="absolute"][class*="top-0"][class*="right-0"] {
  z-index: 20 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  top: -7px !important;
  right: -7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(15, 23, 42, 0.18) !important;
  transform: translateZ(0) !important;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease !important;
}

#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"]
  > button[class*="absolute"][class*="-top-1"][class*="-right-1"]::before,
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"]
  > button[class*="absolute"][class*="-top-1"][class*="-right-1"]::before,
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"]
  > button[class*="absolute"][class*="top-0"][class*="right-0"]::before,
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"]
  > button[class*="absolute"][class*="top-0"][class*="right-0"]::before {
  content: "×" !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 800 !important;
  transform: translateY(-0.5px) !important;
}

#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"]
  > button[class*="absolute"][class*="-top-1"][class*="-right-1"]:hover,
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"]
  > button[class*="absolute"][class*="-top-1"][class*="-right-1"]:hover,
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-14"][class*="h-14"]
  > button[class*="absolute"][class*="top-0"][class*="right-0"]:hover,
#app
  [class*="overflow-x-auto"]
  [class*="relative"][class*="w-16"][class*="h-16"]
  > button[class*="absolute"][class*="top-0"][class*="right-0"]:hover {
  background: #dc2626 !important;
  border-color: #ffffff !important;
  box-shadow:
    0 10px 22px rgba(220, 38, 38, 0.38),
    0 0 0 3px rgba(248, 113, 113, 0.22) !important;
  transform: translateZ(0) scale(1.08) !important;
}

/* 使用伪元素展示 1424x517 比例 logo */
#app .brand-shine,
#app [class*="brand-shine"] {
  position: relative;
  min-height: 36px;
  /* 让 logo 与左侧导航栏文字左边对齐（header 自带 px-4，这里再右移 4px = px-5） */
  margin-left: 16px;
  background: transparent !important;
}

#app .brand-shine::before,
#app [class*="brand-shine"]::before {
  content: "";
  display: block;
  width: 100px;
  height: 58px; /* 160 * 517/1424 ≈ 58，保持 1424:517 比例 */
  background: url("../images/vfx-logo-20260704.png") no-repeat center;
  background-size: contain;
  animation: none !important;
  filter: none !important;
  transform-origin: center;
}

#app .brand-shine::before,
#app [class*="brand-shine"]::before {
  animation-name: none !important;
  animation-duration: 0s !important;
}

#app .brand-shine::after,
#app [class*="brand-shine"]::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

@keyframes vfx-logo-breathe {
  0%,
  100% {
    opacity: 0.72;
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.22));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 13px rgba(99, 102, 241, 0.62));
  }
}

#app
  .flex.items-center.justify-between.px-4.pt-3.pb-2[class*="dark:bg-gray-900"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html.dark
  #app
  .flex.items-center.justify-between.px-4.pt-3.pb-2[class*="dark:bg-gray-900"],
html[data-theme="dark"]
  #app
  .flex.items-center.justify-between.px-4.pt-3.pb-2[class*="dark:bg-gray-900"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html.dark
  #app
  .dark\:bg-gray-900.flex.items-center.justify-between.px-4.pt-3.pb-2,
html[data-theme="dark"]
  #app
  .dark\:bg-gray-900.flex.items-center.justify-between.px-4.pt-3.pb-2,
html.dark
  #app
  [data-v-9ad31d91].flex.items-center.justify-between.px-4.pt-3.pb-2,
html[data-theme="dark"]
  #app
  [data-v-9ad31d91].flex.items-center.justify-between.px-4.pt-3.pb-2 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

aside > div:first-child,
.sidebar > div:first-child,
html.dark aside > div:first-child,
html.dark .sidebar > div:first-child,
html[data-theme="dark"] aside > div:first-child,
html[data-theme="dark"] .sidebar > div:first-child {
  background-color: var(--gpt-sidebar-bg) !important;
  background-image: none !important;
}

/* =======================
   AI 思考中 Loading - 高级动效
   须覆盖 chat-7cfa87a8.css 中 Vue scoped 的 .loading-animation[data-v-33c7c56b]
   ======================= */

/* 加载容器 - 显式匹配 Vue chat 组件的 data-v 以提升特异性 */
#app .loading-animation,
#app .loading-animation[data-v-33c7c56b],
#app [class*="loading-animation"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 72px !important;
  height: 24px !important;
  position: relative;
}

/* 三粒点 - 高级渐变 + 柔和光晕 */
#app .loading-animation::before,
#app .loading-animation[data-v-33c7c56b]::before,
#app .loading-animation::after,
#app .loading-animation[data-v-33c7c56b]::after,
#app .loading-animation span,
#app .loading-animation[data-v-33c7c56b] span,
#app [class*="loading-animation"]::before,
#app [class*="loading-animation"]::after,
#app [class*="loading-animation"] span {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: transparent !important;
  background: radial-gradient(circle at 30% 30%, #f8fafc, #e2e8f0) !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 0 12px 2px rgba(15, 23, 42, 0.08) !important;
  animation: chat-loading-pulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#app .loading-animation::before,
#app .loading-animation[data-v-33c7c56b]::before,
#app [class*="loading-animation"]::before {
  left: 0 !important;
  animation-delay: 0s !important;
}

#app .loading-animation span,
#app .loading-animation[data-v-33c7c56b] span,
#app [class*="loading-animation"] span {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation-delay: 0.2s !important;
}

#app .loading-animation::after,
#app .loading-animation[data-v-33c7c56b]::after,
#app [class*="loading-animation"]::after {
  left: auto !important;
  right: 0 !important;
  animation-delay: 0.4s !important;
}

@keyframes chat-loading-pulse {
  0%,
  100% {
    transform: translateY(-50%) scale(0.8);
    opacity: 0.5;
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.04),
      0 0 8px 1px rgba(15, 23, 42, 0.06);
  }
  50% {
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.08),
      0 0 16px 4px rgba(15, 23, 42, 0.12);
  }
}

#app .loading-animation span[style*="left"],
#app [class*="loading-animation"] span[style*="left"] {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* 暗色模式 - 柔和光晕 */
@keyframes chat-loading-pulse-dark {
  0%,
  100% {
    transform: translateY(-50%) scale(0.8);
    opacity: 0.5;
    box-shadow:
      0 0 0 1px rgba(248, 250, 252, 0.06),
      0 0 10px 2px rgba(148, 163, 184, 0.18);
  }
  50% {
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
    box-shadow:
      0 0 0 1px rgba(248, 250, 252, 0.12),
      0 0 20px 6px rgba(148, 163, 184, 0.35);
  }
}

html.dark #app .loading-animation::before,
html.dark #app .loading-animation::after,
html.dark #app .loading-animation span,
html.dark #app [class*="loading-animation"]::before,
html.dark #app [class*="loading-animation"]::after,
html.dark #app [class*="loading-animation"] span,
html[data-theme="dark"] #app .loading-animation::before,
html[data-theme="dark"] #app .loading-animation::after,
html[data-theme="dark"] #app .loading-animation span,
html[data-theme="dark"] #app [class*="loading-animation"]::before,
html[data-theme="dark"] #app [class*="loading-animation"]::after,
html[data-theme="dark"] #app [class*="loading-animation"] span {
  background: radial-gradient(circle at 30% 30%, #e2e8f0, #94a3b8) !important;
  animation-name: chat-loading-pulse-dark !important;
}

/* 包裹「AI 思考中」的容器 - 轻微呼吸感 */
#app .flex.items-center.gap-2:has(.loading-animation),
#app .flex.items-center.gap-2:has([class*="loading-animation"]) {
  animation: chat-loading-breathe 1.2s ease-in-out infinite;
}

@keyframes chat-loading-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

/* 全局样式重置与基础设定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* 全局平滑过渡，提升交互质感 */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 全局滚动条 - 极简高级风格（细灰色，无强烈主色） */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  /* 隐藏滚动条但保留滚动功能（更极简） */
  /* display: none; */
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  /* 高级渐变灰，替代原有的浅色系 */
  background: linear-gradient(180deg, #8892a0, #5e6977);
  border-radius: 3px;
  /* 悬停前的透明度，提升层次感 */
  opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
  /* 稍微加深的中性灰 */
  background: #4b5563;
  opacity: 1;
  /* 轻微放大，增强交互反馈 */
  transform: scale(1.05);
}

/* 主题色变量 - 高级配色体系（明暗双主题） */
:root {
  /* ChatGPT Premium Palette - Light Mode */
  --gpt-bg: #ffffff;
  --gpt-sidebar-bg: #f9f9f9;
  --gpt-message-assistant-bg: #f7f7f8;
  --gpt-message-user-bg: #ffffff;
  --gpt-border-color: #e5e5e5;
  --gpt-text-main: #0d0d0d;
  --gpt-text-muted: #676767;
  --gpt-primary: #10a37f;
  --gpt-primary-hover: #1a7f64;
  --gpt-input-bg: #ffffff;
  --gpt-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  --gpt-radius: 16px;
  --gpt-max-width: 840px;
}

html.dark,
html[data-theme="dark"] {
  /* Premium Dark AI Workspace - Dark Mode
     Deep cool neutral canvas with subtle depth, soft hairlines, calm surfaces. */
  --gpt-bg: #0e0f13;
  --gpt-sidebar-bg: #0b0c10;
  --gpt-message-assistant-bg: #14161c;
  --gpt-message-user-bg: #14161c;
  --gpt-border-color: rgba(255, 255, 255, 0.07);
  --gpt-text-main: #eef0f4;
  --gpt-text-muted: #9aa1ae;
  --gpt-input-bg: #161821;
  --gpt-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.32);

  /* Workspace surface + accent tokens used by the polish layer below */
  --ws-surface: rgba(255, 255, 255, 0.028);
  --ws-surface-raised: rgba(255, 255, 255, 0.05);
  --ws-surface-hover: rgba(255, 255, 255, 0.07);
  --ws-hairline: rgba(255, 255, 255, 0.08);
  --ws-hairline-strong: rgba(255, 255, 255, 0.12);
  --ws-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ws-accent: #6366f1;
  --ws-accent-soft: rgba(99, 102, 241, 0.16);
  --ws-accent-ring: rgba(99, 102, 241, 0.35);
  --ws-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ws-elev-2: 0 6px 20px rgba(0, 0, 0, 0.35);
  --ws-elev-3: 0 18px 48px rgba(0, 0, 0, 0.45);

  /* Solid opaque surfaces for LARGE panels / modals / creation cards.
     No rgba here — these must fully occlude anything behind them. */
  --ws-panel-solid: #11141b;
  --ws-panel-solid-raised: #161a24;
  --ws-panel-hairline: rgba(255, 255, 255, 0.06);
}

html:not(.dark),
html[data-theme="light"] {
  /* Light-mode equivalents so the polish layer degrades gracefully */
  --ws-surface: rgba(15, 23, 42, 0.02);
  --ws-surface-raised: rgba(15, 23, 42, 0.035);
  --ws-surface-hover: rgba(15, 23, 42, 0.055);
  --ws-hairline: rgba(15, 23, 42, 0.09);
  --ws-hairline-strong: rgba(15, 23, 42, 0.14);
  --ws-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ws-accent: #6366f1;
  --ws-accent-soft: rgba(99, 102, 241, 0.1);
  --ws-accent-ring: rgba(99, 102, 241, 0.28);
  --ws-elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ws-elev-2: 0 6px 20px rgba(15, 23, 42, 0.08);
  --ws-elev-3: 0 18px 48px rgba(15, 23, 42, 0.12);
}

/* ============================================================
   Global Layout & Cleanliness
   ============================================================ */

body {
  background-color: var(--gpt-bg) !important;
  color: var(--gpt-text-main) !important;
  font-family:
    "Roboto",
    Söhne,
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    Noto Sans,
    sans-serif,
    "Helvetica Neue",
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji" !important;
  -webkit-font-smoothing: antialiased;
}

#app {
  background-color: var(--gpt-bg) !important;
}

/* Announcement Banner - Integrated & Subtle */
.announcement-banner {
  background-color: var(--gpt-bg) !important;
  border: 1px solid var(--gpt-border-color) !important;
  box-shadow: var(--gpt-shadow) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  bottom: 20px !important;
  right: 20px !important;
  font-size: 13px !important;
  color: var(--gpt-text-muted) !important;
  z-index: 50 !important;
}

.announcement-banner .close-btn {
  background: transparent !important;
  color: var(--gpt-text-muted) !important;
  font-size: 18px !important;
  top: 8px !important;
  right: 8px !important;
}

.announcement-banner .close-btn:hover {
  color: var(--gpt-text-main) !important;
  transform: none !important;
}

.nav-override-root {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 12px 18px;
}

.nav-override-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sidebar Navigation Section Headers */
.nav-override-title {
  padding: 12px 12px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--gpt-text-muted) !important;
  opacity: 0.7 !important;
}

/* New Chat Button / Top Primary Action */
aside button[class*="w-full"][class*="border"],
aside a[class*="w-full"][class*="border"] {
  background-color: var(--gpt-bg) !important;
  border: 1px solid var(--gpt-border-color) !important;
  color: var(--gpt-text-main) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  margin: 8px !important;
  width: calc(100% - 16px) !important;
  justify-content: flex-start !important;
  padding: 10px 12px !important;
}

html.dark aside button[class*="w-full"][class*="border"],
html[data-theme="dark"] aside button[class*="w-full"][class*="border"] {
  background-color: #2f2f2f !important;
}

aside button[class*="w-full"][class*="border"]:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

html.dark aside button[class*="w-full"][class*="border"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar Footer / User Profile Area */
[class*="mt-auto"][class*="border-t"] {
  border-top: 1px solid var(--gpt-border-color) !important;
  padding: 12px 8px !important;
  background-color: var(--gpt-sidebar-bg) !important;
}

[class*="mt-auto"] button,
[class*="mt-auto"] a {
  margin: 0 !important;
  border-radius: 8px !important;
}

aside [class*="mt-auto"] button[class*="w-full"][class*="border"],
aside [class*="mt-auto"] a[class*="w-full"][class*="border"],
.sidebar [class*="mt-auto"] button[class*="w-full"][class*="border"],
.sidebar [class*="mt-auto"] a[class*="w-full"][class*="border"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 16px) !important;
  min-height: 44px !important;
  margin: 8px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.24) !important;
  text-align: center !important;
}

aside [class*="mt-auto"] button[class*="w-full"][class*="border"]:hover,
aside [class*="mt-auto"] a[class*="w-full"][class*="border"]:hover,
.sidebar [class*="mt-auto"] button[class*="w-full"][class*="border"]:hover,
.sidebar [class*="mt-auto"] a[class*="w-full"][class*="border"]:hover {
  background: linear-gradient(135deg, #5b5ff0 0%, #7c3aed 100%) !important;
  border-color: rgba(99, 102, 241, 0.48) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.3) !important;
  transform: translateY(-1px);
}

html.dark aside [class*="mt-auto"] button[class*="w-full"][class*="border"],
html.dark aside [class*="mt-auto"] a[class*="w-full"][class*="border"],
html.dark .sidebar [class*="mt-auto"] button[class*="w-full"][class*="border"],
html.dark .sidebar [class*="mt-auto"] a[class*="w-full"][class*="border"],
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"],
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"],
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"],
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"] {
  border-color: rgba(129, 140, 248, 0.4) !important;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.34) !important;
}

/* Floating Tooltips / Menus */
[class*="n-popover"],
[class*="n-dropdown-menu"] {
  background-color: var(--gpt-bg) !important;
  border: 1px solid var(--gpt-border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--gpt-shadow) !important;
}

[class*="n-dropdown-option"]:hover {
  background-color: var(--gpt-message-assistant-bg) !important;
}

/* Settings / Sidebar Toggle Buttons */
button[class*="hover:bg-gray-100"],
button[class*="dark:hover:bg-gray-700"] {
  background-color: transparent !important;
  border-radius: 8px !important;
}

button[class*="hover:bg-gray-100"]:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

html.dark button[class*="hover:bg-gray-100"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.nav-override-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-override-item {
  width: calc(100% - 4px) !important;
  margin: 0 2px !important;
  border-radius: 14px !important;
  min-height: 42px;
}

.nav-override-hidden-source {
  display: none !important;
}

aside.nav-override-active,
.sidebar.nav-override-active {
  padding-top: 8px;
}

aside.nav-override-active a,
aside.nav-override-active button,
.sidebar.nav-override-active a,
.sidebar.nav-override-active button {
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

aside.nav-override-active a:hover,
aside.nav-override-active button:hover,
.sidebar.nav-override-active a:hover,
.sidebar.nav-override-active button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

aside.nav-override-active a.router-link-active,
aside.nav-override-active a.active,
aside.nav-override-active a[aria-current="page"],
.sidebar.nav-override-active a.router-link-active,
.sidebar.nav-override-active a.active,
.sidebar.nav-override-active a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

html:not(.dark) .nav-override-title,
html[data-theme="light"] .nav-override-title {
  color: rgba(15, 23, 42, 0.58) !important;
}

html:not(.dark) aside.nav-override-active a,
html:not(.dark) aside.nav-override-active button,
html:not(.dark) .sidebar.nav-override-active a,
html:not(.dark) .sidebar.nav-override-active button,
html[data-theme="light"] aside.nav-override-active a,
html[data-theme="light"] aside.nav-override-active button,
html[data-theme="light"] .sidebar.nav-override-active a,
html[data-theme="light"] .sidebar.nav-override-active button {
  background: rgba(15, 23, 42, 0.03) !important;
  color: #1f2937 !important;
}

html:not(.dark) aside.nav-override-active a:hover,
html:not(.dark) aside.nav-override-active button:hover,
html:not(.dark) .sidebar.nav-override-active a:hover,
html:not(.dark) .sidebar.nav-override-active button:hover,
html[data-theme="light"] aside.nav-override-active a:hover,
html[data-theme="light"] aside.nav-override-active button:hover,
html[data-theme="light"] .sidebar.nav-override-active a:hover,
html[data-theme="light"] .sidebar.nav-override-active button:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) aside.nav-override-active a.router-link-active,
html:not(.dark) aside.nav-override-active a.active,
html:not(.dark) aside.nav-override-active a[aria-current="page"],
html:not(.dark) .sidebar.nav-override-active a.router-link-active,
html:not(.dark) .sidebar.nav-override-active a.active,
html:not(.dark) .sidebar.nav-override-active a[aria-current="page"],
html[data-theme="light"] aside.nav-override-active a.router-link-active,
html[data-theme="light"] aside.nav-override-active a.active,
html[data-theme="light"] aside.nav-override-active a[aria-current="page"],
html[data-theme="light"] .sidebar.nav-override-active a.router-link-active,
html[data-theme="light"] .sidebar.nav-override-active a.active,
html[data-theme="light"] .sidebar.nav-override-active a[aria-current="page"] {
  background: rgba(15, 23, 42, 0.09) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* ============================================================
   Sidebar - Minimalist & Orderly
   ============================================================ */

/* Target the sidebar container */
aside,
[class*="w-[260px]"],
.sidebar {
  background-color: var(--gpt-sidebar-bg) !important;
  border-right: none !important;
}

/* Sidebar Navigation Items */
aside a,
aside button,
[class*="sidebar"] a,
[class*="sidebar"] button {
  border-radius: 10px !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  color: var(--gpt-text-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.dark aside a,
html.dark aside button,
html[data-theme="dark"] aside a,
html[data-theme="dark"] aside button {
  color: #ececf1 !important;
}

aside a:hover,
aside button:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

html.dark aside a:hover,
html.dark aside button:hover,
html[data-theme="dark"] aside a:hover,
html[data-theme="dark"] aside button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

aside a.active,
aside a[aria-current="page"],
.router-link-active {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

html.dark aside a.active,
html.dark aside a[aria-current="page"],
html.dark .router-link-active,
html[data-theme="dark"] aside a.active,
html[data-theme="dark"] aside a[aria-current="page"],
html[data-theme="dark"] .router-link-active {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================
   Chat Main Area - ChatGPT Style
   ============================================================ */

/* Center the chat content */
main,
.flex-1.overflow-hidden {
  background-color: var(--gpt-bg) !important;
}

/* Message List Container */
.message-list,
[class*="overflow-y-auto"] > div > .flex.flex-col {
  max-width: var(--gpt-max-width);
  margin: 0 auto !important;
  width: 100% !important;
  padding-bottom: 150px !important; /* Space for input */
}

/* Individual Message Items */
.message-item,
[class*="group/message"] {
  border-bottom: none !important;
  padding: 16px 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* Assistant Message Background */
.message-item-assistant,
[class*="bg-gray-50"],
[class*="dark:bg-gray-800/50"] {
  background-color: transparent !important;
}

/* User Message Background */
.message-item-user {
  background-color: transparent !important;
}

/* Message Content Wrapper */
.message-content {
  max-width: var(--gpt-max-width) !important;
  width: 100% !important;
  padding: 0 24px !important;
  line-height: 1.6 !important;
  font-size: 16px !important;
}

/* Avatars - Minimalist */
.avatar,
[class*="w-8.h-8.rounded-sm"] {
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   Input Area - Floating & Clean
   ============================================================ */

/* Input Container at bottom */
.input-container,
[class*="fixed.bottom-0"],
[class*="absolute.bottom-0"] {
  background: transparent !important;
  border-top: none !important;
  padding: 20px 0 !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    var(--gpt-bg) 50%
  ) !important;
}

/* The actual input box */
.input-box-wrapper,
[class*="max-w-3xl.mx-auto"] > .relative {
  max-width: var(--gpt-max-width) !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

textarea {
  background-color: var(--gpt-input-bg) !important;
  border: 1px solid var(--gpt-border-color) !important;
  border-radius: var(--gpt-radius) !important;
  box-shadow: var(--gpt-shadow) !important;
  padding: 12px 16px !important;
  padding-right: 48px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  resize: none !important;
  min-height: 52px !important;
  transition: border-color 0.2s ease !important;
  color: var(--gpt-text-main) !important;
  -webkit-text-fill-color: var(--gpt-text-main) !important;
  caret-color: var(--gpt-text-main) !important;
}

textarea:focus {
  border-color: var(--gpt-primary) !important;
  outline: none !important;
}

/* ============================================================
   Landing Page / Welcome Screen - ChatGPT Style
   ============================================================ */

/* Center Welcome Icon & Title Gradient Removal */
/* Force absolute override on the specific title classes used in the landing page */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--gpt-text-main) !important;
  font-weight: 600 !important;
}

[class*="text-transparent"],
[class*="bg-clip-text"],
[class*="bg-gradient-to-r"] {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--gpt-text-main) !important;
  -webkit-text-fill-color: var(--gpt-text-main) !important;
}

/* Force remove specific gradients often used in such templates */
[class*="from-"],
[class*="to-"],
[class*="via-"] {
  background-image: none !important;
}

svg.text-primary-500,
svg.text-indigo-500,
svg.text-blue-500 {
  color: var(--gpt-text-main) !important;
}

/* Welcome Subtitle */
p.text-gray-500,
p.text-gray-400,
div.text-gray-500,
div.text-gray-400 {
  color: var(--gpt-text-muted) !important;
}

/* Fix Input Area Borders & Box Shadow (from screenshot) */
.border.border-gray-200.dark\:border-gray-700.rounded-3xl,
.border.border-gray-200.dark\:border-gray-700.rounded-2xl,
.bg-white.dark\:bg-gray-800.rounded-3xl,
.bg-white.dark\:bg-gray-800.rounded-2xl,
[class*="rounded-3xl"][class*="border"],
[class*="rounded-2xl"][class*="border"],
[class*="rounded-xl"][class*="border"],
.relative.flex.flex-col.w-full.border {
  border: 1px solid var(--gpt-border-color) !important;
  border-radius: 24px !important;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.03) !important;
  padding: 10px !important;
  transition: all 0.3s ease !important;
}

html.dark .border.border-gray-200.dark\:border-gray-700.rounded-3xl,
html.dark .bg-white.dark\:bg-gray-800.rounded-3xl,
html[data-theme="dark"] [class*="rounded-3xl"][class*="border"] {
  background-color: #2f2f2f !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) !important;
}

html.dark
  div.flex.w-full.border.border-gray-400.dark\:border-gray-700.hover\:ring-1.hover\:ring-primary-500.dark\:hover\:ring-primary-500.focus-within\:ring-1.focus-within\:ring-primary-500.dark\:focus-within\:ring-primary-500.justify-center.items-center.flex-col.rounded-3xl.resize-none.px-2.transition-all.duration-200:has(
    textarea[placeholder="向 VFX 发消息"]
  ),
html[data-theme="dark"]
  div.flex.w-full.border.border-gray-400.dark\:border-gray-700.hover\:ring-1.hover\:ring-primary-500.dark\:hover\:ring-primary-500.focus-within\:ring-1.focus-within\:ring-primary-500.dark\:focus-within\:ring-primary-500.justify-center.items-center.flex-col.rounded-3xl.resize-none.px-2.transition-all.duration-200:has(
    textarea[placeholder="向 VFX 发消息"]
  ) {
  background-color: var(--gpt-input-bg) !important;
  border-color: var(--gpt-border-color) !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) !important;
}

[class*="rounded-3xl"][class*="border"]:focus-within,
[class*="rounded-2xl"][class*="border"]:focus-within,
.relative.flex.flex-col.w-full.border:focus-within {
  border-color: #b4b4b4 !important;
}

html.dark [class*="rounded-3xl"][class*="border"]:focus-within,
html[data-theme="dark"] [class*="rounded-3xl"][class*="border"]:focus-within {
  border-color: #676767 !important;
}

/* Force remove the inner line/border some textareas have */
.bg-white.dark\:bg-gray-800.rounded-3xl textarea,
.bg-white.dark\:bg-gray-800.rounded-2xl textarea,
[class*="rounded-3xl"] textarea,
[class*="rounded-2xl"] textarea,
.relative.flex.flex-col.w-full.border textarea {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px 16px !important;
  outline: none !important;
}

html.dark textarea[placeholder="向 VFX 发消息"],
html[data-theme="dark"] textarea[placeholder="向 VFX 发消息"] {
  color: var(--gpt-text-main) !important;
  -webkit-text-fill-color: var(--gpt-text-main) !important;
  caret-color: var(--gpt-text-main) !important;
}

html.dark textarea[placeholder="向 VFX 发消息"]::placeholder,
html[data-theme="dark"] textarea[placeholder="向 VFX 发消息"]::placeholder {
  color: var(--gpt-text-muted) !important;
  -webkit-text-fill-color: var(--gpt-text-muted) !important;
}

/* Bottom Action Buttons Container */
.flex.items-center.justify-between.mt-2,
.flex.items-center.gap-2.flex-wrap {
  padding: 0 4px !important;
}

/* Bottom Action Buttons (推理, 搜索, 图表, etc.) overrides - Scoped to chat input */
.input-container button.btn-pill,
.input-container button.rounded-full.border,
.input-box-wrapper button.btn-pill,
.input-box-wrapper button.rounded-full.border {
  border: 1px solid var(--gpt-border-color) !important;
  background-color: var(--gpt-bg) !important;
  color: var(--gpt-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

/* Icon-only buttons - Keep circular */
.input-container button.flex.items-center.justify-center.w-8.h-8.rounded-full,
.input-box-wrapper
  button.flex.items-center.justify-center.w-8.h-8.rounded-full {
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--gpt-border-color) !important;
  background-color: var(--gpt-bg) !important;
  color: var(--gpt-text-muted) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.input-container button.btn-pill:hover,
.input-container button.rounded-full.border:hover,
.input-container
  button.flex.items-center.justify-center.w-8.h-8.rounded-full:hover,
.input-box-wrapper button.btn-pill:hover,
.input-box-wrapper button.rounded-full.border:hover,
.input-box-wrapper
  button.flex.items-center.justify-center.w-8.h-8.rounded-full:hover {
  background-color: var(--gpt-message-assistant-bg) !important;
  color: var(--gpt-text-main) !important;
  border-color: var(--gpt-border-color) !important;
}

#app button[aria-label="切换主题"] {
  display: none !important;
}

#app img[alt="Logo"].h-7.w-7.mr-2 {
  display: none !important;
}

#app [aria-label="启用或禁用流程图功能"] {
  display: none !important;
}
.flex.justify-between.flex-grow.w-full.pb-2 button[aria-label="上传文件/图片"],
.flex.justify-between.flex-grow.w-full.pb-2 [aria-label="启用或禁用网络搜索"],
.flex.justify-between.flex-grow.w-full.pb-2 button[aria-label="发送消息"] {
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease,
    filter 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

.flex.justify-between.flex-grow.w-full.pb-2 button[aria-label="上传文件/图片"] {
  color: rgba(55, 65, 81, 0.96) !important;
}

html.dark
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="上传文件/图片"],
html[data-theme="dark"]
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="上传文件/图片"] {
  color: rgba(243, 244, 246, 0.95) !important;
}

.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="上传文件/图片"]
  .i-icon,
.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="上传文件/图片"]
  svg {
  width: 17px !important;
  height: 17px !important;
}

.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="上传文件/图片"]:hover:not(:disabled) {
  color: rgba(17, 24, 39, 0.98) !important;
  transform: translateY(-1px) scale(1.06) !important;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.16)) !important;
}

html.dark
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="上传文件/图片"]:hover:not(:disabled),
html[data-theme="dark"]
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="上传文件/图片"]:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.98) !important;
  filter: drop-shadow(0 0 7px rgba(96, 165, 250, 0.22)) !important;
}

.flex.justify-between.flex-grow.w-full.pb-2
  [aria-label="启用或禁用网络搜索"]
  .i-icon,
.flex.justify-between.flex-grow.w-full.pb-2
  [aria-label="启用或禁用网络搜索"]
  svg {
  width: 17px !important;
  height: 17px !important;
  color: rgba(107, 114, 128, 0.9) !important;
}

html.dark
  .flex.justify-between.flex-grow.w-full.pb-2
  [aria-label="启用或禁用网络搜索"]
  .i-icon,
html.dark
  .flex.justify-between.flex-grow.w-full.pb-2
  [aria-label="启用或禁用网络搜索"]
  svg,
html[data-theme="dark"]
  .flex.justify-between.flex-grow.w-full.pb-2
  [aria-label="启用或禁用网络搜索"]
  .i-icon,
html[data-theme="dark"]
  .flex.justify-between.flex-grow.w-full.pb-2
  [aria-label="启用或禁用网络搜索"]
  svg {
  color: rgba(156, 163, 175, 0.9) !important;
}

.flex.justify-between.flex-grow.w-full.pb-2 button[aria-label="发送消息"] {
  color: rgba(59, 130, 246, 0.98) !important;
  opacity: 0.92 !important;
}

html.dark
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"],
html[data-theme="dark"]
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"] {
  color: rgba(147, 197, 253, 0.98) !important;
}

.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]
  .i-icon,
.flex.justify-between.flex-grow.w-full.pb-2 button[aria-label="发送消息"] svg {
  width: 17px !important;
  height: 17px !important;
}

.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:not(:disabled) {
  opacity: 1 !important;
  animation: vfx-send-breathe 2.4s ease-in-out infinite;
}

.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:hover:not(:disabled) {
  color: rgba(37, 99, 235, 1) !important;
  transform: translateY(-1px) scale(1.08) !important;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.32)) !important;
}

html.dark
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:hover:not(:disabled),
html[data-theme="dark"]
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:hover:not(:disabled) {
  color: rgba(191, 219, 254, 1) !important;
  filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.38)) !important;
}

.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:active:not(:disabled) {
  transform: translateY(0) scale(0.96) !important;
}

.flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:disabled {
  color: rgba(156, 163, 175, 0.9) !important;
  opacity: 0.82 !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

html.dark
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:disabled,
html[data-theme="dark"]
  .flex.justify-between.flex-grow.w-full.pb-2
  button[aria-label="发送消息"]:disabled {
  color: rgba(156, 163, 175, 0.94) !important;
}

@keyframes vfx-send-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
  }
  50% {
    transform: translateY(-1px) scale(1.04);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.22));
  }
}

/* The chat composer no longer exposes the unused MCP tool picker. */
div[role="button"][aria-label="选择 MCP 工具"] {
  display: none !important;
}

/* =======================
   全局文字可读性增强
   提升暗色模式下的灰字、按钮、标签、卡片与弹窗文字对比度
   ======================= */

#app {
  --vfx-readable-main: #f4f7fb;
  --vfx-readable-strong: #ffffff;
  --vfx-readable-muted: #d3dae6;
  --vfx-readable-subtle: #b9c3d2;
  --vfx-readable-faint: #9faabc;
  --vfx-readable-border: rgba(177, 186, 204, 0.32);
}

html:not(.dark) #app,
html[data-theme="light"] #app {
  --vfx-readable-main: #202733;
  --vfx-readable-strong: #111827;
  --vfx-readable-muted: #4b5563;
  --vfx-readable-subtle: #5f6b7a;
  --vfx-readable-faint: #6b7280;
  --vfx-readable-border: rgba(17, 24, 39, 0.18);
}

#app,
#app .text-gray-700,
#app .dark\:text-gray-200,
#app .dark\:text-gray-300 {
  color: var(--vfx-readable-main) !important;
}

#app h1,
#app h2,
#app h3,
#app h4,
#app .font-semibold,
#app .font-bold,
#app .font-medium,
#app .text-gray-800,
#app .text-gray-900,
#app .dark\:text-gray-100,
#app .dark\:text-gray-200 {
  color: var(--vfx-readable-strong) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

#app .text-gray-500,
#app .text-gray-400,
#app .dark\:text-gray-400,
#app .dark\:text-gray-500,
#app p.text-xs,
#app span.text-xs,
#app div.text-xs,
#app p[class*="text-[11px]"],
#app span[class*="text-[11px]"],
#app div[class*="text-[11px]"],
#app p[class*="text-[12px]"],
#app span[class*="text-[12px]"],
#app div[class*="text-[12px]"] {
  color: var(--vfx-readable-muted) !important;
}

#app .text-gray-600,
#app .dark\:text-gray-300,
#app label,
#app small {
  color: var(--vfx-readable-subtle) !important;
}

#app input,
#app textarea,
#app select,
#app .el-input__inner,
#app .el-textarea__inner {
  color: var(--vfx-readable-main) !important;
}

#app input::placeholder,
#app textarea::placeholder,
#app .el-input__inner::placeholder,
#app .el-textarea__inner::placeholder {
  color: var(--vfx-readable-faint) !important;
  opacity: 1 !important;
}

#app button,
#app a,
#app [role="button"] {
  color: inherit;
}

#app button:not(:disabled),
#app .btn,
#app .btn-outline,
#app .btn-icon {
  color: var(--vfx-readable-main) !important;
}

#app button.border,
#app a.border,
#app [class*="border-gray-200"],
#app [class*="dark:border-gray-600"],
#app [class*="dark:border-gray-700"] {
  border-color: var(--vfx-readable-border) !important;
}

#app .rounded,
#app .rounded-md,
#app .rounded-lg,
#app .rounded-xl,
#app .rounded-2xl {
  color: inherit;
}

#app [class*="bg-gray-100"],
#app [class*="dark:bg-gray-700"],
#app [class*="dark:bg-gray-800"],
#app [class*="dark:bg-gray-900"] {
  color: var(--vfx-readable-main) !important;
}

#app .bg-primary-50,
#app .dark\:bg-primary-500\/20 {
  color: #eef2ff !important;
}

html:not(.dark) #app .bg-primary-50,
html[data-theme="light"] #app .bg-primary-50,
html:not(.dark) #app .dark\:bg-primary-500\/20,
html[data-theme="light"] #app .dark\:bg-primary-500\/20 {
  color: #3730a3 !important;
}

#app .text-primary-600,
#app .dark\:text-primary-200,
#app .text-primary-500 {
  color: #bfc7ff !important;
}

html:not(.dark) #app .text-primary-600,
html[data-theme="light"] #app .text-primary-600,
html:not(.dark) #app .text-primary-500,
html[data-theme="light"] #app .text-primary-500 {
  color: #4f46e5 !important;
}

#app .text-red-500,
#app .text-red-600,
#app .dark\:text-red-400 {
  color: #ff6b6b !important;
}

#app .line-clamp-3,
#app .truncate,
#app .whitespace-nowrap {
  color: inherit;
}

#app .shadow-sm,
#app .shadow-xl,
#app .shadow-2xl {
  color: var(--vfx-readable-main) !important;
}

#app video + div,
#app .group,
#app .space-y-2,
#app .space-y-3 {
  color: var(--vfx-readable-main);
}

/* ============================================================
   PREMIUM POLISH LAYER (appended)
   Goal: restrained, clean dark AI workspace — Linear/Raycast/Vercel feel.
   Strategy: kill gray blocks, replace hard borders with soft hairlines,
   give surfaces subtle depth + inner highlight, refine composer & cards,
   add tasteful micro-interactions. Dark-mode focused; light degrades gracefully.
   ============================================================ */

/* ---- Canvas depth: a whisper of gradient, no blobs, no overlays ---- */
html.dark body,
html[data-theme="dark"] body {
  background-color: var(--gpt-bg) !important;
  background-image:
    radial-gradient(
      1200px 680px at 78% -8%,
      rgba(99, 102, 241, 0.06),
      transparent 60%
    ),
    radial-gradient(
      1000px 620px at 12% 108%,
      rgba(56, 189, 248, 0.04),
      transparent 62%
    ) !important;
  background-attachment: fixed !important;
}

html.dark #app,
html[data-theme="dark"] #app {
  background-color: transparent !important;
}

/* ---- Global: soften every hard gray border into a hairline ---- */
html.dark #app [class*="border-gray-200"],
html.dark #app [class*="border-gray-300"],
html.dark #app [class*="border-gray-400"],
html.dark #app [class*="border-gray-600"],
html.dark #app [class*="border-gray-700"],
html.dark #app [class*="dark:border-gray-600"],
html.dark #app [class*="dark:border-gray-700"],
html.dark #app [class*="dark:border-gray-800"],
html[data-theme="dark"] #app [class*="border-gray-200"],
html[data-theme="dark"] #app [class*="border-gray-300"],
html[data-theme="dark"] #app [class*="border-gray-400"],
html[data-theme="dark"] #app [class*="border-gray-600"],
html[data-theme="dark"] #app [class*="border-gray-700"],
html[data-theme="dark"] #app [class*="dark:border-gray-600"],
html[data-theme="dark"] #app [class*="dark:border-gray-700"],
html[data-theme="dark"] #app [class*="dark:border-gray-800"] {
  border-color: var(--ws-hairline) !important;
}

/* ---- Neutralize flat gray fill blocks into calm, translucent surfaces ---- */
html.dark #app [class*="dark:bg-gray-700"],
html.dark #app [class*="dark:bg-gray-800"],
html[data-theme="dark"] #app [class*="dark:bg-gray-700"],
html[data-theme="dark"] #app [class*="dark:bg-gray-800"] {
  background-color: var(--ws-surface) !important;
}

/* ============================================================
   Sidebar — flush with the canvas, no ugly gray block
   ============================================================ */
html.dark aside,
html.dark .sidebar,
html.dark [class*="w-[260px]"],
html[data-theme="dark"] aside,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] [class*="w-[260px]"] {
  background-color: var(--gpt-sidebar-bg) !important;
  background-image: none !important;
  border-right: 1px solid var(--ws-hairline) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.015) !important;
}

html.dark aside > div:first-child,
html.dark .sidebar > div:first-child,
html[data-theme="dark"] aside > div:first-child,
html[data-theme="dark"] .sidebar > div:first-child {
  background-color: transparent !important;
  background-image: none !important;
}

/* Sidebar items: quiet by default, soft surface on hover, clear active pill */
html.dark aside a,
html.dark aside button,
html.dark .sidebar a,
html.dark .sidebar button,
html[data-theme="dark"] aside a,
html[data-theme="dark"] aside button,
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .sidebar button {
  border-radius: 10px !important;
}

html.dark aside a:hover,
html.dark aside button:hover,
html.dark .sidebar a:hover,
html.dark .sidebar button:hover,
html[data-theme="dark"] aside a:hover,
html[data-theme="dark"] aside button:hover,
html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] .sidebar button:hover {
  background-color: var(--ws-surface-hover) !important;
}

html.dark aside a.active,
html.dark aside a[aria-current="page"],
html.dark aside a.router-link-active,
html.dark .router-link-active,
html[data-theme="dark"] aside a.active,
html[data-theme="dark"] aside a[aria-current="page"],
html[data-theme="dark"] aside a.router-link-active,
html[data-theme="dark"] .router-link-active {
  background-color: var(--ws-accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ws-accent-ring) !important;
  color: #e6e8ff !important;
}

/* Sidebar footer: no heavy top border, no solid block */
html.dark #app [class*="mt-auto"][class*="border-t"],
html[data-theme="dark"] #app [class*="mt-auto"][class*="border-t"] {
  border-top: 1px solid var(--ws-hairline) !important;
  background-color: transparent !important;
}

/* ============================================================
   Sidebar primary CTA (footer gradient button) — keep, but refine
   Softer, flatter, less "clumsy floating panel"
   ============================================================ */
html.dark aside [class*="mt-auto"] button[class*="w-full"][class*="border"],
html.dark aside [class*="mt-auto"] a[class*="w-full"][class*="border"],
html.dark .sidebar [class*="mt-auto"] button[class*="w-full"][class*="border"],
html.dark .sidebar [class*="mt-auto"] a[class*="w-full"][class*="border"],
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"],
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"],
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"],
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"] {
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: linear-gradient(180deg, #6d70f5 0%, #5457e6 100%) !important;
  box-shadow:
    var(--ws-inner-highlight),
    0 4px 14px rgba(79, 70, 229, 0.28) !important;
}

html.dark
  aside
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"]:hover,
html.dark aside [class*="mt-auto"] a[class*="w-full"][class*="border"]:hover,
html.dark
  .sidebar
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"]:hover,
html.dark .sidebar [class*="mt-auto"] a[class*="w-full"][class*="border"]:hover,
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"]:hover,
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"]:hover,
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"]:hover,
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"]:hover {
  background: linear-gradient(180deg, #797cf7 0%, #5f62ea 100%) !important;
  box-shadow:
    var(--ws-inner-highlight),
    0 6px 20px rgba(79, 70, 229, 0.36) !important;
  transform: translateY(-1px);
}

/* "New chat" / top outlined action — quiet recessed surface, not a boxy border */
html.dark
  aside
  button[class*="w-full"][class*="border"]:not([class*="mt-auto"] *),
html[data-theme="dark"]
  aside
  button[class*="w-full"][class*="border"]:not([class*="mt-auto"] *) {
  background-color: var(--ws-surface-raised) !important;
  border: 1px solid var(--ws-hairline) !important;
  border-radius: 10px !important;
  box-shadow: var(--ws-inner-highlight) !important;
}

html.dark
  aside
  button[class*="w-full"][class*="border"]:not([class*="mt-auto"] *):hover,
html[data-theme="dark"]
  aside
  button[class*="w-full"][class*="border"]:not([class*="mt-auto"] *):hover {
  background-color: var(--ws-surface-hover) !important;
  border-color: var(--ws-hairline-strong) !important;
}

/* ============================================================
   Composer / input — polished AI command surface
   Slightly elevated, soft hairline, gentle focus glow
   ============================================================ */
html.dark #app [class*="rounded-3xl"][class*="border"],
html.dark #app [class*="rounded-2xl"][class*="border"],
html.dark #app .relative.flex.flex-col.w-full.border,
html[data-theme="dark"] #app [class*="rounded-3xl"][class*="border"],
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="border"],
html[data-theme="dark"] #app .relative.flex.flex-col.w-full.border {
  background-color: var(--gpt-input-bg) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0)
  ) !important;
  border: 1px solid var(--ws-hairline) !important;
  border-radius: 20px !important;
  box-shadow: var(--ws-inner-highlight), var(--ws-elev-2) !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    background-color 0.25s ease !important;
}

html.dark #app [class*="rounded-3xl"][class*="border"]:focus-within,
html.dark #app [class*="rounded-2xl"][class*="border"]:focus-within,
html.dark #app .relative.flex.flex-col.w-full.border:focus-within,
html[data-theme="dark"]
  #app
  [class*="rounded-3xl"][class*="border"]:focus-within,
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:focus-within,
html[data-theme="dark"]
  #app
  .relative.flex.flex-col.w-full.border:focus-within {
  border-color: var(--ws-accent-ring) !important;
  box-shadow:
    var(--ws-inner-highlight),
    0 0 0 3px var(--ws-accent-soft),
    var(--ws-elev-2) !important;
}

/* Textarea sits transparent inside the elevated shell */
html.dark #app textarea,
html[data-theme="dark"] #app textarea {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Standalone textareas (not wrapped) still get the material */
html.dark
  #app
  textarea:not([class*="rounded"] textarea):not(
    .relative.flex.flex-col.w-full.border textarea
  ) {
  background-color: var(--gpt-input-bg) !important;
}

/* ============================================================
   Action pills / chips inside composer — compact & refined
   ============================================================ */
html.dark #app .input-container button.rounded-full.border,
html.dark #app .input-box-wrapper button.rounded-full.border,
html.dark #app button.btn-pill,
html[data-theme="dark"] #app .input-container button.rounded-full.border,
html[data-theme="dark"] #app .input-box-wrapper button.rounded-full.border,
html[data-theme="dark"] #app button.btn-pill {
  background-color: var(--ws-surface) !important;
  border: 1px solid var(--ws-hairline) !important;
  color: var(--gpt-text-muted) !important;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
}

html.dark #app .input-container button.rounded-full.border:hover,
html.dark #app .input-box-wrapper button.rounded-full.border:hover,
html.dark #app button.btn-pill:hover,
html[data-theme="dark"] #app .input-container button.rounded-full.border:hover,
html[data-theme="dark"]
  #app
  .input-box-wrapper
  button.rounded-full.border:hover,
html[data-theme="dark"] #app button.btn-pill:hover {
  background-color: var(--ws-surface-hover) !important;
  border-color: var(--ws-hairline-strong) !important;
  color: var(--gpt-text-main) !important;
}

/* ============================================================
   History / video / generation cards — clean, quiet, subtle lift
   Target card shells that carry their own shadow (a reliable "card"
   signal) plus hover-group cards. Avoids repainting every rounded box.
   ============================================================ */
html.dark #app [class*="rounded-xl"][class*="shadow"],
html.dark #app [class*="rounded-2xl"][class*="shadow"],
html.dark #app [class*="rounded-lg"][class*="shadow"],
html.dark #app .group[class*="rounded-xl"],
html.dark #app .group[class*="rounded-2xl"],
html[data-theme="dark"] #app [class*="rounded-xl"][class*="shadow"],
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="shadow"],
html[data-theme="dark"] #app [class*="rounded-lg"][class*="shadow"],
html[data-theme="dark"] #app .group[class*="rounded-xl"],
html[data-theme="dark"] #app .group[class*="rounded-2xl"] {
  background-color: var(--ws-surface-raised) !important;
  border: 1px solid var(--ws-hairline) !important;
  box-shadow: var(--ws-inner-highlight), var(--ws-elev-1) !important;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}

html.dark #app [class*="rounded-xl"][class*="shadow"]:hover,
html.dark #app [class*="rounded-2xl"][class*="shadow"]:hover,
html.dark #app .group[class*="rounded-xl"]:hover,
html.dark #app .group[class*="rounded-2xl"]:hover,
html[data-theme="dark"] #app [class*="rounded-xl"][class*="shadow"]:hover,
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="shadow"]:hover,
html[data-theme="dark"] #app .group[class*="rounded-xl"]:hover,
html[data-theme="dark"] #app .group[class*="rounded-2xl"]:hover {
  border-color: var(--ws-hairline-strong) !important;
  box-shadow: var(--ws-inner-highlight), var(--ws-elev-2) !important;
  transform: translateY(-2px);
}

/* Media inside cards: crisp rounded corners, no stray inner borders */
html.dark #app [class*="rounded"] video,
html.dark #app [class*="rounded"] img,
html[data-theme="dark"] #app [class*="rounded"] video,
html[data-theme="dark"] #app [class*="rounded"] img {
  border-radius: 12px !important;
}

/* ============================================================
   Popovers / dropdowns / dialogs — floating glass, elevated
   ============================================================ */
html.dark #app [class*="n-popover"],
html.dark #app [class*="n-dropdown-menu"],
html.dark #app [class*="n-dialog"],
html.dark #app [role="menu"],
html.dark #app [role="dialog"],
html[data-theme="dark"] #app [class*="n-popover"],
html[data-theme="dark"] #app [class*="n-dropdown-menu"],
html[data-theme="dark"] #app [class*="n-dialog"],
html[data-theme="dark"] #app [role="menu"],
html[data-theme="dark"] #app [role="dialog"] {
  background-color: rgba(22, 24, 33, 0.92) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  border: 1px solid var(--ws-hairline-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--ws-inner-highlight), var(--ws-elev-3) !important;
}

/* ============================================================
   Scrollbar — thinner, quieter, neutral (drop the gradient)
   ============================================================ */
html.dark ::-webkit-scrollbar-thumb,
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
}

html.dark ::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
}

/* ============================================================
   Announcement banner — glassy, quiet
   ============================================================ */
html.dark #app .announcement-banner,
html[data-theme="dark"] #app .announcement-banner {
  background-color: rgba(22, 24, 33, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--ws-hairline) !important;
  box-shadow: var(--ws-inner-highlight), var(--ws-elev-2) !important;
  border-radius: 12px !important;
}

/* ============================================================
   Reduced motion — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  #app *,
  .flex.justify-between.flex-grow.w-full.pb-2
    button[aria-label="发送消息"]:not(:disabled) {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.dark #app [class*="rounded-xl"][class*="bg-"]:hover,
  html.dark #app [class*="rounded-2xl"][class*="bg-"]:hover,
  html.dark #app .group[class*="rounded"]:hover,
  html[data-theme="dark"] #app [class*="rounded-xl"][class*="bg-"]:hover,
  html[data-theme="dark"] #app [class*="rounded-2xl"][class*="bg-"]:hover,
  html[data-theme="dark"] #app .group[class*="rounded"]:hover {
    transform: none !important;
  }
}

/* ============================================================
   PASS 2 — CORRECTIONS (appended, highest priority)
   Fixes reviewed from screenshot:
   1) Large creation / history / modal panels were translucent
      (rgba surfaces + backdrop-blur) → empty-state art bled through.
      Force SOLID opaque premium dark surfaces. No see-through.
   2) Every sidebar nav item rendered as a boxed outlined card because
      it matches .group + rounded-2xl (the card rule above). Make nav
      items quiet/borderless by default; only hover + active get a
      soft tinted surface. Active gets a single soft accent ring.
   3) Fewer rectangles overall — quiet chips, no stray outlines.
   ============================================================ */

/* ---- 1. LARGE PANELS: solid, opaque, no bleed-through ------------
   These are big elevated surfaces (creation dialogs, video/image
   generation panels, history cards) signalled by shadow-2xl / shadow-xl
   or an explicit white→dark-gray card shell. They must fully occlude
   whatever sits behind them. */
html.dark #app .bg-white.dark\:bg-gray-800.rounded-2xl.shadow-2xl,
html.dark #app .bg-white.dark\:bg-gray-800.rounded-3xl.shadow-2xl,
html.dark #app .bg-white.dark\:bg-gray-800.rounded-2xl.shadow-xl,
html.dark #app .bg-white.dark\:bg-gray-800.rounded-xl.shadow-2xl,
html.dark #app [class*="rounded-2xl"][class*="shadow-2xl"],
html.dark #app [class*="rounded-3xl"][class*="shadow-2xl"],
html.dark #app [class*="rounded-xl"][class*="shadow-2xl"],
html.dark #app [class*="rounded-2xl"][class*="shadow-xl"],
html.dark #app [class*="rounded-3xl"][class*="shadow-xl"],
html[data-theme="dark"] #app .bg-white.dark\:bg-gray-800.rounded-2xl.shadow-2xl,
html[data-theme="dark"] #app .bg-white.dark\:bg-gray-800.rounded-3xl.shadow-2xl,
html[data-theme="dark"] #app .bg-white.dark\:bg-gray-800.rounded-2xl.shadow-xl,
html[data-theme="dark"] #app .bg-white.dark\:bg-gray-800.rounded-xl.shadow-2xl,
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="shadow-2xl"],
html[data-theme="dark"] #app [class*="rounded-3xl"][class*="shadow-2xl"],
html[data-theme="dark"] #app [class*="rounded-xl"][class*="shadow-2xl"],
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="shadow-xl"],
html[data-theme="dark"] #app [class*="rounded-3xl"][class*="shadow-xl"] {
  background-color: var(--ws-panel-solid) !important;
  background-image: none !important;
  border: 1px solid var(--ws-panel-hairline) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    var(--ws-elev-3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modals / dialogs / drawers: fully opaque, no glass blur — these
   overlay the whole app, so translucency here is what bleeds. */
html.dark #app [role="dialog"],
html.dark #app [class*="n-dialog"],
html.dark #app [class*="n-modal"],
html.dark #app [class*="n-drawer"],
html[data-theme="dark"] #app [role="dialog"],
html[data-theme="dark"] #app [class*="n-dialog"],
html[data-theme="dark"] #app [class*="n-modal"],
html[data-theme="dark"] #app [class*="n-drawer"] {
  background-color: var(--ws-panel-solid) !important;
  background-image: none !important;
  border: 1px solid var(--ws-panel-hairline) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    var(--ws-elev-3) !important;
}

/* Any nested white/gray-800 fill inside a solid panel must also be
   opaque so the panel reads as one continuous premium surface. */
html.dark #app [class*="shadow-2xl"] [class*="dark:bg-gray-800"],
html.dark #app [class*="shadow-2xl"] [class*="dark:bg-gray-900"],
html.dark #app [role="dialog"] [class*="dark:bg-gray-800"],
html.dark #app [role="dialog"] [class*="dark:bg-gray-900"],
html[data-theme="dark"] #app [class*="shadow-2xl"] [class*="dark:bg-gray-800"],
html[data-theme="dark"] #app [class*="shadow-2xl"] [class*="dark:bg-gray-900"],
html[data-theme="dark"] #app [role="dialog"] [class*="dark:bg-gray-800"],
html[data-theme="dark"] #app [role="dialog"] [class*="dark:bg-gray-900"] {
  background-color: var(--ws-panel-solid-raised) !important;
  background-image: none !important;
}

/* ---- 2. SIDEBAR NAV: quiet by default, not boxed ------------------
   Override the card rule for anything living in the sidebar. Nav items
   often are `button.group...rounded-2xl`, which the generic card rule
   turned into outlined boxes. Reset them: transparent bg, transparent
   border, no shadow. Only hover + active earn a surface. */
html.dark aside a,
html.dark aside button,
html.dark aside .group,
html.dark .sidebar a,
html.dark .sidebar button,
html.dark .sidebar .group,
html[data-theme="dark"] aside a,
html[data-theme="dark"] aside button,
html[data-theme="dark"] aside .group,
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .sidebar button,
html[data-theme="dark"] .sidebar .group {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hover: very subtle tinted surface, still borderless */
html.dark aside a:hover,
html.dark aside button:hover,
html.dark aside .group:hover,
html.dark .sidebar a:hover,
html.dark .sidebar button:hover,
html.dark .sidebar .group:hover,
html[data-theme="dark"] aside a:hover,
html[data-theme="dark"] aside button:hover,
html[data-theme="dark"] aside .group:hover,
html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] .sidebar button:hover,
html[data-theme="dark"] .sidebar .group:hover {
  background-color: var(--ws-surface-hover) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Active/current: soft indigo fill + single soft ring (one item only) */
html.dark aside a.active,
html.dark aside a[aria-current="page"],
html.dark aside a.router-link-active,
html.dark aside button.active,
html.dark aside button[aria-current="page"],
html.dark .sidebar a.active,
html.dark .sidebar a[aria-current="page"],
html.dark .sidebar a.router-link-active,
html.dark .sidebar button.active,
html.dark .sidebar button[aria-current="page"],
html[data-theme="dark"] aside a.active,
html[data-theme="dark"] aside a[aria-current="page"],
html[data-theme="dark"] aside a.router-link-active,
html[data-theme="dark"] aside button.active,
html[data-theme="dark"] aside button[aria-current="page"],
html[data-theme="dark"] .sidebar a.active,
html[data-theme="dark"] .sidebar a[aria-current="page"],
html[data-theme="dark"] .sidebar a.router-link-active,
html[data-theme="dark"] .sidebar button.active,
html[data-theme="dark"] .sidebar button[aria-current="page"] {
  background-color: var(--ws-accent-soft) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--ws-accent-ring) !important;
  color: #e6e8ff !important;
}

/* Kill the hover-lift transform on sidebar cards inherited from the
   generic card rule — nav items must not float up on hover. */
html.dark aside .group:hover,
html.dark .sidebar .group:hover,
html[data-theme="dark"] aside .group:hover,
html[data-theme="dark"] .sidebar .group:hover {
  transform: none !important;
}

/* The sidebar's own primary CTA (footer gradient button) is NOT a nav
   item — restore its intended filled gradient after the reset above. */
html.dark aside [class*="mt-auto"] button[class*="w-full"][class*="border"],
html.dark aside [class*="mt-auto"] a[class*="w-full"][class*="border"],
html.dark .sidebar [class*="mt-auto"] button[class*="w-full"][class*="border"],
html.dark .sidebar [class*="mt-auto"] a[class*="w-full"][class*="border"],
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"],
html[data-theme="dark"]
  aside
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"],
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  button[class*="w-full"][class*="border"],
html[data-theme="dark"]
  .sidebar
  [class*="mt-auto"]
  a[class*="w-full"][class*="border"] {
  background: linear-gradient(180deg, #6d70f5 0%, #5457e6 100%) !important;
  background-image: linear-gradient(
    180deg,
    #6d70f5 0%,
    #5457e6 100%
  ) !important;
  border: 1px solid transparent !important;
  box-shadow:
    var(--ws-inner-highlight),
    0 4px 14px rgba(79, 70, 229, 0.28) !important;
  color: #ffffff !important;
}

/* ---- 3. Fewer rectangles: quiet parameter chips -------------------
   Selectable option / parameter chips (ratio, duration, resolution,
   style tags) should read as quiet surfaces, not outlined boxes.
   Only the selected chip carries an accent ring. */
html.dark #app button[class*="rounded-full"]:not([aria-label]),
html.dark #app [class*="rounded-lg"][class*="border"][role="button"],
html[data-theme="dark"] #app button[class*="rounded-full"]:not([aria-label]),
html[data-theme="dark"]
  #app
  [class*="rounded-lg"][class*="border"][role="button"] {
  border-color: transparent !important;
  box-shadow: none !important;
}

html.dark #app button[class*="rounded-full"]:not([aria-label]):hover,
html[data-theme="dark"]
  #app
  button[class*="rounded-full"]:not([aria-label]):hover {
  background-color: var(--ws-surface-hover) !important;
}

/* ============================================================
   PASS 3 — SIDEBAR NAV DEBOX (appended, FINAL highest priority)
   Root cause of the persistent boxing: the left nav lives INSIDE
   <main>, rendered as `button.group.w-full`. It is NOT inside
   <aside>/.sidebar, so every PASS 2 sidebar reset silently missed it.
   Meanwhile the generic card rule
     html.dark #app .group[class*="rounded-2xl"]   (spec 1,3,1)
   matched each nav item and painted it: translucent fill +
   hairline border + inset highlight + elevation shadow.

   Fix: target the real rendered node directly. Specificity here is
     html.dark #app main button.group.w-full        → (1,3,3)
   which OUT-SPECIFIES the card rule's (1,3,1); hover/active variants
   land at (1,4,3), beating the card hover rule's (1,4,1). Source
   order (end of file) breaks any remaining ties in our favor.

   Scope guard: only `button.group.w-full` inside `main` is touched.
   Content creation cards and media cards are <div> shells (not
   <button>), so the opaque panels/cards from PASS 2 are untouched.
   ============================================================ */

/* Default nav item — flat, no box, no shadow, no lift. Text/icon
   color is left to the readability layer above (untouched here). */
#app main button.group.w-full,
html.dark #app main button.group.w-full,
html[data-theme="dark"] #app main button.group.w-full {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hover — very subtle wash, still borderless and shadowless */
#app main button.group.w-full:hover,
html.dark #app main button.group.w-full:hover,
html[data-theme="dark"] #app main button.group.w-full:hover {
  background-color: rgba(255, 255, 255, 0.045) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Light theme hover — subtle dark wash instead of white */
html:not(.dark) #app main button.group.w-full:hover,
html[data-theme="light"] #app main button.group.w-full:hover {
  background-color: rgba(15, 23, 42, 0.04) !important;
}

/* Active / current page — subtle indigo fill + faint inset accent
   line (no visible border box). Covers the common active markers. */
#app main button.group.w-full.active,
#app main button.group.w-full[aria-current="page"],
#app main button.group.w-full.router-link-active,
html.dark #app main button.group.w-full.active,
html.dark #app main button.group.w-full[aria-current="page"],
html.dark #app main button.group.w-full.router-link-active,
html[data-theme="dark"] #app main button.group.w-full.active,
html[data-theme="dark"] #app main button.group.w-full[aria-current="page"],
html[data-theme="dark"] #app main button.group.w-full.router-link-active {
  background-color: rgba(99, 102, 241, 0.14) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.22) !important;
  transform: none !important;
}

/* Guard: even if a nav item also carries shadow-* utility classes
   (which the large-panel rule keys off), keep it flat. Same (1,3,3)
   specificity, later in source. */
html.dark #app main button.group.w-full[class*="shadow"],
html[data-theme="dark"] #app main button.group.w-full[class*="shadow"] {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   PASS 4 — PREMIUM REFINEMENT  (appended, FINAL — wins by source
   order + specificity over PASS 2/PASS 3).
   Why this layer exists:
     PASS 3 forced the left-nav buttons to `background-color:
     transparent` + transparent border, which left the sidebar bare
     and ghostly. The brief now forbids pure-transparent VISIBLE
     controls. So every visible control below carries a real, low-alpha
     tinted surface — quiet, but materially present — and NO hard
     rectangle border (border removed, not made transparent).
   Specificity note: sidebar-nav selectors add `body` + `[class]`
     → (1,4,4)/(1,5,4), out-specifying PASS 3's (1,3,3)/(1,4,3)
     including its shadow-class guard; source order breaks any tie.
   ============================================================ */

/* ---- Sidebar nav (real node: main > button.group.w-full) ----------
   Quiet solid material by default. No border box. Soft depth. */
html.dark body #app main button.group.w-full[class],
html[data-theme="dark"] body #app main button.group.w-full[class] {
  background-color: rgba(255, 255, 255, 0.028) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.026),
    rgba(255, 255, 255, 0.008)
  ) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  transform: none !important;
  transition:
    background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.24s ease,
    transform 0.2s cubic-bezier(0.34, 1.32, 0.64, 1) !important;
}

/* Hover — surface warms, item lifts a hair, gentle elevation */
html.dark body #app main button.group.w-full[class]:hover,
html[data-theme="dark"] body #app main button.group.w-full[class]:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.02)
  ) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.26) !important;
  transform: translateY(-1px) !important;
}

/* Press — settle back down with a faint compression */
html.dark body #app main button.group.w-full[class]:active,
html[data-theme="dark"] body #app main button.group.w-full[class]:active {
  transform: translateY(0) scale(0.992) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Active / current page — indigo material + inset accent rail on the
   leading edge (refined, no full outline box). */
html.dark body #app main button.group.w-full[class].active,
html.dark body #app main button.group.w-full[class][aria-current="page"],
html.dark body #app main button.group.w-full[class].router-link-active,
html[data-theme="dark"] body #app main button.group.w-full[class].active,
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class][aria-current="page"],
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class].router-link-active {
  background-color: rgba(99, 101, 241, 0.16) !important;
  background-image: linear-gradient(
    180deg,
    rgba(99, 101, 241, 0.2),
    rgba(99, 101, 241, 0.1)
  ) !important;
  border: 0 !important;
  box-shadow:
    inset 3px 0 0 rgba(129, 140, 248, 0.95),
    inset 0 0 0 1px rgba(99, 101, 241, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  color: #eef0ff !important;
  transform: none !important;
}

html.dark body #app main button.group.w-full[class].active:hover,
html.dark body #app main button.group.w-full[class][aria-current="page"]:hover,
html.dark body #app main button.group.w-full[class].router-link-active:hover,
html[data-theme="dark"] body #app main button.group.w-full[class].active:hover,
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class][aria-current="page"]:hover,
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class].router-link-active:hover {
  background-color: rgba(99, 101, 241, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* Icon inside a nav item drifts a touch on hover — restrained motion */
html.dark body #app main button.group.w-full[class] svg,
html.dark body #app main button.group.w-full[class] .i-icon,
html[data-theme="dark"] body #app main button.group.w-full[class] svg,
html[data-theme="dark"] body #app main button.group.w-full[class] .i-icon {
  transition:
    transform 0.24s cubic-bezier(0.34, 1.32, 0.64, 1),
    color 0.2s ease !important;
}
html.dark body #app main button.group.w-full[class]:hover svg,
html.dark body #app main button.group.w-full[class]:hover .i-icon,
html[data-theme="dark"] body #app main button.group.w-full[class]:hover svg,
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class]:hover
  .i-icon {
  transform: scale(1.08) !important;
}

/* Light theme mirror for the same nav node */
html:not(.dark) body #app main button.group.w-full[class],
html[data-theme="light"] body #app main button.group.w-full[class] {
  background-color: rgba(15, 23, 42, 0.028) !important;
  background-image: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.03),
    rgba(15, 23, 42, 0.008)
  ) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
html:not(.dark) body #app main button.group.w-full[class]:hover,
html[data-theme="light"] body #app main button.group.w-full[class]:hover {
  background-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 14px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px) !important;
}
html:not(.dark) body #app main button.group.w-full[class].active,
html:not(.dark) body #app main button.group.w-full[class][aria-current="page"],
html:not(.dark) body #app main button.group.w-full[class].router-link-active,
html[data-theme="light"] body #app main button.group.w-full[class].active,
html[data-theme="light"]
  body
  #app
  main
  button.group.w-full[class][aria-current="page"],
html[data-theme="light"]
  body
  #app
  main
  button.group.w-full[class].router-link-active {
  background-color: rgba(99, 101, 241, 0.12) !important;
  background-image: linear-gradient(
    180deg,
    rgba(99, 101, 241, 0.15),
    rgba(99, 101, 241, 0.07)
  ) !important;
  box-shadow:
    inset 3px 0 0 rgba(79, 70, 229, 0.85),
    inset 0 0 0 1px rgba(99, 101, 241, 0.22) !important;
  color: #312e81 !important;
}

/* ---- Sidebar <aside>/.sidebar nav links: same quiet material -------
   Covers builds where nav lives in aside/.sidebar rather than main.
   Only full-width nav links/group rows get the surface; tiny header
   icon buttons stay quiet (handled by the [class*="w-full"] scope). */
html.dark body .sidebar a[class*="w-full"],
html.dark body .sidebar .group[class*="rounded"],
html.dark body aside a[class*="w-full"]:not([class*="mt-auto"] *),
html[data-theme="dark"] body .sidebar a[class*="w-full"],
html[data-theme="dark"] body .sidebar .group[class*="rounded"],
html[data-theme="dark"]
  body
  aside
  a[class*="w-full"]:not([class*="mt-auto"] *) {
  background-color: rgba(255, 255, 255, 0.026) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.024),
    rgba(255, 255, 255, 0.006)
  ) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition:
    background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.24s ease,
    transform 0.2s cubic-bezier(0.34, 1.32, 0.64, 1) !important;
}
html.dark body .sidebar a[class*="w-full"]:hover,
html.dark body .sidebar .group[class*="rounded"]:hover,
html.dark body aside a[class*="w-full"]:not([class*="mt-auto"] *):hover,
html[data-theme="dark"] body .sidebar a[class*="w-full"]:hover,
html[data-theme="dark"] body .sidebar .group[class*="rounded"]:hover,
html[data-theme="dark"]
  body
  aside
  a[class*="w-full"]:not([class*="mt-auto"] *):hover {
  background-color: rgba(255, 255, 255, 0.058) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 4px 16px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-1px) !important;
}

/* ---- Primary CTA buttons — refined hover lift + press --------------
   Generate / send / submit filled buttons. Consistent motion. */
#app button.btn-primary,
#app .btn.btn-primary,
#app button[class*="btn-primary"] {
  transition:
    transform 0.16s cubic-bezier(0.34, 1.32, 0.64, 1),
    box-shadow 0.22s ease,
    background-color 0.2s ease,
    filter 0.2s ease !important;
}
#app button.btn-primary:hover:not(:disabled),
#app .btn.btn-primary:hover:not(:disabled),
#app button[class*="btn-primary"]:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 20px rgba(96, 101, 241, 0.34) !important;
  filter: saturate(1.04) brightness(1.03) !important;
}
#app button.btn-primary:active:not(:disabled),
#app .btn.btn-primary:active:not(:disabled),
#app button[class*="btn-primary"]:active:not(:disabled) {
  transform: translateY(0) scale(0.985) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 8px rgba(96, 101, 241, 0.26) !important;
  filter: none !important;
}

/* ---- Parameter / option chips — de-transparent + quiet material ----
   PASS-3-era rules zeroed these to transparent borders; give them a
   real faint surface and drop the border box (no transparent border). */
html.dark #app button[class*="rounded-full"]:not([aria-label]),
html.dark #app [class*="rounded-lg"][class*="border"][role="button"],
html[data-theme="dark"] #app button[class*="rounded-full"]:not([aria-label]),
html[data-theme="dark"]
  #app
  [class*="rounded-lg"][class*="border"][role="button"] {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.16s cubic-bezier(0.34, 1.32, 0.64, 1) !important;
}
html.dark #app button[class*="rounded-full"]:not([aria-label]):hover,
html.dark #app [class*="rounded-lg"][class*="border"][role="button"]:hover,
html[data-theme="dark"]
  #app
  button[class*="rounded-full"]:not([aria-label]):hover,
html[data-theme="dark"]
  #app
  [class*="rounded-lg"][class*="border"][role="button"]:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-1px) !important;
}
html.dark #app button[class*="rounded-full"]:not([aria-label]):active,
html[data-theme="dark"]
  #app
  button[class*="rounded-full"]:not([aria-label]):active {
  transform: translateY(0) scale(0.98) !important;
}

/* ---- Composer shell — a touch more presence + selected accent glow */
html.dark #app [class*="rounded-3xl"][class*="border"]:hover:not(:focus-within),
html.dark #app [class*="rounded-2xl"][class*="border"]:hover:not(:focus-within),
html[data-theme="dark"]
  #app
  [class*="rounded-3xl"][class*="border"]:hover:not(:focus-within),
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:hover:not(:focus-within) {
  border-color: var(--ws-hairline-strong) !important;
  box-shadow:
    var(--ws-inner-highlight),
    0 8px 26px rgba(0, 0, 0, 0.38) !important;
}

/* ---- History / generation card media: subtle zoom on card hover ---- */
html.dark #app .group[class*="rounded"]:hover video,
html.dark #app .group[class*="rounded"]:hover img,
html.dark #app [class*="rounded-xl"][class*="shadow"]:hover img,
html.dark #app [class*="rounded-2xl"][class*="shadow"]:hover img,
html[data-theme="dark"] #app .group[class*="rounded"]:hover video,
html[data-theme="dark"] #app .group[class*="rounded"]:hover img,
html[data-theme="dark"] #app [class*="rounded-xl"][class*="shadow"]:hover img,
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="shadow"]:hover img {
  transform: scale(1.015) !important;
}
html.dark #app .group[class*="rounded"] video,
html.dark #app .group[class*="rounded"] img,
html[data-theme="dark"] #app .group[class*="rounded"] video,
html[data-theme="dark"] #app .group[class*="rounded"] img {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ---- Reduced motion — neutralize every PASS 4 transform/zoom ------- */
@media (prefers-reduced-motion: reduce) {
  html.dark body #app main button.group.w-full[class],
  html.dark body #app main button.group.w-full[class]:hover,
  html.dark body #app main button.group.w-full[class]:active,
  html[data-theme="dark"] body #app main button.group.w-full[class],
  html[data-theme="dark"] body #app main button.group.w-full[class]:hover,
  html:not(.dark) body #app main button.group.w-full[class]:hover,
  html[data-theme="light"] body #app main button.group.w-full[class]:hover,
  #app button.btn-primary:hover:not(:disabled),
  #app button.btn-primary:active:not(:disabled),
  #app .btn.btn-primary:hover:not(:disabled),
  #app .group[class*="rounded"]:hover video,
  #app .group[class*="rounded"]:hover img {
    transform: none !important;
  }
}

/* ============================================================
   PASS 5 — DE-TRANSPARENT FOOTER OPTION BUTTONS (appended, FINAL)
   Root cause: creation-footer option buttons (model / resolution /
   duration / aspect-ratio / sound toggle — text like `♪ 声音关`,
   `宽高比`, `1080P`) carry `border-gray-*` utility classes, so the
   hairline rule repaints their border to rgba(255,255,255,.08) but
   NOTHING sets a fill — computed background stays rgba(0,0,0,0), i.e.
   pure transparent. The PASS 4 chip rules only reach
   `button[class*="rounded-full"]:not([aria-label])` /
   `[role="button"]`, so these bordered option buttons slip through.

   Fix: any bordered <button> / [role=button] that is NOT a full-width
   nav/CTA row and NOT an icon-only action gets a real low-alpha
   material surface + a subtle gradient (nonzero alpha). Border kept as
   a subtle hairline, never transparent. Scope guards keep large panels
   (div shells) and the sidebar untouched.
   ============================================================ */

html.dark
  #app
  button[class*="border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not([aria-label="启用或禁用网络搜索"]),
html.dark
  #app
  button[class*="dark:border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not([aria-label="启用或禁用网络搜索"]),
html.dark #app [role="button"][class*="border-gray"]:not([class*="w-full"]),
html.dark
  #app
  [role="button"][class*="dark:border-gray"]:not([class*="w-full"]),
html[data-theme="dark"]
  #app
  button[class*="border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not([aria-label="启用或禁用网络搜索"]),
html[data-theme="dark"]
  #app
  button[class*="dark:border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not([aria-label="启用或禁用网络搜索"]),
html[data-theme="dark"]
  #app
  [role="button"][class*="border-gray"]:not([class*="w-full"]),
html[data-theme="dark"]
  #app
  [role="button"][class*="dark:border-gray"]:not([class*="w-full"]) {
  background-color: rgba(255, 255, 255, 0.028) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.008)
  ) !important;
  border-color: var(--ws-hairline) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

html.dark
  #app
  button[class*="border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not(
    [aria-label="启用或禁用网络搜索"]
  ):hover,
html.dark
  #app
  button[class*="dark:border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not(
    [aria-label="启用或禁用网络搜索"]
  ):hover,
html.dark
  #app
  [role="button"][class*="border-gray"]:not([class*="w-full"]):hover,
html.dark
  #app
  [role="button"][class*="dark:border-gray"]:not([class*="w-full"]):hover,
html[data-theme="dark"]
  #app
  button[class*="border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not(
    [aria-label="启用或禁用网络搜索"]
  ):hover,
html[data-theme="dark"]
  #app
  button[class*="dark:border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not(
    [aria-label="启用或禁用网络搜索"]
  ):hover,
html[data-theme="dark"]
  #app
  [role="button"][class*="border-gray"]:not([class*="w-full"]):hover,
html[data-theme="dark"]
  #app
  [role="button"][class*="dark:border-gray"]:not([class*="w-full"]):hover {
  background-color: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--ws-hairline-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Light theme mirror — faint dark-tinted material, never transparent */
html:not(.dark)
  #app
  button[class*="border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not([aria-label="启用或禁用网络搜索"]),
html:not(.dark)
  #app
  [role="button"][class*="border-gray"]:not([class*="w-full"]),
html[data-theme="light"]
  #app
  button[class*="border-gray"]:not([class*="w-full"]):not(
    [aria-label="发送消息"]
  ):not([aria-label="上传文件/图片"]):not([aria-label="启用或禁用网络搜索"]),
html[data-theme="light"]
  #app
  [role="button"][class*="border-gray"]:not([class*="w-full"]) {
  background-color: rgba(15, 23, 42, 0.028) !important;
  background-image: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.03),
    rgba(15, 23, 42, 0.008)
  ) !important;
  border-color: var(--ws-hairline) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
   PASS 6 — CREATION DROPDOWN GLASS MATERIAL FIX
   Image/video creation parameter dropdowns were still almost
   transparent: panel computed background was rgba(255,255,255,.05)
   and each menu row was rgba(0,0,0,0). This gives those popovers a
   restrained solid-glass surface while keeping the controls compact.
   ============================================================ */

html.dark #app .absolute.bottom-full.left-0.mb-2[class*="z-"],
html[data-theme="dark"] #app .absolute.bottom-full.left-0.mb-2[class*="z-"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 6px !important;
  overflow: hidden !important;
  background-color: rgba(16, 19, 29, 0.96) !important;
  background-image:
    linear-gradient(180deg, rgba(34, 39, 56, 0.96), rgba(12, 15, 24, 0.95)),
    radial-gradient(
      circle at 18% 0%,
      rgba(99, 101, 241, 0.13),
      rgba(99, 101, 241, 0) 44%
    ) !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  border-radius: 12px !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.42),
    0 2px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(14px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
}

html.dark #app .absolute.bottom-full.left-0.mb-2[class*="z-"] button.w-full,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full {
  min-height: 34px !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.045) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.052),
    rgba(255, 255, 255, 0.018)
  ) !important;
  color: rgba(244, 247, 251, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease !important;
}

html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:hover,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:hover,
html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:focus-visible,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:focus-visible {
  background-color: rgba(99, 101, 241, 0.18) !important;
  background-image: linear-gradient(
    180deg,
    rgba(129, 140, 248, 0.22),
    rgba(99, 101, 241, 0.12)
  ) !important;
  border-color: rgba(145, 149, 255, 0.28) !important;
  color: #ffffff !important;
  transform: translateX(1px) !important;
}

html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:active,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:active {
  transform: translateX(1px) scale(0.99) !important;
}

html:not(.dark) #app .absolute.bottom-full.left-0.mb-2[class*="z-"],
html[data-theme="light"] #app .absolute.bottom-full.left-0.mb-2[class*="z-"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 6px !important;
  overflow: hidden !important;
  background-color: rgba(250, 252, 255, 0.96) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(242, 246, 255, 0.95)
    ),
    radial-gradient(
      circle at 18% 0%,
      rgba(99, 101, 241, 0.1),
      rgba(99, 101, 241, 0) 45%
    ) !important;
  border: 1px solid rgba(15, 23, 42, 0.105) !important;
  border-radius: 12px !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.15),
    0 2px 10px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}

html:not(.dark)
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full,
html[data-theme="light"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full {
  min-height: 34px !important;
  border-radius: 8px !important;
  background-color: rgba(15, 23, 42, 0.045) !important;
  background-image: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.045),
    rgba(15, 23, 42, 0.016)
  ) !important;
  color: rgba(15, 23, 42, 0.86) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html:not(.dark)
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:hover,
html[data-theme="light"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:hover,
html:not(.dark)
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:focus-visible,
html[data-theme="light"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:focus-visible {
  background-color: rgba(99, 101, 241, 0.12) !important;
  background-image: linear-gradient(
    180deg,
    rgba(99, 101, 241, 0.15),
    rgba(99, 101, 241, 0.06)
  ) !important;
  border-color: rgba(99, 101, 241, 0.22) !important;
  color: rgba(31, 35, 86, 0.95) !important;
}

/* ============================================================
   PASS 7 — QUIET UI DENSITY REDUCTION
   Goal: keep the premium dark interface, but remove the crowded
   feeling caused by too many persistent blocks, hard hairlines, and
   repeated inset highlights. Generation/model logic is untouched.
   ============================================================ */

html.dark body,
html[data-theme="dark"] body {
  background: #090b10 !important;
}

html.dark #app [class*="border-gray"],
html.dark #app [class*="dark:border-gray"],
html[data-theme="dark"] #app [class*="border-gray"],
html[data-theme="dark"] #app [class*="dark:border-gray"] {
  border-color: rgba(255, 255, 255, 0.045) !important;
}

html.dark #app [class*="border-t"],
html.dark #app [class*="border-b"],
html.dark #app [class*="border-r"],
html[data-theme="dark"] #app [class*="border-t"],
html[data-theme="dark"] #app [class*="border-b"],
html[data-theme="dark"] #app [class*="border-r"] {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark #app .fixed.top-0.left-0,
html[data-theme="dark"] #app .fixed.top-0.left-0,
html.dark .sidebar,
html[data-theme="dark"] .sidebar {
  background-color: #0a0c11 !important;
  border-right-color: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

html.dark body #app main button.group.w-full[class],
html[data-theme="dark"] body #app main button.group.w-full[class] {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.dark body #app main button.group.w-full[class]:hover,
html[data-theme="dark"] body #app main button.group.w-full[class]:hover {
  background-color: rgba(255, 255, 255, 0.038) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html.dark body #app main button.group.w-full[class*="bg-gray-200"],
html.dark body #app main button.group.w-full[class*="dark:bg-gray-800"],
html.dark body #app main button.group.w-full[class].active,
html.dark body #app main button.group.w-full[class][aria-current="page"],
html.dark body #app main button.group.w-full[class].router-link-active,
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class*="bg-gray-200"],
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class*="dark:bg-gray-800"],
html[data-theme="dark"] body #app main button.group.w-full[class].active,
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class][aria-current="page"],
html[data-theme="dark"]
  body
  #app
  main
  button.group.w-full[class].router-link-active {
  background-color: rgba(99, 101, 241, 0.105) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.dark #app section[class*="border-t"],
html[data-theme="dark"] #app section[class*="border-t"],
html.dark #app .border-t[class*="bg-white"],
html.dark #app .border-t[class*="dark:bg-gray-900"],
html[data-theme="dark"] #app .border-t[class*="bg-white"],
html[data-theme="dark"] #app .border-t[class*="dark:bg-gray-900"] {
  background-color: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

html.dark #app [class*="shadow-2xl"][class*="rounded"],
html.dark #app [class*="shadow-xl"][class*="rounded"],
html[data-theme="dark"] #app [class*="shadow-2xl"][class*="rounded"],
html[data-theme="dark"] #app [class*="shadow-xl"][class*="rounded"] {
  background-color: rgba(17, 20, 27, 0.94) !important;
  background-image: linear-gradient(
    180deg,
    rgba(20, 23, 31, 0.95),
    rgba(14, 17, 24, 0.94)
  ) !important;
  border-color: rgba(255, 255, 255, 0.045) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html.dark #app [class*="rounded-xl"][class*="border-dashed"],
html[data-theme="dark"] #app [class*="rounded-xl"][class*="border-dashed"] {
  background-color: rgba(255, 255, 255, 0.016) !important;
  background-image: none !important;
  border-style: solid !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

html.dark #app label[class*="w-14"][class*="h-14"],
html.dark #app button[class*="w-14"][class*="h-14"],
html[data-theme="dark"] #app label[class*="w-14"][class*="h-14"],
html[data-theme="dark"] #app button[class*="w-14"][class*="h-14"] {
  background-color: rgba(255, 255, 255, 0.018) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

html.dark #app label[class*="w-14"][class*="h-14"]:hover,
html.dark #app button[class*="w-14"][class*="h-14"]:hover,
html[data-theme="dark"] #app label[class*="w-14"][class*="h-14"]:hover,
html[data-theme="dark"] #app button[class*="w-14"][class*="h-14"]:hover {
  background-color: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark #app textarea,
html[data-theme="dark"] #app textarea {
  background-color: rgba(255, 255, 255, 0.018) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

html.dark #app textarea:focus,
html[data-theme="dark"] #app textarea:focus {
  box-shadow:
    inset 0 0 0 1px rgba(99, 101, 241, 0.22),
    0 0 0 3px rgba(99, 101, 241, 0.08) !important;
}

html.dark #app .absolute.inset-0[class*="border-transparent"],
html[data-theme="dark"] #app .absolute.inset-0[class*="border-transparent"] {
  border-color: transparent !important;
  box-shadow: none !important;
}

html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"],
html.dark
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"],
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"],
html[data-theme="dark"]
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"] {
  background-color: rgba(255, 255, 255, 0.018) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"]:hover,
html.dark
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"]:hover,
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"]:hover,
html[data-theme="dark"]
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"]:hover {
  background-color: rgba(255, 255, 255, 0.048) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark #app button[class*="border-primary"],
html.dark #app button[class*="bg-primary"],
html[data-theme="dark"] #app button[class*="border-primary"],
html[data-theme="dark"] #app button[class*="bg-primary"] {
  background-color: rgba(99, 101, 241, 0.13) !important;
  background-image: none !important;
  border-color: rgba(99, 101, 241, 0.18) !important;
  box-shadow: none !important;
}

html.dark #app .btn.btn-primary,
html[data-theme="dark"] #app .btn.btn-primary {
  background-color: #6365f1 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(99, 101, 241, 0.24) !important;
}

html.dark #app .btn.btn-primary:disabled,
html[data-theme="dark"] #app .btn.btn-primary:disabled {
  background-color: #171717 !important;
  color: rgba(244, 247, 251, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

/* Keep dropdowns readable after the quieting layer above. */
html.dark #app .absolute.bottom-full.left-0.mb-2[class*="z-"],
html[data-theme="dark"] #app .absolute.bottom-full.left-0.mb-2[class*="z-"] {
  background-color: rgba(16, 19, 29, 0.96) !important;
  background-image:
    linear-gradient(180deg, rgba(31, 36, 51, 0.96), rgba(12, 15, 24, 0.95)),
    radial-gradient(
      circle at 18% 0%,
      rgba(99, 101, 241, 0.1),
      rgba(99, 101, 241, 0) 44%
    ) !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html.dark #app .absolute.bottom-full.left-0.mb-2[class*="z-"] button.w-full,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full {
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:hover,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full:hover {
  background-color: rgba(99, 101, 241, 0.16) !important;
  border-color: rgba(145, 149, 255, 0.2) !important;
}

/* Light theme mirror: quieter edges without flattening every control. */
html:not(.dark) #app [class*="border-gray"],
html[data-theme="light"] #app [class*="border-gray"] {
  border-color: rgba(15, 23, 42, 0.07) !important;
}

html:not(.dark) body #app main button.group.w-full[class],
html[data-theme="light"] body #app main button.group.w-full[class] {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:not(.dark) body #app main button.group.w-full[class]:hover,
html[data-theme="light"] body #app main button.group.w-full[class]:hover {
  background-color: rgba(15, 23, 42, 0.035) !important;
}

html:not(.dark) #app [class*="shadow-2xl"][class*="rounded"],
html:not(.dark) #app [class*="shadow-xl"][class*="rounded"],
html[data-theme="light"] #app [class*="shadow-2xl"][class*="rounded"],
html[data-theme="light"] #app [class*="shadow-xl"][class*="rounded"] {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(15, 23, 42, 0.07) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

/* ============================================================
   PASS 8 — HISTORY + DIVIDER SOFTENING
   Complements PASS 7 by reducing the remaining "too many lines"
   feeling in history/date grouped content and secondary card actions.
   ============================================================ */

html.dark #app hr,
html.dark #app [class*="h-px"][class*="bg-gray"],
html.dark #app [class*="border-t"][class*="flex-1"],
html.dark #app [class*="border-b"][class*="flex-1"],
html[data-theme="dark"] #app hr,
html[data-theme="dark"] #app [class*="h-px"][class*="bg-gray"],
html[data-theme="dark"] #app [class*="border-t"][class*="flex-1"],
html[data-theme="dark"] #app [class*="border-b"][class*="flex-1"] {
  background-color: rgba(255, 255, 255, 0.026) !important;
  border-color: rgba(255, 255, 255, 0.026) !important;
  opacity: 0.8 !important;
}

html.dark #app [class*="rounded-full"][class*="text-xs"][class*="border"],
html.dark #app [class*="rounded-full"][class*="text-sm"][class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-full"][class*="text-xs"][class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-full"][class*="text-sm"][class*="border"] {
  background-color: rgba(255, 255, 255, 0.02) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

html.dark #app [class*="rounded-2xl"][class*="border"]:has(video),
html.dark #app [class*="rounded-2xl"][class*="border"]:has(img),
html.dark #app [class*="rounded-xl"][class*="border"]:has(video),
html.dark #app [class*="rounded-xl"][class*="border"]:has(img),
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="border"]:has(video),
html[data-theme="dark"] #app [class*="rounded-2xl"][class*="border"]:has(img),
html[data-theme="dark"] #app [class*="rounded-xl"][class*="border"]:has(video),
html[data-theme="dark"] #app [class*="rounded-xl"][class*="border"]:has(img) {
  background-color: rgba(255, 255, 255, 0.016) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

html.dark
  #app
  [class*="rounded-2xl"][class*="border"]:has(video)
  [class*="rounded"][class*="border"],
html.dark
  #app
  [class*="rounded-2xl"][class*="border"]:has(img)
  [class*="rounded"][class*="border"],
html.dark
  #app
  [class*="rounded-xl"][class*="border"]:has(video)
  [class*="rounded"][class*="border"],
html.dark
  #app
  [class*="rounded-xl"][class*="border"]:has(img)
  [class*="rounded"][class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:has(video)
  [class*="rounded"][class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:has(img)
  [class*="rounded"][class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-xl"][class*="border"]:has(video)
  [class*="rounded"][class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-xl"][class*="border"]:has(img)
  [class*="rounded"][class*="border"] {
  background-color: rgba(255, 255, 255, 0.012) !important;
  border-color: rgba(255, 255, 255, 0.032) !important;
  box-shadow: none !important;
}

html.dark
  #app
  [class*="rounded-2xl"][class*="border"]:has(video)
  button[class*="border"],
html.dark
  #app
  [class*="rounded-2xl"][class*="border"]:has(img)
  button[class*="border"],
html.dark
  #app
  [class*="rounded-xl"][class*="border"]:has(video)
  button[class*="border"],
html.dark
  #app
  [class*="rounded-xl"][class*="border"]:has(img)
  button[class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:has(video)
  button[class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:has(img)
  button[class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-xl"][class*="border"]:has(video)
  button[class*="border"],
html[data-theme="dark"]
  #app
  [class*="rounded-xl"][class*="border"]:has(img)
  button[class*="border"] {
  background-color: rgba(255, 255, 255, 0.014) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

html.dark
  #app
  [class*="rounded-2xl"][class*="border"]:has(video)
  button[class*="border"]:hover,
html.dark
  #app
  [class*="rounded-2xl"][class*="border"]:has(img)
  button[class*="border"]:hover,
html.dark
  #app
  [class*="rounded-xl"][class*="border"]:has(video)
  button[class*="border"]:hover,
html.dark
  #app
  [class*="rounded-xl"][class*="border"]:has(img)
  button[class*="border"]:hover,
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:has(video)
  button[class*="border"]:hover,
html[data-theme="dark"]
  #app
  [class*="rounded-2xl"][class*="border"]:has(img)
  button[class*="border"]:hover,
html[data-theme="dark"]
  #app
  [class*="rounded-xl"][class*="border"]:has(video)
  button[class*="border"]:hover,
html[data-theme="dark"]
  #app
  [class*="rounded-xl"][class*="border"]:has(img)
  button[class*="border"]:hover {
  background-color: rgba(255, 255, 255, 0.044) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html:not(.dark) #app hr,
html:not(.dark) #app [class*="h-px"][class*="bg-gray"],
html:not(.dark) #app [class*="border-t"][class*="flex-1"],
html[data-theme="light"] #app hr,
html[data-theme="light"] #app [class*="h-px"][class*="bg-gray"],
html[data-theme="light"] #app [class*="border-t"][class*="flex-1"] {
  background-color: rgba(15, 23, 42, 0.055) !important;
  border-color: rgba(15, 23, 42, 0.055) !important;
}

/* ============================================================
   PASS 9 — SELECTED STATE + SCROLLABLE PARAM MENUS
   Makes video creation selected chips visibly active again after the
   quiet pass, and lets long duration menus scroll with the mouse wheel.
   ============================================================ */

html.dark #app button[class*="border-primary"],
html.dark #app button[class*="bg-primary"],
html.dark #app button[class*="dark:bg-primary"],
html[data-theme="dark"] #app button[class*="border-primary"],
html[data-theme="dark"] #app button[class*="bg-primary"],
html[data-theme="dark"] #app button[class*="dark:bg-primary"] {
  background-color: rgba(99, 101, 241, 0.26) !important;
  background-image: linear-gradient(
    180deg,
    rgba(116, 119, 255, 0.3),
    rgba(83, 79, 232, 0.22)
  ) !important;
  border-color: rgba(154, 160, 255, 0.42) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 0 1px rgba(99, 101, 241, 0.14),
    0 8px 18px rgba(99, 101, 241, 0.14) !important;
}

html.dark #app button[class*="border-primary"] *,
html.dark #app button[class*="bg-primary"] *,
html.dark #app button[class*="dark:bg-primary"] *,
html[data-theme="dark"] #app button[class*="border-primary"] *,
html[data-theme="dark"] #app button[class*="bg-primary"] *,
html[data-theme="dark"] #app button[class*="dark:bg-primary"] * {
  color: #ffffff !important;
}

html.dark #app .absolute.bottom-full.left-0.mb-2[class*="z-"],
html[data-theme="dark"] #app .absolute.bottom-full.left-0.mb-2[class*="z-"] {
  max-height: min(320px, calc(100vh - 160px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(145, 149, 255, 0.36) rgba(255, 255, 255, 0.045) !important;
}

html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]::-webkit-scrollbar,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]::-webkit-scrollbar {
  width: 6px !important;
}

html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]::-webkit-scrollbar-track,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035) !important;
  border-radius: 999px !important;
}

html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]::-webkit-scrollbar-thumb,
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]::-webkit-scrollbar-thumb {
  background: rgba(145, 149, 255, 0.36) !important;
  border-radius: 999px !important;
}

html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full[class*="bg-primary"],
html.dark
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full[class*="border-primary"],
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full[class*="bg-primary"],
html[data-theme="dark"]
  #app
  .absolute.bottom-full.left-0.mb-2[class*="z-"]
  button.w-full[class*="border-primary"] {
  background-color: rgba(99, 101, 241, 0.3) !important;
  border-color: rgba(154, 160, 255, 0.38) !important;
  color: #ffffff !important;
}

html:not(.dark) #app button[class*="border-primary"],
html:not(.dark) #app button[class*="bg-primary"],
html[data-theme="light"] #app button[class*="border-primary"],
html[data-theme="light"] #app button[class*="bg-primary"] {
  background-color: rgba(99, 101, 241, 0.16) !important;
  background-image: linear-gradient(
    180deg,
    rgba(99, 101, 241, 0.18),
    rgba(99, 101, 241, 0.1)
  ) !important;
  border-color: rgba(99, 101, 241, 0.32) !important;
  color: rgba(31, 35, 86, 0.96) !important;
}

html:not(.dark) #app .absolute.bottom-full.left-0.mb-2[class*="z-"],
html[data-theme="light"] #app .absolute.bottom-full.left-0.mb-2[class*="z-"] {
  max-height: min(320px, calc(100vh - 160px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(99, 101, 241, 0.3) rgba(15, 23, 42, 0.06) !important;
}

/* Selected chips need higher specificity than the quiet generic button rule. */
html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="border-primary"],
html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="bg-primary"],
html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="dark:bg-primary"],
html.dark
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"][class*="border-primary"],
html.dark
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"][class*="bg-primary"],
html.dark
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"][class*="dark:bg-primary"],
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="border-primary"],
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="bg-primary"],
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="dark:bg-primary"],
html[data-theme="dark"]
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"][class*="border-primary"],
html[data-theme="dark"]
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"][class*="bg-primary"],
html[data-theme="dark"]
  #app
  button[class*="px-4"][class*="py-2"][class*="rounded-lg"][class*="border"][class*="dark:bg-primary"] {
  background-color: rgba(99, 101, 241, 0.32) !important;
  background-image: linear-gradient(
    180deg,
    rgba(122, 124, 255, 0.34),
    rgba(83, 79, 232, 0.24)
  ) !important;
  border-color: rgba(164, 169, 255, 0.48) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(99, 101, 241, 0.2),
    0 10px 22px rgba(99, 101, 241, 0.18) !important;
}

html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="border-primary"]
  *,
html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="bg-primary"]
  *,
html.dark
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="dark:bg-primary"]
  *,
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="border-primary"]
  *,
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="bg-primary"]
  *,
html[data-theme="dark"]
  #app
  button[class*="px-3"][class*="py-1.5"][class*="rounded-lg"][class*="border"][class*="dark:bg-primary"]
  * {
  color: #ffffff !important;
}

/* ============================================================
   PASS 11 — MEDIA LIBRARY DARK UI ADAPTATION
   The media resource page ships a separate light admin-style surface.
   This layer adapts only `.media-page` and Element controls inside it.
   ============================================================ */

html.dark #app .media-page,
html[data-theme="dark"] #app .media-page {
  min-height: 100% !important;
  background: linear-gradient(
    180deg,
    rgba(12, 14, 20, 0.98),
    rgba(9, 11, 16, 0.98)
  ) !important;
  color: rgba(244, 247, 251, 0.92) !important;
}

html.dark #app .media-page *,
html[data-theme="dark"] #app .media-page * {
  border-color: rgba(255, 255, 255, 0.055) !important;
}

html.dark #app .media-page .layout,
html[data-theme="dark"] #app .media-page .layout {
  gap: 16px !important;
  padding: 24px !important;
}

html.dark #app .media-page .sidebar,
html[data-theme="dark"] #app .media-page .sidebar {
  width: 280px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark #app .media-page .panel,
html.dark #app .media-page .content,
html[data-theme="dark"] #app .media-page .panel,
html[data-theme="dark"] #app .media-page .content {
  background: linear-gradient(
    180deg,
    rgba(18, 21, 30, 0.96),
    rgba(14, 17, 24, 0.95)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  border-radius: 14px !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html.dark #app .media-page .content,
html[data-theme="dark"] #app .media-page .content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.dark #app .media-page h1,
html.dark #app .media-page h2,
html.dark #app .media-page h3,
html.dark #app .media-page .panel-header,
html[data-theme="dark"] #app .media-page h1,
html[data-theme="dark"] #app .media-page h2,
html[data-theme="dark"] #app .media-page h3,
html[data-theme="dark"] #app .media-page .panel-header {
  color: #ffffff !important;
}

html.dark #app .media-page .panel h3,
html[data-theme="dark"] #app .media-page .panel h3 {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  margin-bottom: 12px !important;
  color: rgba(244, 247, 251, 0.92) !important;
}

html.dark #app .media-page .el-radio-group,
html[data-theme="dark"] #app .media-page .el-radio-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html.dark #app .media-page .el-radio-button,
html[data-theme="dark"] #app .media-page .el-radio-button {
  margin: 0 !important;
}

html.dark #app .media-page .el-radio-button__inner,
html[data-theme="dark"] #app .media-page .el-radio-button__inner {
  min-width: 58px !important;
  height: 32px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: rgba(244, 247, 251, 0.78) !important;
  box-shadow: none !important;
}

html.dark
  #app
  .media-page
  .el-radio-button__original-radio:checked
  + .el-radio-button__inner,
html[data-theme="dark"]
  #app
  .media-page
  .el-radio-button__original-radio:checked
  + .el-radio-button__inner {
  background: linear-gradient(
    180deg,
    rgba(122, 124, 255, 0.34),
    rgba(83, 79, 232, 0.25)
  ) !important;
  border-color: rgba(164, 169, 255, 0.44) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 8px 18px rgba(99, 101, 241, 0.16) !important;
}

html.dark #app .media-page .tree-node,
html.dark #app .media-page .folder-item,
html.dark #app .media-page [class*="folder"],
html[data-theme="dark"] #app .media-page .tree-node,
html[data-theme="dark"] #app .media-page .folder-item,
html[data-theme="dark"] #app .media-page [class*="folder"] {
  color: rgba(244, 247, 251, 0.82) !important;
}

html.dark #app .media-page .actions,
html[data-theme="dark"] #app .media-page .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

html.dark #app .media-page .actions .el-divider,
html[data-theme="dark"] #app .media-page .actions .el-divider {
  opacity: 0.35 !important;
}

html.dark #app .media-page .el-button,
html[data-theme="dark"] #app .media-page .el-button {
  height: 30px !important;
  padding: 0 13px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.028) !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  color: rgba(244, 247, 251, 0.86) !important;
  box-shadow: none !important;
}

html.dark #app .media-page .el-button:not(.is-disabled):hover,
html[data-theme="dark"] #app .media-page .el-button:not(.is-disabled):hover {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html.dark #app .media-page .el-button--primary,
html[data-theme="dark"] #app .media-page .el-button--primary {
  background: #6365f1 !important;
  border-color: rgba(164, 169, 255, 0.44) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(99, 101, 241, 0.22) !important;
}

html.dark #app .media-page .el-button--danger,
html[data-theme="dark"] #app .media-page .el-button--danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.28) !important;
  color: rgba(254, 226, 226, 0.96) !important;
}

html.dark #app .media-page .el-button.is-disabled,
html[data-theme="dark"] #app .media-page .el-button.is-disabled {
  opacity: 0.42 !important;
  background: rgba(255, 255, 255, 0.018) !important;
  color: rgba(244, 247, 251, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

html.dark #app .media-page .el-input,
html[data-theme="dark"] #app .media-page .el-input {
  --el-input-bg-color: rgba(255, 255, 255, 0.028) !important;
  --el-input-border-color: rgba(255, 255, 255, 0.065) !important;
  --el-input-hover-border-color: rgba(255, 255, 255, 0.12) !important;
  --el-input-focus-border-color: rgba(99, 101, 241, 0.42) !important;
  --el-input-text-color: rgba(244, 247, 251, 0.92) !important;
  --el-input-placeholder-color: rgba(244, 247, 251, 0.48) !important;
}

html.dark #app .media-page .el-input__wrapper,
html[data-theme="dark"] #app .media-page .el-input__wrapper {
  min-height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.028) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055) !important;
}

html.dark #app .media-page .el-input__wrapper.is-focus,
html[data-theme="dark"] #app .media-page .el-input__wrapper.is-focus {
  box-shadow:
    inset 0 0 0 1px rgba(99, 101, 241, 0.42),
    0 0 0 3px rgba(99, 101, 241, 0.09) !important;
}

html.dark #app .media-page .el-input__inner,
html[data-theme="dark"] #app .media-page .el-input__inner {
  color: rgba(244, 247, 251, 0.92) !important;
}

html.dark #app .media-page .summary,
html.dark #app .media-page [class*="summary"],
html.dark #app .media-page .count,
html[data-theme="dark"] #app .media-page .summary,
html[data-theme="dark"] #app .media-page [class*="summary"],
html[data-theme="dark"] #app .media-page .count {
  color: rgba(244, 247, 251, 0.58) !important;
}

html.dark #app .media-page .asset-grid,
html.dark #app .media-page .file-grid,
html.dark #app .media-page .media-grid,
html[data-theme="dark"] #app .media-page .asset-grid,
html[data-theme="dark"] #app .media-page .file-grid,
html[data-theme="dark"] #app .media-page .media-grid {
  gap: 16px !important;
}

html.dark #app .media-page .asset-card,
html.dark #app .media-page .file-card,
html.dark #app .media-page .media-card,
html.dark #app .media-page [class*="asset-card"],
html.dark #app .media-page [class*="file-card"],
html.dark #app .media-page [class*="media-card"],
html[data-theme="dark"] #app .media-page .asset-card,
html[data-theme="dark"] #app .media-page .file-card,
html[data-theme="dark"] #app .media-page .media-card,
html[data-theme="dark"] #app .media-page [class*="asset-card"],
html[data-theme="dark"] #app .media-page [class*="file-card"],
html[data-theme="dark"] #app .media-page [class*="media-card"] {
  background: rgba(255, 255, 255, 0.022) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease !important;
}

html.dark #app .media-page .asset-card:hover,
html.dark #app .media-page .file-card:hover,
html.dark #app .media-page .media-card:hover,
html.dark #app .media-page [class*="asset-card"]:hover,
html.dark #app .media-page [class*="file-card"]:hover,
html.dark #app .media-page [class*="media-card"]:hover,
html[data-theme="dark"] #app .media-page .asset-card:hover,
html[data-theme="dark"] #app .media-page .file-card:hover,
html[data-theme="dark"] #app .media-page .media-card:hover,
html[data-theme="dark"] #app .media-page [class*="asset-card"]:hover,
html[data-theme="dark"] #app .media-page [class*="file-card"]:hover,
html[data-theme="dark"] #app .media-page [class*="media-card"]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(145, 149, 255, 0.18) !important;
  transform: translateY(-1px) !important;
}

html.dark #app .media-page img,
html.dark #app .media-page video,
html[data-theme="dark"] #app .media-page img,
html[data-theme="dark"] #app .media-page video {
  background-color: rgba(255, 255, 255, 0.035) !important;
}

html.dark #app .media-page .el-tag,
html[data-theme="dark"] #app .media-page .el-tag {
  border-radius: 999px !important;
  background: rgba(99, 101, 241, 0.16) !important;
  border-color: rgba(145, 149, 255, 0.22) !important;
  color: rgba(232, 235, 255, 0.96) !important;
}

html.dark #app .media-page .el-empty,
html[data-theme="dark"] #app .media-page .el-empty {
  --el-empty-fill-color-0: rgba(255, 255, 255, 0.16) !important;
  --el-empty-fill-color-1: rgba(255, 255, 255, 0.12) !important;
  --el-empty-fill-color-2: rgba(255, 255, 255, 0.1) !important;
  --el-empty-fill-color-3: rgba(255, 255, 255, 0.08) !important;
  --el-empty-fill-color-4: rgba(255, 255, 255, 0.06) !important;
  --el-empty-fill-color-5: rgba(255, 255, 255, 0.05) !important;
  --el-empty-fill-color-6: rgba(255, 255, 255, 0.04) !important;
  --el-empty-fill-color-7: rgba(255, 255, 255, 0.03) !important;
  --el-empty-fill-color-8: rgba(255, 255, 255, 0.02) !important;
  --el-empty-fill-color-9: rgba(255, 255, 255, 0.01) !important;
  color: rgba(244, 247, 251, 0.54) !important;
}

html.dark #app .media-page ::selection,
html[data-theme="dark"] #app .media-page ::selection {
  background: rgba(99, 101, 241, 0.32) !important;
  color: #ffffff !important;
}

/* Media library residual Element Plus polish and generic asset-card fallbacks. */
html.dark #app .media-page .el-input-group__append,
html[data-theme="dark"] #app .media-page .el-input-group__append {
  background: rgba(255, 255, 255, 0.032) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  color: rgba(244, 247, 251, 0.78) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

html.dark #app .media-page .hint,
html.dark #app .media-page .el-empty__description,
html.dark #app .media-page .el-empty__description p,
html[data-theme="dark"] #app .media-page .hint,
html[data-theme="dark"] #app .media-page .el-empty__description,
html[data-theme="dark"] #app .media-page .el-empty__description p {
  color: rgba(244, 247, 251, 0.56) !important;
}

html.dark #app .media-page .el-empty svg,
html[data-theme="dark"] #app .media-page .el-empty svg {
  opacity: 0.56 !important;
  filter: saturate(0.85) brightness(0.9) !important;
}

html.dark #app .media-page .grid > [class*="rounded"],
html.dark #app .media-page [class*="grid"] > [class*="rounded"],
html.dark #app .media-page [class*="list"] > [class*="rounded"],
html[data-theme="dark"] #app .media-page .grid > [class*="rounded"],
html[data-theme="dark"] #app .media-page [class*="grid"] > [class*="rounded"],
html[data-theme="dark"] #app .media-page [class*="list"] > [class*="rounded"] {
  background: rgba(255, 255, 255, 0.022) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

html.dark #app .media-page .grid > [class*="rounded"]:hover,
html.dark #app .media-page [class*="grid"] > [class*="rounded"]:hover,
html.dark #app .media-page [class*="list"] > [class*="rounded"]:hover,
html[data-theme="dark"] #app .media-page .grid > [class*="rounded"]:hover,
html[data-theme="dark"]
  #app
  .media-page
  [class*="grid"]
  > [class*="rounded"]:hover,
html[data-theme="dark"]
  #app
  .media-page
  [class*="list"]
  > [class*="rounded"]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(145, 149, 255, 0.18) !important;
}

/* ============================================================
   PASS 13 — CHAT COMPOSER COLOR UNIFICATION
   Unifies the main chat input shell, textarea, utility buttons and
   disabled send button so the composer reads as one coherent control.
   ============================================================ */

html.dark #app footer .flex.w-full[class*="border-gray"],
html.dark #app footer .flex.w-full[class*="dark:border-gray"],
html[data-theme="dark"] #app footer .flex.w-full[class*="border-gray"],
html[data-theme="dark"] #app footer .flex.w-full[class*="dark:border-gray"] {
  background: linear-gradient(
    180deg,
    rgba(21, 24, 33, 0.96),
    rgba(16, 18, 26, 0.96)
  ) !important;
  border-color: rgba(145, 149, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(99, 101, 241, 0.1),
    0 14px 34px rgba(0, 0, 0, 0.28) !important;
  border-radius: 20px !important;
}

html.dark #app footer .flex.w-full[class*="border-gray"]:focus-within,
html.dark #app footer .flex.w-full[class*="dark:border-gray"]:focus-within,
html[data-theme="dark"]
  #app
  footer
  .flex.w-full[class*="border-gray"]:focus-within,
html[data-theme="dark"]
  #app
  footer
  .flex.w-full[class*="dark:border-gray"]:focus-within {
  border-color: rgba(145, 149, 255, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 0 1px rgba(99, 101, 241, 0.16),
    0 0 0 3px rgba(99, 101, 241, 0.1),
    0 14px 34px rgba(0, 0, 0, 0.3) !important;
}

html.dark #app footer textarea,
html[data-theme="dark"] #app footer textarea {
  background: transparent !important;
  background-image: none !important;
  color: rgba(244, 247, 251, 0.92) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

html.dark #app footer textarea:focus,
html[data-theme="dark"] #app footer textarea:focus {
  box-shadow: none !important;
  outline: none !important;
}

html.dark #app footer textarea::placeholder,
html[data-theme="dark"] #app footer textarea::placeholder {
  color: rgba(244, 247, 251, 0.74) !important;
}

html.dark #app footer .btn-pill,
html.dark #app footer button[aria-label="上传文件/图片"],
html.dark #app footer button[aria-label="选择 MCP 工具"],
html[data-theme="dark"] #app footer .btn-pill,
html[data-theme="dark"] #app footer button[aria-label="上传文件/图片"],
html[data-theme="dark"] #app footer button[aria-label="选择 MCP 工具"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  color: rgba(244, 247, 251, 0.8) !important;
  box-shadow: none !important;
}

html.dark #app footer .btn-pill:hover,
html.dark #app footer button[aria-label="上传文件/图片"]:hover,
html.dark #app footer button[aria-label="选择 MCP 工具"]:hover,
html[data-theme="dark"] #app footer .btn-pill:hover,
html[data-theme="dark"] #app footer button[aria-label="上传文件/图片"]:hover,
html[data-theme="dark"] #app footer button[aria-label="选择 MCP 工具"]:hover {
  background: rgba(255, 255, 255, 0.065) !important;
  border-color: rgba(145, 149, 255, 0.18) !important;
  color: #ffffff !important;
}

html.dark #app footer .btn-send,
html.dark #app footer button[aria-label="发送消息"],
html[data-theme="dark"] #app footer .btn-send,
html[data-theme="dark"] #app footer button[aria-label="发送消息"] {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  color: rgba(244, 247, 251, 0.7) !important;
  box-shadow: none !important;
}

html.dark #app footer .btn-send:not(:disabled):not(.cursor-not-allowed),
html.dark
  #app
  footer
  button[aria-label="发送消息"]:not(:disabled):not(.cursor-not-allowed),
html[data-theme="dark"]
  #app
  footer
  .btn-send:not(:disabled):not(.cursor-not-allowed),
html[data-theme="dark"]
  #app
  footer
  button[aria-label="发送消息"]:not(:disabled):not(.cursor-not-allowed) {
  background: #6365f1 !important;
  border-color: rgba(164, 169, 255, 0.44) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(99, 101, 241, 0.22) !important;
}

html.dark #app footer .btn-send.cursor-not-allowed,
html.dark #app footer button[aria-label="发送消息"]:disabled,
html[data-theme="dark"] #app footer .btn-send.cursor-not-allowed,
html[data-theme="dark"] #app footer button[aria-label="发送消息"]:disabled {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(244, 247, 251, 0.52) !important;
}

/* ============================================================
   PASS 14 — CHAT CANVAS BACKGROUND UNIFICATION
   Keeps the chat conversation area on one calm dark canvas. This is
   scoped to the regular chat composer so creation/model panels are not
   repainted by the background cleanup.
   ============================================================ */

html.dark body:has(#app footer textarea),
html[data-theme="dark"] body:has(#app footer textarea) {
  --vfx-chat-canvas: #090b10;
  background-color: var(--vfx-chat-canvas) !important;
  background-image: none !important;
}

html.dark #app:has(footer textarea),
html[data-theme="dark"] #app:has(footer textarea) {
  background-color: var(--vfx-chat-canvas, #090b10) !important;
  background-image: none !important;
}

html.dark #app:has(footer textarea) [class*="pl-[260px]"],
html.dark #app:has(footer textarea) [class*="pl-[var(--sidebar-width"],
html.dark
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"],
html.dark #app:has(footer textarea) header.sticky,
html.dark #app:has(footer textarea) header.sticky > div,
html.dark #app:has(footer textarea) header.sticky [class*="h-full"],
html[data-theme="dark"] #app:has(footer textarea) [class*="pl-[260px]"],
html[data-theme="dark"]
  #app:has(footer textarea)
  [class*="pl-[var(--sidebar-width"],
html[data-theme="dark"]
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"],
html[data-theme="dark"] #app:has(footer textarea) header.sticky,
html[data-theme="dark"] #app:has(footer textarea) header.sticky > div,
html[data-theme="dark"]
  #app:has(footer textarea)
  header.sticky
  [class*="h-full"] {
  background-color: var(--vfx-chat-canvas, #090b10) !important;
  background-image: none !important;
}

html.dark
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"]
  [class*="overflow-y-auto"],
html.dark
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"]
  [class*="absolute"][class*="left-0"][class*="right-0"],
html.dark
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"]
  [class*="fixed"][class*="bottom-0"],
html.dark #app:has(footer textarea) footer,
html.dark #app:has(footer textarea) footer + div,
html[data-theme="dark"]
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"]
  [class*="overflow-y-auto"],
html[data-theme="dark"]
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"]
  [class*="absolute"][class*="left-0"][class*="right-0"],
html[data-theme="dark"]
  #app:has(footer textarea)
  [class*="relative"][class*="overflow-hidden"][class*="h-full"][class*="w-full"][class*="flex"][class*="flex-col"]
  [class*="fixed"][class*="bottom-0"],
html[data-theme="dark"] #app:has(footer textarea) footer,
html[data-theme="dark"] #app:has(footer textarea) footer + div {
  background-color: var(--vfx-chat-canvas, #090b10) !important;
  background-image: none !important;
}

html.dark #app:has(footer textarea) [class*="backdrop-blur"],
html[data-theme="dark"] #app:has(footer textarea) [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   PASS 15 — CHAT MARKDOWN CODE BLOCK THEME
   Replaces the default neutral gray code-block surface with a darker,
   blue-violet-tinted material that belongs to the VFX chat theme.
   Scoped to #scrollRef so creation panels and utility cards are untouched.
   ============================================================ */

html.dark #app:has(footer textarea) #scrollRef pre,
html.dark #app:has(footer textarea) #scrollRef .markdown-body pre,
html.dark #app:has(footer textarea) #scrollRef [class*="prose"] pre,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef pre,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef .markdown-body pre,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  [class*="prose"]
  pre {
  background: linear-gradient(
    180deg,
    rgba(21, 24, 36, 0.98),
    rgba(16, 19, 29, 0.98)
  ) !important;
  border-color: rgba(145, 149, 255, 0.16) !important;
  color: rgba(229, 234, 246, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(99, 101, 241, 0.07) !important;
}

html.dark #app:has(footer textarea) #scrollRef div:has(> pre),
html.dark #app:has(footer textarea) #scrollRef section:has(> pre),
html.dark #app:has(footer textarea) #scrollRef [class*="code"]:has(> pre),
html.dark #app:has(footer textarea) #scrollRef [class*="language-"]:has(> pre),
html[data-theme="dark"] #app:has(footer textarea) #scrollRef div:has(> pre),
html[data-theme="dark"] #app:has(footer textarea) #scrollRef section:has(> pre),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  [class*="code"]:has(> pre),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  [class*="language-"]:has(> pre) {
  background: linear-gradient(
    180deg,
    rgba(22, 25, 37, 0.98),
    rgba(16, 19, 29, 0.98)
  ) !important;
  border: 1px solid rgba(145, 149, 255, 0.16) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 24px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

html.dark
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  > div:first-child:not(:has(pre)),
html.dark
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  > div:first-child:not(:has(pre)),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  > div:first-child:not(:has(pre)),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  > div:first-child:not(:has(pre)) {
  background: rgba(255, 255, 255, 0.018) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
  color: rgba(216, 222, 238, 0.76) !important;
}

html.dark #app:has(footer textarea) #scrollRef pre code,
html.dark #app:has(footer textarea) #scrollRef .hljs,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef pre code,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef .hljs {
  background: transparent !important;
  color: rgba(229, 234, 246, 0.9) !important;
  text-shadow: none !important;
}

html.dark #app:has(footer textarea) #scrollRef :not(pre) > code,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef :not(pre) > code {
  background: rgba(99, 101, 241, 0.12) !important;
  border: 1px solid rgba(145, 149, 255, 0.16) !important;
  color: rgba(234, 237, 255, 0.94) !important;
  border-radius: 6px !important;
}

html.dark #app:has(footer textarea) #scrollRef div:has(> pre) button,
html.dark #app:has(footer textarea) #scrollRef section:has(> pre) button,
html.dark #app:has(footer textarea) #scrollRef div:has(> pre) [role="button"],
html.dark
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  [role="button"],
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  button,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  button,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  [role="button"],
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  [role="button"] {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  color: rgba(226, 232, 245, 0.76) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  box-shadow: none !important;
}

html.dark #app:has(footer textarea) #scrollRef div:has(> pre) button:hover,
html.dark #app:has(footer textarea) #scrollRef section:has(> pre) button:hover,
html.dark
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  [role="button"]:hover,
html.dark
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  [role="button"]:hover,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  button:hover,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  button:hover,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  [role="button"]:hover,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  [role="button"]:hover {
  background: rgba(99, 101, 241, 0.16) !important;
  border-color: rgba(145, 149, 255, 0.26) !important;
  color: #ffffff !important;
}

html.dark #app:has(footer textarea) #scrollRef pre::-webkit-scrollbar,
html.dark
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  pre::-webkit-scrollbar,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar {
  height: 8px !important;
  width: 8px !important;
}

html.dark #app:has(footer textarea) #scrollRef pre::-webkit-scrollbar-track,
html.dark
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar-track,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  pre::-webkit-scrollbar-track,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035) !important;
}

html.dark #app:has(footer textarea) #scrollRef pre::-webkit-scrollbar-thumb,
html.dark
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar-thumb,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  pre::-webkit-scrollbar-thumb,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar-thumb {
  background: rgba(145, 149, 255, 0.3) !important;
  border-radius: 999px !important;
}

/* ============================================================
   VIDEO HISTORY LOADING UI — readable status + calmer wait state
   Scoped to video history cards only. No generation or polling logic.
   ============================================================ */

#app .codex-video-history-meta span[class*="bg-primary-100"] {
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: #3730a3 !important;
  background: linear-gradient(
    180deg,
    rgba(238, 242, 255, 0.98),
    rgba(224, 231, 255, 0.96)
  ) !important;
  border: 1px solid rgba(99, 102, 241, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 14px rgba(99, 102, 241, 0.12) !important;
}

#app .codex-video-history-meta span[class*="bg-primary-100"]::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #6365f1;
  box-shadow: 0 0 0 4px rgba(99, 101, 241, 0.13);
  animation: video-history-status-pulse 1.6s ease-in-out infinite;
}

html.dark #app .codex-video-history-meta span[class*="bg-primary-100"],
html[data-theme="dark"]
  #app
  .codex-video-history-meta
  span[class*="bg-primary-100"] {
  color: #ffffff !important;
  background: linear-gradient(
    180deg,
    rgba(99, 101, 241, 0.42),
    rgba(79, 70, 229, 0.34)
  ) !important;
  border-color: rgba(165, 180, 252, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 22px rgba(79, 70, 229, 0.18) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18) !important;
}

html.dark #app .codex-video-history-meta span[class*="bg-primary-100"]::before,
html[data-theme="dark"]
  #app
  .codex-video-history-meta
  span[class*="bg-primary-100"]::before {
  background: #c7d2fe;
  box-shadow:
    0 0 0 4px rgba(199, 210, 254, 0.14),
    0 0 16px rgba(129, 140, 248, 0.72);
}

#app .codex-video-history-media-frame > .absolute.inset-0:has(.animate-spin) {
  gap: 12px !important;
  overflow: hidden !important;
  color: rgba(238, 242, 255, 0.92) !important;
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(99, 101, 241, 0.3),
      transparent 34%
    ),
    radial-gradient(
      circle at 76% 76%,
      rgba(14, 165, 233, 0.16),
      transparent 32%
    ),
    linear-gradient(135deg, rgba(10, 12, 20, 0.98), rgba(18, 20, 31, 0.98)) !important;
  border-radius: inherit !important;
  isolation: isolate;
}

#app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin)
  .animate-spin {
  display: none !important;
}

#app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin)::before {
  content: "";
  width: 72px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(199, 210, 254, 0.44);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0 10%,
      transparent 10% 18%,
      rgba(255, 255, 255, 0.08) 18% 28%,
      transparent 28% 36%,
      rgba(255, 255, 255, 0.08) 36% 46%,
      transparent 46% 54%,
      rgba(255, 255, 255, 0.08) 54% 64%,
      transparent 64% 72%,
      rgba(255, 255, 255, 0.08) 72% 82%,
      transparent 82% 100%
    ),
    linear-gradient(180deg, rgba(129, 140, 248, 0.3), rgba(99, 101, 241, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 6px rgba(99, 101, 241, 0.09),
    0 18px 38px rgba(0, 0, 0, 0.24);
  position: relative;
  animation: video-history-frame-float 2.4s ease-in-out infinite;
  z-index: 1;
}

#app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin)::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 2px;
  left: 50%;
  top: calc(50% + 35px);
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0 12%,
    rgba(129, 140, 248, 0.35) 24%,
    #ffffff 50%,
    rgba(129, 140, 248, 0.35) 76%,
    transparent 88% 100%
  );
  box-shadow: 0 0 18px rgba(129, 140, 248, 0.62);
  animation: video-history-scan 1.55s ease-in-out infinite;
  z-index: 0;
}

#app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin)
  span.text-xs:not(.animate-spin) {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22) !important;
}

#app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin)
  span.text-xs:not(.animate-spin)::after {
  content: "";
  width: 18px;
  height: 8px;
  margin-left: 6px;
  background:
    radial-gradient(circle, currentColor 48%, transparent 52%) 0 50% / 6px 6px
      no-repeat,
    radial-gradient(circle, currentColor 48%, transparent 52%) 50% 50% / 6px 6px
      no-repeat,
    radial-gradient(circle, currentColor 48%, transparent 52%) 100% 50% / 6px
      6px no-repeat;
  opacity: 0.86;
  animation: video-history-dots 1.2s ease-in-out infinite;
}

html:not(.dark)
  #app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin),
html[data-theme="light"]
  #app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin) {
  color: rgba(49, 46, 129, 0.94) !important;
  background:
    radial-gradient(
      circle at 20% 18%,
      rgba(99, 101, 241, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 78% 74%,
      rgba(14, 165, 233, 0.11),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(248, 250, 255, 0.98),
      rgba(238, 242, 255, 0.96)
    ) !important;
}

html:not(.dark)
  #app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin)
  span.text-xs:not(.animate-spin),
html[data-theme="light"]
  #app
  .codex-video-history-media-frame
  > .absolute.inset-0:has(.animate-spin)
  span.text-xs:not(.animate-spin) {
  color: #312e81 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
  text-shadow: none !important;
}

@keyframes video-history-status-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes video-history-frame-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-5px) rotate(1deg);
  }
}

@keyframes video-history-scan {
  0% {
    opacity: 0.24;
    transform: translateX(-64%) scaleX(0.72);
  }
  50% {
    opacity: 0.95;
    transform: translateX(-50%) scaleX(1);
  }
  100% {
    opacity: 0.24;
    transform: translateX(-36%) scaleX(0.72);
  }
}

@keyframes video-history-dots {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(1px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .codex-video-history-meta span[class*="bg-primary-100"]::before,
  #app
    .codex-video-history-media-frame
    > .absolute.inset-0:has(.animate-spin)::before,
  #app
    .codex-video-history-media-frame
    > .absolute.inset-0:has(.animate-spin)::after,
  #app
    .codex-video-history-media-frame
    > .absolute.inset-0:has(.animate-spin)
    span.text-xs:not(.animate-spin)::after {
    animation: none !important;
  }
}

/* ============================================================
   CHAT CONVERSATION READABILITY CLEANUP
   Keeps the regular chat page close to ChatGPT's clear reading flow.
   Scoped to #scrollRef so creation panels and video/image tools are untouched.
   ============================================================ */

html.dark #app:has(footer textarea) #scrollRef,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef {
  background: #090b10 !important;
}

html.dark #app:has(footer textarea) #scrollRef > div,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef > div {
  max-width: 860px !important;
  width: min(860px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.dark #app:has(footer textarea) #scrollRef .markdown-body,
html.dark #app:has(footer textarea) #scrollRef [class*="markdown"],
html.dark #app:has(footer textarea) #scrollRef [class*="prose"],
html[data-theme="dark"] #app:has(footer textarea) #scrollRef .markdown-body,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  [class*="markdown"],
html[data-theme="dark"] #app:has(footer textarea) #scrollRef [class*="prose"] {
  max-width: 100% !important;
  color: rgba(238, 242, 255, 0.92) !important;
  font-size: 15.5px !important;
  line-height: 1.78 !important;
  letter-spacing: 0 !important;
}

html.dark #app:has(footer textarea) #scrollRef p,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef p {
  margin: 0.72em 0 !important;
  color: rgba(238, 242, 255, 0.92) !important;
}

html.dark #app:has(footer textarea) #scrollRef h1,
html.dark #app:has(footer textarea) #scrollRef h2,
html.dark #app:has(footer textarea) #scrollRef h3,
html.dark #app:has(footer textarea) #scrollRef h4,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef h1,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef h2,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef h3,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef h4 {
  margin: 1.35em 0 0.62em !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

html.dark #app:has(footer textarea) #scrollRef h1,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef h1 {
  font-size: 25px !important;
}

html.dark #app:has(footer textarea) #scrollRef h2,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef h2 {
  font-size: 21px !important;
}

html.dark #app:has(footer textarea) #scrollRef h3,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef h3 {
  font-size: 18px !important;
}

html.dark #app:has(footer textarea) #scrollRef ul,
html.dark #app:has(footer textarea) #scrollRef ol,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef ul,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef ol {
  margin: 0.72em 0 !important;
  padding-left: 1.35em !important;
}

html.dark #app:has(footer textarea) #scrollRef li,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef li {
  margin: 0.28em 0 !important;
}

html.dark #app:has(footer textarea) #scrollRef blockquote,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef blockquote {
  margin: 1em 0 !important;
  padding: 0.05em 0 0.05em 1em !important;
  border-left: 3px solid rgba(129, 140, 248, 0.55) !important;
  color: rgba(226, 232, 240, 0.82) !important;
  background: transparent !important;
}

html.dark #app:has(footer textarea) #scrollRef pre,
html.dark #app:has(footer textarea) #scrollRef .markdown-body pre,
html.dark #app:has(footer textarea) #scrollRef [class*="prose"] pre,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef pre,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef .markdown-body pre,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  [class*="prose"]
  pre {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.78em 0 1.05em !important;
  padding: 14px 16px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  background: #11141d !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html.dark #app:has(footer textarea) #scrollRef div:has(> pre),
html.dark #app:has(footer textarea) #scrollRef section:has(> pre),
html.dark #app:has(footer textarea) #scrollRef [class*="code"]:has(> pre),
html.dark #app:has(footer textarea) #scrollRef [class*="language-"]:has(> pre),
html[data-theme="dark"] #app:has(footer textarea) #scrollRef div:has(> pre),
html[data-theme="dark"] #app:has(footer textarea) #scrollRef section:has(> pre),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  [class*="code"]:has(> pre),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  [class*="language-"]:has(> pre) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.78em 0 1.05em !important;
  background: #11141d !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html.dark #app:has(footer textarea) #scrollRef div:has(> pre) pre,
html.dark #app:has(footer textarea) #scrollRef section:has(> pre) pre,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef div:has(> pre) pre,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  pre {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html.dark #app:has(footer textarea) #scrollRef pre code,
html.dark #app:has(footer textarea) #scrollRef .hljs,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef pre code,
html[data-theme="dark"] #app:has(footer textarea) #scrollRef .hljs {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  color: rgba(238, 242, 255, 0.91) !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  background: transparent !important;
}

html.dark
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  > div:first-child:not(:has(pre)),
html.dark
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  > div:first-child:not(:has(pre)),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  > div:first-child:not(:has(pre)),
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  > div:first-child:not(:has(pre)) {
  min-height: 34px !important;
  padding: 7px 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11) !important;
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 12px !important;
}

html.dark #app:has(footer textarea) #scrollRef div:has(> pre) button,
html.dark #app:has(footer textarea) #scrollRef section:has(> pre) button,
html.dark #app:has(footer textarea) #scrollRef div:has(> pre) [role="button"],
html.dark
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  [role="button"],
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  button,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  button,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)
  [role="button"],
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  section:has(> pre)
  [role="button"] {
  min-height: 24px !important;
  padding: 3px 8px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(226, 232, 240, 0.72) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

html.dark #app:has(footer textarea) #scrollRef pre::-webkit-scrollbar,
html.dark
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  pre::-webkit-scrollbar,
html[data-theme="dark"]
  #app:has(footer textarea)
  #scrollRef
  div:has(> pre)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 768px) {
  html.dark #app:has(footer textarea) #scrollRef > div,
  html[data-theme="dark"] #app:has(footer textarea) #scrollRef > div {
    width: min(100%, calc(100vw - 24px)) !important;
  }

  html.dark #app:has(footer textarea) #scrollRef .markdown-body,
  html.dark #app:has(footer textarea) #scrollRef [class*="markdown"],
  html.dark #app:has(footer textarea) #scrollRef [class*="prose"],
  html[data-theme="dark"] #app:has(footer textarea) #scrollRef .markdown-body,
  html[data-theme="dark"]
    #app:has(footer textarea)
    #scrollRef
    [class*="markdown"],
  html[data-theme="dark"]
    #app:has(footer textarea)
    #scrollRef
    [class*="prose"] {
    font-size: 15px !important;
  }
}

/* ============================================================
   CHAT CONVERSATION CURRENT DOM FIX
   Current chat builds do not always render #scrollRef. This layer targets
   the actual md-editor-v3 preview used by conversation replies.
   ============================================================ */

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview-wrapper,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-previewOnly,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview-wrapper,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-previewOnly {
  min-width: 0 !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .markdown-body,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) [class*="markdown"],
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) [class*="prose"],
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .markdown-body,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  [class*="markdown"],
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  [class*="prose"] {
  color: rgba(238, 242, 255, 0.92) !important;
  font-size: 15.5px !important;
  line-height: 1.78 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview p,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview li,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  p,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  li {
  color: rgba(238, 242, 255, 0.92) !important;
}

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview p,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  p {
  margin: 0.7em 0 !important;
}

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview ul,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview ol,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  ul,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  ol {
  margin: 0.72em 0 !important;
  padding-left: 1.35em !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  blockquote,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  blockquote {
  margin: 1em 0 !important;
  padding: 0.08em 0 0.08em 1em !important;
  color: rgba(226, 232, 240, 0.82) !important;
  background: transparent !important;
  border-left: 3px solid rgba(129, 140, 248, 0.48) !important;
}

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-code,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  details.md-editor-code,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  details.md-editor-code,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0.82em 0 1.08em !important;
  transform: none !important;
  background: #11141d !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code-head {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11) !important;
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code-action,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-code-flag,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code-action,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code-flag {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-copy-button,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-copy-button {
  min-height: 24px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  color: rgba(226, 232, 240, 0.76) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-code pre,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code
  pre,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  color: rgba(238, 242, 255, 0.91) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code
  pre
  code,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-code-block,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre
  code,
html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .hljs,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code
  pre
  code,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code-block,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre
  code,
html[data-theme="dark"] #app:has(textarea[aria-label="聊天消息输入框"]) .hljs {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  color: rgba(238, 242, 255, 0.91) !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code:has(code.language-text),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code:has(code.language-text) {
  background: rgba(17, 20, 29, 0.86) !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code:has(code.language-text)
  .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code:has(code.language-text)
  .md-editor-code-head {
  min-height: 30px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code::-webkit-scrollbar,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code
  pre::-webkit-scrollbar,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre::-webkit-scrollbar,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code::-webkit-scrollbar,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-code
  pre::-webkit-scrollbar,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .md-editor-preview
  pre::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 768px) {
  html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-preview,
  html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .markdown-body,
  html[data-theme="dark"]
    #app:has(textarea[aria-label="聊天消息输入框"])
    .md-editor-preview,
  html[data-theme="dark"]
    #app:has(textarea[aria-label="聊天消息输入框"])
    .markdown-body {
    font-size: 15px !important;
  }

  html.dark #app:has(textarea[aria-label="聊天消息输入框"]) .md-editor-code pre,
  html.dark
    #app:has(textarea[aria-label="聊天消息输入框"])
    .md-editor-preview
    pre,
  html[data-theme="dark"]
    #app:has(textarea[aria-label="聊天消息输入框"])
    .md-editor-code
    pre,
  html[data-theme="dark"]
    #app:has(textarea[aria-label="聊天消息输入框"])
    .md-editor-preview
    pre {
    padding: 12px 13px !important;
  }
}

/* ============================================================
   ASSISTANT RENDERER REFACTOR OVERRIDE
   The chat bundle now marks normal assistant replies with
   .vfx-assistant-article. Treat it as the single Markdown
   renderer surface; only code, tables, images and mermaid-like
   previews keep independent framing.
   ============================================================ */

html.dark #app:has(textarea[aria-label="聊天消息输入框"]) #image-wrapper,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  #image-wrapper {
  width: min(980px, 92vw) !important;
  max-width: min(980px, 92vw) !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article {
  width: min(920px, 100%) !important;
  max-width: min(920px, 100%) !important;
  padding: 12px 0 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(245, 247, 255, 0.94) !important;
  font-size: 15.75px !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > *:not(pre):not(table):not(.md-editor-code),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > *:not(pre):not(table):not(.md-editor-code) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  p,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  p {
  margin: 0 0 11px !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  p
  + p,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  p
  + p {
  margin-top: 0 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h1,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h2,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h3,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h1,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h2,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h3 {
  color: #fff !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h1,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h1 {
  margin: 20px 0 12px !important;
  font-size: 25px !important;
  line-height: 1.24 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h2,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h2 {
  margin: 18px 0 10px !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h3,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h3 {
  margin: 16px 0 8px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h1:first-child,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h2:first-child,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h3:first-child,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h1:first-child,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h2:first-child,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  h3:first-child {
  margin-top: 0 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  ul,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  ol,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  ul,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  ol {
  margin: 10px 0 14px !important;
  padding-left: 1.35em !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  li,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  li {
  margin: 3px 0 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  blockquote,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  blockquote {
  margin: 14px 0 !important;
  padding: 2px 0 2px 14px !important;
  background: transparent !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 3px solid rgba(129, 140, 248, 0.48) !important;
  color: rgba(226, 232, 240, 0.84) !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  img,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  img {
  margin: 14px 0 16px !important;
  border-radius: 10px !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  table,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  table {
  display: table !important;
  width: 100% !important;
  margin: 16px 0 18px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(15, 18, 27, 0.72) !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  th,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  td,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  th,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  td {
  padding: 9px 11px !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  pre:has(.code-block-header),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  pre:has(.code-block-header) {
  margin: 14px 0 16px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  background: #0f121a !important;
  box-shadow: none !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .code-block-header,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .code-block-header {
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
  background: rgba(255, 255, 255, 0.024) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
  position: static !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .code-block-header
  span,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .code-block-header
  span {
  font-size: 11px !important;
  color: rgba(203, 213, 225, 0.68) !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .btn-copy,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .btn-copy {
  height: 21px !important;
  min-height: 21px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  color: rgba(226, 232, 240, 0.78) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .btn-copy
  svg,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  .btn-copy
  svg {
  width: 13px !important;
  height: 13px !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  code.code-content-scrollable,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  code.code-content-scrollable {
  padding: 12px 13px !important;
  font-size: 13.5px !important;
  line-height: 1.68 !important;
  background: transparent !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  white-space: pre !important;
  border-radius: 0 !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-text),
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-txt),
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plain),
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plaintext),
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-markdown),
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-md),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-text),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-txt),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plain),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plaintext),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-markdown),
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-md) {
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-text)
  .md-editor-code-head,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-txt)
  .md-editor-code-head,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plain)
  .md-editor-code-head,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plaintext)
  .md-editor-code-head,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-markdown)
  .md-editor-code-head,
html.dark
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-md)
  .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-text)
  .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-txt)
  .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plain)
  .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-plaintext)
  .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-markdown)
  .md-editor-code-head,
html[data-theme="dark"]
  #app:has(textarea[aria-label="聊天消息输入框"])
  .vfx-assistant-article
  > .md-editor-code:has(code.language-md)
  .md-editor-code-head {
  display: none !important;
}

@media (max-width: 768px) {
  html.dark #app:has(textarea[aria-label="聊天消息输入框"]) #image-wrapper,
  html[data-theme="dark"]
    #app:has(textarea[aria-label="聊天消息输入框"])
    #image-wrapper {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(100%, calc(100vw - 24px)) !important;
  }

  html.dark
    #app:has(textarea[aria-label="聊天消息输入框"])
    .vfx-assistant-article,
  html[data-theme="dark"]
    #app:has(textarea[aria-label="聊天消息输入框"])
    .vfx-assistant-article {
    padding: 10px 0 12px !important;
    font-size: 15px !important;
    line-height: 1.66 !important;
  }
}