/* ============================================================
 * chat.css — 智能客服悬浮组件样式
 * ------------------------------------------------------------
 * 适用页面: index.html / downloads.html / docs/index.html / docs/doc.html
 * 组件结构:
 *   .gc-fab        右下角悬浮按钮(收起态入口)
 *   .gc-panel      聊天面板(展开态容器)
 *     .gc-panel__head    顶部标题栏(标题 + 操作按钮)
 *     .gc-panel__body    消息流容器(气泡渲染区)
 *     .gc-panel__foot    底部输入区(快捷问题 + 输入框 + 发送)
 *   .gc-mask       移动端遮罩(点击收起面板)
 *   .gc-form       方案咨询表单弹窗(覆盖在面板上)
 * 双主题策略:
 *   - 默认跟随宿主页 data-theme="dark"(深色科技风)
 *   - [data-theme="light"] 切换为浅色阅读态
 *   - 关键颜色基于 common.css 设计令牌,避免与官网冲突
 * 版本: 1.0  创建日期: 2026-08-17
 * 风险提示:
 *   - 组件所有选择器均加 .gc- 前缀,避免污染宿主页样式
 *   - z-index 9999 确保悬浮在导航/弹窗之上,但低于全屏遮罩
 *   - 移动端面板全屏高度由 keyboard.js 依 visualViewport.height 实时下发(回退 100dvh), 兼顾软键盘避让与 iOS 地址栏伸缩
 * ============================================================ */

/* ============================================================
 * 组件作用域变量
 * ------------------------------------------------------------
 * 不直接复用 :root 变量, 因为组件需在 docs 页(独立主题)
 * 与首页(深色宿主)保持一致视觉, 故在此重新声明, 优先级高于宿主。
 *
 * 2026-10-08 去重(P2-17): 原来 .gc-root / [data-theme="dark"] /
 * [data-theme="light"] 三段除了 --gc-shadow 一档以外逐行相同,
 * "dark" 块里写的其实也是白底(--gc-bg: #ffffff), 并不是真的暗色主题。
 * 现收敛成单一样例源: 面板本体永远浅色, dark/light 只区投影强度
 * (深色宿主页面需要更重的投影把面板"托"出来)。渲染结果与改前一致。
 * ============================================================ */
.gc-root {
  --gc-bg: #ffffff;
  --gc-bg-soft: #F5F7FA;
  --gc-bg-input: #EDF0F5;
  --gc-bubble-user: linear-gradient(135deg, var(--brand), #102A52);
  --gc-bubble-bot: #EDF0F5;
  --gc-ink-1: #1A2231;
  --gc-ink-2: #43526A;
  --gc-ink-3: #5D6E86;
  --gc-line: rgba(11, 30, 61, 0.08);   /* 沉渊半透明, 不用纯黑 */
  --gc-line-strong: #2C3748;           /* 拉伸手柄等深色描线档 (早期此处靠回退值, 令牌一直未定义) */
  --gc-brand: #143467;
  --gc-brand-soft: #2A4A75;
  --gc-green: #22706B;
  --gc-amber: #8A5A17;
  --gc-red: #9F382C;
  --gc-shadow: 0 32px 80px -16px rgba(6, 18, 38, 0.7), 0 8px 24px rgba(6, 18, 38, 0.4);
}

/* 浅色宿主页面: 只覆盖阴影, 余下 token 跟基础块 */
.gc-root[data-theme="light"] {
  --gc-shadow: 0 32px 80px -16px rgba(11, 30, 61, 0.25), 0 8px 24px rgba(11, 30, 61, 0.1);
}

/* ============================================================
 * 根容器与悬浮按钮
 * ============================================================ */
.gc-root {
  position: fixed;
  z-index: 9999;
  right: 24px;
  bottom: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--gc-ink-1);
  line-height: 1.55;
  /* 隔离宿主页样式: all: unset 会破坏子元素,故仅重置自身布局 */
}

