/* 针对 #ai_result 容器的局部变量定义 */
:root {
  --ai-primary-blue: #007bff;
  /* 主色调/按钮色 */
  --ai-primary-hover: #0056b3;
  /* 按钮悬停色 */
  --ai-bg-white: #ffffff;
  /* 主背景 */
  --ai-bg-light: #f8f9fa;
  /* 聊天背景/AI气泡背景 */
  --ai-text-dark: #333333;
  /* 深色文字 */
  --ai-text-white: #ffffff;
  /* 白色文字 */
  --ai-border-color: #e9ecef;
  /* 边框颜色 */
}

/* 宿主容器样式 (模拟网页布局) */
.page-container {
  width: 100%;
  max-width: 100%;
  height: 70vh;
  padding: 6px;
}

/* --- 核心聊天模块样式 --- */
#chat-widget-container {
  width: 100%;
  height: 100%;
  background-color: var(--ai-bg-white);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  /* 纵向布局 */
  overflow: hidden;
}

/* 1. 头部样式 */
.chat-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--ai-border-color);
  display: flex;
  align-items: center;
  background-color: var(--ai-bg-white);
}

.header-info {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--ai-text-dark);
}

.header-info .avatar-icon {
  margin-right: 10px;
  color: var(--ai-primary-blue);
  font-size: 1.2rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #28a745;
  border-radius: 50%;
  margin-left: 8px;
}

/* 2. 消息列表区域 (重点：滚动与Flex布局) */
.chat-messages {
  flex: 1;
  /* 占据剩余空间 */
  padding: 20px;
  background-color: var(--ai-bg-light);
  /* 浅灰色背景区隔 */
  overflow-y: auto;
  /* 内容过多时滚动 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 消息间距 */
  scroll-behavior: inherit;
  /* 平滑滚动 */
}

/* 通用消息行样式 */
.message {
  display: flex;
  align-items: flex-start;
  max-width: 80%;
  /* 限制气泡最大宽度 */
  animation: fadeIn 0.3s ease;
}

/* 头像样式 */
.message .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 防止压缩 */
  font-size: 14px;
}

/* 气泡样式 */
.message .bubble {
  padding: 12px 16px;
  border-radius: 12px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 10%);
}

.message .bubble .time {
  display: block;
  font-size: 11px;
  margin-top: 5px;
  opacity: 0.7;
  text-align: right;
}

/* --- AI 消息样式 (左对齐) --- */
.ai-message {
  align-self: flex-start;
  /* 左侧对齐 */
}

.ai-message .avatar {
  background-color: #e2e6ea;
  color: #555;
  margin-right: 10px;
}

.ai-message .bubble {
  background-color: var(--ai-bg-white);
  color: var(--ai-text-dark);
  border-top-left-radius: 2px;
  /* 视觉引导 */
}

/* --- 用户消息样式 (右对齐) --- */
.user-message {
  align-self: flex-end;
  /* 右侧对齐 */
  flex-direction: row-reverse;
  /* 头像在右 */
}

.user-message .avatar {
  background-color: var(--ai-primary-blue);
  color: var(--ai-text-white);
  margin-left: 10px;
}

/* 重点：用户气泡蓝色背景 */
.user-message .bubble {
  background-color: var(--ai-primary-blue);
  color: var(--ai-text-white);
  border-top-right-radius: 2px;
}

.user-message .bubble .time {
  color: rgba(255, 255, 255, 0.8);
}

/* 3. 输入区域样式 */
.chat-input-area {
  display: flex;

  padding: 20px;
  background-color: var(--ai-bg-white);
  border-top: 1px solid var(--ai-border-color);
}

.input-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
  background-color: var(--ai-bg-light);
  border-radius: 24px;
  padding: 5px 10px 5px 20px;
  border: 1px solid transparent;
  transition: ai-border-color 0.2s;
}

