/* 手册问答 · 白底科技风（贴合浏览器白框，科技感靠细线/微光/点缀） */

html[data-theme='light'],
html {
  --qa-accent: #0b6bcb;
  --qa-accent-bright: #1a8cff;
  --qa-ink: #0f172a;
  --qa-muted: #64748b;
  --qa-line: #e2e8f0;
  --qa-soft: #f1f5f9;

  --color-background-body: #f4f7fb !important;
  --color-background-default-burn: transparent !important;
  --color-background-default-dimmed: #eef3f9 !important;
  --color-background-default-dodge: #ffffff !important;
  --color-background-section: #f8fafc !important;
  --color-background-section-burn: #eef2f7 !important;
  --color-background-surface-white: #ffffff !important;
  --color-chatbot-bg: linear-gradient(
    155deg,
    #f3f8fd 0%,
    #eaf3fb 42%,
    #e4eef8 100%
  ) !important;
  --color-chat-bubble-bg: rgba(255, 255, 255, 0.88) !important;
  --color-chat-input-mask: linear-gradient(
    180deg,
    rgba(234, 243, 251, 0.05) 0%,
    rgba(234, 243, 251, 0.92) 100%
  ) !important;
  --color-components-panel-bg-blur: rgba(255, 255, 255, 0.86) !important;
  --color-components-panel-on-panel-item-bg: #ffffff !important;
  --color-components-panel-border-subtle: rgba(15, 23, 42, 0.08) !important;
  --color-components-chat-input-border: rgba(11, 107, 203, 0.28) !important;
  --color-components-button-primary-bg: #0b6bcb !important;
  --color-components-button-primary-bg-hover: #0958a8 !important;
  --color-components-button-primary-text: #ffffff !important;
  --color-components-button-secondary-bg: rgba(255, 255, 255, 0.92) !important;
  --color-components-button-secondary-border: rgba(15, 23, 42, 0.12) !important;
  --color-text-primary: #0f172a !important;
  --color-text-secondary: #334155 !important;
  --color-text-tertiary: #64748b !important;
  --color-text-accent: #0b6bcb !important;
  --color-text-accent-light-mode-only: #0b6bcb !important;
  --color-primary-100: #dbeafe !important;
  --color-primary-300: #93c5fd !important;
  --color-background-gradient-bg-fill-chat-bubble-bg-3: #e8f2ff !important;
}

html body.bg-background-body,
html body {
  background:
    radial-gradient(ellipse 70% 42% at 12% -8%, rgba(26, 140, 255, 0.1), transparent 58%),
    radial-gradient(ellipse 55% 36% at 96% 0%, rgba(99, 102, 241, 0.06), transparent 52%),
    radial-gradient(ellipse 50% 40% at 88% 108%, rgba(14, 165, 233, 0.07), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #f4f7fb 48%, #eef3f8 100%) !important;
  color: var(--qa-ink);
  min-height: 100%;
}

/* 极淡科技网格：灰蓝细线，不抢白框 */
html body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 10%, transparent 78%);
}

/* 角落微光，面积小、饱和低 */
html body::after {
  content: "";
  position: fixed;
  inset: auto auto -12% -10%;
  width: 36vw;
  height: 36vw;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 140, 255, 0.1), transparent 68%);
  filter: blur(10px);
}

/* 只抬升主应用层，不要动 body 上的 portal（表格放大/弹层依赖 position:fixed） */
html body > div:first-child {
  position: relative;
  z-index: 1;
}

html [data-streamdown='table-fullscreen'] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
}

html .bg-background-default-burn {
  background: transparent !important;
}

html .bg-chatbot-bg {
  background-color: #eaf3fb !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 88% 8%, rgba(56, 189, 248, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 45% at 12% 92%, rgba(14, 165, 233, 0.14), transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 40%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(155deg, #f5f9fd 0%, #eaf3fb 48%, #e2eef8 100%) !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  position: relative;
}

/* 极淡网格，增强科技感但不抢内容 */
html .bg-chatbot-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, black 15%, transparent 80%);
}