/* 悬浮入口 — 2026-10-10 外观优化
   入口直接使用"小昭"头像(见 render.js, ICONS.bot = logo): 头像自带
   naiGrad 圆底(#143467 → #102A52, 与面板内消息头像、登录页吉祥物同源),
   因此按钮本体不再铺渐变底, 只留投影把头像从页面里托出来。
   顺带修掉旧版的问题: 渐变两档明度差仅约 1% 毫无层次、inset 白边塑料感、
   hover 的 scale 弹跳与色板"反馈靠状态"的要求不符、缺键盘焦点态。 */
.gc-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: transparent;   /* 底色由小昭头像的 naiGrad 圆提供 */
  color: #FFFFFF;
  cursor: pointer;
  /* 2026-10-10 质感收敛: 原 0 8px 24px /0.30 偏重。悬浮球是浮在页面上的控件,
     需要脱离感, 用全站浮层档 --shadow-float 即可托起头像, 不必 0.30 浓度 */
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease-soft, ease), box-shadow 0.25s ease;
  position: relative;
}

.gc-fab:hover {
  /* 只做位移, 不做 scale 弹跳 */
  transform: translateY(-2px);
  /* 2026-10-10: 原 /0.38 偏重, hover 抬升一档但仍克制 */
  box-shadow: 0 10px 26px -6px rgba(11, 30, 61, 0.22);
}

.gc-fab:active {
  transform: translateY(0);
}

/* 焦点双环 — 遵循色板 v2.2 ring-inner / ring-outer */
.gc-fab:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #143467;
}

/* 光环 — 默认只留一圈静态细环提示可交互, 仅在有未读消息时才脉冲。
   原因: 常驻 3s 无限脉冲是持续视觉噪音, 与色板"沉稳克制"的调性冲突,
   而且会和未读红点抢注意力 —— 让脉冲只在真的有新消息时出现, 语义才成立。
   :has() 不被支持时退化为静态环(纯装饰, 可接受)。 */
.gc-fab::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(20, 52, 103, 0.28);
  pointer-events: none;
}
.gc-fab:has(.gc-fab__badge:not([hidden]))::after {
  border: 2px solid rgba(20, 52, 103, 0.50);
  animation: gc-fab-pulse 2.4s ease-out infinite;
}
@keyframes gc-fab-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* 面板展开时收掉光环(避免干扰) */
.gc-root:has(.gc-panel.is-open) .gc-fab::after {
  animation: none;
  opacity: 0;
}

.gc-fab svg {
  /* 头像撑满整个按钮: naiGrad 圆底直径即按钮直径 */
  width: 56px;
  height: 56px;
  display: block;
}

/* 未读红点徽章(新消息提示) */
.gc-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-control);
  background: var(--gc-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--gc-bg);
  pointer-events: none;
}

.gc-fab__badge[hidden] {
  display: none;
}

/* ============================================================
 * 聊天面板(默认隐藏,展开时显示)
 * ============================================================ */
.gc-panel {
  position: fixed;
  /* left/top 由 JS 初始化设置(默认右下角) */
  /* 首次展开前 JS 还没写入 left/top, 若只靠 position:fixed 的静态位置,
     面板会被摆到 body 流末尾(视口右侧之外), 造成横向溢出与多余滚动区。
     这里给一对兜底定位(与 JS initPanelPosition 的 24/100 一致), JS 写入内联
     left/top 后自动失效。 */
  right: 24px;
  bottom: 100px;
  width: 380px;
  height: 600px;
  max-height: calc(100vh - 120px);
  background: var(--gc-bg);
  border: 1px solid var(--gc-line);
  border-radius: var(--radius-surface);
  box-shadow: var(--gc-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gc-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 头部(拖动手柄) */
.gc-panel__head {
  flex: 0 0 auto;
  padding: 14px 16px;
  background: var(--gc-bg-soft);
  border-bottom: 1px solid var(--gc-line);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  user-select: none;
}
.gc-panel__head.is-dragging {
  cursor: grabbing;
}

/* 调节大小手柄(右下角) */
.gc-panel__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 10;
  background: linear-gradient(135deg, transparent 50%, var(--gc-line-strong) 50% 60%, transparent 60% 70%, var(--gc-line-strong) 70% 80%, transparent 80%);
  border-bottom-right-radius: 16px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.gc-panel__resize:hover {
  opacity: 1;
}

/* 头像容器:智能客服"小昭"IP 头像(极简几何风格,正方形 SVG)
 * 设计: 40×40 圆形容器,展示蓝色圆形背景+白色对话气泡+眼睛
 * SVG viewBox 0 0 64 64,object-fit: contain 保持比例 */
.gc-panel__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gc-ink-1);
  flex-shrink: 0;
  overflow: hidden;
}
.gc-panel__avatar svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gc-panel__titlewrap {
  flex: 1 1 auto;
  min-width: 0;
}