/* 重点：输入框聚焦时的微交互 */
.input-wrapper:focus-within {
  ai-border-color: var(--ai-primary-blue);
  background-color: var(--ai-bg-white);
}

.new-chat {
  justify-content: center;
  display: flex;
}

.new-chat #new-btn {
  border: none;
  border-radius: 24px;
  width: 100px;
  margin: 5px;
  padding: 5px;
  background-color: var(--ai-primary-blue);
  color: var(--ai-text-white);
}

#new-btn:hover {
  background-color: var(--ai-primary-hover);
}

#user-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  outline: none;
  font-size: 15px;
  color: var(--ai-text-dark);
}

#send-btn {
  background-color: var(--ai-primary-blue);
  color: var(--ai-text-white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

#send-btn:hover {
  background-color: var(--ai-primary-hover);
}

#send-btn:active {
  transform: scale(0.95);
}


#stop-btn {
  background-color: var(--ai-primary-blue);
  color: var(--ai-text-white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

#stop-btn:hover {
  background-color: var(--ai-primary-hover);
}

#stop-btn:active {
  transform: scale(0.95);
}

/* --- 加载动画 (三个跳动的小点) --- */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 5px 0;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  background-color: #aaa;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 移动端适配 */
@media (max-width: 480px) {
  .page-container {
    padding: 0;
    height: 60vh;
    max-width: 100%;
  }

  .message {
    max-width: 70%;
  }

  .bubble {
    max-width: 90%;
  }

  #chat-widget-container {
    border-radius: 0;
  }

  /* .message { max-width: 90%; } */
}


/* 
   * 字体引入 (可选)
   * 推荐使用系统自带的无衬线字体，或者引入 Inter/Roboto
   */
.ai-container {
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
  height: 100%;
}

/* 
   * 核心按钮样式 
   */
.ai-fluid-btn {
  position: relative;
  /* 宽度自适应，加padding撑开 */
  padding: 12px 28px;
  /* 最小宽度，保证不塌陷 */
  min-width: 80px;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 文字和星星的间距 */

  border: none;
  outline: none;
  cursor: pointer;

  /* 
     * 形状：胶囊形，但左下角稍微收一点(8px)，
     * 暗示这是一个“发出的消息”或“气泡” 
     */
  /* border-radius: 50px 50px 50px 12px; */

  /* 
     * 关键：蓝紫白 流体渐变 
     * 颜色逻辑：深蓝底色 -> 紫色过渡 -> 青白色高光 -> 回到深蓝
     */
  background: linear-gradient(270deg,
      #4b0082 0%,
      /* 靛青/深紫 */
      #3a86ff 25%,
      /* 亮蓝 */
      #90e0ef 50%,
      /* 极浅青白 (模拟光感) */
      #3a86ff 75%,
      /* 亮蓝 */
      #6a0dad 100%
      /* 紫色 */
    );
  background-size: 300% 300%;

  /* 阴影：带蓝紫色的投影，增加悬浮感 */
  box-shadow: 0 8px 20px -6px rgba(58, 134, 255, 0.6);

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: flowGradient 6s ease infinite;

  /* 防止文字被选中 */
  user-select: none;
}

/* 
   * 内部玻璃光泽层 
   * 给表面加一层淡淡的白色反光，显得更通透
   */
.ai-fluid-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* 描边宽度 */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 
   * 文字样式 "AI"
   */
.ai-text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  /* 特粗体，清晰明了 */
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* z-index: 2; */
}

/* 
   * 魔法星芒 SVG 
   */
.ai-sparkle {
  width: 18px;
  height: 18px;
  fill: #ffffff;
  /* 让星星稍微上浮一点，视觉平衡 */
  margin-top: -4px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  animation: pulseStar 3s ease-in-out infinite;
}

/* --- 动画定义 --- */

/* 背景流动 */
@keyframes flowGradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* 星星闪烁与旋转 */
@keyframes pulseStar {
  0% {transform: scale(1) rotate(0deg); opacity: 0.9;}
  50% {transform: scale(1.2) rotate(45deg); opacity: 1;}
  100% {transform: scale(1) rotate(90deg);opacity: 0.9;}
}

