/* pages.css — 访客端页面级样式：独立页/嵌入两种模式、状态（空/骨架/错误）、响应式与 320px 适配。 */

/* 独立页：桌面居中卡片；移动端铺满 */
@media (min-width: 600px) {
  body.is-standalone { display: flex; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4); }
  body.is-standalone .kf {
    max-width: 480px;
    height: min(720px, 100vh - 48px);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-md);
  }
  @supports (height: 100dvh) { body.is-standalone .kf { height: min(720px, 100dvh - 48px); } }
}

/* 嵌入模式（?embed=1）：铺满 iframe，右上角关闭按钮 */
body.is-embed { background: var(--bg); }
body.is-embed .kf { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
body.is-embed .kf-header { padding-right: var(--sp-3); }

/* 空态 / 错误态 / 骨架 */
.kf-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-secondary); animation: kf-fade var(--dur-base) var(--ease); }
.kf-state-icon { width: 56px; height: 56px; margin-bottom: var(--sp-2); border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.kf-state-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.kf-state-desc { max-width: 260px; font-size: var(--fs-sm); color: var(--text-muted); }
.kf-state .kf-btn { margin-top: var(--sp-3); }
.kf-state--error .kf-state-title { color: var(--danger); }

.kf-skeleton { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-2) 0; }
.kf-skel { height: 40px; border-radius: var(--r-bubble); background: var(--bg-sunken); animation: kf-pulse 1.1s ease-in-out infinite alternate; }
.kf-skel--sys { width: 40%; height: 18px; align-self: center; border-radius: var(--r-full); }
.kf-skel--left { width: 62%; align-self: flex-start; border-bottom-left-radius: var(--r-bubble-tail); }
.kf-skel--right { width: 48%; align-self: flex-end; background: var(--brand-100); border-bottom-right-radius: var(--r-bubble-tail); }
.kf-skel--short { width: 36%; }

/* 连接状态：根节点 data-conn 驱动头部状态点 */
.kf[data-conn="reconnecting"] .kf-status-dot, .kf[data-conn="connecting"] .kf-status-dot { background: var(--warning); }

/* 触屏设备：麦克风按钮按住说话，禁止长按选中 */
@media (hover: none) and (pointer: coarse) {
  .kf-mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .kf-icon-btn:hover { background: transparent; color: var(--text-secondary); }
  .kf-send:hover:not(:disabled) { background: var(--brand-600); }
}

/* 小屏（基准 360px）与 320px 兜底 */
@media (max-width: 400px) {
  body { font-size: var(--fs-md); }
  .kf-header { min-height: 56px; padding: var(--sp-2) var(--sp-3); }
  .kf-avatar--brand { width: 36px; height: 36px; font-size: var(--fs-md); }
  .kf-scroll { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  .kf-msg-body { max-width: 84%; }
  .kf-composer { padding: var(--sp-2); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
  .kf-composer-row { gap: 2px; }
  .kf-input-wrap { padding: 0 var(--sp-2); }
  .kf-toast { bottom: 76px; }
}
@media (max-width: 340px) {
  .kf-img, .kf-img img { max-width: 200px; }
  .kf-video { width: min(220px, 100%); }
  .kf-audio { min-width: 130px; }
  .kf-file { min-width: 170px; }
  .kf-msg-body { max-width: 88%; }
  .kf-rec-hint { display: none; }
  .kf-modal-card { padding: var(--sp-4); }
}

/* 打印 / 高对比度兜底 */
@media (forced-colors: active) {
  .kf-bubble, .kf-input-wrap, .kf-btn { border: 1px solid CanvasText; }
}