html .bg-chatbot-bg.rounded-2xl,
html .bg-chatbot-bg.rounded-xl,
html .bg-chatbot-bg.rounded-lg {
  border-radius: 0 !important;
}

/* 去掉内容区外围内边距，避免“浮卡 + 圆角”感，贴齐浏览器边 */
html .relative.grow.p-2 {
  padding: 0 !important;
}

html .bg-components-panel-bg-blur,
html .bg-components-panel-bg {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(14px) saturate(1.05);
}

html .border-components-panel-border-subtle {
  border-color: transparent !important;
}

html .border-components-chat-input-border,
html .border-divider-subtle {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html .rounded-xl.border.border-components-chat-input-border {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(10px);
}

html .bg-components-button-primary-bg,
html button.bg-components-button-primary-bg {
  background: linear-gradient(135deg, #1a8cff 0%, #0b6bcb 58%, #0958a8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(26, 140, 255, 0.25),
    0 6px 16px rgba(11, 107, 203, 0.22) !important;
  filter: none !important;
}

html .rounded-xl.border.border-components-chat-input-border .bg-components-button-primary-bg,
html .rounded-xl.border.border-components-chat-input-border button {
  box-shadow:
    0 0 0 1px rgba(26, 140, 255, 0.18),
    0 4px 12px rgba(11, 107, 203, 0.16) !important;
}

html .bg-components-button-secondary-bg {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0b6bcb !important;
  box-shadow: 0 0 0 1px rgba(26, 140, 255, 0.08);
}

html .bg-chat-bubble-bg {
  background: rgba(255, 255, 255, 0.9) !important;
  border: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  backdrop-filter: blur(8px);
}

html .text-text-tertiary {
  color: #64748b !important;
}

html .text-text-primary {
  color: #0f172a !important;
}

/* 左侧栏（当前结构不是 aside） */
html aside,
html .flex.h-full > .flex.w-59.flex-col,
html .flex.w-59.flex-col.p-1 {
  background:
    linear-gradient(180deg, #e8f2fa 0%, #ddebf5 48%, #d4e5f2 100%) !important;
  backdrop-filter: none;
  border-right: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0 !important;
  box-shadow: none;
}

/* 对话正文与输入区加宽（原 max-w 768px 偏窄） */
html .max-w-\[768px\],
html .max-w-\[1120px\],
html .max-w-\[1320px\] {
  max-width: min(1320px, 100%) !important;
}

html .w-full.max-w-2xl.rounded-2xl {
  max-width: min(56rem, 100%) !important;
  border-radius: 10px !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

/* 手机端：正文尽量贴边拉满 */
@media (max-width: 640px) {
  html .max-w-\[768px\],
  html .max-w-\[1120px\],
  html .max-w-\[1320px\] {
    max-width: 100% !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  html .chat-answer-container {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html .chat-answer-container .bg-chat-bubble-bg,
  html .chat-answer-container [class*='bg-chat-bubble-bg'] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }

  /* 用户气泡：给右侧猩猩头像留位，避免 max-w-full 把头像挤出屏幕 */
  html .mb-2.flex.justify-end > .group.relative.mr-4.pl-14 {
    margin-right: 0.5rem !important;
    padding-left: 0 !important;
    max-width: calc(100% - 3rem) !important;
  }

  html .mb-2.flex.justify-end > .size-10.shrink-0 {
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: block !important;
  }

  html .w-full.max-w-2xl.rounded-2xl {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html .flex.flex-col.items-center.px-4.pt-6,
  html .flex.flex-col.items-center.px-4 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

/* 只隐藏左下角主题设置（equalizer），不要误伤对话列表的「更多/删除」 */
html button[aria-haspopup='menu']:has(.i-ri-equalizer-2-line),
html button[aria-haspopup='menu']:has([class*='i-ri-equalizer']) {
  display: none !important;
}

/* 手机没有悬停。整条仍是原来的按钮，放到气泡左下角外侧，顶边贴住气泡底边，不盖住正文。 */
@media (max-width: 640px) {
  html .chat-answer-container {
    padding-bottom: 3rem !important;
  }

  html .chat-answer-container [data-testid='operation-bar'] [class*='opacity-0'] {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  @layer utilities {
    html .chat-answer-container [data-testid='operation-bar'] {
      left: 0.5rem !important;
      right: auto !important;
      top: auto !important;
      bottom: -30px !important;
      width: max-content !important;
      max-width: none !important;
      justify-content: flex-start !important;
    }

    html .chat-answer-container [data-testid='operation-actions'] {
      display: flex !important;
      flex-shrink: 0 !important;
    }

    html .chat-answer-container [data-testid='operation-actions'] > *:has(.i-ri-clipboard-line),
    html .chat-answer-container [data-testid='operation-actions'] > *:has(.i-ri-clipboard-fill) {
      display: none !important;
    }
  }
}

/* 手机端：对话「更多」始终可点（原逻辑依赖 hover，触屏点不到菜单） */
@media (max-width: 640px) {
  html button[aria-haspopup='menu'][aria-label='更多']:has(.i-ri-more-fill),
  html button[aria-haspopup='menu'][aria-label='更多']:has([class*='i-ri-more']),
  html button[aria-haspopup='menu'][aria-label='More']:has([class*='i-ri-more']) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* 隐藏右上角「重置对话」 */
html button[aria-label='重置对话'],
html button[aria-label='Reset conversation'],
html button[aria-label='重置對話'] {
  display: none !important;
}

/*
 * 头像：Dify 会先画 🤖，再加载签名图。本地同款图垫底 + qa-gate 改 icon_url。
 */
html span:has(> img[src*='file-preview']),
html span:has(> img[src*='image-preview']),
html span:has(> img[src*='qa-brand-icon']) {
  background-color: transparent !important;
  background-image: url('/qa-brand-icon.png?v=8') !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
  box-shadow: none !important;
}

html span:has(> img[src*='file-preview']) > span,
html span:has(> img[src*='image-preview']) > span,
html span:has(> img[src*='qa-brand-icon']) > span {
  background-color: transparent !important;
  background-image: url('/qa-brand-icon.png?v=8') !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 对话气泡旁回答头像：Dify 会强制涂 icon_background，去掉底色和细边 */
html img[alt='answer icon'] {
  background-image: url('/qa-brand-icon.png?v=8');
  background-size: cover;
  background-position: center;
  background-color: transparent !important;
}

html div:has(> img[alt='answer icon']) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 用户侧默认头像：qa-gate 会换成 img；彻底掐掉 iconify 旧标（含背景/遮罩） */
html .question-default-user-icon,
html span.i-custom-public-avatar-user,
html .question-default-user-icon.i-custom-public-avatar-user {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  font-size: 0 !important;
  color: transparent !important;
}

html img.qa-user-avatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 9999px !important;
  background: transparent !important;
}

html div:has(> img.qa-user-avatar),
html .size-10:has(> img.qa-user-avatar),
html .size-10:has(img.qa-user-avatar) {
  position: relative !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
}

/* 进入页：只盖住 Dify 自己的转圈，不另画一套会留下来的画面 */
html:has(#qa-boot-splash) svg[data-dify-spinner],
html:has(#qa-boot-splash) [role='progressbar'] {
  opacity: 0 !important;
}

@keyframes qa-boot-run {
  0% {
    transform: translateX(-36px);
  }
  100% {
    transform: translateX(176px);
  }
}

#qa-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #eaf3fb;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: opacity 0.28s ease;
}

#qa-boot-splash.qa-boot-splash--out {
  opacity: 0;
  pointer-events: none;
}

#qa-boot-splash .qa-boot-track {
  position: relative;
  width: 168px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

#qa-boot-splash .qa-boot-car {
  position: absolute;
  top: -3px;
  left: 0;
  width: 36px;
  height: 8px;
  border-radius: 999px;
  background: #0b6bcb;
  animation: qa-boot-run 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#qa-boot-splash .qa-boot-brand {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: #0f172a;
}

#qa-boot-splash .qa-boot-sub {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
  #qa-boot-splash .qa-boot-car {
    animation: none;
    left: 66px;
  }
}