.gc-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gc-ink-1);
  line-height: 1.3;
}

.gc-panel__subtitle {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--gc-ink-3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.gc-panel__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gc-green);
  box-shadow: 0 0 0 3px rgba(34, 112, 107, 0.2);
}

/* 头部操作按钮(关闭/转人工) */
.gc-icon-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--gc-ink-2);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gc-icon-btn:hover {
  background: var(--gc-line);
  color: var(--gc-ink-1);
}

.gc-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* 转人工按钮(文字按钮,工作时段高亮) */
.gc-transfer-btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--gc-line);
  background: transparent;
  color: var(--gc-ink-2);
  border-radius: var(--radius-control);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gc-transfer-btn:hover {
  border-color: var(--gc-brand);
  color: var(--gc-brand);
}

/* ============================================================
 * 消息流容器
 * ============================================================ */
.gc-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* 阻断滚动链: 消息列表滚到顶/底不再带动背景页(桌面悬浮窗尤其需要) */
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--gc-bg);
  scroll-behavior: smooth;
}

/* 滚动条样式(深色友好) */
.gc-panel__body::-webkit-scrollbar {
  width: 6px;
}
.gc-panel__body::-webkit-scrollbar-thumb {
  background: var(--gc-line);
  border-radius: var(--radius-control);
}
.gc-panel__body::-webkit-scrollbar-thumb:hover {
  background: var(--gc-ink-3);
}

/* 系统提示(欢迎/转人工/超时等) */
.gc-system-msg {
  text-align: center;
  font-size: 12px;
  color: var(--gc-ink-3);
  margin: 8px auto;
  padding: 6px 12px;
  background: var(--gc-bg-soft);
  border-radius: var(--radius-surface);
  max-width: 80%;
  line-height: 1.5;
}

/* 消息气泡 */
.gc-msg {
  display: flex;
  margin-bottom: 14px;
  gap: 8px;
  animation: gc-msg-in 0.3s ease;
}

@keyframes gc-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gc-msg--user {
  flex-direction: row-reverse;
}

.gc-msg__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.gc-msg--bot .gc-msg__avatar {
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.gc-msg--bot .gc-msg__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.gc-msg--user .gc-msg__avatar {
  background: var(--gc-bg-input);
  color: var(--gc-ink-2);
  border: 1px solid var(--gc-line);
}

.gc-msg__main {
  max-width: 78%;
  min-width: 0;
}

/* P0-5 AI 生成显式标识 */
.gc-msg__ai-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--gc-brand, #143467);
  background: rgba(20, 52, 103, 0.08);
  border: 1px solid rgba(20, 52, 103, 0.18);
  border-radius: 999px;
  letter-spacing: .2px;
  user-select: none;
}

.gc-msg__bubble {
  padding: 10px 14px;
  border-radius: var(--radius-surface);
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}

