/* ============================================================
   红色历史问答助手 · 浮窗样式（独立文件，不污染 style.css 主样式）
   ============================================================ */

/* 作用域内补齐 <button> 重置
   背景：红色文学等 7 个页面用 nav-embed.css 替代 style.css，而 nav-embed.css
   缺少 style.css 第 39 行的全局重置「button{border:none;background:none;…}」。
   本组件用的是 <button>，于是保留了浏览器默认的 2px outset 边框，渲染成
   一圈「半灰半白」的立体描边（悬浮球最明显，关闭/发送按钮同理）。
   这里只在本组件作用域内补回重置，不动全站样式，避免影响其它按钮。
   注意：.rcs-chip 自带 1px 发丝边框，刻意不参与 border 重置，仅补字体/外观。 */
.rcs-ai-fab,
.rcs-ai-send,
.rcs-ai-close {
  border: none;
}
.rcs-ai-fab,
.rcs-ai-send,
.rcs-ai-close,
.rcs-chip {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* 悬浮球 */
.rcs-ai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red, #C8102E);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(200, 16, 46, 0.36);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rcs-ai-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 34px rgba(200, 16, 46, 0.42);
}
.rcs-ai-fab:active {
  transform: scale(0.96);
}
.rcs-ai-fab.active {
  background: var(--ink, #1d1d1f);
}
.rcs-ai-fab svg {
  width: 28px;
  height: 28px;
}

/* 聊天面板（桌面 360×520） */
.rcs-ai-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 310;
  width: 360px;
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rcs-pop 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.rcs-ai-panel[hidden] {
  display: none;
}
@keyframes rcs-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 标题栏 */
.rcs-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: #fff;
  border-bottom: 1px solid var(--hairline, #d2d2d7);
}
.rcs-ai-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1d1d1f);
}
.rcs-ai-close {
  font-size: 24px;
  line-height: 1;
  color: var(--gray-3, #86868b);
  transition: color 0.2s ease;
}
.rcs-ai-close:hover {
  color: var(--ink, #1d1d1f);
}

/* 消息区 */
.rcs-ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface, #f5f5f7);
}
.rcs-msg {
  display: flex;
  flex-direction: column;
  max-width: 86%;
}
.rcs-msg-assistant {
  align-self: flex-start;
}
.rcs-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}
.rcs-bubble {
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.rcs-msg-assistant .rcs-bubble {
  background: #fff;
  color: var(--ink, #1d1d1f);
  border: 1px solid var(--hairline, #d2d2d7);
  border-bottom-left-radius: 4px;
}
.rcs-msg-user .rcs-bubble {
  background: var(--red, #C8102E);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.rcs-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rcs-sources .text-link {
  color: var(--red, #C8102E);
}

/* 打字中动效 */
.rcs-typing .rcs-bubble {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.rcs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-3, #86868b);
  animation: rcs-blink 1.2s infinite ease-in-out;
}
.rcs-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.rcs-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes rcs-blink {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* 快捷 chips */
.rcs-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 4px;
  background: #fff;
  border-top: 1px solid var(--hairline, #d2d2d7);
}
.rcs-chip {
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 980px;
  background: var(--surface, #f5f5f7);
  color: var(--gray-2, #6e6e73);
  border: 1px solid var(--hairline, #d2d2d7);
  transition: background 0.15s ease, color 0.15s ease;
}
.rcs-chip:hover {
  background: rgba(200, 16, 46, 0.08);
  color: var(--red, #C8102E);
}

/* 未登录引导：AI 需要真实登录后才能调用云函数（安全规则禁止匿名调用） */
.rcs-login-cta {
  margin-top: 8px;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 980px;
  background: var(--red, #C8102E);
  color: #fff;
  border: 1px solid var(--red, #C8102E);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.rcs-login-cta:hover {
  opacity: 0.85;
}

/* 输入区 */
.rcs-ai-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
  background: #fff;
  border-top: 1px solid var(--hairline, #d2d2d7);
}
.rcs-ai-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--hairline, #d2d2d7);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s ease;
}
.rcs-ai-input textarea:focus {
  border-color: var(--red, #C8102E);
}
.rcs-ai-send {
  flex: none;
  padding: 10px 18px;
  border-radius: 980px;
  background: var(--red, #C8102E);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease;
}
.rcs-ai-send:hover {
  background: #a80d27;
}

/* 移动端：底部抽屉 */
@media (max-width: 640px) {
  .rcs-ai-fab {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .rcs-ai-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 78vh;
    max-height: 78vh;
    border-radius: 22px 22px 0 0;
    animation: rcs-drawer 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  @keyframes rcs-drawer {
    from {
      transform: translateY(100%);
    }
    to {
      transform: none;
    }
  }
}