/* --- 交互状态 --- */

.ai-fluid-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 25px -8px rgba(106, 13, 173, 0.7);
  /* 悬停时背景流速加快 */
  animation-duration: 3s;
}

.ai-fluid-btn:active {
  transform: translateY(1px) scale(0.98);
}


.ai-greeting {
  width: 80%;
}

.bubble-hello {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.bubble-help {
  letter-spacing: 1px;
}

.bubble-help p {
  padding: 2px;
  font-weight: bold;
}

.bubble-hello p {
  padding: 2px;
}

.bubble-help ul>li {
  margin-left: 10px;
}

.bubble-ask {
  margin: 4px 0px;
  font-size: 16px;
  letter-spacing: 1px;
}

.bubble-disclaimer {
  font-size: 12px;
  color: gray;
}

.ai-cando::before {
  content: "✓";
  color: #22c55e;
  margin-right: 8px;
  font-weight: bold;
}

.ai-notdo::before {
  content: "✕";
  color: #ef4444;
  font-size: 12px;
  margin-right: 8px;
}

.manual-call {
  color: #337ab7;
  font-weight: bold;
}


/* 问小易AI-单页 */
.ci-page-container {
  width: 98%;
  max-width: 98%;
  height: 82vh;
}

#ci-chat-widget-container {
  width: 100%;
  height: 99%;
  background-color: var(--ai-bg-white);
  border-radius: 12px;
  /* box-shadow: 0 4px 20px rgba(0,0,0,0.1); */
  display: flex;
  flex-direction: column;
  /* 纵向布局 */
  overflow: hidden;
}

.ci-chat-input-area {
  display: flex;
  padding: 20px;
  background-color: var(--ai-bg-white);
  /* border: 1px solid var(--ai-border-color); */
  border: 1px solid #d9e7f4;
  border-radius: 23px;
  box-shadow: 0 0 5px 0px rgb(154 150 223 / 24%);
}

.ci-chat-messages {
  flex: 1;
  /* 占据剩余空间 */
  padding: 20px;
  /* background-color: var(--ai-bg-light); */
  overflow-y: auto;
  /* 内容过多时滚动 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 消息间距 */
  scroll-behavior: inherit;
  /* 平滑滚动 */
}

/* 问AI图标交互 */
/* 使用 a.className 增加权重，并在关键地方使用 !important */
a.ci-askai-icon {
  /* 基础定位与显示，不受全局 a 影响 */
  display: inline-flex !important;
  align-items: center;
  position: relative;
  text-decoration: none !important;
  font-family: 'SourceHanSansSC-Regular', sans-serif;
  /* 1. 强制重置边框：必须透明，否则流光会被遮挡 */
  border: 2px solid transparent !important;
  border-radius: 5px !important;

  /* 2. 强制覆盖背景：
      第一层为内容区背景（白色），第二层为流光渐变
    */
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(135deg,
      #4b0082 0%,
      #3a86ff 25%,
      #90e0ef 50%,
      #3a86ff 75%,
      #6a0dad 100%) !important;

  /* 3. 关键属性重置 */
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 200% 200% !important;

  /* 4. 动画隔离 */
  animation: flowLight 3s linear infinite !important;

  /* 5. 样式细节重置 */
  color: #4b0082 !important;
  padding: .3em 1em !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  box-sizing: border-box;
  /* 确保边框不撑大容器 */
}

/* 动画定义不受权重影响 */
@keyframes flowLight {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* 悬停状态强制覆盖全局 hover */
a.ci-askai-icon:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 0 8px rgba(58, 134, 255, 0.4) !important;
  color: #3a86ff !important;
}

@keyframes sparkleScale {
  0%,100% {transform: scale(1);}
  50% {transform: scale(1.2); }
}