.gc-msg--bot .gc-msg__bubble {
  /* 品牌色渐变左缘: 视觉强化 AI 消息识别(双背景: 3px 渐变条 + 气泡底色)
     多行 background: 简写 + 末尾色会被 Vite/PostCSS 解析坏, 拆成 image + color + 显式 size/position/repeat */
  background-image: linear-gradient(180deg, var(--gc-brand), rgba(20, 52, 103, 0.55));
  background-size: 3px 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: var(--gc-bubble-bot);
  color: var(--gc-ink-1);
  border: 1px solid var(--gc-line);
  border-top-left-radius: 4px;
}

.gc-msg--user .gc-msg__bubble {
  background: var(--gc-bubble-user);
  color: #fff;
  border-top-right-radius: 4px;
}

/* 气泡内链接(指令解析后渲染的卡片按钮) */
.gc-msg__bubble a {
  color: var(--gc-brand-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 气泡底部操作行(反馈/复制) */
.gc-msg__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.gc-msg:hover .gc-msg__actions {
  opacity: 1;
}

.gc-feedback-btn {
  border: none;
  background: transparent;
  color: var(--gc-ink-3);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-control);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.gc-feedback-btn:hover {
  background: var(--gc-line);
  color: var(--gc-ink-2);
}

.gc-feedback-btn.is-active[data-vote="1"] {
  color: var(--gc-green);
}

.gc-feedback-btn.is-active[data-vote="0"] {
  color: var(--gc-red);
}

.gc-feedback-btn svg {
  width: 13px;
  height: 13px;
}

/* P0-5 违规内容举报入口 */
.gc-report-btn { margin-left: 2px; }
.gc-report-btn:hover { color: var(--gc-red, #B3382F); background: rgba(179, 56, 47, 0.08); }

/* 跳转指令卡片(从 [JUMP:/path] 渲染而来) */
.gc-card {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--gc-line);
  border-radius: var(--radius-surface);
  background: var(--gc-bg-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-decoration: none;
  color: var(--gc-ink-1);
}

.gc-card:hover {
  border-color: var(--gc-brand);
  background: var(--gc-bg-input);
}

.gc-card__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  background: rgba(154, 98, 38, 0.15);
  color: var(--gc-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gc-card__icon svg {
  width: 16px;
  height: 16px;
}

.gc-card__main {
  flex: 1;
  min-width: 0;
}

.gc-card__label {
  font-size: 11px;
  color: var(--gc-ink-3);
  margin: 0 0 1px;
}

.gc-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gc-ink-1);
  margin: 0;
}

.gc-card__arrow {
  color: var(--gc-ink-3);
  font-size: 16px;
}

/* AI 正在输入指示器 */
.gc-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--gc-bubble-bot);
  border: 1px solid var(--gc-line);
  border-radius: var(--radius-surface);
  border-top-left-radius: 4px;
}

.gc-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gc-ink-3);
  animation: gc-typing-bounce 1.2s infinite ease-in-out;
}

.gc-typing__dot:nth-child(2) {
  animation-delay: 0.15s;
}
.gc-typing__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes gc-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ============================================================
 * 快捷问题
 * ============================================================ */
.gc-quick {
  flex: 0 0 auto;
  flex-shrink: 0;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  /* 与 foot 同底色, 视觉上与输入区连成底部操作坞; 滚到边缘不串背页 */
  background: var(--gc-bg-soft);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

/* 服务端可下发空快捷集: 无内容时收起, 不残留空条 */
.gc-quick:empty {
  display: none;
}

.gc-quick::-webkit-scrollbar {
  display: none;
}

.gc-quick-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--gc-line);
  background: var(--gc-bg-soft);
  color: var(--gc-ink-2);
  border-radius: var(--radius-control);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.gc-quick-btn:hover {
  border-color: var(--gc-brand);
  color: var(--gc-brand);
  background: var(--gc-bg-input);
}

/* ============================================================
 * 底部输入区
 * ============================================================ */
.gc-panel__foot {
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--gc-line);
  background: var(--gc-bg-soft);
}

.gc-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--gc-bg-input);
  border: 1px solid var(--gc-line);
  border-radius: var(--radius-surface);
  padding: 6px 6px 6px 12px;
  transition: border-color 0.15s ease;
}

.gc-input-wrap.is-focus {
  border-color: var(--gc-brand);
}

.gc-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--gc-ink-1);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  min-height: 48px;
  max-height: 240px;
  padding: 6px 0;
  overflow-y: auto;
}
/* P2-6-7 键盘可达：.gc-input outline:none 后原仅靠 .gc-input-wrap.is-focus(JS 切换)给指示；
   补一条 focus-visible 焦点环，确保纯键盘聚焦也有清晰可见焦点(WCAG 2.4.7)，鼠标聚焦不打扰 */
.gc-input:focus-visible {
  outline: 2px solid var(--gc-brand);
  outline-offset: 2px;
}

.gc-input::placeholder {
  color: var(--gc-ink-3);
}

.gc-send-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-control);
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gc-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gc-send-btn:not(:disabled):hover {
  transform: scale(1.05);
}

.gc-send-btn svg {
  width: 16px;
  height: 16px;
}

/* 输入提示(字数/状态) */
.gc-input-hint {
  margin: 6px 4px 0;
  font-size: 11px;
  color: var(--gc-ink-3);
  display: flex;
  justify-content: space-between;
}

.gc-input-hint.is-error {
  color: var(--gc-red);
}

/* ============================================================
 * 移动端遮罩(点击关闭面板)
 * ============================================================ */
.gc-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.22s ease;
  display: none;
}

.gc-mask.is-visible {
  opacity: 1;
  z-index: 9998;
}

/* ============================================================
 * 方案咨询表单弹窗(覆盖在面板上)
 * ============================================================ */
.gc-form {
  position: absolute;
  inset: 0;
  background: var(--gc-bg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.gc-form.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gc-form__head {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gc-line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.gc-form__title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gc-ink-1);
}

.gc-form__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}

.gc-field {
  margin-bottom: 14px;
}

.gc-field__label {
  display: block;
  font-size: 12px;
  color: var(--gc-ink-2);
  margin-bottom: 6px;
  font-weight: 500;
}

.gc-field__label .gc-req {
  color: var(--gc-red);
  margin-left: 2px;
}

.gc-field__error {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gc-red);
  display: none;
}

.gc-field.is-invalid .gc-field__error {
  display: block;
}

.gc-form__foot {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-top: 1px solid var(--gc-line);
  display: flex;
  gap: 8px;
}

.gc-btn {
  flex: 1;
  height: 38px;
  border: 1px solid var(--gc-line);
  background: transparent;
  color: var(--gc-ink-2);
  border-radius: var(--radius-control);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gc-btn:hover {
  background: var(--gc-bg-input);
  color: var(--gc-ink-1);
}

.gc-btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  border: none;
  font-weight: 500;
}

.gc-btn--primary:hover {
  /* 旧版为 linear-gradient(#85551E, #85551E) 两端同色的退化渐变(mint-teal 改版残留), 已归位全站主按钮 hover 范式 */
  background: var(--brand);
  color: #fff;
}

.gc-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 表单成功态 */
.gc-form__success {
  text-align: center;
  padding: 40px 20px;
}

.gc-form__success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(34, 112, 107, 0.15);
  color: var(--gc-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.gc-form__success-icon svg {
  width: 28px;
  height: 28px;
}

.gc-form__success-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gc-ink-1);
  margin: 0 0 6px;
}

.gc-form__success-desc {
  font-size: 12px;
  color: var(--gc-ink-3);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
 * Toast 提示(轻量)
 * ============================================================ */
.gc-toast {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background: var(--gc-bg-soft);
  color: var(--gc-ink-1);
  border: 1px solid var(--gc-line);
  border-radius: var(--radius-surface);
  padding: 8px 16px;
  font-size: 12px;
  box-shadow: var(--gc-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, bottom 0.2s ease;
  z-index: 20;
}

.gc-toast.is-visible {
  opacity: 1;
  bottom: 90px;
}

.gc-toast.is-error {
  border-color: var(--gc-red);
  color: var(--gc-red);
}

.gc-toast.is-success {
  border-color: var(--gc-green);
  color: var(--gc-green);
}

/* ============================================================
 * 响应式
 * ------------------------------------------------------------
 * 移动端/触屏:面板撑满屏,fab 缩小,显示遮罩
 * 断点与 keyboard.js MOBILE_MQ 一致: 窄屏 / 粗指针平板 / 极矮窗口都走全屏 sheet
 * ============================================================ */
@media (max-width: 640px), (pointer: coarse) and (max-width: 1024px), (max-height: 500px) {
  .gc-root {
    right: 16px;
    /* 预留 Home 指示条(env 在未开 viewport-fit=cover 时为 0, 开启后自动生效) */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .gc-fab {
    width: 50px;
    height: 50px;
  }

  .gc-fab svg {
    width: 50px;
    height: 50px;
  }

  .gc-panel {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    /* 键盘避让: --gc-vv-height 由 keyboard.js 依 visualViewport.height 实时下发
       (键盘开→面板收缩, foot 抬到键盘之上); 无 JS 时回退 100dvh(随 iOS 地址栏伸缩自动校正, 优于 100vh) */
    height: var(--gc-vv-height, 100dvh) !important;
    max-height: none;
    border-radius: 0;
    border: none;
  }

  /* iOS 聚焦不再强制放大页面(输入字号 <16px 会触发自动缩放) */
  .gc-input {
    font-size: 16px;
  }

  .gc-panel__resize {
    display: none;
  }

  .gc-panel__head {
    cursor: default;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  .gc-panel__foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
 * 触屏: 触控目标热区放大至 ≥44px(仅扩点击区, 不改视觉尺寸)
 * ============================================================ */
@media (pointer: coarse) {
  /* 发送/关闭按钮: 用 ::after 撑出居中热区(处于各自留白区, 不串邻) */
  .gc-send-btn,
  .gc-icon-btn {
    position: relative;
  }
  .gc-send-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .gc-icon-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
  }
  .gc-transfer-btn {
    min-height: 40px;
  }
  .gc-quick-btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .gc-feedback-btn {
    padding: 8px 10px;
  }
  /* 触屏无 hover: 反馈/复制操作行常驻可见(原仅 :hover 显露, 手机点不到) */
  .gc-msg__actions {
    opacity: 1;
  }
}

/* 键盘可达: 统一焦点环(补齐无 :focus-visible 的控件) */
.gc-icon-btn:focus-visible,
.gc-transfer-btn:focus-visible,
.gc-quick-btn:focus-visible,
.gc-send-btn:focus-visible,
.gc-feedback-btn:focus-visible {
  outline: 2px solid var(--gc-brand);
  outline-offset: 2px;
}

/* 按下即时反馈(触屏无 hover, 靠 :active 提供触觉回馈) */
.gc-icon-btn:active { background: var(--gc-line); color: var(--gc-ink-1); }
.gc-transfer-btn:active { border-color: var(--gc-brand); color: var(--gc-brand); }
.gc-quick-btn:active { border-color: var(--gc-brand); color: var(--gc-brand); background: var(--gc-bg-input); }
.gc-send-btn:not(:disabled):active { transform: scale(0.94); }
.gc-feedback-btn:active { background: var(--gc-line); color: var(--gc-ink-2); }

/* 无悬停能力设备: 中和会"粘住"的 hover 位移态(以 :active 为准) */
@media (hover: none) {
  .gc-fab:hover {
    transform: none;
    box-shadow: var(--shadow-float);
  }
  .gc-send-btn:not(:disabled):hover {
    transform: none;
  }
}

/* 尊重用户减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .gc-fab,
  .gc-panel,
  .gc-msg,
  .gc-typing__dot,
  .gc-form,
  .gc-toast {
    animation: none !important;
    transition: none !important;
  }
}